feat: 클러스터 알고리즘 테스트

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 };
 };

frontend/src/constants/api.ts

@@ -79,4 +79,6 @@ export const USER_ERROR_MESSAGE = {
   E303: '해당 장소가 이미 존재합니다.',
   E304: '유효하지 않은 지도입니다. 다시 확인해 주세요.',
   E201: '요청한 장소를 찾을 수 없습니다.',
+  E999: '서버에 문제가 발생했습니다. 잠시 후 다시 시도해 주세요.',
+  E900: '양식이 잘못 되었습니다. 다시 확인해 주세요.',
 };

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.

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;
     }

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 };
+  }
+}

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;