# MathText

수식이 섞인 글을 그린다. 서버가 미리 그려 둔 수식(SVG)을 글자 사이에 끼워 넣고, 없으면 읽을 수 있는 글자로 대신 보여 준다.

- 분류: 학습 콘텐츠
- 가져오기: `import { MathText } from '@/ui/MathText'`
- 코드 위치: `apps/mobile/src/ui/MathText.tsx:21` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/math-text

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 문제, 보기, 해설, 개념처럼 수식이 들어갈 수 있는 모든 글에 `AppText` 대신 쓴다.
- `____`(밑줄 네 개)를 빈칸으로 바꾸려면 `blank`에 요소를 넘긴다.
- 강조(굵게), 밑줄, 표시(형광펜) 표식이 있는 글은 `segments`로 넘긴다.

### 쓰지 않는다
- 수식이 없는 평범한 라벨에는 쓰지 않는다. `AppText`를 쓴다.
- 수식을 이미지로 따로 만들어 넣지 않는다. 글자 크기 설정을 따르지 않게 된다.

## 종류

| 이름 | 설명 |
| --- | --- |
| 미리 그린 수식 | `segments`가 있으면 수식은 SVG다. 크기는 글자 크기를 따르고, 글자의 x-높이(크기의 절반)에 맞춰 그려진다. |
| 글자만 | `segments`가 없으면 `$…$`의 달러 기호를 빼고 읽을 수 있는 글자로 보여 준다. |
| 표식 | `b` 굵게, `u` 시험지식 밑줄, `hl` 단어 뒤 옅은 형광 표시. |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 글자 스타일 | `variant`(기본 `body`) | 수식은 시스템 글자 크기(최대 1.6배)와 앱 글자 크기 배율을 함께 따라 커진다. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 빈칸 | `blank`가 있고 글에 `____`가 있으면 그 자리에 요소를 넣는다. |
| 긴 문장 | 단어 단위로 나뉘어 수식 둘레에서도 줄바꿈이 된다. 한국어 단어는 중간에서 끊기지 않는다. |

## 사용 방법

### 기본

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

<MathText text={question.text} segments={question.render?.text} variant="question" />
```

### 빈칸

```tsx
<MathText text="x = ____ 일 때 값은 0이다." blank={<View style={styles.blank} />} />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `text` | `string` | — | 필수 | 글. 수식은 `$…$`로 쓴다. |
| `segments` | `Segment[] \| null` | — | 선택 | 서버가 미리 그린 조각 목록(`{ t: "text", v }` 또는 `{ t: "math", svg, w, h, va, tex }`). 있으면 `text`보다 우선한다. |
| `variant` | `TextVariant` | `'body'` | 선택 | 글자 스타일. 기본 `"body"`. |
| `color` | `string` | `palette.text` | 선택 | 글자 색. 기본 `color.text`. |
| `style` | `TextStyle` | — | 선택 | 추가 글자 스타일. |
| `blank` | `ReactElement` | — | 선택 | `____` 자리에 넣을 요소. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 수식 크기 | 글자 크기 × (시스템 배율, 최대 1.6) × (앱 배율). 1ex = 크기 × 0.5 |
| 표식 | 굵게 = Bold, 밑줄 = 시험지식 밑줄, 표시 = 단어 뒤 옅은 배경 |
| 글자 폴백 | `$x^2$` → `x^2` (달러 기호 제거) |

## 접근성

- 수식은 그림이지만 원문(`tex`)이 읽을 수 있는 글자로 보존된다. 접근성 이름에는 글자 폴백을 쓴다.
- 글자 크기 설정과 시스템 설정에 따라 커지므로 부모의 높이를 고정하지 않는다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 본문 | `text` | `surface` | 17.15:1 통과 | 15.25:1 통과 | 16.13:1 통과 | 10.92:1 통과 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: 수식이 있을 수 있는 모든 글에 쓴다.
- 잘못한 예: 수식을 이미지로 따로 넣지 않는다. 글자 크기 설정을 따르지 않는다.

## 함께 보는 컴포넌트

- [Blocks](https://developers.moring.co/tds/components/blocks.md): 문제 본문, 보기, 해설을 이루는 블록(문단, 보기 상자, 수식, 표, 그래프, 그림)을 위에서 아래로 그린다. `RichText`는 그중 문단 하나다.
- [AppText](https://developers.moring.co/tds/components/app-text.md): 앱의 모든 글자를 그리는 컴포넌트다. 글자 스타일 11종 중 하나를 `variant`로 고르면 크기, 줄 높이, 굵기, 자간이 정해진다.
- [PaperType](https://developers.moring.co/tds/components/paper-type.md): 안쪽의 모든 글자를 시험지 서체(Noto Serif KR)로 바꾸는 감싸개다. 모의고사 시험지 화면에 쓴다.