Share
서비스 화면 (중간에 끊기면 원본보기를 클릭해주세요!) (1)
갤러리 보기
Search
화면 이미지
배경
회원가입시 등록한 이메일과 비밀번호로 로그인을 할 수 있습니다.
구현한 기능
BE
1.
이메일, 비밀번호 입력하면 Access, Refresh 토큰이 생성되며 로그인됩니다.
2.
기존 Refresh 토큰이 있는 경우 업데이트, 없으면 새로 저장됩니다. 이를 통해 중복 로그인(기기 변동과 같은 상황)이나 로그인을 한 상태에서 서비스를 종료해도 다음 로그인이 유지됩니다.
3.
Refresh 토큰으로 Access 토큰을 갱신하여 로그인이 15일간 유지되도록 했습니다.
4.
비밀번호는 암호화되어 처리됩니다.
•
FE
1.
로그인시 이메일과 비밀번호를 axios를 통해 서버로 보냅니다
2.
보내고 나서 받은 정보들은 zustand persist를 통해 전역변수로써 저장을 시키고, 새로고침 시에도 유지하게 합니다
3.
이메일이나 비밀번호중 에러가 발생시(ex.존재하는 이메일, 형식에 맞지 않는 입력값, 빈칸), 에러 메세지가 표시됩니다.
로그인 회원가입
화면 이미지
배경
마이 페이지에서 제공하는 서비스입니다.
프로필 사진 등록 및 변경, 닉네임, 비밀번호 변경이 있습니다.
구현한 기능
BE
1.
프로필 사진
2.
닉네임, 비밀번호
•
FE
추가적으로 구현하고 싶은 기능(아쉬운 점?)
내 정보 변경
화면 이미지
배경
지도 상에서 색상으로 표기된 모집글, 인증샷 내역을 한눈에 볼 수 있는 기능입니다.
다양한 필터(거리, 페이스, 성별, 제한인원 등)로 러닝 모집 내역들을 조회할 수 있습니다.
로그인을 한 모든 사용자는 인증샷을 조회할 수 있으며 좋아요를 누를 수 있습니다.
BE
1.
지도 조회 기능
•
중심 좌표(위도, 경도) 위치 기준으로 최단 거리 기준 2km이내의 러닝 모집, 인증샷 정보를 제공합니다.
•
최단 거리를 구하기 위해 하버 사인 공식 (
Haversine Formula)
을 사용하여 MySQL 쿼리로 구현하였습니다. (nativeQuery 사용)
•
러닝 모집 글을 필터링 하여 조회 할 때 러닝 페이스, 거리, 제한 인원 등의 조건은 start ~ end를 각 파라미터로 입력 받아 조회 편의성을 증대 하였습니다.
2.
사용자 별 러닝 참여 리스트 조회
러너 모집글 및 인증샷 조회 기능, 좋아요 기능
화면 이미지
(러너 모집글 신규등록(경로설정포함) , 수정, 삭제 관련 이미지)
배경
러닝 모집 조회 기능 이외에도 직접 원하는 조건을 설정하여 러닝 메이트를 모집하여 러닝 할 수 있도록 하는 기능입니다.
러닝 시작 버튼 클릭 전까지 러닝 모집 글을 등록한 사용자(관리자)에 한해서 수정, 삭제가 가능합니다.
BE
1.
러닝 모집 글 등록
•
등록 정보
•
설정된 경로(출발지 ~ 경유지 ~ 도착지 좌표) 를 List 형태로 전달받으며 경로의 좌표 데이터가 많을 수 있기 때문에 LONGTEXT 타입으로 DB에 저장합니다.
•
저장, 수정, 삭제 기능을 제공합니다.
•
FE
러너 모집 기능(저장, 수정, 삭제)
화면 이미지
배경
모집에 참여한 사용자만 이용이 가능한 서비스입니다.
함께 달릴 사람들과의 일정 조율, 간단한 소통을 위한 창구입니다.
구현한 기능
BE
1.
모집글에 참여한다는 의사를 밝힌 사용자만 해당 모집글의 댓글을 조회, 작성, 수정, 삭제가 가능합니다.
2.
조회 - 페이징 처리를 하여 한 페이지당 20개씩 볼 수 있습니다. - 사용자의 닉네임, 댓글내용, 생성일자, 편집여부, 프로필 사진이 조회됩니다.
3.
작성 - 공백으로 작성할 수 없으며 최대 200자까지만 작성할 수 있습니다.
4.
댓글 수정, 삭제는 댓글 작성자만 할 수 있습니다.
•
FE
1.
모집글 리스트 페이지에서 댓글 쓰기 페이지로 이동할수 있게 되었습니다.
2.
댓글 쓰기페이지에서는 작성/수정/전송/삭제의 기능을 넣어두어서 댓글을 쓸수 있게 해두었음
댓글 작성 수정 삭제
화면 이미지
배경
자신이 현재까지 달린 총 누적 거리, 월 별로 막대 그래프를 통해 한 눈에 쉽게 확인할 수 있습니다.
구현한 기능
BE
1.
러닝 기록 조회 API
•
러닝 시작, 도착 시 저장된 러닝 기록 데이터를 기반으로 총 누적거리, 월 누적거리, 월 기준 일별 러닝 데이터 기록을 조회합니다.
FE
1.
막대 그래프와 달력, 리스트를 이용하여 일별/월별로 달린 거리를 시각적으로 표현했습니다.
2.
막대그래프나 달력에서 특정 날짜를 클릭할 시, 하단 리스트에 해당 날짜의 러닝 기록이 조회됩니다.
3.
하단 리스트에는 러닝거리 뿐만 아니라 러닝을 하는 데 걸린 시간도 함께 조회됩니다.
추가적으로 구현하고 싶은 기능(아쉬운 점?)
월별 러닝기록 조회 기능
화면 이미지
배경
매일 자정마다 러닝 기록 데이터를 집계하여 월 별로 상위 20위 까지 사용자 랭킹을 볼 수 있습니다.
랭킹 기능을 통해 사용자들에게 러닝에 대한 즐거움 및 동기부여를 제공하려는 목적으로 만들었습니다.
구현한 기능
BE
1.
러닝 기록 데이터 집계
•
매일 자정마다 1회 수행되며, 월 별 러닝 기록 데이터를 집계합니다.
•
시스템을 사용하는 모든 사용자의 해당 월 데이터를 비교해야 하기 때문에 Spring Batch 를 사용하였습니다.
•
해당 월의 러닝 기록 데이터를 조회하여 거리 / 시간에 대한 가중치를 부여하고, 특정 거리 수를 초과하면 가중치를 추가 부여하여 점수를 부여합니다.
2.
랭킹 조회
•
집계된 랭킹 점수의 상위 20명에 대해 랭킹을 조회합니다.
랭킹 기능
화면 이미지
배경
러닝이 끝난 후, 모집글을 올린 모집장만 인증샷을 업로드할 수 있습니다.
BE
1.
그룹장 권한 체크, 도착여부 확인 후 S3에 인증샷을 업로드하고 Url을 받아옵니다.
2.
인증샷을 처음 올렸을 때의 좋아요 수는 0입니다.
•
FE
1.
input 요소로 이미지를 받아 업로드 합니다.
2.
accept="image/*” 속성으로 이미지 파일만 받을 수 있게 합니다.
3.
input 요소에 이미지를 넣으면 업로드 전에 preview를 제공합니다.
추가적으로 구현하고 싶은 기능(아쉬운 점?)
•
인증샷 업로드
화면 이미지
배경
러닝 참여, 시작, 도착, 나가기, 러닝후 결과 등의 기능을 제공하여 러닝 메이트들의 상태를 관리하는 기능을 제공합니다.
BE
1.
러닝 시작
•
사용자가 시작 버튼을 누르면 해당 기록이 즉시 DB에 시작 일시 정보에 업데이트 됩니다.
•
러닝 시작 이후에는 러닝 나가기, 러닝 모집 글 변경이 비활성화 됩니다.
2.
러닝 도착
•
사용자가 완료 버튼을 누르면 해당 기록이 즉시 DB에 일시 정보가 저장되며, 해당 기간을 계산하여 Duration 정보를 추가로 함께 저장합니다.
3.
러닝 참여 / 나가기
•
러닝 참여, 나가기 (그룹장 강퇴, 나가기) 기능을 제공합니다.
러닝 사용자 관리 기능(시작, 완료, 결과 등)