# BrandMark

Mordy의 심벌(웃는 얼굴이 복습 화살표로 이어지는 모양)을 브랜드 타일 위에 그린 이미지다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- Mordy 앱의 소개, 로그인, 정보 화면에서 앱을 나타낼 때 쓴다.

### 쓰지 않는다
- Morit 화면에 쓰지 않는다. 이 이미지는 Mordy의 로고이고 서비스 색을 따르지 않는다.
- 타일 바깥의 흰 심벌만 따로 쓰지 않는다. 흰 배경에서는 보이지 않는다. 항상 파란 타일 위에 둔다.
- 이미지 비율을 바꾸지 않는다.

## 종류

종류가 없다.

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 40 × 40 | `size`로 바꾼다. 원본은 384 × 384다. |

## 상태

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

## 사용 방법

### 기본

```tsx
import { BrandMark } from '@/ui/BrandMark';

<BrandMark size={72} />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `size` | `number` | `40` | 선택 | 한 변의 길이(px). 기본 40. |
| `style` | `StyleProp<ImageStyle>` | — | 선택 | 이미지에 적용할 추가 스타일. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 원본 | apps/mobile/assets/brand/tile.png, 384 × 384, 투명 배경 PNG |
| 접근성 이름 | "Mordy 로고" |
| 색 | 고정(파란 그라데이션 타일). 서비스 색 토큰을 따르지 않는다. |

## 접근성

- 이미지 이름은 "Mordy 로고"다.

## 잘한 예와 잘못한 예

- 잘한 예: 원본 비율 그대로, 정사각형으로 쓴다.
- 잘못한 예: 가로로 늘이면 로고가 찌그러진다.

## 함께 보는 컴포넌트

- [Avatar](https://developers.moring.co/tds/components/avatar.md): 사용자의 사진, 또는 닉네임 첫 글자를 브랜드 그라데이션 원 위에 보여 준다. `NameLine`은 닉네임, 공식 배지, @아이디를 한 줄로 놓는다.
- [AppText](https://developers.moring.co/tds/components/app-text.md): 앱의 모든 글자를 그리는 컴포넌트다. 글자 스타일 11종 중 하나를 `variant`로 고르면 크기, 줄 높이, 굵기, 자간이 정해진다.