Avatar

Avatar는 사용자 또는 엔티티를 나타내는 원형 이미지 컴포넌트입니다.

• 이미지 로드에 실패할 경우 대체 콘텐츠(fallback)를 표시합니다
• 접근성을 고려한 설계를 제공합니다
• 심플하고 일관된 사용자 표현을 제공합니다

Installation

npx @jongh/cli add avatar

Usage

Avatar 컴포넌트는 Radix UI의 Avatar 컴포넌트를 기반으로 구현되었으며, 여러 하위 컴포넌트로 구성됩니다.

컴포넌트 구조

• Avatar.Root: 아바타의 모든 파트를 감싸는 컨테이너입니다.
• Avatar.Image: 아바타에 표시될 이미지를 정의합니다.
• Avatar.Fallback: 이미지 로드에 실패했을 때 표시될 대체 콘텐츠를 정의합니다.

Props

Avatar.Image

• src (string): 이미지의 URL입니다.
• alt (string): 이미지에 대한 대체 텍스트입니다. 접근성을 위해 제공하는 것이 좋습니다.

Avatar.Fallback

• delayMs (number): 대체 콘텐츠가 표시되기 전의 지연 시간(밀리초)입니다. 기본값은 0입니다.

Example

기본 사용 예시

import { Avatar } from "@/components/avatar"

const BasicExample = () => (
  <Avatar.Root>
    <Avatar.Image
      src="https://example.com/avatar.jpg"
      alt="사용자 프로필 이미지"
    />
  </Avatar.Root>
)

대체 콘텐츠(fallback)가 있는 예시

import { Avatar } from "@/components/avatar"

const FallbackExample = () => (
  <Avatar.Root>
    <Avatar.Image
      src="https://example.com/avatar.jpg"
      alt="사용자 프로필 이미지"
    />
    <Avatar.Fallback>JD</Avatar.Fallback>
  </Avatar.Root>
)