# DynamicItemForm 훅 분리 계획서

## 개요

| 항목 | 내용 |
|------|------|
| 대상 파일 | `src/components/items/DynamicItemForm/index.tsx` |
| 현재 줄 수 | 2,161줄 |
| 목표 줄 수 | ~900줄 이하 |
| 작업 유형 | 로직 분리 (기능 변경 없음) |
| 예상 리스크 | 낮음 |

---

## Phase 1: 컴포넌트 분리 (~386줄 감소)

### 1.1 FormHeader 컴포넌트 분리 ✅
- [x] `components/FormHeader.tsx` 파일 생성
- [x] FormHeader 함수 이동 (56-107줄, ~51줄)
- [x] Props 타입 정의
- [x] index.tsx에서 import 및 사용
- [x] 빌드 확인 (Phase 1 완료 후 일괄)

### 1.2 ValidationAlert 컴포넌트 분리 ✅
- [x] `components/ValidationAlert.tsx` 파일 생성
- [x] ValidationAlert 함수 이동 (112-141줄, ~30줄)
- [x] Props 타입 정의
- [x] index.tsx에서 import 및 사용
- [x] 빌드 확인 (Phase 1 완료 후 일괄)

### 1.3 DynamicSectionRenderer 삭제 ✅
- [x] 현재 사용 여부 최종 확인 → 미사용 확인됨
- [x] 미사용 확인 시 코드 삭제 (~82줄)
- [x] types.ts의 DynamicSectionRendererProps도 삭제
- [x] 빌드 확인 (Phase 1 완료 후 일괄)

### 1.4 FileUploadFields 컴포넌트 분리 ✅
- [x] `components/FileUploadFields.tsx` 파일 생성 (~220줄)
- [x] 시방서/인정서 업로드 JSX 이동 (~173줄 감소)
- [x] Props 타입 정의 (FileUploadFieldsProps)
- [x] index.tsx에서 import 및 사용
- [x] lucide-react 불필요 import 정리
- [x] 빌드 확인 (Phase 1 완료 후 일괄)

### 1.5 DuplicateCodeDialog 컴포넌트 분리 ✅
- [x] `components/DuplicateCodeDialog.tsx` 파일 생성 (~53줄)
- [x] AlertDialog JSX 이동
- [x] Props 타입 정의 (DuplicateCodeDialogProps)
- [x] index.tsx에서 import 및 사용
- [x] 빌드 확인 (Phase 1 완료 후 일괄)

**Phase 1 완료 후 예상:** ~1,775줄
**Phase 1 실제 결과:** 1,842줄 (2,161줄 → 1,842줄, 319줄 감소) ✅

---

## Phase 2: 품목코드 생성 훅 분리 (~300줄 감소) ✅

### 2.1 useItemCodeGeneration 훅 생성 ✅
- [x] `hooks/useItemCodeGeneration.ts` 파일 생성 (~420줄)
- [x] 타입 정의 (입력/출력) - UseItemCodeGenerationParams, ItemCodeGenerationResult
- [x] BendingFieldKeys, AssemblyFieldKeys, PurchasedFieldKeys, CategoryKeyWithId 타입 export

### 2.2 품목코드 관련 useMemo 이동 ✅
- [x] `hasAutoItemCode`, `itemNameKey`, `allSpecificationKeys`, `statusFieldKey` useMemo 이동
- [x] `activeSpecificationKey` useMemo 이동
- [x] `autoGeneratedItemCode` useMemo 이동
- [x] 빌드 확인 ✅

### 2.3 절곡부품 품목코드 로직 이동 ✅
- [x] `bendingFieldKeys`, `autoBendingItemCode`, `allCategoryKeysWithIds` useMemo 이동
- [x] `generateBendingItemCodeSimple` 함수 훅 내부로 이동
- [x] 빌드 확인 ✅

### 2.4 조립부품 품목코드 로직 이동 ✅
- [x] `hasAssemblyFields`, `assemblyFieldKeys`, `autoAssemblyItemName`, `autoAssemblySpec` useMemo 이동
- [x] `generateAssemblyItemNameSimple`, `generateAssemblySpecification` 함수 훅 내부로 이동
- [x] 빌드 확인 ✅

### 2.5 구매부품 품목코드 로직 이동 ✅
- [x] `purchasedFieldKeys`, `autoPurchasedItemCode` useMemo 이동
- [x] 빌드 확인 ✅

### 2.6 index.tsx 연결 ✅
- [x] useItemCodeGeneration 훅 import
- [x] 기존 useMemo 코드 제거 (4개 블록, ~305줄)
- [x] 훅 반환값으로 대체
- [x] 빌드 확인 ✅
- [ ] 기능 테스트 (품목코드 자동생성 동작 확인) - 수동 테스트 필요

**Phase 2 완료 후 예상:** ~1,475줄
**Phase 2 실제 결과:** 1,432줄 (1,842줄 → 1,432줄, 410줄 감소) ✅

---

## Phase 3: 필드 탐지 훅 분리 (~200줄 감소) ✅

### 3.1 useFieldDetection 훅 생성 ✅
- [x] `hooks/useFieldDetection.ts` 파일 생성 (~174줄)
- [x] 타입 정의 (PartTypeDetectionResult, UseFieldDetectionParams, FieldDetectionResult)

### 3.2 부품 유형 필드 탐지 로직 이동 ✅
- [x] `partTypeFieldKey`, `selectedPartType`, `isBendingPart`, `isAssemblyPart`, `isPurchasedPart` useMemo 이동
- [x] 빌드 확인 ✅

### 3.3 BOM 체크박스 필드 탐지 로직 이동 ✅
- [x] `bomRequiredFieldKey` useMemo 이동
- [x] 빌드 확인 ✅

### 3.4 index.tsx 연결 ✅
- [x] useFieldDetection 훅 import
- [x] 기존 useMemo 코드 제거 (2개 블록, ~88줄)
- [x] 훅 반환값으로 대체
- [x] 빌드 확인 ✅
- [ ] 기능 테스트 (조건부 필드 표시 확인) - 수동 테스트 필요

**Phase 3 완료 후 예상:** ~1,275줄
**Phase 3 실제 결과:** 1,344줄 (1,432줄 → 1,344줄, 88줄 감소) ✅

---

## Phase 4: 부품 유형 처리 훅 분리 (~150줄 감소) ✅

### 4.1 usePartTypeHandling 훅 생성 ✅
- [x] `hooks/usePartTypeHandling.ts` 파일 생성 (~192줄)
- [x] 타입 정의 (UsePartTypeHandlingParams)

### 4.2 부품 유형 변경 useEffect 이동 ✅
- [x] `prevPartTypeRef` 및 부품 유형 변경 감지 useEffect 이동
- [x] `bendingWidthSumSyncedRef` 및 폭 합계 동기화 useEffect 이동
- [x] 빌드 확인 ✅

### 4.3 품목명 변경 시 종류 초기화 useEffect 이동 ✅
- [x] `prevItemNameValueRef` 및 품목명 변경 감지 useEffect 이동
- [x] 빌드 확인 ✅

### 4.4 index.tsx 연결 ✅
- [x] usePartTypeHandling 훅 import
- [x] 기존 useEffect 코드 제거 (~116줄)
- [x] 훅 호출로 대체
- [x] 빌드 확인 ✅
- [ ] 기능 테스트 (부품 유형 변경 시 필드 초기화 확인) - 수동 테스트 필요

**Phase 4 완료 후 예상:** ~1,125줄
**Phase 4 실제 결과:** 1,228줄 (1,344줄 → 1,228줄, 116줄 감소) ✅

---

## Phase 5: 파일 처리 훅 분리 (~150줄 감소) ✅

### 5.1 useFileHandling 훅 생성 ✅
- [x] `hooks/useFileHandling.ts` 파일 생성 (~328줄)
- [x] 타입 정의 (UseFileHandlingParams, FileHandlingResult)

### 5.2 파일 상태 및 useEffect 이동 ✅
- [x] 파일 관련 state 선언 이동 (existingBendingDiagram, existingSpecificationFile 등)
- [x] 파일 정보 로드 useEffect 이동 (initialData에서 files 추출)
- [x] bendingDetails 로드 로직 이동
- [x] handleFileDownload 함수 이동
- [x] handleDeleteFile 함수 이동 (콜백 패턴 적용)
- [x] 빌드 확인 ✅

### 5.3 index.tsx 연결 ✅
- [x] useFileHandling 훅 import
- [x] 기존 코드 제거 (~178줄)
- [x] 훅 반환값으로 대체
- [x] loadedBendingDetails/loadedWidthSum 동기화 useEffect 추가
- [x] handleDeleteFile wrapper 함수 추가 (콜백 전달용)
- [x] 빌드 확인 ✅
- [ ] 기능 테스트 (파일 업로드/삭제/다운로드 확인) - 수동 테스트 필요

**Phase 5 완료 후 예상:** ~975줄
**Phase 5 실제 결과:** 1,050줄 (1,228줄 → 1,050줄, 178줄 감소) ✅

---

## Phase 6: 최종 정리 및 검증 ✅

### 6.1 코드 정리 ✅
- [x] 불필요한 import 제거 (Button, DynamicSection, DynamicFieldValue, ItemSaveResult)
- [x] 미사용 변수 `_` 접두사 처리 (ESLint 경고 해결)
- [x] 불필요한 eslint-disable 주석 제거
- [x] 브라우저 API (atob, Blob) ESLint 예외 처리

### 6.2 hooks/index.ts 업데이트 ✅
- [x] useFileHandling export 추가
- [x] FileHandlingResult, UseFileHandlingParams 타입 export 추가

### 6.3 최종 검증 ✅
- [x] 빌드 성공 확인 (`npm run build` 통과)
- [x] 타입 에러 없음 확인
- [x] ESLint 경고 확인 (0 errors, 2 warnings - 기존 경고)

### 6.4 기능 테스트 체크리스트 (수동 테스트 필요)
- [ ] FG(제품) 등록/수정 테스트
- [ ] PT(부품) - 절곡부품 등록/수정 테스트
- [ ] PT(부품) - 조립부품 등록/수정 테스트
- [ ] PT(부품) - 구매부품 등록/수정 테스트
- [ ] SM(부자재) 등록/수정 테스트
- [ ] RM(원자재) 등록/수정 테스트
- [ ] CS(소모품) 등록/수정 테스트
- [ ] BOM 추가/수정 테스트
- [ ] 파일 업로드/다운로드/삭제 테스트
- [ ] 품목코드 자동생성 테스트
- [ ] 조건부 필드 표시 테스트

**Phase 6 완료:** 2025-12-16 ✅

---

## 최종 파일 구조 (실제 결과)

```
src/components/items/DynamicItemForm/
├── index.tsx                    (1,050줄, 메인 컴포넌트) ✅
├── components/
│   ├── index.ts                 (배럴 export)
│   ├── FormHeader.tsx           (~60줄)
│   ├── ValidationAlert.tsx      (~40줄)
│   ├── FileUploadFields.tsx     (~200줄)
│   └── DuplicateCodeDialog.tsx  (~40줄)
├── hooks/
│   ├── index.ts                 (22줄, 배럴 export)
│   ├── useFormStructure.ts      (95줄, 기존)
│   ├── useDynamicFormState.ts   (199줄, 기존)
│   ├── useConditionalDisplay.ts (182줄, 기존)
│   ├── useItemCodeGeneration.ts (523줄, 신규) ✅
│   ├── useFieldDetection.ts     (174줄, 신규) ✅
│   ├── usePartTypeHandling.ts   (192줄, 신규) ✅
│   └── useFileHandling.ts       (328줄, 신규) ✅
├── fields/                      (기존)
├── sections/                    (기존)
├── types/                       (기존)
└── utils/                       (기존)

hooks 디렉토리 총: 1,715줄
```

---

## 리팩토링 결과 요약

| Phase | 시작 | 종료 | 감소량 | 상태 |
|-------|------|------|--------|------|
| Phase 1: 컴포넌트 분리 | 2,161줄 | 1,842줄 | -319줄 | ✅ |
| Phase 2: useItemCodeGeneration | 1,842줄 | 1,432줄 | -410줄 | ✅ |
| Phase 3: useFieldDetection | 1,432줄 | 1,344줄 | -88줄 | ✅ |
| Phase 4: usePartTypeHandling | 1,344줄 | 1,228줄 | -116줄 | ✅ |
| Phase 5: useFileHandling | 1,228줄 | 1,050줄 | -178줄 | ✅ |
| Phase 6: 최종 정리 | 1,050줄 | 1,050줄 | 0줄 | ✅ |
| **총계** | **2,161줄** | **1,050줄** | **-1,111줄 (51% 감소)** | ✅ |

**최종 결과:**
- index.tsx: 2,161줄 → 1,050줄 (51% 감소)
- 신규 훅 4개 생성 (1,217줄)
- 기존 훅 4개 재사용 (498줄)
- 컴포넌트 4개 분리

**완료일:** 2025-12-16

---

## 리스크 및 롤백 계획

### 리스크 평가
| 리스크 | 확률 | 영향 | 대응 |
|--------|------|------|------|
| 타입 에러 | 중 | 낮음 | Phase별 빌드 확인 |
| 의존성 순환 | 낮음 | 중 | import 구조 검토 |
| 런타임 에러 | 낮음 | 높음 | Phase별 기능 테스트 |
| 성능 저하 | 매우 낮음 | 낮음 | 로직 변경 없음 |

### 롤백 계획
- 각 Phase는 독립적으로 롤백 가능
- Git 커밋을 Phase별로 분리
- 문제 발생 시 해당 Phase만 revert

---

## 작업 시간 예상

| Phase | 예상 시간 | 누적 |
|-------|----------|------|
| Phase 1 | 30분 | 30분 |
| Phase 2 | 45분 | 1시간 15분 |
| Phase 3 | 30분 | 1시간 45분 |
| Phase 4 | 30분 | 2시간 15분 |
| Phase 5 | 30분 | 2시간 45분 |
| Phase 6 | 30분 | 3시간 15분 |

**총 예상 시간: 약 3시간 15분**

---

## 승인

- [ ] 계획 검토 완료
- [ ] 작업 착수 승인

**작성일:** 2025-12-16
**작성자:** Claude Code