4주차 과제 - 연차신청폼

[nunoria]

개요

연차 신청페이지 구현

핵심 키워드: 폼 구성, 입력 관리, 조건부 렌더링

공통 과제: 연차/반차 선택 가능한 폼 만들기

선택 과제: 잔여 연차 차감 로직, 연차 내역 리스트, 중복 날짜 신청 방지 처리

구현 내용

1. 기본과제

[연차 신청폼 구현]

• 잔여연차일수 표시
• 병가/연차/반차/반반차 선택
  • 3주차에 구현한 Select 컴포넌트 사용
  • Type: ANNUAL, HALF, QUATER, SICK
• 날짜 선택
  • React Daypicker 라이브러리 사용하여 DatePicker 컴포넌트 구현
• 사유
  • textarea 태그
• 연차 사용기록

2. 선택과제

[잔여 연차 차감]

• member.json 에 직원별 기준 연차일수 정의
• Leave 데이터를 조회해서 기준 연차일수 대비 사용연차를 차감하여 잔여연차 계산
• ‘병가’의 경우 잔여연차와 상관 없이 신청 가능

[연차 내역 리스트]

• Leave 데이터 리스팅

[중복 날짜 신청 방지등]

• validation check 조건시 경고알림
  • LeaveRequest 시에 기존 데이터에 신청내역이 있는경우
  • 오늘 이전의 날짜 또는 종료날짜가 시작날짜 이전인경우
  • 시작,종료 중 1개라도 없는 경우
  • 잔여 연차일수를 넘어가게 신청하는경우(주말을 제외하여 계산함)
  • 사유가 없는경우

3. 기타 구현 상세

• 근태/연차 현황 시스템 구현을 위한 데이터 스킴 요약

  • Member- 직원의 기준 출퇴근 시간, 기준 보유 연차 정보

    (사용자 요청에따른 변동이 없으므로 json 파일에서 read만 함)

  • Leave - 승인된 연차 기록(storage 저장)

  • LeaveRequest - 연차 신청 기록(편의상 구현 생략)

  • Attendance- 직원의 출퇴근 시간 기록(storage 저장)

• 데이터 스킴 상세

  const Leave = {
    id: 'ObjectId',           // 고유 식별자
    requestId: 'ObjectId',    // LeaveRequest 참조 (원 신청 정보)
    memberId: 'ObjectId',     // 휴가 대상 직원 ID
    date: 'YYYY-MM-DD',       // 해당 휴가 날짜
    type: 'ANNUAL',           // 휴가 유형: ANNUAL, HALF, QUATER, SICK
  };
  
  // 실제 구현하지는 않음.
  const LeaveRequest = {
    id: 'ObjectId',              // 고유 식별자
    memberId: 'ObjectId',        // 신청자 ID
    type: 'ANNUAL',              // 휴가 유형: ANNUAL, HALF, QUATER, SICK
    startDate: 'YYYY-MM-DD',     // 휴가 시작일
    endDate: 'YYYY-MM-DD',       // 휴가 종료일
    reason: 'string',            // 신청 사유
    status: 'PENDING',           // 상태: PENDING, APPROVED, REJECTED
    appliedAt: 'YYYY-MM-DDTHH:mm:ssZ', // 신청 일시
    approvedAt: 'YYYY-MM-DDTHH:mm:ssZ', // 승인 일시
    approverId: 'ObjectId',      // 승인자 ID
  };

• 연차 등록 프로세스

  • submit ⇒ [유효성 체크]→LeaveRequest 등록 → [관리자 승인] → Leave 등록
  • 위와 같은 프로세스로 진행되어야 하나, 편의상 생략하고 클라이언트에서 [유효성체크]만 진행후 Leave 등록

• 근태 기록 보기

  • Leave+Attendance로 해당 일자의 근태 상태를 판단하여 보여줌(추후 구현)

• 연차 기록

  • Leave 리스트

추가 Library

• react-day-picker : 날짜 선택
• react-hot-toast : 알림

주요 학습내용

UI/UX 특징