docs: [plans] 서비스 BOM 트리 3단계 구조 개선 계획 추가

2026-03-18 16:34:07 +09:00
parent efce26611b
commit 83b2c697a8
2 changed files with 121 additions and 0 deletions
--- 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/ — 프론트엔드 개발 가이드

--- a/plans/bom-tree-3level-react.md
+++ 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