Avatar
core사용자 아바타. 이미지, 이니셜 자동 생성, 상태 인디케이터, 그룹 지원.
컴포넌트 의존 관계
깊이
100%
Sizes
XSMLX
Status Indicators
김
online
이
busy
박
away
최
offline
Initials Generation
홍
홍길동
JD
John Doe
A
Alice
No name
Fallback
FU
이미지가 없을 때 커스텀 fallback 표시
이미지 로딩 & 폴백 상태머신
정이
로드 성공 → 이미지
홍
로드 실패 → 이니셜 폴백
이미지는 오프스크린에서 먼저 디코딩되며, 로드 전·실패 시 폴백을 보여줘 broken-image 깜빡임이 없습니다.
반응형 이미지 (srcSet / sizes)
R
DPR에 따라 1x/2x 후보 중 선택됩니다.
Avatar Group
max=4
김이박최+1
max=2
김이+3
테스트 커버리지
2026년 2월 4일5/5 통과
5성공
0실패
5전체
- 이미지를 렌더링한다
- 이름에서 이니셜을 생성한다
- 영문 이름에서 이니셜을 생성한다
- status 인디케이터를 표시한다
- size에 따른 크기를 적용한다
Avatar Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
src | string | — | 이미지 URL |
alt | string | — | 이미지 대체 텍스트 |
name | string | — | 사용자 이름 (이니셜 생성 및 색상 결정) |
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | 아바타 크기 |
fallback | ReactNode | — | 이미지 실패 시 표시할 콘텐츠 |
status | "online" | "offline" | "busy" | "away" | — | 상태 인디케이터 |
AvatarGroup Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
max | number | 4 | 최대 표시 개수 |
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | 아바타 크기 |
children* | ReactNode | — | Avatar 요소들 |
Import
tsx
import { Avatar, AvatarGroup } from "@reopt-ai/opt-ui";