Files
sam-docs/plans/bom-tree-3level-react.md

3.7 KiB

서비스 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.phpbuildBomNode() 메서드

핵심 로직:
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 필드에 저장된 카테고리 정보:

[
  {"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