fix: add useEffect to ensure clearMarkers executes on each render

Findy-org · Nov 27, 2024 · f8f1801 · f8f1801
1 parent 1e6c9c6
commit f8f1801
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 6 deletions.
diff --git a/src/components/features/NaverMap/index.tsx b/src/components/features/NaverMap/index.tsx
@@ -58,13 +58,13 @@ export const NaverMap = memo(
     }, [initialZoom, handleZoomChange, initialCenter.lat, initialCenter.lng]);
 
     useEffect(() => {
+      clearMarkers();
       if (mapInstance.current && markers.length > 0) {
-        addMarkerToMap(mapInstance, markers, markersRef, markerDataRef, clearMarkers);
+        addMarkerToMap(mapInstance, markers, markersRef, markerDataRef);
       }
-      if (mapInstance.current && isCurrent) {
+      if (mapInstance.current && isCurrent && markers.length === 0) {
         currentMarkerToMap(initialCenter, mapInstance.current, currentLocationMarkerRef);
       }
-      return () => clearMarkers();
     }, [clearMarkers, initialCenter, isCurrent, markers]);
 
     return <div id="map" ref={mapRef} style={{ width: '100%', height: '100dvh' }} />;

diff --git a/src/utils/naver/addMarkerToMap.ts b/src/utils/naver/addMarkerToMap.ts
@@ -8,10 +8,8 @@ export const addMarkerToMap = (
   mapInstance: React.MutableRefObject<naver.maps.Map | null>,
   markers: Place[],
   markersRef: React.MutableRefObject<naver.maps.Marker[]>,
-  markerDataRef: React.MutableRefObject<Array<{ title: string; category: string }>>,
-  clearMarkers: () => void
+  markerDataRef: React.MutableRefObject<Array<{ title: string; category: string }>>
 ) => {
-  clearMarkers();
   if (mapInstance.current) {
     const firstMarker = markers[0];
     const initialPosition = new window.naver.maps.LatLng(