일정 카드

<AvatarGroup avatars={people} max={4} size="sm" />
<AvatarGroup avatars={people} max={4} size="md" />
<AvatarGroup avatars={people} max={4} size="lg" />

AvatarGroup: 오버플로우 + 이미지 폴백

max 를 초과하면 +N 카운트로 접는다. 이미지가 없으면 이름 첫 글자로 폴백된다.

Preview

max=2

김이+3

max=3

김이박+2

max=5 (전체)

김이박최정

tsx

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

그리드 배치

여러 일정을 나란히 보여줄 때 Grid와 조합한다. AvatarGroup 이 각 카드에 독립적으로 쓰인다.

Preview

Sprint Setup - Product Team

04:30 – 5:30 PM

김이박+2

Team Meeting - For New Release

tsx

<EventCard
  title="Sprint Setup - Product Team"
  meta={<><Clock size={12} /><span>04:30 – 5:30 PM</span></>}
  participants={people}
  href="#"
/>

로딩

loading 을 주면 제목·메타·아바타가 skeleton 으로 대체된다.

Preview

tsx

<EventCard title="" participants={[]} loading />

AvatarGroup props

prop	type	기본	설명
avatars	AvatarItem[]	-	{ name: string; src?: string }[]: 아바타 목록
max	number	4	최대 표시 수. 초과분은 +N 카운트
size	"sm" \| "md" \| "lg"	"md"	sm=24px · md=28px · lg=32px

속성

이름	타입	기본값	설명
title	string	-	이벤트 제목: 필수
meta	ReactNode	-	시간·날짜 등 보조 정보. 아이콘+텍스트 조합을 자유롭게 구성
participants	AvatarItem[]	[]	참여자 목록. AvatarGroup 에 그대로 전달
maxParticipants	number	3	아바타 최대 표시 수. 초과분은 +N
onClick	MouseEventHandler	-	클릭 핸들러. 있으면 button 으로 렌더, 화살표 표시
href	string	-	링크. onClick 보다 우선(a 로 렌더)
loading	boolean	false	skeleton 상태