# [IMPL-2026-01-05] 품목관리 페이지 구현 체크리스트

## 개요
- **위치**: 발주관리 > 기준정보 > 품목관리
- **URL**: `/ko/juil/order/base-info/items`
- **참조 템플릿**: IntegratedListTemplateV2 (리스트 페이지 표준)
- **기능**: 품목 CRUD, 필터링, 검색, 정렬

## 스크린샷 분석

### 헤더 영역
| 구성요소 | 내용 |
|---------|------|
| 타이틀 | 품목관리 |
| 설명 | 품목을 등록하여 관리합니다. |
| 날짜 필터 | 날짜 범위 선택 (DateRangePicker) |
| 빠른 날짜 버튼 | 전체년도, 전전월, 전월, 당월, 어제, 오늘 |
| 액션 버튼 | 품목 등록 (빨간색 primary) |

### 통계 카드
| 카드 | 내용 |
|------|------|
| 전체 품목 | 전체 품목 수 표시 |
| 사용 품목 | 사용 중인 품목 수 표시 |

### 검색 및 필터 영역
| 구성요소 | 내용 |
|---------|------|
| 검색 입력 | 품목명 검색 |
| 선택 카운트 | N건 / N건 선택 |
| 삭제 버튼 | 선택된 항목 일괄 삭제 |

### 테이블 컬럼
| 컬럼 | 타입 | 필터 옵션 |
|------|------|----------|
| 체크박스 | checkbox | - |
| 품목번호 | text | - |
| 물품유형 | select filter | 전체, 제품, 부품, 소모품, 공과 |
| 카테고리 | select filter + search | 전체, 기본, (카테고리 목록) |
| 품목명 | text | - |
| 규격 | select filter | 전체, 인정, 비인정 |
| 단위 | text | - |
| 구분 | select filter | 전체, 경품발주, 원자재발주, 외주발주 |
| 상태 | badge | 승인, 작업 |
| 작업 | actions | 수정(연필 아이콘) |

### Description 영역 (참고용, UI 미구현)
1. 품목 등록 버튼 - 클릭 시 품목 상세 등록 화면으로 이동
2. 물품유형 셀렉트 박스 - 전체/제품/부품/소모품/공과 (디폴트: 전체)
3. 카테고리 셀렉트 박스, 검색 - 전체/기본/카테고리 목록 (디폴트: 전체)
4. 규격 셀렉트 박스 - 전체/인정/비인정 (디폴트: 전체)
5. 구분 셀렉트 박스 - 전체/경품발주/원자재발주/외주발주 (디폴트: 전체)
6. 상태 셀렉트 박스 - 전체/사용/중지 (디폴트: 전체)
7. 정렬 셀렉트 박스 - 최신순/등록순 (디폴트: 최신순)

## 구현 체크리스트

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

### Phase 2: 타입 및 상수 정의
- [x] `types.ts` - Item 타입 정의
  ```typescript
  interface Item {
    id: string;
    itemNumber: string;      // 품목번호
    itemType: ItemType;      // 물품유형
    categoryId: string;      // 카테고리 ID
    categoryName: string;    // 카테고리명
    itemName: string;        // 품목명
    specification: string;   // 규격 (인쇄/비인쇄)
    unit: string;            // 단위
    orderType: OrderType;    // 구분
    status: ItemStatus;      // 상태
    createdAt: string;
    updatedAt: string;
  }
  ```
- [x] `constants.ts` - 필터 옵션 상수 정의
  ```typescript
  // 물품유형
  const ITEM_TYPES = ['전체', '제품', '부품', '소모품', '공과'];

  // 규격
  const SPECIFICATIONS = ['전체', '인정', '비인정'];

  // 구분
  const ORDER_TYPES = ['전체', '경품발주', '원자재발주', '외주발주'];

  // 상태
  const ITEM_STATUSES = ['전체', '사용', '중지'];

  // 정렬
  const SORT_OPTIONS = ['최신순', '등록순'];
  ```

### Phase 3: 메인 컴포넌트 구현
- [x] `index.tsx` - ItemManagement 메인 컴포넌트 (export)
- [x] `ItemManagementClient.tsx` - 클라이언트 컴포넌트
  - IntegratedListTemplateV2 사용
  - 헤더: 타이틀, 설명, 날짜필터, 품목등록 버튼
  - 통계 카드: StatCards 컴포넌트 활용
  - 테이블: 컬럼 헤더 필터 포함
  - 검색 및 삭제 기능

### Phase 4: 테이블 컬럼 설정
- [x] 테이블 컬럼 정의 (ItemManagementClient.tsx 내 포함)
  - 체크박스 컬럼
  - 품목번호 컬럼
  - 물품유형 컬럼 (헤더 필터 Select)
  - 카테고리 컬럼 (헤더 필터 Select + 검색)
  - 품목명 컬럼
  - 규격 컬럼 (헤더 필터 Select)
  - 단위 컬럼
  - 구분 컬럼 (헤더 필터 Select)
  - 상태 컬럼 (Badge 표시)
  - 작업 컬럼 (수정 버튼)

### Phase 5: Server Actions (목데이터)
- [x] `actions.ts` - Server Actions 구현
  - `getItemList()` - 품목 목록 조회
  - `getItemStats()` - 통계 조회
  - `deleteItem()` - 품목 삭제
  - `deleteItems()` - 품목 일괄 삭제
  - `getCategoryOptions()` - 카테고리 목록 조회

### Phase 6: 목데이터 설정
```typescript
const mockItems: Item[] = [
  { id: '1', itemNumber: '123123', itemType: '제품', categoryName: '카테고리명', itemName: '품목명', specification: '인쇄', unit: 'SET', orderType: '외주발주', status: '승인' },
  { id: '2', itemNumber: '123123', itemType: '부품', categoryName: '카테고리명', itemName: '품목명', specification: '비인쇄', unit: 'SET', orderType: '외주발주', status: '승인' },
  { id: '3', itemNumber: '123123', itemType: '소모품', categoryName: '카테고리명', itemName: '품목명', specification: '인쇄', unit: 'SET', orderType: '외주발주', status: '승인' },
  { id: '4', itemNumber: '123123', itemType: '공과', categoryName: '카테고리명', itemName: '품목명', specification: '비인쇄', unit: 'EA', orderType: '공과', status: '작업' },
  { id: '5', itemNumber: '123123', itemType: '부품', categoryName: '카테고리명', itemName: '품목명', specification: '인쇄', unit: 'EA', orderType: '원자재발주', status: '작업' },
  { id: '6', itemNumber: '123123', itemType: '소모품', categoryName: '카테고리명', itemName: '품목명', specification: '비인쇄', unit: '승인', orderType: '외주발주', status: '작업' },
  { id: '7', itemNumber: '123123', itemType: '소모품', categoryName: '카테고리명', itemName: '품목명', specification: '인쇄', unit: '승인', orderType: '공과', status: '작업' },
];

const mockStats = {
  totalItems: 7,
  activeItems: 5,
};
```

### Phase 7: 헤더 필터 컴포넌트
- [x] tableHeaderActions 영역에 Select 필터 구현
  - 물품유형 필터
  - 규격 필터
  - 구분 필터
  - 정렬 필터

### Phase 8: 등록/상세/수정 페이지 구현
- [x] 품목 등록 버튼 클릭 → `/ko/juil/order/base-info/items/new` 이동
- [x] 수정 버튼 클릭 → `/ko/juil/order/base-info/items/[id]?mode=edit` 이동
- [x] 등록/수정/상세 페이지 구현 (ItemDetailClient.tsx)
- [x] Server Actions (getItem, createItem, updateItem) 구현
- [x] 발주 항목 동적 추가/삭제 기능

### Phase 9: 테스트 URL 문서 업데이트
- [x] `claudedocs/[REF] juil-pages-test-urls.md` 업데이트
  - 품목관리 URL 추가

## 파일 구조

```
src/
├── app/[locale]/(protected)/juil/order/
│   └── base-info/
│       └── items/
│           ├── page.tsx
│           ├── new/
│           │   └── page.tsx
│           └── [id]/
│               └── page.tsx
└── components/business/juil/
    └── item-management/
        ├── index.tsx
        ├── ItemManagementClient.tsx
        ├── ItemDetailClient.tsx
        ├── types.ts
        ├── constants.ts
        └── actions.ts
```

## 참조 컴포넌트
- `IntegratedListTemplateV2` - 리스트 템플릿
- `StatCards` - 통계 카드
- `DateRangePicker` - 날짜 범위 선택
- `Select` - 필터 셀렉트박스
- `Badge` - 상태 표시
- `Button` - 버튼
- `Checkbox` - 체크박스

## UI 구현 참고
- 컬럼 헤더 내 필터 Select: 기존 프로젝트 내 유사 구현 검색 필요
- 날짜 빠른 선택 버튼 그룹: 기존 컴포넌트 활용 또는 신규 구현

## 진행 상태
- 생성일: 2026-01-05
- 상태: ✅ 전체 완료 (리스트 + 상세/등록/수정)

## 히스토리
| 날짜 | 작업 내용 | 상태 |
|------|----------|------|
| 2026-01-05 | 체크리스트 작성 | ✅ |
| 2026-01-05 | 리스트 페이지 구현 (Phase 1-7, 9) | ✅ |
| 2026-01-05 | 규격 필터 수정 (인쇄/비인쇄 → 인정/비인정) | ✅ |
| 2026-01-05 | 상세/등록/수정 페이지 구현 (Phase 8) | ✅ |
