From 1d552fe32e62f25c0121d3e2df619f829b37ff6e Mon Sep 17 00:00:00 2001 From: Lee SeungJoon Date: Tue, 21 Jul 2026 02:38:54 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=EC=A7=80=EB=8F=84=EC=97=90=20mock?= =?UTF-8?q?=20=ED=95=80=20=ED=91=9C=EC=8B=9C=20=EB=B0=8F=20=EC=84=A0?= =?UTF-8?q?=ED=83=9D=20=EC=83=81=ED=83=9C=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - OverlayView 기반으로 mock 핀을 지도에 렌더링하고, 선택 시 확대 하이라이트되도록 구현 - 현재 위치 방향 마커가 실제 방향 값 수신 전에도 기본값(0도, 북쪽)으로 항상 표시되도록 수정 --- src/features/map/components/MapViewer.tsx | 91 ++++++++++++++++++++++- src/pages/MapPage.tsx | 5 ++ 2 files changed, 93 insertions(+), 3 deletions(-) diff --git a/src/features/map/components/MapViewer.tsx b/src/features/map/components/MapViewer.tsx index 6ae05283..84347c66 100644 --- a/src/features/map/components/MapViewer.tsx +++ b/src/features/map/components/MapViewer.tsx @@ -1,5 +1,18 @@ import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react'; -import { KakaoLocalPlace, MapCoordinate, DEFAULT_CENTER, DEFAULT_MARKER_COLOR } from '../types'; +import { + KakaoLocalPlace, + MapCoordinate, + MapPin, + DEFAULT_CENTER, + DEFAULT_MARKER_COLOR, +} from '../types'; +import { + createMapPinOverlay, + disposeMapPinOverlay, + toMapPinMarkerProps, + updateMapPinMarker, + type MapPinOverlayEntry, +} from '../utils/mapPinMarker'; // 지도 줌 하한선 (레벨 단위 유지, 상한선은 API 지원 한도까지 허용) const MIN_ZOOM = 6; @@ -156,9 +169,12 @@ type MapViewerProps = { zoom: number; placeResults: KakaoLocalPlace[]; selectedPlaceId: string | null; + mapPins: MapPin[]; + selectedMapPinId: string | null; onZoomChanged?: (newZoom: number) => void; onCenterChanged?: (center: MapCoordinate) => void; onSelectPlace?: (placeId: string) => void; + onSelectMapPin?: (pinId: string) => void; }; export type MapViewerHandle = { @@ -167,7 +183,18 @@ export type MapViewerHandle = { }; export const MapViewer = forwardRef(function MapViewer( - { isLoaded, zoom, placeResults, selectedPlaceId, onZoomChanged, onCenterChanged, onSelectPlace }, + { + isLoaded, + zoom, + placeResults, + selectedPlaceId, + mapPins, + selectedMapPinId, + onZoomChanged, + onCenterChanged, + onSelectPlace, + onSelectMapPin, + }, ref, ) { const mapRef = useRef(null); @@ -178,10 +205,13 @@ export const MapViewer = forwardRef(function Ma const placeMarkersRef = useRef< { id: string; place: KakaoLocalPlace; marker: google.maps.Marker }[] >([]); + const mapPinOverlaysRef = useRef<{ id: string; entry: MapPinOverlayEntry }[]>([]); const infoWindowRef = useRef(null); const onCenterChangedRef = useRef(onCenterChanged); const onSelectPlaceRef = useRef(onSelectPlace); + const onSelectMapPinRef = useRef(onSelectMapPin); const selectedPlaceIdRef = useRef(selectedPlaceId); + const selectedMapPinIdRef = useRef(selectedMapPinId); useEffect(() => { onCenterChangedRef.current = onCenterChanged; @@ -191,6 +221,14 @@ export const MapViewer = forwardRef(function Ma onSelectPlaceRef.current = onSelectPlace; }, [onSelectPlace]); + useEffect(() => { + onSelectMapPinRef.current = onSelectMapPin; + }, [onSelectMapPin]); + + useEffect(() => { + selectedMapPinIdRef.current = selectedMapPinId; + }, [selectedMapPinId]); + useEffect(() => { selectedPlaceIdRef.current = selectedPlaceId; }, [selectedPlaceId]); @@ -326,6 +364,19 @@ export const MapViewer = forwardRef(function Ma icon: createMarkerIcon(mapsApi, DEFAULT_MARKER_COLOR), zIndex: 10, }); + + // 실제 기기 방향 값이 들어오기 전에 항상 방향 쐐기가 보이도록 함. 기본값(0도, 북쪽) + headingMarkerRef.current = new mapsApi.Marker({ + map, + position: pos, + icon: createHeadingIcon(mapsApi, DEFAULT_MARKER_COLOR, 0), + clickable: false, + zIndex: 11, + }); + + // 사용자 제스처가 필요 없는 브라우저(iOS 외)에서는 위치를 얻는 시점에 나침반도 바로 켠다. + enableCompassIfNeeded(); + onCenterChangedRef.current?.(pos); } else { markerRef.current.setPosition(pos); @@ -345,7 +396,7 @@ export const MapViewer = forwardRef(function Ma ignore = true; navigator.geolocation.clearWatch(watchId); }; - }, [isLoaded]); + }, [isLoaded, enableCompassIfNeeded]); // --- "현재 위치" 버튼에서 호출할 재중심 이동 --- const recenterToCurrentLocation = useCallback(() => { @@ -451,6 +502,40 @@ export const MapViewer = forwardRef(function Ma } }, [selectedPlaceId, placeResults]); + // --- 지도 핀(OverlayView) 렌더링 --- + useEffect(() => { + const map = mapInstanceRef.current; + if (!isLoaded || !map) return; + + mapPinOverlaysRef.current.forEach(({ entry }) => disposeMapPinOverlay(entry)); + + const selectedId = selectedMapPinIdRef.current; + + mapPinOverlaysRef.current = mapPins.map((pin) => { + const entry = createMapPinOverlay({ + position: { lat: pin.lat, lng: pin.lng }, + zIndex: pin.id === selectedId ? 200 : 100, + onClick: () => onSelectMapPinRef.current?.(pin.id), + ...toMapPinMarkerProps(pin, pin.id === selectedId), + }); + entry.overlay.setMap(map); + + return { id: pin.id, entry }; + }); + }, [isLoaded, mapPins]); + + // --- 선택된 지도 핀 강조 --- + useEffect(() => { + mapPinOverlaysRef.current.forEach(({ id, entry }) => { + const pin = mapPins.find((candidate) => candidate.id === id); + if (!pin) return; + + const isSelected = id === selectedMapPinId; + updateMapPinMarker(entry.mount, toMapPinMarkerProps(pin, isSelected)); + entry.overlay.setZIndex(isSelected ? 200 : 100); + }); + }, [selectedMapPinId, mapPins]); + return (
{!isLoaded && ( diff --git a/src/pages/MapPage.tsx b/src/pages/MapPage.tsx index 0dbd21f9..2dd3ea14 100644 --- a/src/pages/MapPage.tsx +++ b/src/pages/MapPage.tsx @@ -4,6 +4,7 @@ import { KakaoLocalPlace, MapCoordinate, DEFAULT_CENTER } from '@/features/map/t import { loadGoogleMapsScript } from '@/features/map/utils'; import { searchKakaoLocal } from '@/features/map/kakaoLocal'; import { MapViewer, type MapViewerHandle } from '@/features/map/components/MapViewer'; +import { MOCK_MAP_PINS } from '@/features/map/constants/mockMapPins'; import BookmarkIcon from '@/assets/icons/bookmark.svg?react'; import FocusIcon from '@/assets/icons/focus.svg?react'; @@ -26,6 +27,7 @@ const MapPage: React.FC = () => { const [selectedPlaceId, setSelectedPlaceId] = useState(null); const [isPlaceSearching, setIsPlaceSearching] = useState(false); const [placeSearchError, setPlaceSearchError] = useState(null); + const [selectedMapPinId, setSelectedMapPinId] = useState(null); const searchRequestIdRef = useRef(0); const mapViewerRef = useRef(null); @@ -188,9 +190,12 @@ const MapPage: React.FC = () => { zoom={zoom} placeResults={placeResults} selectedPlaceId={selectedPlaceId} + mapPins={MOCK_MAP_PINS} + selectedMapPinId={selectedMapPinId} onZoomChanged={handleZoomChange} onCenterChanged={setMapCenter} onSelectPlace={setSelectedPlaceId} + onSelectMapPin={setSelectedMapPinId} /> ); From 805788fc1eeeab82ce192020167348f1b0706c99 Mon Sep 17 00:00:00 2001 From: Lee SeungJoon Date: Wed, 22 Jul 2026 19:08:16 +0900 Subject: [PATCH 2/4] =?UTF-8?q?fix:=20=EC=A7=80=EB=8F=84=20=ED=95=80=20?= =?UTF-8?q?=EC=98=A4=EB=B2=84=EB=A0=88=EC=9D=B4=20=EC=96=B8=EB=A7=88?= =?UTF-8?q?=EC=9A=B4=ED=8A=B8=20=EC=8B=9C=20cleanup=20=EB=88=84=EB=9D=BD?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit useEffect가 cleanup 함수를 반환하지 않아 컴포넌트 언마운트 시 마지막 오버레이 세트가 정리되지 않고 남는 문제 수정. dispose 로직을 effect 본문 앞이 아닌 cleanup 함수로 옮겨 재실행/언마운트 양쪽 모두 처리되도록 함. CodeRabbit 리뷰 반영 --- src/features/map/components/MapViewer.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/features/map/components/MapViewer.tsx b/src/features/map/components/MapViewer.tsx index 84347c66..b82988d4 100644 --- a/src/features/map/components/MapViewer.tsx +++ b/src/features/map/components/MapViewer.tsx @@ -507,8 +507,6 @@ export const MapViewer = forwardRef(function Ma const map = mapInstanceRef.current; if (!isLoaded || !map) return; - mapPinOverlaysRef.current.forEach(({ entry }) => disposeMapPinOverlay(entry)); - const selectedId = selectedMapPinIdRef.current; mapPinOverlaysRef.current = mapPins.map((pin) => { @@ -522,6 +520,11 @@ export const MapViewer = forwardRef(function Ma return { id: pin.id, entry }; }); + + return () => { + mapPinOverlaysRef.current.forEach(({ entry }) => disposeMapPinOverlay(entry)); + mapPinOverlaysRef.current = []; + }; }, [isLoaded, mapPins]); // --- 선택된 지도 핀 강조 --- From 9296fce673e640746c76d2b0e706650e685d3b73 Mon Sep 17 00:00:00 2001 From: Lee SeungJoon Date: Fri, 24 Jul 2026 16:42:41 +0900 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20develop=20=EB=A8=B8=EC=A7=80=20?= =?UTF-8?q?=ED=9B=84=20=ED=83=80=EC=9E=85=20=EB=B6=88=EC=9D=BC=EC=B9=98/da?= =?UTF-8?q?ngling=20=EC=B0=B8=EC=A1=B0=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/map/components/MapViewer.tsx | 13 ++----------- src/pages/MapPage.tsx | 15 ++++++--------- 2 files changed, 8 insertions(+), 20 deletions(-) diff --git a/src/features/map/components/MapViewer.tsx b/src/features/map/components/MapViewer.tsx index 1047023a..9483b8a4 100644 --- a/src/features/map/components/MapViewer.tsx +++ b/src/features/map/components/MapViewer.tsx @@ -1,12 +1,5 @@ import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react'; -import { - KakaoLocalPlace, - MapCoordinate, - MapPlace, - MapPin, - DEFAULT_CENTER, - DEFAULT_MARKER_COLOR, -} from '../types'; +import { MapCoordinate, MapPlace, MapPin, DEFAULT_CENTER, DEFAULT_MARKER_COLOR } from '../types'; import { createMapPinOverlay, disposeMapPinOverlay, @@ -202,9 +195,7 @@ export const MapViewer = forwardRef(function Ma const markerRef = useRef(null); const headingMarkerRef = useRef(null); - const placeMarkersRef = useRef< - { id: string; place: KakaoLocalPlace; marker: google.maps.Marker }[] - >([]); + const placeMarkersRef = useRef<{ id: string; place: MapPlace; marker: google.maps.Marker }[]>([]); const mapPinOverlaysRef = useRef<{ id: string; entry: MapPinOverlayEntry }[]>([]); const infoWindowRef = useRef(null); const onCenterChangedRef = useRef(onCenterChanged); diff --git a/src/pages/MapPage.tsx b/src/pages/MapPage.tsx index e7f3ddca..2a77e0f2 100644 --- a/src/pages/MapPage.tsx +++ b/src/pages/MapPage.tsx @@ -28,13 +28,12 @@ const MapPage: React.FC = ({ selectedMapPlace }) => { const [mapLoadError, setMapLoadError] = useState( hasApiKey ? null : '지도를 불러올 수 없어요. 잠시 후 다시 시도해주세요.', ); -const placeResults = useMemo( - () => (selectedMapPlace ? [selectedMapPlace] : []), - [selectedMapPlace], -); -const selectedPlaceId = selectedMapPlace?.id ?? null; -const [selectedMapPinId, setSelectedMapPinId] = useState(null); -const searchRequestIdRef = useRef(0); + const placeResults = useMemo( + () => (selectedMapPlace ? [selectedMapPlace] : []), + [selectedMapPlace], + ); + const selectedPlaceId = selectedMapPlace?.id ?? null; + const [selectedMapPinId, setSelectedMapPinId] = useState(null); const mapViewerRef = useRef(null); // --- 구글맵 스크립트 로드 (setState는 전부 프로미스 콜백 안에서만 일어나 effect에서 안전하게 호출 가능) --- @@ -138,8 +137,6 @@ const searchRequestIdRef = useRef(0); mapPins={MOCK_MAP_PINS} selectedMapPinId={selectedMapPinId} onZoomChanged={handleZoomChange} - onCenterChanged={setMapCenter} - onSelectPlace={setSelectedPlaceId} onSelectMapPin={setSelectedMapPinId} /> From 367afc219afaf171403cdf7bfec10011a46c21ea Mon Sep 17 00:00:00 2001 From: Lee SeungJoon Date: Fri, 24 Jul 2026 16:47:25 +0900 Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=EA=B5=AC=EA=B8=80=EB=A7=B5=20gestu?= =?UTF-8?q?reHandling=20greedy=20=EC=98=B5=EC=85=98=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/map/components/MapViewer.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/features/map/components/MapViewer.tsx b/src/features/map/components/MapViewer.tsx index 9483b8a4..c58bf24e 100644 --- a/src/features/map/components/MapViewer.tsx +++ b/src/features/map/components/MapViewer.tsx @@ -306,6 +306,7 @@ export const MapViewer = forwardRef(function Ma strictBounds: true, }, disableDefaultUI: true, + gestureHandling: 'greedy', styles: FIXED_MAP_STYLES, // Map ID가 없어야 이 스타일이 정상 작동함 }); mapInstanceRef.current = map;