6.4 검색 바 및 결과 페이지 라우팅 o

src/app/components/SearchBar.tsx

@@ -0,0 +1,28 @@
+"use client";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function SearchBar() {
+  const router = useRouter();
+  const [term, setTerm] = useState("");
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        const q = term.trim();
+        router.push(q ? `/search?q=${encodeURIComponent(q)}` : "/search");
+      }}
+      style={{ display: "flex", gap: 8, alignItems: "center" }}
+    >
+      <input
+        value={term}
+        onChange={(e) => setTerm(e.target.value)}
+        placeholder="검색어 입력"
+        style={{ padding: "6px 8px", border: "1px solid #ddd", borderRadius: 6 }}
+      />
+      <button type="submit">검색</button>
+    </form>
+  );
+}
+
+