# Avatar

사용자의 사진, 또는 닉네임 첫 글자를 브랜드 그라데이션 원 위에 보여 준다. `NameLine`은 닉네임, 공식 배지, @아이디를 한 줄로 놓는다.

- 분류: 데이터 표시
- 가져오기: `import { Avatar, NameLine } from '@/ui/community/Avatar'`
- 코드 위치: `apps/mobile/src/ui/community/Avatar.tsx:10` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/avatar

## 미리보기

실제 컴포넌트를 그린 화면은 https://developers.moring.co/tds/components/avatar 에서 볼 수 있다. 서비스 색 선택기로 Mordy, Morit 색을 바꿔 볼 수 있다.

## 언제 쓰는가

### 쓴다
- 커뮤니티의 글쓴이, 프로필 화면에 쓴다.
- 공식 계정은 `official`로 오른쪽 아래에 파란 체크 배지를 붙인다.
- 이름 줄은 `NameLine`으로 쓴다. 긴 @아이디가 먼저 …으로 줄어든다.

### 쓰지 않는다
- 사진이 없는데 빈 회색 원을 쓰지 않는다. 첫 글자 원이 자동으로 나온다.
- 공식 배지를 일반 사용자에게 붙이지 않는다.

## 종류

| 이름 | 설명 |
| --- | --- |
| 사진 | `uri` 또는 `path`가 있으면 사진. |
| 첫 글자 | 사진이 없으면 `gradient` 원에 닉네임 첫 글자(영문은 대문자). 글자 크기는 지름의 0.42. |
| official | 배지 크기는 max(14, 지름 × 0.36). |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 지름 40 | `size`로 바꾼다. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 기본 | 기본 모습이다. |

## 사용 방법

### 기본

```tsx
import { Avatar, NameLine } from '@/ui/community/Avatar';

<Avatar name={profile.nickname} path={profile.avatarPath} official={profile.official} />
<NameLine nickname={profile.nickname} handle={profile.handle} official={profile.official} />
```

### 속성(props)

#### Avatar

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `path` | `string \| null` | — | 선택 | 저장소에 있는 사진 경로. |
| `uri` | `string \| null` | — | 선택 | 사진 주소. `path`보다 우선한다. |
| `name` | `string` | — | 필수 | 닉네임. 첫 글자 원과 접근성에 쓰인다. |
| `size` | `number` | `40` | 선택 | 지름(px). 기본 40. |
| `official` | `boolean` | — | 선택 | `true`이면 공식 배지를 붙인다. |

#### NameLine

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `nickname` | `string` | — | 필수 | 닉네임(굵게, 한 줄). |
| `handle` | `string` | — | 선택 | @아이디. 없으면 생략. |
| `official` | `boolean` | — | 선택 | `true`이면 닉네임 옆에 공식 배지. |
| `size` | `'body' \| 'small'` | `'body'` | 선택 | `"body"`(기본) 또는 `"small"`. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| Avatar | 지름 40, 원, 사진은 `photo` 바탕. 첫 글자 원은 `gradient`(대각선), 글자 white Bold |
| 배지 | `BadgeCheck`, 채움 `primary`, 아이콘 white, 위치 오른쪽 아래 -2, 흰 원 배경 |
| NameLine | 닉네임 `bodyStrong`(최대 66%), 배지 15, @아이디 `small` `textTertiary`, 사이 4 |

## 접근성

- 사진은 `accessibilityIgnoresInvertColors`(색 반전에서 제외).
- 이름은 닉네임 글자로 읽힌다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 첫 글자 (17px 굵게) | `onPrimaryStrong` | `gradient` (양 끝 중 낮은 값) | 3.08:1 미달 | 3.08:1 미달 | 4.60:1 통과 | 5.48:1 통과 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: 사진이 없으면 첫 글자 원이 나온다.
- 잘못한 예: 닉네임이 길면 NameLine은 @아이디부터 줄인다. 닉네임을 두 줄로 늘이지 않는다.

## 함께 보는 컴포넌트

- [BrandMark](https://developers.moring.co/tds/components/brand-mark.md): Mordy의 심벌(웃는 얼굴이 복습 화살표로 이어지는 모양)을 브랜드 타일 위에 그린 이미지다.
- [WellRow](https://developers.moring.co/tds/components/well-row.md): 패널 안의 목록 한 줄이다. 옅은 홈(`well`)에 앞 아이콘 타일, 제목, 보조 줄, 뒤 요소가 놓인다.