AXIS
Agentic UI/ApprovalCard

ApprovalCard

AI 에이전트의 작업을 사용자가 승인/거부할 수 있는 컴포넌트입니다. Human-in-the-Loop 패턴 구현에 사용됩니다.

Installation

bash
npx axis-cli add approval-card

Interactive Demo

위험도:

Usage

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

const changes = [
  { label: 'Button.tsx', type: 'create', after: '새 버튼 컴포넌트' },
  { label: 'index.ts', type: 'update', before: '기존 export', after: 'export 추가' },
  { label: 'old-button.tsx', type: 'delete', after: '삭제됨' },
]

export function Example() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button onClick={() => setOpen(true)}>변경 사항 검토</Button>
      <ApprovalDialog
        open={open}
        onOpenChange={setOpen}
        title="코드 변경 승인"
        description="AI가 다음 변경 사항을 적용하려고 합니다."
        impact="medium"
        changes={changes}
        onApprove={() => { console.log('Approved'); setOpen(false) }}
        onReject={(reason) => { console.log('Rejected:', reason); setOpen(false) }}
      />
    </>
  )
}

Impact Levels

ilow

낮은 위험도 - 일반적인 작업

!medium

중간 위험도 - 주의가 필요한 작업

!high

높은 위험도 - 신중한 검토 필요

!critical

심각한 위험도 - 되돌리기 어려운 작업

Props

openRequired
Type:boolean

다이얼로그 열림 상태

onOpenChange
Type:(open: boolean) => void
Default:-

열림 상태 변경 콜백

titleRequired
Type:string

다이얼로그 제목

descriptionRequired
Type:string

설명 텍스트

impactRequired
Type:"low" | "medium" | "high" | "critical"

위험도 수준

changes
Type:ChangeItem[]
Default:-

변경 사항 목록

onApproveRequired
Type:() => void

승인 콜백

onRejectRequired
Type:(reason?: string) => void

거부 콜백