# 자재관리 - 재고현황 페이지 구현

**경로**: `/material/stock-status`
**작업일**: 2025-12-23

---

## 📋 구현 체크리스트

### Phase 1: 기본 구조 설정
- [x] 폴더 구조 생성 (`src/components/material/StockStatus/`)
- [x] 페이지 라우트 생성 (`src/app/[locale]/(protected)/material/stock-status/`)
- [x] types.ts 작성
- [x] mockData.ts 작성

### Phase 2: 리스트 페이지 구현
- [x] 통계 카드 4개 (전체 품목, 정상 재고, 재고 부족, 재고 없음)
- [x] 필터 탭 (전체, 원자재, 절곡부품, 구매부품, 부자재, 소모품)
- [x] 검색 기능 (품목코드, 품목명)
- [x] 테이블 구현 (체크박스, 품목코드, 품목명, 품목유형, 단위, 재고량, 안전재고, LOT, 상태, 위치)
- [x] 품목유형 뱃지 (구매부품, 부자재, 원자재, 소모품)
- [x] 엑셀 다운로드 버튼
- [x] 하단 요약 (총 XX종 / 재고부족 X종)

### Phase 3: 상세 페이지 구현
- [x] 상세 페이지 라우트 (`/material/stock-status/[id]`)
- [x] 기본 정보 섹션 (품목코드, 품목명, 품목유형, 카테고리, 규격, 단위)
- [x] 재고 현황 섹션 (현재 재고량, 안전 재고, 재고 위치, LOT 개수, 최근 입고일, 재고 상태)
- [x] LOT별 상세 재고 테이블 (FIFO, LOT번호, 입고일, 경과일, 공급업체, 발주번호, 수량, 위치, 상태)
- [x] FIFO 권장 메시지 표시
- [x] 목록 버튼

### Phase 4: 마무리
- [x] Mock 데이터 작성
- [x] 빌드 테스트
- [x] 테스트 URL 문서 업데이트

---

## 📊 스크린샷 분석

### 리스트 페이지 구조

**통계 카드:**
| 카드 | 값 | 아이콘 |
|------|-----|--------|
| 전체 품목 | 134종 | 기본 |
| 정상 재고 | 133종 | ✓ 체크 |
| 재고 부족 | 1종 | ⏱ 시계 |
| 재고 없음 | 0종 | 기본 |

**필터 탭:**
- 전체 134, 원자재 4, 절곡부품 41, 구매부품 80, 부자재 7, 소모품 2

**테이블 컬럼:**
| 컬럼 | 설명 |
|------|------|
| 체크박스 | row 선택 |
| 품목코드 | SQP-50-40, ANG-75-40 등 |
| 품목명 | 각파이프 50×50 L:4000 등 |
| 품목유형 | 구매부품/부자재/원자재/소모품 (뱃지) |
| 단위 | EA, M, m² |
| 재고량 | 숫자 |
| 안전재고 | 숫자 |
| LOT | X개 + 경과일 (예: 2개 8일 경과) |
| 상태 | 정상 |
| 위치 | I-05, A-04 등 |

### 상세 페이지 구조

**헤더:** 재고 상세 [품목코드] [상태뱃지] + 목록 버튼

**기본 정보:**
- 품목코드, 품목명, 품목유형
- 카테고리, 규격, 단위

**재고 현황:**
- 현재 재고량 (큰 숫자, 예: 120 EA)
- 안전 재고 (예: 30 EA)
- 재고 위치 (예: I-05)
- LOT 개수 (예: 4개)
- 최근 입고일 (예: 2025-12-13)
- 재고 상태 (정상 뱃지)

**LOT별 상세 재고:**
- 토글: FIFO 순서 / 오래된 LOT부터 사용 권장
- 테이블: FIFO(번호), LOT번호, 입고일, 경과일, 공급업체, 발주번호, 수량, 위치, 상태
- 합계 행
- FIFO 권장 메시지: ⓘ FIFO 권장: LOT XXXXXX-XX가 XX일 경과되었습니다. 우선 사용을 권장합니다.

---

## 🔧 기술 스택
- IntegratedListTemplateV2 (리스트)
- PageLayout (상세)
- Radix UI (뱃지, 테이블)
- Mock 데이터 (API 연동 TODO)