PlanCard

AI 에이전트의 실행 계획을 단계별로 표시하고 승인/거절할 수 있는 컴포넌트입니다.

Installation

bash

npx axis-cli add plan-card --agentic

Interactive Demo

배포 파이프라인

승인 대기

0/5 단계 완료

○

환경 설정

개발 환경 구성

○

데이터베이스 마이그레이션

Schema 업데이트 실행

○

API 엔드포인트 구현

REST API 추가

○

테스트 실행

유닛/통합 테스트

○

배포

프로덕션 배포

Status States

승인 대기 계획

승인 대기

0/2 단계 완료

○

1단계

○

2단계

실행 중 계획

실행 중

1/3 단계 완료

✓

데이터 로드

⟳

처리 중

○

결과 저장

완료된 계획

완료

3/3 단계 완료

✓

분석

✓

검토

✓

배포

Usage

tsx

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

export function Example() {
  const steps = [
    { id: '1', label: '데이터 수집', status: 'complete' },
    { id: '2', label: '분석 수행', status: 'running' },
    { id: '3', label: '보고서 생성', status: 'pending' },
  ]

  return (
    <PlanCard
      title="데이터 분석 계획"
      steps={steps}
      status="executing"
      onApprove={() => console.log('승인')}
      onReject={() => console.log('거절')}
    />
  )
}

Props

Prop	Type	Default	Description
`title`Required	`string`	-	계획 제목
`steps`Required	`PlanStep[]`	-	단계 목록
`status`	`"draft" \| "pending" \| "approved" \| "rejected" \| "executing" \| "completed"`	"pending"	계획 상태
`onApprove`	`() => void`	-	승인 콜백
`onEdit`	`() => void`	-	편집 콜백
`onReject`	`() => void`	-	거절 콜백
`className`	`string`	-	추가 CSS 클래스

titleRequired

Type:string

계획 제목

stepsRequired

Type:PlanStep[]

단계 목록

status

Default:"pending"

계획 상태

onApprove

Type:() => void

Default:-

승인 콜백

onEdit

Type:() => void

Default:-

편집 콜백

onReject

Type:() => void

Default:-

거절 콜백

className

Type:string

Default:-

추가 CSS 클래스

PlanStep Type

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

idRequired

Type:string

단계 고유 식별자

labelRequired

Type:string

단계 이름

statusRequired

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

단계 상태

description

Type:string

Default:-

단계 설명