데스크톱/모바일 미리보기 전환과 노트 복사가 있는 스니펫 쇼케이스

import { useState } from "react";

const NOTE = `카드 3장짜리 요금제 섹션.
가운데 Pro 카드를 살짝 띄우고 보라 테두리로 강조.
가격은 큰 숫자, 아래에 기능 3줄과 체크 아이콘.`;

export default function SnippetShowcase() {
  const [view, setView] = useState<"desktop" | "mobile">("desktop");
  const [version, setVersion] = useState(2);
  const [copied, setCopied] = useState(false);

  return (
    <section className="w-full bg-[#09090b] px-4 py-14 text-zinc-100 sm:px-8">
      <div className="mx-auto grid max-w-6xl gap-6 lg:grid-cols-[minmax(0,1fr)_340px]">
        <div className="overflow-hidden rounded-2xl border border-zinc-800 bg-zinc-900 shadow-2xl shadow-black/40">
          <div className="flex h-11 items-center gap-3 border-b border-zinc-800 px-4">
            <span aria-hidden className="flex gap-1.5">
              <span className="h-2.5 w-2.5 rounded-full bg-white/10" />
              <span className="h-2.5 w-2.5 rounded-full bg-white/10" />
              <span className="h-2.5 w-2.5 rounded-full bg-white/10" />
            </span>
            <div className="min-w-0 flex-1 truncate text-center text-xs text-zinc-500">pricing.html · v{version}</div>
            <div role="group" aria-label="미리보기 크기" className="flex rounded-md border border-zinc-700 p-0.5 text-[11px]">
              {(["desktop", "mobile"] as const).map((v) => (
                <button
                  key={v}
                  type="button"
                  aria-pressed={view === v}
                  onClick={() => setView(v)}
                  className={`rounded px-2 py-0.5 ${view === v ? "bg-zinc-700 text-zinc-100" : "text-zinc-500 hover:text-zinc-300"}`}
                >
                  {v === "desktop" ? "데스크톱" : "모바일"}
                </button>
              ))}
            </div>
          </div>
          <div className="flex justify-center bg-zinc-950 p-4 sm:p-6">
            <div className={`w-full overflow-hidden rounded-lg bg-white text-zinc-900 transition-[max-width] duration-300 ${view === "desktop" ? "max-w-full" : "max-w-[300px]"}`}>
              <div className="px-5 py-8 text-center">
                <p className="text-xs font-semibold uppercase tracking-widest text-violet-600">Pricing</p>
                <p className="mt-1 text-xl font-bold">팀에 맞는 요금제</p>
              </div>
              <div className={`grid gap-3 px-5 pb-8 ${view === "desktop" ? "sm:grid-cols-3" : ""}`}>
                {[
                  ["Free", "0", false],
                  ["Pro", "12", true],
                  ["Team", "40", false],
                ].map(([name, price, featured]) => (
                  <div
                    key={name as string}
                    className={`rounded-xl border p-4 text-left ${featured ? "border-violet-500 shadow-lg shadow-violet-500/10 sm:-translate-y-1" : "border-zinc-200"}`}
                  >
                    <p className="text-xs font-medium text-zinc-500">{name}</p>
                    <p className="mt-1 text-2xl font-bold">${price}</p>
                    <ul className="mt-3 space-y-1.5 text-[11px] text-zinc-600">
                      {["문서 무제한", "버전 기록", "공유 링크"].map((f) => (
                        <li key={f} className="flex items-center gap-1.5">
                          <svg width="10" height="10" viewBox="0 0 16 16" fill="none" aria-hidden className="text-violet-600">
                            <path d="m3.5 8.5 3 3 6-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                          </svg>
                          {f}
                        </li>
                      ))}
                    </ul>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        <aside className="flex flex-col rounded-2xl border border-zinc-800 bg-zinc-900 p-5">
          <div className="flex items-center justify-between">
            <h3 className="font-semibold">제작 노트</h3>
            <button
              type="button"
              onClick={() => {
                navigator.clipboard?.writeText(NOTE);
                setCopied(true);
                setTimeout(() => setCopied(false), 1500);
              }}
              className="flex h-8 items-center gap-1.5 rounded-lg border border-zinc-700 bg-zinc-800 px-3 text-[13px] font-medium transition hover:border-zinc-600 hover:bg-zinc-700"
            >
              {copied ? "복사됨" : "노트 복사"}
            </button>
          </div>
          <div className="mt-3 flex gap-1.5">
            {[1, 2].map((v) => (
              <button
                key={v}
                type="button"
                aria-pressed={version === v}
                onClick={() => setVersion(v)}
                className={`h-6 rounded-md border px-2 text-xs ${
                  version === v ? "border-violet-400/40 bg-violet-400/10 text-violet-300" : "border-zinc-700 text-zinc-500 hover:text-zinc-300"
                }`}
              >
                v{v}
              </button>
            ))}
          </div>
          <p className="mt-4 whitespace-pre-wrap rounded-xl border border-violet-400/20 bg-violet-400/[0.06] px-4 py-3 text-[13.5px] leading-relaxed text-zinc-300">
            {NOTE}
          </p>
          <dl className="mt-auto grid grid-cols-2 gap-3 pt-5 text-xs">
            <div>
              <dt className="text-zinc-500">작성</dt>
              <dd className="mt-0.5 text-zinc-200">박도윤</dd>
            </div>
            <div>
              <dt className="text-zinc-500">수정</dt>
              <dd className="mt-0.5 text-zinc-200">어제</dd>
            </div>
          </dl>
        </aside>
      </div>
    </section>
  );
}