256 lines
8.5 KiB
Markdown
256 lines
8.5 KiB
Markdown
# 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개 화면)
|