아바타

아바타 컴포넌트는 사용자의 정체성을 이미지, 아이콘 또는 텍스트로 시각적으로 나타냅니다.

개요

아바타는 사용자의 정체성을 시각적으로 나타내는 UI 컴포넌트입니다. 프로필 이미지, 시스템 아이콘, 이니셜을 지원하며, 활동 상태를 나타내는 액티비티 링을 추가할 수 있습니다.

기본 예제

basic.tsx

import { Avatar } from 'podo-ui';

// Image avatar
<Avatar type="image" src="/profile.jpg" size={56} />

// Icon avatar (default)
<Avatar type="icon" icon="icon-user" size={56} />

// Text avatar
<Avatar type="text" text="AB" size={56} />

// With activity ring
<Avatar type="image" src="/profile.jpg" size={56} activityRing />

유형

아바타는 세 가지 유형을 지원합니다: 이미지, 아이콘, 텍스트

이미지 유형

아이콘 유형

텍스트 유형

김철

보라

types.tsx

// Image type - displays user photo
<Avatar type="image" src="/profile.jpg" size={56} />

// Icon type - displays system icon with gray background
<Avatar type="icon" icon="icon-user" size={56} />

// Text type - displays initials with gray background
<Avatar type="text" text="AB" size={56} />

크기

아바타는 16px부터 56px까지 9가지 크기를 제공합니다.

모든 크기

sizes.tsx

// Available sizes: 16, 20, 24, 28, 32, 36, 40, 48, 56
<Avatar type="image" src="/profile.jpg" size={16} />
<Avatar type="image" src="/profile.jpg" size={32} />
<Avatar type="image" src="/profile.jpg" size={56} />

액티비티 링

액티비티 링은 사용자가 현재 활동 중인지를 나타냅니다. 활동이 없을 경우 기본 상태로 표시됩니다.

기본 상태

활동 상태

activity-ring.tsx

// Default state - no ring
<Avatar type="image" src="/profile.jpg" size={56} />

// Active state - blue ring
<Avatar type="image" src="/profile.jpg" size={56} activityRing />

// Works with all types
<Avatar type="icon" icon="icon-user" size={56} activityRing />
<Avatar type="text" text="AB" size={56} activityRing />

조합

타입, 크기, 액티비티 링의 다양한 조합입니다.

조합 예제

김

combinations.tsx

// Small avatars for list items
<Avatar type="image" src="/user1.jpg" size={32} />
<Avatar type="icon" icon="icon-user" size={32} />
<Avatar type="text" text="김" size={32} />

// Medium avatars with activity ring
<Avatar type="image" src="/user2.jpg" size={48} activityRing />
<Avatar type="icon" icon="icon-user" size={48} activityRing />
<Avatar type="text" text="AB" size={48} activityRing />

Props

Prop	Type	Default	Description
`type`	`'image' \| 'icon' \| 'text'`	`'icon'`	아바타 유형 (image, icon, text)
`src`	`string`	-	이미지 소스 URL (type='image'일 때)
`icon`	`string`	`'icon-user'`	아이콘 클래스명 (type='icon'일 때)
`text`	`string`	-	텍스트 내용, 첫 2글자만 표시 (type='text'일 때)
`size`	`16 \| 20 \| 24 \| 28 \| 32 \| 36 \| 40 \| 48 \| 56`	`56`	아바타 크기(픽셀)
`activityRing`	`boolean`	`false`	활동 상태를 나타내는 액티비티 링 표시
`alt`	`string`	`'Avatar'`	이미지 접근성을 위한 대체 텍스트
`onClick`	`() => void`	-	클릭 이벤트 핸들러
`className`	`string`	`''`	추가 CSS 클래스

Podo UI

아바타

개요

유형

크기

액티비티 링

조합

Props