StepTimeline

단계별 진행 상황을 타임라인 형태로 시각화하는 컴포넌트입니다. 수직/수평 방향을 지원합니다.

Installation

bash

npx axis-cli add step-timeline --agentic

Interactive Demo

✓

요청 수신

사용자 요청을 수신했습니다

2:02:47 PM

✓

데이터 처리

2:03:17 PM

분석 중

AI가 데이터를 분석하고 있습니다

결과 생성

Usage

tsx

import { StepTimeline } from '@axis-ds/agentic-ui'

const steps = [
  { id: '1', label: '요청 수신', status: 'complete', timestamp: new Date() },
  { id: '2', label: '분석 중', status: 'running' },
  { id: '3', label: '완료', status: 'pending' },
]

export function Example() {
  return <StepTimeline steps={steps} orientation="vertical" />
}

Props

Prop	Type	Default	Description
`steps`Required	`TimelineStep[]`	-	타임라인에 표시할 단계 배열
`orientation`	`"vertical" \| "horizontal"`	"vertical"	타임라인 방향
`className`	`string`	-	추가 CSS 클래스

stepsRequired

Type:TimelineStep[]

타임라인에 표시할 단계 배열

orientation

Type:"vertical" | "horizontal"

Default:"vertical"

타임라인 방향

className

Type:string

Default:-

추가 CSS 클래스

TimelineStep Type

Prop	Type	Default	Description
`id`Required	`string`	-	단계 고유 식별자
`label`Required	`string`	-	단계 이름
`status`Required	`"pending" \| "running" \| "complete" \| "error" \| "skipped"`	-	단계 상태
`timestamp`	`Date`	-	단계 실행 시간
`description`	`string`	-	단계 설명

idRequired

Type:string

단계 고유 식별자

labelRequired

Type:string

단계 이름

statusRequired

Type:"pending" | "running" | "complete" | "error" | "skipped"

단계 상태

timestamp

Type:Date

Default:-

단계 실행 시간

description

Type:string

Default:-

단계 설명