Step

import {
  Step, StepList, StepItem, StepIndicator,
  StepTitle, StepContent, StepNavigation,
} from "@vortex/ui-foundation"
 
<Step totalSteps={3} onComplete={() => alert("완료!")}>
  <StepList>
    <StepItem step={0}>
      <StepIndicator step={0} />
      <StepTitle step={0}>Step 1</StepTitle>
    </StepItem>
    <StepItem step={1}>
      <StepIndicator step={1} />
      <StepTitle step={1}>Step 2</StepTitle>
    </StepItem>
    <StepItem step={2}>
      <StepIndicator step={2} />
      <StepTitle step={2}>Step 3</StepTitle>
    </StepItem>
  </StepList>
  <StepContent step={0}>Step 1 콘텐츠</StepContent>
  <StepContent step={1}>Step 2 콘텐츠</StepContent>
  <StepContent step={2}>Step 3 콘텐츠</StepContent>
  <StepNavigation />
</Step>

import { StepDescription } from "@vortex/ui-foundation"
 
<StepItem step={0}>
  <StepIndicator step={0} />
  <StepTitle step={0}>기본 정보</StepTitle>
  <StepDescription step={0}>이름, 이메일 입력</StepDescription>
</StepItem>

import { useStep } from "@vortex/ui-foundation"
 
function ValidatedStep() {
  const { setCanGoNext } = useStep()
  const [name, setName] = useState("")
 
  useEffect(() => {
    setCanGoNext(name.trim().length > 0)
  }, [name, setCanGoNext])
 
  return <Input value={name} onChange={(e) => setName(e.target.value)} />
}

<Step
  totalSteps={3}
  onComplete={() => {
    if (confirm("완료하시겠습니까?")) {
      saveAllData()
    }
  }}
>
  ...
</Step>

<StepNavigation
  prevLabel="뒤로"
  nextLabel="계속"
  completeLabel="제출"
/>

import { Step, useStep } from "@vortex/ui-foundation"
 
// initialStepStatuses로 초기 상태 설정
<Step totalSteps={3} initialStepStatuses={{ 0: "success", 1: "error" }}>
  ...
</Step>
 
// useStep()으로 런타임 동적 제어
function MyStepContent() {
  const { setStepStatus } = useStep()
 
  return (
    <>
      <Button onClick={() => setStepStatus(0, "success")}>Step 1 성공</Button>
      <Button onClick={() => setStepStatus(1, "error")}>Step 2 오류</Button>
      <Button onClick={() => setStepStatus(0, null)}>Step 1 초기화</Button>
    </>
  )
}