World-map-note는 방문한 위치에 마커로 나만의 노트를 남기는 메모 지도 사이트 이다.
디자인은 네이버 지도 를 참고하였다.
지도를 띄워주기 위한 api 는 kakao map api 를 사용해주었다.
카카오 맵 sdk 를 설치하고 공식문서 에 나와있는 대로 map을 화면에 띄워주었다. 하지만 마커를 생성하는 과정에서와 마커를 눌렀을 때 나오는 커스텀 인포윈도우를 생성하고 띄워주기 위한 과정에서 react hook을 이용하여 state 등을 관리해주고 싶다는 생각을 하게 되었다.
커스텀 인포윈도우를 설정할 때도 다음과 같이 작성해주어야 했기 때문에,
이전 코드
const { kakao } = window
export default function kakaoMap(latitude: IKakaoMap['latitude'], longitude: IKakaoMap['longitude']) {
const container = document.getElementById('kakaoMap')
const options = {
center: new kakao.maps.LatLng(latitude, longitude),
level: 12,
}
const map = new kakao.maps.Map(container, options)
return map
}
export function kakaoMapMark(map: any) {
const marker = new kakao.maps.Marker({
position: map.getCenter(),
})
marker.setMap(map)
kakao.maps.event.addListener(map, 'click', (mouseEvent: any) => {
const latlng = mouseEvent.latLng
marker.setPosition(latlng)
})
}
이 부분을 함수 컴포넌트로 대체해서 코드를 분리하고 재사용성을 높이며, 나중에 리팩토링이 쉽도록 하면 좋을 것 같았다.
이런 생각을 하던 중 react에 맞게 포팅한 라이브러리인 react-kakao-maps-sdk를 발견하게 되었다. 위에서 내가 추구하던 함수 컴포넌트로 이 카카오 맵 api 서비스를 사용할 수 있게 되어 이 라이브러리로 변경하게 되었다.
변경된 코드
const KakaoMap = () => {
const [mapPosition, setMapPosition] = useRecoilState(mapPositionAtom)
const [markPosition, setMarkPosition] = useRecoilState(markPositionAtom)
return (
<Map
center={{
lat: mapPosition.latitude,
lng: mapPosition.longitude,
}}
style={{
width: '100%',
height: '100%',
}}
level={mapLevel}
onClick={handleMapPositionClick}
onCreate={() => setIsMapLoaded(true)}
>
{markPosition.memoPlacePosition.map((memoPosition: any, iMarker: number) => {
const memoMarkerKey = `memoMarker-${iMarker}`
return <Marker key={memoMarkerKey} markPosition={memoPosition} isMapLoaded={isMapLoaded} />
})}
<Marker markImg={geolocationMarkImg} markPosition={markPosition.geolocation} isMapLoaded={isMapLoaded} />
{!isDeleteSearchMarker && (
<Marker markImg={searchMarkImg} markPosition={markPosition.searchPosition} isMapLoaded={isMapLoaded} />
)}
)
}
마크를 클릭했을 때 나오는 인포윈도우에서 '메모 추가'를 클릭했을 시 나올 추가 폼을 어떤 방식으로 띄워줄지에 대한 고민이 있었다. 모바일 버전에서는 지도 위에 지도를 다 덮지는 않을 정도의 크기 폼 형태로 띄워주고자 하였고, 데스크탑 버전에서는 네이버 지도처럼 왼쪽에서 창이 나오도록 하고 싶었다.
모바일 버전에서 띄워주는 폼 형태를 모달로 띄워줘야할 지에 대한 고민이 있었다. 그런던 중 모달 개념 참고 블로그를 읽고,
모달
은 모달(Modal)은 사용자의 이목을 끌기 위해 사용하는 화면전환 기법을 의미한다. 그래서 모달은 내비게이션 인터페이스와는 달리 정보의 흐름을 가지고 화면을 이동한다기 보다는 꼭 이목을 끌어야하는 화면에서 사용 한다.
라는 모달의 개념을 다시 짚을 수 있었다.
따라서 내가 띄워주고자 하는 '메모 추가' 폼은 이목을 끌어야하는 항목
과는 거리가 멀어 모달로 띄워주기에는 부적절하다. 그래서 띄워주는 '메모 추가'는 컴포넌트로 생성하여 보여주기로 하였다.