Wizard

import {
  Wizard,
  WizardSteps,
  WizardPanel,
  useWizard,
} from "@/components/ui/wizard";

<Wizard steps={["Account", "Profile", "Confirm"]}>
  <WizardSteps clickable />

  <WizardPanel step={0}>{/* 계정 폼 */}</WizardPanel>
  <WizardPanel step={1}>{/* 프로필 폼 */}</WizardPanel>
  <WizardPanel step={2}>{/* 확인 */}</WizardPanel>

  <WizardActions />
</Wizard>

// 네비게이션은 useWizard() 로 직접 구성
function WizardActions() {
  const { isFirst, isLast, next, prev } = useWizard();
  return (
    <div className="flex justify-end gap-2">
      <Button variant="outline" onClick={prev} disabled={isFirst}>이전</Button>
      <Button onClick={next}>{isLast ? "완료" : "다음"}</Button>
    </div>
  );
}