MordyTag
"Mordy"라고 적힌 작은 표지다. Mordy가 만든 계획 항목임을 알린다. 이 계획은 실제 학습 기록으로 계산한 규칙 기반이라 AI라고 부르지 않는다.
- 분류
- Calendar 앱
- 가져오기
import { MordyTag } from '@/cal/ui'- 코드 위치
apps/calendar/src/cal/ui.tsx:110
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
언제 쓰는가#
쓴다
- 이 컴포넌트는 Mordy Calendar 앱(
apps/calendar/src/cal)에만 있다. - Mordy 계획 항목의 제목 옆에 붙인다(
PlanRow가 자동으로 쓴다).
쓰지 않는다
- 사용자가 직접 만든 항목에 붙이지 않는다.
- "AI"로 바꾸지 않는다.
종류#
| 이름 | 설명 |
|---|---|
| 기본 | 높이 19, 글자 11. |
| small | 높이 17, 글자 10, 좌우 5. |
크기#
| 이름 | 값 | 설명 |
|---|---|---|
| 기본 | 높이 19 | small은 17. |
상태#
| 상태 | 모습과 동작 |
|---|---|
| 기본 | primarySoft 바탕, primary Bold 글자, 모서리 6. |
사용 방법#
기본
기본
import { MordyTag } from '@/cal/ui';
<MordyTag small />속성(props)#
| 이름 | 타입 | 기본값 | 필수 | 설명 |
|---|---|---|---|---|
small | boolean | — | 선택 | true이면 더 작게(높이 17, 글자 10). |
치수와 토큰#
- 모양
- 높이 19, 모서리 6, 좌우 6,
primarySoft - 글자
caption계열 Bold, 11,primary
접근성#
- 눌리지 않는 표지다. "Mordy"라고 읽힌다.
글자 색 대비
글자 크기별 기준: 작은 글자는 4.5:1 이상, 큰 글자(굵은 18.66px 이상)는 3:1 이상이다. 값은 선택한 서비스와 모드의 토큰으로 계산했다.
| 쓰임 | 글자색 | 바탕 | 대비 | 기준 |
|---|---|---|---|---|
| 글자 (11px 굵게) | primary | primarySoft | 3.45:1 미달4.32:1 미달4.21:1 미달4.68:1 통과 | 4.5:1 (작은 글자) |
잘한 예와 잘못한 예#
Mordy
Mordy