41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
"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");
|
||
}}
|
||
role="search"
|
||
aria-label="사이트 검색"
|
||
style={{ display: "flex", gap: 8, alignItems: "center" }}
|
||
>
|
||
<input
|
||
type="search"
|
||
name="q"
|
||
value={term}
|
||
onChange={(e) => setTerm(e.target.value)}
|
||
placeholder="검색어 입력"
|
||
enterKeyHint="search"
|
||
aria-label="검색어"
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Escape") setTerm("");
|
||
}}
|
||
style={{ padding: "6px 8px", border: "1px solid #ddd", borderRadius: 6, minWidth: 160 }}
|
||
/>
|
||
{term && (
|
||
<button type="button" aria-label="검색어 지우기" onClick={() => setTerm("")}>×</button>
|
||
)}
|
||
<button type="submit">검색</button>
|
||
</form>
|
||
);
|
||
}
|
||
|
||
|