60 lines
1.8 KiB
TypeScript
60 lines
1.8 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="사이트 검색"
|
|
className="relative w-full max-w-[384px]"
|
|
>
|
|
<button
|
|
type="submit"
|
|
aria-label="검색 실행"
|
|
className="absolute right-2 top-2 w-8 h-8 text-neutral-500 hover:text-neutral-800 cursor-pointer"
|
|
>
|
|
<svg
|
|
width="32"
|
|
height="32"
|
|
viewBox="0 0 32 32"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden
|
|
className="w-8 h-8"
|
|
>
|
|
<path
|
|
d="M21 21L17.682 17.682M17.682 17.682C18.4963 16.8676 19 15.7426 19 14.5C19 12.0147 16.9853 10 14.5 10C12.0147 10 10 12.0147 10 14.5C10 16.9853 12.0147 19 14.5 19C15.7426 19 16.8676 18.4963 17.682 17.682ZM28 16C28 22.6274 22.6274 28 16 28C9.37258 28 4 22.6274 4 16C4 9.37258 9.37258 4 16 4C22.6274 4 28 9.37258 28 16Z"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<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("");
|
|
}}
|
|
className="w-full h-12 pr-12 pl-2 rounded-2xl border border-neutral-300 bg-white"
|
|
/>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
|