# Avatar
URL: /docs/components/avatar

Avatar는 사용자가 설정한 프로필 이미지 혹은 텍스트를 UI상에 나타냅니다.

## Import

```js
import { Avatar } from '@vapor-ui/core';
```

## Preview

<LiveCodeBlock
  code={`<Avatar.Root label="Goorm" size="md" square={false}>
  <Avatar.Image src="https://statics.goorm.io/gds/resources/brand-images/light/favi_goorm.svg" />
</Avatar.Root>`}
/>

## Props

### Avatar.Root

| prop      | type                           | default    | description                                                 |
| --------- | ------------------------------ | ---------- | ----------------------------------------------------------- |
| `src`     | `string \| undefined`          |            | 아바타 이미지의 URL입니다. 지정하지 않으면 폴백이 표시됩니다.                        |
| `alt`     | `string`                       |            | 아바타 이미지를 설명하는 대체 텍스트입니다. 폴백 이니셜과 배경색을 생성하는 데에도 사용됩니다.       |
| `delayMs` | `number \| undefined`          | `0`        | 이미지가 로딩 중이거나 실패한 경우, 폴백을 표시하기까지의 지연 시간을 밀리초(ms) 단위로 지정합니다.  |
| `size`    | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'`     | 아바타의 전체 크기를 제어합니다.                                          |
| `shape`   | `'square' \| 'circle'`         | `'square'` | 아바타의 모서리 둥글기를 설정합니다. 'square'는 둥근 사각형, 'circle'은 완전한 원형입니다. |

### Avatar.Image

| prop             | type                                       | default  | description                                                    |
| ---------------- | ------------------------------------------ | -------- | -------------------------------------------------------------- |
| `loading`        | `'eager' \| 'lazy' \| undefined`           |          | 브라우저가 이미지를 즉시(eager) 로드할지, 뷰포트에 가까워질 때까지(lazy) 로딩을 지연할지 지정합니다. |
| `referrerPolicy` | `string \| undefined`                      |          | 이미지를 가져올 때 전송할 referrer 정보를 지정합니다.                             |
| `decoding`       | `'async' \| 'sync' \| 'auto' \| undefined` | `'auto'` | 브라우저가 이미지를 어떻게 디코딩할지에 대한 힌트를 제공합니다.                            |
| `className`      | `string \| undefined`                      |          | 이미지 요소에 적용할 추가 CSS 클래스를 지정합니다.                                 |

### Avatar.Fallback

| prop        | type                               | default | description                   |
| ----------- | ---------------------------------- | ------- | ----------------------------- |
| `className` | `string \| undefined`              |         | 폴백 요소에 적용할 추가 CSS 클래스를 지정합니다. |
| `style`     | `React.CSSProperties \| undefined` |         | 폴백 요소에 대한 인라인 스타일을 지정합니다.     |

### Avatar.Simple

| prop      | type                           | default    | description                                                 |
| --------- | ------------------------------ | ---------- | ----------------------------------------------------------- |
| `src`     | `string \| undefined`          |            | 아바타 이미지의 URL입니다. 지정하지 않으면 폴백이 표시됩니다.                        |
| `alt`     | `string`                       |            | 아바타 이미지를 설명하는 대체 텍스트입니다. 폴백 이니셜과 배경색을 생성하는 데에도 사용됩니다.       |
| `delayMs` | `number \| undefined`          | `0`        | 이미지가 로딩 중이거나 실패한 경우, 폴백을 표시하기까지의 지연 시간을 밀리초(ms) 단위로 지정합니다.  |
| `size`    | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'`     | 아바타의 전체 크기를 제어합니다.                                          |
| `shape`   | `'square' \| 'circle'`         | `'square'` | 아바타의 모서리 둥글기를 설정합니다. 'square'는 둥근 사각형, 'circle'은 완전한 원형입니다. |

## Accessibility Table

Avatar WAI-ARIA 표준에 기반한 웹 접근성(A11y)을 준수합니다. Vapor Avatar는 Radix 기능을 기반으로 구축되어 일부 웹 접근성은 Radix에서 제공하고 있습니다.

### 개발 시 준수해야 할 내용을 명시합니다.

| Props     | Description                                                                  |
| --------- | ---------------------------------------------------------------------------- |
| **label** | 아바타 이미지의 대체 텍스트를 지정합니다.<br />이미지를 불러오는 데에 실패한 경우, label의 첫 글자를 대체 UI로 사용합니다. |

**label Example:**

```tsx
<Avatar label="gds-logo"> 		
    <Avatar.Image src="https://gds-logo.webp" /></Avatar>
```

### 컴포넌트 내부적으로 준수되고 있는 접근성 기능을 명시합니다.

| Accessibility | 설명                                                                      |
| ------------- | ----------------------------------------------------------------------- |
| **label**     | 아바타 이미지의 대체 텍스트를 지정합니다. 이미지를 불러오는 데에 실패한 경우, label의 첫 글자를 대체 UI로 사용합니다. |
