RunTime

SSAFY 10기 자율프로젝트 | 실시간 러닝배틀 서비스

My Contribution

Role	Fullstack
Period	2024.04 ~ 2024.05 (6주)
Team	6명 (BE 3, FE 2, Fullstack 1)

What I Did

1. 화면설계 및 프론트엔드 (Flutter)

• Figma로 전체 화면 UI/UX 설계, 디자인, 프로토타입 제작
• 담당 화면: 도전과제 (보상 Confetti 애니메이션 포함), 기록 (무한스크롤), 통계 (Calendar 위젯, 월/연간/전체), 메인화면 디자인 재설계
• 기타 화면 보조: 캐릭터 상세(로딩화면), 프로필/프로필편집, 랭킹(카드 위젯), 로그인(카카오 소셜)
• Riverpod(상태관리) + MVVM 패턴 적용으로 코드 관리 및 협업 효율화
• GoRouter 활용한 전체 라우팅 설계
• Firebase 연동

2. 프로젝트 폴더 구조 설계

• MVVM 패턴 기반 도메인별 폴더 구조 설계 (model / repository / service / view)
• 6명 협업 시 충돌 최소화를 위한 구조

3. 백엔드 API (기록 및 통계)

• QueryDSL 도입: 순수 JPA로 구현하기 어려운 복잡한 조건의 쿼리 해결
  • 무한스크롤 기능 (Slice 기반 페이지네이션)
  • 월별/연간/전체 통계 조회 (승리 수, 총 거리, 총 시간)
  • 달린 날짜 조회 (Calendar 연동)
  • 최근 10개 기록 중 최고 기록 등 도전과제용 쿼리
• ERD 설계 참여

4. 기타

• 서버 Exception 발생 시 Mattermost 자동 알림 전송
• PPT 제작 및 최종 발표 담당

Tech Stack

Spring Boot Spring Data JPA QueryDSL MySQL Redis Flutter Riverpod

---

기간 : 2024. 4. 8. ~ 2024. 5. 20. (6주)
인원 : 6명

📌 개요

혼자 달리는 것보다는 함께 달리는 것이 더 좋습니다. 실제로 마라톤의 참여도 계속해서 증가하고 있습니다. 하지만 시간과 공간의 제약이 있어 어려움이 있습니다. RunTime 통해서 언제 어디서든 재미있게 달려볼 수 있습니다!

런태기에 빠진 당신, 새로운 사람과 함께 달려 보세요!

📝 개발문서

🗂️ Notion

🖥️ Presention

🔧 기술스택

Front-End

Back-End

DB

Infra

📱 주요기능

• 실시간 매칭을 통한 상대방과의 3km 달리기 배틀!
• 티어별 매칭 시스템을 통해 나와 비슷한 상대와 뛰어 보세요!
• 화면을 보지 않아도 음성 중계 기능을 통해 달리기 상황을 실시간으로 들어 보세요!
• 달리기 통계를 통해 내 달리기 실력을 가늠해 보세요!

0. 페이지 개요

메인화면	도전과제	캐릭터	기록	프로필

1. 스플래시 및 로그인화면

• 소셜 로그인(카카오)

스플래시	로그인

2. 대결모드

• 대결모드 입장 후 대결 상대 찾기(실시간 매칭)
• 대결 상대가 매치된 후, 양 쪽 수락 시 대결 진행
• 해당 대결은 종료된 이 후, 티어 및 순위에 영향을 줄 수 있음

대결상대 찾기	매칭 성공

3. 사용자모드

• 최대 4인까지 여러 사용자와 달리기 가능

방 입장	방 만들기

4. 연습모드 및 랭킹

• 혼자 달릴 수 있는 개인 연습 모드
• 모든 사용자의 티어 점수에 따라 실시간으로 반영되는 랭킹

연습모드 입장	랭킹보기

5. 도전과제 및 캐릭터

• 서비스 이용 및 달리기를 통해 도전과제 수행
• 도전과제로 귀여운 캐릭터를 보상으로 받고 개인 프로필 캐릭터로 설정할 수 있다.

도전과제 보상받기	대표캐릭터 변경

6. 기록 및 통계

• 달리기의 기록정보를 볼 수 있다. 대결모드의 승패여부와 사용자모드 순위 등 다양한 정보들을 볼 수 있다.
• 월/연간 및 전체 통계를 확인할 수 있다.

기록보기	통계보기

7. 프로필 및 친구

• 프로필 수정 및 친구기능

프로필 수정	친구수락 및 친구추가

8. 점수 티어표

🏗️ 아키텍처

⚙️ ERD

👥 팀원소개

박정호	박예지	이현민	조우재	조창래	최도훈
Leader BE Infra	Full Stack	Full Stack	BE	BE	FE
API Security CI/CD	Flutter wearOS	API Flutter Design Presentation	API Assets&Resource Landing Site	API Socket Game	Flutter Socket Game