refactor: 검색 기능 최적화

[#927]
woowacourse-teams · Nov 14, 2023 · 4a52531 · 4a52531
1 parent ce2f3b1
commit 4a52531
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 32 deletions.
diff --git a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
@@ -1,9 +1,6 @@
 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,17 +17,8 @@ const StationSearchBar = () => {
     handleCloseResult,
     showStationDetails,
     isFocused,
-    searchWord,
+    debouncedSearchWord,
   } = useStationSearchWindow();
-  const [debouncedSearchWord, setDebouncedSearchWord] = useState(searchWord);
-
-  useDebounce(
-    () => {
-      setDebouncedSearchWord(searchWord);
-    },
-    [searchWord],
-    400
-  );
 
   const {
     data: searchResult,
@@ -45,6 +33,7 @@ const StationSearchBar = () => {
         <label htmlFor="station-search-bar" aria-hidden>
           <StyledSearch
             id="station-search-bar"
+            name="station-search"
             type="search"
             role="searchbox"
             placeholder="충전소명 또는 지역명을 입력해 주세요"

diff --git a/frontend/src/components/ui/StationSearchWindow/hooks/useStationSearchWindow.tsx b/frontend/src/components/ui/StationSearchWindow/hooks/useStationSearchWindow.tsx
@@ -12,6 +12,7 @@ import { markerInstanceStore } from '@stores/google-maps/markerInstanceStore';
 
 import { useStationInfoWindow } from '@hooks/google-maps/useStationInfoWindow';
 import { fetchSearchedStations } 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 +25,78 @@ 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 { openLastPanel } = useNavigationBar();
-  const { openStationInfoWindow } = useStationInfoWindow();
-
-  const screen = useMediaQueries();
+  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 queryClient = useQueryClient();
+
+  const [searchWord, setSearchWord] = useState('');
+  const [debouncedSearchWord, setDebouncedSearchWord] = useState(searchWord);
+
+  useDebounce(
+    () => {
+      setDebouncedSearchWord(searchWord);
+    },
+    [searchWord],
+    400
+  );
+
   const handleSubmitSearchWord = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
+
+    const searchWordFromForm = new FormData(event.currentTarget).get('station-search');
+
+    if (encodeURIComponent(String(searchWordFromForm)) === searchWord) {
+      handleOpenResult();
+
+      return;
+    }
+
     handleCloseResult();
 
     const searchedStations = await fetchSearchedStations(searchWord);
+    const isSearchedStationExisting =
+      searchedStations !== undefined && searchedStations.stations.length > 0;
 
-    if (searchedStations !== undefined && searchedStations.stations.length > 0) {
+    if (isSearchedStationExisting) {
       const [{ stationId, latitude, longitude }] = searchedStations.stations;
       showStationDetails({ stationId, latitude, longitude });
     }
 
     queryClient.invalidateQueries({ queryKey: [QUERY_KEY_SEARCHED_STATION] });
   };
 
+  const { openLastPanel } = useNavigationBar();
+  const { openStationInfoWindow } = useStationInfoWindow();
+  const { renderDefaultMarker } = useMarker();
+
   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(
@@ -100,7 +125,7 @@ export const useStationSearchWindow = () => {
   const handleChangeSearchWord = ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
     const searchWord = encodeURIComponent(value);
 
-    setIsFocused(true);
+    handleOpenResult();
     setSearchWord(searchWord);
   };
 
@@ -111,6 +136,6 @@ export const useStationSearchWindow = () => {
     handleCloseResult,
     showStationDetails,
     isFocused,
-    searchWord,
+    debouncedSearchWord,
   };
 };