# PaperType

안쪽의 모든 글자를 시험지 서체(Noto Serif KR)로 바꾸는 감싸개다. 모의고사 시험지 화면에 쓴다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 모의고사 문제지처럼 인쇄된 시험지처럼 보여야 하는 화면 전체를 감싼다.
- 안의 `AppText`, `MathText`, `Blocks`가 모두 명조체로 바뀌고 박스와 표는 시험지의 줄 모양을 따른다.

### 쓰지 않는다
- 일반 학습 화면에 쓰지 않는다. 일반 화면의 글꼴은 Pretendard 하나다.
- 화면 일부에만 쓰지 않는다. 글꼴이 섞이면 어색하다.

## 종류

종류가 없다.

## 크기

크기가 없다. 자식을 그대로 감싼다.

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 굵기 대응 | Pretendard의 Bold, SemiBold, ExtraBold는 Noto Serif KR Bold로, 나머지는 Regular로 바뀐다. |

## 사용 방법

### 기본

```tsx
import { PaperType } from '@/ui/typeface';

<PaperType>
  <PaperQuestion question={q} />
</PaperType>
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `children` | `ReactNode` | — | 필수 | 시험지 서체로 그릴 내용. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 글꼴 | Noto Serif KR Regular, Bold |
| 구현 | React Context로 안쪽 `AppText`에 알린다 |

## 접근성

- 글꼴만 바꾼다. 글자 크기와 접근성 이름은 그대로다.

## 잘한 예와 잘못한 예

- 잘한 예: 시험지 화면 전체를 한 번에 감싼다.
- 잘못한 예: 일반 화면 안에 일부만 명조체로 두지 않는다.

## 함께 보는 컴포넌트

- [AppText](https://developers.moring.co/tds/components/app-text.md): 앱의 모든 글자를 그리는 컴포넌트다. 글자 스타일 11종 중 하나를 `variant`로 고르면 크기, 줄 높이, 굵기, 자간이 정해진다.
- [MathText](https://developers.moring.co/tds/components/math-text.md): 수식이 섞인 글을 그린다. 서버가 미리 그려 둔 수식(SVG)을 글자 사이에 끼워 넣고, 없으면 읽을 수 있는 글자로 대신 보여 준다.
- [Blocks](https://developers.moring.co/tds/components/blocks.md): 문제 본문, 보기, 해설을 이루는 블록(문단, 보기 상자, 수식, 표, 그래프, 그림)을 위에서 아래로 그린다. `RichText`는 그중 문단 하나다.