Image Preview
설치 확인이미지 확대 보기, 로딩·실패
1. 목적과 출처
이미지 확대 보기, 로딩·실패
- 출처
- 기존 컴포넌트 조합
- 프로젝트
src/components/ui/image-preview.tsx- Registry
@adcapsule/image-preview
2. 프리뷰와 변형
오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.
| 상태 | 모양 |
|---|---|
| 불러옴 | |
| 실패 | |
| 여러 장 |
3. 속성 바꿔 보기
그림
ratio
4. 설치와 사용
- npm 패키지
- lucide-react
- 함께 설치
- @adcapsule/aspect-ratio, @adcapsule/dialog, @adcapsule/skeleton, @adcapsule/utils
처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결
5. 바꿔도 되는 것과 유지할 토큰
제품에서 바꿔도 되는 것
- ratio로 썸네일 비율
- caption이 있으면 대화상자 제목으로 보임(없으면 alt가 숨은 제목)
- 실패하면 '이미지를 불러오지 못했습니다'를 보여 줌
공통으로 유지할 토큰
- radius.lg (썸네일·대화상자)
- surface.raised (불러오는 중 Skeleton)
- text.secondary (실패 문구)
- surface.scrim (대화상자 배경)