# DiagramBlock

선, 도형, 글자, 회로 부품(저항, 전지, 전구, 스위치), 스프링 같은 기본 모양으로 만든 도식을 그린다. 컨테이너 폭에 맞게 줄어든다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 과학, 물리 문제의 간단한 도식을 `Blocks`가 자동으로 부른다.

### 쓰지 않는다
- 사진이나 복잡한 그림에는 쓰지 않는다. `ImageBlock`을 쓴다.

## 종류

| 이름 | 설명 |
| --- | --- |
| 모양 | `line`, `arrow`, `rect`, `circle`, `ellipse`, `polyline`, `polygon`, `text`, `resistor`, `battery`, `bulb`, `switch`, `dot`, `ground`, `spring`. |
| tone | `default`(글자색), `accent`(주색), `muted`(약한 색)로 모양마다 색을 고른다. `dashed`면 점선. |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 폭 = 컨테이너, 높이 = 폭 × (도식 높이/너비) | `compact`면 최대 높이가 낮다. 선 두께는 도식 단위 × 1.1. |

## 상태

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

## 사용 방법

### 기본

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

<DiagramBlock block={block} compact={inChoice} />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `block` | `Diagram` | — | 필수 | 도식 블록(`{ t: "diagram", w, h, shapes }`). `shapes`는 모양 목록. |
| `compact` | `boolean` | — | 선택 | `true`이면 보기 안에 들어가게 작게 그린다. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 선 | 두께 = 도식 단위 × 1.1, 둥근 끝과 꺾임 |
| 색 | `tone`에 따라 `text`, `primary`, `textTertiary` |
| 접근성 이름 | "그림: {도식 안의 글자들}" |

## 접근성

- 그림 전체에 "그림: …" 이름이 붙고, 도식 안의 글자(전지, 전구)가 이름에 들어간다. 도식의 연결 관계는 문제 글에도 쓴다.

## 잘한 예와 잘못한 예

- 잘한 예: 도식 안의 글자(전지, 전구)를 `text` 모양으로 함께 넣는다.
- 잘못한 예: 사진이나 복잡한 그림을 도형으로 흉내 내지 않는다. `ImageBlock`을 쓴다.

## 함께 보는 컴포넌트

- [Blocks](https://developers.moring.co/tds/components/blocks.md): 문제 본문, 보기, 해설을 이루는 블록(문단, 보기 상자, 수식, 표, 그래프, 그림)을 위에서 아래로 그린다. `RichText`는 그중 문단 하나다.
- [ChartBlock](https://developers.moring.co/tds/components/chart-block.md): 문제와 해설 안의 그래프(선, 막대, 점)를 그린다. 함수 그래프는 교과서처럼 원점을 지나는 화살표 축으로, 자료 그래프는 격자와 눈금과 범례로 그린다.
- [ImageBlock](https://developers.moring.co/tds/components/image-block.md): 문제에 쓰인 원본 자료의 한 영역을 오려 보여 준다. 영역 위에 라벨과 강조 고리를 얹을 수 있고, 눌러서 크게 볼 수 있다.