import { Canvas, Meta, Controls } from '@storybook/addon-docs';
import * as AvatarStories from './Avatar.stories';

# Avatar

<Meta of={AvatarStories} />

<br />

## Overview

사용자 프로필 아이콘으로 사용자를 대표하는 이미지를 사진이나 이니셜로 표현하는 컴포넌트 입니다.

<Canvas of={AvatarStories.Default} />

<Controls />

<br />

## Usage

기본적인 <strong>Avatar</strong> 컴포넌트 사용방법 입니다.

`fallback`는 이미지가 로드되지 않거나 오류날 경우 표시됩니다.

이미지 로드를 기다리는 `delayMs`는 300ms로 설정되어 있습니다.

```vue
import { Avatar } from '@lotte-innovate/lui-vue';

<template>
  <Avatar imagePath="이미지 경로" />
</template>
```

## API Reference

### Root

아바타의 모든 부분을 포함합니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>as</td>
      <td>AsTag | Component</td>
      <td>
        이 구성 요소가 렌더링되어야 하는 요소 또는 구성 요소입니다. asChild로 덮어쓸 수 있습니다.
      </td>
      <td>span</td>
    </tr>
    <tr>
      <td>asChild</td>
      <td>boolean</td>
      <td>자식으로 전달된 기본 렌더링 요소를 변경하여 해당 props와 동작을 병합합니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>imagePath</td>
      <td>string</td>
      <td>아바타 이미지에 들어가는 경로를 입력합니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>imagePath</td>
      <td>string</td>
      <td>아바타 이미지에 들어가는 경로를 입력합니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>fallbackClass</td>
      <td>string</td>
      <td>fallback 커스텀 클랙스를 입력합니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

## Variant

### Radius Props

`radius` props는 컴포넌트의 둥글기를 변경합니다.

기본 값은 `full` 입니다.

<Canvas of={AvatarStories.Radius} />

### Size Props

`size` props는 컴포넌트의 크기를 변경합니다.

기본 값은 `3` 입니다.

<Canvas of={AvatarStories.Size} />

### Scaling Props

`scaling` props는 컴포넌트의 비율을 변경합니다.

기본 값은 `100%` 입니다.

<Canvas of={AvatarStories.Scaling} />

### Appearance Props

`appearance` props는 컴포넌트의 스타일을 변경합니다.

기본 값은 `solid` 입니다.

<Canvas of={AvatarStories.Appearance} />