feat: 지도 카카오 → 네이버 전환 (NCP Maps)
CI / build (push) Failing after 11m59s

- HomePage 지도 컴포넌트 KakaoMap → NaverMap
- NaverMap 에 확대/축소 컨트롤 + 지도 클릭 시 최근접 스팟 선택 이식
  (카카오에 있던 기능 동등하게)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
sb
2026-07-12 13:13:39 +09:00
parent ce66565b04
commit 060b458eb9
2 changed files with 29 additions and 2 deletions
+27
View File
@@ -43,8 +43,18 @@ onMounted(async () => {
map = new nv.maps.Map(mapEl.value, {
center: new nv.maps.LatLng(center.lat, center.lng),
zoom: 14,
// 확대/축소 +/- 컨트롤 (핀치 줌도 함께 동작)
zoomControl: true,
zoomControlOptions: { position: nv.maps.Position.RIGHT_CENTER },
})
infoWindow = new nv.maps.InfoWindow({ content: '', borderWidth: 0, disableAnchor: true })
// 지도 아무 곳이나 탭하면 가장 가까운 스팟 선택 (마커가 겹쳐도 선택 가능)
nv.maps.Event.addListener(map, 'click', (e: naver.maps.PointerEvent) => {
if (!e?.coord) return
const coord = e.coord as naver.maps.LatLng
const spot = nearestSpot(coord.lat(), coord.lng())
if (spot) emit('select', spot.id)
})
renderMarkers(nv)
} catch (e) {
errorMsg.value = `${(e as Error).message} 지도 키(VITE_NAVER_MAP_CLIENT_ID)를 설정하세요.`
@@ -84,6 +94,23 @@ function firstCenter() {
return withCoord ? { lat: withCoord.latitude!, lng: withCoord.longitude! } : DEFAULT_CENTER
}
/** 클릭 좌표에서 가장 가까운 스팟(위경도 제곱거리 최소). */
function nearestSpot(lat: number, lng: number): Spot | null {
let best: Spot | null = null
let bestDist = Infinity
for (const s of props.spots) {
if (s.latitude == null || s.longitude == null) continue
const dLat = s.latitude - lat
const dLng = s.longitude - lng
const dist = dLat * dLat + dLng * dLng
if (dist < bestDist) {
bestDist = dist
best = s
}
}
return best
}
function renderMarkers(nv: typeof naver) {
markers.forEach((m) => m.setMap(null))
markers.clear()