fix: SearchBar 오류 해결

src/components/layouts/SearchBar/index.tsx

@@ -29,11 +29,11 @@ const SearchBar = ({ includeBack = true, includeFavorite = false, goBack }: Sear
   const initialSearchWord = searchParams.get('query') || '';
   const { setIsModalOpen } = useSearchModalStore();
 
-  const { register, handleSubmit, setValue, watch } = useForm<FormValues>({
-    mode: 'onChange',
+  const { register, handleSubmit, watch, setValue } = useForm<{ searchWord: string }>({
     defaultValues: {
       searchWord: initialSearchWord,
     },
+    mode: 'onSubmit',
   });
 
   useEffect(() => {
@@ -42,6 +42,11 @@ const SearchBar = ({ includeBack = true, includeFavorite = false, goBack }: Sear
     }
   }, [location.pathname]);
 
+  useEffect(() => {
+    const query = searchParams.get('query') || '';
+    setValue('searchWord', query);
+  }, [searchParams]);
+
   const searchWord = watch('searchWord');
 
   const generateRandomKey = () => Math.random().toString(36).substr(2, 9);
@@ -79,13 +84,11 @@ const SearchBar = ({ includeBack = true, includeFavorite = false, goBack }: Sear
       }
 
       localStorage.setItem(SEARCH_ARRAY_KEY, JSON.stringify(searchArray));
-      setSearchParams({ query: searchWord });
+      setSearchParams({ query: currentSearchWord });
       navigate(`/${RouterPath.results}?query=${currentSearchWord}`);
     }
   };
 
-  const nowSearchWord = watch('searchWord');
-
   return (
     <SearchBarWrapper>
       {includeBack && <IconButton icon="arrow-back" onClick={handleClickBack} />}
@@ -97,7 +100,7 @@ const SearchBar = ({ includeBack = true, includeFavorite = false, goBack }: Sear
           {...register('searchWord')}
           onClick={() => setIsModalOpen(true)}
         />
-        {nowSearchWord?.trim().length > 0 && <CancelIconButton onClick={handleRemoveSearchWord} />}
+        {searchWord?.trim().length > 0 && <CancelIconButton onClick={handleRemoveSearchWord} />}
       </InputBox>
       {includeFavorite && <IconButton icon="favorite-default" />}
     </SearchBarWrapper>