# AppText

앱의 모든 글자를 그리는 컴포넌트다. 글자 스타일 11종 중 하나를 `variant`로 고르면 크기, 줄 높이, 굵기, 자간이 정해진다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 화면의 모든 글자에 React Native의 `Text` 대신 쓴다.
- 글자 크기와 굵기는 `variant`로 고르고, 색은 `color`에 토큰을 넘긴다.
- 굵기만 바꾸려면 `weight`를 쓴다.

### 쓰지 않는다
- `Text`를 직접 쓰지 않는다. 앱 설정의 글자 크기 배율과 시험지 서체가 적용되지 않는다.
- `style`로 `fontSize`만 바꾸지 않는다. 줄 높이를 함께 주어야 한다(없으면 크기의 1.34배로 자동 보정되지만 의도한 값이 아니다).
- 글자 색을 HEX로 직접 쓰지 않는다. `color.text` 같은 토큰을 쓴다.

## 종류

| 이름 | 설명 |
| --- | --- |
| variant | `display`, `title`, `headline`, `bodyStrong`, `body`(기본), `small`, `smallStrong`, `caption`, `button`, `metric`, `question`. 값은 글자 페이지의 표에 있다. |
| weight | `regular`~`extrabold`. 앱의 글꼴 이름이 굵기별로 나뉘어 있어서 굵기는 글꼴을 바꾸는 방식으로 적용된다. |
| align | `left`, `center`, `right` 같은 글자 정렬. |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 글자 크기 설정 | 0.92 / 1 / 1.12 / 1.24배 | 앱 설정의 글자 크기 배율이 크기와 줄 높이에 곱해진다. 시스템 글자 크기는 최대 1.6배까지 반영된다. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 시험지 서체 | `PaperType` 안에서는 모든 글자가 Noto Serif KR로 바뀐다. |

## 사용 방법

### 기본

```tsx
import { AppText } from '@/ui/AppText';
import { color } from '@/ui/tokens';

<AppText variant="headline">오늘의 복습</AppText>
<AppText variant="small" color={color.textSecondary}>자료 18개 · 복습 12개</AppText>
```

### 굵기와 정렬

```tsx
<AppText variant="body" weight="bold" align="center">완료했어요</AppText>
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `variant` | `TextVariant` | `'body'` | 선택 | 글자 스타일 이름. 기본 `"body"`. |
| `color` | `string` | — | 선택 | 글자 색. 기본 `color.text`. |
| `weight` | `keyof typeof font` | — | 선택 | 굵기(`"regular"` ~ `"extrabold"`). 지정하면 `variant`의 굵기를 덮는다. |
| `align` | `TextStyle['textAlign']` | — | 선택 | 글자 정렬. |
| `style` | `(React Native)` | — | 선택 | 추가 스타일. `fontSize`를 바꾸면 줄 높이가 없을 때 크기의 1.34배로 자동으로 정해진다. |

나머지 속성은 `TextProps`를 그대로 받는다.

위에 적지 않은 나머지 속성(`numberOfLines`, `adjustsFontSizeToFit`, `accessibilityRole` 등)은 React Native `Text`를 그대로 받는다. 시스템 글자 크기 배율은 `maxFontSizeMultiplier=1.6`으로 제한된다.

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 글꼴 | Pretendard (굵기별 파일). 시험지 서체 안에서는 Noto Serif KR |
| 기본 색 | `text` |
| 글자 크기 배율 | 앱 설정 배율 × (크기, 줄 높이)를 소수 첫째 자리(줄 높이는 정수)로 반올림 |
| 여백 | `includeFontPadding: false`, 세로 가운데 정렬 |

## 접근성

- 글자 크기 배율에서 글자가 커져도 잘리지 않게 부모의 높이를 고정하지 않는다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 본문 (15px) | `text` | `surface` | 17.15:1 통과 | 15.25:1 통과 | 16.13:1 통과 | 10.92:1 통과 | 4.5:1 |
| 보조 글자 (13px) | `textSecondary` | `surface` | 4.23:1 미달 | 6.95:1 통과 | 4.88:1 통과 | 7.11:1 통과 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: `variant`와 색 토큰으로 지정한다.
- 잘못한 예: 크기만 바꾸고 줄 높이를 정하지 않으면 글자 아래가 잘린다.

## 함께 보는 컴포넌트

- [PaperType](https://developers.moring.co/tds/components/paper-type.md): 안쪽의 모든 글자를 시험지 서체(Noto Serif KR)로 바꾸는 감싸개다. 모의고사 시험지 화면에 쓴다.
- [MathText](https://developers.moring.co/tds/components/math-text.md): 수식이 섞인 글을 그린다. 서버가 미리 그려 둔 수식(SVG)을 글자 사이에 끼워 넣고, 없으면 읽을 수 있는 글자로 대신 보여 준다.