[Feat] 지도 페이지 퍼블리싱

[kinjaebeom]

📝작업 내용

이번 PR에서는 미션 지도 페이지 추가 퍼블리싱과
추천 장소 기반 길찾기 흐름 구현을 진행했습니다.

📸스크린샷 (선택)

💬리뷰 요구사항(선택)

✅ 주요 변경 사항

1. 🗺️ 미션 지도 페이지 UI 수정

기존 지도 페이지를 피그마 디자인 기준으로 정리했습니다.

• 공통 QuespotPageLayout 적용
• 상단 HomeHeader 및 검색 영역 구성
• Google Maps 기반 지도 화면 구현
• 미션 스팟 마커 표시
• 현재 위치 마커 표시
• 지도 확대 / 축소 / 현재 위치 이동 버튼 추가
• 지도 범례 UI 추가

---

2. 📍 미션 스팟 선택 기능 구현

지도 위 미션 스팟을 클릭하면 해당 스팟이 선택되도록 구현했습니다.

• 선택한 마커 강조 처리
• 선택한 마커 위치에 길찾기 말풍선 표시
• 선택된 말풍선이 다른 마커보다 위에 보이도록 zIndex 적용
• 말풍선에서 미션 개수, 거리, 길찾기 버튼 표시

---

3. 🧭 추천 장소 리스트 구현

하단 주변 미션 스팟 영역에서 스팟을 선택하면
해당 스팟의 추천 장소 리스트가 표시되도록 구성했습니다.

• 스팟별 추천 장소 데이터 추가
• 추천 장소 개수 표시
• 장소명 / 주소 / 예상 이동 시간 / 거리 표시
• 추천 장소 클릭 시 길찾기 페이지로 이동

---

4. 🚶 다음 장소 길찾기 페이지 추가

추천 장소를 선택하면 이동하는
다음 장소 길찾기 페이지를 추가했습니다.

• 목적지 정보 카드 구현
• 현재 위치와 목적지 지도 표시
• 예상 이동 시간 / 거리 / 방향 정보 표시
• 도착 후 미션 시작하기 버튼 추가
• 공통 레이아웃 적용으로 기존 페이지와 화면 크기 통일

---

5. 🌐 외부 지도 앱 길찾기 연결

목적지까지 실제 길찾기를 실행할 수 있도록 외부 지도 앱 연결을 추가했습니다.

• Google Maps 길찾기 URL 연결
• 네이버 지도 앱 URL Scheme 연결
• 현재 위치 좌표를 출발지로 사용
• 선택한 추천 장소 좌표를 목적지로 사용

---

6. 📡 현재 위치 기반 거리 계산 적용

브라우저의 Geolocation API를 사용해
사용자의 현재 위치를 기준으로 거리와 예상 시간을 계산하도록 수정했습니다.

• 현재 위치 권한 요청
• 위치 권한 허용 시 실제 현재 위치 반영
• 위치 권한 실패 시 기본 위치 기준으로 처리
• 현재 위치와 목적지 간 직선거리 계산
• 대략적인 도보 예상 시간 계산

---

🔍 확인 사항

• 지도 페이지 UI 확인
• Google Maps 정상 표시 확인
• 미션 스팟 마커 클릭 확인
• 선택한 마커 위치에 말풍선 표시 확인
• 말풍선이 다른 마커보다 위에 표시되는지 확인
• 하단 주변 미션 스팟 선택 확인
• 추천 장소 리스트 노출 확인
• 추천 장소 클릭 시 길찾기 페이지 이동 확인
• 구글 지도 / 네이버 지도 길찾기 버튼 동작 확인
• 현재 위치 권한 허용 및 실패 케이스 확인

---

💬 참고 사항

현재 지도 표시는 Google Maps를 사용하고 있으며,
길찾기 버튼은 Google Maps와 네이버 지도 앱 호출을 함께 지원합니다.

다만 네이버 지도는 앱 URL Scheme 방식이기 때문에
모바일 환경에서 네이버 지도 앱이 설치되어 있어야 정상적으로 동작합니다.