🎯 얼굴 인식 출석체크 대시보드 구현

[quirinal36]

목표

실시간 얼굴 인식을 활용한 자동 출석체크 시스템을 구현합니다.
카메라에 얼굴이 인식되면 자동으로 출석이 기록되고, 대시보드에서 출석 현황과 통계를 확인할 수 있습니다.

핵심 요구사항

• SQLite 데이터베이스로 출석 정보 (이름/날짜/시간) 저장
• 같은 날짜의 동일 인물은 단 1회만 출석 기록
• 출석 현황을 확인할 수 있는 대시보드 UI

시스템 아키텍처

카메라 스트림 → 얼굴 인식 → 출석 기록 (SQLite)
                                    ↓
                            출석 API → 대시보드 UI

개발 계획 (단계별)

Phase 1: 데이터 계층

• SQLite 데이터베이스 설정 및 출석 모델 구현 #15 SQLite 데이터베이스 설정 및 출석 모델 구현

Phase 2: API 계층

• 출석 기록 API 엔드포인트 구현 #16 출석 기록 API 엔드포인트 구현

Phase 3: 인식 연동

• 실시간 얼굴 인식과 출석 기록 연동 #17 실시간 얼굴 인식과 출석 기록 연동

Phase 4: 프론트엔드

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

기술 스택

영역	기술
Database	SQLite (Python 표준 라이브러리)
Backend API	FastAPI + Pydantic
출석 연동	generate_frames() 확장
Frontend	React + Tailwind CSS
i18n	한/영 다국어 지원

데이터 흐름

1. 카메라 프레임 캡처
2. InsightFace로 얼굴 감지 + 임베딩 추출
3. face_database.json에서 매칭 (코사인 유사도)
4. 매칭 성공 (confidence ≥ 0.5)
   → 메모리 캐시 확인 (당일 출석 여부)
   → 미출석 시 SQLite에 INSERT OR IGNORE
   → 캐시에 추가
5. API로 출석 기록 조회
6. 프론트엔드 대시보드에 표시

파일 변경 계획

신규 파일

• backend/models/attendance_db.py - SQLite 출석 DB 모듈
• backend/data/attendance.db - SQLite 데이터베이스 파일
• frontend/src/pages/Attendance.jsx - 출석 대시보드 페이지

수정 파일

• backend/api/routes.py - 출석 API 엔드포인트 추가 + 인식 연동
• backend/server.py - DB 초기화 lifecycle 추가
• frontend/src/App.jsx - 라우터 추가
• frontend/src/components/Sidebar.jsx - 메뉴 추가
• frontend/src/services/api.js - 출석 API 함수 추가
• frontend/src/i18n/locales/en.json - 영어 번역
• frontend/src/i18n/locales/ko.json - 한국어 번역