# E2E 테스트 리포트: 부서 추가

**테스트 ID**: department-add
**실행 시간**: 2026-01-20 19:14:00 (KST)
**소요 시간**: 5분
**테스트 결과**: ✅ PASS

---

## 📊 테스트 요약

| 항목 | 결과 |
|------|------|
| 전체 스텝 수 | 10개 (주요 항목) |
| 성공 | 10개 |
| 실패 | 0개 |
| 성공률 | 100% |

---

## 📋 스텝별 상세 결과

| 스텝 | 테스트 항목 | 상태 | 비고 |
|------|------------|------|------|
| 1 | 부서 관리 페이지 접근 | ✅ | /ko/hr/department-management |
| 2 | 기존 부서 목록 확인 | ✅ | 8개 부서 존재 |
| 3 | 부서 추가 버튼 클릭 | ✅ | "부서 추가" 모달 표시 |
| 4 | 부서명 입력 | ✅ | QA본부_20260120 |
| 5 | 등록 버튼 클릭 | ✅ | 모달 닫힘 + 부서 등록 완료 |
| 6 | 신규 부서 목록 반영 확인 | ✅ | QA본부_20260120 표시됨 |
| 7 | 하위 부서 추가 버튼 클릭 | ✅ | "하위 부서 추가" 모달 표시 |
| 8 | 하위 부서명 입력 | ✅ | QA팀_20260120 |
| 9 | 하위 부서 등록 버튼 클릭 | ✅ | 모달 닫힘 + 하위 부서 등록 완료 |
| 10 | 하위 부서 목록 반영 확인 | ✅ | QA팀_20260120 계층 구조로 표시됨 |

---

## 📈 검증 결과

### 페이지 UI 요소

| 항목 | 예상 | 실제 | 결과 |
|------|------|------|------|
| 페이지 경로 | /hr/department-management | /hr/department-management | ✅ |
| 추가 버튼 | 존재 | 존재 | ✅ |
| 부서 목록 표시 | 트리 구조 | 트리 구조 (계층형) | ✅ |
| 행별 액션 버튼 | 하위 부서 추가/수정/삭제 | 3개 버튼 존재 | ✅ |

### 부서 추가 모달 필드

| 필드 | 타입 | 입력값 | 결과 |
|------|------|--------|------|
| 부서명 | input (#department-name) | QA본부_20260120 | ✅ |

### 하위 부서 추가 모달 필드

| 필드 | 타입 | 입력값 | 결과 |
|------|------|--------|------|
| 부서명 | input (#department-name) | QA팀_20260120 | ✅ |

### 등록 전/후 부서 수 비교

| 항목 | 등록 전 | 등록 후 | 변화 |
|------|--------|--------|------|
| 전체 부서 수 | 8개 | 9개 | +1 (2개 추가, 계층형 표시) |
| 신규 상위 부서 | - | QA본부_20260120 | ✅ |
| 신규 하위 부서 | - | QA팀_20260120 | ✅ |

### 부서 계층 구조 확인

| 부서명 | 상위 부서 | 들여쓰기 | 결과 |
|--------|----------|----------|------|
| QA본부_20260120 | (최상위) | 16px | ✅ |
| QA팀_20260120 | QA본부_20260120 | 40px | ✅ |

---

## 📊 UI 요소 검증 결과

| UI 요소 | 검증 수준 | 결과 | 비고 |
|---------|----------|------|------|
| 추가 버튼 | Level 3 | ✅ | 클릭 → 모달 열림 |
| 부서명 입력 | Level 4 | ✅ | 입력 → 등록 → 목록 반영 |
| 등록 버튼 | Level 4 | ✅ | 클릭 → 저장 → 모달 닫힘 |
| 하위 부서 추가 버튼 | Level 4 | ✅ | 클릭 → 모달 → 계층 구조 반영 |
| 확장/축소 버튼 | Level 3 | ✅ | 클릭 → 하위 부서 표시/숨김 |
| 트리 구조 표시 | Level 2 | ✅ | 계층형 들여쓰기 표시 |

---

## 📸 스크린샷

- 초기 상태: `screenshots/013_department_add_initial-*.png`
- 모달 입력: `screenshots/013_department_add_modal_filled-*.png`
- 등록 후: `screenshots/013_department_add_after_register-*.png`
- 하위 부서 모달: `screenshots/013_department_add_child_modal-*.png`
- 최종 상태: `screenshots/013_department_add_final-*.png`

---

## 📝 테스트 결론

### ✅ 정상 동작 확인된 기능
- 부서 관리 페이지 로딩
- 부서 목록 트리 구조 표시
- 부서 추가 버튼 → 모달 열림
- 부서명 입력 및 등록
- 등록 후 모달 자동 닫힘
- 신규 부서 목록 즉시 반영
- 하위 부서 추가 버튼 → 모달 열림
- 하위 부서 등록 및 계층 구조 반영
- 확장/축소 기능으로 하위 부서 표시

### 📌 참고사항
- 부서명에 타임스탬프 또는 고유 식별자 포함 권장 (중복 방지)
- 트리 구조 들여쓰기: 상위 16px, 하위 40px
- 각 부서 행에 하위 부서 추가/수정/삭제 버튼 존재
- 부서 확장/축소 시 하위 부서 목록 토글

### 🔄 플로우 요약
```
부서 관리 페이지
  → 추가 버튼 클릭
  → 부서 추가 모달 열림
  → 부서명 입력 (QA본부_20260120)
  → 등록 버튼 클릭
  → 모달 닫힘 + 목록 반영
  → 신규 부서의 "하위 부서 추가" 버튼 클릭
  → 하위 부서 추가 모달 열림
  → 하위 부서명 입력 (QA팀_20260120)
  → 등록 버튼 클릭
  → 모달 닫힘 + 계층 구조로 반영
```

---

**테스트 실행자**: Claude Code (QA Reporter)
**리포트 생성 시간**: 2026-01-20 19:14:00 (KST)
