아바타

아바타 (Avatar)

사용자의 프로필 사진이나 이니셜(initials)을 나타내는 데 사용하는 컴포넌트예요. 프로필 이미지가 없거나 로드에 실패했을 때의 폴백(fallback) 처리도 지원해요.

출처: 문서

본문

사용법 (Usage)

import { Avatar, AvatarGroup } from "@chakra-ui/react"

<AvatarGroup>
  <Avatar.Root>
    <Avatar.Fallback />
    <Avatar.Image />
  </Avatar.Root>
</AvatarGroup>

:::info

닫힌 컴포넌트 조합(closed component composition)을 선호한다면, 아래 스니펫을 확인해 보세요.

:::

예제 (Examples)

크기 (Sizes)

size prop을 사용해 아바타의 크기를 바꿀 수 있어요.

변형 (Variants)

variant prop을 사용해 아바타의 변형을 바꿀 수 있어요.

모양 (Shape)

shape prop을 사용해 아바타의 모양을 rounded에서 square로 바꿀 수 있어요.

색상 (Colors)

colorPalette prop을 사용해 아바타의 색상을 바꿀 수 있어요.

폴백 (Fallback)

이름이 제공되지 않았거나 이미지 로드에 실패했을 때 Avatar.Icon을 폴백으로 렌더링해요.

랜덤 색상 (Random Color)

colorPalette prop을 커스텀 로직과 결합해 아바타의 색상을 동적으로 바꿀 수 있어요.

링 (Ring)

outline* prop들을 사용해 아바타 주위에 링을 추가할 수 있어요.

그룹 (Group)

Group 컴포넌트를 사용해 여러 아바타를 함께 묶을 수 있어요.

겹치기 (Stacking)

AvatarGroup 컴포넌트를 사용할 때, stacking prop으로 아바타들의 겹침 순서를 바꿀 수 있어요.

페르소나 (Persona)

Avatar 컴포넌트를 사용해 사용자 페르소나를 표시하는 예시예요.

배지 (Badge)

Float와 Circle 컴포넌트를 조합해 아바타 오른쪽 모서리에 배지를 보여줄 수 있어요.

넘침 처리 (Overflow)

Menu와 Avatar 컴포넌트를 조합해 아바타가 넘치는 상황을 처리하는 예시예요.

Next.js

아바타를 Next.js 이미지와 함께 조합하는 예시예요.

import { getImageProps } from "next/image"

function Demo() {
  const imageProps = getImageProps({
    src: "/image.png",
  })
  return (
    <Avatar.Root>
      <Avatar.Fallback name="Segun Adebayo" />
      <Avatar.Image {...imageProps} />
    </Avatar.Root>
  )
}

스토어 (Store)

아바타 상태와 메서드에 접근하는 또 다른 방법으로, RootProvider 컴포넌트와 useAvatar 스토어 훅을 사용할 수 있어요.

닫힌 컴포넌트 (Closed Component)

Avatar를 닫힌 컴포넌트 조합으로 설정하는 방법이에요.

닫힌 컴포넌트를 프로젝트에 자동으로 추가하려면 다음 명령을 실행하세요:

npx @chakra-ui/cli snippet add avatar

Props

Root

Fallback

Image

탐색기 (Explorer)

Avatar 컴포넌트의 파트들을 인터랙티브하게 탐색해 보세요. 사이드바에서 파트를 클릭하면 미리보기에서 해당 파트가 강조 표시돼요.

더 알아보기 (Learn more)

Ark UI 아바타 — 아바타의 동작 로직