jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: 비즈니스 로직 요청 양식 검증 및 화면 분석 요약 추가

Browse Source 
- 비즈니스 로직 요청 시 필수 양식을 명시하고, 미준수 시 대응 방안을 추가하였습니다.
- 전체 화면 분석 요약을 업데이트하여 컴포넌트 커버리지 및 신규 컴포넌트 개발 우선순위를 명확히 하였습니다.
- 폴더 구조를 정리하고, 각 컴포넌트의 구현 상태를 표기하여 개발자들이 쉽게 참고할 수 있도록 하였습니다.
This commit is contained in:
kjs
2026-01-30 14:13:44 +09:00
parent 7a9ec8d02c
commit 4ab2761c82
26 changed files with 6765 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

255
docs/screen-implementation-guide/01_master-data/bom.md Normal file
View File

@@ -0,0 +1,255 @@
# 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개 화면)