From 153ee0c85ea46e1dea4e23c866acb6272f9d45ef Mon Sep 17 00:00:00 2001
From: Leejin-Yang <ejin1996@gmail.com>
Date: Wed, 20 Sep 2023 01:28:35 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EA=B2=80=EC=83=89=20=EC=A4=91=EB=B3=B5?=
 =?UTF-8?q?=20=EC=9A=94=EC=B2=AD=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/search/useSearch.ts      | 13 +++++--------
 frontend/src/pages/IntegratedSearchPage.tsx |  6 +++---
 frontend/src/pages/SearchPage.tsx           |  6 +++---
 3 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/frontend/src/hooks/search/useSearch.ts b/frontend/src/hooks/search/useSearch.ts
index 67dc6a281..5405ecfc3 100644
--- 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,12 +12,8 @@ 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();
     }
   };
@@ -25,6 +21,7 @@ const useSearch = () => {
   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
index 285fc5c2e..09fa36377 100644
--- 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
index f63232dba..8a242f116 100644
--- a/frontend/src/pages/SearchPage.tsx
+++ b/frontend/src/pages/SearchPage.tsx
@@ -97,7 +97,7 @@ const SearchPage = () => {
         )}
       </SearchSection>
       <SearchResultSection>
-        {isSubmitted && debouncedSearchQuery ? (
+        {isSubmitted && searchQuery ? (
           <>
             <Heading as="h2" size="lg" weight="regular">
               <Mark>&apos;{searchQuery}&apos;</Mark>에 대한 검색결과입니다.
@@ -105,8 +105,8 @@ const SearchPage = () => {
             <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>
           </>