단계 번호와 단계 이름이 있는 진행 막대 헤더

import { useState } from "react";

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

const STEPS = ["브레인스토밍", "목표 정리", "참석자", "안건", "자료 준비", "일정", "확인"];

function SunIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#f5a524" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <circle cx="12" cy="12" r="4" fill="#fcd34d" />
      <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
    </svg>
  );
}

export default function StepProgressHeader() {
  const [step, setStep] = useState(1);
  const total = STEPS.length;
  const percent = (step / total) * 100;

  return (
    <section className="w-full bg-[#f8f8fb] 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-[800px] flex-col gap-3">
        <div className="flex items-center justify-between gap-4 text-[16px] leading-normal">
          <p className="font-bold text-[#4361ee]" aria-live="polite">
            {step} / {total}
          </p>
          <p className="flex items-center gap-1.5 font-medium text-[#1a1d1f]">
            <SunIcon />
            {STEPS[step - 1]}
          </p>
        </div>
        <div
          className="h-2 w-full overflow-hidden rounded-[4px] bg-[#e9e9f2]"
          role="progressbar"
          aria-label="진행 단계"
          aria-valuemin={1}
          aria-valuemax={total}
          aria-valuenow={step}
        >
          <div
            className="h-full rounded-[4px] bg-[#4361ee] transition-[width] duration-300 ease-out"
            style={{ width: `${percent}%` }}
          />
        </div>
        <div className="mt-4 flex justify-end gap-2">
          <button
            type="button"
            onClick={() => setStep((s) => Math.max(1, s - 1))}
            disabled={step === 1}
            className="rounded-lg border border-[#eeeef2] bg-white px-3 py-1.5 text-[13px] font-semibold text-[#6f767e] transition-colors hover:bg-[#f4f4f7] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4361ee] disabled:cursor-not-allowed disabled:opacity-40"
          >
            이전 단계
          </button>
          <button
            type="button"
            onClick={() => setStep((s) => Math.min(total, s + 1))}
            disabled={step === total}
            className="rounded-lg bg-[#4361ee] px-3 py-1.5 text-[13px] font-semibold text-white transition-colors hover:bg-[#3651d4] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4361ee] disabled:cursor-not-allowed disabled:opacity-40"
          >
            다음 단계
          </button>
        </div>
      </div>
    </section>
  );
}