activeStep: 0부터 시작하는 현재 단계 index입니다.
state: 각 step의 state를 직접 지정하면 computed state보다 우선합니다.
navigation: allowStepNavigation과 onStepChange가 있어도 complete 단계만 버튼이 됩니다.
mobile: 좁은 화면에서는 현재 단계 요약과 progress bar를 먼저 보여줍니다.

시험 설정 흐름

activeStep, complete/current/upcoming

중간고사 설정

시험 운영 전에 필요한 값을 순서대로 확정합니다.

2개 항목 확인 필요

2단계 / 4단계

문항 구성 단계

문항 구성

세트와 배점

2단계 / 4단계

문항 구성 단계

문항 세트

해부학 32문항, 임상 추론 18문항을 이번 시험에 연결했습니다.

저장 중

코드 보기tsx

import { Badge, Button, Card, CardContent, WizardLayout, type WizardStep } from "@olundot/ui";

const steps: WizardStep[] = [
  { id: "basic", label: "기본 정보", description: "과목과 일정", state: "complete" },
  { id: "questions", label: "문항 구성", description: "세트와 배점", state: "current" },
  { id: "students", label: "응시자", description: "대상자 확정" },
  { id: "review", label: "검토", description: "게시 전 확인" },
];

export function ExamSetupWizard() {
  return (
    <WizardLayout
      header={<h2>중간고사 설정</h2>}
      steps={steps}
      activeStep={1}
      status={<Badge tone="warning">2개 항목 확인 필요</Badge>}
      footer={<div><Button variant="outline">이전</Button><Button>다음</Button></div>}
    >
      <Card surface="canvas">
        <CardContent className="pt-0">문항 세트와 배점 정책을 검토합니다.</CardContent>
      </Card>
    </WizardLayout>
  );
}

allowStepNavigation과 onStepChange

조교 초대

역할과 접근 범위를 확인한 뒤 초대를 발송합니다.

3단계 / 3단계

초대

3단계 / 3단계

완료 단계 이동

현재 단계: 3단계
초대 대상: 2명

저장됨

코드 보기tsx

import { useState } from "react";
import { Button, WizardLayout, type WizardStep } from "@olundot/ui";

const steps: WizardStep[] = [
  { id: "profile", label: "프로필", state: "complete" },
  { id: "permission", label: "권한", state: "complete" },
  { id: "invite", label: "초대", state: "current" },
];

export function InviteWizard() {
  const [step, setStep] = useState(2);

  return (
    <WizardLayout
      header={<h2>조교 초대</h2>}
      steps={steps}
      activeStep={step}
      onStepChange={setStep}
      footer={<Button>초대 발송</Button>}
    >
      <p>완료된 단계만 다시 선택할 수 있습니다.</p>
    </WizardLayout>
  );
}

순차 진행

allowStepNavigation=false

성적 확정

이의 신청 검토 후 공개 단계로 이동합니다.

2단계 / 3단계

순서대로 진행합니다.

이의 신청

2단계 / 3단계

순서대로 진행합니다.

완료 표시가 있어도 단계 버튼으로 바뀌지 않습니다.

저장됨

코드 보기tsx

import { Button, Card, CardContent, WizardLayout } from "@olundot/ui";

export function LockedWizard() {
  return (
    <WizardLayout
      header={<h2>성적 확정</h2>}
      steps={[
        { id: "scores", label: "점수 확인", state: "complete" },
        { id: "appeals", label: "이의 신청", state: "current" },
        { id: "publish", label: "공개" },
      ]}
      activeStep={1}
      allowStepNavigation={false}
      status="순서대로 진행합니다."
      footer={<><Button variant="outline">임시저장</Button><Button>계속</Button></>}
    >
      <Card surface="canvas">
        <CardContent className="pt-0">완료 표시가 있어도 단계 버튼으로 바뀌지 않습니다.</CardContent>
      </Card>
    </WizardLayout>
  );
}