feat: 지도 좌표 최적화

JoStar33 · Jul 1, 2024 · f6500d2 · f6500d2
1 parent b437844
commit f6500d2
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 25 deletions.
diff --git a/src/components/common/BottomSheet.tsx b/src/components/common/BottomSheet.tsx
@@ -8,19 +8,18 @@ interface IBottomSheet {
   handleCloseBottomSheet: () => void;
 }
 
+const variants = {
+  hideBottomSheet: {
+    height: '0px',
+  },
+  animateBottomSheet: {
+    height: '33%',
+  },
+};
+
 export default function BottomSheet({ title, handleCloseBottomSheet, children }: IBottomSheet) {
   return (
-    <S.BottomSheet
-      exit={{
-        height: '0px',
-      }}
-      initial={{
-        height: '0px',
-      }}
-      animate={{
-        height: '400px',
-      }}
-    >
+    <S.BottomSheet variants={variants} exit="hideBottomSheet" initial="hideBottomSheet" animate="animateBottomSheet">
       <div className="bottom-sheet__header">
         <div className="bottom-sheet__header__mock" />
         <p className="bottom-sheet__header__title">{title}</p>

diff --git a/src/containers/home/index.tsx b/src/containers/home/index.tsx
@@ -38,7 +38,7 @@ export default function HomeContainer() {
     queryKey: [queryKeys.coordinateList],
     requestAPI: Coordinate.Get.list,
     options: {
-      enabled: !!mapElement.current,
+      enabled: !!naverMapRef.current,
       staleTime: TEN_MINUTES,
     },
   };
@@ -51,15 +51,15 @@ export default function HomeContainer() {
     return { lat, lng };
   };
 
-  const handleZoomChangedMap = () => {
-    if (mapElement.current !== null) {
-      checkForMarkersRendering(mapElement.current as unknown as naver.maps.Map, marketMarkers);
+  const handleZoomChangedMap = (zoom: number) => {
+    if (naverMapRef.current !== null) {
+      checkForMarkersRendering(zoom, naverMapRef.current, marketMarkers);
     }
   };
 
   const handleDragEndMap = () => {
-    if (mapElement.current !== null) {
-      checkForMarkersRendering(mapElement.current as unknown as naver.maps.Map, marketMarkers);
+    if (naverMapRef.current !== null) {
+      checkForMarkersRendering(naverMapRef.current.getZoom(), naverMapRef.current, marketMarkers);
     }
   };
 
@@ -79,6 +79,7 @@ export default function HomeContainer() {
       isShow: true,
       coordinateId: element.id,
     });
+    naverMapRef.current?.setZoom(16, true);
     setTimeout(() => {
       marker.setAnimation(null);
     }, 2000);
@@ -93,6 +94,7 @@ export default function HomeContainer() {
 
       if (isDeniedPermission) return;
 
+      // Set My Place
       new naver.maps.Marker({
         position: location,
         map: naverMapRef.current,
@@ -131,12 +133,14 @@ export default function HomeContainer() {
 
   React.useEffect(
     function initializeVirtualizeMarkerEvent() {
-      if (!mapElement.current || !naver) return;
+      if (!naverMapRef.current || !naver) return;
       if (marketMarkers.length === 0) return;
-      const zoomchangeEvent = naver.maps.Event.addListener(mapElement.current, 'zoom_changed', handleZoomChangedMap);
-      const dragEndEvent = naver.maps.Event.addListener(mapElement.current, 'dragend', handleDragEndMap);
+      const zoomChangeEvent = naver.maps.Event.addListener(naverMapRef.current, 'zoom_changed', (zoom: number) =>
+        handleZoomChangedMap(zoom),
+      );
+      const dragEndEvent = naver.maps.Event.addListener(naverMapRef.current, 'dragend', handleDragEndMap);
 
-      return () => naver.maps.Event.removeListener([zoomchangeEvent, dragEndEvent]);
+      return () => naver.maps.Event.removeListener([zoomChangeEvent, dragEndEvent]);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [marketMarkers],

diff --git a/src/utils/checkForMarkersRendering.ts b/src/utils/checkForMarkersRendering.ts
@@ -1,3 +1,8 @@
+import { ICoordinate } from '@/types/coordinate';
+
+// const OPTIMIZE_COORD_RANGE = 5;
+const OPTIMIZE_MAX_COUNT = 20;
+
 const showMarker = (map: naver.maps.Map, marker: naver.maps.Marker) => {
   marker.setMap(map);
 };
@@ -6,13 +11,42 @@ const hideMarker = (marker: naver.maps.Marker) => {
   marker.setMap(null);
 };
 
-const checkForMarkersRendering = (map: naver.maps.Map, markers: naver.maps.Marker[]) => {
+// 1기준
+const zoomOptimizeMarkerShow = (optimizeDatumCoord: ICoordinate, map: naver.maps.Map, markers: naver.maps.Marker[]) => {
+  let coordTrigger = false;
+  for (let latCoord = 0; latCoord < OPTIMIZE_MAX_COUNT; latCoord++) {
+    for (let lngCoord = 0; lngCoord < OPTIMIZE_MAX_COUNT; lngCoord++) {
+      markers.map((marker) => {
+        const markerLat = marker.getPosition().y;
+        const markerLng = marker.getPosition().x;
+        if (
+          optimizeDatumCoord.lat + latCoord > markerLat &&
+          optimizeDatumCoord.lat + latCoord - 1 < markerLat &&
+          optimizeDatumCoord.lng + lngCoord > markerLng &&
+          optimizeDatumCoord.lng + lngCoord - 1 < markerLng &&
+          !coordTrigger
+        ) {
+          showMarker(map, marker);
+          coordTrigger = true;
+          return {
+            ...marker,
+            isTriggeOver: true,
+          };
+        }
+        return marker;
+      });
+      coordTrigger = true;
+    }
+  }
+};
+
+const checkForMarkersRendering = (zoom: number, map: naver.maps.Map, markers: naver.maps.Marker[]) => {
   const mapBounds = map.getBounds();
+  if (zoom <= 12) return zoomOptimizeMarkerShow({ lat: 34.566, lng: 123.984 }, map, markers);
   markers.forEach((marker) => {
     const position = marker.getPosition();
-
-    if (mapBounds.hasPoint(position)) return showMarker(map, marker);
-    hideMarker(marker);
+    if (!mapBounds.hasPoint(position)) return hideMarker(marker);
+    showMarker(map, marker);
   });
 };