SourceCrop

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

이 페이지의 목차

미리보기#

실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.

띠 (기본). 미리보기의 그림은 실제 자료가 아니라 모양을 보여 주는 그림이다.

full + 근거 영역

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

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

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

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

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

SourceCrop 속성
이름	타입	기본값	필수	설명
`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

잘한 예근거 줄이 띠의 가운데에 온다.

region 없는 띠

잘못한 예근거 영역 없이 전체 페이지를 띠로 자르면 엉뚱한 곳이 보인다.

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