GLife_EXPO_React

산업안전 교육을 위한 기업용 대시보드입니다. React + Vite 기반 SPA로 교육 일정 관리, 수강생 등록, 진도/통계 조회, 사원 엑셀 업로드 등을 제공합니다. JWT 인증을 적용해 회사별 데이터 접근을 보호합니다.

주요 기능

• 대시보드: 분기별 프로그램, 수강 현황, 이수율 카드, 실시간 수강자 테이블
• 교육 일정 관리: 연도/분기별 교육 등록·수정·상태(예정/진행/완료) 관리
• 수강생 등록: 과정별 다중 등록, 행 추가/삭제, 입력 검증, 결과 메시지
• 진도 현황: 과정별 수강생 진도율과 평가 내역 조회
• 엑셀 업로드: 사원 데이터를 XLSX로 대량 업로드, 템플릿 다운로드 지원

기술 스택

• React 19, Vite, React Router
• TailwindCSS, FullCalendar
• Axios, XLSX, @tanstack/react-query
• ESLint

폴더 구조

• src/components : 레이아웃, ProtectedRoute 등 공통 컴포넌트
• src/pages : Home, Login, Schedule, Enrollments, CourseProgress, UploadExcel
• src/lib/auth.js : 로그인/로그아웃, 토큰 관리
• src/lib/http.js : API 통신 래퍼, 토큰 재발급/에러 처리
• public : 정적 파일 및 엑셀 템플릿

실행 방법

1. 의존성 설치: npm install
2. 개발 서버: npm run dev
3. 접속: http://localhost:5173
4. 로그인: 사업자번호(10자리)와 비밀번호 입력

인증 및 데이터 흐름

• JWT 기반 인증, 토큰 만료 시 자동 재발급 및 로그인 리다이렉트
• apiFetch(src/lib/http.js)를 통한 공통 요청/에러/로딩 처리
• 주요 엔드포인트 예시:
  • /courses/courses/ : 교육 과정 목록
  • /enrollments/?course={id} : 과정별 수강생
  • /organizations/employees/bulk/ : 사원 엑셀 업로드

문서

• 백엔드 API 명세: backendApi.md