AXIS
Agentic UI/StepTimeline

StepTimeline

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

Installation

bash
npx @axis-ds/cli add step-timeline --agentic

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" />
}

Interactive Demo

완료:

요청 수신

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

완료:

데이터 처리

실행 중:

분석 중

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

대기 중:

결과 생성

Props

stepsRequired
Type:TimelineStep[]

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

orientation
Type:"vertical" | "horizontal"
Default:"vertical"

타임라인 방향

className
Type:string
Default:-

추가 CSS 클래스

locale
Type:string
Default:-

시각 표시 로케일(없으면 실행 환경 기본값)

timeZone
Type:string
Default:-

시각 표시 시간대(예: "Asia/Seoul"). locale 과 함께 주면 서버가 그 시간대로 만든 시각이 서버 렌더 HTML 에 그대로 들어가고 보는 사람의 시간대로 바뀌지 않아요. 아니면 서버 컴포넌트에서도 HTML 의 시각이 비고, JS 가 돈 뒤 브라우저 시간대로 채워요

formatTime
Type:(date: Date) => string
Default:-

시각 문자열을 직접 만드는 함수. 서버와 브라우저에서 같은 값을 돌려줘야 해요(서버 컴포넌트에서는 못 넘김)

TimelineStep Type

idRequired
Type:string

단계 고유 식별자

labelRequired
Type:string

단계 이름

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

단계 상태

timestamp
Type:Date
Default:-

단계 실행 시간

description
Type:string
Default:-

단계 설명

Accessibility

타임라인은 role="list" / "listitem"으로 마크업되고, 현재 단계는 aria-current로 표시됩니다.

  • 단계 상태가 aria-label / 텍스트로 전달됩니다.
  • 시각은 <time dateTime> 으로 표시하고, locale · timeZone 을 함께 주지 않으면 하이드레이션 뒤에 채워요(하이드레이션 오류 방지).