refactor: 검색 결과 마커 생성 방식 수정

- 검색 결과로 화면에 존재하지 않는 마커를 생성할 때의 과정 수정
- 마커가 렌더링 될 때 마커 인스턴스 전역 상태에 지금 렌더링 하려는 마커가 포함되어 있다면 재생성을 하지 않는 로직 추가

[#914]

frontend/src/components/google-maps/marker/SmallMediumDeltaAreaMarkerContainer/components/marker/DefaultMarkerRenderer.tsx

@@ -2,20 +2,24 @@ import { useLayoutEffect } from 'react';
 
 import { useMarker } from '@marker/hooks/useRenderMarker';
 
+import { markerInstanceStore } from '@stores/google-maps/markerInstanceStore';
+
 import type { StationMarker } from '@type';
 
 interface Props {
   station: StationMarker;
 }
 
-// TODO: 여기다가 옵셔널로 infoWindow 열리고 닫히는 속성 넣어서 한번 컨트롤 해보기
 const DefaultMarkerRenderer = ({ station }: Props) => {
   const { renderDefaultMarker } = useMarker();
 
   useLayoutEffect(() => {
-    const unMount = renderDefaultMarker(station);
+    // 검색 결과로 강제 생성한 마커에 대해선 새로운 마커 생성을 시도하지 않도록 한다.
+    if (markerInstanceStore.getState().every(({ id }) => id !== station.stationId)) {
+      const unMount = renderDefaultMarker(station);
 
-    return unMount;
+      return unMount;
+    }
   }, []);
 
   return <></>;

frontend/src/components/ui/StationSearchWindow/hooks/useStationSearchWindow.tsx

@@ -1,11 +1,11 @@
+import { getChargerCountsAndAvailability } from '@tools/getChargerCountsAndAvailability';
+
 import type { ChangeEvent, FocusEvent, FormEvent, MouseEvent } from 'react';
 import { useState } from 'react';
 
 import { useQueryClient } from '@tanstack/react-query';
 
-import { useRenderStationMarker } from '@marker/SmallMediumDeltaAreaMarkerContainer/hooks/useRenderStationMarker';
-
-import { useSetExternalState } from '@utils/external-state';
+import { useMarker } from '@marker/hooks/useRenderMarker';
 
 import { googleMapActions } from '@stores/google-maps/googleMapStore';
 import { markerInstanceStore } from '@stores/google-maps/markerInstanceStore';
@@ -16,29 +16,23 @@ import useMediaQueries from '@hooks/useMediaQueries';
 
 import { useNavigationBar } from '@ui/Navigator/NavigationBar/hooks/useNavigationBar';
 
-import {
-  QUERY_KEY_SEARCHED_STATION,
-  QUERY_KEY_STATION_DETAILS,
-  QUERY_KEY_STATION_MARKERS,
-} from '@constants/queryKeys';
+import { QUERY_KEY_SEARCHED_STATION } from '@constants/queryKeys';
 import { SERVER_URL } from '@constants/server';
 
 import type { StationDetails, StationPosition } from '@type';
 
 import StationDetailsWindow from '../../StationDetailsWindow/index';
-import { convertStationDetailsToSummary } from '../tools/convertStationDetailsToSummary';
 
 export const useStationSearchWindow = () => {
   const queryClient = useQueryClient();
 
   const [isFocused, setIsFocused] = useState(false);
   const [searchWord, setSearchWord] = useState('');
 
-  const setMarkerInstances = useSetExternalState(markerInstanceStore);
+  const { renderDefaultMarker } = useMarker();
 
   const { openLastPanel } = useNavigationBar();
   const { openStationInfoWindow } = useStationInfoWindow();
-  const { createNewMarkerInstance, renderDefaultMarkers } = useRenderStationMarker();
 
   const screen = useMediaQueries();
 
@@ -67,7 +61,6 @@ export const useStationSearchWindow = () => {
 
   const showStationDetails = async ({ stationId, latitude, longitude }: StationPosition) => {
     googleMapActions.moveTo({ lat: latitude, lng: longitude });
-    queryClient.invalidateQueries({ queryKey: [QUERY_KEY_STATION_MARKERS] });
 
     if (!screen.get('isMobile')) {
       openLastPanel(<StationDetailsWindow stationId={stationId} />);
@@ -84,19 +77,22 @@ export const useStationSearchWindow = () => {
       const stationDetails = await fetch(
         `${SERVER_URL}/stations/${stationId}`
       ).then<StationDetails>((response) => response.json());
+      const { availableQuickChargerCount, availableStandardChargerCount, quickChargerCount } =
+        getChargerCountsAndAvailability(stationDetails.chargers);
+      const { stationName, latitude, longitude, isParkingFree, isPrivate } = stationDetails;
+
+      renderDefaultMarker({
+        stationId,
+        stationName,
+        latitude,
+        longitude,
+        isParkingFree,
+        isPrivate,
+        availableCount: availableQuickChargerCount + availableStandardChargerCount,
+        quickChargerCount,
+      });
 
-      const markerInstance = createNewMarkerInstance(stationDetails);
-
-      setMarkerInstances((prev) => [...prev, { id: stationId, instance: markerInstance }]);
-
-      renderDefaultMarkers(
-        [{ id: stationId, instance: markerInstance }],
-        [convertStationDetailsToSummary(stationDetails)]
-      );
-
-      openStationInfoWindow(stationId, markerInstance);
-
-      queryClient.setQueryData([QUERY_KEY_STATION_DETAILS, stationId], stationDetails);
+      openStationInfoWindow(stationId);
     }
   };
 

frontend/src/mocks/handlers/station-markers/stationMarkerHandlers.ts

@@ -101,7 +101,7 @@ export const stationMarkerHandlers = [
     console.log('찾은 충전소 갯수: ' + foundStations.length);
 
     return res(
-      // ctx.delay(1000),
+      ctx.delay(1000),
       ctx.status(200),
       ctx.json({
         stations: foundStations,