ERP-node/docs/screen-implementation-guide/01_master-data/bom.md

BOM관리 화면 구현 가이드

화면명: BOM관리 파일: BOM관리.html 분류: 기준정보 구현 가능: ⚠️ 부분 (트리 뷰 컴포넌트 필요)

---

1. 화면 개요

BOM(Bill of Materials) 관리 화면으로, 제품의 부품 구성을 트리 구조로 관리합니다.

핵심 기능

• BOM 목록 조회/검색
• BOM 구조 트리 표시 (정전개/역전개)
• BOM 등록/수정/삭제
• 버전/차수 관리
• 엑셀 업로드/다운로드

---

2. 화면 레이아웃

┌─────────────────────────────────────────────────────────────────┐
│ [품목코드] [품목명] [품목구분▼] [버전▼] [사용여부▼] [초기화][조회]│
│                                          [사용자옵션][업로드][다운로드]│
├───────────────────────┬─────────────────────────────────────────┤
│ 📦 BOM 목록            │ 📋 BOM 상세정보                          │
│ ───────────────       │ [이력] [버전] [수정] [삭제]              │
│ [신규등록]             │ ─────────────────────────               │
│ ┌──────────────────┐  │ 품목코드: PRD-001                       │
│ │□|코드|품목명|구분..│  │ 품목명: 제품A                           │
│ │□|P01|제품A |제품  │  │ 기준수량: 1                             │
│ │□|P02|제품B |제품  │  ├─────────────────────────────────────────┤
│ └──────────────────┘  │ 🌳 BOM 구조                              │
│                       │ 기준수량:[1] [트리|레벨] [정전개|역전개]  │
│     리사이저 ↔        │ ─────────────────────────               │
│                       │ ▼ PRD-001 제품A (1.00 EA)               │
│                       │   ├─ MAT-001 원자재A (2.00 KG)          │
│                       │   └─ SEM-001 반제품A (1.00 EA)          │
│                       │       └─ MAT-002 원자재B (0.50 KG)      │
└───────────────────────┴─────────────────────────────────────────┘

---

3. V2 컴포넌트 매핑

3.1 구현 가능 영역

HTML 영역	V2 컴포넌트	상태
검색 섹션	v2-table-search-widget	✅ 가능
BOM 목록 테이블	v2-table-list	✅ 가능
분할 패널	v2-split-panel-layout	⚠️ 부분

3.2 신규 컴포넌트 필요

HTML 영역	필요 컴포넌트	재활용 가능성
BOM 트리 구조	v2-tree-view	3개 화면 (부서정보, 메뉴관리)
BOM 등록 모달	v2-modal-form	모든 화면

---

4. 테이블 정의

4.1 BOM 목록 테이블 (좌측)

columns: [
  { id: 'checkbox', type: 'checkbox', width: 50 },
  { id: 'item_code', label: '품목코드', width: 100 },
  { id: 'item_name', label: '품목명', width: 150 },
  { id: 'item_type', label: '품목구분', width: 80 },
  { id: 'version', label: '버전', width: 70 },
  { id: 'revision', label: '차수', width: 70 },
  { id: 'status', label: '사용여부', width: 80 },
  { id: 'reg_date', label: '등록일', width: 100 }
]

4.2 BOM 상세 필드

detailFields: [
  { id: 'item_code', label: '품목코드' },
  { id: 'item_name', label: '품목명' },
  { id: 'item_type', label: '품목구분' },
  { id: 'unit', label: '단위' },
  { id: 'base_qty', label: '기준수량' },
  { id: 'version', label: '버전' },
  { id: 'revision', label: '차수' },
  { id: 'status', label: '사용여부' },
  { id: 'remark', label: '비고' }
]

---

5. 검색 조건

필드명	컴포넌트	옵션
품목코드	v2-input	placeholder: "품목코드"
품목명	v2-input	placeholder: "품목명"
품목구분	v2-select	제품, 반제품, 원자재
버전	v2-select	1.0, 2.0, 3.0
사용여부	v2-select	사용, 미사용

---

6. 특수 기능: BOM 트리 (신규 컴포넌트 필요)

6.1 트리 노드 구조

interface BomTreeNode {
  id: string;
  itemCode: string;
  itemName: string;
  itemType: string;
  quantity: number;
  unit: string;
  level: number;
  children: BomTreeNode[];
  expanded: boolean;
}

6.2 정전개 vs 역전개

모드	설명
정전개 (Forward)	선택 품목 → 하위 구성품목 표시
역전개 (Reverse)	선택 품목 → 상위 사용처 표시

6.3 필요 인터랙션

• 노드 클릭: 펼치기/접기
• 전체 펼치기/접기 버튼
• 레벨 뷰/트리 뷰 전환
• 기준수량 변경 시 수량 재계산

---

7. 모달 폼 정의

7.1 BOM 등록 모달

modalFields: [
  { id: 'item_code', label: '품목코드', type: 'autocomplete', required: true },
  { id: 'item_name', label: '품목명', type: 'autocomplete', required: true },
  { id: 'item_type', label: '품목구분', type: 'select', required: true },
  { id: 'unit', label: '단위', type: 'select', required: true },
  { id: 'base_qty', label: '기준수량', type: 'number', required: true },
  { id: 'version', label: '버전', type: 'text', readonly: true },
  { id: 'revision', label: '차수', type: 'text', readonly: true },
  { id: 'status', label: '사용여부', type: 'radio', options: ['사용', '미사용'] },
  { id: 'remark', label: '비고', type: 'textarea' }
]

// 하위 품목 섹션
childItemsSection: {
  title: '하위 품목 구성',
  addButton: '품목추가',
  columns: [
    { id: 'item_code', label: '품목코드' },
    { id: 'item_name', label: '품목명' },
    { id: 'quantity', label: '소요량' },
    { id: 'unit', label: '단위' },
    { id: 'loss_rate', label: '로스율(%)' },
    { id: 'actions', label: '' }
  ]
}

---

8. 현재 구현 가능 범위

✅ 가능

• 검색 영역 (v2-table-search-widget)
• BOM 목록 테이블 (v2-table-list)
• 분할 패널 레이아웃 (v2-split-panel-layout)
• 기본 상세 정보 표시

⚠️ 부분 가능 (대체 구현)

• BOM 구조: 트리 대신 레벨 테이블로 표시 가능

❌ 불가능 (신규 개발 필요)

• 진정한 트리 뷰 (접기/펼치기)
• 정전개/역전개 전환
• 하위 품목 동적 추가 모달

---

9. 간소화 구현 JSON

{
  "screen_code": "BOM_MAIN",
  "screen_name": "BOM관리",
  "components": [
    {
      "type": "v2-table-search-widget",
      "config": {
        "searchFields": [
          { "type": "input", "id": "item_code", "placeholder": "품목코드" },
          { "type": "input", "id": "item_name", "placeholder": "품목명" },
          { "type": "select", "id": "item_type", "placeholder": "품목구분" },
          { "type": "select", "id": "status", "placeholder": "사용여부" }
        ],
        "buttons": [
          { "label": "초기화", "action": "reset" },
          { "label": "조회", "action": "search", "variant": "primary" }
        ]
      }
    },
    {
      "type": "v2-split-panel-layout",
      "config": {
        "masterPanel": {
          "title": "BOM 목록",
          "entityId": "bom_header",
          "columns": [
            { "id": "item_code", "label": "품목코드", "width": 100 },
            { "id": "item_name", "label": "품목명", "width": 150 },
            { "id": "item_type", "label": "품목구분", "width": 80 },
            { "id": "version", "label": "버전", "width": 70 }
          ]
        },
        "detailPanel": {
          "title": "BOM 상세정보",
          "entityId": "bom_detail",
          "relationType": "one-to-many"
        }
      }
    }
  ]
}

---

10. 개발 권장사항

1. 1단계: 현재 컴포넌트로 기본 CRUD 구현
2. 2단계: v2-tree-view 개발 후 BOM 구조 통합
3. 3단계: 버전/차수 관리 기능 추가

예상 재활용: v2-tree-view는 부서정보, 메뉴관리에서도 사용 가능 (3개 화면)