Blocks
문제 본문, 보기, 해설을 이루는 블록(문단, 보기 상자, 수식, 표, 그래프, 그림)을 위에서 아래로 그린다. RichText는 그중 문단 하나다.
- 분류
- 학습 콘텐츠
- 가져오기
import { Blocks, RichText } from '@/ui/blocks/Blocks'- 코드 위치
apps/mobile/src/ui/blocks/Blocks.tsx:24
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
다음 중 옳은 것을 모두 고르시오.
보기
ㄱ광합성은 엽록체에서 일어난다.
ㄴ호흡은 미토콘드리아에서 일어난다.
| 구분 | 광합성 | 호흡 |
|---|---|---|
| 장소 | 엽록체 | 미토콘드리아 |
| 기체 | CO₂ 흡수 | O₂ 흡수 |
보 기
ㄱ.광합성은 엽록체에서 일어난다.
ㄴ.호흡은 미토콘드리아에서 일어난다.
| 구분 | 광합성 | 호흡 |
|---|---|---|
| 장소 | 엽록체 | 미토콘드리아 |
| 기체 | CO₂ 흡수 | O₂ 흡수 |
언제 쓰는가#
쓴다
- 문제의 본문(stem), 보기(choices), 해설(explanation)을 그릴 때 같은
Blocks를 쓴다. - 첫 문단을 문제 글자 스타일(
question)로 그리려면lead를 준다. - 보기 안의 그림이나 그래프처럼 작게 그릴 곳에는
compact를 켠다.
쓰지 않는다
- 블록 종류를 직접 나눠 그리지 않는다. 새 블록 종류는 서버의 블록 정의와 함께 추가한다.
- 블록 사이 간격을 바꾸지 않는다(12,
compact는 6).
종류#
| 이름 | 설명 |
|---|---|
| p | 문단. RichText → MathText. |
| box | <보기>나 조건 상자. 항목에 라벨(ㄱ, ㄴ, (가))이 붙는다. passage면 지문 문단으로 그린다. |
| math | 가운데 정렬 수식. |
| table | 표. 머리글은 muted, 강조 칸은 primarySoft. |
| chart · image · diagram | ChartBlock, ImageBlock, DiagramBlock 문서를 본다. |
크기#
| 이름 | 값 | 설명 |
|---|---|---|
| 블록 사이 | 12 (`compact`는 6) |
상태#
| 상태 | 모습과 동작 |
|---|---|
| 시험지 서체 안 | PaperType 안에서는 상자와 표가 시험지의 줄 모양(검은 1px 선, 모서리 없음)이 되고 "<보 기>" 제목이 상자 위 선에 걸린다. |
사용 방법#
문제 본문
문제 본문
import { Blocks } from '@/ui/blocks/Blocks';
<Blocks blocks={content.stem} assets={assets} lead="question" />보기 안에서 작게
보기 안에서 작게
<Blocks blocks={choice.blocks} assets={assets} compact />문단 하나
문단 하나
import { RichText } from '@/ui/blocks/Blocks';
<RichText text={block.text} variant="small" tint={color.textSecondary} />속성(props)#
Blocks
| 이름 | 타입 | 기본값 | 필수 | 설명 |
|---|---|---|---|---|
blocks | Block[] | — | 필수 | 블록 목록. 종류: p, box, math, table, chart, image, diagram. |
assets | Assets | null | — | 선택 | 그림 블록이 쓰는 페이지 이미지 목록. |
variant | TextVariant | 'body' | 선택 | 문단의 글자 스타일. 기본 "body". |
lead | TextVariant | — | 선택 | 첫 문단의 글자 스타일(문제 본문용). |
compact | boolean | — | 선택 | true이면 간격과 그림 크기를 줄인다. |
blank | ReactElement | — | 선택 | 첫 문단의 ____ 자리에 넣을 요소. |
RichText
| 이름 | 타입 | 기본값 | 필수 | 설명 |
|---|---|---|---|---|
text | Rich | — | 필수 | 미리 그려진 글({ segs }). |
variant | TextVariant | 'body' | 선택 | 글자 스타일. 기본 "body". |
tint | string | — | 선택 | 글자 색. |
blank | ReactElement | — | 선택 | ____ 자리에 넣을 요소. |
치수와 토큰#
- box
- 1px
lineStrong테두리, 모서리 14, 안쪽 14,well바탕 - table
- 1px
lineStrong, 모서리radius.md(12), 칸 안쪽 가로 4·세로 8, 머리글muted, 강조 칸primarySoft - 간격
- 블록 사이 12,
compact6 - 시험지
- 선
text1px, 모서리 0, 표 칸 선도text
접근성#
- 보기 상자와 지문은 "지문. ㄱ … ㄴ …"처럼 전체 내용을 이름으로 가진다. 표는
summary역할이다. - 수식, 그래프, 그림은 각 블록이 접근성 이름을 준다.
글자 색 대비
글자 크기별 기준: 작은 글자는 4.5:1 이상, 큰 글자(굵은 18.66px 이상)는 3:1 이상이다. 값은 선택한 서비스와 모드의 토큰으로 계산했다.
| 쓰임 | 글자색 | 바탕 | 대비 | 기준 |
|---|---|---|---|---|
| 표 머리글 글자 | text | muted | 15.68:1 통과14.08:1 통과14.76:1 통과9.62:1 통과 | 4.5:1 (작은 글자) |
| 강조 칸 글자 | text | primarySoft | 15.05:1 통과12.52:1 통과15.09:1 통과7.13:1 통과 | 4.5:1 (작은 글자) |
잘한 예와 잘못한 예#
다음 중 옳은 것을 모두 고르시오.
보기
ㄱ광합성은 엽록체에서 일어난다.
ㄴ호흡은 미토콘드리아에서 일어난다.
| 구분 | 광합성 | 호흡 |
|---|---|---|
| 장소 | 엽록체 | 미토콘드리아 |
| 기체 | CO₂ 흡수 | O₂ 흡수 |
Blocks로 그린다.보기마다 화면 폭 그래프
compact를 켠다.함께 보는 컴포넌트#
- MathText: 수식이 섞인 글을 그린다. 서버가 미리 그려 둔 수식(SVG)을 글자 사이에 끼워 넣고, 없으면 읽을 수 있는 글자로 대신 보여 준다.
- ChartBlock: 문제와 해설 안의 그래프(선, 막대, 점)를 그린다. 함수 그래프는 교과서처럼 원점을 지나는 화살표 축으로, 자료 그래프는 격자와 눈금과 범례로 그린다.
- DiagramBlock: 선, 도형, 글자, 회로 부품(저항, 전지, 전구, 스위치), 스프링 같은 기본 모양으로 만든 도식을 그린다. 컨테이너 폭에 맞게 줄어든다.
- ImageBlock: 문제에 쓰인 원본 자료의 한 영역을 오려 보여 준다. 영역 위에 라벨과 강조 고리를 얹을 수 있고, 눌러서 크게 볼 수 있다.
- PaperType: 안쪽의 모든 글자를 시험지 서체(Noto Serif KR)로 바꾸는 감싸개다. 모의고사 시험지 화면에 쓴다.