update: 좌표최적화 로직구현

JoStar33 · Aug 13, 2024 · 620713f · 620713f
1 parent b5e945b
commit 620713f
Show file tree

Hide file tree

Showing 7 changed files with 874 additions and 103 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+src/libs
diff --git a/.prettierignore b/.prettierignore
@@ -1 +1,2 @@
-src/api/index.ts
+src/api/index.ts
+src/libs
diff --git a/src/containers/home/index.tsx b/src/containers/home/index.tsx
@@ -11,6 +11,7 @@ import checkForMarkersRendering from '@/utils/checkForMarkersRendering';
 import React from 'react';
 import BottomSheetContainer from './BottomSheetContainer';
 import { AnimatePresence } from 'framer-motion';
+import { makeMarkerClustering } from '@/libs/makeMarkerClustering.js';
 
 const TEN_MINUTES = 10 * 60 * 1000;
 
@@ -23,7 +24,9 @@ export default function HomeContainer() {
   const { naver } = window;
   const mapElement = React.useRef<HTMLDivElement>(null);
   const naverMapRef = React.useRef<naver.maps.Map | null>(null);
-  const initSuccessChecker = React.useRef(false);
+  const userMarkerRef = React.useRef<naver.maps.Marker | null>(null);
+  const currentEventListRef = React.useRef<naver.maps.MapEventListener[]>([]);
+  const initSuccessCheckerRef = React.useRef(false);
   const [marketMarkers, setMarketMarkers] = React.useState<naver.maps.Marker[]>([]);
   const [bottomSheetState, setBottomSheetState] = React.useState<IBottomSheetState>({
     isShow: false,
@@ -50,22 +53,21 @@ export default function HomeContainer() {
     return { lat, lng };
   };
 
-  const handleZoomChangedMap = (zoom: number) => {
+  const handleZoomChangedMap = () => {
     if (naverMapRef.current !== null) {
-      checkForMarkersRendering(zoom, naverMapRef.current, marketMarkers);
+      checkForMarkersRendering(naverMapRef.current, marketMarkers);
     }
   };
 
   const handleDragEndMap = () => {
     if (naverMapRef.current !== null) {
-      checkForMarkersRendering(naverMapRef.current.getZoom(), naverMapRef.current, marketMarkers);
+      checkForMarkersRendering(naverMapRef.current, marketMarkers);
     }
   };
 
   const handleMoveUserLocation = (event: React.MouseEvent) => {
     event.preventDefault();
-    if (!naverMapRef.current) return;
-    naverMapRef.current.setCenter({
+    naverMapRef.current?.setCenter({
       lat: permissionExistenceCoordinate().lat,
       lng: permissionExistenceCoordinate().lng,
     });
@@ -87,19 +89,22 @@ export default function HomeContainer() {
   React.useEffect(
     function initializeMap() {
       if (!mapElement.current || !naver || isErrorLoadLocation) return;
-      if (initSuccessChecker.current) return;
+      if (initSuccessCheckerRef.current) return;
       const location = new naver.maps.LatLng(permissionExistenceCoordinate().lat, permissionExistenceCoordinate().lng);
       naverMapRef.current = new naver.maps.Map(mapElement.current, mapOptions(location));
 
       if (isDeniedPermission) return;
-
-      // Set My Place
-      new naver.maps.Marker({
+      // 내 좌표설정
+      userMarkerRef.current = new naver.maps.Marker({
         position: location,
         map: naverMapRef.current,
       });
 
-      initSuccessChecker.current = true;
+      initSuccessCheckerRef.current = true;
+      return () => {
+        if (!userMarkerRef.current) return;
+        userMarkerRef.current.setMap(null);
+      };
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [userLocation],
@@ -109,7 +114,8 @@ export default function HomeContainer() {
     function initializeMarker() {
       if (!mapElement.current || !naver || isErrorLoadLocation || !data || !naverMapRef.current) return;
       if (marketMarkers.length !== 0) return;
-      const computedMarkers = data.value.map((element) => {
+      // 마커 렌더링
+      const computedMarkers = data.value.map((element, index) => {
         const marker = new naver.maps.Marker({
           position: element.coordinate,
           title: element.title,
@@ -118,25 +124,62 @@ export default function HomeContainer() {
             content: MarkerIcon(element.title),
             anchor: new naver.maps.Point(19, 58),
           },
+          zIndex: 1,
           map: naverMapRef.current as naver.maps.Map,
         });
         marker.setTitle(element.title);
-        naver.maps.Event.addListener(marker, 'click', () => handleClickCoordinate(element, marker));
+        currentEventListRef.current[index] = naver.maps.Event.addListener(marker, 'click', () => handleClickCoordinate(element, marker));
         return marker;
       });
+
+      const clusterMarker = {
+        content: MarkerIcon(''),
+        size: new naver.maps.Size(40, 40),
+        anchor: new naver.maps.Point(19, 58),
+      };
+
+      // 마커 클러스터링 진행
+      const MarkerClustering = makeMarkerClustering(naver);
+      new MarkerClustering({
+        minClusterSize: 2,
+        maxZoom: 13,
+        map: naverMapRef.current,
+        markers: [...computedMarkers, userMarkerRef.current],
+        disableClickZoom: false,
+        gridSize: 120,
+        icons: [clusterMarker],
+        indexGenerator: [10, 20, 30, 61, 100],
+        // stylingFunction: (clusterMarker: any, count: number) => {
+        //   clusterMarker.getElement().querySelector('div:first-child').innerText = count;
+        // },
+      });
       setMarketMarkers(computedMarkers);
+      return () => {
+        computedMarkers.forEach((marker) => {
+          marker.setMap(null);
+        });
+      };
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [data, naverMapRef.current],
   );
 
+  React.useEffect(function cleanUpMemory() {
+    return () => {
+      naverMapRef.current?.destroy();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      currentEventListRef.current.forEach((element) => {
+        naver.maps.Event.removeListener(element);
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   React.useEffect(
     function initializeVirtualizeMarkerEvent() {
       if (!naverMapRef.current || !naver) return;
       if (marketMarkers.length === 0) return;
-      const zoomChangeEvent = naver.maps.Event.addListener(naverMapRef.current, 'zoom_changed', (zoom: number) =>
-        handleZoomChangedMap(zoom),
-      );
+      const zoomChangeEvent = naver.maps.Event.addListener(naverMapRef.current, 'zoom_changed', () => handleZoomChangedMap());
       const dragEndEvent = naver.maps.Event.addListener(naverMapRef.current, 'dragend', handleDragEndMap);
 
       return () => naver.maps.Event.removeListener([zoomChangeEvent, dragEndEvent]);