[world-map-note] 프로젝트를 시작하면서

쏘소·2022년 9월 21일

world-map-note 프로젝트

기본개념

목록 보기

3/4

프로젝트 소개

World-map-note는 방문한 위치에 마커로 나만의 노트를 남기는 메모 지도 사이트 이다.
디자인은 네이버 지도 를 참고하였다.

고민한 점

map api 라이브러리 선정

지도를 띄워주기 위한 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)은 사용자의 이목을 끌기 위해 사용하는 화면전환 기법을 의미한다. 그래서 모달은 내비게이션 인터페이스와는 달리 정보의 흐름을 가지고 화면을 이동한다기 보다는 꼭 이목을 끌어야하는 화면에서 사용 한다.

라는 모달의 개념을 다시 짚을 수 있었다.

따라서 내가 띄워주고자 하는 '메모 추가' 폼은 이목을 끌어야하는 항목과는 거리가 멀어 모달로 띄워주기에는 부적절하다. 그래서 띄워주는 '메모 추가'는 컴포넌트로 생성하여 보여주기로 하였다.

쏘소