테두리 알약형 핵심 키워드 선택 칩

import { useState } from "react";

const FONT_URL = "https://fonts.googleapis.com/css2?family=Gothic+A1:wght@400;500;600;700;800&display=swap";

const KEYWORDS = ["RAG 검색", "속도 개선", "Q3 로드맵", "파트너십", "사용자 경험", "AI 정확도"];

export default function KeywordChips() {
  const [selected, setSelected] = useState<string[]>([]);

  const toggle = (k: string) => setSelected((s) => (s.includes(k) ? s.filter((x) => x !== k) : [...s, k]));

  return (
    <section className="w-full bg-white px-4 py-10 font-['Gothic_A1',sans-serif] sm:px-6">
      <link rel="stylesheet" href={FONT_URL} precedence="default" />
      <div className="mx-auto flex w-full max-w-[640px] flex-col gap-3">
        <h3 id="kw-title" className="text-[14px] font-bold uppercase leading-normal text-[#9ca3af]">
          핵심 키워드
        </h3>
        <ul className="flex flex-wrap gap-2" aria-labelledby="kw-title">
          {KEYWORDS.map((k) => {
            const on = selected.includes(k);
            return (
              <li key={k}>
                <button
                  type="button"
                  aria-pressed={on}
                  onClick={() => toggle(k)}
                  className={`rounded-full border px-3 py-1.5 text-[13px] font-medium leading-normal transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4361ee] ${
                    on ? "border-[#4361ee] bg-[rgba(67,97,238,0.06)] text-[#4361ee]" : "border-[#e0e0e0] bg-white text-[#6f767e] hover:border-[#c4c4c4] hover:text-[#1a1d1f]"
                  }`}
                >
                  {k}
                </button>
              </li>
            );
          })}
        </ul>
      </div>
    </section>
  );
}