SubjectIcon
과목을 나타내는 둥근 아이콘 타일이다. 과목마다 기호(Σ, Aa, 책, 건물, 잎, 지구, …)와 색이 정해져 있다.
- 분류
- 데이터 표시
- 가져오기
import { SubjectIcon, SubjectGlyph } from '@/ui/SubjectIcon'- 코드 위치
apps/mobile/src/ui/SubjectIcon.tsx:28
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
수학
Aa영어
국어
한국사
과학
사회
기타
수학
Aa영어
국어
한국사
과학
사회
기타
언제 쓰는가#
쓴다
- 과목 목록, 과목 선택, 복습 행의 앞에 과목을 나타낼 때 쓴다.
- 메인 보드처럼 눈에 띄어야 하면
filled, 온보딩이나 복습 행처럼 가벼워야 하면soft. - 사용자가 과목에 사진을 지정했으면
image에 넘긴다.
쓰지 않는다
- 과목이 아닌 분류에 쓰지 않는다.
- 과목 이름 없이 색만으로 구분하지 않는다. 이름을 옆에 글자로 쓴다.
- 타일 모양을 바꾸지 않는다. 모서리는 크기에 비례해 정해진다.
종류#
| 이름 | 설명 |
|---|---|
| filled (기본) | 채운 그라데이션 타일(fill 시작 → 끝, 왼쪽 위 → 오른쪽 아래), 흰 기호. |
| soft | 옅은 면(soft) 위에 색 기호(glyph). |
| image | image가 있으면 사진을 같은 둥근 타일로 보여 준다. |
크기#
| 이름 | 값 | 설명 |
|---|---|---|
| 기본 | 48 | size로 바꾼다. 모서리는 크기의 28%, 기호는 크기의 48%. |
상태#
Aa
Aa
| 상태 | 모습과 동작 |
|---|---|
| filled | 기본 모습이다. |
| soft | 기본 모습이다. |
사용 방법#
기본
기본
import { SubjectIcon } from '@/ui/SubjectIcon';
<SubjectIcon icon="math" colorKey="blue" />
<SubjectIcon icon="english" colorKey="green" variant="soft" size={40} />속성(props)#
SubjectIcon
| 이름 | 타입 | 기본값 | 필수 | 설명 |
|---|---|---|---|---|
icon | SubjectKey | string | — | 필수 | 기호 종류. "math", "english", "korean", "history", "science", "social", "other" 중 하나(다른 문자열은 other의 점 셋). |
colorKey | ColorKey | string | — | 필수 | 과목 팔레트의 색 이름. "blue", "green", "orange", "red", "purple", "teal", "yellow", "gray". |
size | number | 48 | 선택 | 한 변의 길이(px). 기본 48. |
variant | 'filled' | 'soft' | 'filled' | 선택 | "filled"(기본) 또는 "soft". |
image | string | null | — | 선택 | 과목 사진(작은 데이터 주소). 있으면 사진을 타일에 보여 준다. |
SubjectGlyph
| 이름 | 타입 | 기본값 | 필수 | 설명 |
|---|---|---|---|---|
icon | SubjectKey | string | — | 필수 | 기호 종류. |
size | number | — | 필수 | 기호 크기(px). |
tint | string | — | 필수 | 기호 색. |
치수와 토큰#
- 타일
- 크기 × 크기, 모서리 = 크기 × 0.28
- 기호
- 크기 × 0.48, 선 2. 영어는 아이콘이 아니라 글자 "Aa"(Bold, 크기 × 0.82)
- 색
- 과목 팔레트:
filled는fill그라데이션 + 흰 기호,soft는soft면 +glyph기호 - 기본 과목 색
- 수학 blue, 영어 green, 국어 gray, 한국사 red, 과학 teal, 사회 orange, 기타 gray
접근성#
- 타일은 장식이다. 과목 이름을 옆에 글자로 함께 보여 준다.
- 과목 색은 구분을 돕는 보조 표시일 뿐이다.
잘한 예와 잘못한 예#
수학