fix(map): NaverMap 클러스터 클릭 시 중앙 이동 — morph로 통일

- 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>
This commit is contained in:
joungmin
2026-06-17 09:55:51 +09:00
parent 250b067d87
commit 14384b0c71
2 changed files with 13 additions and 8 deletions

View File

@@ -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] 패턴을 동일하게 추가

View File

@@ -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 {