DdayChip
시험까지 남은 날을 "D-24"처럼 보여 주는 칩이다. 7일 이내면 빨간색, 그 외는 주색이다.
- 분류
- Calendar 앱
- 가져오기
import { DdayChip } from '@/cal/ui'- 코드 위치
apps/calendar/src/cal/ui.tsx:119
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
언제 쓰는가#
쓴다
- 이 컴포넌트는 Mordy Calendar 앱(
apps/calendar/src/cal)에만 있다. - 시험 제목 옆에 D-Day를 알릴 때 쓴다. 제목을 함께 주면 "중간고사 D-24"가 된다.
쓰지 않는다
- 시험이 아닌 마감에는 쓰지 않는다.
- 색만으로 임박함을 알리지 않는다. "D-3"이라는 글자가 뜻을 말한다.
종류#
| 이름 | 설명 |
|---|---|
| 여유 (8일 이상) | primarySoft 바탕, primary 글자. |
| 임박 (7일 이하) | dangerSoft 바탕, danger 글자. |
| 당일·지남 | 0이면 "D-Day", 음수이면 "D+3". |
크기#
| 이름 | 값 | 설명 |
|---|---|---|
| 기본 | 높이 26, 좌우 10 |
상태#
| 상태 | 모습과 동작 |
|---|---|
| 여유 | 기본 모습이다. |
| 임박 | 기본 모습이다. |
| 당일 | 기본 모습이다. |
사용 방법#
기본
기본
import { DdayChip } from '@/cal/ui';
<DdayChip dday={exam.dday} title={exam.title} />속성(props)#
| 이름 | 타입 | 기본값 | 필수 | 설명 |
|---|---|---|---|---|
dday | number | — | 필수 | 남은 날 수. 0이면 당일, 음수이면 지난 날. |
title | string | — | 선택 | 앞에 붙일 시험 제목. |
치수와 토큰#
- 모양
- 높이 26, 좌우 10, pill, 글자
smallStrong - 색 기준
- 7일 이하이면
danger, 그 외primary
접근성#
- 눌리지 않는 표지다. 글자가 날 수를 읽어 준다.
글자 색 대비
글자 크기별 기준: 작은 글자는 4.5:1 이상, 큰 글자(굵은 18.66px 이상)는 3:1 이상이다. 값은 선택한 서비스와 모드의 토큰으로 계산했다.
| 쓰임 | 글자색 | 바탕 | 대비 | 기준 |
|---|---|---|---|---|
| 여유 글자 (13px 굵게) | primary | primarySoft | 3.45:1 미달4.32:1 미달4.21:1 미달4.68:1 통과 | 4.5:1 (작은 글자) |
| 임박 글자 (13px 굵게) | danger | dangerSoft | 4.09:1 미달5.39:1 통과4.69:1 통과5.43:1 통과 | 4.5:1 (작은 글자) |
잘한 예와 잘못한 예#
중간고사 D-3
동아리 모임 D-2