CoreAvatarGroup

여러 아바타를 겹쳐 표시하고 초과 수를 요약하는 그룹 컴포넌트. Avatar.Group으로 마이그레이션을 권장합니다.

개요

마이그레이션 안내 — 이 컴포넌트는 레거시입니다. 신규 프로젝트에서는 Avatar.Group을 사용하세요.

CoreAvatarGroup은 복수의 CoreAvatar를 가로로 겹쳐 배치하고, max를 초과하는 아바타 수를 surplus 뱃지로 요약하는 컴포넌트입니다.

max — 최대 표시 개수 제한 (기본 4)
total — children 수와 무관하게 전체 개수를 직접 지정
avatar — 공통 CoreAvatar props를 그룹 단위로 일괄 적용
renderSurplus — surplus 숫자 렌더링 방식을 함수로 커스텀

Usage

기본 사용법

<CoreAvatarGroup>
<CoreAvatar text="F" colorType="blue" />
<CoreAvatar text="E" colorType="green" />
<CoreAvatar text="A" colorType="red" />
</CoreAvatarGroup>

최대 표시 개수 설정

<CoreAvatarGroup max={3}>
<CoreAvatar text="F" colorType="blue" />
<CoreAvatar text="E" colorType="green" />
<CoreAvatar text="A" colorType="red" />
<CoreAvatar text="T" colorType="orange" />
<CoreAvatar text="U" colorType="purple" />
</CoreAvatarGroup>

전체 개수 명시

<CoreAvatarGroup max={4} total={128}>
<CoreAvatar text="F" colorType="blue" />
<CoreAvatar text="E" colorType="green" />
<CoreAvatar text="A" colorType="red" />
<CoreAvatar text="T" colorType="orange" />
<CoreAvatar text="U" colorType="purple" />
</CoreAvatarGroup>

공통 Avatar Props 설정

avatar prop으로 모든 자식 아바타에 공통 스타일을 일괄 적용합니다. 개별 CoreAvatar의 prop이 우선합니다.

<CoreAvatarGroup
max={4}
avatar={{ shape: 'circle', border: true, size: 'md' }}
>
<CoreAvatar src="https://i.pravatar.cc/150?img=1" />
<CoreAvatar src="https://i.pravatar.cc/150?img=2" dot={{ color: 'red' }} />
<CoreAvatar src="https://i.pravatar.cc/150?img=3" />
<CoreAvatar src="https://i.pravatar.cc/150?img=4" />
<CoreAvatar src="https://i.pravatar.cc/150?img=5" />
</CoreAvatarGroup>

정사각형 아바타 그룹

<CoreAvatarGroup
max={4}
avatar={{ shape: 'square', border: true, size: 'md' }}
>
<CoreAvatar text="F" colorType="blue" />
<CoreAvatar text="E" colorType="green" dot={{ color: 'red' }} />
<CoreAvatar text="A" colorType="red" />
<CoreAvatar text="T" colorType="orange" />
<CoreAvatar text="U" colorType="purple" />
</CoreAvatarGroup>

커스텀 Surplus 렌더링

<VStack $css={{ gap: '12px' }}>
<CoreAvatarGroup
  max={3}
  total={1245}
  avatar={{ shape: 'circle', border: true, size: 'md' }}
  renderSurplus={(n) => <span>+{n}</span>}
>
  <CoreAvatar text="F" colorType="blue" />
  <CoreAvatar text="E" colorType="green" />
  <CoreAvatar text="A" colorType="red" />
</CoreAvatarGroup>
<CoreAvatarGroup
  max={3}
  total={1245}
  avatar={{ shape: 'circle', border: true, size: 'md' }}
  renderSurplus={(n) => <span>+{String(n).charAt(0)}K</span>}
>
  <CoreAvatar text="F" colorType="blue" />
  <CoreAvatar text="E" colorType="green" />
  <CoreAvatar text="A" colorType="red" />
</CoreAvatarGroup>
</VStack>

Props

Prop

Type

CoreAvatarProps

CoreAvatar를 참조하세요.

스타일

Container

display: flex, flex-direction: row, align-items: center
첫 번째를 제외한 아바타에 margin-left: -8px (겹침 효과)

Surplus 뱃지

CoreAvatar와 동일한 스타일 (기본 colorType: gray, border: on)
기본 텍스트: +{surplus}, renderSurplus로 완전 교체 가능

마이그레이션 가이드

CoreAvatarGroup에서 Avatar.Group으로 이전하세요.

// Before
<CoreAvatarGroup max={3} total={99} avatar={{ border: true, size: 'md' }}>
  <CoreAvatar text="F" colorType="blue" />
  <CoreAvatar text="E" colorType="green" />
</CoreAvatarGroup>

// After
<Avatar.Group max={3} total={99} avatarProps={{ border: true, size: 'md' }}>
  <Avatar.Root><Avatar.Fallback colorType="blue">F</Avatar.Fallback></Avatar.Root>
  <Avatar.Root><Avatar.Fallback colorType="green">E</Avatar.Fallback></Avatar.Root>
</Avatar.Group>

CoreAvatarGroup prop	Avatar.Group 대응
`max`	`max`
`total`	`total`
`avatar`	`avatarProps`
`renderSurplus`	`renderSurplus`

On this page