화면 이미지
배경
지도 상에서 색상으로 표기된 모집글, 인증샷 내역을 한눈에 볼 수 있는 기능입니다. 다양한 필터(거리, 페이스, 성별, 제한인원 등)로 러닝 모집 내역들을 조회할 수 있습니다. 로그인을 한 모든 사용자는 인증샷을 조회할 수 있으며 좋아요를 누를 수 있습니다. BE
1.
지도 조회 기능
•
중심 좌표(위도, 경도) 위치 기준으로 최단 거리 기준 2km이내의 러닝 모집, 인증샷 정보를 제공합니다.
•
최단 거리를 구하기 위해 하버 사인 공식 (Haversine Formula) 을 사용하여 MySQL 쿼리로 구현하였습니다. (nativeQuery 사용)
•
러닝 모집 글을 필터링 하여 조회 할 때 러닝 페이스, 거리, 제한 인원 등의 조건은 start ~ end를 각 파라미터로 입력 받아 조회 편의성을 증대 하였습니다.
2.
사용자 별 러닝 참여 리스트 조회
•
접속한 사용자 기준으로 현재 진행 중인 러닝 내역을 확인할 수 있습니다.
3.
로그인을 한 모든 사용자는 인증샷을 조회할 수 있으며 좋아요를 누를 수 있습니다.
4.
좋아요는 토글형식으로, 두 번 누를 시 좋아요 취소 처리 됩니다.
•
FE
1.
홈 화면에는 Tmap API를 가져와서 지도를 띄움
•
상단에 주소 검색 기능을 넣어두어서, 주소를 입력 시 여러 개의 주소 리스트들을 보여주고 사용자가 선택하여 이동할 수 있게 구현함
•
Panning을 사용하여, 사용자가 지도를 드래그 해서 이동할 때마다, 이동한 지도의 중심 좌표를 기준으로 모집글과 인증글이 재로드되어 사용자에게 보여짐
•
모집글과 인증글은 마커의 색깔로 차이를 두어서 설정해두었고, 각 글을 누르면 하단의 모집글의 정보 및 경로 Polyline과 인증글은 인증된 업로드 사진이 사용자에게 제공되어서 사용자가 쉽게 볼 수 있음(Modal로 구현해서 접었다가 폈다가 할수 있음)
•
위치 마커를 누르면 사용자가 위치해 있는 현재 위치로 이동할수 있게 버튼을 하단 왼쪽에 배치시킴
2.
홈 화면 필터 버튼을 넣었으며, 클릭 시 active가 되어서 클릭이 되었다는 것을 사용자가 알 수 있게 해두었습니다.
3.
필터는 Modal 형식으로 되어있으며 클릭하면 위에서 아래로 내려오게 디자인하였음
4.
필터 사항들은 아이콘과 함께 텍스트를 둥근 컨테이너 안에 집어넣어서 다정한 느낌을 주었음
5.
사용자가 선택한 필터 정보들을 밑에 reset버튼을 누르면 다시 초기화되어서 다시 설정할 수 있게 하였음
6.
사용자가 선택한 필터 정보들은 파란색으로 active하게 해두어서 눈에 띄게 입체적으로 디자인함
추가적으로 구현하고 싶은 기능(아쉬운 점?)
[ 러닝 경로 GPS Tracking ]
•
프로젝트 진행 중에 추가 아이디어로 나온 의견 중 실시간의 사용자의 위치 정보를 추적하여 모니터링 하는 기능을 구현하지 못한 점이 아쉽습니다.
[내용]