diff --git a/INDEX.md b/INDEX.md index a4531e5..34c85ae 100644 --- a/INDEX.md +++ b/INDEX.md @@ -305,6 +305,7 @@ DB 도메인별: | [notification-sound-react-request.md](plans/notification-sound-react-request.md) | 알림설정 soundType React 구현 요청 (음원 배치, 미리듣기 실제 재생, API 연동 완료) | | [usage-subscription-unification.md](plans/usage-subscription-unification.md) | 이용현황+구독관리 통합 계획 (AI 토큰 사용량, 저장공간, 메뉴 통합) | | [usage-react-request.md](plans/usage-react-request.md) | 이용현황(구독관리 통합) React 구현 요청서 (API 완료, 타입/컴포넌트/와이어프레임 포함) | +| [bom-tree-3level-react.md](plans/bom-tree-3level-react.md) | 서비스 BOM 트리 3단계 구조 개선 계획 (FG→카테고리→PT, MNG 구현 참고) | ### frontend/integration/ — 프론트엔드 개발 가이드 diff --git a/plans/bom-tree-3level-react.md b/plans/bom-tree-3level-react.md new file mode 100644 index 0000000..a994345 --- /dev/null +++ b/plans/bom-tree-3level-react.md @@ -0,0 +1,120 @@ +# 서비스 BOM 트리 3단계 구조 개선 + +> **작성일**: 2026-03-18 +> **상태**: 계획 + +--- + +## 1. 개요 + +### 1.1 목적 + +서비스(React) 품목관리 > 제품상세의 BOM 트리를 MNG와 동일한 3단계 계층 구조로 개선한다. + +### 1.2 현재 상태 + +| 항목 | MNG (백오피스) | React (서비스) | +|------|-------------|--------------| +| BOM 트리 구조 | ✅ 3단계 (FG → 카테고리 → PT) | ❌ 2단계 (FG → PT) | +| 카테고리 그룹 | 주자재, 모터, 제어기, 절곡품, 부자재, 검사비 | 없음 (플랫 리스트) | +| 접힘/펼침 | ✅ chevron 토글 | ✅ 토글 있음 | + +### 1.3 목표 구조 + +``` +현재 (2단계): +▼ FG KSS02 스크린 SUS마감 벽면형 + PT 스크린 실리카 x10.65 + PT 모터 150K(S) (220V) x1 + PT 제어기 노출형 x1 + PT 케이스 500*380 x3.22 + ...17건 플랫 리스트 + +개선 후 (3단계): +▼ FG KSS02 스크린 SUS마감 벽면형 + ▼ 주자재 (1건) + PT 스크린 실리카 x10.65 + ▼ 모터 (1건) + PT 모터 150K(S) (220V) x1 + ▼ 제어기 (1건) + PT 제어기 노출형 x1 + ▼ 절곡품 (9건) + PT 케이스 500*380 x3.22 + PT 케이스용 연기차단재 x3.22 + ... + ▼ 부자재 (4건) + PT 감기샤프트 5인치 6m x1 + ... + ▼ 검사비 (1건) + PT 검사비 x1 +``` + +--- + +## 2. 구현 범위 + +### 2.1 백엔드 (API) + +BOM 데이터에 이미 `category` 필드가 포함되어 있으므로, API 응답에서 카테고리 그룹 노드를 생성하면 된다. + +**MNG 구현 참고**: `mng/app/Services/ItemManagementService.php`의 `buildBomNode()` 메서드 + +``` +핵심 로직: +1. BOM 항목에 category 필드가 있으면 카테고리별 그룹화 +2. 가상 카테고리 노드(item_type='CAT') 생성 +3. 각 카테고리 노드 하위에 실제 PT 품목 배치 +``` + +**변경 대상**: API의 BOM 트리 응답 엔드포인트 (또는 React에서 프론트엔드 그룹화) + +### 2.2 프론트엔드 (React) + +**대상 페이지**: `/production/screen-production/{code}?mode=view&type=FG&id={id}` + +**변경 방식 (2가지 선택지)**: + +| 방식 | 설명 | 장점 | 단점 | +|------|------|------|------| +| A. API 응답 변경 | API에서 3단계 트리 반환 | React 수정 최소화 | API 하위 호환성 확인 필요 | +| B. React 그룹화 | BOM 데이터의 category 필드로 프론트에서 그룹화 | API 변경 불필요 | React 컴포넌트 수정 필요 | + +**권장: B 방식** — BOM 데이터에 이미 `category`가 있으므로 React에서 그룹화하는 것이 API 영향 없이 안전하다. + +--- + +## 3. BOM 데이터 구조 + +`items.bom` JSON 필드에 저장된 카테고리 정보: + +```json +[ + {"child_item_id": 15657, "child_item_code": "EST-RAW-슬랫-방화", "quantity": 10.65, "unit": "m²", "category": "주자재"}, + {"child_item_id": 15627, "child_item_code": "EST-MOTOR-220V-150K", "quantity": 1, "unit": "EA", "category": "모터"}, + {"child_item_id": 15578, "child_item_code": "BD-케이스-500*380", "quantity": 3.22, "unit": "m", "category": "절곡품"}, + ... +] +``` + +`category` 필드 값: `주자재`, `모터`, `제어기`, `절곡품`, `부자재`, `검사비` + +--- + +## 4. 관련 파일 + +| 프로젝트 | 파일 | 역할 | +|---------|------|------| +| MNG | `app/Services/ItemManagementService.php` | 3단계 트리 구현 (참고용) | +| React | BOM 트리 컴포넌트 | 개선 대상 | +| API | BOM 조회 엔드포인트 | 방식 A 선택 시 변경 | + +--- + +## 관련 문서 + +- `changes/20260318_item-management-bom-tree.md` — MNG BOM 트리 3단계 구현 완료 내역 +- `rules/item-policy.md` — 품목 정책 + +--- + +**최종 업데이트**: 2026-03-18