Skip to content

Repository files navigation

썸네일



✨ 목차



✨ 서비스 소개

지도 위를 달리며 땅을 차지하고, 12간지 팀과 함께 랭킹 경쟁을 펼치는 러닝+게임 융합 앱 서비스

  • 🕜 진행 기간 : 2025.04.14. ~ 2025.05.22. (6주)
  • 👨‍👩‍👧‍👦 진행 인원 : 6명 (FE: 3, BE: 2, INFRA: 1)
주요 기능

✅ 주요 기능 summary

기능 설명
1️⃣ 소셜 로그인 서비스 이용을 위한 JWT 기반 인증 기능
2️⃣ 개인/팀별 통계 대시보드 최근 1주일 간의 통계계 정보 제공 기능
3️⃣ 지도 기반 점령 현황 시각화 지도 위에 팀별 점령 타일 현황 정보 제공 기능
4️⃣ 점령 러닝 내가 밟은 타일을 기반으로 러닝 정보를 갱신하고, 타일 점령 정보 반영 기능
5️⃣ 나만의 코스 만들기 지도 위에 포인트를 추가하여 나만의 코스 제작 기능
6️⃣ 코스 검색 및 상세 조회 내가 달렸던 코스, 찜한 코스, 다른 러너들이 만든 코스 검색 및 상세 조회 기능
7️⃣ 러너 검색 및 상세 조회 다른 러너를 검색하거나 프로필을 조회하며 러닝 정보를 확인하고 팔로잉 할 수 있는 SNS 기능



✨ 팀원 및 역할 분담

👑 이주현 🟡 김수현 🟡 박창조 🟡 윤서희 🟡 이남재 🟡 전종우
인프라 백엔드 프론트엔드 프론트엔드 백엔드 프론트엔드
이름 역할
이주현
  • 인프라 설정 및 무중단 배포 자동화
  • 서버-프론트 간 통합 환경 설정
  • 김수현
  • Spring Boot 기반 JWT 인증 플로우 정교화
  • 백엔드 테스트 코드 작성
  • 멤버, 코스 CRUD
  • 박창조
  • 개인/팀 런닝 통계 대시보드 페이지 구현
  • 나만의 코스 만들기 기능 구현
  • 주요 공통 컴포넌트 구현
  • SSR 렌더링을 위한 공통 fetcher 함수 구현
  • 윤서희
  • 러닝 페이지 및 땅 점령 기능 구현
  • React Native를 활용한 native 페이지 구현 및 웹뷰 연결
  • 이남재
  • 벡엔드 테스트 코드 작성
  • 런닝 시작, 종료 API 제작
  • 개인, 팀 별 타일 확인 API 제작
  • 팀 랭킹, 팀 내 개인 랭킹 API 제작
  • 전종우
  • 네이티브 앱 페이지, 클라이언트 컴포넌트, 서버 컴포넌트별 JWT 토큰 관리 및 라우터 가드 구현
  • OAuth 기반 로그인 및 회원가입 페이지 구현
  • 코스 검색, 조회 페이지 구현
  • 유저 프로필 검색, 조회, 편집 페이지 구현


  • ✨ 시스템 아키텍처

    시스템 아키텍처



    ✨ 기술 스택

    Frontend

    TypeScript Next.js ReactNative tailwindcss Tanstack query zustand axios chartjs lodash pnpm

    Backend

    java springboot spring_JPA PostgreSQL Redis gradle

    CI/CD

    nginx Docker amazonec2 Jenkins

    Collaboration

    gitlab Jira Mattermost figma notion



    ✨ 주요 기능

    1️⃣ 소셜 로그인

    서비스 이용을 위한 JWT 기반 인증 기능

    • OAuth 2.0 기반의 카카오 소셜 로그인 기능 구현
    소셜 로그인

    2️⃣ 개인/팀별 통계 대시보드

    최근 1주일 간의 러닝 정보 제공 기능

    개인 대시보드 팀 대시보드

    3️⃣ 지도 기반 점령 현황 시각화
    • GeoHash 기반의 타일 클러스터링
    • 디바운싱을 적용한 타일 조회 최적화
    통계 대시보드

    4️⃣ 점령 러닝

    내가 밟은 타일을 기반으로 러닝 정보를 갱신하고, 타일 점령 정보 반영 기능

    • 디바운싱을 적용한 타일 조회 최적화
    러닝

    5️⃣ 나만의 코스 만들기

    지도 위에 포인트를 추가하여 나만의 코스 제작 기능

    코스 작성

    6️⃣ 코스 검색 및 상세 조회

    내가 달렸던 코스, 찜한 코스, 다른 러너들이 만든 코스 검색 및 상세 조회 기능

    코스 조회

    7️⃣ 러너 검색 및 상세 조회

    다른 러너를 검색하거나 프로필을 조회하며 러닝 정보를 확인하고 팔로잉 할 수 있는 SNS 기능

    프로필 프로필



    ✨ 참고 문서

    ERD

    ERD

    디자인 시스템

    디자인 시스템

    서비스 소개 영상

    Youtube Badge



    ✨ 프로젝트 회고

    이름 내용
    이주현 "인프라를 처음 해봤는데, 생각할 게 많더라고요. 무중단 배포까지 욕심을 좀 부렸더니 쉽지 않았어요.
    하지만, 시야가 조금 더 넓어진 것 같아 뿌듯합니다."
    김수현 "PostgreSQL을 써봐서 좋았습니다."
    박창조 "런닝이라는 서비스를 기획하고 개발하게 되면서, Webview라는 새로운 아키텍처를 도입하여 앱과 웹의 차이에 대해 공부할 수 있는 시간이 되어 의미가 깊었습니다. 더불어 사용자 경험을 위해 정적인 데이터를 빠르게 보여주기 위해 도입한 Next.js를 도입하면서, SSR에 대한 이해도를 높이며 프론트엔드 개발자로 한층 더 성장할 수 있었던 시간이었습니다. 특별히 평소 친했던 팀원들과 웃음 가득히 즐겁게 개발했던 6주의 시간이어서 행복했던 추억으로 남을 것 같습니다 :)"
    윤서희 "안드로이드 환경을 더 공부하고 개발했으면 하는 생각이 듭니다. 다음번엔 백그라운드 동작, wearable 연동까지 도전해보려고 합니다."
    이남재 "GeoHash 그만보고 싶다.."
    전종우 "SSR을 경험하기 위해 Next.js 학습을 병행하며 진행했던 만큼 개발 속도가 많이 더뎠던 프로젝트였지만, 네이티브 앱 페이지나 서버 컴포넌트 등 다양한 플랫폼에서 JWT 토큰을 관리하기 위해 고민하며 성장할 수 있었습니다."

    About

    뛰어서 땅따먹기, 너의 간지를 보여줘

    Resources

    Stars

    0 stars

    Watchers

    0 watching

    Forks

    Releases

    Packages

    Contributors

    Languages