From 060b458eb91160c701b65e630fd41ed23f9109f2 Mon Sep 17 00:00:00 2001
From: sb <sbsb401824@gmail.com>
Date: Sun, 12 Jul 2026 13:13:39 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=A7=80=EB=8F=84=20=EC=B9=B4=EC=B9=B4?=
 =?UTF-8?q?=EC=98=A4=20=E2=86=92=20=EB=84=A4=EC=9D=B4=EB=B2=84=20=EC=A0=84?=
 =?UTF-8?q?=ED=99=98=20(NCP=20Maps)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/NaverMap.vue | 27 +++++++++++++++++++++++++++
 src/pages/HomePage.vue      |  4 ++--
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/components/NaverMap.vue b/src/components/NaverMap.vue
index f7cf4ef..fc8119a 100644
--- a/src/components/NaverMap.vue
+++ b/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()
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index 446afa6..44354cc 100644
--- a/src/pages/HomePage.vue
+++ b/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()