Avatar
사용자 프로필 이미지를 표시하고, 이미지가 없을 때 이니셜이나 기본 아이콘을 보여주는 컴포넌트입니다.
설치
Terminal
npx @msub-core/ui-cli add avatar
사용법
TSX
import { Avatar, AvatarGroup } from "@msub-core/ui/components/avatar"
function MyComponent() {
return (
<Avatar
src="/profile.jpg"
name="홍길동"
status="online"
/>
)
}기본
홍길
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| src | string | - | No | 이미지 URL |
| alt | string | - | No | 이미지 alt 텍스트 |
| name | string | - | No | 이름 (이니셜 생성용) |
| size | "xs" | "sm" | "default" | "lg" | "xl" | "2xl" | "default" | No | 아바타 크기 |
| shape | "circle" | "square" | "circle" | No | 아바타 모양 |
| status | "online" | "offline" | "busy" | "away" | - | No | 상태 표시 점 |
| fallback | ReactNode | - | No | 이미지 로드 실패 시 커스텀 폴백 |
| bordered | boolean | false | No | 테두리 표시 |
| badge | number | - | No | 알림 뱃지 숫자 (99+ 처리됨) |
| editable | boolean | false | No | 편집 모드 (호버 시 오버레이) |
| onEdit | () => void | - | No | 편집 버튼 클릭 핸들러 |
Sizes
XS
SM
DF
LG
XL
2X
이미지
이니셜 폴백
홍길
김철
이영
JD
A
Shape
원형
사각
상태 표시
커스텀 폴백
?
알림 뱃지
XS
1SM
5DF
10LG
25XL
502X
99+편집 모드
이니
사각형
AvatarGroup
+3
+1
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| children | ReactNode | - | Yes | Avatar 컴포넌트들 |
| max | number | - | No | 최대 표시 개수 (초과 시 +N 표시) |
| size | "xs" | "sm" | "default" | "lg" | "xl" | "2xl" | "default" | No | 자식 아바타 기본 크기 |
| shape | "circle" | "square" | "circle" | No | 자식 아바타 기본 모양 |