refactor: 충전소 검색 시, 마커의 숫자가 비어있는 현상을 수정한다 (#796)

* fix: 검색을 통해 새로운 지역의 마커 렌더링을 시도하는 경우 사용가능한 충전기 갯수가 나오지 않는 문제를 수정 [#779] * fix: 잘못된 파일 수정 복원 [#779]
woowacourse-teams · Sep 22, 2023 · 8f6c148 · 8f6c148
1 parent 64ccb14
commit 8f6c148
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 14 deletions.
diff --git a/frontend/src/components/ui/CarFfeineMarker/CarFfeineMarker.tsx b/frontend/src/components/ui/CarFfeineMarker/CarFfeineMarker.tsx
@@ -21,7 +21,12 @@ export const CarFfeineMarker = (station: StationMarker) => {
   const state: StationAvailability = availableCount === 0 ? 'noAvailable' : 'available';
 
   return (
-    <Marker data-testid="carFfeineMarker" title={stationName} state={state}>
+    <Marker
+      data-testid="carFfeineMarker"
+      data-marker-id={`marker-${station.stationId}`}
+      title={stationName}
+      state={state}
+    >
       {availableCount}
     </Marker>
   );

diff --git a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
@@ -10,10 +10,10 @@ import { useRenderStationMarker } from '@marker/hooks/useRenderStationMarker';
 
 import { useSetExternalState } from '@utils/external-state';
 
+import { serverUrlStore } from '@stores/config/serverUrlStore';
 import { googleMapActions } from '@stores/google-maps/googleMapStore';
 import { markerInstanceStore } from '@stores/google-maps/markerInstanceStore';
 
-import { fetchStationSummaries } from '@hooks/fetch/fetchStationSummaries';
 import { useStationSummary } from '@hooks/google-maps/useStationSummary';
 import {
   fetchSearchedStations,
@@ -33,7 +33,7 @@ import { pillStyle } from '@style';
 import { MOBILE_BREAKPOINT } from '@constants';
 import { QUERY_KEY_SEARCHED_STATION, QUERY_KEY_STATION_MARKERS } from '@constants/queryKeys';
 
-import type { StationPosition } from '@type/stations';
+import type { StationMarker, StationPosition } from '@type/stations';
 
 import SearchResult from './SearchResult';
 
@@ -87,7 +87,7 @@ const StationSearchBar = () => {
     queryClient.invalidateQueries({ queryKey: [QUERY_KEY_SEARCHED_STATION] });
   };
 
-  const showStationDetails = ({ stationId, latitude, longitude }: StationPosition) => {
+  const showStationDetails = async ({ stationId, latitude, longitude }: StationPosition) => {
     googleMapActions.moveTo({ lat: latitude, lng: longitude });
     queryClient.invalidateQueries({ queryKey: [QUERY_KEY_STATION_MARKERS] });
 
@@ -102,19 +102,42 @@ const StationSearchBar = () => {
         .some(({ stationId: cachedStationId }) => cachedStationId === stationId)
     ) {
       openStationSummary(stationId);
-      return;
+    } else {
+      // 지금 보여지는 화면에 검색한 충전소가 존재하지 않을 경우의 처리 (api가 새로 필요할듯 합니다. 일단 급한 버그 잡기를 위해 마구잡이로 이렇게 구현해버립니다.
+      const serverUrl = serverUrlStore.getState();
+      const stationMarkers = await fetch(
+        `${serverUrl}/stations?longitude=${longitude}&latitude=${latitude}&longitudeDelta=0.000000000000000001&latitudeDelta=0.000000000000000001&zoom=16`
+      ).then<StationMarker[]>(async (response) => {
+        const data = await response.json();
+
+        return data.stations;
+      });
+      const stationMarker = stationMarkers.find((station) => station.stationId === stationId);
+      if (stationMarker !== undefined) {
+        const markerInstance = createNewMarkerInstance({
+          address: '',
+          companyName: '',
+          detailLocation: '',
+          operatingTime: '',
+          totalCount: 0,
+          ...stationMarker,
+        });
+        setMarkerInstances((prev) => [...prev, { stationId, markerInstance }]);
+        renderMarkerInstances([{ stationId, markerInstance }], [stationMarker]);
+        openStationSummary(stationId, markerInstance);
+      }
     }
 
     // 지금 보여지는 화면에 충전소가 존재하지 않으면 따로 하나의 충전소만 요청을 발생시켜 마커를 생성
     // 마커가 없어서 infoWindow를 렌더링 하지 못하는 문제 해결
-    fetchStationSummaries([stationId]).then((stationSummaries) => {
-      const stationSummary = stationSummaries[0];
-      const markerInstance = createNewMarkerInstance(stationSummary);
-
-      setMarkerInstances((prev) => [...prev, { stationId, markerInstance }]);
-      renderMarkerInstances([{ stationId, markerInstance }], [stationSummary]);
-      openStationSummary(stationId, markerInstance);
-    });
+    // fetchStationSummaries([stationId]).then((stationSummaries) => {
+    //   const stationSummary = stationSummaries[0];
+    //   const markerInstance = createNewMarkerInstance(stationSummary);
+    //
+    //   setMarkerInstances((prev) => [...prev, { stationId, markerInstance }]);
+    //   renderMarkerInstances([{ stationId, markerInstance }], [stationSummary]);
+    //   openStationSummary(stationId, markerInstance);
+    // });
   };
 
   const handleChangeSearchWord = ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {

diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -3,7 +3,7 @@ import { router } from 'router';
 import { createRoot } from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
 
-import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 import { mswModeActions } from '@stores/config/mswModeStore';