# 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",
          "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개 화면)
