🏃 RunTale

• RunTale은 스토리텔링과 함께하는 러닝 서비스입니다.
• RunTale은 모바일에서 쉽게 사용할 수 있는 웹 어플리케이션 서비스입니다.

목차

• 🕹️ 기능
• 👣 시작하기
• 🔧 기술
• 🗂️ 프로젝트 구조

📄 프로젝트 개요

항목	내용
프로젝트 소개	이야기와 함께하는 즐거운 러닝의 시작 [Runtale]
개발 인원	5명 (PM/디자인 1명 + 프론트엔드 2명 + 백엔드 2명)
개발 기간	2024. 07. 05 ~ 2024. 08. 06

🕹️ 기능

• 시나리오 : 시나리오를 선택하여 러닝을 시작하세요! 진행 상황에 따라 적절한 사운드가 제공되어 마치 그 상황에 처한 듯한 동기부여를 받을 수 있습니다.
• 실시간 피드백 : 지도에서 현재 위치와 지금까지 지나온 경로를 확인할 수 있으며, 실시간 페이스와 달린 거리 등 통계를 확인할 수 있습니다.
• 러닝 목표 달성 : 러닝이 끝난 후 평균 페이스, 총 달린 거리, 소요 시간 등 상세 정보를 확인할 수 있습니다. 또한 시작하기 전에 목표 페이스를 설정하고 달성해볼 수 있습니다.
• 이달의 기록 : 한 달 간 달린 거리, 러닝 횟수, 목표 페이스 달성 횟수 등, 이달의 기록을 숫자와 그래프로 확인해볼 수 있습니다.
• 티어 : 독자적이고 귀여운 티어 시스템으로 러닝이 더욱 즐거워집니다!

👣 시작하기

1. 런테일 서비스에 접속, 로그인

런테일 서비스를 만나보세요!

런테일 서비스에 접속하고, 로그인합니다.
아직 회원이 아니라면, 회원가입을 진행합니다.

2. 홈 화면

홈 화면에서는 본인의 티어, 랭킹, 대략적인 기록 등을 확인할 수 있으며,

아래로 스크롤하면 튜토리얼에 진입할 수 있습니다!

3. 시나리오 선택, 러닝 진행

하단의 Story 탭에서 시나리오를 선택하세요.
물론 시나리오 없이도 러닝을 시작할 수 있습니다!

시나리오를 선택했다면, 목표 페이스를 설정해보세요.
목표 페이스를 설정했다면, 시나리오 시작! 버튼을 눌러 러닝을 시작합니다.

먼저 각 시나리오별 음성이 재생됩니다.
이제 러닝을 시작할 차례입니다!

러닝을 시작하면 시나리오 화면 또는 지도를 확인 가능하고, 지도에서는 사용자의 실시간 러닝 경로가 표시됩니다.

도시 소음, 경적 소리 등과 함께 지속적으로 시나리오 음성이 재생 되 더 몰입감 있는 러닝이 가능합니다!

러닝이 종료되면 종료화면에서 기록을 볼지, 그대로 종료할지 선택이 가능하고

기록을 보게 되면 총 러닝 거리, 시간, 평균페이스 및 처음에 설정했던 목표 페이스에 도달 했는지 못했는지를 알 수 있습니다.

4. 이달의 기록

하단의 Record 탭을 선택하면 이달의 기록을 확인 할 수 있습니다.

해당 탭에서는 시나리오 완수 횟수, 목표 페이스 도달 횟수까지 확인이 가능해 사용자의 한 달 성과를 한눈에 볼 수 있습니다.

5. 활동

Activities 탭에서는 현재 사용자의 티어와, 전체 티어를 확인할 수 있습니다.

총 티어는 6개이며, Lv 0부터 5까지 각종 귀여운 이모지를 통해 나타내 사용자들이 보다 즐겁게 서비스를 이용하도록 하였습니다!

🪨🐌🐢🐇🐎🦅

🔧 기술

• React - 사용자 인터페이스를 구축하기 위한 JS 프레임워크.
• TypeScript - 자바스크립트에 정적 타입을 명시할 수 있게 하는, 자바스크립트 슈퍼셋 프로그래밍 언어.
• Vite : 웹 프론트엔드 빌드 도구.
• Material UI - 리액트 컴포넌트 라이브러리를 이용한 스타일링.
• React Router - 클라이언트 사이드 라우팅을 위한 라이브러리.
• Recoil - 전역 상태 관리 라이브러리.
• React Query (TanStack Query React) - 서버 상태를 불러오고, 캐싱, 동기화, 업데이트하기 위한 라이브러리
• Kakao Map Api - 위치 기반 지도 서비스에 카카오맵 사용.
• Recharts - 리액트 차트 라이브러리
• Vercel - 배포

배포에 관한 글을 썼어요
실시간 위치 기반 러닝 트래커 개발에 대해서도 썼어요
audio 기능과 음량을 전역상태로 관리하기

🗂️ 프로젝트 구조

RunTale_FE/
│
├── public/                 # 정적 파일
├── src/                    # 소스 코드
│   ├── assets/
│   ├── api/                # api
│   ├── components/         # 재사용 가능한 컴포넌트들
│   ├── constants/          # 상수
│   ├── pages/              # 각 페이지별 컴포넌트들
│   ├── layouts/            # 레이아웃
│   ├── context/            # 컨텍스트와 Recoil 전역상태
│   ├── hooks/              # 커스텀 훅
│   ├── utils/              # 유틸 함수들
│   ├── App.js              # 애플리케이션 진입점
│   └── index.js            # ReactDOM 렌더링
│
├── .gitignore              # Git 무시 파일 설정
├── package.json            # 프로젝트 종속성 및 스크립트
└── README.md               # 프로젝트 정보

🧑‍💻 프론트엔드 담당

조성훈	김도윤
sungpaks	doyun5565