From b55749dcb912461867e574f977c493b93abaff70 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Mon, 2 Oct 2023 22:29:59 +0900 Subject: [PATCH 01/19] =?UTF-8?q?chore:=20@googlemaps/markerclusterer=20?= =?UTF-8?q?=ED=8C=A8=ED=82=A4=EC=A7=80=20=EC=84=A4=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [#157] --- frontend/package.json | 1 + frontend/yarn.lock | 20 ++++++++++++++++++++ 2 files changed, 21 insertions(+) diff --git a/frontend/package.json b/frontend/package.json index fd0d9948a..25881fcf1 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -16,6 +16,7 @@ "author": "", "license": "ISC", "dependencies": { + "@googlemaps/markerclusterer": "^2.5.0", "@googlemaps/react-wrapper": "^1.1.35", "@heroicons/react": "^2.0.18", "@svgr/webpack": "^8.0.1", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index c3c2ac427..d78578275 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1870,6 +1870,14 @@ dependencies: fast-deep-equal "^3.1.3" +"@googlemaps/markerclusterer@^2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@googlemaps/markerclusterer/-/markerclusterer-2.5.0.tgz#44d04de431809501e7a14c80e3a88244c0a543e2" + integrity sha512-WpHLCZxP7QmB4Hc5kyODGdTfJPsZiOIbcvbYhcS/VeiRNDVjf6CRQ8ViQjwrG5OySC66rtOdj4RVhUXsd1tNTQ== + dependencies: + fast-deep-equal "^3.1.3" + supercluster "^8.0.1" + "@googlemaps/react-wrapper@^1.1.35": version "1.1.35" resolved "https://registry.npmjs.org/@googlemaps/react-wrapper/-/react-wrapper-1.1.35.tgz" @@ -8406,6 +8414,11 @@ jsonfile@^6.0.1: object.assign "^4.1.4" object.values "^1.1.6" +kdbush@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/kdbush/-/kdbush-4.0.2.tgz#2f7b7246328b4657dd122b6c7f025fbc2c868e39" + integrity sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA== + kind-of@^6.0.2: version "6.0.3" resolved "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz" @@ -10762,6 +10775,13 @@ stylis@^4.3.0: resolved "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz" integrity sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ== +supercluster@^8.0.1: + version "8.0.1" + resolved "https://registry.yarnpkg.com/supercluster/-/supercluster-8.0.1.tgz#9946ba123538e9e9ab15de472531f604e7372df5" + integrity sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ== + dependencies: + kdbush "^4.0.2" + superjson@^1.10.0: version "1.13.1" resolved "https://registry.npmjs.org/superjson/-/superjson-1.13.1.tgz" From 98ae805437511f69eb80df08dd3b3a1d0f0ba574 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Mon, 2 Oct 2023 22:52:09 +0900 Subject: [PATCH 02/19] =?UTF-8?q?feat:=20=EB=A7=88=EC=BB=A4=20=ED=81=B4?= =?UTF-8?q?=EB=9F=AC=EC=8A=A4=ED=84=B0=EB=A7=81=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [#157] --- .../HighZoomMarkerContainer.tsx | 18 ++++++++++++++++-- .../stores/google-maps/markerInstanceStore.ts | 3 +++ 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx index 7583c18ff..fe1ad9986 100644 --- a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx +++ b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx @@ -1,6 +1,9 @@ +import { MarkerClusterer } from '@googlemaps/markerclusterer'; + import { useStationMarkers } from '@marker/HighZoomMarkerContainer/hooks/useStationMarkers'; -import { markerInstanceStore } from '@stores/google-maps/markerInstanceStore'; +import { getGoogleMapStore } from '@stores/google-maps/googleMapStore'; +import { markerClusterStore, markerInstanceStore } from '@stores/google-maps/markerInstanceStore'; import { useRenderStationMarker } from './hooks/useRenderStationMarker'; @@ -13,7 +16,9 @@ const HighZoomMarkerContainer = () => { renderMarkerInstances, } = useRenderStationMarker(); - if (!stationMarkers || !isSuccess) { + console.log(stationMarkers); + + if (stationMarkers === undefined || stationMarkers.length === 0 || !isSuccess) { return <>; } @@ -32,6 +37,15 @@ const HighZoomMarkerContainer = () => { markerInstanceStore.setState([...remainedMarkerInstances, ...newMarkerInstances]); + const markerCluster = new MarkerClusterer({ + map: getGoogleMapStore().getState(), + markers: markerInstanceStore.getState().map(({ markerInstance }) => markerInstance), + }); + + // 이전 마커 클러스터를 지도에서 제거 + markerClusterStore.getState()?.setMap(null); + markerClusterStore.setState(markerCluster); + return <>; }; diff --git a/frontend/src/stores/google-maps/markerInstanceStore.ts b/frontend/src/stores/google-maps/markerInstanceStore.ts index 95df0cf6d..0c75cc225 100644 --- a/frontend/src/stores/google-maps/markerInstanceStore.ts +++ b/frontend/src/stores/google-maps/markerInstanceStore.ts @@ -1,3 +1,5 @@ +import type { MarkerClusterer } from '@googlemaps/markerclusterer'; + import { store } from '@utils/external-state'; export interface StationMarkerInstance { @@ -6,3 +8,4 @@ export interface StationMarkerInstance { } export const markerInstanceStore = store([]); +export const markerClusterStore = store(null); From 2d0f6210efdc8bed10bfabace6e95edfa8b59c3d Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Mon, 2 Oct 2023 23:24:51 +0900 Subject: [PATCH 03/19] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20console.log=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [#157] --- .../marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx index fe1ad9986..d239f27ea 100644 --- a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx +++ b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx @@ -16,8 +16,6 @@ const HighZoomMarkerContainer = () => { renderMarkerInstances, } = useRenderStationMarker(); - console.log(stationMarkers); - if (stationMarkers === undefined || stationMarkers.length === 0 || !isSuccess) { return <>; } From 86c51d94519ef7b60da9fb82bb222e5b20cd9edf Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Tue, 3 Oct 2023 15:07:06 +0900 Subject: [PATCH 04/19] =?UTF-8?q?refactor:=20=ED=81=B4=EB=9F=AC=EC=8A=A4?= =?UTF-8?q?=ED=84=B0=EB=A7=81=20=EC=A0=9C=EA=B1=B0=ED=95=98=EA=B3=A0=20?= =?UTF-8?q?=EC=A0=90=20=EB=A7=88=EC=BB=A4=20=EB=8F=84=EC=9E=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 임시로 데모 만들어본 것입니다. 추후 제거할 가능성이 높습니다. [#157] --- .../google-maps/map/CarFfeineListener.tsx | 19 ++++++++++++++ .../HighZoomMarkerContainer.tsx | 16 ++---------- .../CarFfeineMarker/CarFfeineMarker.tsx | 26 +++++++++++++------ .../components/DotMarker/DotMarker.style.ts | 12 +++++++++ .../components/DotMarker/DotMarker.tsx | 15 +++++++++++ .../hooks/useRenderStationMarker.tsx | 4 +-- 6 files changed, 68 insertions(+), 24 deletions(-) create mode 100644 frontend/src/components/google-maps/marker/HighZoomMarkerContainer/components/DotMarker/DotMarker.style.ts create mode 100644 frontend/src/components/google-maps/marker/HighZoomMarkerContainer/components/DotMarker/DotMarker.tsx diff --git a/frontend/src/components/google-maps/map/CarFfeineListener.tsx b/frontend/src/components/google-maps/map/CarFfeineListener.tsx index 0dd4701ca..a7247beee 100644 --- a/frontend/src/components/google-maps/map/CarFfeineListener.tsx +++ b/frontend/src/components/google-maps/map/CarFfeineListener.tsx @@ -43,11 +43,30 @@ const CarFfeineMapListener = () => { }, 300); useEffect(() => { + // let timerId: NodeJS.Timeout = null; + googleMap.addListener('idle', () => { if (zoom.state === 'high') { debouncedHighZoomHandler(); } zoomActions.setZoom(googleMap.getZoom()); + + // if (timerId !== null) { + // console.log('바이'); + // clearTimeout(timerId); + // } + + // timerId = setTimeout(() => { + // console.log('마커 클러스터 다시 렌더링 됨'); + // const markerCluster = new MarkerClusterer({ + // map: getGoogleMapStore().getState(), + // markers: markerInstanceStore.getState().map(({ markerInstance }) => markerInstance), + // }); + + // // 이전 마커 클러스터를 지도에서 제거 + // markerClusterStore.getState()?.setMap(null); + // markerClusterStore.setState(markerCluster); + // }, 500); }); const initMarkersEvent = googleMap.addListener('bounds_changed', async () => { diff --git a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx index d239f27ea..1d308fc86 100644 --- a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx +++ b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx @@ -1,9 +1,6 @@ -import { MarkerClusterer } from '@googlemaps/markerclusterer'; - import { useStationMarkers } from '@marker/HighZoomMarkerContainer/hooks/useStationMarkers'; -import { getGoogleMapStore } from '@stores/google-maps/googleMapStore'; -import { markerClusterStore, markerInstanceStore } from '@stores/google-maps/markerInstanceStore'; +import { markerInstanceStore } from '@stores/google-maps/markerInstanceStore'; import { useRenderStationMarker } from './hooks/useRenderStationMarker'; @@ -16,7 +13,7 @@ const HighZoomMarkerContainer = () => { renderMarkerInstances, } = useRenderStationMarker(); - if (stationMarkers === undefined || stationMarkers.length === 0 || !isSuccess) { + if (stationMarkers === undefined || !isSuccess) { return <>; } @@ -35,15 +32,6 @@ const HighZoomMarkerContainer = () => { markerInstanceStore.setState([...remainedMarkerInstances, ...newMarkerInstances]); - const markerCluster = new MarkerClusterer({ - map: getGoogleMapStore().getState(), - markers: markerInstanceStore.getState().map(({ markerInstance }) => markerInstance), - }); - - // 이전 마커 클러스터를 지도에서 제거 - markerClusterStore.getState()?.setMap(null); - markerClusterStore.setState(markerCluster); - return <>; }; diff --git a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/components/CarFfeineMarker/CarFfeineMarker.tsx b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/components/CarFfeineMarker/CarFfeineMarker.tsx index 39d0b2f36..5a774d935 100644 --- a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/components/CarFfeineMarker/CarFfeineMarker.tsx +++ b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/components/CarFfeineMarker/CarFfeineMarker.tsx @@ -1,3 +1,5 @@ +import styled from 'styled-components'; + import type { StationMarker } from '@type'; import type { MARKER_COLORS } from './CarFfeineMarker.style'; @@ -11,15 +13,23 @@ const CarFfeineMarker = (station: StationMarker) => { const state: StationAvailability = availableCount === 0 ? 'noAvailable' : 'available'; return ( - - {availableCount} - + + + {availableCount} + + ); }; +const Container = styled.div` + position: absolute; + left: -13.5px; + top: -35px; +`; + export default CarFfeineMarker; diff --git a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/components/DotMarker/DotMarker.style.ts b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/components/DotMarker/DotMarker.style.ts new file mode 100644 index 000000000..5c0e8521f --- /dev/null +++ b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/components/DotMarker/DotMarker.style.ts @@ -0,0 +1,12 @@ +import styled from 'styled-components'; + +export const Marker = styled.div<{ isAvailable: boolean }>` + width: 1.5rem; + height: 1.5rem; + + background-color: ${({ isAvailable }) => (isAvailable ? '#3373DC' : '#EA4335')}; + border: 1.5px solid ${({ isAvailable }) => (isAvailable ? '#324F8E' : '#960A0A')}; + border-radius: 50%; + + position: relative; +`; diff --git a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/components/DotMarker/DotMarker.tsx b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/components/DotMarker/DotMarker.tsx new file mode 100644 index 000000000..4d68c37e1 --- /dev/null +++ b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/components/DotMarker/DotMarker.tsx @@ -0,0 +1,15 @@ +import type { StationMarker } from '@type'; + +import { Marker } from './DotMarker.style'; + +interface Props { + station: StationMarker; +} + +const DotMarker = ({ station }: Props) => { + const isAvailable = station.availableCount > 0; + + return ; +}; + +export default DotMarker; diff --git a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx index e5be93246..4168549ce 100644 --- a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx +++ b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx @@ -13,7 +13,7 @@ import StationDetailsWindow from '@ui/StationDetailsWindow'; import type { StationDetails, StationMarker, StationSummary } from '@type'; -import CarFfeineMarker from '../components/CarFfeineMarker'; +import DotMarker from '../components/DotMarker/DotMarker'; export const useRenderStationMarker = () => { const googleMap = getStoreSnapshot(getGoogleMapStore()); @@ -104,7 +104,7 @@ export const useRenderStationMarker = () => { const markerInformation = markers.find( (stationMarker) => stationMarker.stationId === stationId ); - createRoot(container).render(); + createRoot(container).render(); }); }; From be63245322800ca9c9f47ec92a5cb749dc9e67b9 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Wed, 4 Oct 2023 15:05:21 +0900 Subject: [PATCH 05/19] =?UTF-8?q?refactor:=20=EC=9E=91=EC=9D=80=20?= =?UTF-8?q?=EB=A7=88=EC=BB=A4=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [#157] --- .../hooks/useRenderStationMarker.tsx | 34 ++++++++++++------- 1 file changed, 21 insertions(+), 13 deletions(-) diff --git a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx index 4168549ce..e81e95ca9 100644 --- a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx +++ b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx @@ -1,5 +1,3 @@ -import { createRoot } from 'react-dom/client'; - import { getStoreSnapshot } from '@utils/external-state/tools'; import { getGoogleMapStore } from '@stores/google-maps/googleMapStore'; @@ -13,8 +11,6 @@ import StationDetailsWindow from '@ui/StationDetailsWindow'; import type { StationDetails, StationMarker, StationSummary } from '@type'; -import DotMarker from '../components/DotMarker/DotMarker'; - export const useRenderStationMarker = () => { const googleMap = getStoreSnapshot(getGoogleMapStore()); @@ -25,9 +21,14 @@ export const useRenderStationMarker = () => { const createNewMarkerInstance = (marker: StationDetails) => { const { latitude: lat, longitude: lng, stationName, stationId } = marker; + const pinViewScaled = new google.maps.marker.PinElement({ + scale: 0.5, + }); + const markerInstance = new google.maps.marker.AdvancedMarkerElement({ position: { lat, lng }, title: stationName, + content: pinViewScaled.element, }); bindMarkerClickHandler([{ stationId, markerInstance }]); @@ -46,9 +47,18 @@ export const useRenderStationMarker = () => { const newMarkerInstances = newMarkers.map((marker) => { const { latitude: lat, longitude: lng, stationName, stationId } = marker; + const pinViewScaled = new google.maps.marker.PinElement({ + scale: 0.6, + background: marker.availableCount > 0 ? '#3373DC' : '#EA4335', + borderColor: marker.availableCount > 0 ? '#324F8E' : '#B8312F', + glyph: '', + }); + const markerInstance = new google.maps.marker.AdvancedMarkerElement({ + map: googleMap, position: { lat, lng }, title: stationName, + content: pinViewScaled.element, }); return { @@ -96,15 +106,13 @@ export const useRenderStationMarker = () => { markers: StationMarker[] | StationSummary[] ) => { newMarkerInstances.forEach(({ markerInstance, stationId }) => { - const container = document.createElement('div'); - - markerInstance.content = container; - markerInstance.map = googleMap; - - const markerInformation = markers.find( - (stationMarker) => stationMarker.stationId === stationId - ); - createRoot(container).render(); + // const container = document.createElement('div'); + // markerInstance.content = container; + // markerInstance.map = googleMap; + // const markerInformation = markers.find( + // (stationMarker) => stationMarker.stationId === stationId + // ); + // createRoot(container).render(); }); }; From 917c9a659d53216294ef9fda806b275155c53eb1 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Thu, 5 Oct 2023 14:40:16 +0900 Subject: [PATCH 06/19] =?UTF-8?q?refactor:=20=EC=A4=8C=20=EB=A0=88?= =?UTF-8?q?=EB=B2=A8=2016=EC=97=90=EC=84=9C=EC=9D=98=20=EB=A7=88=EC=BB=A4?= =?UTF-8?q?=EB=A5=BC=20=EC=A0=90=20=ED=98=95=ED=83=9C=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EA=B8=B0=EB=B3=B8=20=EB=A7=88=EC=BB=A4=20=ED=98=95=EC=8B=9D?= =?UTF-8?q?=EC=9D=84=20=EC=9C=A0=EC=A7=80=ED=95=9C=20=EC=9E=91=EC=9D=80=20?= =?UTF-8?q?=EB=A7=88=EC=BB=A4=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [#157] --- .../HighZoomMarkerContainer.tsx | 4 +- .../components/DotMarker/DotMarker.style.ts | 12 ---- .../components/DotMarker/DotMarker.tsx | 15 ----- .../hooks/useRenderStationMarker.tsx | 58 +++++++++++++------ 4 files changed, 42 insertions(+), 47 deletions(-) delete mode 100644 frontend/src/components/google-maps/marker/HighZoomMarkerContainer/components/DotMarker/DotMarker.style.ts delete mode 100644 frontend/src/components/google-maps/marker/HighZoomMarkerContainer/components/DotMarker/DotMarker.tsx diff --git a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx index 1d308fc86..109a1c949 100644 --- a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx +++ b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx @@ -10,7 +10,7 @@ const HighZoomMarkerContainer = () => { createNewMarkerInstances, getRemainedMarkerInstances, removeMarkersOutsideBounds, - renderMarkerInstances, + renderDefaultMarkers, } = useRenderStationMarker(); if (stationMarkers === undefined || !isSuccess) { @@ -28,7 +28,7 @@ const HighZoomMarkerContainer = () => { ); removeMarkersOutsideBounds(markerInstanceStore.getState(), stationMarkers); - renderMarkerInstances(newMarkerInstances, stationMarkers); + renderDefaultMarkers(newMarkerInstances, stationMarkers); markerInstanceStore.setState([...remainedMarkerInstances, ...newMarkerInstances]); diff --git a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/components/DotMarker/DotMarker.style.ts b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/components/DotMarker/DotMarker.style.ts deleted file mode 100644 index 5c0e8521f..000000000 --- a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/components/DotMarker/DotMarker.style.ts +++ /dev/null @@ -1,12 +0,0 @@ -import styled from 'styled-components'; - -export const Marker = styled.div<{ isAvailable: boolean }>` - width: 1.5rem; - height: 1.5rem; - - background-color: ${({ isAvailable }) => (isAvailable ? '#3373DC' : '#EA4335')}; - border: 1.5px solid ${({ isAvailable }) => (isAvailable ? '#324F8E' : '#960A0A')}; - border-radius: 50%; - - position: relative; -`; diff --git a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/components/DotMarker/DotMarker.tsx b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/components/DotMarker/DotMarker.tsx deleted file mode 100644 index 4d68c37e1..000000000 --- a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/components/DotMarker/DotMarker.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import type { StationMarker } from '@type'; - -import { Marker } from './DotMarker.style'; - -interface Props { - station: StationMarker; -} - -const DotMarker = ({ station }: Props) => { - const isAvailable = station.availableCount > 0; - - return ; -}; - -export default DotMarker; diff --git a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx index e81e95ca9..a7224841a 100644 --- a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx +++ b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx @@ -1,3 +1,5 @@ +import { createRoot } from 'react-dom/client'; + import { getStoreSnapshot } from '@utils/external-state/tools'; import { getGoogleMapStore } from '@stores/google-maps/googleMapStore'; @@ -11,6 +13,8 @@ import StationDetailsWindow from '@ui/StationDetailsWindow'; import type { StationDetails, StationMarker, StationSummary } from '@type'; +import CarFfeineMarker from '../components/CarFfeineMarker'; + export const useRenderStationMarker = () => { const googleMap = getStoreSnapshot(getGoogleMapStore()); @@ -47,18 +51,9 @@ export const useRenderStationMarker = () => { const newMarkerInstances = newMarkers.map((marker) => { const { latitude: lat, longitude: lng, stationName, stationId } = marker; - const pinViewScaled = new google.maps.marker.PinElement({ - scale: 0.6, - background: marker.availableCount > 0 ? '#3373DC' : '#EA4335', - borderColor: marker.availableCount > 0 ? '#324F8E' : '#B8312F', - glyph: '', - }); - const markerInstance = new google.maps.marker.AdvancedMarkerElement({ - map: googleMap, position: { lat, lng }, title: stationName, - content: pinViewScaled.element, }); return { @@ -101,18 +96,44 @@ export const useRenderStationMarker = () => { ); }; - const renderMarkerInstances = ( + const renderDefaultMarkers = ( + markerInstances: StationMarkerInstance[], + markers: StationMarker[] | StationSummary[] + ) => { + markers.forEach((marker) => { + const markerInstance = markerInstances.find( + (markerInstance) => markerInstance.stationId === marker.stationId + )?.markerInstance; + + if (markerInstance) { + const pinViewScaled = new google.maps.marker.PinElement({ + scale: 0.6, + background: marker.availableCount > 0 ? '#3373DC' : '#EA4335', + borderColor: marker.availableCount > 0 ? '#324F8E' : '#B8312F', + glyph: '', + }); + + markerInstance.map = googleMap; + markerInstance.content = pinViewScaled.element; + } + }); + }; + + const renderCarffeineMarkers = ( newMarkerInstances: StationMarkerInstance[], markers: StationMarker[] | StationSummary[] ) => { newMarkerInstances.forEach(({ markerInstance, stationId }) => { - // const container = document.createElement('div'); - // markerInstance.content = container; - // markerInstance.map = googleMap; - // const markerInformation = markers.find( - // (stationMarker) => stationMarker.stationId === stationId - // ); - // createRoot(container).render(); + const container = document.createElement('div'); + + markerInstance.content = container; + markerInstance.map = googleMap; + + const markerInformation = markers.find( + (stationMarker) => stationMarker.stationId === stationId + ); + + createRoot(container).render(); }); }; @@ -133,7 +154,8 @@ export const useRenderStationMarker = () => { createNewMarkerInstances, removeMarkersOutsideBounds, getRemainedMarkerInstances, - renderMarkerInstances, + renderDefaultMarkers, + renderCarffeineMarkers, removeAllMarkers, }; }; From 794b12a44a977395d82fac8a2ba26d5c52082b3c Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Thu, 5 Oct 2023 14:59:38 +0900 Subject: [PATCH 07/19] =?UTF-8?q?comment:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [#157] --- .../google-maps/map/CarFfeineListener.tsx | 20 +------------------ 1 file changed, 1 insertion(+), 19 deletions(-) diff --git a/frontend/src/components/google-maps/map/CarFfeineListener.tsx b/frontend/src/components/google-maps/map/CarFfeineListener.tsx index a7247beee..13af6927b 100644 --- a/frontend/src/components/google-maps/map/CarFfeineListener.tsx +++ b/frontend/src/components/google-maps/map/CarFfeineListener.tsx @@ -43,30 +43,12 @@ const CarFfeineMapListener = () => { }, 300); useEffect(() => { - // let timerId: NodeJS.Timeout = null; - googleMap.addListener('idle', () => { if (zoom.state === 'high') { debouncedHighZoomHandler(); } - zoomActions.setZoom(googleMap.getZoom()); - // if (timerId !== null) { - // console.log('바이'); - // clearTimeout(timerId); - // } - - // timerId = setTimeout(() => { - // console.log('마커 클러스터 다시 렌더링 됨'); - // const markerCluster = new MarkerClusterer({ - // map: getGoogleMapStore().getState(), - // markers: markerInstanceStore.getState().map(({ markerInstance }) => markerInstance), - // }); - - // // 이전 마커 클러스터를 지도에서 제거 - // markerClusterStore.getState()?.setMap(null); - // markerClusterStore.setState(markerCluster); - // }, 500); + zoomActions.setZoom(googleMap.getZoom()); }); const initMarkersEvent = googleMap.addListener('bounds_changed', async () => { From 5d0bf55328fce340ba02c0e7d0e98d49e1316c80 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Thu, 5 Oct 2023 15:00:45 +0900 Subject: [PATCH 08/19] =?UTF-8?q?refactor:=20=EC=A4=8C=20=EB=A0=88?= =?UTF-8?q?=EB=B2=A8=2017=20=EC=9D=B4=EC=83=81=EC=9D=BC=20=EA=B2=BD?= =?UTF-8?q?=EC=9A=B0=20CarffeineMarker=EA=B0=80=20=EB=A0=8C=EB=8D=94?= =?UTF-8?q?=EB=A7=81=20=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 아직 줌레벨을 실시간으로 트래킹해 17 이상인지 여부를 판별하고 있지 않으므로 재요청이 발생한 경우에만 마커가 다르게 찍히고 있습니다. [#157] --- .../HighZoomMarkerContainer/HighZoomMarkerContainer.tsx | 9 ++++++++- .../hooks/useRenderStationMarker.tsx | 4 ++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx index 109a1c949..a4d907576 100644 --- a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx +++ b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx @@ -1,5 +1,6 @@ import { useStationMarkers } from '@marker/HighZoomMarkerContainer/hooks/useStationMarkers'; +import { getGoogleMapStore } from '@stores/google-maps/googleMapStore'; import { markerInstanceStore } from '@stores/google-maps/markerInstanceStore'; import { useRenderStationMarker } from './hooks/useRenderStationMarker'; @@ -11,6 +12,7 @@ const HighZoomMarkerContainer = () => { getRemainedMarkerInstances, removeMarkersOutsideBounds, renderDefaultMarkers, + renderCarffeineMarkers, } = useRenderStationMarker(); if (stationMarkers === undefined || !isSuccess) { @@ -28,7 +30,12 @@ const HighZoomMarkerContainer = () => { ); removeMarkersOutsideBounds(markerInstanceStore.getState(), stationMarkers); - renderDefaultMarkers(newMarkerInstances, stationMarkers); + + if (getGoogleMapStore().getState().getZoom() >= 17) { + renderCarffeineMarkers(newMarkerInstances, stationMarkers); + } else { + renderDefaultMarkers(newMarkerInstances, stationMarkers); + } markerInstanceStore.setState([...remainedMarkerInstances, ...newMarkerInstances]); diff --git a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx index a7224841a..41cfd6ee2 100644 --- a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx +++ b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx @@ -120,10 +120,10 @@ export const useRenderStationMarker = () => { }; const renderCarffeineMarkers = ( - newMarkerInstances: StationMarkerInstance[], + markerInstances: StationMarkerInstance[], markers: StationMarker[] | StationSummary[] ) => { - newMarkerInstances.forEach(({ markerInstance, stationId }) => { + markerInstances.forEach(({ markerInstance, stationId }) => { const container = document.createElement('div'); markerInstance.content = container; From 99cd8fd180840ecb58ccba464486c7398b816d54 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Thu, 5 Oct 2023 15:10:01 +0900 Subject: [PATCH 09/19] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [#157] --- .../HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx index 41cfd6ee2..5e76294c7 100644 --- a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx +++ b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx @@ -25,14 +25,9 @@ export const useRenderStationMarker = () => { const createNewMarkerInstance = (marker: StationDetails) => { const { latitude: lat, longitude: lng, stationName, stationId } = marker; - const pinViewScaled = new google.maps.marker.PinElement({ - scale: 0.5, - }); - const markerInstance = new google.maps.marker.AdvancedMarkerElement({ position: { lat, lng }, title: stationName, - content: pinViewScaled.element, }); bindMarkerClickHandler([{ stationId, markerInstance }]); From 963e62ef6c8e5912d87cf6b06838c22746fea414 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Thu, 5 Oct 2023 15:10:27 +0900 Subject: [PATCH 10/19] =?UTF-8?q?refactor:=20=EC=A4=8C=EB=A0=88=EB=B2=A8,?= =?UTF-8?q?=20=EB=A7=88=EC=BB=A4=20=ED=81=AC=EA=B8=B0=20=EB=B9=84=EC=9C=A8?= =?UTF-8?q?=20=EC=83=81=EC=88=98=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [#157] --- .../HighZoomMarkerContainer/HighZoomMarkerContainer.tsx | 3 ++- .../marker/HighZoomMarkerContainer/constants/index.ts | 2 ++ .../hooks/useRenderStationMarker.tsx | 7 ++++--- 3 files changed, 8 insertions(+), 4 deletions(-) create mode 100644 frontend/src/components/google-maps/marker/HighZoomMarkerContainer/constants/index.ts diff --git a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx index a4d907576..f75699837 100644 --- a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx +++ b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx @@ -3,6 +3,7 @@ import { useStationMarkers } from '@marker/HighZoomMarkerContainer/hooks/useStat import { getGoogleMapStore } from '@stores/google-maps/googleMapStore'; import { markerInstanceStore } from '@stores/google-maps/markerInstanceStore'; +import { ZOOM_BREAKPOINT_DEFAULT_TO_CARFFEINE_MARKER } from './constants'; import { useRenderStationMarker } from './hooks/useRenderStationMarker'; const HighZoomMarkerContainer = () => { @@ -31,7 +32,7 @@ const HighZoomMarkerContainer = () => { removeMarkersOutsideBounds(markerInstanceStore.getState(), stationMarkers); - if (getGoogleMapStore().getState().getZoom() >= 17) { + if (getGoogleMapStore().getState().getZoom() >= ZOOM_BREAKPOINT_DEFAULT_TO_CARFFEINE_MARKER) { renderCarffeineMarkers(newMarkerInstances, stationMarkers); } else { renderDefaultMarkers(newMarkerInstances, stationMarkers); diff --git a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/constants/index.ts b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/constants/index.ts new file mode 100644 index 000000000..d08bd8e44 --- /dev/null +++ b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/constants/index.ts @@ -0,0 +1,2 @@ +export const DEFAULT_MARKER_SIZE_RATIO = 0.5; +export const ZOOM_BREAKPOINT_DEFAULT_TO_CARFFEINE_MARKER = 17; diff --git a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx index 5e76294c7..6e1dab191 100644 --- a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx +++ b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx @@ -14,6 +14,7 @@ import StationDetailsWindow from '@ui/StationDetailsWindow'; import type { StationDetails, StationMarker, StationSummary } from '@type'; import CarFfeineMarker from '../components/CarFfeineMarker'; +import { DEFAULT_MARKER_SIZE_RATIO } from '../constants'; export const useRenderStationMarker = () => { const googleMap = getStoreSnapshot(getGoogleMapStore()); @@ -101,15 +102,15 @@ export const useRenderStationMarker = () => { )?.markerInstance; if (markerInstance) { - const pinViewScaled = new google.maps.marker.PinElement({ - scale: 0.6, + const defaultMarkerDesign = new google.maps.marker.PinElement({ + scale: DEFAULT_MARKER_SIZE_RATIO, background: marker.availableCount > 0 ? '#3373DC' : '#EA4335', borderColor: marker.availableCount > 0 ? '#324F8E' : '#B8312F', glyph: '', }); markerInstance.map = googleMap; - markerInstance.content = pinViewScaled.element; + markerInstance.content = defaultMarkerDesign.element; } }); }; From 6ba66792560441c2fd1710bb680c8901fb93398f Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Thu, 5 Oct 2023 16:01:50 +0900 Subject: [PATCH 11/19] =?UTF-8?q?refactor:=20zoom=20=EC=83=81=ED=83=9C?= =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EB=B6=80=EC=88=98=EC=A0=81?= =?UTF-8?q?=EC=9D=B8=20=EB=8F=99=EC=9E=91=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 각 상태에 따라 렌더링 되는 컴포넌트에 역할 위임 [#157] --- .../google-maps/map/CarFfeineListener.tsx | 21 ------------------- .../MiddleZoomMarkerContainer.tsx | 13 ++++++++++++ 2 files changed, 13 insertions(+), 21 deletions(-) diff --git a/frontend/src/components/google-maps/map/CarFfeineListener.tsx b/frontend/src/components/google-maps/map/CarFfeineListener.tsx index 13af6927b..6bead5418 100644 --- a/frontend/src/components/google-maps/map/CarFfeineListener.tsx +++ b/frontend/src/components/google-maps/map/CarFfeineListener.tsx @@ -2,8 +2,6 @@ import { useEffect } from 'react'; import { useQueryClient } from '@tanstack/react-query'; -import { useRenderStationMarker } from '@marker/HighZoomMarkerContainer/hooks/useRenderStationMarker'; - import { debounce } from '@utils/debounce'; import { useExternalValue, useSetExternalState } from '@utils/external-state'; import { getDisplayPosition } from '@utils/google-maps'; @@ -11,13 +9,9 @@ import { isCachedRegion } from '@utils/google-maps/isCachedRegion'; import { setLocalStorage } from '@utils/storage'; import { getGoogleMapStore } from '@stores/google-maps/googleMapStore'; -import { markerInstanceStore } from '@stores/google-maps/markerInstanceStore'; import { zoomActions, zoomStore } from '@stores/google-maps/zoomStore'; -import { warningModalActions } from '@stores/layout/warningModalStore'; import { profileMenuOpenStore } from '@stores/profileMenuOpenStore'; -import ZoomWarningModal from '@ui/WarningModal'; - import { QUERY_KEY_STATION_MARKERS } from '@constants/queryKeys'; import { LOCAL_KEY_LAST_POSITION } from '@constants/storageKeys'; @@ -25,7 +19,6 @@ const CarFfeineMapListener = () => { const googleMap = useExternalValue(getGoogleMapStore()); const queryClient = useQueryClient(); const setIsProfileMenuOpen = useSetExternalState(profileMenuOpenStore); - const { removeAllMarkers } = useRenderStationMarker(); const zoom = useExternalValue(zoomStore); const debouncedHighZoomHandler = debounce(() => { @@ -58,20 +51,6 @@ const CarFfeineMapListener = () => { }); }, []); - /** - * zoom.state가 바뀌었을 때만 1번 실행된다. - */ - useEffect(() => { - removeAllMarkers(markerInstanceStore.getState()); - queryClient.setQueryData([QUERY_KEY_STATION_MARKERS], () => []); - - if (zoom.state === 'middle') { - warningModalActions.openModal(); - } else { - warningModalActions.closeModal(); - } - }, [zoom.state]); - return <>; }; diff --git a/frontend/src/components/google-maps/marker/MiddleZoomMarkerContainer/MiddleZoomMarkerContainer.tsx b/frontend/src/components/google-maps/marker/MiddleZoomMarkerContainer/MiddleZoomMarkerContainer.tsx index e9314cdc1..2c8bdf144 100644 --- a/frontend/src/components/google-maps/marker/MiddleZoomMarkerContainer/MiddleZoomMarkerContainer.tsx +++ b/frontend/src/components/google-maps/marker/MiddleZoomMarkerContainer/MiddleZoomMarkerContainer.tsx @@ -1,4 +1,17 @@ +import { useEffect } from 'react'; + +import { warningModalActions } from '@stores/layout/warningModalStore'; + +import ZoomWarningModal from '@ui/WarningModal'; + const MiddleZoomMarkerContainer = () => { + useEffect(() => { + warningModalActions.openModal(); + + return () => { + warningModalActions.closeModal(); + }; + }, []); return <>; }; From 3cefd3cc91ca30e395ff687d45a083ff1b2f3af7 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Thu, 5 Oct 2023 16:05:48 +0900 Subject: [PATCH 12/19] =?UTF-8?q?refactor:=20=EC=A4=8C=20=EB=A0=88?= =?UTF-8?q?=EB=B2=A8=EC=9D=B4=2017=20=EC=9D=B4=EC=83=81=EC=9D=BC=20?= =?UTF-8?q?=EA=B2=BD=EC=9A=B0=20=EC=B9=B4=ED=8E=98=EC=9D=B8=20=EB=A7=88?= =?UTF-8?q?=EC=BB=A4=EA=B0=80=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EB=90=98?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - zoom state에 max 추가 - max가 추가됨에 따라 변경이 필요한 컴포넌트들 수정 - zoom state의 변화에 따라 카페인 마커가 렌더링 되는 기능 구현 - zoom state가 high, max인 경우에 HighZoomMarkerContainer 컴포넌트 마운트 - MaxZoomMarkerContainer를 만들려 했으나 HighZoomMarkerContainer와 공유하는 값들이 많아 일단 보류 [#157] --- .../HighZoomMarkerContainer.tsx | 29 +++++++++++++++++-- .../constants/index.ts | 1 - .../hooks/useRenderStationMarker.tsx | 5 ++-- .../google-maps/marker/MarkersContainers.tsx | 4 ++- frontend/src/constants/googleMaps.ts | 1 + .../src/stores/google-maps/zoomStore/types.ts | 1 + .../google-maps/zoomStore/zoomStore.test.ts | 2 +- .../stores/google-maps/zoomStore/zoomStore.ts | 7 +++-- 8 files changed, 39 insertions(+), 11 deletions(-) diff --git a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx index f75699837..1b517dcc9 100644 --- a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx +++ b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx @@ -1,9 +1,12 @@ +import { useEffect } from 'react'; + import { useStationMarkers } from '@marker/HighZoomMarkerContainer/hooks/useStationMarkers'; -import { getGoogleMapStore } from '@stores/google-maps/googleMapStore'; +import { useExternalValue } from '@utils/external-state'; + import { markerInstanceStore } from '@stores/google-maps/markerInstanceStore'; +import { zoomStore } from '@stores/google-maps/zoomStore'; -import { ZOOM_BREAKPOINT_DEFAULT_TO_CARFFEINE_MARKER } from './constants'; import { useRenderStationMarker } from './hooks/useRenderStationMarker'; const HighZoomMarkerContainer = () => { @@ -12,9 +15,29 @@ const HighZoomMarkerContainer = () => { createNewMarkerInstances, getRemainedMarkerInstances, removeMarkersOutsideBounds, + removeAllMarkers, renderDefaultMarkers, renderCarffeineMarkers, } = useRenderStationMarker(); + const { state: zoomState } = useExternalValue(zoomStore); + + useEffect(() => { + if (stationMarkers !== undefined) { + if (zoomState === 'max') { + renderCarffeineMarkers(markerInstanceStore.getState(), stationMarkers); + } + if (zoomState === 'high') { + renderDefaultMarkers(markerInstanceStore.getState(), stationMarkers); + } + } + }, [zoomState]); + + useEffect(() => { + return () => { + // MarkerContainers 컴포넌트에서 HighZoomMarkerContainer 컴포넌트가 unmount될 때 모든 마커를 지워준다. + removeAllMarkers(markerInstanceStore.getState()); + }; + }, []); if (stationMarkers === undefined || !isSuccess) { return <>; @@ -32,7 +55,7 @@ const HighZoomMarkerContainer = () => { removeMarkersOutsideBounds(markerInstanceStore.getState(), stationMarkers); - if (getGoogleMapStore().getState().getZoom() >= ZOOM_BREAKPOINT_DEFAULT_TO_CARFFEINE_MARKER) { + if (zoomState === 'max') { renderCarffeineMarkers(newMarkerInstances, stationMarkers); } else { renderDefaultMarkers(newMarkerInstances, stationMarkers); diff --git a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/constants/index.ts b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/constants/index.ts index d08bd8e44..eb61ae0f8 100644 --- a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/constants/index.ts +++ b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/constants/index.ts @@ -1,2 +1 @@ export const DEFAULT_MARKER_SIZE_RATIO = 0.5; -export const ZOOM_BREAKPOINT_DEFAULT_TO_CARFFEINE_MARKER = 17; diff --git a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx index 6e1dab191..54e838cd7 100644 --- a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx +++ b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx @@ -67,9 +67,8 @@ export const useRenderStationMarker = () => { prevMarkerInstances: StationMarkerInstance[], currentMarkers: StationMarker[] ) => { - const markersOutOfBounds = prevMarkerInstances.filter( - (prevMarker) => - !currentMarkers.some((currentMarker) => currentMarker.stationId === prevMarker.stationId) + const markersOutOfBounds = prevMarkerInstances.filter((prevMarker) => + currentMarkers.every((currentMarker) => currentMarker.stationId !== prevMarker.stationId) ); markersOutOfBounds.forEach((marker) => { diff --git a/frontend/src/components/google-maps/marker/MarkersContainers.tsx b/frontend/src/components/google-maps/marker/MarkersContainers.tsx index 6f466443c..64415eb85 100644 --- a/frontend/src/components/google-maps/marker/MarkersContainers.tsx +++ b/frontend/src/components/google-maps/marker/MarkersContainers.tsx @@ -17,7 +17,9 @@ const MarkersContainers = () => { return ( <> - {markerMode.state === 'high' && } + {(markerMode.state === 'high' || markerMode.state === 'max') && ( + + )} {/* 이 아래는 앞으로 추가될 기능을 미리 대응하는 컴포넌트 */} {markerMode.state === 'middle' && } {markerMode.state === 'low' && } diff --git a/frontend/src/constants/googleMaps.ts b/frontend/src/constants/googleMaps.ts index 4b38e3c20..3c4d91178 100644 --- a/frontend/src/constants/googleMaps.ts +++ b/frontend/src/constants/googleMaps.ts @@ -13,6 +13,7 @@ export const ZOOM_BREAKPOINTS: ZoomBreakpoints = { low: MIN_ZOOM_LEVEL, middle: 12, high: INITIAL_ZOOM_LEVEL, // 기존 코드와 호환을 위해 일단 이렇게 처리했습니다. + max: 17, }; export const DELTA_MULTIPLE = 2; diff --git a/frontend/src/stores/google-maps/zoomStore/types.ts b/frontend/src/stores/google-maps/zoomStore/types.ts index 73dda9593..ae3df5480 100644 --- a/frontend/src/stores/google-maps/zoomStore/types.ts +++ b/frontend/src/stores/google-maps/zoomStore/types.ts @@ -2,6 +2,7 @@ export interface ZoomBreakpoints { low: number; middle: number; high: number; + max: number; } export type ZoomState = keyof ZoomBreakpoints; diff --git a/frontend/src/stores/google-maps/zoomStore/zoomStore.test.ts b/frontend/src/stores/google-maps/zoomStore/zoomStore.test.ts index f4c3b3d1d..5987f8a71 100644 --- a/frontend/src/stores/google-maps/zoomStore/zoomStore.test.ts +++ b/frontend/src/stores/google-maps/zoomStore/zoomStore.test.ts @@ -7,7 +7,7 @@ describe('markerModeStore', () => { [12, 'middle'], [15, 'middle'], [16, 'high'], - [20, 'high'], + [20, 'max'], ])('getZoomState(%s) returns %s', (zoom, expected) => { expect(getZoomState(zoom)).toBe(expected); }); diff --git a/frontend/src/stores/google-maps/zoomStore/zoomStore.ts b/frontend/src/stores/google-maps/zoomStore/zoomStore.ts index f19e562b7..4d0bd9dd8 100644 --- a/frontend/src/stores/google-maps/zoomStore/zoomStore.ts +++ b/frontend/src/stores/google-maps/zoomStore/zoomStore.ts @@ -21,14 +21,17 @@ export const getZoomState = (newZoom: number): ZoomState => { if (newZoom < ZOOM_BREAKPOINTS.high) { return 'middle'; } - return 'high'; + if (newZoom < ZOOM_BREAKPOINTS.max) { + return 'high'; + } + return 'max'; }; export const zoomActions = { setZoom: (newZoom: number) => { const newZoomState = getZoomState(newZoom); if (newZoomState !== zoomStore.getState().state) { - zoomStore.setState({ level: newZoom, state: getZoomState(newZoom) }); + zoomStore.setState({ level: newZoom, state: newZoomState }); } }, }; From 41fdf188170aa507e3352027b9396858dfd8fa84 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Thu, 5 Oct 2023 16:37:31 +0900 Subject: [PATCH 13/19] =?UTF-8?q?refactor:=20=EC=A4=91=EB=B3=B5=EB=90=98?= =?UTF-8?q?=EB=8A=94=20=EB=A1=9C=EC=A7=81=20=ED=95=A8=EC=88=98=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - zoom state에 따라 CarffeineMarker, DefaultMarker를 선택해 렌더링하는 로직이 두 군데에서 사용되고 있어 이 부분을 함수로 분리해주었습니다. [#157] --- .../HighZoomMarkerContainer.tsx | 28 +++++++++++-------- 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx index 1b517dcc9..57cdd9387 100644 --- a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx +++ b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx @@ -4,8 +4,10 @@ import { useStationMarkers } from '@marker/HighZoomMarkerContainer/hooks/useStat import { useExternalValue } from '@utils/external-state'; +import type { StationMarkerInstance } from '@stores/google-maps/markerInstanceStore'; import { markerInstanceStore } from '@stores/google-maps/markerInstanceStore'; import { zoomStore } from '@stores/google-maps/zoomStore'; +import type { ZoomBreakpoints } from '@stores/google-maps/zoomStore/types'; import { useRenderStationMarker } from './hooks/useRenderStationMarker'; @@ -21,14 +23,21 @@ const HighZoomMarkerContainer = () => { } = useRenderStationMarker(); const { state: zoomState } = useExternalValue(zoomStore); + const renderMarkerByZoomState = ( + zoomState: keyof ZoomBreakpoints, + markerInstances: StationMarkerInstance[] + ) => { + if (zoomState === 'max') { + renderCarffeineMarkers(markerInstances, stationMarkers); + } + if (zoomState === 'high') { + renderDefaultMarkers(markerInstances, stationMarkers); + } + }; + useEffect(() => { if (stationMarkers !== undefined) { - if (zoomState === 'max') { - renderCarffeineMarkers(markerInstanceStore.getState(), stationMarkers); - } - if (zoomState === 'high') { - renderDefaultMarkers(markerInstanceStore.getState(), stationMarkers); - } + renderMarkerByZoomState(zoomState, markerInstanceStore.getState()); } }, [zoomState]); @@ -54,12 +63,7 @@ const HighZoomMarkerContainer = () => { ); removeMarkersOutsideBounds(markerInstanceStore.getState(), stationMarkers); - - if (zoomState === 'max') { - renderCarffeineMarkers(newMarkerInstances, stationMarkers); - } else { - renderDefaultMarkers(newMarkerInstances, stationMarkers); - } + renderMarkerByZoomState(zoomState, newMarkerInstances); markerInstanceStore.setState([...remainedMarkerInstances, ...newMarkerInstances]); From c8adb009c356038e4806a856b3f3379782906a07 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Thu, 5 Oct 2023 18:05:42 +0900 Subject: [PATCH 14/19] =?UTF-8?q?chore:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=ED=8C=A8=ED=82=A4=EC=A7=80=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [#157] --- frontend/package.json | 1 - frontend/yarn.lock | 20 -------------------- 2 files changed, 21 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 25881fcf1..fd0d9948a 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -16,7 +16,6 @@ "author": "", "license": "ISC", "dependencies": { - "@googlemaps/markerclusterer": "^2.5.0", "@googlemaps/react-wrapper": "^1.1.35", "@heroicons/react": "^2.0.18", "@svgr/webpack": "^8.0.1", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index d78578275..c3c2ac427 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1870,14 +1870,6 @@ dependencies: fast-deep-equal "^3.1.3" -"@googlemaps/markerclusterer@^2.5.0": - version "2.5.0" - resolved "https://registry.yarnpkg.com/@googlemaps/markerclusterer/-/markerclusterer-2.5.0.tgz#44d04de431809501e7a14c80e3a88244c0a543e2" - integrity sha512-WpHLCZxP7QmB4Hc5kyODGdTfJPsZiOIbcvbYhcS/VeiRNDVjf6CRQ8ViQjwrG5OySC66rtOdj4RVhUXsd1tNTQ== - dependencies: - fast-deep-equal "^3.1.3" - supercluster "^8.0.1" - "@googlemaps/react-wrapper@^1.1.35": version "1.1.35" resolved "https://registry.npmjs.org/@googlemaps/react-wrapper/-/react-wrapper-1.1.35.tgz" @@ -8414,11 +8406,6 @@ jsonfile@^6.0.1: object.assign "^4.1.4" object.values "^1.1.6" -kdbush@^4.0.2: - version "4.0.2" - resolved "https://registry.yarnpkg.com/kdbush/-/kdbush-4.0.2.tgz#2f7b7246328b4657dd122b6c7f025fbc2c868e39" - integrity sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA== - kind-of@^6.0.2: version "6.0.3" resolved "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz" @@ -10775,13 +10762,6 @@ stylis@^4.3.0: resolved "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz" integrity sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ== -supercluster@^8.0.1: - version "8.0.1" - resolved "https://registry.yarnpkg.com/supercluster/-/supercluster-8.0.1.tgz#9946ba123538e9e9ab15de472531f604e7372df5" - integrity sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ== - dependencies: - kdbush "^4.0.2" - superjson@^1.10.0: version "1.13.1" resolved "https://registry.npmjs.org/superjson/-/superjson-1.13.1.tgz" From c42c649a73fe8f36d27555c9e9a01edfece97761 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Thu, 5 Oct 2023 18:05:52 +0900 Subject: [PATCH 15/19] =?UTF-8?q?refactor:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20store=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [#157] --- frontend/src/stores/google-maps/markerInstanceStore.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/frontend/src/stores/google-maps/markerInstanceStore.ts b/frontend/src/stores/google-maps/markerInstanceStore.ts index 0c75cc225..95df0cf6d 100644 --- a/frontend/src/stores/google-maps/markerInstanceStore.ts +++ b/frontend/src/stores/google-maps/markerInstanceStore.ts @@ -1,5 +1,3 @@ -import type { MarkerClusterer } from '@googlemaps/markerclusterer'; - import { store } from '@utils/external-state'; export interface StationMarkerInstance { @@ -8,4 +6,3 @@ export interface StationMarkerInstance { } export const markerInstanceStore = store([]); -export const markerClusterStore = store(null); From 59192b48c737526377a15391612bd55394215c6d Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Thu, 5 Oct 2023 18:07:48 +0900 Subject: [PATCH 16/19] =?UTF-8?q?refactor:=20=ED=95=98=EB=93=9C=EC=BD=94?= =?UTF-8?q?=EB=94=A9=20=EB=90=9C=20=EB=A7=88=EC=BB=A4=20=EC=83=89=EC=83=81?= =?UTF-8?q?=20=EA=B0=92=20=EC=83=81=EC=88=98=20=ED=99=9C=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [#157] --- .../hooks/useRenderStationMarker.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx index ed69b0226..cf2f92d75 100644 --- a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx +++ b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx @@ -14,6 +14,7 @@ import StationDetailsWindow from '@ui/StationDetailsWindow'; import type { StationDetails, StationMarker, StationSummary } from '@type'; import CarFfeineMarker from '../components/CarFfeineMarker'; +import { MARKER_COLORS } from '../components/CarFfeineMarker/CarFfeineMarker.style'; import { DEFAULT_MARKER_SIZE_RATIO } from '../constants'; export const useRenderStationMarker = () => { @@ -103,8 +104,14 @@ export const useRenderStationMarker = () => { if (markerInstance) { const defaultMarkerDesign = new google.maps.marker.PinElement({ scale: DEFAULT_MARKER_SIZE_RATIO, - background: marker.availableCount > 0 ? '#3373DC' : '#EA4335', - borderColor: marker.availableCount > 0 ? '#324F8E' : '#B8312F', + background: + marker.availableCount > 0 + ? MARKER_COLORS.available.background + : MARKER_COLORS.noAvailable.background, + borderColor: + marker.availableCount > 0 + ? MARKER_COLORS.available.border + : MARKER_COLORS.noAvailable.border, glyph: '', }); From f14e97ebdd5fc865c19b77cfefaa08881a6cfd9f Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Fri, 6 Oct 2023 12:17:22 +0900 Subject: [PATCH 17/19] =?UTF-8?q?refactor:=20=EB=A7=88=EC=BB=A4=20?= =?UTF-8?q?=EC=9D=B8=EC=8A=A4=ED=84=B4=EC=8A=A4=20=EB=84=A4=EC=9D=B4?= =?UTF-8?q?=EB=B0=8D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [#157] --- .../hooks/useRenderStationMarker.tsx | 14 +++++++------- .../src/hooks/google-maps/useStationInfoWindow.tsx | 2 +- .../src/stores/google-maps/markerInstanceStore.ts | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx index cf2f92d75..539473a92 100644 --- a/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx +++ b/frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx @@ -32,7 +32,7 @@ export const useRenderStationMarker = () => { title: stationName, }); - bindMarkerClickHandler([{ stationId, markerInstance }]); + bindMarkerClickHandler([{ stationId, instance: markerInstance }]); return markerInstance; }; @@ -55,7 +55,7 @@ export const useRenderStationMarker = () => { return { stationId, - markerInstance, + instance: markerInstance, }; }); @@ -73,13 +73,13 @@ export const useRenderStationMarker = () => { ); markersOutOfBounds.forEach((marker) => { - marker.markerInstance.map = null; + marker.instance.map = null; }); }; const removeAllMarkers = (prevMarkerInstances: StationMarkerInstance[]) => { prevMarkerInstances.forEach((marker) => { - marker.markerInstance.map = null; + marker.instance.map = null; }); }; @@ -99,7 +99,7 @@ export const useRenderStationMarker = () => { markers.forEach((marker) => { const markerInstance = markerInstances.find( (markerInstance) => markerInstance.stationId === marker.stationId - )?.markerInstance; + )?.instance; if (markerInstance) { const defaultMarkerDesign = new google.maps.marker.PinElement({ @@ -125,7 +125,7 @@ export const useRenderStationMarker = () => { markerInstances: StationMarkerInstance[], markers: StationMarker[] | StationSummary[] ) => { - markerInstances.forEach(({ markerInstance, stationId }) => { + markerInstances.forEach(({ instance: markerInstance, stationId }) => { const container = document.createElement('div'); markerInstance.content = container; @@ -140,7 +140,7 @@ export const useRenderStationMarker = () => { }; const bindMarkerClickHandler = (markerInstances: StationMarkerInstance[]) => { - markerInstances.forEach(({ markerInstance, stationId }) => { + markerInstances.forEach(({ instance: markerInstance, stationId }) => { markerInstance.addListener('click', () => { openStationInfoWindow(stationId, markerInstance); diff --git a/frontend/src/hooks/google-maps/useStationInfoWindow.tsx b/frontend/src/hooks/google-maps/useStationInfoWindow.tsx index 02874b51c..a26d661ab 100644 --- a/frontend/src/hooks/google-maps/useStationInfoWindow.tsx +++ b/frontend/src/hooks/google-maps/useStationInfoWindow.tsx @@ -36,7 +36,7 @@ export const useStationInfoWindow = () => { const stationMarker = markerInstanceStore .getState() .find((stationMarker) => stationMarker.stationId === stationId); - const markerInstance = stationMarkerInstance ?? stationMarker.markerInstance; + const markerInstance = stationMarkerInstance ?? stationMarker.instance; moveMapToStationMarker(markerInstance); diff --git a/frontend/src/stores/google-maps/markerInstanceStore.ts b/frontend/src/stores/google-maps/markerInstanceStore.ts index 95df0cf6d..4cd35f87c 100644 --- a/frontend/src/stores/google-maps/markerInstanceStore.ts +++ b/frontend/src/stores/google-maps/markerInstanceStore.ts @@ -2,7 +2,7 @@ import { store } from '@utils/external-state'; export interface StationMarkerInstance { stationId: string; - markerInstance: google.maps.marker.AdvancedMarkerElement; + instance: google.maps.marker.AdvancedMarkerElement; } export const markerInstanceStore = store([]); From 648c0304530f38e55971e8be8981ae818095f9d4 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Fri, 6 Oct 2023 12:17:54 +0900 Subject: [PATCH 18/19] =?UTF-8?q?fix:=20=EB=A9=94=EC=84=9C=EB=93=9C?= =?UTF-8?q?=EB=AA=85=20=EB=B3=80=EA=B2=BD=EC=97=90=20=EB=94=B0=EB=A5=B8=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [#157] --- .../hooks/useStationSearchWindow.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/ui/StationSearchWindow/hooks/useStationSearchWindow.tsx b/frontend/src/components/ui/StationSearchWindow/hooks/useStationSearchWindow.tsx index 646bf4e15..fb5b523fa 100644 --- a/frontend/src/components/ui/StationSearchWindow/hooks/useStationSearchWindow.tsx +++ b/frontend/src/components/ui/StationSearchWindow/hooks/useStationSearchWindow.tsx @@ -38,7 +38,7 @@ export const useStationSearchWindow = () => { const { openLastPanel } = useNavigationBar(); const { openStationInfoWindow } = useStationInfoWindow(); - const { createNewMarkerInstance, renderMarkerInstances } = useRenderStationMarker(); + const { createNewMarkerInstance, renderDefaultMarkers } = useRenderStationMarker(); const screen = useMediaQueries(); @@ -87,11 +87,13 @@ export const useStationSearchWindow = () => { const markerInstance = createNewMarkerInstance(stationDetails); - setMarkerInstances((prev) => [...prev, { stationId, markerInstance }]); - renderMarkerInstances( - [{ stationId, markerInstance }], + setMarkerInstances((prev) => [...prev, { stationId, instance: markerInstance }]); + + renderDefaultMarkers( + [{ stationId, instance: markerInstance }], [convertStationDetailsToSummary(stationDetails)] ); + openStationInfoWindow(stationId, markerInstance); queryClient.setQueryData([QUERY_KEY_STATION_DETAILS, stationId], stationDetails); From 3b75ebec150dbc33ebcdf0e97b886b67b8f31cf0 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Fri, 6 Oct 2023 12:22:57 +0900 Subject: [PATCH 19/19] =?UTF-8?q?fix:=20=EB=B9=8C=EB=93=9C=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [#157] --- .../ui/StationInfoWindow/SummaryButtons.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/ui/StationInfoWindow/SummaryButtons.stories.tsx b/frontend/src/components/ui/StationInfoWindow/SummaryButtons.stories.tsx index cc2ed22ac..5751afaf6 100644 --- a/frontend/src/components/ui/StationInfoWindow/SummaryButtons.stories.tsx +++ b/frontend/src/components/ui/StationInfoWindow/SummaryButtons.stories.tsx @@ -8,7 +8,7 @@ const meta = { title: 'UI/StationInfoWindow/Buttons', component: SummaryButtons, args: { - handleCloseStationSummary: () => { + handleCloseStationWindow: () => { alert('충전소 간단 정보창이 닫혔습니다.'); }, handleOpenStationDetail: () => { @@ -16,7 +16,7 @@ const meta = { }, }, argTypes: { - handleCloseStationSummary: { + handleCloseStationWindow: { description: '충전소 간단 정보창을 닫을 수 있습니다.', }, handleOpenStationDetail: {