ImageBlock

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

이 페이지의 목차

미리보기#

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

ABAI 생성 그림

라벨, 고리, AI 표시. 미리보기의 그림은 실제 자료가 아니라 모양을 보여 주는 그림이다.

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

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

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

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

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

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

ABAI 생성 그림

잘한 예alt에 그림이 말해 주는 내용을 쓴다.

alt가 빈 그림

잘못한 예alt 없이 그림만 두면 그림이 보이지 않는 사용자에게 아무 내용도 전달되지 않는다.

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