sam-react-prod/claudedocs/item-master/[PLAN-2025-12-16] dynamicitemform-hook-extraction.md

DynamicItemForm 훅 분리 계획서

개요

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

---

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

1.1 FormHeader 컴포넌트 분리 ✅

• components/FormHeader.tsx 파일 생성
• FormHeader 함수 이동 (56-107줄, ~51줄)
• Props 타입 정의
• index.tsx에서 import 및 사용
• 빌드 확인 (Phase 1 완료 후 일괄)

1.2 ValidationAlert 컴포넌트 분리 ✅

• components/ValidationAlert.tsx 파일 생성
• ValidationAlert 함수 이동 (112-141줄, ~30줄)
• Props 타입 정의
• index.tsx에서 import 및 사용
• 빌드 확인 (Phase 1 완료 후 일괄)

1.3 DynamicSectionRenderer 삭제 ✅

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

1.4 FileUploadFields 컴포넌트 분리 ✅

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

1.5 DuplicateCodeDialog 컴포넌트 분리 ✅

• components/DuplicateCodeDialog.tsx 파일 생성 (~53줄)
• AlertDialog JSX 이동
• Props 타입 정의 (DuplicateCodeDialogProps)
• index.tsx에서 import 및 사용
• 빌드 확인 (Phase 1 완료 후 일괄)

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

---

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

2.1 useItemCodeGeneration 훅 생성 ✅

• hooks/useItemCodeGeneration.ts 파일 생성 (~420줄)
• 타입 정의 (입력/출력) - UseItemCodeGenerationParams, ItemCodeGenerationResult
• BendingFieldKeys, AssemblyFieldKeys, PurchasedFieldKeys, CategoryKeyWithId 타입 export

2.2 품목코드 관련 useMemo 이동 ✅

• hasAutoItemCode, itemNameKey, allSpecificationKeys, statusFieldKey useMemo 이동
• activeSpecificationKey useMemo 이동
• autoGeneratedItemCode useMemo 이동
• 빌드 확인 ✅

2.3 절곡부품 품목코드 로직 이동 ✅

• bendingFieldKeys, autoBendingItemCode, allCategoryKeysWithIds useMemo 이동
• generateBendingItemCodeSimple 함수 훅 내부로 이동
• 빌드 확인 ✅

2.4 조립부품 품목코드 로직 이동 ✅

• hasAssemblyFields, assemblyFieldKeys, autoAssemblyItemName, autoAssemblySpec useMemo 이동
• generateAssemblyItemNameSimple, generateAssemblySpecification 함수 훅 내부로 이동
• 빌드 확인 ✅

2.5 구매부품 품목코드 로직 이동 ✅

• purchasedFieldKeys, autoPurchasedItemCode useMemo 이동
• 빌드 확인 ✅

2.6 index.tsx 연결 ✅

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

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

---

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

3.1 useFieldDetection 훅 생성 ✅

• hooks/useFieldDetection.ts 파일 생성 (~174줄)
• 타입 정의 (PartTypeDetectionResult, UseFieldDetectionParams, FieldDetectionResult)

3.2 부품 유형 필드 탐지 로직 이동 ✅

• partTypeFieldKey, selectedPartType, isBendingPart, isAssemblyPart, isPurchasedPart useMemo 이동
• 빌드 확인 ✅

3.3 BOM 체크박스 필드 탐지 로직 이동 ✅

• bomRequiredFieldKey useMemo 이동
• 빌드 확인 ✅

3.4 index.tsx 연결 ✅

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

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

---

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

4.1 usePartTypeHandling 훅 생성 ✅

• hooks/usePartTypeHandling.ts 파일 생성 (~192줄)
• 타입 정의 (UsePartTypeHandlingParams)

4.2 부품 유형 변경 useEffect 이동 ✅

• prevPartTypeRef 및 부품 유형 변경 감지 useEffect 이동
• bendingWidthSumSyncedRef 및 폭 합계 동기화 useEffect 이동
• 빌드 확인 ✅

4.3 품목명 변경 시 종류 초기화 useEffect 이동 ✅

• prevItemNameValueRef 및 품목명 변경 감지 useEffect 이동
• 빌드 확인 ✅

4.4 index.tsx 연결 ✅

• usePartTypeHandling 훅 import
• 기존 useEffect 코드 제거 (~116줄)
• 훅 호출로 대체
• 빌드 확인 ✅
• 기능 테스트 (부품 유형 변경 시 필드 초기화 확인) - 수동 테스트 필요

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

---

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

5.1 useFileHandling 훅 생성 ✅

• hooks/useFileHandling.ts 파일 생성 (~328줄)
• 타입 정의 (UseFileHandlingParams, FileHandlingResult)

5.2 파일 상태 및 useEffect 이동 ✅

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

5.3 index.tsx 연결 ✅

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

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

---

Phase 6: 최종 정리 및 검증 ✅

6.1 코드 정리 ✅

• 불필요한 import 제거 (Button, DynamicSection, DynamicFieldValue, ItemSaveResult)
• 미사용 변수 _ 접두사 처리 (ESLint 경고 해결)
• 불필요한 eslint-disable 주석 제거
• 브라우저 API (atob, Blob) ESLint 예외 처리

6.2 hooks/index.ts 업데이트 ✅

• useFileHandling export 추가
• FileHandlingResult, UseFileHandlingParams 타입 export 추가

6.3 최종 검증 ✅

• 빌드 성공 확인 (npm run build 통과)
• 타입 에러 없음 확인
• 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