# Blocks

문제 본문, 보기, 해설을 이루는 블록(문단, 보기 상자, 수식, 표, 그래프, 그림)을 위에서 아래로 그린다. `RichText`는 그중 문단 하나다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 문제의 본문(stem), 보기(choices), 해설(explanation)을 그릴 때 같은 `Blocks`를 쓴다.
- 첫 문단을 문제 글자 스타일(`question`)로 그리려면 `lead`를 준다.
- 보기 안의 그림이나 그래프처럼 작게 그릴 곳에는 `compact`를 켠다.

### 쓰지 않는다
- 블록 종류를 직접 나눠 그리지 않는다. 새 블록 종류는 서버의 블록 정의와 함께 추가한다.
- 블록 사이 간격을 바꾸지 않는다(12, `compact`는 6).

## 종류

| 이름 | 설명 |
| --- | --- |
| p | 문단. `RichText` → `MathText`. |
| box | <보기>나 조건 상자. 항목에 라벨(ㄱ, ㄴ, (가))이 붙는다. `passage`면 지문 문단으로 그린다. |
| math | 가운데 정렬 수식. |
| table | 표. 머리글은 `muted`, 강조 칸은 `primarySoft`. |
| chart · image · diagram | `ChartBlock`, `ImageBlock`, `DiagramBlock` 문서를 본다. |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 블록 사이 | 12 (`compact`는 6) |  |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 시험지 서체 안 | `PaperType` 안에서는 상자와 표가 시험지의 줄 모양(검은 1px 선, 모서리 없음)이 되고 "<보 기>" 제목이 상자 위 선에 걸린다. |

## 사용 방법

### 문제 본문

```tsx
import { Blocks } from '@/ui/blocks/Blocks';

<Blocks blocks={content.stem} assets={assets} lead="question" />
```

### 보기 안에서 작게

```tsx
<Blocks blocks={choice.blocks} assets={assets} compact />
```

### 문단 하나

```tsx
import { RichText } from '@/ui/blocks/Blocks';

<RichText text={block.text} variant="small" tint={color.textSecondary} />
```

### 속성(props)

#### Blocks

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `blocks` | `Block[]` | — | 필수 | 블록 목록. 종류: `p`, `box`, `math`, `table`, `chart`, `image`, `diagram`. |
| `assets` | `Assets \| null` | — | 선택 | 그림 블록이 쓰는 페이지 이미지 목록. |
| `variant` | `TextVariant` | `'body'` | 선택 | 문단의 글자 스타일. 기본 `"body"`. |
| `lead` | `TextVariant` | — | 선택 | 첫 문단의 글자 스타일(문제 본문용). |
| `compact` | `boolean` | — | 선택 | `true`이면 간격과 그림 크기를 줄인다. |
| `blank` | `ReactElement` | — | 선택 | 첫 문단의 `____` 자리에 넣을 요소. |

#### RichText

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `text` | `Rich` | — | 필수 | 미리 그려진 글(`{ segs }`). |
| `variant` | `TextVariant` | `'body'` | 선택 | 글자 스타일. 기본 `"body"`. |
| `tint` | `string` | — | 선택 | 글자 색. |
| `blank` | `ReactElement` | — | 선택 | `____` 자리에 넣을 요소. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| box | 1px `lineStrong` 테두리, 모서리 14, 안쪽 14, `well` 바탕 |
| table | 1px `lineStrong`, 모서리 `radius.md`(12), 칸 안쪽 가로 4·세로 8, 머리글 `muted`, 강조 칸 `primarySoft` |
| 간격 | 블록 사이 12, `compact` 6 |
| 시험지 | 선 `text` 1px, 모서리 0, 표 칸 선도 `text` |

## 접근성

- 보기 상자와 지문은 "지문. ㄱ … ㄴ …"처럼 전체 내용을 이름으로 가진다. 표는 `summary` 역할이다.
- 수식, 그래프, 그림은 각 블록이 접근성 이름을 준다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 표 머리글 글자 | `text` | `muted` | 15.68:1 통과 | 14.08:1 통과 | 14.76:1 통과 | 9.62:1 통과 | 4.5:1 |
| 강조 칸 글자 | `text` | `primarySoft` | 15.05:1 통과 | 12.52:1 통과 | 15.09:1 통과 | 7.13:1 통과 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: 본문, 보기, 해설 모두 같은 `Blocks`로 그린다.
- 잘못한 예: 보기 안의 그림을 크게 그리면 보기 한 줄이 화면을 차지한다. `compact`를 켠다.

## 함께 보는 컴포넌트

- [MathText](https://developers.moring.co/tds/components/math-text.md): 수식이 섞인 글을 그린다. 서버가 미리 그려 둔 수식(SVG)을 글자 사이에 끼워 넣고, 없으면 읽을 수 있는 글자로 대신 보여 준다.
- [ChartBlock](https://developers.moring.co/tds/components/chart-block.md): 문제와 해설 안의 그래프(선, 막대, 점)를 그린다. 함수 그래프는 교과서처럼 원점을 지나는 화살표 축으로, 자료 그래프는 격자와 눈금과 범례로 그린다.
- [DiagramBlock](https://developers.moring.co/tds/components/diagram-block.md): 선, 도형, 글자, 회로 부품(저항, 전지, 전구, 스위치), 스프링 같은 기본 모양으로 만든 도식을 그린다. 컨테이너 폭에 맞게 줄어든다.
- [ImageBlock](https://developers.moring.co/tds/components/image-block.md): 문제에 쓰인 원본 자료의 한 영역을 오려 보여 준다. 영역 위에 라벨과 강조 고리를 얹을 수 있고, 눌러서 크게 볼 수 있다.
- [PaperType](https://developers.moring.co/tds/components/paper-type.md): 안쪽의 모든 글자를 시험지 서체(Noto Serif KR)로 바꾸는 감싸개다. 모의고사 시험지 화면에 쓴다.