# SourceCrop

문제가 나온 원본 자료의 근거 부분을 보여 준다. 근거가 있는 줄을 가운데로 한 가로 띠, 또는 전체 페이지에 근거 영역 표시를 얹은 모양이다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 해설에서 "이 문제는 자료의 이 부분에서 나왔어요"를 보여 줄 때 쓴다.
- 근거 줄만 보이려면 기본(띠), 전체 페이지에서 위치를 보이려면 `full`.

### 쓰지 않는다
- 그림이 문제의 일부일 때는 쓰지 않는다. `ImageBlock`을 쓴다.
- 근거 영역(`region`)이 없는데 `full`로 쓰지 않는다. 강조가 없는 그냥 페이지가 된다.

## 종류

| 이름 | 설명 |
| --- | --- |
| 띠 (기본) | 폭 전체, 높이 `height`(기본 110). 근거 영역이 세로 가운데에 오게 위치를 맞춘다. 옆으로는 자르지 않는다. |
| full | 페이지 전체를 폭에 맞춰 보여 주고 근거 영역에 2px `primary` 테두리와 옅은 파란 면을 얹는다. |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 띠 | 높이 110 (기본) | `height`로 바꾼다. 모서리 `radius.md`(12). |
| full | 높이 = 폭 ÷ 페이지 비율 | 비율을 알 때까지 400. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 불러오는 중 | `photo` 바탕이 먼저 보인다. |

## 사용 방법

### 기본

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

<SourceCrop uri={pageUrl} region={evidence} />
<SourceCrop uri={pageUrl} region={evidence} full />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `uri` | `string` | — | 필수 | 페이지 이미지 주소. |
| `region` | `Region \| null` | — | 선택 | 근거 영역(`{ x, y, width, height }`, 0~1 비율). 없으면 페이지 전체. |
| `height` | `number` | `110` | 선택 | 띠의 높이(px). 기본 110. |
| `full` | `boolean` | `false` | 선택 | `true`이면 전체 페이지에 근거 영역 표시를 얹어 보여 준다. 기본 `false`. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 모서리 | `radius.md`(12) |
| 근거 표시(full) | 2px `primary` 테두리 + `rgba(31,123,255,0.10)` 면, 영역보다 사방 3 크게. 이 색은 앱 코드가 직접 쓴 파란색이다(웹에서는 `primary` 10%를 쓴다) |
| 바탕 | 띠 `photo`, full `surface` |

## 접근성

- 이미지에는 이름이 없다. 부모에 "원본 자료의 근거 부분" 같은 이름을 붙인다.

## 잘한 예와 잘못한 예

- 잘한 예: 근거 줄이 띠의 가운데에 온다.
- 잘못한 예: 근거 영역 없이 전체 페이지를 띠로 자르면 엉뚱한 곳이 보인다.

## 함께 보는 컴포넌트

- [ImageBlock](https://developers.moring.co/tds/components/image-block.md): 문제에 쓰인 원본 자료의 한 영역을 오려 보여 준다. 영역 위에 라벨과 강조 고리를 얹을 수 있고, 눌러서 크게 볼 수 있다.
- [ZoomableImage](https://developers.moring.co/tds/components/zoomable-image.md): 페이지 이미지를 두 손가락으로 1배에서 4배까지 확대하고, 확대한 동안에만 끌어서 움직이며, 두 번 눌러 확대·축소하는 이미지다.