Chip

짧은 글자를 담는 작은 알약 표지다. 상태, 분류, D-Day를 알린다. 눌리지 않는다.

이 페이지의 목차

미리보기
언제 쓰는가
종류
크기
상태
사용 방법
속성(props)
치수와 토큰
접근성
잘한 예와 잘못한 예
함께 보는 컴포넌트

분류: 입력과 선택
가져오기: import { Chip } from '@/ui/controls'
코드 위치: apps/mobile/src/ui/controls.tsx:34

미리보기#

실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.

D-24

기본

D-3

오류

3번 읽음

성공

검토 필요

주의

언제 쓰는가#

쓴다

항목의 분류나 상태를 한두 단어로 알릴 때 쓴다. 예: "복습 추천", "D-24".
글자만 바꿔 색이 다른 표지가 필요하면 tone(글자색)과 soft(바탕색)를 함께 지정한다.

쓰지 않는다

누르는 버튼으로 쓰지 않는다. 눌리지 않는 요소다. 선택 칩이 필요하면 FilterPill을 쓴다.
문장을 넣지 않는다. 한 줄 안에서 두세 단어까지만 쓴다.
tone과 soft를 짝이 맞지 않게 바꾸지 않는다(바탕이 연하면 글자는 진하게).

종류#

Chip 종류
이름	설명
기본	`primarySoft` 바탕, `primary` 글자.
색 바꾸기	`tone`(글자색), `soft`(바탕색)로 지정한다. 예: 오류 `danger`/`dangerSoft`, 성공 `successText`/`successSoft`.

크기#

Chip 크기
이름	값	설명
기본	높이 28, 좌우 12	크기를 바꾸는 속성이 없다.

상태#

복습 추천

기본

Chip 상태
상태	모습과 동작
기본	기본 모습이다.
비활성·눌림	눌리지 않는 요소라서 누름, 비활성 상태가 없다.

사용 방법#

기본

import { Chip } from '@/ui/controls';

<Chip label="D-24" />

색 바꾸기

<Chip label="3번 읽음" tone={color.successText} soft={color.successSoft} />

속성(props)#

Chip 속성
이름	타입	기본값	필수	설명
`label`	string	—	필수	표지에 쓰는 글자.
`tone`	string	`color.primary`	선택	글자색. 기본 `color.primary`.
`soft`	string	`color.primarySoft`	선택	바탕색. 기본 `color.primarySoft`.

치수와 토큰#

크기: 높이 28, 좌우 12, 모서리 pill
글자: smallStrong (13/19, SemiBold)
위치: alignSelf: flex-start. 부모의 폭을 채우지 않고 글자 폭만큼만 차지한다.

접근성#

눌리지 않는 표지라서 역할을 지정하지 않는다. 글자 자체가 읽힌다.
의미를 색으로만 전달하지 않는다. 글자("D-3")가 뜻을 말한다.

글자 색 대비

글자 크기별 기준: 작은 글자는 4.5:1 이상, 큰 글자(굵은 18.66px 이상)는 3:1 이상이다. 값은 선택한 서비스와 모드의 토큰으로 계산했다.

Chip 글자 색 대비
쓰임	글자색	바탕	대비	기준
기본 글자 (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 (작은 글자)
성공 글자 (13px 굵게)	`successText`	`successSoft`	5.39:1 통과9.55:1 통과10.96:1 통과6.84:1 통과	4.5:1 (작은 글자)
주의 글자 (13px 굵게)	`amberText`	`amberSoft`	5.48:1 통과9.81:1 통과6.66:1 통과6.86:1 통과	4.5:1 (작은 글자)

잘한 예와 잘못한 예#

D-3

잘한 예짧은 글자와 짝이 맞는 색을 쓴다.

D-3

잘못한 예바탕이 연한데 글자도 연하게 지정하면 읽히지 않는다.

FilterPill: "과목 전체 ▾"처럼 이름과 지금 값을 보여 주고, 누르면 선택 목록을 여는 알약 버튼이다.
AiMark: 생성형 AI가 만든 결과임을 알리는 표시다. AI가 만든 모든 결과에 붙인다.
DdayChip: 시험까지 남은 날을 "D-24"처럼 보여 주는 칩이다. 7일 이내면 빨간색, 그 외는 주색이다.