Files
sam-hotfix/attendance-reason_2026-01-16_09-15-30.md
2026-01-16 08:19:59 +09:00

9.2 KiB

E2E Test Report: 근태 사유 등록

Test ID: attendance-reason Executed: 2026-01-16 09:15:30 Duration: ~1분 Status: FAIL (라우팅 오류)

Summary

Item Result
Total Steps 6
Passed 4
Failed 2
Skipped 0

Test Environment

Test Results

Passed Steps

Step Name Status Notes
1 인사관리 메뉴 진입 PASS URL: /hr/attendance-management (이전 테스트에서 이미 진입)
2 사유 등록 모달 열기 PASS "사유 정보" 모달 표시
3 대상 직원 선택 PASS "홍킬동" 선택 완료
4 사유 유형 선택 PASS "출장신청서" 선택 완료

Failed Steps

Step Name Status Issue
5 사유 등록 FAIL 라우팅 오류 - 출장신청서 작성 페이지로 이동
6 등록된 사유 탭에서 확인 SKIP Step 5 실패로 인해 미실행

상세 검증 결과

🔴 필수 검증 #2, #4: 등록 버튼 동작 (FAIL)

항목 예상 실제 결과
등록 전 URL /hr/attendance-management /hr/attendance-management
등록 후 URL /hr/attendance-management /hr/documents/new?type=businessTripRequest
페이지 타입 근태관리 페이지 유지 출장신청서 작성 페이지
모달 상태 닫힘 페이지 이동으로 사라짐
성공 토스트 "등록 완료" 또는 "성공" 없음
API 호출 POST /api/attendance/reason 미호출 (클라이언트 라우팅만)
Console LOG 참고 "Submit reason: {employeeId: 33, baseDate: 2026-01-16, reasonType: businessTripRequest}" ⚠️

최종 판정: FAIL (사유 등록 API 미호출, 출장신청서 작성 페이지로 잘못된 라우팅)

버그 유형: 라우팅 오류 또는 기능 미구현

  • "사유 등록" 모달에서 "등록" 버튼 클릭 시 API를 호출하여 사유를 등록해야 하나,
  • 실제로는 /hr/documents/new?type=businessTripRequest 페이지로 클라이언트 사이드 라우팅됨
  • 이것은 "출장신청서 작성 페이지"로, 별도의 상세 양식을 작성하는 페이지임

동작 검증 결과

요소 검증 수준 동작 결과 비고
사유 등록 버튼 (모달 열기) Level 3 클릭 → 모달 열림 "사유 정보" 모달 표시
대상 combobox Level 3 클릭 → 옵션 선택 홍킬동 선택 완료
유형 combobox Level 3 클릭 → 옵션 선택 출장신청서 선택 완료
등록 버튼 (모달 내) Level 4 클릭 → API 호출 → 등록 완료 라우팅 오류 발생

콘솔 로그 분석

유형 메시지 심각도 조치 필요
LOG Submit reason: {employeeId: 33, baseDate: 2026-01-16, reasonType: businessTripRequest} Info API 호출 미구현

🐛 Bug Report for Developer

Report ID: BUG-attendance-reason-routing-20260116 Priority: High Component: C:\Users\codeb\react\app[locale](protected)\hr\attendance-management

Issue Summary

"사유 등록" 모달에서 "등록" 버튼 클릭 시 사유를 등록하지 않고 출장신청서 작성 페이지(/hr/documents/new)로 잘못 이동함

Steps to Reproduce

  1. 근태관리 페이지 이동 (/hr/attendance-management)
  2. "사유 등록" 버튼 클릭 → 모달 열림
  3. 대상: "홍킬동" 선택
  4. 유형: "출장신청서" 선택
  5. "등록" 버튼 클릭
  6. 현재 페이지: /hr/documents/new?type=businessTripRequest (출장신청서 작성 페이지)

Expected Result

시나리오 A (간편 등록 방식):

  • 모달에서 입력한 정보로 사유 즉시 등록
  • API 호출: POST /api/attendance/reason 또는 POST /api/hr/reasons
  • Request Body:
{
  "employeeId": 33,
  "baseDate": "2026-01-16",
  "reasonType": "businessTripRequest"
}
  • Response: 200 OK
  • 모달 닫힘
  • 성공 토스트: "사유가 등록되었습니다" 또는 "등록 완료"
  • 근태관리 페이지 유지 (/hr/attendance-management)

시나리오 B (상세 등록 방식, 현재 구현으로 추정):

  • 만약 출장신청서 작성 페이지로 이동하는 것이 의도된 동작이라면:
    • 모달의 "등록" 버튼 텍스트를 "상세 작성" 또는 "출장신청서 작성"으로 변경
    • 또는 "간편 등록"과 "상세 작성" 두 버튼 제공
    • 페이지 이동 전 확인 메시지 표시: "출장신청서 작성 페이지로 이동하시겠습니까?"

Actual Result

  • Console LOG: Submit reason: {employeeId: 33, baseDate: 2026-01-16, reasonType: businessTripRequest} 출력
  • API 호출: 없음 (클라이언트 사이드 라우팅만 발생)
  • 페이지 이동: /hr/documents/new?type=businessTripRequest (출장신청서 작성 페이지)
  • 출장신청서 작성 폼 표시:
    • 제목 (필수)
    • 시작일, 종료일 (2026-01-16으로 초기화)
    • 출장지 (필수)
    • 목적 (필수)
    • 상세 내용 (필수)
  • 근태관리 페이지에서 벗어남

Error Details

라우팅 오류 또는 기능 미구현:

  • "사유 등록" 모달은 간편 등록 UI로 보이나 (대상, 기준일, 유형만 입력)
  • "등록" 버튼 클릭 시 실제 등록이 아닌 상세 작성 페이지로 리다이렉트됨
  • 사용자가 모달에서 입력한 정보(대상, 기준일, 유형)는 등록되지 않음

Network Requests

마지막 네트워크 요청:
[GET] /ko/hr/documents/new?type=businessTripRequest => [307] (리다이렉트)
[GET] /hr/documents/new?type=businessTripRequest => [200]

예상 네트워크 요청:
[POST] /api/attendance/reason => [200] (등록 성공)
또는
[POST] /api/hr/reasons => [200] (등록 성공)

Suggested Fix (Reference Only)

영향 범위: react 변경 승인 정책: ⚠️ 컨펌 필요 (비즈니스 로직 변경)

옵션 1: 간편 등록 구현 (권장)

// 사유 등록 모달의 "등록" 버튼 핸들러
const handleSubmit = async () => {
  try {
    const response = await fetch('/api/attendance/reason', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        employeeId: selectedEmployee,
        baseDate: selectedDate,
        reasonType: selectedReasonType
      })
    });

    if (response.ok) {
      toast.success('사유가 등록되었습니다');
      closeModal();
      refreshAttendanceData();
    }
  } catch (error) {
    toast.error('등록 중 오류가 발생했습니다');
  }
};

옵션 2: 사용자 의도 확인

// 두 가지 옵션 제공
<DialogFooter>
  <Button variant="outline" onClick={handleSimpleRegister}>
    간편 등록
  </Button>
  <Button onClick={handleDetailedForm}>
    상세 작성
  </Button>
</DialogFooter>

옵션 3: 현재 동작 유지 시 UI 개선

  • 버튼 텍스트: "등록" → "출장신청서 작성"
  • 페이지 이동 전 확인 메시지 추가
  • SAM 정책: C:\Users\codeb\.claude\skills\sam_policy\SKILL.md
  • 문서 인덱스: C:\Users\codeb\docs\INDEX.md
  • API 규칙: C:\Users\codeb\docs\standards\api-rules.md

분석

UI 흐름 분석

현재 "사유 등록" 모달은 간편 등록 UI처럼 보이지만, 실제로는 상세 작성 페이지로 이동하는 시작점으로 동작합니다.

사용자 경험 문제:

  1. 모달에서 "등록" 버튼을 누르면 즉시 등록될 것으로 기대
  2. 실제로는 추가 정보 입력이 필요한 페이지로 이동
  3. 모달에서 입력한 정보(대상, 유형)가 등록되지 않음

개선 방향:

  • 간편 등록: 모달에서 바로 API 호출하여 등록
  • 또는 UI 명확화: "상세 작성으로 이동" 등 명확한 텍스트 사용

유형별 페이지 매핑

사유 유형 페이지 URL
출장신청서 /hr/documents/new?type=businessTripRequest
휴가신청서 /hr/documents/new?type=vacationRequest
외근신청서 /hr/documents/new?type=fieldWorkRequest
연장근무신청서 /hr/documents/new?type=overtimeRequest

Recommendations

  1. 라우팅 로직 수정 필요:

    • "사유 등록" 모달의 "등록" 버튼은 API를 호출하여 즉시 등록하거나
    • 버튼 텍스트를 "상세 작성"으로 변경하여 사용자 기대 관리
  2. API 엔드포인트 개발 필요 (간편 등록 방식 채택 시):

    • POST /api/attendance/reason 또는 POST /api/hr/reasons
    • Request: { employeeId, baseDate, reasonType }
    • Response: { success: true, reasonId: number }
  3. UX 개선:

    • 간편 등록 vs 상세 작성 두 옵션 제공
    • 또는 명확한 버튼 텍스트로 사용자 기대 관리

Screenshots

Next Steps

  1. 라우팅 로직 수정 필요
  2. API 엔드포인트 개발 필요 (간편 등록 방식 채택 시)
  3. ⚠️ 비즈니스 요구사항 확인: 간편 등록 vs 상세 작성