feat: implement search function

components/boards/BoardList.tsx

@@ -1,4 +1,5 @@
 import { useState, useCallback, useEffect } from "react";
+import { useRouter } from "next/router";
 import Image from "next/image";
 import Board from "./Board";
 import Button from "../ui/Button";
@@ -13,24 +14,35 @@ import { ArticleProps } from "@/types/articleTypes";
 const BoardList = () => {
   const [boards, setBoards] = useState([]);
   const [order, setOrder] = useState("recent");
+  const router = useRouter();
+  const { keyword } = router.query;
+
   const BASE_URL = "https://panda-market-api.vercel.app/articles";
   const options: DropdownOptions = {
     recent: "최신순",
     like: "인기순",
   };
 
-  const handleLoad = useCallback(async () => {
-    const { list } = await fetchData(BASE_URL, {
-      query: {
-        orderBy: order,
-      },
-    });
-    setBoards(list);
-  }, [order]);
+  const handleLoad = useCallback(
+    async (keyword: string = "") => {
+      const { list } = await fetchData(BASE_URL, {
+        query: {
+          orderBy: order,
+          keyword,
+        },
+      });
+      setBoards(list);
+    },
+    [order]
+  );
 
   useEffect(() => {
-    handleLoad();
-  }, [handleLoad]);
+    if (typeof keyword === "string") {
+      handleLoad(keyword);
+    } else {
+      handleLoad();
+    }
+  }, [handleLoad, keyword]);
 
   return (
     <section className={styles.wrapper}>
@@ -39,7 +51,7 @@ const BoardList = () => {
         <Button className={styles.button}>글쓰기</Button>
       </div>
       <div className={styles.toolbar}>
-        <SearchBar />
+        <SearchBar initialValue={typeof keyword === "string" ? keyword : ""} />
         <Dropdown
           className={styles.dropdown}
           options={options}

components/ui/SearchBar.module.css

@@ -1,4 +1,4 @@
-.container {
+.form {
   position: relative;
   flex: 1;
 }

components/ui/SearchBar.tsx

@@ -1,18 +1,36 @@
+import { ChangeEvent, FormEvent, useState } from "react";
+import { useRouter } from "next/router";
 import Image from "next/image";
-import Container from "../layout/Container";
 import styles from "./SearchBar.module.css";
 import searchIcon from "@/public/ic_search.svg";
 
-const SearchBar = () => {
+const SearchBar = ({ initialValue = "" }: { initialValue: string }) => {
+  const [value, setValue] = useState(initialValue);
+  const router = useRouter();
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!value) {
+      router.push("/boards");
+      return;
+    }
+    router.push(`/boards?keyword=${value}`);
+  };
+
   return (
-    <Container className={styles.container}>
+    <form className={styles.form} onSubmit={handleSubmit}>
       <Image src={searchIcon} alt="검색" className={styles.image} />
       <input
         className={styles.input}
         type="text"
         placeholder="검색할 상품을 입력해주세요"
+        onChange={handleChange}
       />
-    </Container>
+    </form>
   );
 };