sam-react-prod/claudedocs/item-master/[PLAN-2025-11-27] item-form-component-separation.md

ItemForm.tsx 컴포넌트 분리 계획

작업 일자: 2025-11-27 (분석)

---

1. 현재 상태

항목	내용
파일 경로	src/components/items/ItemForm.tsx
파일 크기	2,600줄
useState 수	25개+
주요 섹션	5개 Card
복잡도	높음 (품목유형별 조건부 렌더링)

---

2. 구조 분석

ItemForm.tsx (2,600줄)
├── Constants (62-134) ────────────────── 72줄
│   ├── PART_TYPE_CATEGORIES
│   └── PART_ITEM_NAMES
│
├── State & Hooks (142-218) ───────────── 76줄
│   └── 25+ useState hooks
│
├── Functions (220-409) ───────────────── 190줄
│   ├── generateItemCode()
│   ├── handleFormSubmit()
│   └── handleItemTypeChange()
│
└── JSX (411-2599) ────────────────────── 2,188줄
    ├── Validation Alert (414-459) ────── 45줄
    ├── Header (461-499) ──────────────── 38줄
    ├── 기본 정보 Card (501-1780) ──────── 1,279줄 ⚠️ 가장 큼
    │   ├── FG (제품) ─────── 102줄
    │   ├── PT (부품) ─────── 822줄 ⚠️
    │   │   ├── ASSEMBLY ──── 216줄
    │   │   ├── BENDING ───── 464줄
    │   │   └── PURCHASED ─── 223줄
    │   └── RM/SM/CS ──────── 320줄
    │
    ├── FG 비고 섹션 (1784-1940) ────────── 156줄
    ├── 전개도 Card (1942-2280) ─────────── 338줄
    └── BOM Card (2281-2584) ────────────── 303줄

---

3. 분리 계획

Phase 1: 상수 분리 (즉시 가능)

src/components/items/ItemForm/
├── constants.ts         # PART_TYPE_CATEGORIES, PART_ITEM_NAMES
├── types.ts             # 타입 정의
└── index.tsx            # 메인 컴포넌트

작업 내용: ✅ 완료

• constants.ts 생성 및 상수 이동
• types.ts 생성 (ItemFormProps 등)
• import 경로 수정

Phase 2: 섹션 컴포넌트 분리

src/components/items/ItemForm/
├── sections/
│   ├── FormHeader.tsx              # 헤더 + 저장/취소 버튼
│   ├── ValidationAlert.tsx         # 폼 에러 Alert
│   ├── BendingDiagramSection.tsx   # 전개도 카드 (338줄)
│   └── BOMSection.tsx              # 부품 구성 카드 (303줄)

작업 내용: ✅ 완료 (2025-11-27)

• FormHeader.tsx 분리 (63줄) - ItemForm/ 폴더에 배치
• ValidationAlert.tsx 분리 (45줄) - ItemForm/ 폴더에 배치
• BendingDiagramSection.tsx 분리 (~300줄) - ItemForm/ 폴더에 배치
• BOMSection.tsx 분리 (~280줄) - ItemForm/ 폴더에 배치

Phase 3: 품목 유형별 폼 분리

src/components/items/ItemForm/
├── forms/
│   ├── ProductForm.tsx      # FG (제품) - 102줄
│   ├── PartForm.tsx         # PT (부품) - 822줄 → 추가 분리 필요
│   └── MaterialForm.tsx     # RM/SM/CS - 320줄

작업 내용: ✅ 완료 (2025-11-27)

• ProductForm.tsx 분리 (FG 전용 필드)
• MaterialForm.tsx 분리 (RM/SM/CS 공통)
• PartForm.tsx 분리 (PT 전용, 하위 분리 완료)

Phase 4: 부품 유형별 추가 분리

src/components/items/ItemForm/forms/
├── parts/
│   ├── AssemblyPartForm.tsx    # 조립 부품 - ~300줄
│   ├── BendingPartForm.tsx     # 절곡 부품 - ~280줄
│   └── PurchasedPartForm.tsx   # 구매 부품 - ~270줄

작업 내용: ✅ 완료 (2025-11-27)

• AssemblyPartForm.tsx 분리
• BendingPartForm.tsx 분리
• PurchasedPartForm.tsx 분리
• parts/index.ts export 파일 생성

Phase 5: 공통 컴포넌트 & 훅

src/components/items/ItemForm/
├── context/
│   ├── ItemFormContext.tsx    # 폼 상태 컨텍스트
│   └── index.ts               # export 파일
└── hooks/
    ├── useItemFormState.ts     # 25+ useState 통합
    ├── useBOMManagement.ts     # BOM 라인 관리
    ├── useBendingDetails.ts    # 전개도 계산
    └── index.ts                # export 파일

작업 내용: ✅ 완료 (2025-11-27)

• ItemFormContext.tsx 생성 (Context Provider)
• useItemFormState.ts 생성 (상태 통합 훅)
• useBOMManagement.ts 생성 (BOM 관리 훅)
• useBendingDetails.ts 생성 (전개도 계산 훅)
• export 파일 생성

---

4. 분리 우선순위

우선순위	대상	효과	난이도	API 의존
🔴 1	constants.ts	즉시 분리 가능	쉬움	❌
🔴 2	BOMSection.tsx	독립적, 재사용 가능	쉬움	⚠️ 검색만
🟡 3	BendingDiagramSection.tsx	독립적	쉬움	❌
🟡 4	ValidationAlert.tsx	독립적	쉬움	❌
🟡 5	FormHeader.tsx	독립적	쉬움	❌
🟡 6	MaterialForm.tsx	명확한 경계	중간	❌
🟡 7	ProductForm.tsx	명확한 경계	중간	❌
🟢 8	PartForm + 하위 분리	복잡한 상태 의존성	어려움	❌
🟢 9	useItemFormState.ts	전체 리팩토링 필요	어려움	❌

---

5. 주의사항

상태 공유 문제

• 품목 유형별 폼이 react-hook-form의 setValue, getValues 공유
• 하위 폼들이 부모의 선택 상태에 의존
• 품목코드 자동생성 로직이 여러 필드 값 조합

해결 방안

1. Context 패턴: ItemFormContext로 공유 상태 관리
2. Props Drilling: 필요한 props만 하위 컴포넌트에 전달
3. Render Props: 유연한 컴포넌트 조합

권장 접근법

// ItemFormContext.tsx
interface ItemFormContextType {
  form: UseFormReturn<CreateItemFormData>;
  selectedItemType: ItemType | '';
  selectedPartType: string;
  // ... 공유 상태
}

// 하위 컴포넌트에서 사용
const { form, selectedItemType } = useItemFormContext();

---

6. 예상 결과

Before

src/components/items/
├── ItemForm.tsx (2,600줄) ← 모놀리식

After

src/components/items/ItemForm/
├── index.tsx (300줄) ← 메인 컴포넌트
├── constants.ts (72줄)
├── types.ts (50줄)
├── context.tsx (100줄)
├── sections/
│   ├── FormHeader.tsx (50줄)
│   ├── ValidationAlert.tsx (50줄)
│   ├── BendingDiagramSection.tsx (350줄)
│   └── BOMSection.tsx (320줄)
├── forms/
│   ├── ProductForm.tsx (120줄)
│   ├── MaterialForm.tsx (350줄)
│   └── PartForm.tsx (200줄)
│       └── parts/
│           ├── AssemblyPartForm.tsx (230줄)
│           ├── BendingPartForm.tsx (480줄)
│           └── PurchasedPartForm.tsx (240줄)
├── components/
│   ├── UnitSelect.tsx (60줄)
│   └── StatusSelect.tsx (50줄)
└── hooks/
    ├── useItemFormState.ts (100줄)
    ├── useBOMManagement.ts (80줄)
    └── useBendingDetails.ts (60줄)

총 파일 수: 1개 → 18개 최대 파일 크기: 2,600줄 → ~480줄 평균 파일 크기: ~150줄

---

7. 관련 파일

• src/components/items/ItemForm.tsx - 메인 대상
• src/components/items/ItemTypeSelect.tsx - 이미 분리됨
• src/components/items/FileUpload.tsx - 이미 분리됨
• src/components/items/DrawingCanvas.tsx - 이미 분리됨
• src/components/items/BOMManagementSection.tsx - 참고용 (다른 BOM 컴포넌트)
• src/lib/utils/validation.ts - Zod 스키마

---

8. 작업 체크리스트

Phase 1: 즉시 가능 (API 독립적) ✅ 완료 (2025-11-27)

• constants.ts 분리
• types.ts 분리
• ValidationAlert.tsx 분리
• FormHeader.tsx 분리

Phase 2: 섹션 분리 ✅ 완료 (2025-11-27)

• BendingDiagramSection.tsx 분리
• BOMSection.tsx 분리

Phase 3: 폼 분리 ✅ 완료 (2025-11-27)

• MaterialForm.tsx 분리 (RM/SM/CS)
• ProductForm.tsx 분리 (FG) + ProductCertificationSection
• PartForm.tsx 분리 (PT)
• forms/index.ts export 파일 생성
• index.tsx에서 ProductForm, ProductCertificationSection 적용

Phase 4: 부품 폼 분리 ✅ 완료 (2025-11-27)

• AssemblyPartForm.tsx 분리 (~300줄)
• BendingPartForm.tsx 분리 (~280줄)
• PurchasedPartForm.tsx 분리 (~270줄)
• parts/index.ts export 파일 생성
• PartForm.tsx에서 하위 컴포넌트 적용 (~273줄로 감소)

Phase 5: 훅 & 컨텍스트 ✅ 완료 (2025-11-27)

• context/ItemFormContext.tsx 생성 (~80줄)
• context/index.ts export 파일 생성
• hooks/useItemFormState.ts 생성 (~280줄) - 25+ useState 통합
• hooks/useBOMManagement.ts 생성 (~180줄) - BOM 라인 관리
• hooks/useBendingDetails.ts 생성 (~150줄) - 전개도 계산
• hooks/index.ts export 파일 생성

Phase 6: 테스트 & 검증

• 모든 품목 유형 등록 테스트
• 수정 모드 테스트
• 폼 검증 테스트
• BOM 추가/삭제 테스트