[27] 글 작성 시 장소 검색 기능 구현 및 카카오 지도api로 교체

[dev-allenk]

branch name

• feat/27-post-upload-page-location-search

구현내용

장소 검색 기능

• 장소 검색어 입력하여 api 요청하는 기능
• api 응답 받아서 모달창에 목록 표시 & 지도에 마커 표시 기능
• 목록 및 마커 클릭 시 선택되고 지도 중앙으로 포커싱되는 기능
• 장소검색 모달창에 확인버튼 누를 경우 모달창 닫히면서 선택된 데이터를 저장하는 기능
• 확인버튼 누른 경우 글 작성 페이지에 '어디에서' 부분에 선택한 장소의 이름이 디폴트로 입력되는 기능
• 확인버튼 누른 경우 글 작성 페이지에 '장소 검색' 버튼 대신 선택한 장소를 보여주는 지도가 표시되는 기능
• 표시된 지도를 클릭 시 장소를 다시 검색/수정할 수 있는 기능

지도 api 교체

• react-naver-maps 모듈 삭제
• react-kakao-maps 모듈 설치
• 기존 작성된 MapView 컴포넌트에서 카카오api를 사용하도록 수정
• 지도 Client Id 관련 travis 설정 수정

참고사항

• 장소 상세 페이지를 제공하기 위해 네이버api를 카카오api로 교체합니다.

[dev-allenk]

• 지도 드래그해서 중심 이동한 경우 lat, lng 상태값 변경하기 : center_changed (검색 기준점을 새로 세팅하기 위해 필요) -> map.getCenter() api로 구현
• 검색목록 결과 클릭 시 선택된 표시 하기(음영처리)
• 검색목록 결과 클릭 시 마커 모양 변경
• 마커 클릭 시 목록 선택되게 하기
• 마커 mouseover 시 마커 모양 변경
• 마커 mouseout 시 마커 모양 변경
• 선택된 마커는 mouseout 시 선택된 모양 유지
• 마커 hover 했을 때 infoWindow 띄우기
• 장소 선택된 채로 '확인'이 아닌 '닫기'버튼을 누른 경우 저장되지 않는다는 알림창 띄우기
• 목록에 hover 했을 때 마커 모양 변경
• 빈 검색어이거나 검색결과가 없을 때 안내메시지 보여주기
• 장소 선택 안한채로 확인 누를 경우 알림창 띄우기
• 검색결과 15개 이상일 경우 다음 결과 볼 수 있도록 페이지네이션 기능 추가