아바타 그룹

여러 사용자 아바타를 겹쳐 보여주는 스택이다. 이미지가 없으면 이름 첫 글자로 폴백되고, max 를 초과하는 인원은 +N 카운트로 접는다. EventCard 참여자 목록, 태스크 담당자, 코멘트 작성자 등 어디서든 독립 사용 가능하다.

상태

김이박최+1

sm (24px)

김이박최+1

md (28px, 기본)

김이박최+1

lg (32px)

김이박최정

이미지 없음 (이름 폴백)

이미지 src 가 없거나 로드에 실패하면 name 첫 글자로 자동 대체된다.

활용 방법

오버플로우 카운트

max 를 초과하면 나머지 인원을 +N 으로 접는다.

Preview

max=1

김+4

max=2

김이+3

max=3

김이박+2

max=4

김이박최+1

max=5

김이박최정

tsx

<AvatarGroup avatars={people} max={3} size="md" />

이미지 있는 경우

src 를 주면 이미지를 원형으로 표시한다. 실패하면 이름 첫 글자 폴백.

Preview

tsx

<AvatarGroup
  avatars={[
    { name: "Alice", src: "https://..." },
    { name: "Bob",   src: "https://..." },
    { name: "Carol" }, // src 없음 → 이름 폴백
  ]}
  max={3}
  size="md"
/>

속성

이름	타입	기본값	설명
avatars	AvatarItem[]	-	{ name: string; src?: string }[]: 아바타 목록. 순서대로 왼쪽부터 쌓임
max	number	4	최대 표시 수. 초과분은 +N 카운트
size	"sm" \| "md" \| "lg"	"md"	sm=24px · md=28px · lg=32px