Feat : 그룹 모집 기능 구현 - Githubissues

ValueWith / ValueWith_FE

Trip With Buddy, Tweaver - 당일치기 여행 스케줄링 + 일행 모집 플랫폼

https://tweaver.site

1 stars 2 forks source link

Feat : 그룹 모집 기능 구현 #28

Closed geniee1220 closed 9 months ago

geniee1220 commented 10 months ago

PR 타입

[x] 기능 추가
[ ] 기능 삭제
[x] 버그 수정
[x] 의존성, 환경 변수, 빌드 관련 코드 업데이트

변경 사항

검색 데이터 / 추천 데이터 등록

검색을 하면 카카오 로컬 API 에서 검색어 장소 데이터를 최대 45개까지 받아옵니다.
추천받기를 클릭하면 TourAPI에서 지역별로 장소 데이터를 받아옵니다.
각 장소 데이터를 클릭하면 해당 장소의 중심 위치로 지도가 이동합니다.
무한 스크롤링(react-intersection-observer 라이브러리 사용)

일정 등록

일정을 등록하면, 카카오맵 위에 커스텀 마커를 생성하고 각 마커 사이에 Polyline을 생성합니다.
등록된 일정의 카테고리에 따라 마커의 색상은 다르게 보여집니다.
등록된 일정은 드래그 앤 드랍(react-beautiful-dnd 라이브러리 사용)을 통해 순서를 바꿀 수 있습니다.
등록된 일정을 클릭하면 해당 장소의 중심 위치로 지도가 이동합니다.

최적경로 추천받기

등록된 여행 일정을 백엔드로 보내면, 백엔드에서 카카오 모빌리티를 통해 실제 거리 데이터를 가지고 양방향으로 최적의 경로를 찾아줍니다.
정렬된 데이터를 가지고 프론트에서 맵 위에 마커와 Polyline을 다시 생성합니다.

폼 입력

react-hook-form 라이브러리를 사용해 유효성 검사를 진행하였습니다.
이미지를 버튼 혹은 드래그 드랍으로 올릴 수 있고 미리보기 썸네일을 보여줄 수 있습니다.
react-datepicker 라이브러리를 사용해 여행 날짜와 모집 마감 날짜 버튼 클릭 시 달력을 보여줍니다.