양 끝에 이전·다음 버튼이 있는 단계 이동 바

import { useState } from "react";

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

export default function WizardNavButtons() {
  const [step, setStep] = useState(2);
  const total = 7;
  const isLast = step === total;

  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 w-full max-w-[800px]">
        <p className="sr-only" aria-live="polite">
          {total}단계 중 {step}단계
        </p>
        <div className="flex items-start justify-between gap-3 pt-5">
          <button
            type="button"
            onClick={() => setStep((s) => Math.max(1, s - 1))}
            disabled={step === 1}
            className="rounded-xl border border-[#eeeef2] bg-transparent px-7 py-3.5 text-[16px] font-semibold leading-normal text-[#6f767e] transition-colors duration-150 hover:bg-white hover:text-[#1a1d1f] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4361ee] disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-[#6f767e]"
          >
            이전
          </button>
          <button
            type="button"
            onClick={() => setStep((s) => Math.min(total, s + 1))}
            className="rounded-xl bg-[#4361ee] px-10 py-3.5 text-[16px] font-bold leading-normal text-white transition-colors duration-150 hover:bg-[#3651d4] active:bg-[#2c45bf] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4361ee]"
          >
            {isLast ? "완료" : "다음으로"}
          </button>
        </div>
      </div>
    </section>
  );
}