# 사원관리 (Employee Management) 구현 체크리스트

## 개요
- **위치**: 인사관리 > 사원관리
- **경로**: `/[locale]/(protected)/hr/employee-management`
- **생성일**: 2025-12-05
- **상태**: 🔄 진행중

## 화면 구성 분석 (스크린샷 기반)

### 1. 메인 목록 화면
- 통계 카드: 재직(55명), 휴직(5명), 퇴직(1명), 평균근속년수(5.3년)
- 날짜 필터 (기간 선택)
- 액션 버튼: CSV 일괄등록, 사원등록, 사용자 초대
- 검색 및 필터 (전체/사용자 아이디 보유 등)
- 정렬 옵션
- 테이블 컬럼: No, 사원코드, 부서, 직책, 이름, 직급, 휴대폰, 이메일, 입사일, 상태, 사용자아이디, 권한, 작업

### 2. 사원 등록/수정 다이얼로그
- **기본 사원정보**: 이름*, 주민등록번호, 휴대폰, 이메일, 연봉, 급여계좌(은행, 계좌, 예금주)
- **선택적 필드** (설정에 따라 표시): 프로필사진, 사원코드, 성별, 주소(우편번호 찾기)
- **인사정보**: 입사일, 고용형태, 직급, 상태, 부서/직책 (복수 가능)
- **사용자 정보**: 아이디*, 비밀번호*, 권한, 상태

### 3. 필드 설정 팝업
- 사원 상세 필드 ON/OFF: 프로필 사진, 사원코드, 성별, 주소
- 인사 정보 필드 ON/OFF: 입사일, 고용 형태, 직급, 상태, 부서, 직책

### 4. CSV 일괄등록
- 테이블 형태로 데이터 미리보기 표시
- 유효성 검사 결과 표시

---

## 구현 체크리스트

### Phase 1: 기본 구조 설정
- [x] 1.1 types.ts 생성 - Employee, EmployeeFormData 인터페이스 정의
- [x] 1.2 page.tsx 생성 - 라우트 페이지 (/hr/employee-management)
- [x] 1.3 index.tsx 생성 - 메인 컴포넌트 (상태 관리)
- [x] 1.4 mock 데이터 생성 - 테스트용 사원 데이터 (61명: 55 재직, 5 휴직, 1 퇴직)

### Phase 2: 통계 및 목록 화면
- [x] 2.1 EmployeeStats - 통계 카드 (공통 StatCards 활용)
- [x] 2.2 EmployeeToolbar.tsx - 날짜필터, 액션 버튼 영역
- [x] 2.3 메인 목록 구현 - 공통 DataTable 활용
- [x] 2.4 테이블 컬럼 정의 - 모든 필수 컬럼 구현

### Phase 3: 사원 등록/수정 다이얼로그
- [x] 3.1 EmployeeDialog.tsx - 다이얼로그 컨테이너 (create/edit/view 모드 통합)
- [x] 3.2 기본 사원정보 폼 섹션 (EmployeeDialog 내 통합)
- [x] 3.3 선택적 필드 섹션 - 프로필, 사원코드, 성별, 주소 (필드설정 연동)
- [x] 3.4 인사정보 섹션 - 부서/직책 복수 추가/삭제 기능 구현
- [x] 3.5 사용자 정보 섹션 - Switch로 계정 생성 토글

### Phase 4: 필드 설정 기능
- [x] 4.1 FieldSettingsDialog.tsx - 필드 ON/OFF 설정 다이얼로그
- [x] 4.2 필드 설정 상태 관리 (useState 기반)
- [x] 4.3 설정에 따른 폼 필드 동적 렌더링

### Phase 5: CSV 일괄등록
- [x] 5.1 CSVUploadDialog.tsx - CSV 업로드 다이얼로그
- [x] 5.2 CSV 파싱 유틸리티 (내장)
- [x] 5.3 미리보기 테이블 구현
- [x] 5.4 유효성 검사 및 에러 표시

### Phase 6: 추가 기능
- [x] 6.1 사용자 초대 기능 - UI 버튼 준비 (실제 로직은 API 연동 시)
- [x] 6.2 삭제 확인 AlertDialog
- [x] 6.3 필터/검색 기능 완성 (DataTable 내장)
- [x] 6.4 정렬 기능 완성 (DataTable 내장)

### Phase 7: 테스트 및 검증
- [x] 7.1 빌드 테스트 ✅ 성공
- [ ] 7.2 UI 렌더링 확인 (사용자 테스트 필요)
- [ ] 7.3 반응형 디자인 확인 (모바일 카드뷰)

---

## 공통 컴포넌트 활용 계획

| 컴포넌트 | 용도 |
|----------|------|
| DataTable | 사원 목록 테이블 |
| StatCards | 통계 카드 (재직, 휴직, 퇴직, 평균근속년수) |
| SearchFilter | 검색 및 필터 |
| Pagination | 페이지네이션 |
| TabFilter | 상태별 탭 필터 |
| Dialog | 등록/수정 다이얼로그 |
| AlertDialog | 삭제 확인 |
| Switch | 필드 설정 ON/OFF |
| Select | 드롭다운 (은행, 권한 등) |
| Input | 텍스트 입력 필드 |
| Button | 모든 버튼 |
| Badge | 상태 표시 (재직/휴직/퇴직) |

---

## 참고사항

### 외부 이메일 로직 (스크린샷 7)
- 사용자 초대 시 외부 이메일 발송
- 현재는 UI만 구현, 실제 이메일 발송은 API 연동 시 처리

### 부서/직책 복수 선택
- 한 사원이 여러 부서에 소속 가능
- 부서별 직책 개별 설정
- 추가/삭제 버튼으로 관리

### 필드 설정 저장
- 필드 표시 설정은 세션 또는 localStorage에 저장
- 사용자별로 다른 설정 유지 가능

---

## 진행 상황 업데이트

| 날짜 | 완료 항목 | 메모 |
|------|-----------|------|
| 2025-12-05 | 체크리스트 작성 | 스크린샷 분석 완료 |
| 2025-12-05 | Phase 1-6 구현 완료 | types.ts, page.tsx, index.tsx, EmployeeToolbar, EmployeeDialog, FieldSettingsDialog, CSVUploadDialog |
| 2025-12-05 | 빌드 테스트 성공 | 17.1 kB First Load JS |

## 생성된 파일 목록

```
src/components/hr/EmployeeManagement/
├── types.ts              # 타입 정의 (Employee, EmployeeFormData, FieldSettings 등)
├── index.tsx             # 메인 컴포넌트 (상태관리, DataTable 활용)
├── EmployeeToolbar.tsx   # 툴바 (날짜필터, 액션버튼)
├── EmployeeDialog.tsx    # 등록/수정/상세 다이얼로그
├── FieldSettingsDialog.tsx # 필드 설정 다이얼로그
└── CSVUploadDialog.tsx   # CSV 일괄등록 다이얼로그

src/app/[locale]/(protected)/hr/employee-management/
└── page.tsx              # 라우트 페이지
```

## 접속 URL

- 한국어: `http://localhost:3000/ko/hr/employee-management`
- 영어: `http://localhost:3000/en/hr/employee-management`
- 일본어: `http://localhost:3000/ja/hr/employee-management`