# 서비스 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