From 14384b0c71a5b2b7651ab3e6a97eccd0c693214b Mon Sep 17 00:00:00 2001
From: joungmin <joungmin@joungmins-Mac-mini.local>
Date: Wed, 17 Jun 2026 09:55:51 +0900
Subject: [PATCH] =?UTF-8?q?fix(map):=20NaverMap=20=ED=81=B4=EB=9F=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=84=B0=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EC=A4=91?=
 =?UTF-8?q?=EC=95=99=20=EC=9D=B4=EB=8F=99=20=E2=80=94=20morph=EB=A1=9C=20?=
 =?UTF-8?q?=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- panTo(애니메이션) + setZoom(z, true)(애니메이션) 동시 호출이 서로 cancel
- 단일 식당은 줌 변화 없어서 가려졌고 클러스터는 줌 크게 변경 → 가시화
- SDK의 morph(latlng, zoom)으로 center+zoom 동시 변경 일관 처리
- flyTo / selected / cluster 클릭 모두 동일 패턴

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 CHANGELOG.md                             |  5 +++++
 frontend/src/components/NaverMapView.tsx | 16 ++++++++--------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 37d7780..2990adc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,11 @@
 
 ## 2026-06-17
 
+### 🐛 NaverMap 클러스터 클릭 시 중앙 이동 fix (v0.1.65)
+- panTo(애니메이션) + setZoom(z, true)(애니메이션) 두 애니메이션 동시 호출이 서로 cancel
+- 단일 식당은 줌 변화 없어서 안 보였고, 클러스터는 줌 크게 변경 → 충돌 가시화
+- NaverMap SDK의 `morph(latlng, zoom)` 한 메서드로 통일 — center+zoom 동시 변경
+
 ### 🎯 NaverMapView selected 자동 panTo + zoom (v0.1.64)
 - 마커/클러스터/리스트 어디서 선택해도 그 식당이 화면 중앙으로 + zoom 16
 - GoogleMapView에는 이미 있던 useEffect [selected] 패턴을 동일하게 추가
diff --git a/frontend/src/components/NaverMapView.tsx b/frontend/src/components/NaverMapView.tsx
index 56edc6b..284ff72 100644
--- a/frontend/src/components/NaverMapView.tsx
+++ b/frontend/src/components/NaverMapView.tsx
@@ -28,6 +28,7 @@ type NaverMapInstance = {
   getZoom: () => number;
   getBounds: () => { getNE: () => LatLng; getSW: () => LatLng };
   panTo: (latlng: unknown, opts?: Record<string, unknown>) => void;
+  morph: (latlng: unknown, zoom?: number, transitionOptions?: Record<string, unknown>) => void;
   refresh: (noEffect?: boolean) => void;
 };
 type NaverMarker = {
@@ -231,21 +232,21 @@ export default function NaverMapView({
     }
   }, [ready, flyTo, selected, onBoundsChanged]);
 
-  // flyTo 변경 반영
+  // flyTo 변경 반영 — morph로 panTo+setZoom 충돌 회피
   useEffect(() => {
     const m = mapRef.current;
     if (!m || !flyTo || !window.naver?.maps) return;
-    m.panTo(new window.naver.maps.LatLng(flyTo.lat, flyTo.lng));
-    if (flyTo.zoom) m.setZoom(flyTo.zoom, true);
+    const latlng = new window.naver.maps.LatLng(flyTo.lat, flyTo.lng);
+    if (flyTo.zoom) m.morph(latlng, flyTo.zoom);
+    else m.panTo(latlng);
   }, [flyTo]);
 
-  // selected 변경 시 자동 panTo + zoom (GoogleMapView와 동일 동작)
+  // selected 변경 시 자동 중앙 + zoom
   useEffect(() => {
     const m = mapRef.current;
     if (!m || !selected || !window.naver?.maps) return;
     if (selected.latitude == null || selected.longitude == null) return;
-    m.panTo(new window.naver.maps.LatLng(selected.latitude, selected.longitude));
-    m.setZoom(16, true);
+    m.morph(new window.naver.maps.LatLng(selected.latitude, selected.longitude), 16);
   }, [selected]);
 
   // 클러스터 계산 (bounds/zoom 변경 시)
@@ -280,8 +281,7 @@ export default function NaverMapView({
         });
         naver.Event.addListener(marker, "click", () => {
           const z = Math.min(getExpansionZoom(cluster_id), 18);
-          m.panTo(new naver.LatLng(lat, lng));
-          m.setZoom(z, true);
+          m.morph(new naver.LatLng(lat, lng), z);
         });
         markersRef.current.push(marker);
       } else {