# 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 목록 테이블 (좌측) ```typescript 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 상세 필드 ```typescript 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 트리 노드 구조 ```typescript 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 등록 모달 ```typescript 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 ```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개 화면)