feat: 지도 카카오 → 네이버 전환 (NCP Maps)

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

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/components/NaverMap.vue

@@ -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()

src/pages/HomePage.vue

@@ -2,7 +2,7 @@
   <q-page class="q-pa-md">
     <!-- 카카오 지도: 스팟 마커 표시, 마커 클릭 시 해당 스팟 선택 -->
     <q-card flat bordered class="q-mb-md overflow-hidden">
-      <KakaoMap :spots="spots" :selected-id="currentSpot?.id ?? null" @select="onSelectSpot" />
+      <NaverMap :spots="spots" :selected-id="currentSpot?.id ?? null" @select="onSelectSpot" />
     </q-card>
 
     <!-- 로딩 / 에러 -->
@@ -144,7 +144,7 @@ import { ApiError } from '@/api/http'
 import { useAuthStore } from '@/stores/auth'
 import { useDogsStore } from '@/stores/dogs'
 import { useMatchingStore } from '@/stores/matching'
-import KakaoMap from '@/components/KakaoMap.vue'
+import NaverMap from '@/components/NaverMap.vue'
 import AffinityBadges from '@/components/AffinityBadges.vue'
 
 const $q = useQuasar()