React + MySQL 기반의 로컬 통합 관리 웹 시스템
운동/식단 루틴 가이드와 멘토링 매칭 기능을 포함한 회원 중심 헬스장 플랫폼
이 프로젝트는 헬스장 회원 통합 관리 시스템으로,
회원(Member)을 중심으로 운동 루틴, 식단, 멘토링, 인센티브 등 다양한 기능을 통합 관리할 수 있도록 설계되었습니다.
프론트엔드는 React 기반이며,
데이터는 로컬 MySQL 연동 방식으로 처리됩니다.
백엔드 API 서버는 별도로 두지 않고, 프론트 내부에서 직접 DB와 연결됩니다.
| 항목 | 내용 |
|---|---|
| Frontend | React 18 (Create React App) |
| Styling | TailwindCSS, Framer Motion |
| Database | MySQL (로컬 연결 방식) |
| State Management | Context API (MatchContext.jsx) |
| UI Framework | Responsive Design (TailwindCSS 기반) |
| Animation | Framer Motion |
| Package Manager | npm |
# 1. 패키지 설치
npm install
# 2. 개발 서버 실행
npm start
# 3. 브라우저에서 열기
http://localhost:3000
# 📁 프로젝트 구조
my-app/
├── public/
│ ├── index.html
│ ├── favicon.ico
│ ├── logo192.png / logo512.png
│ ├── manifest.json / robots.txt
│ └── videos/
│ └── gym.mp4 # 메인 소개 영상
│
├── src/
│ ├── assets/
│ │ └── mentoring/
│ │ ├── mentor.png # 기본 멘토 이미지
│ │ ├── mentee.png # 기본 멘티 이미지
│ │ └── defaultProfile.png # 기본 프로필 이미지
│ │
│ ├── components/
│ │ └── mentoring/
│ │ ├──QuestListg.jsx # 퀘스트(미션) 목록
│ │ └── Navbar.jsx # 상단 네비게이션 (공통)
│ │
│ ├── pages/
│ │ ├── guide/ # 🥗 헬스 가이드 모듈
│ │ │ ├── Guide.jsx # 가이드 메인 페이지
│ │ │ ├── DietTab.jsx # 식단 가이드 탭
│ │ │ ├── RoutineTab.jsx # 운동 루틴 탭
│ │ │ ├── PostCard.jsx # 가이드 게시글 카드
│ │ │ └── NewPostModal.jsx # 가이드 게시글 작성 모달
│ │ │
│ │ ├── mentoring/ # 🤝 멘토링 모듈
│ │ │ ├── Mentoring.jsx # 멘토링 메인 탭 (다크모드/프로필)
│ │ │ ├── MentorRecruitTab.jsx# 멘토 모집글 작성 + 멘티 신청 관리
│ │ │ ├── MenteeRecruitTab.jsx# 멘티 모집글 작성 + 멘토 신청 관리
│ │ │ ├── MatchContext.jsx # 멘토/멘티/매칭 상태 관리
│ │ │ ├── MatchModal.jsx # 신청·수락·파기 모달창
│ │ │ ├── MentorCard.jsx # 멘토 목록 카드 컴포넌트
│ │ │ ├── Home.jsx # (예비) 멘토링 소개 페이지
│ │ │ └── Incentive.jsx # 인센티브 (미션) 구현 페이지
│ │ │
│ │ ├── Home.jsx # 메인 홈 화면
│ │ ├── MyPage.jsx # 개인 정보 및 매칭 현황
│ │ ├── Notice.jsx # 공지사항
│ │ └── App.css # 전역 스타일
│ │
│ ├── App.js # 라우팅 및 전역 Provider 설정
│ ├── index.js # ReactDOM 진입점
│ ├── index.css # 공통 스타일
│ ├── reportWebVitals.js
│ └── setupTests.js
│
├── package.json
├── tailwind.config.js
├── postcss.config.js
├── .gitignore
└── README.md