한성대학교 헬스장 통합 관리 시스템의 프론트엔드 애플리케이션입니다.
- 헬스장 소개 및 메인 비주얼
- 실시간 혼잡도 표시
- 주요 기능 바로가기
- 멘토-멘티 매칭 신청
- 매칭 상태 확인
- 멘토링 프로필 조회
- 매칭 수락/거절
- 멘토 상세 정보
- 전문 분야 및 경력
- 멘토링 가능 시간
- 매칭 신청
- 멘토링 상세 정보 팝업
- 멘토 소개 및 리뷰
- 매칭 신청 버튼
- 현재 매칭된 멘토 정보
- 멘토링 일정 관리
- 멘토와의 소통 기록
- 과거 및 현재 멘토 목록
- 멘토링 히스토리
- 멘토 평가 및 리뷰
- 수업 참여 통계
- 출석률 분석
- 수업별 성과 그래프
- 수업 목록 및 시간표
- 수강 신청 및 취소
- 정원 확인
- 내 수업 관리
- 개인 목표 생성 및 관리
- 목표 달성률 시각화
- 목표 완료 체크
- 목표 기반 포인트 획득
- 헬스장 공지사항
- 이벤트 안내
- 중요 알림
- 공지사항 상세 내용
- 첨부 파일 다운로드
- 댓글 및 문의
- 새 공지사항 작성
- 이미지 및 파일 첨부
- 공지 등록
- 개인 프로필 관리
- 보유 포인트 확인
- 활동 통계 대시보드
- 획득 뱃지 표시
- 내 활동 요약
- 운동/식단 기록
- 목표 진행 상황
- 학번 기반 로그인
- JWT 토큰 인증
- 자동 로그인 유지
- 신규 회원 가입
- 학번 및 개인정보 입력
- 약관 동의
- 운동/식단 기록 추가 가이드
- 입력 방법 안내
- 팁 및 주의사항
- 추천 운동 루틴
- 인기 루틴 목록
- 루틴 상세 정보
- 식단 추천 투표
- 인기 식단 순위
- 투표 참여
- 운동 루틴 목록
- 루틴별 운동 종목
- 루틴 시작하기
- 멘토링 신청 확인
- 매칭 정보 확인
- 멘토링 종료
- 탈퇴 확인 팝업
- 랜덤 매칭 기능 (개발 예정)
- AI 기반 상성 매칭
- 랜덤 매칭 기능 활성화
- 자동 멘토 추천
- 상성 점수 표시
- 포인트 교환소
- React (v19.2) - UI 라이브러리
- React Router DOM (v7.9) - 클라이언트 사이드 라우팅
- Context API - 전역 상태 관리
- AuthContext - 인증 상태
- PointContext - 포인트 상태
- ThemeContext - 테마 상태
- MatchContext - 멘토링 매칭 상태
- Tailwind CSS (v3.4) - 유틸리티 CSS 프레임워크
- PostCSS - CSS 후처리
- Autoprefixer - 브라우저 호환성
- Chart.js (v4.5) - 차트 라이브러리
- react-chartjs-2 (v5.3) - React Chart.js 래퍼
- Framer Motion (v12.23) - 애니메이션 라이브러리
- react-hot-toast (v2.6) - 토스트 알림
- @testing-library/react - React 컴포넌트 테스팅
- @testing-library/jest-dom - Jest DOM 매처
- @testing-library/user-event - 사용자 이벤트 시뮬레이션
- React Scripts (v5.0) - Create React App 빌드 도구
┌─────────────────────────────────────────────────────────────┐
│ Browser (Client) │
└────────────────────────┬────────────────────────────────────┘
│
┌────────────────────────▼────────────────────────────────────┐
│ React Application │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ App Component │ │
│ │ (Router + Providers) │ │
│ └────────────────────┬─────────────────────────────────┘ │
│ │ │
│ ┌────────────────────▼─────────────────────────────────┐ │
│ │ Context Providers │ │
│ │ • ThemeProvider (다크모드) │ │
│ │ • AuthProvider (인증 상태) │ │
│ │ • PointProvider (포인트 상태) │ │
│ │ • MatchProvider (멘토링 매칭) │ │
│ └────────────────────┬─────────────────────────────────┘ │
│ │ │
│ ┌────────────────────▼─────────────────────────────────┐ │
│ │ Page Components │ │
│ │ • Home • Login • MyPage │ │
│ │ • Exercise • Goal • Class │ │
│ │ • Mentoring • Guide • Notice │ │
│ │ • Incentive • RewardShop │ │
│ └────────────────────┬─────────────────────────────────┘ │
│ │ │
│ ┌────────────────────▼─────────────────────────────────┐ │
│ │ Reusable Components │ │
│ │ • Navbar • DailyRecordCard │ │
│ │ • QuestList • WeightChart │ │
│ │ • Mentoring Components │ │
│ └────────────────────┬─────────────────────────────────┘ │
│ │ │
│ ┌────────────────────▼─────────────────────────────────┐ │
│ │ API Layer │ │
│ │ (config/api.js) │ │
│ │ • HTTP Client (fetch) │ │
│ │ • JWT Token Management │ │
│ │ • Error Handling │ │
│ └────────────────────┬─────────────────────────────────┘ │
└────────────────────────┼────────────────────────────────────┘
│ HTTPS/REST API
│
┌────────────────────────▼────────────────────────────────────┐
│ Backend API Server │
│ (Express.js - Railway) │
└─────────────────────────────────────────────────────────────┘
User enters credentials
↓
Login Component → POST /api/auth/login
↓
Backend validates & returns JWT
↓
AuthContext stores token in localStorage
↓
AuthContext updates isAuthenticated state
↓
Protected routes become accessible
↓
All API requests include Authorization header
User performs action (운동/식단/출석)
↓
Component → POST /api/exercises (or diet/attendance)
↓
Backend processes & updates points
↓
Response includes updated total_points
↓
PointContext updates global point state
↓
All components showing points re-render
↓
Toast notification shows point change
Component mounts
↓
useEffect → GET /api/data
↓
Update local state
↓
Render UI with data
↓
User action triggers update
↓
POST/PUT/DELETE /api/data
↓
Re-fetch data → GET /api/data
↓
Update local state
↓
UI re-renders with fresh data
User clicks theme toggle
↓
ThemeContext updates theme state
↓
localStorage saves theme preference
↓
document.documentElement.classList updates
↓
Tailwind dark: classes apply
↓
All components re-render with new theme
FE/my-app/
├── public/
│ ├── index.html # HTML 템플릿
│ ├── login.jpg # 로그인 배경 이미지
│ └── videos/
│ └── gym.mp4 # 홈 배경 비디오
├── src/
│ ├── App.js # 메인 앱 컴포넌트
│ ├── App.css # 전역 스타일
│ ├── index.js # React 진입점
│ ├── index.css # Tailwind 진입점
│ │
│ ├── components/ # 재사용 가능한 컴포넌트
│ │ ├── Navbar.jsx # 네비게이션 바
│ │ ├── DailyRecordCard.jsx # 일일 기록 카드
│ │ ├── QuestList.jsx # 퀘스트 목록
│ │ ├── WeightChart.jsx # 체중 차트
│ │ └── mentoring/ # 멘토링 관련 컴포넌트
│ │
│ ├── pages/ # 페이지 컴포넌트
│ │ ├── Home.jsx # 홈 페이지
│ │ ├── Login.jsx # 로그인 페이지
│ │ ├── MyPage.jsx # 마이페이지
│ │ ├── Exercise.jsx # 운동 기록 페이지
│ │ ├── Goal.jsx # 목표 설정 페이지
│ │ ├── Class.jsx # 수업 신청 페이지
│ │ ├── Notice.jsx # 공지사항 페이지
│ │ ├── Incentive.jsx # 인센티브 페이지
│ │ ├── RewardShop.jsx # 보상 상점 페이지
│ │ ├── Guide.jsx # 가이드 페이지
│ │ ├── guide/ # 가이드 탭 컴포넌트
│ │ │ ├── RoutineTab.jsx # 루틴 가이드
│ │ │ └── DietTab.jsx # 식단 가이드
│ │ └── mentoring/ # 멘토링 페이지
│ │ └── Mentoring.jsx # 멘토링 메인
│ │
│ ├── context/ # Context API
│ │ ├── AuthContext.jsx # 인증 상태 관리
│ │ ├── PointContext.jsx # 포인트 상태 관리
│ │ ├── ThemeContext.jsx # 테마 상태 관리
│ │ └── MatchContext.jsx # 멘토링 매칭 상태
│ │
│ ├── config/
│ │ └── api.js # API 설정 및 유틸리티
│ │
│ └── assets/ # 정적 리소스
│ ├── icons/ # 아이콘 이미지
│ └── mentoring/ # 멘토링 이미지
│
├── .env # 환경 변수 (개발)
├── .env.production # 환경 변수 (프로덕션)
├── package.json # 의존성 관리
├── tailwind.config.js # Tailwind 설정
├── postcss.config.js # PostCSS 설정
└── README.md
.env 파일을 생성하고 다음 내용을 입력하세요:
REACT_APP_API_URL=http://localhost:5001/api프로덕션 환경의 경우 .env.production:
REACT_APP_API_URL=https://your-backend-api.railway.app/apicd FE/my-app
npm installnpm start브라우저에서 http://localhost:3000으로 접속합니다.
npm run build빌드된 파일은 build/ 디렉토리에 생성됩니다.
npm test| 경로 | 컴포넌트 | 설명 | 인증 필요 |
|---|---|---|---|
/ |
Home | 홈 페이지 | ❌ |
/login |
Login | 로그인 | ❌ |
/notice |
Notice | 공지사항 | ❌ |
/class |
Class | 수업 신청 | ❌ |
/mentoring |
Mentoring | 멘토링 | ❌ |
/guide |
Guide | 가이드 | ❌ |
/mypage |
MyPage | 마이페이지 | ✅ |
/incentive |
IncentivePage | 인센티브 | ✅ |
/reward-shop |
RewardShop | 보상 상점 | ✅ |
인증이 필요한 페이지는 ProtectedRoute 컴포넌트로 보호됩니다:
<Route
path="/mypage"
element={
<ProtectedRoute>
<MyPage />
</ProtectedRoute>
}
/>로그인하지 않은 사용자는 자동으로 /login으로 리다이렉트됩니다.
- JWT 토큰 기반 인증
- localStorage에 토큰 저장
- 자동 로그인 유지
- 토큰 만료 시 자동 로그아웃
- 실시간 포인트 업데이트
- 전역 상태 관리 (PointContext)
- 포인트 획득/사용 알림
- 포인트 내역 조회
- 시스템 테마 자동 감지
- 수동 테마 전환
- localStorage에 설정 저장
- Tailwind dark: 클래스 활용
- 모바일 우선 디자인
- Tailwind 반응형 유틸리티
- 다양한 화면 크기 지원
- Framer Motion을 활용한 부드러운 전환
- 페이지 전환 애니메이션
- 컴포넌트 등장 애니메이션
- Chart.js를 활용한 차트
- 체중 변화 그래프
- 운동/식단 통계 차트
- 목표 달성률 시각화
- react-hot-toast를 활용한 토스트 알림
- 성공/에러 메시지
- 포인트 획득 알림
- 목표 달성 알림
src/pages/에 컴포넌트 생성src/App.js에 라우트 추가- 필요시
components/Navbar.jsx에 링크 추가
config/api.js 의 유틸리티 함수 사용:
import { apiCall } from '../config/api';
const fetchData = async () => {
try {
const data = await apiCall('/endpoint', 'GET');
console.log(data);
} catch (error) {
console.error(error);
}
};import { useAuth } from '../context/AuthContext';
import { usePoints } from '../context/PointContext';
function MyComponent() {
const { user, isAuthenticated } = useAuth();
const { points, updatePoints } = usePoints();
// ...
}MIT License
HSU Gym Team
프로젝트 관련 문의사항은 이슈를 등록해주세요.