From ee9e5e3ff8e41f15f5fdd3c09522459a64d8a261 Mon Sep 17 00:00:00 2001
From: 1119wj <1119wj@naver.com>
Date: Mon, 2 Dec 2024 01:03:31 +0900
Subject: [PATCH 1/8] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4,=20=EC=95=A0=EB=8B=88?=
 =?UTF-8?q?=EB=A9=94=EC=9D=B4=EC=85=98=20=ED=8E=84=EC=8A=A4=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9=20#222?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ImageSkeleton.tsx | 17 +++++++++--------
 frontend/tailwind.config.js               |  5 +++++
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/ImageSkeleton.tsx b/frontend/src/components/ImageSkeleton.tsx
index 50ba208c..52f18f7b 100644
--- a/frontend/src/components/ImageSkeleton.tsx
+++ b/frontend/src/components/ImageSkeleton.tsx
@@ -15,7 +15,6 @@ const ImageWithSkeleton = ({
   height,
 }: ImageWithSkeletonProps) => {
   const [loaded, setLoaded] = useState(false);
-  const [showSkeleton, setShowSkeleton] = useState(true);
   const [error, setError] = useState(false);
 
   useEffect(() => {
@@ -23,15 +22,11 @@ const ImageWithSkeleton = ({
     img.src = src;
 
     img.onload = () => {
-      setShowSkeleton(false);
-      setTimeout(() => {
-        setLoaded(true);
-      }, 3000);
+      setLoaded(true);
     };
 
     img.onerror = () => {
       setError(true);
-      setShowSkeleton(false);
     };
   }, [src]);
 
@@ -49,9 +44,15 @@ const ImageWithSkeleton = ({
 
   return (
     <div className="h-20 w-20 flex-shrink-0">
-      {!loaded && <div className="h-full w-full animate-pulse bg-slate-400" />}
+      {!loaded && (
+        <div className="h-full w-full animate-pulse rounded bg-c_button_gray"></div>
+      )}
       {loaded && (
-        <img className="h-full w-full object-cover" src={src} alt={alt} />
+        <img
+          className="h-full w-full rounded object-cover"
+          src={src}
+          alt={alt}
+        />
       )}
     </div>
   );
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 0631da93..7f3872ce 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -30,6 +30,7 @@ module.exports = {
       animation: {
         slideInUp: 'slideInUp 0.5s ease-out forwards',
         fadeOut: 'fadeOut 0.5s ease-out forwards',
+        pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
       },
     },
     keyframes: {
@@ -41,6 +42,10 @@ module.exports = {
         '0%': { opacity: '1' },
         '100%': { opacity: '0' },
       },
+      pulse: {
+        '0%, 100%': { opacity: 1 },
+        '50%': { opacity: 0.5 },
+      },
     },
   },
   plugins: [require('tailwind-scrollbar')],

From 7714a5459004d1ff877233c4c57a2799f284a666 Mon Sep 17 00:00:00 2001
From: 1119wj <1119wj@naver.com>
Date: Mon, 2 Dec 2024 01:04:00 +0900
Subject: [PATCH 2/8] =?UTF-8?q?feat:=20markers=20=EC=83=81=ED=83=9C=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20=EC=BB=A4=EC=8A=A4=ED=85=80=20?=
 =?UTF-8?q?=EC=95=8C=EA=B3=A0=EB=A6=AC=EC=A6=98=20=EC=82=AC=EC=9A=A9=20#22?=
 =?UTF-8?q?2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/store/googleMapSlice/index.ts | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/frontend/src/store/googleMapSlice/index.ts b/frontend/src/store/googleMapSlice/index.ts
index 03c149ab..42a6f412 100644
--- 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) });
   },
 });

From 9d29b63dadc6c43324f928b7ab07f1b079fc6408 Mon Sep 17 00:00:00 2001
From: 1119wj <1119wj@naver.com>
Date: Mon, 2 Dec 2024 01:04:43 +0900
Subject: [PATCH 3/8] =?UTF-8?q?feat:=20=EC=BB=A4=EC=8A=A4=ED=85=80=20?=
 =?UTF-8?q?=EB=A7=88=EC=BB=A4=20=ED=81=B4=EB=9F=AC=EC=8A=A4=ED=84=B0?=
 =?UTF-8?q?=EB=9F=AC,=20=EC=BB=A4=EC=8A=A4=ED=85=80=20=ED=81=B4=EB=9F=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=84=B0=20=EC=95=8C=EA=B3=A0=EB=A6=AC=EC=A6=98=20#22?=
 =?UTF-8?q?2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lib/CustomMarkerClusterer.ts     | 73 ++++++++++++++++++-
 .../src/lib/CustomSuperCluseterAlgorithm.ts   | 52 +++++++++++++
 2 files changed, 121 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/CustomMarkerClusterer.ts b/frontend/src/lib/CustomMarkerClusterer.ts
index 3aafed48..f49326a0 100644
--- a/frontend/src/lib/CustomMarkerClusterer.ts
+++ b/frontend/src/lib/CustomMarkerClusterer.ts
@@ -1,4 +1,5 @@
 import {
+  ClusterStats,
   Marker,
   MarkerClusterer,
   MarkerClustererEvents,
@@ -17,11 +18,20 @@ export class CustomMarkerClusterer extends MarkerClusterer {
     this.markerLatLngSet = new Set();
   }
 
+  public onAdd(): void {
+    const map = this.getMap();
+    if (!map) return;
+    this.idleListener = map.addListener('idle', () => {
+      this.render();
+    });
+    this.render();
+  }
+
   public addMarker(
     marker: google.maps.marker.AdvancedMarkerElement,
     noDraw?: boolean,
   ): void {
-    const markerLatLng = `${marker.position?.lat}${marker.position?.lng}`;
+    const markerLatLng = `${marker.position?.lat} ${marker.position?.lng}`;
     if (this.markerLatLngSet.has(markerLatLng)) {
       return;
     }
@@ -34,6 +44,29 @@ export class CustomMarkerClusterer extends MarkerClusterer {
     }
   }
 
+  public removeMarker(
+    marker: google.maps.marker.AdvancedMarkerElement,
+    noDraw?: boolean,
+  ): boolean {
+    const index = this.markers.indexOf(marker);
+    if (index === -1) {
+      // Marker is not in our list of markers, so do nothing:
+      return false;
+    }
+
+    const markerLatLng = `${marker.position?.lat} ${marker.position?.lng}`;
+    this.markerLatLngSet.delete(markerLatLng);
+
+    MarkerUtils.setMap(marker, null);
+    this.markers.splice(index, 1); // Remove the marker from the list of managed markers
+
+    if (!noDraw) {
+      this.render();
+    }
+
+    return true;
+  }
+
   public render(): void {
     const map = this.getMap();
     if (map instanceof google.maps.Map && map.getProjection()) {
@@ -47,7 +80,7 @@ export class CustomMarkerClusterer extends MarkerClusterer {
         map,
         mapCanvasProjection: this.getProjection(),
       });
-
+      console.log(changed, 'changed');
       // Allow algorithms to return flag on whether the clusters/markers have changed.
       if (changed || changed === undefined) {
         // Accumulate the markers of the clusters composed of a single marker.
@@ -71,7 +104,6 @@ export class CustomMarkerClusterer extends MarkerClusterer {
               // The marker:
               // - was previously rendered because it is from a cluster with 1 marker,
               // - should no more be rendered as it is not in singleMarker.
-              console.log('cluster.marker removed', cluster.marker);
               MarkerUtils.setMap(cluster.marker!, null);
             }
           } else {
@@ -83,7 +115,7 @@ export class CustomMarkerClusterer extends MarkerClusterer {
         this.clusters = clusters;
         this.renderClusters();
         // Delayed removal of the markers of the former groups.
-        console.log('groupMarkers', groupMarkers);
+
         setTimeout(() => {
           groupMarkers.forEach((marker) => {
             MarkerUtils.setMap(marker, null);
@@ -97,6 +129,39 @@ export class CustomMarkerClusterer extends MarkerClusterer {
       );
     }
   }
+
+  protected renderClusters(): void {
+    // Generate stats to pass to renderers.
+    const stats = new ClusterStats(this.markers, this.clusters);
+
+    const map = this.getMap() as google.maps.Map;
+
+    this.clusters.forEach((cluster) => {
+      if (cluster.markers?.length === 1) {
+        cluster.marker = cluster.markers[0];
+      } else {
+        // Generate the marker to represent the group.
+        cluster.marker = this.renderer.render(cluster, stats, map);
+        // Make sure all individual markers are removed from the map.
+        cluster.markers?.forEach((marker) => MarkerUtils.setMap(marker, null));
+        if (this.onClusterClick) {
+          cluster.marker.addListener(
+            'click',
+            /* istanbul ignore next */
+            (event: google.maps.MapMouseEvent) => {
+              google.maps.event.trigger(
+                this,
+                MarkerClustererEvents.CLUSTER_CLICK,
+                cluster,
+              );
+              this.onClusterClick(event, cluster, map);
+            },
+          );
+        }
+      }
+      MarkerUtils.setMap(cluster.marker, map);
+    });
+  }
 }
 
 export const clustererOptions = {
diff --git a/frontend/src/lib/CustomSuperCluseterAlgorithm.ts b/frontend/src/lib/CustomSuperCluseterAlgorithm.ts
index 1232ade2..31413de3 100644
--- a/frontend/src/lib/CustomSuperCluseterAlgorithm.ts
+++ b/frontend/src/lib/CustomSuperCluseterAlgorithm.ts
@@ -1,10 +1,62 @@
 import {
+  AlgorithmInput,
+  AlgorithmOutput,
+  getPaddedViewport,
+  MarkerUtils,
   SuperClusterViewportAlgorithm,
   SuperClusterViewportOptions,
+  SuperClusterViewportState,
 } from '@googlemaps/markerclusterer';
+import equal from 'fast-deep-equal';
 
 export class CustomSuperClusterAlgorithm extends SuperClusterViewportAlgorithm {
   constructor({ ...options }: SuperClusterViewportOptions) {
     super(options);
+    this.clusters = [];
+  }
+
+  public calculate(input: AlgorithmInput): AlgorithmOutput {
+    const state: SuperClusterViewportState = {
+      zoom: Math.round(input.map.getZoom()!),
+      view: getPaddedViewport(
+        input.map.getBounds()!,
+        input.mapCanvasProjection,
+        this.viewportPadding,
+      ),
+    };
+
+    let changed = !equal(this.state, state);
+    if (!equal(input.markers, this.markers)) {
+      // TODO use proxy to avoid copy?
+      this.markers = [...input.markers];
+
+      const points = this.markers.map((marker) => {
+        const position = MarkerUtils.getPosition(marker);
+        const coordinates = [position.lng(), position.lat()];
+        return {
+          type: 'Feature' as const,
+          geometry: {
+            type: 'Point' as const,
+            coordinates,
+          },
+          properties: { marker },
+        };
+      });
+      this.superCluster.load(points);
+    }
+
+    const newClusters = this.cluster(input);
+    console.log(newClusters.length, this.clusters.length);
+    //this.clusters.length !== newClusters.length
+    //!equal(this.clusters, newClusters)
+    if (this.clusters.length !== newClusters.length) {
+      this.clusters = newClusters;
+    } else {
+      changed = false;
+    }
+
+    this.state = state;
+
+    return { clusters: this.clusters, changed };
   }
 }

From 1b3c74e610f9dd5fc97de691c218208c11ad58c5 Mon Sep 17 00:00:00 2001
From: 1119wj <1119wj@naver.com>
Date: Mon, 2 Dec 2024 01:05:01 +0900
Subject: [PATCH 4/8] =?UTF-8?q?fix:=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?=
 =?UTF-8?q?=ED=95=B4=EC=A0=9C=20=ED=81=B4=EB=A6=AC=EC=96=B4=20=ED=95=A8?=
 =?UTF-8?q?=EC=88=98=20=EC=88=98=EC=A0=95=20#222?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/useMarker.ts | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/frontend/src/hooks/useMarker.ts b/frontend/src/hooks/useMarker.ts
index 95bb8ff5..3ab39b88 100644
--- a/frontend/src/hooks/useMarker.ts
+++ b/frontend/src/hooks/useMarker.ts
@@ -61,11 +61,10 @@ export const useMarker = (props: MarkerProps) => {
     newMarker.map = map;
     setMarker(newMarker);
     addMarker(newMarker);
-    console.log(newMarker, 'add new marker');
 
     return () => {
-      newMarker.map = null;
       setMarker(null);
+      google.maps.event.clearInstanceListeners(newMarker);
       removeMarker(newMarker);
     };
   }, [map, order]);
@@ -90,14 +89,10 @@ export const useMarker = (props: MarkerProps) => {
       infoWindow.open({ anchor: marker, map });
       moveTo(position?.lat as number, position?.lng as number);
     });
+
     google.maps.event.addListener(map, 'click', () => {
       infoWindow.close();
     });
-
-    return () => {
-      google.maps.event.clearInstanceListeners(marker);
-      google.maps.event.clearInstanceListeners(map);
-    };
   }, [marker, onClick]);
   return marker;
 };

From cce7783e32ada68b095f82d72e2878a904f22c51 Mon Sep 17 00:00:00 2001
From: 1119wj <1119wj@naver.com>
Date: Mon, 2 Dec 2024 01:05:10 +0900
Subject: [PATCH 5/8] =?UTF-8?q?fix:=20key=20=EB=B3=80=EA=B2=BD=20#222?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Place/PlaceListPanel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Place/PlaceListPanel.tsx b/frontend/src/components/Place/PlaceListPanel.tsx
index d300aa2c..8dc3f620 100644
--- a/frontend/src/components/Place/PlaceListPanel.tsx
+++ b/frontend/src/components/Place/PlaceListPanel.tsx
@@ -84,8 +84,8 @@ const PlaceListPanel = ({
               {places.map((place, index) => (
                 <Draggable
                   isDragDisabled={!isDraggable}
-                  key={place.google_place_id.toString()}
-                  draggableId={place.id.toString()}
+                  key={place.id?.toString()}
+                  draggableId={place.id?.toString()}
                   index={index}
                 >
                   {(provided, snapshot) => (

From a3d93f24f86afe933d86fef4badf84a370a54646 Mon Sep 17 00:00:00 2001
From: 1119wj <1119wj@naver.com>
Date: Mon, 2 Dec 2024 01:05:25 +0900
Subject: [PATCH 6/8] =?UTF-8?q?fix:=20=EC=82=AD=EC=A0=9C=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=ED=81=B4=EB=A6=AD=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=A0=84=ED=8C=8C=20=EB=B0=A9=EC=A7=80=20#222?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Place/DeletePlaceButton.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Place/DeletePlaceButton.tsx b/frontend/src/components/Place/DeletePlaceButton.tsx
index 5c2a51fa..0a59ecc2 100644
--- a/frontend/src/components/Place/DeletePlaceButton.tsx
+++ b/frontend/src/components/Place/DeletePlaceButton.tsx
@@ -18,7 +18,8 @@ const DeletePlaceButton = ({ placeId, places }: DeletePlaceButtonProps) => {
   const putPlaceToCourseMutation = usePutPlaceToCourseMutation();
   const addToast = useStore((state) => state.addToast);
 
-  const onClickMapMode = () => {
+  const onClickMapMode = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
     deletePlaceMutation.mutate(
       { id, placeId },
       {
@@ -39,7 +40,8 @@ const DeletePlaceButton = ({ placeId, places }: DeletePlaceButtonProps) => {
     [places],
   );
 
-  const onClickCourseMode = () => {
+  const onClickCourseMode = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
     putPlaceToCourseMutation.mutate(
       { id, places: newPlaces },
       {

From 0ee494e0cbafb19fb1acc5b43d4e25c1e04e52c9 Mon Sep 17 00:00:00 2001
From: 1119wj <1119wj@naver.com>
Date: Tue, 3 Dec 2024 11:01:49 +0900
Subject: [PATCH 7/8] =?UTF-8?q?feat:=20=ED=81=B4=EB=9F=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=84=B0=20=EC=95=8C=EA=B3=A0=EB=A6=AC=EC=A6=98=20=ED=85=8C?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/place/index.ts               |  2 +-
 frontend/src/constants/api.ts                 |  2 +
 frontend/src/lib/CustomMarkerClusterer.ts     |  2 +-
 .../src/lib/CustomSuperCluseterAlgorithm.ts   |  4 +-
 frontend/src/lib/SuperClusterAlgorithm.ts     | 57 +++++++++++++++++++
 frontend/src/store/googleMapSlice/index.ts    |  6 +-
 6 files changed, 69 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/lib/SuperClusterAlgorithm.ts

diff --git a/frontend/src/api/place/index.ts b/frontend/src/api/place/index.ts
index cdddf061..a90fe9f5 100644
--- a/frontend/src/api/place/index.ts
+++ b/frontend/src/api/place/index.ts
@@ -54,7 +54,7 @@ export const putPlaceToCourse = async ({
 }) => {
   const { data } = await axiosInstance.put<CoursePlace[]>(
     END_POINTS.PUT_PLACE_TO_COURSE(id),
-    { places },
+    { pins: places },
   );
   return { ...data, id };
 };
diff --git a/frontend/src/constants/api.ts b/frontend/src/constants/api.ts
index a1ae6a8b..8b073540 100644
--- a/frontend/src/constants/api.ts
+++ b/frontend/src/constants/api.ts
@@ -79,4 +79,6 @@ export const USER_ERROR_MESSAGE = {
   E303: '해당 장소가 이미 존재합니다.',
   E304: '유효하지 않은 지도입니다. 다시 확인해 주세요.',
   E201: '요청한 장소를 찾을 수 없습니다.',
+  E999: '서버에 문제가 발생했습니다. 잠시 후 다시 시도해 주세요.',
+  E900: '양식이 잘못 되었습니다. 다시 확인해 주세요.',
 };
diff --git a/frontend/src/lib/CustomMarkerClusterer.ts b/frontend/src/lib/CustomMarkerClusterer.ts
index f49326a0..072caeef 100644
--- a/frontend/src/lib/CustomMarkerClusterer.ts
+++ b/frontend/src/lib/CustomMarkerClusterer.ts
@@ -80,7 +80,7 @@ export class CustomMarkerClusterer extends MarkerClusterer {
         map,
         mapCanvasProjection: this.getProjection(),
       });
-      console.log(changed, 'changed');
+      console.log(changed, 'given changed');
       // Allow algorithms to return flag on whether the clusters/markers have changed.
       if (changed || changed === undefined) {
         // Accumulate the markers of the clusters composed of a single marker.
diff --git a/frontend/src/lib/CustomSuperCluseterAlgorithm.ts b/frontend/src/lib/CustomSuperCluseterAlgorithm.ts
index 31413de3..d418cf3b 100644
--- a/frontend/src/lib/CustomSuperCluseterAlgorithm.ts
+++ b/frontend/src/lib/CustomSuperCluseterAlgorithm.ts
@@ -25,7 +25,8 @@ export class CustomSuperClusterAlgorithm extends SuperClusterViewportAlgorithm {
       ),
     };
 
-    let changed = !equal(this.state, state);
+    // let changed = !equal(this.state, state);
+    let changed = false;
     if (!equal(input.markers, this.markers)) {
       // TODO use proxy to avoid copy?
       this.markers = [...input.markers];
@@ -51,6 +52,7 @@ export class CustomSuperClusterAlgorithm extends SuperClusterViewportAlgorithm {
     //!equal(this.clusters, newClusters)
     if (this.clusters.length !== newClusters.length) {
       this.clusters = newClusters;
+      changed = true;
     } else {
       changed = false;
     }
diff --git a/frontend/src/lib/SuperClusterAlgorithm.ts b/frontend/src/lib/SuperClusterAlgorithm.ts
new file mode 100644
index 00000000..b4d86330
--- /dev/null
+++ b/frontend/src/lib/SuperClusterAlgorithm.ts
@@ -0,0 +1,57 @@
+import {
+  AlgorithmInput,
+  AlgorithmOutput,
+  getPaddedViewport,
+  MarkerUtils,
+  SuperClusterViewportAlgorithm,
+  SuperClusterViewportOptions,
+  SuperClusterViewportState,
+} from '@googlemaps/markerclusterer';
+import equal from 'fast-deep-equal';
+
+export class SuperClusterAlgorithmTest extends SuperClusterViewportAlgorithm {
+  constructor({ ...options }: SuperClusterViewportOptions) {
+    super(options);
+    this.clusters = [];
+  }
+
+  public calculate(input: AlgorithmInput): AlgorithmOutput {
+    const state: SuperClusterViewportState = {
+      zoom: Math.round(input.map.getZoom()!),
+      view: getPaddedViewport(
+        input.map.getBounds()!,
+        input.mapCanvasProjection,
+        this.viewportPadding,
+      ),
+    };
+
+    let changed = !equal(this.state, state);
+    console.log('Origin changed', changed);
+    if (!equal(input.markers, this.markers)) {
+      changed = true;
+      // TODO use proxy to avoid copy?
+      this.markers = [...input.markers];
+
+      const points = this.markers.map((marker) => {
+        const position = MarkerUtils.getPosition(marker);
+        const coordinates = [position.lng(), position.lat()];
+        return {
+          type: 'Feature' as const,
+          geometry: {
+            type: 'Point' as const,
+            coordinates,
+          },
+          properties: { marker },
+        };
+      });
+      this.superCluster.load(points);
+    }
+
+    if (changed) {
+      this.clusters = this.cluster(input);
+      this.state = state;
+    }
+
+    return { clusters: this.clusters, changed };
+  }
+}
diff --git a/frontend/src/store/googleMapSlice/index.ts b/frontend/src/store/googleMapSlice/index.ts
index 42a6f412..fefe55d1 100644
--- a/frontend/src/store/googleMapSlice/index.ts
+++ b/frontend/src/store/googleMapSlice/index.ts
@@ -5,12 +5,16 @@ import {
   getGoogleMapClass,
   loadGoogleMapsApi,
 } from '@/lib/googleMapsAPI-loader';
-import { MarkerClusterer } from '@googlemaps/markerclusterer';
+import {
+  MarkerClusterer,
+  SuperClusterAlgorithm,
+} from '@googlemaps/markerclusterer';
 import {
   clustererOptions,
   CustomMarkerClusterer,
 } from '@/lib/CustomMarkerClusterer';
 import { CustomSuperClusterAlgorithm } from '@/lib/CustomSuperCluseterAlgorithm';
+import { SuperClusterAlgorithmTest } from '@/lib/SuperClusterAlgorithm';
 
 export type GoogleMapState = {
   googleMap: google.maps.Map | null;

From b627a14dc88721e91888842a6862b29ac23455f9 Mon Sep 17 00:00:00 2001
From: 1119wj <1119wj@naver.com>
Date: Tue, 3 Dec 2024 11:15:22 +0900
Subject: [PATCH 8/8] fix: lint #222

---
 frontend/src/store/googleMapSlice/index.ts | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/frontend/src/store/googleMapSlice/index.ts b/frontend/src/store/googleMapSlice/index.ts
index fefe55d1..f72c4199 100644
--- a/frontend/src/store/googleMapSlice/index.ts
+++ b/frontend/src/store/googleMapSlice/index.ts
@@ -5,16 +5,12 @@ import {
   getGoogleMapClass,
   loadGoogleMapsApi,
 } from '@/lib/googleMapsAPI-loader';
-import {
-  MarkerClusterer,
-  SuperClusterAlgorithm,
-} from '@googlemaps/markerclusterer';
+import { MarkerClusterer } from '@googlemaps/markerclusterer';
 import {
   clustererOptions,
   CustomMarkerClusterer,
 } from '@/lib/CustomMarkerClusterer';
 import { CustomSuperClusterAlgorithm } from '@/lib/CustomSuperCluseterAlgorithm';
-import { SuperClusterAlgorithmTest } from '@/lib/SuperClusterAlgorithm';
 
 export type GoogleMapState = {
   googleMap: google.maps.Map | null;
@@ -49,7 +45,7 @@ export const createGoogleMapSlice: StateCreator<
       algorithm: new CustomSuperClusterAlgorithm({ maxZoom: 18 }),
       ...restClustererOptions,
     });
-
+    console.log(algorithm);
     set({ googleMap: map, markerClusterer });
   },