Skip to content

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

Merged
jpark0506 merged 17 commits intofefrom
feat/UNI-49
Jan 31, 2025
Merged

[UNI-49] feat : 지도 페이지 구현 (지도 메인, 장소 상세, 건물 검색, 경로 검색) (UNI-50, UNI-55)#20
jpark0506 merged 17 commits intofefrom
feat/UNI-49

Conversation

@dgfh0450
Copy link
Copy Markdown
Contributor

@dgfh0450 dgfh0450 commented Jan 31, 2025

#️⃣ 작업 내용

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

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

2. 장소 상세 페이지

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

3. 건물 검색 페이지

  • 건물 리스트

4. 경로 검색 페이지

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

핵심 기능

1. Zustand 적용

  • Zustand로 결정한 이유?
  • 다른 후보군으로 Recoil, Redux, Zustand가 존재
    1. Recoil : 장기간 라이브러리 업데이트가 되지 않았으며, 메모리 누수라는 단점이 발생할 가능성이 높아서 배제
    1. Redux : 상태관리하기에 라이브러리가 너무 무겁기에 빠른 렌더링으로 목적하는 프로젝트에는 부적합하다고 판단하여 배제
    1. 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

성능 측정

스크린샷 2025-01-31 오전 11 46 55

동작 확인

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

@dgfh0450 dgfh0450 requested a review from jpark0506 January 31, 2025 03:32
@dgfh0450 dgfh0450 self-assigned this Jan 31, 2025
@dgfh0450 dgfh0450 added 🚀 feat 기능 개발 🧇 fe 프론트엔드 task labels Jan 31, 2025
@dgfh0450 dgfh0450 changed the title [UNI-49] feat : 지도 페이지 구현 (지도 메인, 장소 상세, 건물 검색, 경로 검색) [UNI-49] feat : 지도 페이지 구현 (지도 메인, 장소 상세, 건물 검색, 경로 검색) (UNI-50, UNI-55) Jan 31, 2025
Copy link
Copy Markdown
Contributor

@jpark0506 jpark0506 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment on lines +125 to +132
if (isActive) {
for (const marker of markers) {
marker.map = map;
}
} else {
for (const marker of markers) {
marker.map = null;
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

하나 배웠습니다~ 굳굳

@jpark0506 jpark0506 merged commit 2dfb312 into fe Jan 31, 2025
@jpark0506 jpark0506 deleted the feat/UNI-49 branch February 1, 2025 15:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🧇 fe 프론트엔드 task 🚀 feat 기능 개발

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants