48dbba0e5f
## 단가관리 (Pricing Management) - 단가 목록 페이지 (IntegratedListTemplateV2 공통 템플릿 적용) - 단가 등록/수정 폼 (원가/마진 자동 계산) - 이력 조회, 수정 이력, 최종 확정 다이얼로그 - 판매관리 > 단가관리 네비게이션 메뉴 추가 ## HR 관리 (Human Resources) - 사원관리 (목록, 등록, 수정, 상세, CSV 업로드) - 부서관리 (트리 구조) - 근태관리 (기본 구조) ## 품목관리 개선 - Radix UI Select controlled mode 버그 수정 (key prop 적용) - DynamicItemForm 파일 업로드 지원 - 수정 페이지 데이터 로딩 개선 ## 문서화 - 단가관리 마이그레이션 체크리스트 - HR 관리 구현 체크리스트 - Radix UI Select 버그 수정 가이드 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
5.6 KiB
5.6 KiB
사원관리 (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: 기본 구조 설정
- 1.1 types.ts 생성 - Employee, EmployeeFormData 인터페이스 정의
- 1.2 page.tsx 생성 - 라우트 페이지 (/hr/employee-management)
- 1.3 index.tsx 생성 - 메인 컴포넌트 (상태 관리)
- 1.4 mock 데이터 생성 - 테스트용 사원 데이터 (61명: 55 재직, 5 휴직, 1 퇴직)
Phase 2: 통계 및 목록 화면
- 2.1 EmployeeStats - 통계 카드 (공통 StatCards 활용)
- 2.2 EmployeeToolbar.tsx - 날짜필터, 액션 버튼 영역
- 2.3 메인 목록 구현 - 공통 DataTable 활용
- 2.4 테이블 컬럼 정의 - 모든 필수 컬럼 구현
Phase 3: 사원 등록/수정 다이얼로그
- 3.1 EmployeeDialog.tsx - 다이얼로그 컨테이너 (create/edit/view 모드 통합)
- 3.2 기본 사원정보 폼 섹션 (EmployeeDialog 내 통합)
- 3.3 선택적 필드 섹션 - 프로필, 사원코드, 성별, 주소 (필드설정 연동)
- 3.4 인사정보 섹션 - 부서/직책 복수 추가/삭제 기능 구현
- 3.5 사용자 정보 섹션 - Switch로 계정 생성 토글
Phase 4: 필드 설정 기능
- 4.1 FieldSettingsDialog.tsx - 필드 ON/OFF 설정 다이얼로그
- 4.2 필드 설정 상태 관리 (useState 기반)
- 4.3 설정에 따른 폼 필드 동적 렌더링
Phase 5: CSV 일괄등록
- 5.1 CSVUploadDialog.tsx - CSV 업로드 다이얼로그
- 5.2 CSV 파싱 유틸리티 (내장)
- 5.3 미리보기 테이블 구현
- 5.4 유효성 검사 및 에러 표시
Phase 6: 추가 기능
- 6.1 사용자 초대 기능 - UI 버튼 준비 (실제 로직은 API 연동 시)
- 6.2 삭제 확인 AlertDialog
- 6.3 필터/검색 기능 완성 (DataTable 내장)
- 6.4 정렬 기능 완성 (DataTable 내장)
Phase 7: 테스트 및 검증
- 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