💻Runaway

---

📁프로젝트 소개

Runaway는 당신의 건강한 생활을 위해 올바른 운동 습관을 만들어주는 웹앱입니다. GPS 기반 러닝 추적, 카메라로 운동 횟수 자동 인식, 매일 새로운 운동 챌린지로, 우리는 당신에게 동기를 부여합니다. 운동 스토리를 공유하고, 다른 사람들과 함께 격려하며 운동하는 강력한 커뮤니티를 경험하세요. 챌린지 성공과 함께 오는 리워드는 단순한 보상이 아닌, 깊은 성취감을 줄 것입니다. Runaway와 함께라면 건강한 운동 습관을 쉽게 만들 수 있습니다.

---

🛫 개발 기간 및 인원

• 개발 기간 : 2024/01/29 ~ 2024/03/08
• BackEnd+FrontEnd

김상우 (조장)	김인식	김재형	설석현	오원찬	이준일	한종빈
°소셜로그인 °Ranking	°메인 페이지 °챌린지	°Exercise(AI) °메인페이지	°마이 프로필 °Running	°보안 설정 °초기셋팅 °CI/CD	°스토리 °WieFrame °Design총괄	°회원가입 °CI/CD

---

🖥️ Tech Stack

FrontEnd

BackEnd

Infra & CI/CD

Tools

Server & DataBase

---

🎥 시연영상

---

🧩 페이지별 기능

🔑 회원가입,로그인

• 이메일, 비밀번호, 이름,닉네임,성별,생년월일, 키, 몸무게 입력시 회원가입 가능
• 아이디와 닉네임은 중복 검사를 실행
• 구글,네이버, 카카오톡 이용해서 간편회원가입이 가능
• 구글,카카오톡,네이버,직접 로그인이 가능

🏠 메인페이지

• React-slideshow-image를 통한 광고기능을 구현
• Running,Exercise,Challenge로 이동

📸 스토리

• React-webcam을 이용하여 영상을 업로드하는 기능을 구현
• Scheduler을 이용해 전날 업로드한 스토리는 삭제
• 카메라 배율 조절 기능
• 카메라 전면부,후면부를 전환할 수 있는 기능 구현

🏃 러닝

• Geolocation을 이용한 위치변화를 실시간으로 감지
• 네이버 맵 상에서 내가 달린 위치를 트래킹합니다.
• 거리, 시간,1km당 평균 페이스를 기록

🏋️ 맨몸운동

• 윗몸일으키기, 스쿼트, 팔굽혀펴기 운동 가능
• Teachable machine 을 통해 동작을 학습
• Animation frame 을 통한 연속적인 프레임을 처리

🎯 챌린지

• Scheduler을 이용해서 각 날짜별로 챌린지가 성공했는지 여부를 확인
• 챌린지 완료 시 경험치가 지급되고 레벨과 랭킹에 반영

🥇 랭킹

• 챌린지를 통하여 획득한 포인트로 본인의 랭킹 확인
• 챌린지가 성공하면 획득한 포인트로 랭킹이 결정
• Scheduler 을 이용하여 6시간마다 랭킹이 업데이트

👤 마이페이지

• Running/Exercise 챌린지 결과를 도넛 차트를 이용해 출력
• 내가 한 모든 운동 상세결과를 확인