💪🏻PANATA - 헬스 커뮤니티 & 스토어
<img src="https://github.com/user-attachments/assets/ad1ffd28-2e11-40cb-b2a9-0fa842de3980" alt="Mr.Olympia"><br><br>
📌 프로젝트 소개
<ins>PANATA는 운동, 특히 헬스를 좋아하는 사람들을 위한 커뮤니티 및 스토어 플랫폼입니다.</ins>
PANATA 사용자들은 팝업이나 대회(경기)를 빠르게 접할 수 있고, 운동 관련 팁을 얻을 수 있습니다. 또한, 다양한 브랜드의 벨트나 스트랩 등 운동 관련 용품을 동시에 구매할 수 있습니다.
API 명세서
https://spotless-seeker-00f.notion.site/PANATA-API-22e13ddc688b80138e63ee7582c851b7?pvs=73
Notion
<br><br>
선정이유
- 대학교 수업 때 헬스장 다이어리 팀 프로젝트를 진행하며 운동과 관련된 서비스를 개발하는 것에 큰 흥미를 느꼈습니다.
- 평소 운동을 좋아하는 개인적인 관심사를 더해 개인 프로젝트로 시작하게 되었습니다.
<br><br>
주요기능
🙋🏻♂️ 회원기능 ( 마이페이지 )
- 회원가입 시 쿨에스엠에스 API를 사용한 전화번호 문자 인증
- 로그인한 유저의 주문 내역 출력
- 이름, 닉네임, 프로필 이미지 변경
💬 헬스 커뮤니티
- 관리자와 일반 사용자를 구분하여 관리자만 글 작성 가능
- AJAX를 활용한 좋아요, 댓글 및 답글 등록
🛒 운동 용품 스토어
- 로그인 시 장바구니에 비 로그인 상태에서 장바구니에 담은 상품 추가
- 토스 API를 사용한 다양한 가상 결제 ( 카카오페이, 토스 결제 등 )
- 주문 시 다음 API를 사용한 주소 입력
<br><br>
성장점
- 라우팅, 미들웨어 활용, 멀티파트 파일 업로드, 세션 관리 실력을 길렀습니다.
- 커뮤니티 게시판과 상품 스토어를 동시에 다루며, 복잡한 비즈니스 로직을 REST API로 설계하고 구현하는 경험을 얻었습니다.
- 외부 API(쿨에스엠에스, 다음 주소, 토스 결제) 연동을 직접 해 봄으로써 인증 및 결제 시스템 구축 경험도 쌓았습니다.
<br><br>
📸 프로젝트 사진
🏠 메인 화면
<img width="1920" alt="메인 화면" src="https://github.com/user-attachments/assets/85bfac56-1aa5-430a-b37c-9022918591ff" />📝 회원가입 & 로그인
| 회원가입 | 로그인 |
|---|---|
| <img width="1920" alt="Image" src="https://github.com/user-attachments/assets/6d14d320-9bf1-4167-9d39-8ed71111c49c" /> | <img width="1920" alt="로그인" src="https://github.com/user-attachments/assets/137cbd72-a925-474e-b72c-9e9456c0c715" /> |
💬 커뮤니티
| 커뮤니티 1 | 커뮤니티 2 |
|---|---|
| <img width="1920" alt="커뮤니티" src="https://github.com/user-attachments/assets/2ba28ad6-acad-4852-ac25-cdc737852e10" /> | <img width="1920" alt="커뮤니티" src="https://github.com/user-attachments/assets/cf03df98-4e21-42fb-ba75-8f2b45ab384f" /> |
🛒 상점 & 장바구니
| 상점 | 장바구니 |
|---|---|
| <img width="1920" alt="상점" src="https://github.com/user-attachments/assets/c27aec31-e2f6-43ca-b86d-4c91896d8d84" /> | <img width="1920" alt="장바구니" src="https://github.com/user-attachments/assets/4ab4b367-9b6c-44f8-87c1-e8ad3d426466" /> |
🛒 구매 & 성공
| 구매 페이지 | 구매 성공 |
|---|---|
| <img width="1920" alt="Image" src="https://github.com/user-attachments/assets/4f8d4922-4302-4951-8599-1ff7fa20e739" /> | <img width="1920" alt="Image" src="https://github.com/user-attachments/assets/6843158e-75c0-43dc-850c-2e05165310fb" /> |
🙍 마이페이지
| 마이페이지 1 | 마이페이지 2 |
|---|---|
| <img width="1920" alt="마이페이지" src="https://github.com/user-attachments/assets/2567cbc9-9cba-49eb-85a8-8c4540e33c7d" /> | <img width="1920" alt="Image" src="https://github.com/user-attachments/assets/094352b7-2c0a-491d-83e4-6bb82d261cb0" /> |
🚀 기술 스택
👨🏻💻Frontend : HTML, CSS, JavaScript
👨🏻💻Backend : NodeJs, Express
⚡️API : 쿨에스엠에스 API (전화번호 인증), DAUM 주소 API, 토스 API(결제)
<br> <br>🛠️ 설치 및 실행 방법
1️⃣ 프로젝트 클론
git clone https://github.com/SongHyojun0228/Gym-Project.git
cd Gym-Project
2️⃣ 패키지 설치
npm install
3️⃣ 환경 변수 설정 (.env)
- 이 프로젝트를 실행하려면, Gym-projec 폴더 내 최상위에
.env파일을 생성하고 아래 내용을 입력해야 합니다. - [SMS_SENDER=your_phone_number_here]만 입력하셔도 됩니다.
- [SMS_SENDER=your_phone_number_here]만 입력했을 시에, 터미넬에 인증번호가 출력됩니다.
SMS_API_KEY=your_api_key_here // 입력하지 않으셔도 됩니다.
SMS_API_SECRET=your_api_secret_here // 입력하지 않으셔도 됩니다.
SMS_SENDER=your_phone_number_here
4️⃣ 서버 실행
nodemon app.js
5️⃣ 로컬 환경에서 접속
http://localhost:3000
🙋🏻♂️ 회원 정보
관리자
ID : test PW : test12345!
회원1
ID : thdgywns2300 PW : song0228!
회원2
ID : hyojun2300 PW : song0228!