[27] 카카오 지도로 변경 및 장소 검색 기능 구현

[dev-allenk]

밑에 스크린샷 있어요!

구현사항

• 장소 검색
  • 장소 검색하여 목록 표시 & 지도에 마커 표시
  • 한 페이지에 검색결과 15개씩 표시
  • 검색결과 15개 이상일 경우 다음 결과 볼 수 있도록 페이지네이션 가능
• 목록 및 마커 인터렉션
  • 목록 및 마커 클릭 시 선택되고 지도 중앙으로 포커싱
  • 마커 hover 시 장소 이름 보여주는 infoWindow 표시
• 장소 저장
  • 확인버튼 누를 경우
  • 모달창 닫히면서 선택된 데이터를 PostUploadPage에 저장
  • PostUploadPage에 선택한 장소 이름이 디폴트로 입력
  • PostUploadPage에 '장소 검색' 버튼 대신 지도 프리뷰
  • 프리뷰 지도를 클릭 시 장소를 다시 검색/수정 가능
• 에러 처리
  • 검색결과가 없을 때 안내메시지 표시
  • 장소 선택된 채로 '확인'이 아닌 '닫기'버튼을 누른 경우 저장되지 않는다는 알림창 표시
  • 장소 선택 안한채로 '확인' 누를 경우 알림창 표시
• 지도 api 변경
  • react-naver-maps 패키지 삭제
  • react-kakao-maps 패키지 설치
  • 기존 작성된 MapView 컴포넌트에서 카카오api를 사용하도록 수정

참고사항

• git checkout origin/feat/27-post-upload-page-location-search
• react-kakao-maps 패키지를 사용했는데 기능이 너무 제한적이었어요. 그래서 쓸 수 있는건 그대로 쓰고 안되는 건 소스코드를 가져와서 커스텀해서 사용했어요. 커스텀한 소스코드는 react-kakao-maps 폴더에 모아놨어요. 여기 모아둔 코드는 리뷰 패스해도 될 듯!
• MapContextForwarder 컴포넌트
  • KakaoMap 컴포넌트의 하위에 사용해서 Context를 받아 state로 저장하고, hooks로 리턴해주는 역할이에요.
  • kakao객체가 KakaoMap의 Context안에서만 접근가능한데 KakaoMap을 사용하는 쪽(KakaoMap컴포넌트의 상위)에서 kakao객체를 사용하려고 만들었어요.
  • 얘만 빼면 그럭저럭 이해할 수 있는 코드일 것 같은데.. 혹시 힘들면 헬프 요청해요..ㅎ
• 프리뷰 지도를 못 움직이게 하고 싶었는데 드래그 이벤트를 막아버리면 클릭도 같이 막히더라구요. 그래서 그냥 놔뒀어요.
• 카카오 지도 api 참고 링크
• merge 되고 나면 배포하면서 travis 환경변수 수정예정입니다.(naver clientID > kakao key)
• [x] 이 PR merge 후 미셸 map_constants.js 파일 업데이트하기

해결된 이슈 번호

• resolved #58

스크린샷