Avatar

@hua-labs/ui

v1.1.0

사용자 프로필 이미지를 표시하는 컴포넌트입니다. 이미지가 없을 경우 이니셜을 표시합니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Avatar } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

기본 사용법

tsx

// With image
<Avatar src="/user.jpg" alt="John Doe" />

// Fallback with initial from alt
<Avatar alt="Jane Smith" />

// Custom fallback content
<Avatar>JD</Avatar>

크기

tsx

<Avatar size="sm">S</Avatar>  // 32px
<Avatar size="md">M</Avatar>  // 40px
<Avatar size="lg">L</Avatar>  // 48px

변형

tsx

<Avatar variant="default">D</Avatar>
<Avatar variant="glass">G</Avatar>  // With ring and blur effect

아바타 그룹

tsx

<div className="flex -space-x-3">
  <Avatar className="ring-1 ring-background" src="/user1.jpg" />
  <Avatar className="ring-1 ring-background" src="/user2.jpg" />
  <Avatar className="ring-1 ring-background" src="/user3.jpg" />
  <Avatar className="ring-1 ring-background bg-secondary">+3</Avatar>
</div>

Props

이름	타입	기본값	설명
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Avatar size (sm: 32px, md: 40px, lg: 48px)
`variant`	`"default" \| "glass"`	`"default"`	Avatar style variant
`src`	`string`	-	Image URL
`alt`	`string`	-	Image alt text, also used for fallback initial
`children`	`React.ReactNode`	-	Custom fallback content
`fallbackText`	`string`	-	Text to display as fallback when image fails to load. Fallback chain: fallbackText > children > alt.charAt(0) > 'U'

접근성

•대체 텍스트: 이미지에 사용자를 설명하는 alt 텍스트를 반드시 제공할 것
•이미지 로드 실패 시 이니셜 표시: 이미지 로드 실패 시 alt 텍스트에서 이니셜을 추출해 표시

Badge Alert