🎍

Runner's Map 🏃‍♂️🏃‍♀️

생성일

2025/01/31 06:45

태그

러닝메이트

Backend

Frontend

깃허브

https://github.com/runners-map

비고

프로젝트 설명

러닝메이트 매칭 서비스

프로젝트 개요

Runner’s Map은 러닝메이트 매칭 서비스입니다.

기획 배경

•

혼자 달리기보다는 누군가와 함께 달리고 싶지만 크루 팀을 꾸려서 정기적으로 모이는 것까지는
부담스럽다면? 

•

위치, 거리, 페이스, 성별, 제한인원 등 원하는 조건을 필터링 하여 러닝을 하고 싶은 사람들끼리 
잠깐 모여서 달려보세요!

•

지도에서 출발지, 경유지, 도착지를 설정 후, 설정한 경로를 지도 내에서 시각적으로 확인하세요!

•

러닝 완료 후 인증샷을 남겨 러닝 활동을 기념해보세요!

•

나의 월 별 러닝 기록을 한눈에 확인하고, 유저들 끼리 랭킹 경쟁을 통해 러닝 대한 즐거움을 높여보세요!

핵심 기능

지도 내에서 달릴 경로 시각화

러닝크루 모집 기능 제공 (다양한 조건 필터, 댓글 기능 제공)

러닝기록 / 랭킹 데이터 제공

인증샷 / 좋아요 기능 제공

프로젝트 소개

아키텍처

기술 스택

ERD

시연 영상

주요 기능

갤러리 보기

서비스 화면 (중간에 끊기면 원본보기를 클릭해주세요!) (1)

화면 이미지

배경

회원가입시 등록한 이메일과 비밀번호로 로그인을 할 수 있습니다.

구현한 기능

이메일, 비밀번호 입력하면 Access, Refresh 토큰이 생성되며 로그인됩니다. 

기존 Refresh 토큰이 있는 경우 업데이트, 없으면 새로 저장됩니다. 
이를 통해 중복 로그인(기기 변동과 같은 상황)이나 로그인을 한 상태에서 서비스를 종료해도 다음 로그인이 유지됩니다. 

Refresh 토큰으로 Access 토큰을 갱신하여 로그인이 15일간 유지되도록 했습니다.

비밀번호는 암호화되어 처리됩니다.

•

FE

로그인시 이메일과 비밀번호를 axios를 통해 서버로 보냅니다

보내고 나서 받은 정보들은 zustand persist를 통해  전역변수로써 저장을 시키고, 새로고침 시에도 유지하게 합니다

이메일이나 비밀번호중 에러가 발생시(ex.존재하는 이메일, 형식에 맞지 않는 입력값, 빈칸), 에러 메세지가 표시됩니다.

로그인 회원가입

화면 이미지

배경

마이 페이지에서 제공하는 서비스입니다.

프로필 사진 등록 및 변경, 닉네임, 비밀번호 변경이 있습니다.

구현한 기능

프로필 사진 

닉네임, 비밀번호 

•

FE

추가적으로 구현하고 싶은 기능(아쉬운 점?)

내 정보 변경

화면 이미지

배경

지도 상에서 색상으로 표기된 모집글, 인증샷 내역을 한눈에 볼 수 있는 기능입니다.

다양한 필터(거리, 페이스, 성별, 제한인원 등)로 러닝 모집 내역들을 조회할 수 있습니다.

로그인을 한 모든 사용자는 인증샷을 조회할 수 있으며 좋아요를 누를 수 있습니다.

지도 조회 기능

•

중심 좌표(위도, 경도) 위치 기준으로 최단 거리 기준 2km이내의 러닝 모집, 인증샷 정보를 제공합니다. 

•

최단 거리를 구하기 위해 하버 사인 공식 (Haversine Formula) 을 사용하여 MySQL 쿼리로 구현하였습니다.  (nativeQuery 사용)

•

러닝 모집 글을 필터링 하여 조회 할 때 러닝 페이스, 거리, 제한 인원 등의 조건은 start ~ end를  각 파라미터로 입력 받아 조회 편의성을 증대 하였습니다. 

사용자 별 러닝 참여 리스트 조회 

러너 모집글 및 인증샷 조회 기능, 좋아요 기능

화면 이미지

(러너 모집글 신규등록(경로설정포함) , 수정, 삭제 관련 이미지)

배경

러닝 모집 조회 기능 이외에도 직접 원하는 조건을 설정하여 러닝 메이트를 모집하여 러닝 할 수 있도록 하는 기능입니다.

러닝 시작 버튼 클릭 전까지 러닝 모집 글을 등록한 사용자(관리자)에 한해서 수정, 삭제가 가능합니다.

러닝 모집 글 등록

•

등록 정보

•

설정된 경로(출발지 ~ 경유지 ~ 도착지 좌표) 를 List 형태로 전달받으며 경로의 좌표 데이터가 많을 수 있기 때문에 LONGTEXT 타입으로 DB에 저장합니다. 

•

저장, 수정, 삭제 기능을 제공합니다. 

•

FE

러너 모집 기능(저장, 수정, 삭제)

화면 이미지

배경

모집에 참여한 사용자만 이용이 가능한 서비스입니다.

함께 달릴 사람들과의 일정 조율, 간단한 소통을 위한 창구입니다.

구현한 기능

모집글에 참여한다는 의사를 밝힌 사용자만 해당 모집글의 댓글을 조회, 작성, 수정, 삭제가 가능합니다. 

조회
- 페이징 처리를 하여 한 페이지당 20개씩 볼 수 있습니다.
- 사용자의 닉네임, 댓글내용, 생성일자, 편집여부, 프로필 사진이 조회됩니다. 

작성 
- 공백으로 작성할 수 없으며 최대 200자까지만 작성할 수 있습니다.

댓글 수정, 삭제는 댓글 작성자만 할 수 있습니다. 

•

FE

모집글 리스트 페이지에서 댓글 쓰기 페이지로 이동할수 있게 되었습니다.

댓글 쓰기페이지에서는 작성/수정/전송/삭제의 기능을 넣어두어서 댓글을 쓸수 있게 해두었음

댓글 작성 수정 삭제

화면 이미지

배경

자신이 현재까지 달린 총 누적 거리, 월 별로 막대 그래프를 통해 한 눈에 쉽게 확인할 수 있습니다.

구현한 기능

러닝 기록 조회 API 

•

러닝 시작, 도착 시 저장된 러닝 기록 데이터를 기반으로 총 누적거리, 월 누적거리, 월 기준 일별 러닝 데이터 기록을 조회합니다. 

막대 그래프와 달력, 리스트를 이용하여 일별/월별로 달린 거리를 시각적으로 표현했습니다. 

막대그래프나 달력에서 특정 날짜를 클릭할 시, 하단 리스트에 해당 날짜의 러닝 기록이 조회됩니다.

하단 리스트에는 러닝거리 뿐만 아니라 러닝을 하는 데 걸린 시간도 함께 조회됩니다.  

추가적으로 구현하고 싶은 기능(아쉬운 점?)

월별 러닝기록 조회 기능

화면 이미지

배경

매일 자정마다 러닝 기록 데이터를 집계하여 월 별로 상위 20위 까지 사용자 랭킹을 볼 수 있습니다.

구현한 기능

러닝 기록 데이터 집계

•

매일 자정마다 1회 수행되며, 월 별 러닝 기록 데이터를 집계합니다. 

•

시스템을 사용하는 모든 사용자의 해당 월 데이터를 비교해야 하기 때문에 Spring Batch 를 사용하였습니다. 

•

해당 월의 러닝 기록 데이터를 조회하여 거리 / 시간에 대한 가중치를 부여하고, 특정 거리 수를 초과하면 가중치를 추가 부여하여 점수를 부여합니다.

랭킹 조회 

•

집계된 랭킹 점수의 상위 20명에 대해 랭킹을 조회합니다. 

랭킹 기능

화면 이미지

배경

러닝이 끝난 후, 모집글을 올린 모집장만 인증샷을 업로드할 수 있습니다.

그룹장 권한 체크, 도착여부 확인 후 S3에 인증샷을 업로드하고 Url을 받아옵니다. 

인증샷을 처음 올렸을 때의 좋아요 수는 0입니다.

•

FE

input 요소로 이미지를 받아 업로드 합니다.

accept="image/*” 속성으로 이미지 파일만 받을 수 있게 합니다.

input 요소에 이미지를 넣으면 업로드 전에 preview를 제공합니다.

추가적으로 구현하고 싶은 기능(아쉬운 점?)

•

인증샷 업로드

화면 이미지

배경

러닝 참여, 시작, 도착, 나가기, 러닝후 결과 등의 기능을 제공하여 러닝 메이트들의 상태를 관리하는 기능을 제공합니다.

러닝 시작

•

사용자가 시작 버튼을 누르면 해당 기록이 즉시 DB에 시작 일시 정보에 업데이트 됩니다.

•

러닝 시작 이후에는 러닝 나가기, 러닝 모집 글 변경이 비활성화 됩니다. 

러닝 도착

•

사용자가 완료 버튼을 누르면 해당 기록이 즉시 DB에 일시 정보가 저장되며, 해당 기간을 계산하여 Duration 정보를 추가로 함께 저장합니다.

러닝 참여 / 나가기

•

러닝 참여, 나가기 (그룹장 강퇴, 나가기) 기능을 제공합니다. 

러닝 사용자 관리 기능(시작, 완료, 결과 등)

트러블 슈팅

FE

BE

API 명세서

[Runner’s Map] API 명세서

팀원 소개

FE

•

박찬정

•

서준범

BE

•

윤혜진

•

전지원

협업 방법

GitHub

GitHubrunners-map

WhaleOn 화상회의  (시간 제한이 없다는 장점!)
: 데일리 스크럼 
- 월~토 오전 11:30분 (FE) 
- 월-목 오후 8시, 
- 금 : 백엔드 멘토링,
- 토 : 프론트엔드 멘토링, 
- 일 :  오후 7시

Slack 
: 채널은 데일리 스크럼에서 나눈 이야기를 정리하는 용도로 사용하였음 
: DM방을 만들어 좀 더 편안한 분위기에서 질문을 하고 작업의 진척 정도를 확인할 수 있도록 함 
: 깃허브와 연동한 pr 채널을 따로 만들어 FE, BE가 어떤 작업을 하고 있는지 확인할 수 있도록 함 

GitHub
: Organization을 만들어 내부에 FE용, BE용 레포지토리를 따로 만들어 작업 
: Pr을 통한 코드 리뷰

Runner's Map 🏃‍♂️🏃‍♀️

프로젝트 소개

아키텍처

기술 스택

ERD

시연 영상

주요 기능

화면 이미지

배경

구현한 기능

화면 이미지

배경

구현한 기능

추가적으로 구현하고 싶은 기능(아쉬운 점?)

화면 이미지

배경

화면 이미지

배경

화면 이미지

배경

구현한 기능

화면 이미지

배경

구현한 기능

추가적으로 구현하고 싶은 기능(아쉬운 점?)

화면 이미지

배경

구현한 기능

화면 이미지

배경

추가적으로 구현하고 싶은 기능(아쉬운 점?)

화면 이미지

배경

FE

BE

FE

BE

협업 방법

pr 예시