feat: markers 상태 제거 및 커스텀 알고리즘 사용 #222

boostcampwm-2024 · Dec 3, 2024 · 7714a54 · 7714a54
1 parent ee9e5e3
commit 7714a54
Showing 1 changed file with 9 additions and 7 deletions.
diff --git a/frontend/src/store/googleMapSlice/index.ts b/frontend/src/store/googleMapSlice/index.ts
@@ -10,15 +10,17 @@ import {
   clustererOptions,
   CustomMarkerClusterer,
 } from '@/lib/CustomMarkerClusterer';
+import { CustomSuperClusterAlgorithm } from '@/lib/CustomSuperCluseterAlgorithm';
 
 export type GoogleMapState = {
   googleMap: google.maps.Map | null;
   markerClusterer: MarkerClusterer | null;
-  markers: google.maps.marker.AdvancedMarkerElement[];
+
   setGoogleMap: (map: google.maps.Map) => void;
   initializeMap: (container: HTMLElement) => void;
   moveTo: (lat: number, lng: number) => void;
   addMarker: (marker: google.maps.marker.AdvancedMarkerElement) => void;
+
   removeMarker: (marker: google.maps.marker.AdvancedMarkerElement) => void;
 };
 
@@ -30,16 +32,18 @@ export const createGoogleMapSlice: StateCreator<
 > = (set, get) => ({
   googleMap: null,
   markerClusterer: null,
-  markers: [],
   setGoogleMap: (map: google.maps.Map) => set({ googleMap: map }),
 
   initializeMap: async (container: HTMLElement) => {
     await loadGoogleMapsApi();
     const GoogleMap = getGoogleMapClass();
     const map = new GoogleMap(container, INITIAL_MAP_CONFIG);
+
+    const { algorithm, ...restClustererOptions } = clustererOptions;
     const markerClusterer = new CustomMarkerClusterer({
       map,
-      ...clustererOptions,
+      algorithm: new CustomSuperClusterAlgorithm({ maxZoom: 18 }),
+      ...restClustererOptions,
     });
 
     set({ googleMap: map, markerClusterer });
@@ -54,14 +58,12 @@ export const createGoogleMapSlice: StateCreator<
   },
 
   addMarker: (marker: google.maps.marker.AdvancedMarkerElement) => {
-    const { markerClusterer, markers } = get();
+    const { markerClusterer } = get();
     markerClusterer?.addMarker(marker);
-    set({ markers: [...markers, marker] });
   },
 
   removeMarker: (marker: google.maps.marker.AdvancedMarkerElement) => {
-    const { markerClusterer, markers } = get();
+    const { markerClusterer } = get();
     markerClusterer?.removeMarker(marker);
-    set({ markers: markers.filter((m) => m !== marker) });
   },
 });