화면 이미지
(러너 모집글 신규등록(경로설정포함) , 수정, 삭제 관련 이미지)
배경
BE
1.
러닝 모집 글 등록
•
등록 정보
( 필수 ) 제목, 내용, 제한 인원, 출발 시간, 거리, 예상 페이스, 경로
( 선택 ) 성별
•
설정된 경로(출발지 ~ 경유지 ~ 도착지 좌표) 를 List 형태로 전달받으며 경로의 좌표 데이터가 많을 수 있기 때문에 LONGTEXT 타입으로 DB에 저장합니다.
•
저장, 수정, 삭제 기능을 제공합니다.
•
FE
•
모집글 작성
◦
TMap API를 가져와서 사용자가 지도를 클릭시, 도로명 주소와 좌표를 보여줌
◦
마커의 종류는 색깔별로 출발/도착/경유 3가지가 있는데 경유는 최대 5군데 까지 설정할 수 있음
◦
경유 마커지는 없어도 되고 있어도 되게 설정을 해두었는데, 경유지 선택후 삭제시 순서가 재 정립되게 설정해둠 (ex. 1,2,3번 경유지를 선택후 2번째 경유지를 삭제시, 3번 경유지가 2번 경유지로 변경됨)
◦
출발지나 도착지 중 하나의 입력값을 입력하지 않고 검색을 하면, react-toastify를 통해 에러 메세지를 띄움
◦
모든 조건을 만족하고 검색 시, Polyline기능을 사용하여 사용자의 러닝 경로를 그려주고, 예상되는 러닝 km와 소요시간을 사용자에게 보여주고 이 경로로 설정을 원할시, 모집글 세부내용 작성 페이지로 이동하게 함
◦
모집글 작성시에는 모든 입력값을 넣어야 하고, 조건을 만족하지 못할시(제한인원이 0명, 빈칸, 빈제목 및 내용) 에러 메세지가 뜨게 해둠
◦
모집글 작성 완료시, axios.post를 통해 서버에서 연동되게 해두었고, 완료시 모집글 리스트 페이지로 이동하게 함
•
모집글 수정
◦
모집글 수정시에도 단계는 모집글 작성과 비슷하나, 다른점은 모집글 수정시에는 경로 설정 페이지로 먼저 이동하게 되나, 수정을 하고 싶지 않을시, 바로 모집글 내용 수정 페이지로 이동할수 있게 해둠
◦
모집글 수정 페이지에는 기존의 데이터를 불러와서 데이터를 보여주어 사용자가 조금 더 쉽게 내용을 고칠수 있게 해둠
◦
axios.put을 통해 모집글 정보가 업데이트되게 해두고 업데이트 완료시, 모집글 리스트 페이지로 이동하게 함
•
모집글 삭제
◦
모집글 삭제 버튼은, 모집글 상세보기 페이지에서 설정할수 있게 해두었음, 모집글이 삭제되는 경우는 2가지인데, 첫번째는 사용자가 모집글을 본인 선택으로 삭제하거나, 러닝을 완료시에 자동삭제되는 경우 2가지이다.
◦
axios.delete를 통해서 서버를 통해 삭제되게 해두었고, 삭제시 모집글 리스트 페이지로 이동하게 해둠
추가적으로 구현하고 싶은 기능(아쉬운 점?)
[ 러닝 알림 기능 ]
•
러닝 1시간, 30분 전에 미리 사용자에게 푸쉬 알림을 주는 기능
•
러닝 알림 기능을 초기 설계하였으나, 프로젝트 일정이 빠듯하여 구현하지 못한 점이 아쉽습니다. 추후에 따로 알림 기능은 추가 구현해보려고 합니다.