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

생성일
2025/01/31 06:45
태그

화면 이미지

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

배경

러닝 모집 조회 기능 이외에도 직접 원하는 조건을 설정하여 러닝 메이트를 모집하여 러닝 할 수 있도록 하는 기능입니다.
러닝 시작 버튼 클릭 전까지 러닝 모집 글을 등록한 사용자(관리자)에 한해서 수정, 삭제가 가능합니다.
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분 전에 미리 사용자에게 푸쉬 알림을 주는 기능
러닝 알림 기능을 초기 설계하였으나, 프로젝트 일정이 빠듯하여 구현하지 못한 점이 아쉽습니다. 추후에 따로 알림 기능은 추가 구현해보려고 합니다.