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:
@@ -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] 패턴을 동일하게 추가
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user