# ItemForm.tsx 컴포넌트 분리 계획

## 작업 일자: 2025-11-27 (분석) → 2025-11-28 (완료)

## ✅ 최종 결과 요약

| 항목 | Before | After | 감소율 |
|------|--------|-------|--------|
| **index.tsx** | 1,607줄 | **415줄** | **74%** |
| **useState 수** | 25개+ | **0개** (훅으로 이동) | **100%** |
| **파일 수** | 1개 | **21개** | 모듈화 완료 |

---

## 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            # 메인 컴포넌트
```

**작업 내용**: ✅ 완료
- [x] `constants.ts` 생성 및 상수 이동
- [x] `types.ts` 생성 (ItemFormProps 등)
- [x] import 경로 수정

### Phase 2: 섹션 컴포넌트 분리

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

**작업 내용**: ✅ 완료 (2025-11-27)
- [x] `FormHeader.tsx` 분리 (63줄) - ItemForm/ 폴더에 배치
- [x] `ValidationAlert.tsx` 분리 (45줄) - ItemForm/ 폴더에 배치
- [x] `BendingDiagramSection.tsx` 분리 (~300줄) - ItemForm/ 폴더에 배치
- [x] `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)
- [x] `ProductForm.tsx` 분리 (FG 전용 필드)
- [x] `MaterialForm.tsx` 분리 (RM/SM/CS 공통)
- [x] `PartForm.tsx` 분리 (PT 전용, 하위 분리 완료)

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

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

**작업 내용**: ✅ 완료 (2025-11-27)
- [x] `AssemblyPartForm.tsx` 분리
- [x] `BendingPartForm.tsx` 분리
- [x] `PurchasedPartForm.tsx` 분리
- [x] `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)
- [x] ItemFormContext.tsx 생성 (Context Provider)
- [x] useItemFormState.ts 생성 (상태 통합 훅)
- [x] useBOMManagement.ts 생성 (BOM 관리 훅)
- [x] useBendingDetails.ts 생성 (전개도 계산 훅)
- [x] 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**: 유연한 컴포넌트 조합

### 권장 접근법
```typescript
// 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)
- [x] constants.ts 분리
- [x] types.ts 분리
- [x] ValidationAlert.tsx 분리
- [x] FormHeader.tsx 분리

### Phase 2: 섹션 분리 ✅ 완료 (2025-11-27)
- [x] BendingDiagramSection.tsx 분리
- [x] BOMSection.tsx 분리

### Phase 3: 폼 분리 ✅ 완료 (2025-11-27)
- [x] MaterialForm.tsx 분리 (RM/SM/CS)
- [x] ProductForm.tsx 분리 (FG) + ProductCertificationSection
- [x] PartForm.tsx 분리 (PT)
- [x] forms/index.ts export 파일 생성
- [x] index.tsx에서 ProductForm, ProductCertificationSection 적용

### Phase 4: 부품 폼 분리 ✅ 완료 (2025-11-27)
- [x] AssemblyPartForm.tsx 분리 (~300줄)
- [x] BendingPartForm.tsx 분리 (~280줄)
- [x] PurchasedPartForm.tsx 분리 (~270줄)
- [x] parts/index.ts export 파일 생성
- [x] PartForm.tsx에서 하위 컴포넌트 적용 (~273줄로 감소)

### Phase 5: 훅 & 컨텍스트 ✅ 완료 (2025-11-27)
- [x] context/ItemFormContext.tsx 생성 (~80줄)
- [x] context/index.ts export 파일 생성
- [x] hooks/useItemFormState.ts 생성 (~364줄) - 25+ useState 통합
- [x] hooks/useBOMManagement.ts 생성 (~180줄) - BOM 라인 관리
- [x] hooks/useBendingDetails.ts 생성 (~150줄) - 전개도 계산
- [x] hooks/index.ts export 파일 생성

### Phase 6: index.tsx에 훅 적용 ✅ 완료 (2025-11-28)
- [x] useItemFormState 훅을 index.tsx에 적용
- [x] 25+ useState → 훅에서 구조 분해 할당
- [x] handleItemTypeChange → resetAllStates 헬퍼 함수 활용
- [x] 미사용 import 정리
- [x] 빌드 테스트 통과

### Phase 7: 테스트 & 검증 (추후 진행)
- [ ] 모든 품목 유형 등록 테스트
- [ ] 수정 모드 테스트
- [ ] 폼 검증 테스트
- [ ] BOM 추가/삭제 테스트

---

## 9. 최종 파일 구조

```
src/components/items/ItemForm/
├── index.tsx                 (415줄) ← 1,607줄에서 74% 감소
├── constants.ts              (72줄)
├── types.ts                  (50줄)
├── ValidationAlert.tsx       (45줄)
├── FormHeader.tsx            (63줄)
├── BendingDiagramSection.tsx (~300줄)
├── BOMSection.tsx            (~280줄)
├── context/
│   ├── ItemFormContext.tsx   (~80줄)
│   └── index.ts
├── hooks/
│   ├── useItemFormState.ts   (364줄) ← 상태 관리 통합
│   ├── useBOMManagement.ts   (~180줄)
│   ├── useBendingDetails.ts  (~150줄)
│   └── index.ts
└── forms/
    ├── index.ts
    ├── ProductForm.tsx       (~120줄)
    ├── MaterialForm.tsx      (~350줄)
    ├── PartForm.tsx          (~273줄)
    └── parts/
        ├── index.ts
        ├── AssemblyPartForm.tsx   (~300줄)
        ├── BendingPartForm.tsx    (~280줄)
        └── PurchasedPartForm.tsx  (~270줄)
```

**총 21개 파일로 모듈화 완료**