출석체크 대시보드 프론트엔드 구현

[quirinal36]

개요

출석 기록을 확인하고 관리할 수 있는 출석체크 대시보드 페이지를 구현합니다.

선행 작업

• Python 가상환경 설정 #2 출석 기록 API 엔드포인트 구현

요구사항

페이지 구성: /attendance

1. 오늘의 출석 현황 (상단)

• 오늘 날짜 표시
• 총 출석 인원 수 / 등록된 전체 인원 수
• 실시간 업데이트 (폴링 또는 카메라 stats 연동)

2. 출석 기록 테이블

• 컬럼: 이름, 출석 시간, 신뢰도
• 날짜 선택기 (DatePicker)로 다른 날짜 조회
• 정렬 기능 (시간순/이름순)

3. 출석 통계 (하단 또는 별도 탭)

• 기간 선택 (최근 7일 / 30일 / 사용자 지정)
• 인물별 출석 횟수 요약
• 출석률 표시

UI/UX 요구사항

• 기존 디자인 시스템 (Tailwind CSS) 일관성 유지
• 반응형 디자인
• 한/영 다국어 지원 (i18n)
• 로딩/빈 상태 처리

구현 항목

• frontend/src/pages/Attendance.jsx 페이지 생성
• frontend/src/services/api.js에 출석 API 함수 추가
  • getAttendanceToday()
  • getAttendanceByDate(date)
  • getAttendanceRange(startDate, endDate)
  • getAttendanceStats(startDate, endDate)
• App.jsx 라우터에 /attendance 경로 추가
• Sidebar.jsx에 출석체크 메뉴 항목 추가
• i18n/locales/en.json, ko.json에 번역 키 추가
• 날짜 선택 UI 컴포넌트
• 출석 기록 테이블 컴포넌트
• 출석 통계 요약 컴포넌트

완료 기준

• /attendance 페이지에서 오늘 출석 현황 확인 가능
• 날짜별 출석 기록 조회 가능
• 기간별 출석 통계 확인 가능
• 한국어/영어 전환 동작
• 모바일 반응형 레이아웃