Steps

화면의 진행 단계를 시각적으로 표시하는 컴포넌트입니다.

개요

Steps 컴포넌트는 Foundation의 Step 컴포넌트를 데이터 드리븐 방식으로 래핑하여, steps 배열과 active 인덱스만으로 진행 단계를 표시합니다.

주요 특징

✅ 데이터 드리븐: steps 배열로 단계를 선언적으로 정의
✅ 상태 표시: 완료(체크)·진행 중·대기 상태 자동 인디케이터
✅ 단계별 스타일: controlStyle로 색상·폰트 오버라이드 (상태별 자동 파생)
✅ 숨김 처리: hidden 플래그로 특정 단계 비표시
✅ 컨테이너 제목: title prop으로 상단 제목 표시
✅ 표시 제어: visible prop으로 전체 표시/숨김

기본 사용

<Steps>에 steps 배열과 active 인덱스를 전달합니다.

Code


import { Steps } from "@vortex/ui-cals"
 
const steps = [
  { title: "요구사항 분석" },
  { title: "설계" },
  { title: "개발" },
  { title: "테스트" },
  { title: "배포" },
]
 
<Steps steps={steps} active={2} />

활성 단계 제어

active와 onActiveChange로 현재 단계를 제어합니다.


const [active, setActive] = useState(0)
 
<Steps steps={steps} active={active} onActiveChange={setActive} />

컨테이너 제목

title prop으로 단계 표시줄 위에 제목을 표시합니다.


<Steps title="프로젝트 진행 현황" steps={steps} active={3} />

단계별 스타일

각 단계에 controlStyle을 지정하면 상태(완료·진행·대기)에 따라 자동으로 색상이 파생됩니다.


<Steps
  steps={[
    { title: "접수", controlStyle: { borderColor: "#4f46e5", color: "#4f46e5" } },
    { title: "검토", controlStyle: { borderColor: "#059669", color: "#059669" } },
    { title: "승인", controlStyle: { borderColor: "#dc2626", color: "#dc2626" } },
  ]}
  active={1}
/>

숨김 단계

hidden: true인 단계는 렌더링에서 제외됩니다.


<Steps
  steps={[
    { title: "단계 1" },
    { title: "숨김 단계", hidden: true },
    { title: "단계 3" },
  ]}
  active={0}
/>

Props

Prop	Type	Default	설명
`steps`	`StepItemData[]`	`[]`	단계 목록 데이터
`active`	`number`	`0`	현재 활성 단계 인덱스
`onActiveChange`	`(index) => void`	-	활성 단계 변경 콜백
`title`	`string`	-	컨테이너 제목
`visible`	`boolean`	`true`	표시 여부
`backgroundColor`	`string`	-	컨테이너 배경색
`color`	`string`	-	컨테이너 글자색
`className`	`string`	-	className
`style`	`CSSProperties`	-	인라인 스타일

타입


interface StepItemData {
  title: string
  hidden?: boolean
  translate?: boolean
  controlStyle?: StepControlStyle
}
 
interface StepControlStyle {
  borderColor?: string
  borderWidth?: string
  color?: string
  fontFamily?: string
  fontSize?: string
  fontWeight?: string
  fontStyle?: string
  textAlign?: string
}