issues
search
codesquad-project-team
/
frontend
🍻취향 공유 sns 팀프로젝트
20
stars
3
forks
source link
[27] 글 작성 시 장소 검색 기능 구현 및 카카오 지도api로 교체
#58
Closed
dev-allenk
closed
4 years ago
dev-allenk
commented
4 years ago
branch name
feat/27-post-upload-page-location-search
구현내용
장소 검색 기능
[x] 장소 검색어 입력하여 api 요청하는 기능
[x] api 응답 받아서 모달창에 목록 표시 & 지도에 마커 표시 기능
[x] 목록 및 마커 클릭 시 선택되고 지도 중앙으로 포커싱되는 기능
[x] 장소검색 모달창에 확인버튼 누를 경우 모달창 닫히면서 선택된 데이터를 저장하는 기능
[x] 확인버튼 누른 경우 글 작성 페이지에 '어디에서' 부분에 선택한 장소의 이름이 디폴트로 입력되는 기능
[x] 확인버튼 누른 경우 글 작성 페이지에 '장소 검색' 버튼 대신 선택한 장소를 보여주는 지도가 표시되는 기능
[x] 표시된 지도를 클릭 시 장소를 다시 검색/수정할 수 있는 기능
지도 api 교체
[x] react-naver-maps 모듈 삭제
[x] react-kakao-maps 모듈 설치
[x] 기존 작성된 MapView 컴포넌트에서 카카오api를 사용하도록 수정
[ ] 지도 Client Id 관련 travis 설정 수정
참고사항
장소 상세 페이지를 제공하기 위해 네이버api를 카카오api로 교체합니다.
dev-allenk
commented
4 years ago
[x] 지도 드래그해서 중심 이동한 경우 lat, lng 상태값 변경하기 :
center_changed
(검색 기준점을 새로 세팅하기 위해 필요) -> map.getCenter() api로 구현
[x] 검색목록 결과 클릭 시 선택된 표시 하기(음영처리)
[x] 검색목록 결과 클릭 시 마커 모양 변경
[x] 마커 클릭 시 목록 선택되게 하기
[x] 마커 mouseover 시 마커 모양 변경
[x] 마커 mouseout 시 마커 모양 변경
[x] 선택된 마커는 mouseout 시 선택된 모양 유지
[x] 마커 hover 했을 때 infoWindow 띄우기
[x] 장소 선택된 채로 '확인'이 아닌 '닫기'버튼을 누른 경우 저장되지 않는다는 알림창 띄우기
[ ]
목록에 hover 했을 때 마커 모양 변경
[x] 빈 검색어이거나 검색결과가 없을 때 안내메시지 보여주기
[x] 장소 선택 안한채로 확인 누를 경우 알림창 띄우기
[x] 검색결과 15개 이상일 경우 다음 결과 볼 수 있도록 페이지네이션 기능 추가
branch name
구현내용
장소 검색 기능
지도 api 교체
참고사항