[UNI-49] feat : 지도 페이지 구현 (지도 메인, 장소 상세, 건물 검색, 경로 검색) (UNI-50, UNI-55)

[dgfh0450]

#️⃣ 작업 내용

1. 지도 메인 페이지 (건물 마커, 위험 | 주의 마커)

• 위험 | 주의 클릭 시, 위험 주의 요소 생성

2. 장소 상세 페이지

• 건물 마커 클릭 시, 장소 정보 BottomSheet 생성

3. 건물 검색 페이지

• 건물 리스트

4. 경로 검색 페이지

• 마커를 클릭하여 출발지, 도착지 입력
• 건물 리스트에서 선택하여 출발지 도착지 입력 로직

핵심 기능

1. Zustand 적용

• Zustand로 결정한 이유?
• 다른 후보군으로 Recoil, Redux, Zustand가 존재
• 1. Recoil : 장기간 라이브러리 업데이트가 되지 않았으며, 메모리 누수라는 단점이 발생할 가능성이 높아서 배제
• 2. Redux : 상태관리하기에 라이브러리가 너무 무겁기에 빠른 렌더링으로 목적하는 프로젝트에는 부적합하다고 판단하여 배제
• 3. Zustand : 러닝커브가 낮고, 가벼운 라이브러리 사용하기 쉬워 선정

2. GlobalState로 출발지, 도착지 관리

• 출발지 도착지 관리를 TopSheet, BottomSheet, Map 3곳에서 접근하기에 Global State로 분리하여 Props 관계를 해소함
• 현재는 Props depth가 낮지만 추후 라우터를 분리할 수 있다는 것을 고려하여 Global State로 분리
• 해당 state에는 출발지, 출발지 설정, 도착지, 도착지 설정, 출발지 도착지 교환 을 담고 있음

3. GlobalState로 빌딩 검색을 관리

• 분리된 라우터 (빌딩 검색 페이지, 지도 페이지) 간에 원활한 데이터 교환을 위해 Global State를 설정
• 지도 페이지에서 Input을 클릭하여, 출발지 혹은 도착지를 입력하기에 mode, setMode와 선택된 빌딩 building, setBuilding을 담고 있음

4. Marker Content 동적으로 변경

• 마커의 종류(건물, 위험, 주의, 건물 선택, 출발지 건물, 도착지 건물)로 다양하기에 각각 마커의 종류에 해당하는 Content를 생성하는 함수를 생성

export function buildingMarkerContent({ title }: { title: string }): HTMLElement {
}

export function selectedBuildingMarkerContent({ title }: { title: string }): HTMLElement {
}

export function cautionMarkerContent(factors?: string[]): HTMLElement {
}

export function dangerMarkerContent(factors?: string[]): HTMLElement {
}

export function originMarkerContent({ title }: { title: string }): HTMLElement {
}

export function destinationMarkerContent({ title }: { title: string }): HTMLElement {
}

marker.content = buildingMarkerContent();

2025-01-31.11.42.52.mp4

5. Marker Anchor 설정

• Advanced Marker 생성 시, 입력되는 좌표는 Marker Content의 중앙 하단 좌표에 대응된다.
• 원하는 위치로 이를 이동시키기 위해서 traslate를 시키는 과정이 필요!
• 그러기 위해서는 Figma를 통해 마커 svg의 픽셀들을 고려할 필요가 있음

6. Marker Toggle (On/Off)

• 생성된 Marker들을 state로 관리하여 Toggle시, Marker의 map을 null 또는 map으로 변환하며 마커의 On/Off 조절

	/** Marker 보이기 안보이기 토글 */
	const toggleMarkers = (isActive: boolean, markers: AdvancedMarker[]) => {
		if (isActive) {
			for (const marker of markers) {
				marker.map = map;
			}
		} else {
			for (const marker of markers) {
				marker.map = null;
			}
		}
	};

2025-01-31.11.40.57.mp4

성능 측정

동작 확인

Uploading 화면 기록 2025-01-31 오후 12.31.27.mp4…

[jpark0506]

LGLGTMTM 어려운 로직이었을텐데 구현하느라 고생하셨습니다

[jpark0506]

하나 배웠습니다~ 굳굳