# ImageBlock

문제에 쓰인 원본 자료의 한 영역을 오려 보여 준다. 영역 위에 라벨과 강조 고리를 얹을 수 있고, 눌러서 크게 볼 수 있다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 자료 사진 속 그림, 표, 그래프가 문제에 필요할 때 `Blocks`가 자동으로 부른다.
- 모의고사 문제를 위해 AI가 그린 그림도 같은 블록이다. 이 그림에는 `AiMark`(`overlay`)가 자동으로 붙는다.

### 쓰지 않는다
- 전체 페이지를 보여 줄 때는 쓰지 않는다. `SourceCrop`의 `full`이나 `ZoomableImage`를 쓴다.
- `alt` 없이 쓰지 않는다. 그림 설명이 접근성 이름이다.

## 종류

| 이름 | 설명 |
| --- | --- |
| 영역 오려내기 | `part`와 `page`의 이미지에서 `region`(0~1 비율)만 보여 준다. |
| 라벨 | `labels`: 영역 위의 글자(A, B)와 선택적 지시선. |
| 고리 | `rings`: 강조할 영역 둘레의 고리. |
| AI 그림 | `blob`: AI가 그린 그림의 저장 경로. |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 폭 = 컨테이너 | `compact`면 작게. 오른쪽 아래의 확대 버튼은 26 원(`rgba(12,18,34,0.45)`). |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 확대 | 눌러서 검은 바탕(`rgba(8,10,16,0.92)`)의 전체 화면 보기로 연다. 오른쪽 위에 닫기 버튼(40 원). |
| 자료 없음 | 이미지를 찾지 못하면 `well` 상자에 "(그림: {alt})"를 보인다. |
| 라벨 | 흰색 94% 상자(최소 26 × 24, 모서리 7)에 굵은 글자. |

## 사용 방법

### 기본

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

<ImageBlock block={block} assets={assets} compact={inChoice} />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `block` | `ImageB` | — | 필수 | 그림 블록(`{ t: "image", part, page, region, labels?, rings?, alt, blob? }`). |
| `assets` | `Assets \| null` | — | 선택 | 페이지 이미지 목록(버전 부분 id → 경로). |
| `compact` | `boolean` | — | 선택 | `true`이면 보기 안에 들어가게 작게 그린다. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 확대 버튼 | 26 원, `rgba(12,18,34,0.45)`, 오른쪽 아래 8 |
| 라벨 | 흰색 94% 바탕, 모서리 7, 글자 굵게 |
| 확대 화면 | 배경 `rgba(8,10,16,0.92)`, 닫기 40 원 |
| 자리 색 | 이미지가 오기 전 `photo` |

## 접근성

- 이미지의 이름은 블록의 `alt`다. 그림 속 글자나 값은 `alt`에 풀어 쓴다.
- 확대 버튼에는 이름이 있다.

## 잘한 예와 잘못한 예

- 잘한 예: `alt`에 그림이 말해 주는 내용을 쓴다.
- 잘못한 예: `alt` 없이 그림만 두면 그림이 보이지 않는 사용자에게 아무 내용도 전달되지 않는다.

## 함께 보는 컴포넌트

- [SourceCrop](https://developers.moring.co/tds/components/source-crop.md): 문제가 나온 원본 자료의 근거 부분을 보여 준다. 근거가 있는 줄을 가운데로 한 가로 띠, 또는 전체 페이지에 근거 영역 표시를 얹은 모양이다.
- [ZoomableImage](https://developers.moring.co/tds/components/zoomable-image.md): 페이지 이미지를 두 손가락으로 1배에서 4배까지 확대하고, 확대한 동안에만 끌어서 움직이며, 두 번 눌러 확대·축소하는 이미지다.
- [AiMark](https://developers.moring.co/tds/components/ai-mark.md): 생성형 AI가 만든 결과임을 알리는 표시다. AI가 만든 모든 결과에 붙인다.
- [Blocks](https://developers.moring.co/tds/components/blocks.md): 문제 본문, 보기, 해설을 이루는 블록(문단, 보기 상자, 수식, 표, 그래프, 그림)을 위에서 아래로 그린다. `RichText`는 그중 문단 하나다.