doksam-ui
홈ProfilesTokensIconsComponentsPatternsTemplatesRules

Attachment

채팅에 첨부된 파일을 미리 보여줍니다.

데모

2026년_1분기_보고서.pdf2.4MB
계약서_초안.pdf업로드 중…
회의록.pdf업로드 실패 — 파일이 너무 큽니다.

코드

<AttachmentGroup>
  <Attachment state="done">
    <AttachmentMedia>
      <FilePdfIcon />
    </AttachmentMedia>
    <AttachmentContent>
      <AttachmentTitle>2026년_1분기_보고서.pdf</AttachmentTitle>
      <AttachmentDescription>2.4MB</AttachmentDescription>
    </AttachmentContent>
    <AttachmentActions>
      <AttachmentAction aria-label="첨부 제거">
        <XIcon />
      </AttachmentAction>
    </AttachmentActions>
  </Attachment>
  <Attachment state="uploading">
    <AttachmentMedia>
      <FilePdfIcon />
    </AttachmentMedia>
    <AttachmentContent>
      <AttachmentTitle>계약서_초안.pdf</AttachmentTitle>
      <AttachmentDescription>업로드 중…</AttachmentDescription>
    </AttachmentContent>
  </Attachment>
</AttachmentGroup>

사용 규칙

Do
  • state(idle/uploading/processing/error/done)를 실제 업로드 상태와 정확히 동기화한다.
  • AttachmentAction에는 반드시 aria-label을 붙여 아이콘 전용 버튼에 접근성을 준다.
  • 이미지 첨부는 AttachmentMedia variant='image'로 실제 썸네일을 보여준다.
Don't
  • 실패(state='error')인데 성공처럼 보이는 회색 아이콘만 두어 사용자가 재시도 필요를 놓치게 하지 않는다.
  • 파일명이 길다고 AttachmentTitle의 truncate를 없애 레이아웃이 깨지게 하지 않는다.