# 휴가관리 페이지 구현 체크리스트

> **시작일**: 2025-12-06
> **상태**: ✅ 완료
> **참조 페이지**: 사원관리, 근태관리 (공통 UI 패턴 사용)

---

## 스크린샷 분석 요약 (3탭 구조)

### 메인 탭 구조
1. **휴가 사용현황** (usage) - 사원별 휴가 잔여 현황
2. **휴가 부여현황** (grant) - 휴가 지급 이력
3. **휴가 신청현황** (request) - 휴가 신청 및 승인 현황

### 탭 1: 휴가 사용현황
- **통계 카드 4개**: 연차, 월차, 포상휴가, 기타휴가 (각각 N명)
- **서브탭**: 전체 | 연차 | 월차 | 포상휴가 | 기타
- **테이블 컬럼**: 체크박스, 부서, 직책, 이름, 직급, 연차(총/사용/잔여), 월차, 포상휴가, 기타휴가, 조정 버튼
- **액션 버튼**: 엑셀 다운로드, 휴가 등록, 휴가 종류 설정

### 탭 2: 휴가 부여현황
- **통계 카드 4개**: 연차, 월차, 포상휴가, 기타 (지급 건수)
- **서브탭**: 전체 | 연차 | 월차 | 포상휴가 | 기타
- **테이블 컬럼**: 체크박스, 부서, 직책, 이름, 직급, 휴가종류, 지급일수, 지급일자, 비고
- **액션 버튼**: 엑셀 다운로드, 휴가 등록

### 탭 3: 휴가 신청현황
- **통계 카드 3개**: 대기, 승인, 반려 (건수)
- **서브탭**: 전체 | 대기 | 승인 | 반려
- **테이블 컬럼**: 체크박스, 부서, 직책, 이름, 직급, 휴가종류, 신청일수, 시작일, 종료일, 상태
- **액션 버튼**: 엑셀 다운로드

### 공통 다이얼로그
1. **휴가 등록 다이얼로그**: 사원 선택, 휴가 종류, 지급 일수, 비고
2. **휴가 종류 설정 다이얼로그**: 휴가종류명, 사용여부, 설명, 삭제
3. **휴가 조정 다이얼로그**: 사원 정보, 휴가종류별 총/사용/잔여일수, +/- 조정

---

## Phase 1: 기본 구조 세팅

- [x] 1.1 페이지 파일 생성 (`src/app/[locale]/(protected)/hr/vacation-management/page.tsx`)
- [x] 1.2 컴포넌트 폴더 구조 생성 (`src/components/hr/VacationManagement/`)
- [x] 1.3 타입 정의 파일 생성 (`types.ts`)
- [x] 1.4 메인 컴포넌트 생성 (`index.tsx`)

---

## Phase 2: 타입 및 상수 정의 (3탭 구조)

- [x] 2.1 `MainTabType` 타입 정의 (usage | grant | request)
- [x] 2.2 `VacationUsageRecord` 인터페이스 정의 (탭1: 사용현황)
- [x] 2.3 `VacationGrantRecord` 인터페이스 정의 (탭2: 부여현황)
- [x] 2.4 `VacationRequestRecord` 인터페이스 정의 (탭3: 신청현황)
- [x] 2.5 `VacationType` 타입 정의 (연차, 월차, 포상휴가, 기타)
- [x] 2.6 `RequestStatus` 타입 정의 (pending, approved, rejected)
- [x] 2.7 `VacationFormData`, `VacationAdjustment`, `VacationTypeConfig` 인터페이스 정의
- [x] 2.8 상수 정의 (MAIN_TAB_LABELS, VACATION_TYPE_LABELS, REQUEST_STATUS_LABELS 등)

---

## Phase 3: 메인 컴포넌트 구현 (3탭 + IntegratedListTemplateV2)

- [x] 3.1 메인 탭 상태 관리 (mainTab: usage | grant | request)
- [x] 3.2 탭별 Mock 데이터 생성 (usageData, grantData, requestData)
- [x] 3.3 탭별 통계 카드 구현
  - 사용현황: 연차/월차/포상휴가/기타 사용자 수
  - 부여현황: 연차/월차/포상휴가/기타 지급 건수
  - 신청현황: 대기/승인/반려 건수
- [x] 3.4 탭별 서브탭 구현
  - 사용현황: 전체 | 연차 | 월차 | 포상휴가 | 기타
  - 부여현황: 전체 | 연차 | 월차 | 포상휴가 | 기타
  - 신청현황: 전체 | 대기 | 승인 | 반려
- [x] 3.5 탭별 테이블 컬럼 정의 (usageColumns, grantColumns, requestColumns)
- [x] 3.6 탭별 행 렌더링 (renderUsageRow, renderGrantRow, renderRequestRow)
- [x] 3.7 모바일 카드 렌더링 (탭별)
- [x] 3.8 탭별 헤더 액션 버튼 구현
- [x] 3.9 검색 및 정렬 기능 구현

---

## Phase 4: 휴가 등록 다이얼로그

- [x] 4.1 `VacationRegisterDialog.tsx` 파일 생성
- [x] 4.2 사원 선택 드롭다운 구현
- [x] 4.3 휴가 종류 선택 드롭다운 구현
- [x] 4.4 지급 일수 입력 필드 구현
- [x] 4.5 비고 텍스트 영역 구현
- [x] 4.6 폼 유효성 검사 구현
- [x] 4.7 등록/취소 핸들러 구현

---

## Phase 5: 휴가 종류 설정 다이얼로그

- [x] 5.1 `VacationTypeSettingsDialog.tsx` 파일 생성
- [x] 5.2 휴가 종류 테이블 구현
- [x] 5.3 사용여부 토글 스위치 구현
- [x] 5.4 휴가종류 추가 기능 구현
- [x] 5.5 휴가종류 삭제 기능 구현
- [x] 5.6 저장/취소 핸들러 구현

---

## Phase 6: 휴가 조정 다이얼로그

- [x] 6.1 `VacationAdjustDialog.tsx` 파일 생성
- [x] 6.2 사원 정보 헤더 표시
- [x] 6.3 휴가 종류별 조정 테이블 구현 (총일수/사용일수/잔여일수)
- [x] 6.4 +/- 조정 버튼 구현
- [x] 6.5 저장/취소 핸들러 구현
- [x] 6.6 타입 수정: `VacationRecord` → `VacationUsageRecord`

---

## Phase 7: 연동 및 마무리

- [x] 7.1 사이드바 메뉴 - 백엔드에서 관리 (별도 연동 예정)
- [x] 7.2 테스트 URL 문서 작성 (`[REF] hr-pages-test-urls.md`)

---

## 생성된 파일 목록

| 파일 | 설명 |
|------|------|
| `src/app/[locale]/(protected)/hr/vacation-management/page.tsx` | 휴가관리 페이지 |
| `src/components/hr/VacationManagement/types.ts` | 타입 및 상수 정의 (3탭 구조) |
| `src/components/hr/VacationManagement/index.tsx` | 메인 컴포넌트 (3탭 구조) |
| `src/components/hr/VacationManagement/VacationRegisterDialog.tsx` | 휴가 등록 다이얼로그 |
| `src/components/hr/VacationManagement/VacationTypeSettingsDialog.tsx` | 휴가 종류 설정 다이얼로그 |
| `src/components/hr/VacationManagement/VacationAdjustDialog.tsx` | 휴가 조정 다이얼로그 |

---

## 타입 구조 정리

```typescript
// 메인 탭 타입
type MainTabType = 'usage' | 'grant' | 'request';

// 휴가 종류
type VacationType = 'annual' | 'monthly' | 'reward' | 'other';

// 신청 상태
type RequestStatus = 'pending' | 'approved' | 'rejected';

// 탭1: 휴가 사용현황
interface VacationUsageRecord {
  id, employeeId, employeeName, department, position, rank,
  annual: VacationInfo,   // { total, used, remaining }
  monthly: VacationInfo,
  reward: VacationInfo,
  other: VacationInfo,
  createdAt, updatedAt
}

// 탭2: 휴가 부여현황
interface VacationGrantRecord {
  id, employeeId, employeeName, department, position, rank,
  vacationType, grantDays, grantDate, memo?,
  createdAt, updatedAt
}

// 탭3: 휴가 신청현황
interface VacationRequestRecord {
  id, employeeId, employeeName, department, position, rank,
  vacationType, requestDays, startDate, endDate, status, approver?,
  createdAt, updatedAt
}
```

---

## 참조 파일

| 파일 | 용도 |
|------|------|
| `src/components/hr/AttendanceManagement/index.tsx` | 공통 UI 패턴 참조 |
| `src/components/hr/EmployeeManagement/index.tsx` | 공통 UI 패턴 참조 |
| `src/components/templates/IntegratedListTemplateV2.tsx` | 리스트 템플릿 |
| `src/components/organisms/ListMobileCard.tsx` | 모바일 카드 |

---

## 변경 로그

| 날짜 | 내용 |
|------|------|
| 2025-12-06 | 체크리스트 생성, 스크린샷 분석 완료 |
| 2025-12-06 | Phase 1~7 구현 완료 (단일 탭 구조) |
| 2025-12-06 | **구조 변경**: 3탭 구조로 전면 재구현 (사용현황/부여현황/신청현황) |
| 2025-12-06 | types.ts 재작성: 3개 레코드 타입 분리 |
| 2025-12-06 | index.tsx 재작성: 메인 탭 + 탭별 서브탭/통계/테이블 구조 |
| 2025-12-06 | VacationAdjustDialog.tsx 타입 수정: VacationUsageRecord 사용 |