[FE] fix: 검색 결과 두 번 요청 수정 (#676)

woowacourse-teams · Sep 20, 2023 · 5c52727 · 5c52727
1 parent 49d74ec
commit 5c52727
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 14 deletions.
diff --git a/frontend/src/hooks/search/useSearch.ts b/frontend/src/hooks/search/useSearch.ts
@@ -1,5 +1,5 @@
-import type { ChangeEventHandler, FormEventHandler, MouseEventHandler, RefObject } from 'react';
-import { useEffect, useRef, useState } from 'react';
+import type { ChangeEventHandler, FormEventHandler, MouseEventHandler } from 'react';
+import { useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 const useSearch = () => {
@@ -12,19 +12,16 @@ const useSearch = () => {
   const [isSubmitted, setIsSubmitted] = useState(!!currentSearchQuery);
   const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(searchQuery.length > 0);
 
-  useEffect(() => {
-    setIsAutocompleteOpen(searchQuery.length > 0);
-  }, [searchQuery]);
-
   const focusInput = () => {
-    if (inputRef?.current) {
+    if (inputRef.current) {
       inputRef.current.focus();
     }
   };
 
   const handleSearchQuery: ChangeEventHandler<HTMLInputElement> = (event) => {
     setIsSubmitted(false);
     setSearchQuery(event.currentTarget.value);
+    setIsAutocompleteOpen(event.currentTarget.value.length > 0);
   };
 
   const handleSearch: FormEventHandler<HTMLFormElement> = (event) => {
@@ -35,7 +32,7 @@ const useSearch = () => {
     if (!trimmedSearchQuery) {
       alert('검색어를 입력해주세요');
       focusInput();
-      setSearchQuery('');
+      resetSearchQuery();
       return;
     }
 

diff --git a/frontend/src/pages/IntegratedSearchPage.tsx b/frontend/src/pages/IntegratedSearchPage.tsx
@@ -79,7 +79,7 @@ const IntegratedSearchPage = () => {
         handleTabMenuSelect={handleTabMenuClick}
       />
       <SearchResultSection>
-        {isSubmitted && debouncedSearchQuery ? (
+        {isSubmitted && searchQuery ? (
           <>
             <Heading as="h2" size="lg" weight="regular">
               <Mark>&apos;{searchQuery}&apos;</Mark>에 대한 검색결과입니다.
@@ -88,9 +88,9 @@ const IntegratedSearchPage = () => {
               <Suspense fallback={<Loading />}>
                 <Spacing size={20} />
                 {isProductSearchTab ? (
-                  <ProductSearchResultList searchQuery={debouncedSearchQuery} />
+                  <ProductSearchResultList searchQuery={searchQuery} />
                 ) : (
-                  <RecipeSearchResultList searchQuery={debouncedSearchQuery} />
+                  <RecipeSearchResultList searchQuery={searchQuery} />
                 )}
               </Suspense>
             </ErrorBoundary>

diff --git a/frontend/src/pages/SearchPage.tsx b/frontend/src/pages/SearchPage.tsx
@@ -97,16 +97,16 @@ const SearchPage = () => {
         )}
       </SearchSection>
       <SearchResultSection>
-        {isSubmitted && debouncedSearchQuery ? (
+        {isSubmitted && searchQuery ? (
           <>
             <Heading as="h2" size="lg" weight="regular">
               <Mark>&apos;{searchQuery}&apos;</Mark>에 대한 검색결과입니다.
             </Heading>
             <ErrorBoundary fallback={ErrorComponent}>
               <Suspense fallback={<Loading />}>
                 <Spacing size={20} />
-                {isProductSearchPage && <ProductSearchResultList searchQuery={debouncedSearchQuery} />}
-                {isRecipeSearchPage && <RecipeSearchResultList searchQuery={debouncedSearchQuery} />}
+                {isProductSearchPage && <ProductSearchResultList searchQuery={searchQuery} />}
+                {isRecipeSearchPage && <RecipeSearchResultList searchQuery={searchQuery} />}
               </Suspense>
             </ErrorBoundary>
           </>