maps

배경

지도는 Firstage에서 사진이 찍힌 장소를 모아 보여 주는 중심 화면입니다. Journey 앱의 사진 지도와 장소 화면, Firstage 홈페이지의 장소 탐색까지 지도가 들어가는 화면이 늘면서, 화면마다 MapLibre 인스턴스를 직접 다루는 분기 코드가 흩어졌습니다. 이 코드를 패키지 하나로 모으고, 화면은 필요한 지도 기능만 골라 쓰게 했습니다.

결정과 구현

• 지도 인스턴스는 MapView Provider 하나가 만들고, 하위 컴포넌트는 Hook으로 읽습니다. 클러스터, 경로, 마커, 카메라 저장 같은 기능은 각각 필요할 때만 붙이는 Plugin이라 화면이 쓰지 않는 기능은 번들에서 빠집니다.
• 마커 비교, 좌표 키, 투영 계산, 클러스터 정책은 React에 의존하지 않는 shared 층에 두고, 의존 방향은 map 층에서 shared 층으로만 허용했습니다.
• MapLibre는 지금 쓰는 렌더러일 뿐이어서 앱은 MapLibre 지도 객체를 직접 만들지 않습니다. 카메라, 클릭, GeoJSON 레이어는 렌더러와 무관한 Hook으로 다루므로, 다른 렌더러가 들어와도 패키지 안에서 같은 계약만 구현하면 됩니다.
• 지도는 클라이언트에서만 초기화하고, 첫 타일이 실제로 그려질 때까지 로딩 화면을 유지해 빈 지구본이 먼저 보이지 않게 했습니다. 서버 렌더 단계에서도 깨지지 않습니다.
• 데이터를 불러오는 기본 기능은 넣지 않았습니다. 지도는 카메라 상태만 알려 주고, 검색을 언제 실행하고 결과를 어떻게 나눌지는 화면이 정합니다.

현재 상태

Journey 앱의 사진 지도와 장소 화면, Firstage 홈페이지의 장소 탐색과 코스 지도, 블로그 글 안의 지도가 이 패키지를 씁니다. MapLibre 외 렌더러는 계약만 정해 두었고 아직 구현하지 않았습니다.