fix: SearchBox가 연동 안되는 문제

wafflestudio · Apr 6, 2024 · f8dfaab · f8dfaab
1 parent 7041469
commit f8dfaab
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 11 deletions.
diff --git a/app/[locale]/search/page.tsx b/app/[locale]/search/page.tsx
@@ -71,22 +71,14 @@ export default async function SearchPage({
 
 // TODO: page layout 사용한 방식으로 변경
 // 현재는 SubNav의 차이 때문에 코드 복붙
-const SearchPageLayout = ({
-  keyword,
-  node,
-  children,
-}: {
-  keyword?: string;
-  node?: TreeNode[];
-  children?: ReactNode;
-}) => {
+const SearchPageLayout = ({ node, children }: { node?: TreeNode[]; children?: ReactNode }) => {
   return (
     <div className="flex grow flex-col bg-neutral-900">
       <Header />
       {/* TODO: 임시로 넣은 main 교체 */}
       <PageTitle title={'통합 검색'} currentPage={main} titleType={'big'} margin={'mb-11'} />
       <div className="relative grow bg-white p-[1.75rem_1.25rem_4rem_1.25rem] sm:p-[2.75rem_360px_150px_100px]">
-        <SearchBox tags={SEARCH_TAGS} key={keyword} formOnly />
+        <SearchBox tags={SEARCH_TAGS} formOnly />
         {children}
         {node !== undefined && <SearchSubNavbar node={node} />}
       </div>

diff --git a/components/common/search/SearchBox.tsx b/components/common/search/SearchBox.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useTransition } from 'react';
+import { useEffect, useState, useTransition } from 'react';
 
 import { StraightNode } from '@/components/common/Nodes';
 
@@ -20,6 +20,10 @@ export default function SearchBox({ tags, disabled = false, formOnly = false }:
   const [keyword, setKeyword] = useState(initKeyword ?? '');
   const [, startTransition] = useTransition();
 
+  useEffect(() => {
+    setKeyword(initKeyword ?? '');
+  }, [initKeyword]);
+
   const search = (tags?: string[]) => {
     // TODO: startTrnaisition이 의미있는지 확인
     startTransition(() => {