AttachmentThumb
첨부·문서 썸네일. 원본 그대로, 보정 없음.
- 라이브러리 전용
개요
미리보기
예시
상태
기본
whiteboard-1007.jpg 진행 중
whiteboard-1007.jpg 미리보기 실패
whiteboard-1007.jpg 원문 열 수 없음
whiteboard-1007.jpgSource unavailable 문서
q3-retrospective-draft.pdf 긴 파일 이름
2026-10-07_customer-onboarding-guide_final_v3_reviewed-by-ops.png
쓰임 예
열 수 없는 썸네일
whiteboard-1007.jpg
이렇게 · 이렇게 하지 않기
- 이렇게 하지 않기 원본을 자르거나 보정하지 않는다. 틀 안에 통째로 보여준다.
- 이렇게 불러오지 못하면 파일 유형 아이콘과 파일 이름으로 대체한다.
- 이렇게 원문 접근이 끊긴 첨부에는 “원문 열 수 없음” 라벨을 달고 열기를 막는다.
- 이렇게 하지 않기 대체 텍스트를 추정해서 만들지 않는다. 원본에 없으면 파일 이름을 쓴다.
- 이렇게 21st 참고: Attachment Vertical(uiable — 세로 카드, 이름·크기·상태), Attachment(wensity — 아이콘/썸네일 + 상태 줄), Image Preview Dropzone(uilayout.contact). 업로드 쉬머·회전 스피너는 정지 면으로 바꿨다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
kind? | 'image' | 'doc' | image | image는 원본 이미지, doc은 문서 아이콘. |
state? | 'ready' | 'loading' | 'failed' | 'source-unavailable' | ready | loading은 정지 면(쉬머 없음). failed는 아이콘 + 문장. source-unavailable은 라벨 + 열기 비활성. 이미지가 깨지면 스스로 failed가 된다. |
fileName | string | whiteboard-1007.jpg | 원본 파일 이름. 번역하지 않는다. 한 줄 말줄임, 전체 이름은 접근 이름과 title에 남는다. |
src? | string | | 이미지 주소. 자르거나 보정하지 않고 통째로(contain) 보여준다. 비우면 미리보기는 표본 이미지. |
alt? | string | | 원본에 있던 대체 텍스트. 비우면 파일 이름. 추정한 설명을 만들지 않는다. |
meta? | ReactNode | Gmail · 10월 7일 | 이름 아래 사실 한 줄(형식·크기·출처·날짜). |
openable? | boolean | true | 원본을 열 수 있는지. href(새 탭 링크) 또는 onOpen(Lightbox 버튼)이 있어야 대화형이 된다. |
href? | string | | 원문을 새 탭에서 연다. 비우면 onOpen이 있을 때 <button>. |
onOpen?: () => void | — | — | href가 없으면 썸네일이 <button>이 되어 Lightbox를 연다. Lightbox가 닫히면 이 버튼으로 초점이 돌아온다. |
ref | — | — | ref는 <figure>로 전달된다. |
| 그 밖의 속성 | — | — | id, aria-* 등 네이티브 figure 속성은 그대로 전달된다. className·style·children은 받지 않는다. |
접근성
키보드: 열 수 있으면 Tab 정지점 하나(링크 또는 버튼). 열 수 없으면 0.
- <figure> + <figcaption>(파일 이름). 버튼 이름 “{파일} 크게 보기”, 링크 이름 “{파일} 원문 열기 (새 탭)”.
- loading은 aria-busy + 보조기기 전용 “불러오는 중”. 원문 열 수 없음은 점선 + 아이콘 + 글자라 색 없이도 구분된다.
- 모션: 테두리 색 fast만.