msgapp/src/app/components/SearchBar.tsx

"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>
  );
}