refactor: 검색 기능을 최적화한다

frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx

@@ -1,10 +1,5 @@
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 
-import { useState } from 'react';
-
-import { useSearchStations } from '@hooks/tanstack-query/useSearchStations';
-import { useDebounce } from '@hooks/useDebounce';
-
 import FlexBox from '@common/FlexBox';
 import Loader from '@common/Loader';
 
@@ -20,31 +15,19 @@ const StationSearchBar = () => {
     handleCloseResult,
     showStationDetails,
     isFocused,
-    searchWord,
-  } = useStationSearchWindow();
-  const [debouncedSearchWord, setDebouncedSearchWord] = useState(searchWord);
-
-  useDebounce(
-    () => {
-      setDebouncedSearchWord(searchWord);
-    },
-    [searchWord],
-    400
-  );
-
-  const {
-    data: searchResult,
+    searchResult,
     isLoading,
     isError,
     isFetching,
-  } = useSearchStations(debouncedSearchWord);
+  } = useStationSearchWindow();
 
   return (
     <StyledContainer>
       <StyledForm role="search" onSubmit={handleSubmitSearchWord}>
         <label htmlFor="station-search-bar" aria-hidden>
           <StyledSearch
             id="station-search-bar"
+            name="station-search"
             type="search"
             role="searchbox"
             placeholder="충전소명 또는 지역명을 입력해 주세요"

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

@@ -11,7 +11,9 @@ import { googleMapActions } from '@stores/google-maps/googleMapStore';
 import { markerInstanceStore } from '@stores/google-maps/markerInstanceStore';
 
 import { useStationInfoWindow } from '@hooks/google-maps/useStationInfoWindow';
-import { fetchSearchedStations } from '@hooks/tanstack-query/useSearchStations';
+import type { SearchedStationResponse } from '@hooks/tanstack-query/useSearchStations';
+import { fetchSearchedStations, useSearchStations } from '@hooks/tanstack-query/useSearchStations';
+import { useDebounce } from '@hooks/useDebounce';
 import useMediaQueries from '@hooks/useMediaQueries';
 
 import { useNavigationBar } from '@ui/Navigator/NavigationBar/hooks/useNavigationBar';
@@ -24,54 +26,61 @@ import type { StationDetails, StationPosition } from '@type';
 import StationDetailsWindow from '../../StationDetailsWindow/index';
 
 export const useStationSearchWindow = () => {
-  const queryClient = useQueryClient();
+  const screen = useMediaQueries();
 
   const [isFocused, setIsFocused] = useState(false);
-  const [searchWord, setSearchWord] = useState('');
 
-  const { renderDefaultMarker } = useMarker();
+  const queryClient = useQueryClient();
+
+  const [searchWord, setSearchWord] = useState('');
+  const [debouncedSearchWord, setDebouncedSearchWord] = useState(searchWord);
+  const [userSearchWord, setUserSearchWord] = useState('');
 
   const { openLastPanel } = useNavigationBar();
   const { openStationInfoWindow } = useStationInfoWindow();
+  const { renderDefaultMarker } = useMarker();
 
-  const screen = useMediaQueries();
+  useDebounce(
+    () => {
+      setDebouncedSearchWord(searchWord);
+    },
+    [searchWord],
+    400
+  );
+
+  const {
+    data: searchResult,
+    isLoading,
+    isError,
+    isFetching,
+  } = useSearchStations(debouncedSearchWord);
+
+  const handleOpenResult = (
+    event?: MouseEvent<HTMLInputElement> | FocusEvent<HTMLInputElement>
+  ) => {
+    if (event !== undefined) {
+      event.stopPropagation();
+    }
 
-  const handleOpenResult = (event: MouseEvent<HTMLInputElement> | FocusEvent<HTMLInputElement>) => {
-    event.stopPropagation();
     setIsFocused(true);
   };
 
   const handleCloseResult = () => {
     setIsFocused(false);
   };
 
-  const handleSubmitSearchWord = async (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    handleCloseResult();
-
-    const searchedStations = await fetchSearchedStations(searchWord);
-
-    if (searchedStations !== undefined && searchedStations.stations.length > 0) {
-      const [{ stationId, latitude, longitude }] = searchedStations.stations;
-      showStationDetails({ stationId, latitude, longitude });
-    }
-
-    queryClient.invalidateQueries({ queryKey: [QUERY_KEY_SEARCHED_STATION] });
-  };
-
   const showStationDetails = async ({ stationId, latitude, longitude }: StationPosition) => {
     googleMapActions.moveTo({ lat: latitude, lng: longitude });
 
     if (!screen.get('isMobile')) {
       openLastPanel(<StationDetailsWindow stationId={stationId} />);
     }
 
-    // 지금 보여지는 화면에 검색한 충전소가 존재할 경우의 처리
-    if (
-      markerInstanceStore
-        .getState()
-        .some(({ id: cachedStationId }) => cachedStationId === stationId)
-    ) {
+    const isStationInDisplayPosition = markerInstanceStore
+      .getState()
+      .some(({ id: cachedStationId }) => cachedStationId === stationId);
+
+    if (isStationInDisplayPosition) {
       openStationInfoWindow(stationId);
     } else {
       const stationDetails = await fetch(
@@ -97,10 +106,46 @@ export const useStationSearchWindow = () => {
     }
   };
 
+  const showStationDetailsIfFound = (searchedStations: SearchedStationResponse) => {
+    const isSearchedStationExisting = searchedStations?.stations.length > 0;
+
+    if (isSearchedStationExisting) {
+      const [{ stationId, latitude, longitude }] = searchedStations.stations;
+      showStationDetails({ stationId, latitude, longitude });
+      handleCloseResult();
+
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY_SEARCHED_STATION] });
+    }
+  };
+
+  const handleSubmitSearchWord = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    handleCloseResult();
+
+    const searchWordFromForm = new FormData(event.currentTarget).get('station-search');
+    const encodedSearchWord = encodeURIComponent(String(searchWordFromForm));
+    const isSameAsPreviousSearchWord = encodedSearchWord === userSearchWord;
+
+    if (isSameAsPreviousSearchWord) {
+      return;
+    }
+
+    setUserSearchWord(encodedSearchWord);
+
+    if (searchWord === debouncedSearchWord) {
+      showStationDetailsIfFound(searchResult);
+
+      return;
+    }
+
+    const searchedStations = await fetchSearchedStations(encodedSearchWord);
+    showStationDetailsIfFound(searchedStations);
+  };
+
   const handleChangeSearchWord = ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
     const searchWord = encodeURIComponent(value);
 
-    setIsFocused(true);
+    handleOpenResult();
     setSearchWord(searchWord);
   };
 
@@ -111,6 +156,10 @@ export const useStationSearchWindow = () => {
     handleCloseResult,
     showStationDetails,
     isFocused,
-    searchWord,
+    debouncedSearchWord,
+    searchResult,
+    isLoading,
+    isError,
+    isFetching,
   };
 };

frontend/src/hooks/tanstack-query/useSearchStations.ts

@@ -7,7 +7,7 @@ import { SEARCH_SCOPE } from '@constants/stationSearch';
 
 import type { SearchedCity, SearchedStation } from '@type/stations';
 
-interface SearchedStationResponse {
+export interface SearchedStationResponse {
   stations: SearchedStation[];
   cities: SearchedCity[];
 }

frontend/src/hooks/useDebounce.ts

@@ -1,11 +1,11 @@
 import { useEffect, useCallback } from 'react';
 
 export const useDebounce = <T>(func: (param: T) => void, dependencies: string[], delay: number) => {
-  const callback = useCallback(func, dependencies);
+  const callback = useCallback(func, [delay]);
 
   useEffect(() => {
     const timeout = setTimeout(callback, delay);
 
     return () => clearTimeout(timeout);
-  }, [callback, delay]);
+  }, [callback, dependencies]);
 };