# ItemMasterDataManagement 훅 분리 계획서

> **날짜**: 2025-12-24
> **대상 파일**: `src/components/items/ItemMasterDataManagement.tsx` (1,799줄)
> **목표**: ~500줄로 축소

---

## 현재 구조 분석

### 파일 구성

| 구간 | 줄 수 | 내용 |
|------|-------|------|
| Import | 1-61 | React, UI, 다이얼로그, 훅 import |
| 상수 | 63-91 | ITEM_TYPE_OPTIONS, INPUT_TYPE_OPTIONS |
| Context 구조분해 | 94-124 | useItemMaster에서 20+개 함수/상태 |
| 훅 초기화 | 127-286 | 7개 훅 + 150+개 상태 구조분해 |
| useMemo | 298-372 | sectionsAsTemplates 변환 |
| useState/useEffect | 374-504 | 로딩, 에러, 모바일, Import 상태 |
| 핸들러 | 519-743 | Import, Clone, Delete, Reorder |
| UI 렌더링 | 746-1799 | Tabs + 13개 다이얼로그 |

### 기존 훅 (7개)

```
src/components/items/ItemMasterDataManagement/hooks/
├── usePageManagement.ts      - 페이지 CRUD
├── useSectionManagement.ts   - 섹션 CRUD
├── useFieldManagement.ts     - 필드 CRUD
├── useMasterFieldManagement.ts - 마스터 필드 CRUD
├── useTemplateManagement.ts  - 템플릿 관리
├── useAttributeManagement.ts - 속성 관리
└── useTabManagement.ts       - 탭 관리
```

---

## 분리 계획

### Phase 1: 신규 훅 생성 (4개)

#### 1. `useInitialDataLoading` (~100줄 분리)

**분리 대상:**
- 초기 데이터 로딩 useEffect (387-492줄)
- 로딩/에러 상태 (isInitialLoading, error)
- transformers 호출 로직

**반환값:**
```typescript
{
  isInitialLoading: boolean;
  error: string | null;
  reload: () => Promise<void>;
}
```

#### 2. `useImportManagement` (~80줄 분리)

**분리 대상:**
- Import 다이얼로그 상태 (512-516줄)
- handleImportSection (519-530줄)
- handleImportField (540-559줄)
- handleCloneSection (562-570줄)

**반환값:**
```typescript
{
  // 상태
  isImportSectionDialogOpen, setIsImportSectionDialogOpen,
  isImportFieldDialogOpen, setIsImportFieldDialogOpen,
  selectedImportSectionId, setSelectedImportSectionId,
  selectedImportFieldId, setSelectedImportFieldId,
  importFieldTargetSectionId, setImportFieldTargetSectionId,
  // 핸들러
  handleImportSection,
  handleImportField,
  handleCloneSection,
}
```

#### 3. `useReorderManagement` (~60줄 분리)

**분리 대상:**
- moveSection (650-668줄)
- moveField (672-702줄)

**반환값:**
```typescript
{
  moveSection: (dragIndex: number, hoverIndex: number) => Promise<void>;
  moveField: (sectionId: number, dragFieldId: number, hoverFieldId: number) => Promise<void>;
}
```

#### 4. `useDeleteManagement` (~50줄 분리)

**분리 대상:**
- handleDeletePageWithTracking (582-588줄)
- handleDeleteSectionWithTracking (591-597줄)
- handleUnlinkFieldWithTracking (601-609줄)
- handleResetAllData (705-743줄)

**반환값:**
```typescript
{
  handleDeletePage: (pageId: number) => void;
  handleDeleteSection: (pageId: number, sectionId: number) => void;
  handleUnlinkField: (pageId: string, sectionId: string, fieldId: string) => Promise<void>;
  handleResetAllData: () => void;
}
```

### Phase 2: UI 컴포넌트 분리 (2개)

#### 1. `AttributeTabContent` (~400줄 분리)

**분리 대상:**
- 속성 탭 내용 (807-1331줄)
- 단위/재질/표면처리 반복 UI 통합

**Props:**
```typescript
interface AttributeTabContentProps {
  activeAttributeTab: string;
  attributeSubTabs: AttributeSubTab[];
  unitOptions: UnitOption[];
  materialOptions: MaterialOption[];
  surfaceTreatmentOptions: SurfaceTreatmentOption[];
  customAttributeOptions: Record<string, Option[]>;
  attributeColumns: Record<string, Column[]>;
  itemMasterFields: ItemMasterField[];
  // 핸들러들...
}
```

#### 2. `ItemMasterDialogs` (~280줄 분리)

**분리 대상:**
- 13개 다이얼로그 렌더링 (1442-1797줄)

**Props:**
```typescript
interface ItemMasterDialogsProps {
  // 모든 다이얼로그 관련 props
}
```

### Phase 3: 코드 정리

1. **래퍼 함수 제거** (~30줄)
   - `handleAddSectionWrapper` 등을 훅 내부로 이동
   - `selectedPage`를 훅 파라미터로 전달

2. **unused 변수 정리**
   - `_mounted`, `_isLoading` 등 제거

3. **Import 최적화**
   - 사용하지 않는 import 제거

---

## 예상 결과

### 줄 수 변화

| 항목 | 현재 | 분리 후 |
|------|------|---------|
| Import | 61 | 40 |
| 상수 | 28 | 28 |
| 훅 사용 | 160 | 60 |
| useMemo | 75 | 75 |
| 상태/Effect | 130 | 20 |
| 핸들러 | 225 | 30 |
| UI 렌더링 | 1,053 | 300 |
| **합계** | **1,799** | **~550** |

### 새 파일 구조

```
src/components/items/ItemMasterDataManagement/
├── ItemMasterDataManagement.tsx  ← ~550줄 (메인)
├── hooks/
│   ├── index.ts
│   ├── usePageManagement.ts      (기존)
│   ├── useSectionManagement.ts   (기존)
│   ├── useFieldManagement.ts     (기존)
│   ├── useMasterFieldManagement.ts (기존)
│   ├── useTemplateManagement.ts  (기존)
│   ├── useAttributeManagement.ts (기존)
│   ├── useTabManagement.ts       (기존)
│   ├── useInitialDataLoading.ts  ← NEW
│   ├── useImportManagement.ts    ← NEW
│   ├── useReorderManagement.ts   ← NEW
│   └── useDeleteManagement.ts    ← NEW
├── components/
│   ├── AttributeTabContent.tsx   ← NEW
│   └── ItemMasterDialogs.tsx     ← NEW
├── dialogs/ (기존 13개)
├── tabs/ (기존 4개)
├── services/ (기존 6개)
└── utils/ (기존 1개)
```

---

## 작업 순서

### Step 1: useInitialDataLoading 훅 생성
- [ ] 훅 파일 생성
- [ ] 로딩/에러 상태 이동
- [ ] useEffect 이동
- [ ] 메인 컴포넌트에서 사용

### Step 2: useImportManagement 훅 생성
- [ ] 훅 파일 생성
- [ ] Import 상태 이동
- [ ] 핸들러 이동
- [ ] 메인 컴포넌트에서 사용

### Step 3: useReorderManagement 훅 생성
- [ ] 훅 파일 생성
- [ ] moveSection, moveField 이동
- [ ] 메인 컴포넌트에서 사용

### Step 4: useDeleteManagement 훅 생성
- [ ] 훅 파일 생성
- [ ] Delete/Unlink 핸들러 이동
- [ ] 메인 컴포넌트에서 사용

### Step 5: AttributeTabContent 컴포넌트 분리
- [ ] 컴포넌트 파일 생성
- [ ] 속성 탭 UI 이동
- [ ] 반복 코드 통합

### Step 6: ItemMasterDialogs 컴포넌트 분리
- [ ] 컴포넌트 파일 생성
- [ ] 13개 다이얼로그 이동

### Step 7: 정리 및 테스트
- [ ] 래퍼 함수 정리
- [ ] unused 코드 제거
- [ ] 빌드 확인
- [ ] 수동 테스트

---

## 리스크 및 주의사항

1. **Context 의존성**: 훅들이 `useItemMaster` Context에 의존
   - 해결: 필요한 함수만 훅 파라미터로 전달

2. **상태 공유**: 여러 훅에서 동일 상태 사용
   - 해결: 공통 상태는 메인 컴포넌트에서 관리

3. **타입 호환성**: 기존 훅의 setter 타입 문제
   - 해결: `as any` 임시 사용 또는 타입 수정

4. **테스트**: 페이지 기능이 많아 수동 테스트 필요
   - 해결: 체크리스트 작성하여 순차 테스트

---

## 다음 단계

1. 이 계획서 확인 후 작업 시작
2. Step 1부터 순차 진행
3. 각 Step 완료 후 빌드 확인
4. 최종 수동 테스트