Attachment
설치 확인첨부 파일과 메타데이터
1. 목적과 출처
첨부 파일과 메타데이터
- 출처
- shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
- 프로젝트
src/components/ui/attachment.tsx- Registry
@adcapsule/attachment
2. 프리뷰와 변형
오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.
| 구성 | 모양 |
|---|---|
| 올림 done | |
| 올리는 중 uploading | |
| 실패 error | |
| 세로 묶음 AttachmentGroup |  |
3. 속성 바꿔 보기
state
size
4. 설치와 사용
- npm 패키지
- @base-ui/react, class-variance-authority
- 함께 설치
- @adcapsule/button, @adcapsule/utils
처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결
5. 바꿔도 되는 것과 유지할 토큰
제품에서 바꿔도 되는 것
- state: idle · uploading · processing · error · done
- size: default · sm · xs
- orientation: horizontal · vertical
- AttachmentAction에는 aria-label을 꼭 넣기
공통으로 유지할 토큰
- radius.lg (틀), radius.md (작은 크기·미리보기)
- border.default
- surface.raised (아이콘 자리, --muted)
- status.danger (실패)