sam-react-prod/claudedocs/item-master/[IMPL-2025-12-24] item-master-test-and-zustand.md

품목기준관리 테스트 및 Zustand 도입 체크리스트

브랜치: feature/item-master-zustand 작성일: 2025-12-24 목표: 훅 분리 완료 후 수동 테스트 → Zustand 도입

---

현재 상태

항목	상태
훅 분리 작업	✅ 완료 (2025-12-24)
메인 컴포넌트 줄 수	1,799줄 → 971줄 (46% 감소)
타입 에러 수정	✅ 완료 (55개 → 0개)
무한 로딩 버그 수정	✅ 완료
Zustand 연동	✅ 완료 (2025-12-24)
빌드	✅ 성공

---

Phase 1: 훅 분리 작업 ✅

완료된 훅 (11개)

#	훅 이름	용도	상태
1	usePageManagement	페이지 CRUD	✅ 기존
2	useSectionManagement	섹션 CRUD	✅ 기존
3	useFieldManagement	필드 CRUD	✅ 기존
4	useMasterFieldManagement	마스터 필드	✅ 기존
5	useTemplateManagement	템플릿 관리	✅ 기존
6	useAttributeManagement	속성/옵션 관리	✅ 기존
7	useTabManagement	탭 관리	✅ 기존
8	useInitialDataLoading	초기 데이터 로딩	✅ 신규
9	useImportManagement	섹션/필드 불러오기	✅ 신규
10	useReorderManagement	순서 변경	✅ 신규
11	useDeleteManagement	삭제 관리	✅ 신규

UI 컴포넌트 분리 (1개)

#	컴포넌트	용도	상태
1	AttributeTabContent	속성 탭 (~500줄)	✅ 완료

---

Phase 2: Zustand 연동 ✅

2.1 구조

┌─────────────────────────────────────────────────────────────┐
│  useInitialDataLoading                                       │
│  ┌─────────────────────┐     ┌─────────────────────────────┐│
│  │ Context 로드        │ AND │ Zustand Store 로드          ││
│  │ (기존 호환성 유지)    │     │ (정규화된 상태)              ││
│  └─────────────────────┘     └─────────────────────────────┘│
│              ↓                            ↓                  │
│  기존 컴포넌트 → Context     새 컴포넌트 → useItemMasterStore│
└─────────────────────────────────────────────────────────────┘

2.2 연동 방식: 병행 운영

• Context: 기존 컴포넌트 호환성 유지
• Zustand: 새 컴포넌트에서 직접 사용 가능
• 점진적 마이그레이션: Context → Zustand로 단계적 전환

2.3 수정된 파일

파일	변경 내용
useInitialDataLoading.ts	useItemMasterStore import, initFromApi() 호출

2.4 Zustand Store 기능

src/stores/item-master/useItemMasterStore.ts (1,139줄)

영역	기능
페이지	loadPages, createPage, updatePage, deletePage
섹션	loadSections, createSection, updateSection, deleteSection, reorderSections
필드	loadFields, createField, updateField, deleteField, reorderFields
BOM	loadBomItems, createBomItem, updateBomItem, deleteBomItem
속성	addUnit, updateUnit, deleteUnit, addMaterial, updateMaterial, deleteMaterial
API	initFromApi() - API 호출 후 정규화된 상태 저장

---

Phase 3: 테스트 (다음 단계)

3.1 품목 유형별 등록 테스트

#	품목 유형	테스트 URL	상태
1	FG (제품)	/ko/items/create → 제품 선택	⬜
2	PT (부품) - 절곡	/ko/items/create → 부품 → 절곡부품	⬜
3	PT (부품) - 조립	/ko/items/create → 부품 → 조립부품	⬜
4	PT (부품) - 구매	/ko/items/create → 부품 → 구매부품	⬜
5	SM (부자재)	/ko/items/create → 부자재 선택	⬜
6	RM (원자재)	/ko/items/create → 원자재 선택	⬜
7	CS (소모품)	/ko/items/create → 소모품 선택	⬜

---

작업 로그

날짜	작업 내용	커밋
2025-12-24	Phase 1+2 훅/컴포넌트 분리	a823ae0
2025-12-24	unused 코드 정리 및 import 최적화	1664599
2025-12-24	타입 에러 및 무한 로딩 버그 수정	028932d
2025-12-24	Zustand 연동 완료	(현재)

---

다음 단계

1. 수동 테스트 진행
2. 새 컴포넌트에서 useItemMasterStore 직접 사용
3. Context 의존성 점진적 제거
4. 동적 페이지 생성 구현

---

참고 문서

• [PLAN-2025-12-24] hook-extraction-plan.md - 훅 분리 계획서
• src/stores/item-master/useItemMasterStore.ts - Zustand Store
• src/stores/item-master/types.ts - Store 타입 정의
• src/stores/item-master/normalizers.ts - API 응답 정규화