AXIS
Agentic UI/ApprovalCard

ApprovalCard

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

Installation

bash
npx @axis-ds/cli add approval-card

Usage

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

export function Example() {
  return (
    <ApprovalCard
      title="코드 변경 승인 요청"
      description="AI가 다음 변경 사항을 적용하려고 합니다."
      severity="warning"
      actions={[
        { label: '거부', variant: 'secondary', onClick: () => console.log('Rejected') },
        { label: '승인', onClick: () => console.log('Approved') },
      ]}
    >
      <ul className="text-sm list-disc pl-5">
        <li>NewFeature.tsx 추가</li>
        <li>index.ts export 수정</li>
      </ul>
    </ApprovalCard>
  )
}

Interactive Demo

심각도:
주의 알림:

코드 변경 승인 요청

AI가 다음 변경 사항을 적용하려고 합니다. 검토 후 승인 또는 거부해주세요.

  • NewFeature.tsx 추가
  • index.ts 에 NewFeature export 추가
  • deprecated.ts 삭제

아직 결정하지 않았습니다.

Severity

정보 알림:

info 심각도

심각도에 따라 왼쪽 테두리와 아이콘 색이 바뀝니다.

주의 알림:

warning 심각도

심각도에 따라 왼쪽 테두리와 아이콘 색이 바뀝니다.

오류 알림:

error 심각도

심각도에 따라 왼쪽 테두리와 아이콘 색이 바뀝니다.

Props

titleRequired
Type:string

카드 제목

description
Type:string
Default:-

설명 텍스트

severity
Type:"info" | "warning" | "error"
Default:"info"

심각도 (왼쪽 테두리 · 아이콘 색과 화면 낭독기용 문구를 정함)

actionsRequired
Type:ApprovalAction[]

카드 아래에 표시할 액션 버튼 목록

children
Type:React.ReactNode
Default:-

설명 아래 추가 내용

id
Type:string
Default:자동 생성

제목 · 설명 연결용 기준 ID

className
Type:string
Default:-

추가 CSS 클래스

ApprovalAction Type

labelRequired
Type:string

버튼 문구

variant
Type:"default" | "secondary" | "ghost" | "destructive"
Default:"default"

버튼 모양

onClickRequired
Type:() => void

클릭 콜백

Accessibility

카드는 role="region"으로 그룹화되고 aria-labelledby / aria-describedby로 제목·설명이 연결됩니다.

KeyAction
Tab액션 버튼 사이를 이동합니다.
Enter / Space포커스된 액션을 실행합니다.
  • 심각도는 색상만이 아니라 화면 낭독기용 문구("주의 알림:" 등)로도 전달됩니다.
  • 아이콘은 aria-hidden으로 처리됩니다.