From 2eb16ce861ba7a91e8018c44667ab10ae13e1630 Mon Sep 17 00:00:00 2001 From: joungmin Date: Wed, 17 Jun 2026 10:09:22 +0900 Subject: [PATCH] =?UTF-8?q?fix(map):=20=ED=81=B4=EB=9F=AC=EC=8A=A4?= =?UTF-8?q?=ED=84=B0=20expansion=20=ED=9B=84=20=EB=A7=88=EC=BB=A4=20?= =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EC=9E=AC=EB=AC=B6=EC=9E=84=20?= =?UTF-8?q?=EB=B0=A9=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - selected 시 무조건 zoom 16 → 줌 18에서 마커 클릭하면 다시 16으로 줄어 클러스터링 - 현재 zoom ≥ 16이면 유지, 미만이면 16으로 (Naver/Google 둘 다) - page.tsx의 setRegionFlyTo 호출 제거 — selected useEffect로 일원화 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.7 --- CHANGELOG.md | 5 +++++ frontend/src/app/page.tsx | 6 ++---- frontend/src/components/GoogleMapView.tsx | 5 +++-- frontend/src/components/NaverMapView.tsx | 7 +++++-- 4 files changed, 15 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2990adc..2c44e9a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,11 @@ ## 2026-06-17 +### 🎯 클러스터 expansion 후 마커 클릭 시 재묶임 방지 (v0.1.66) +- 기존: selected 시 무조건 zoom 16 → 클러스터 expansion(18)에서 마커 클릭하면 다시 16으로 줄어 재묶임 +- 변경: 현재 zoom ≥ 16이면 유지, 미만이면 16으로 (NaverMap morph + GoogleMap setZoom 조건부) +- page.tsx의 setRegionFlyTo 호출 제거 — selected useEffect로 일원화 (zoom 16 강제 회피) + ### 🐛 NaverMap 클러스터 클릭 시 중앙 이동 fix (v0.1.65) - panTo(애니메이션) + setZoom(z, true)(애니메이션) 두 애니메이션 동시 호출이 서로 cancel - 단일 식당은 줌 변화 없어서 안 보였고, 클러스터는 줌 크게 변경 → 충돌 가시화 diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index e488da7..88c1829 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -385,10 +385,8 @@ export default function Home() { const handleSelectRestaurant = useCallback((r: Restaurant) => { setSelected(r); setShowDetail(true); - // 지도가 선택 식당으로 이동/줌인 — 객체 새로 만들어 flyTo effect 매번 트리거 - if (r.latitude != null && r.longitude != null) { - setRegionFlyTo({ lat: r.latitude, lng: r.longitude, zoom: 16 }); - } + // selected 변경 자체가 MapView 내부의 useEffect에서 중앙 이동을 처리. + // (flyTo를 같이 set하면 줌 16으로 강제되어 클러스터 expansion 후 마커 클릭 시 다시 묶임) }, []); const handleCloseDetail = useCallback(() => { diff --git a/frontend/src/components/GoogleMapView.tsx b/frontend/src/components/GoogleMapView.tsx index 9ee6cf2..ba03330 100644 --- a/frontend/src/components/GoogleMapView.tsx +++ b/frontend/src/components/GoogleMapView.tsx @@ -163,11 +163,12 @@ function MapContent({ restaurants, selected, onSelectRestaurant, flyTo, activeCh if (flyTo.zoom) map.setZoom(flyTo.zoom); }, [map, flyTo]); - // Pan and zoom to selected restaurant + // Pan and zoom to selected restaurant — 현재 줌이 16 이상이면 유지(클러스터 expansion 후 재묶임 방지) useEffect(() => { if (!map || !selected) return; map.panTo({ lat: selected.latitude, lng: selected.longitude }); - map.setZoom(16); + const currentZoom = map.getZoom() ?? 13; + if (currentZoom < 16) map.setZoom(16); setInfoTarget(selected); }, [map, selected]); diff --git a/frontend/src/components/NaverMapView.tsx b/frontend/src/components/NaverMapView.tsx index 284ff72..f6d44a9 100644 --- a/frontend/src/components/NaverMapView.tsx +++ b/frontend/src/components/NaverMapView.tsx @@ -241,12 +241,15 @@ export default function NaverMapView({ else m.panTo(latlng); }, [flyTo]); - // selected 변경 시 자동 중앙 + zoom + // selected 변경 시 자동 중앙 — 현재 줌이 16 이상이면 그대로, 미만이면 16으로 확대 + // (클러스터 expansion으로 18까지 들어간 상태에서 마커 클릭 시 다시 16으로 줄어 클러스터링되는 것 방지) useEffect(() => { const m = mapRef.current; if (!m || !selected || !window.naver?.maps) return; if (selected.latitude == null || selected.longitude == null) return; - m.morph(new window.naver.maps.LatLng(selected.latitude, selected.longitude), 16); + const latlng = new window.naver.maps.LatLng(selected.latitude, selected.longitude); + const targetZoom = Math.max(m.getZoom(), 16); + m.morph(latlng, targetZoom); }, [selected]); // 클러스터 계산 (bounds/zoom 변경 시)