Kibeom/2week

[nunoria]

2주차 과제 - 출근/퇴근 버튼 만들기

개요

출근 및 퇴근을 입력 받고, 팀원의 출퇴근 정보를 업데이트

구현 내용

1. 기본과제

• 출근 버튼, 퇴근 버튼 구현

2. 선택과제

• 출근 시간 및 퇴근시간 확인 후 상태 표시
• 정해진 시간 이후 퇴근하지 않은 멤버가 있으면 자동 퇴근 처리
• 출퇴근 기록을 localStorage 에 저장

3. 기타

• 출퇴근 기록을 위한 AttendanceRecord 클래스 구현
• Member 리스트를 json 파일로 분리
  • 기준 출퇴근시간 필드 추가(지각 및 조퇴 판정)
• 화면 레이아웃을 네비게이션과 페이지로 분리

추가 Library

• dayjs
• react-router-dom

주요 학습내용

1. react-router-dom

• 네비게이션 구현을 위한 router 사용

  function App() {
  
   //...
  
    return (
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route index element={<Attendance />} />
            {/* <Route path="Members" element={<Members />} /> */}
            <Route path="Members" element={<Members />} />
          </Route>
        </Routes>
      </BrowserRouter>
    );
  }

2. useEffect

• 출퇴근 입력시 검색된 attendanceRecord 상태를 후킹하여, 근무시간 처리

• App 에서 30초간격으로 시간 확인 후 정해진 시간에 도달하면 일괄 퇴근 처리

      useEffect(() => {
          if (!attendanceRecord) return;
  
          if (attendanceRecord.clockOutTime) {
              setWorkingTime(attendanceRecord.getWorkingDuration());
              return;
          }
          // 출근시간이 있는 경우에만 근무시간 계산
          const interval = setInterval(() => {
              setWorkingTime(attendanceRecord.getWorkingDuration());
          }, 1000);
          return () => clearInterval(interval);
      }, [attendanceRecord]);

3. AttendanceRecord 클래스 구현

• storage저장(추후 DB)과 데이터 핸들링 위해 클래스로 구현

• 속성은 String 으로 유지, 메서드에서 dayjs 라이브러리 사용

  /*
  * @class AttendanceRecord
  * @description 출퇴근 기록을 관리하는 클래스입니다.
  * @property {number} id - 출퇴근 기록 ID
  * @property {number} memberId - 팀원 ID
  * @property {string} date - 출퇴근 날짜 (YYYY-MM-DD 형식)
  * @property {string} standardClockInTime - 정규 출근시간 (HH:mm:ss 형식)
  * @property {string} standardClockOutTime - 정규 퇴근시간 (HH:mm:ss 형식)
  * @property {string} clockInTime - 출근시간 (HH:mm:ss 형식)
  * @property {string} clockOutTime - 퇴근시간 (HH:mm:ss 형식)
  * @property {string} status - 출퇴근 상태 (미출근, 지각, 정상, 조퇴, 지각+조퇴)
  * @property {string} workingDuration - 근무 시간 (HH:mm:ss 형식)
  * @method clockIn(date) - 출근 시간을 기록합니다.
  * @method clockOut(date) - 퇴근 시간을 기록합니다.
  * @method getWorkingDuration() - 근무 시간을 계산하여 반환합니다.
  * @method toJSON() - 출퇴근 기록을 JSON 형식으로 변환합니다.
  */

4. 사용 기술

• useState, useEffect, react-router-dom

UI/UX 특징

• Navigation , Page 레이아웃 분리
• Badge 컴포넌트 추가