feat: 특정 줌 레벨까지 마커의 크기를 줄여서 보여주는 기능을 구현한다

frontend/src/components/google-maps/map/CarFfeineListener.tsx

@@ -2,30 +2,23 @@ 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';
 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';
 
 const CarFfeineMapListener = () => {
   const googleMap = useExternalValue(getGoogleMapStore());
   const queryClient = useQueryClient();
   const setIsProfileMenuOpen = useSetExternalState(profileMenuOpenStore);
-  const { removeAllMarkers } = useRenderStationMarker();
   const zoom = useExternalValue(zoomStore);
 
   const debouncedHighZoomHandler = debounce(() => {
@@ -47,6 +40,7 @@ const CarFfeineMapListener = () => {
       if (zoom.state === 'high') {
         debouncedHighZoomHandler();
       }
+
       zoomActions.setZoom(googleMap.getZoom());
     });
 
@@ -57,20 +51,6 @@ const CarFfeineMapListener = () => {
     });
   }, []);
 
-  /**
-   * zoom.state가 바뀌었을 때만 1번 실행된다.
-   */
-  useEffect(() => {
-    removeAllMarkers(markerInstanceStore.getState());
-    queryClient.setQueryData([QUERY_KEY_STATION_MARKERS], () => []);
-
-    if (zoom.state === 'middle') {
-      warningModalActions.openModal(<ZoomWarningModal />);
-    } else {
-      warningModalActions.closeModal();
-    }
-  }, [zoom.state]);
-
   return <></>;
 };
 

frontend/src/components/google-maps/marker/HighZoomMarkerContainer/HighZoomMarkerContainer.tsx

@@ -1,6 +1,13 @@
+import { useEffect } from 'react';
+
 import { useStationMarkers } from '@marker/HighZoomMarkerContainer/hooks/useStationMarkers';
 
+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';
 
@@ -10,10 +17,38 @@ const HighZoomMarkerContainer = () => {
     createNewMarkerInstances,
     getRemainedMarkerInstances,
     removeMarkersOutsideBounds,
-    renderMarkerInstances,
+    removeAllMarkers,
+    renderDefaultMarkers,
+    renderCarffeineMarkers,
   } = 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) {
+      renderMarkerByZoomState(zoomState, markerInstanceStore.getState());
+    }
+  }, [zoomState]);
+
+  useEffect(() => {
+    return () => {
+      // MarkerContainers 컴포넌트에서 HighZoomMarkerContainer 컴포넌트가 unmount될 때 모든 마커를 지워준다.
+      removeAllMarkers(markerInstanceStore.getState());
+    };
+  }, []);
 
-  if (!stationMarkers || !isSuccess) {
+  if (stationMarkers === undefined || !isSuccess) {
     return <></>;
   }
 
@@ -28,7 +63,7 @@ const HighZoomMarkerContainer = () => {
   );
 
   removeMarkersOutsideBounds(markerInstanceStore.getState(), stationMarkers);
-  renderMarkerInstances(newMarkerInstances, stationMarkers);
+  renderMarkerByZoomState(zoomState, newMarkerInstances);
 
   markerInstanceStore.setState([...remainedMarkerInstances, ...newMarkerInstances]);
 

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 (
-    <Marker
-      data-testid="carFfeineMarker"
-      data-marker-id={`marker-${station.stationId}`}
-      title={stationName}
-      state={state}
-    >
-      {availableCount}
-    </Marker>
+    <Container>
+      <Marker
+        data-testid="carFfeineMarker"
+        data-marker-id={`marker-${station.stationId}`}
+        title={stationName}
+        state={state}
+      >
+        {availableCount}
+      </Marker>
+    </Container>
   );
 };
 
+const Container = styled.div`
+  position: absolute;
+  left: -13.5px;
+  top: -35px;
+`;
+
 export default CarFfeineMarker;

frontend/src/components/google-maps/marker/HighZoomMarkerContainer/constants/index.ts

@@ -0,0 +1 @@
+export const DEFAULT_MARKER_SIZE_RATIO = 0.5;

frontend/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx

@@ -14,6 +14,8 @@ 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 = () => {
   const googleMap = getStoreSnapshot(getGoogleMapStore());
@@ -30,7 +32,7 @@ export const useRenderStationMarker = () => {
       title: stationName,
     });
 
-    bindMarkerClickHandler([{ stationId, markerInstance }]);
+    bindMarkerClickHandler([{ stationId, instance: markerInstance }]);
 
     return markerInstance;
   };
@@ -53,7 +55,7 @@ export const useRenderStationMarker = () => {
 
       return {
         stationId,
-        markerInstance,
+        instance: markerInstance,
       };
     });
 
@@ -66,19 +68,18 @@ 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) => {
-      marker.markerInstance.map = null;
+      marker.instance.map = null;
     });
   };
 
   const removeAllMarkers = (prevMarkerInstances: StationMarkerInstance[]) => {
     prevMarkerInstances.forEach((marker) => {
-      marker.markerInstance.map = null;
+      marker.instance.map = null;
     });
   };
 
@@ -91,11 +92,40 @@ export const useRenderStationMarker = () => {
     );
   };
 
-  const renderMarkerInstances = (
-    newMarkerInstances: StationMarkerInstance[],
+  const renderDefaultMarkers = (
+    markerInstances: StationMarkerInstance[],
     markers: StationMarker[] | StationSummary[]
   ) => {
-    newMarkerInstances.forEach(({ markerInstance, stationId }) => {
+    markers.forEach((marker) => {
+      const markerInstance = markerInstances.find(
+        (markerInstance) => markerInstance.stationId === marker.stationId
+      )?.instance;
+
+      if (markerInstance) {
+        const defaultMarkerDesign = new google.maps.marker.PinElement({
+          scale: DEFAULT_MARKER_SIZE_RATIO,
+          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: '',
+        });
+
+        markerInstance.map = googleMap;
+        markerInstance.content = defaultMarkerDesign.element;
+      }
+    });
+  };
+
+  const renderCarffeineMarkers = (
+    markerInstances: StationMarkerInstance[],
+    markers: StationMarker[] | StationSummary[]
+  ) => {
+    markerInstances.forEach(({ instance: markerInstance, stationId }) => {
       const container = document.createElement('div');
 
       markerInstance.content = container;
@@ -104,12 +134,13 @@ export const useRenderStationMarker = () => {
       const markerInformation = markers.find(
         (stationMarker) => stationMarker.stationId === stationId
       );
+
       createRoot(container).render(<CarFfeineMarker {...markerInformation} />);
     });
   };
 
   const bindMarkerClickHandler = (markerInstances: StationMarkerInstance[]) => {
-    markerInstances.forEach(({ markerInstance, stationId }) => {
+    markerInstances.forEach(({ instance: markerInstance, stationId }) => {
       markerInstance.addListener('click', () => {
         openStationInfoWindow(stationId, markerInstance);
 
@@ -125,7 +156,8 @@ export const useRenderStationMarker = () => {
     createNewMarkerInstances,
     removeMarkersOutsideBounds,
     getRemainedMarkerInstances,
-    renderMarkerInstances,
+    renderDefaultMarkers,
+    renderCarffeineMarkers,
     removeAllMarkers,
   };
 };

frontend/src/components/google-maps/marker/MarkersContainers.tsx

@@ -17,7 +17,9 @@ const MarkersContainers = () => {
 
   return (
     <>
-      {markerMode.state === 'high' && <MemoizedHighZoomMarkerContainer />}
+      {(markerMode.state === 'high' || markerMode.state === 'max') && (
+        <MemoizedHighZoomMarkerContainer />
+      )}
       {/* 이 아래는 앞으로 추가될 기능을 미리 대응하는 컴포넌트 */}
       {markerMode.state === 'middle' && <MemoizedMiddleZoomMarkerContainer />}
       {markerMode.state === 'low' && <MemoizedLowZoomMarkerContainer />}

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(<ZoomWarningModal />);
+
+    return () => {
+      warningModalActions.closeModal();
+    };
+  }, []);
   return <></>;
 };
 

frontend/src/components/ui/StationInfoWindow/SummaryButtons.stories.tsx

@@ -8,15 +8,15 @@ const meta = {
   title: 'UI/StationInfoWindow/Buttons',
   component: SummaryButtons,
   args: {
-    handleCloseStationSummary: () => {
+    handleCloseStationWindow: () => {
       alert('충전소 간단 정보창이 닫혔습니다.');
     },
     handleOpenStationDetail: () => {
       alert('충전소 상세 정보창이 열렸습니다.');
     },
   },
   argTypes: {
-    handleCloseStationSummary: {
+    handleCloseStationWindow: {
       description: '충전소 간단 정보창을 닫을 수 있습니다.',
     },
     handleOpenStationDetail: {

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

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;

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

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<StationMarkerInstance[]>([]);

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;

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