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