Merge pull request #80 from Findy-org/refactor/#78-mapevent

[REFACTOR] naver.map.Event 적용
Findy-org · Nov 28, 2024 · 0613a32 · 0613a32
2 parents 6a033cf + f8f1801
commit 0613a32
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 28 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/pages/MapView.tsx b/src/pages/MapView.tsx
@@ -6,6 +6,7 @@ import { SearchInput } from '@/components/common/SearchInput';
 import { SideMenu } from '@/components/common/SideMenu';
 import { BottomSheetContent } from '@/components/features/BottomSheetContent/BottomSheetContent';
 import { NaverMap } from '@/components/features/NaverMap';
+import { BottomSheetType } from '@/contexts/MapAtom';
 import { ExtractResponse } from '@/hooks/api/link/useYoutubePlace';
 import { useNaverSearchResult } from '@/hooks/api/search/useNaverSearchResult';
 import { useAuth } from '@/hooks/auth/useAuth';
@@ -19,43 +20,40 @@ import { Place } from '@/types/naver';
 export const MapView = () => {
   const { token } = useAuth();
   const navigate = useNavigate();
+  const location = useLocation();
 
-  const [isInputDisabled, setIsInputDisabled] = useState(false);
   const { state, setState } = useMapData<Place[] | ExtractResponse>();
   const { addMarker, clearMarkers } = useMarkers();
-  const { state: searchValue, onChange, onClickReset } = useInput();
-  const { refetch } = useNaverSearchResult(searchValue);
   const { initialCenter, zoomLevel, isCurrent, updateLocation, resetCurrentLocation } =
     useMapState();
+  const { state: searchValue, onChange, onClickReset } = useInput();
+  const { refetch } = useNaverSearchResult(searchValue);
   useSessionDataLoader(token);
 
-  const location = useLocation();
-  const extractedData = location.state?.data;
+  const [isInputDisabled, setIsInputDisabled] = useState(false);
 
-  const handleMarkers = useCallback(
-    (places: Place[]) => {
+  const handleDataUpdate = useCallback(
+    (newData: Place[], type: BottomSheetType) => {
       clearMarkers();
-      places?.forEach(addMarker);
+      newData?.forEach(addMarker);
+      setState({ data: newData, type }, token);
     },
-    [clearMarkers, addMarker]
+    [clearMarkers, addMarker, setState, token]
   );
 
   useEffect(() => {
+    const extractedData = location.state?.data;
     if (extractedData?.places.length) {
-      handleMarkers(extractedData.places);
-      setState({ data: extractedData, type: 'extract' }, token);
+      handleDataUpdate(extractedData.places, 'extract');
     }
-  }, [extractedData, handleMarkers, location.state, setState, token]);
+  }, [handleDataUpdate, location.state, setState, token]);
 
   const handleSearch = async () => {
     setIsInputDisabled(true);
     resetCurrentLocation();
     const result = await refetch();
-    const newData = result?.data?.items;
-
-    if (newData) {
-      setState({ data: newData, type: 'search' }, token);
-      handleMarkers(newData);
+    if (result?.data?.items) {
+      handleDataUpdate(result.data.items, 'search');
     }
   };
 
@@ -73,11 +71,12 @@ export const MapView = () => {
 
   const handleCurrentLocation = useCallback(() => {
     clearMarkers();
+    setState({ data: null, type: null }, token);
     navigator.geolocation.getCurrentPosition((position) => {
       const { latitude, longitude } = position.coords;
       updateLocation(latitude, longitude, 18);
     });
-  }, [clearMarkers, updateLocation]);
+  }, [clearMarkers, setState, token, updateLocation]);
 
   return (
     <>
@@ -98,7 +97,10 @@ export const MapView = () => {
             <SideMenu
               position="right"
               variant="emptyBookMark"
-              onClick={() => setState({ data: state.data, type: 'list' }, token)}
+              onClick={() => {
+                resetCurrentLocation();
+                setState({ data: state.data, type: 'list' }, token);
+              }}
             />
           </SideMenu.Group>
         </div>

diff --git a/src/utils/naver/addMarkerToMap.ts b/src/utils/naver/addMarkerToMap.ts
@@ -8,11 +8,9 @@ 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 }>>,
-  clearExistingMarkers: () => void
+  markerDataRef: React.MutableRefObject<Array<{ title: string; category: string }>>
 ) => {
   if (mapInstance.current) {
-    clearExistingMarkers();
     const firstMarker = markers[0];
     const initialPosition = new window.naver.maps.LatLng(
       Number(firstMarker.mapy) / 1e7,
@@ -51,6 +49,11 @@ export const addMarkerToMap = (
       bounds.extend(position);
     });
 
-    mapInstance.current.fitBounds(bounds, { left: 10, right: 10, top: 10, bottom: 10 });
+    naver.maps.Event.once(mapInstance.current, 'idle', () => {
+      mapInstance.current?.fitBounds(bounds, { top: 20, right: 20, bottom: 20, left: 20 });
+    });
+
+    const center = bounds.getCenter();
+    mapInstance.current?.panTo(center, { duration: 500, easing: 'easeOutCubic' });
   }
 };
diff --git a/src/utils/naver/currentMarkerToMap.ts b/src/utils/naver/currentMarkerToMap.ts
@@ -20,6 +20,11 @@ export const currentMarkerToMap = (
   });
 
   currentLocationMarkerRef.current = currentMarker;
-  mapInstance.setCenter(new naver.maps.LatLng(position.lat, position.lng));
-  mapInstance.setZoom(18);
+
+  mapInstance.panTo(new naver.maps.LatLng(position.lat, position.lng), {
+    duration: 500,
+  });
+  naver.maps.Event.once(mapInstance, 'idle', () => {
+    mapInstance.setZoom(18);
+  });
 };