PaperType
안쪽의 모든 글자를 시험지 서체(Noto Serif KR)로 바꾸는 감싸개다. 모의고사 시험지 화면에 쓴다.
- 분류
- 데이터 표시
- 가져오기
import { PaperType } from '@/ui/typeface'- 코드 위치
apps/mobile/src/ui/typeface.tsx:8
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
1. 다음 중 광합성이 일어나는 장소로 옳은 것은?
언제 쓰는가#
쓴다
- 모의고사 문제지처럼 인쇄된 시험지처럼 보여야 하는 화면 전체를 감싼다.
- 안의
AppText,MathText,Blocks가 모두 명조체로 바뀌고 박스와 표는 시험지의 줄 모양을 따른다.
쓰지 않는다
- 일반 학습 화면에 쓰지 않는다. 일반 화면의 글꼴은 Pretendard 하나다.
- 화면 일부에만 쓰지 않는다. 글꼴이 섞이면 어색하다.
종류#
종류가 없다.
크기#
크기가 없다. 자식을 그대로 감싼다.
상태#
| 상태 | 모습과 동작 |
|---|---|
| 굵기 대응 | Pretendard의 Bold, SemiBold, ExtraBold는 Noto Serif KR Bold로, 나머지는 Regular로 바뀐다. |
사용 방법#
기본
기본
import { PaperType } from '@/ui/typeface';
<PaperType>
<PaperQuestion question={q} />
</PaperType>속성(props)#
| 이름 | 타입 | 기본값 | 필수 | 설명 |
|---|---|---|---|---|
children | ReactNode | — | 필수 | 시험지 서체로 그릴 내용. |
치수와 토큰#
- 글꼴
- Noto Serif KR Regular, Bold
- 구현
- React Context로 안쪽
AppText에 알린다
접근성#
- 글꼴만 바꾼다. 글자 크기와 접근성 이름은 그대로다.
잘한 예와 잘못한 예#
시험지 화면
홈 화면 일부만 명조체