# [IMPL-2026-01-05] 카테고리관리 페이지 구현 체크리스트

## 개요
- **위치**: 발주관리 > 기준정보 > 카테고리관리
- **URL**: `/ko/juil/order/base-info/categories`
- **참조 페이지**: `/ko/settings/ranks` (직급관리)
- **기능**: 동일, 텍스트/라벨만 다름

## 스크린샷 분석

### UI 구성
| 구성요소 | 내용 |
|---------|------|
| 타이틀 | 카테고리관리 |
| 설명 | 카테고리를 등록하고 관리합니다. |
| 입력필드 라벨 | 카테고리 |
| 입력필드 placeholder | 카테고리를 입력해주세요 |
| 테이블 컬럼 | 카테고리, 작업 |
| 기본 데이터 | 슬라이드 OPEN 사이즈, 모터, 공정자재, 철물 |

### Description 영역 (참고용, UI 미구현)
1. 추가 버튼 클릭 시 목록 최하단에 추가
2. 드래그&드롭으로 순서 변경
3. 수정 버튼 → 수정 팝업
4. 삭제 버튼 → 조건별 Alert:
   - 품목 사용 중: "(카테고리명)을 사용하고 있는 품목이 있습니다. 모두 변경 후 삭제가 가능합니다."
   - 미사용: "정말 삭제하시겠습니까?" → "삭제가 되었습니다."
   - 기본 카테고리: "기본 카테고리는 삭제가 불가합니다."

## 구현 체크리스트

### Phase 1: 파일 구조 생성
- [x] `src/app/[locale]/(protected)/juil/order/base-info/categories/page.tsx` 생성
- [x] `src/components/business/juil/category-management/` 디렉토리 생성

### Phase 2: 컴포넌트 구현 (RankManagement 복제 + 수정)
- [x] `index.tsx` - CategoryManagement 메인 컴포넌트
  - 타이틀: "카테고리관리"
  - 설명: "카테고리를 등록하고 관리합니다. 드래그하여 순서를 변경할 수 있습니다."
  - 아이콘: `FolderTree`
  - 입력 placeholder: "카테고리를 입력해주세요"
- [x] `types.ts` - Category 타입 정의
- [x] `actions.ts` - Server Actions (목데이터)
- [x] `CategoryDialog.tsx` - 수정 다이얼로그

### Phase 3: 텍스트 변경 사항
| 원본 (ranks) | 변경 (categories) | 상태 |
|-------------|-------------------|------|
| 직급 | 카테고리 | ✅ |
| 직급관리 | 카테고리관리 | ✅ |
| 사원의 직급을 관리합니다 | 카테고리를 등록하고 관리합니다 | ✅ |
| 직급명을 입력하세요 | 카테고리를 입력해주세요 | ✅ |
| 직급이 추가되었습니다 | 카테고리가 추가되었습니다 | ✅ |
| 직급이 수정되었습니다 | 카테고리가 수정되었습니다 | ✅ |
| 직급이 삭제되었습니다 | 카테고리가 삭제되었습니다 | ✅ |
| 등록된 직급이 없습니다 | 등록된 카테고리가 없습니다 | ✅ |

### Phase 4: 삭제 로직 (삭제 조건 처리)
- [x] 기본 카테고리 삭제 불가 로직 추가 (`isDefault` 플래그)
- [x] 조건별 Alert 메시지 분기 (actions.ts의 `errorType` 반환)
- [ ] 품목 사용 여부 체크 로직 추가 (추후 API 연동 시)

### Phase 5: 목데이터 설정
- [x] 기본 카테고리 4개 설정 완료
```typescript
const mockCategories = [
  { id: '1', name: '슬라이드 OPEN 사이즈', order: 1, isDefault: true },
  { id: '2', name: '모터', order: 2, isDefault: true },
  { id: '3', name: '공정자재', order: 3, isDefault: true },
  { id: '4', name: '철물', order: 4, isDefault: true },
];
```

### Phase 6: 테스트 URL 문서 업데이트
- [x] `claudedocs/[REF] juil-pages-test-urls.md` 업데이트
  - 발주관리 > 기준정보 섹션 추가
  - 카테고리관리 URL 추가

## 파일 구조

```
src/
├── app/[locale]/(protected)/juil/order/
│   └── base-info/
│       └── categories/
│           └── page.tsx
└── components/business/juil/
    └── category-management/
        ├── index.tsx
        ├── types.ts
        ├── actions.ts
        └── CategoryDialog.tsx
```

## 진행 상태
- 생성일: 2026-01-05
- 상태: ✅ 완료 (목데이터 기반)
- 남은 작업: API 연동 시 품목 사용 여부 체크 로직 추가