Agentic UI/AttachmentCard

AttachmentCard

파일 첨부를 표시하는 카드 컴포넌트입니다. 다양한 파일 타입과 업로드 상태를 지원합니다.

Installation

bash
npx @axis-ds/cli add attachment-card --agentic

Usage

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

export function Example() {
  return (
    <div className="space-y-2">
      <AttachmentCard
        type="image"
        name="screenshot.png"
        size={245000}
        status="complete"
        onRemove={() => console.log('삭제')}
      />
      <AttachmentCard
        type="document"
        name="report.pdf"
        size={1250000}
        status="uploading"
        progress={65}
      />
    </div>
  )
}

Interactive Demo

analysis-report.pdf

문서3.1 MB

File Types

photo.png

이미지239.3 KB

report.pdf

문서1.2 MB

index.tsx

코드4.1 KB

project.zip

압축 파일14.9 MB

data.bin

기타 파일869.1 KB

States

Complete

done.png

이미지488.3 KB

Uploading

uploading.pdf

문서1.9 MB

Error

failed.zip

압축 파일47.7 MB업로드 실패

Props

typeRequired
Type:"image" | "document" | "code" | "archive" | "other"

파일 유형

nameRequired
Type:string

파일 이름

size
Type:number
Default:-

파일 크기 (bytes)

url
Type:string
Default:-

파일 URL

thumbnail
Type:string
Default:-

이미지 썸네일 URL

status
Type:"uploading" | "complete" | "error"
Default:"complete"

파일 상태

progress
Type:number
Default:-

업로드 진행률 (0-100)

onRemove
Type:() => void
Default:-

삭제 콜백

className
Type:string
Default:-

추가 CSS 클래스

Accessibility

카드는 role="article"로 마크업되고, 업로드 진행은 role="progressbar" + aria-valuenow / aria-valuemin / aria-valuemax로 전달됩니다.

KeyAction
Tab카드 내 액션(삭제 등)으로 이동합니다.
Enter / Space포커스된 액션을 실행합니다.
  • 파일명이 접근 가능한 이름으로 노출됩니다.
  • 액션 버튼에 aria-label이 제공됩니다.