Card
옅은 주색 틴트(card)를 깐 둥근 상자다. 안내, 요약, 눌러서 이동하는 카드에 쓴다.
- 분류
- 면과 목록
- 가져오기
import { Card } from '@/ui/layout'- 코드 위치
apps/mobile/src/ui/layout.tsx:80
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
오늘의 복습12문제 · 약 8분
복습 추천
언제 쓰는가#
쓴다
- 홈의 복습 카드, 과목 행처럼 흰 배경 위에 옅은 색으로 묶어 보여 줄 때 쓴다.
onPress를 넘기면 누를 수 있는 카드가 된다.tone으로 바탕색을 바꿀 수 있다(amberSoft등).
쓰지 않는다
- 카드 안에 카드를 넣지 않는다.
- 흰 패널이 필요한 리포트·설정에는 쓰지 않는다.
Panel을 쓴다. - 그림자가 필요하면 쓰지 않는다.
Card에는 그림자가 없다.
종류#
| 이름 | 설명 |
|---|---|
| 기본 | card 바탕. |
| tone | tone으로 바탕색을 지정한다. 예: 복습 추천 카드는 color.amberSoft. |
| 누르는 카드 | onPress가 있으면 버튼으로 동작한다. |
크기#
| 이름 | 값 | 설명 |
|---|---|---|
| 기본 | 안쪽 여백 16, 모서리 20 | 크기는 내용이 정한다. |
상태#
오늘의 복습
| 상태 | 모습과 동작 |
|---|---|
| 기본 | 기본 모습이다. |
| 누름 | onPress가 있을 때 투명도 0.85. |
사용 방법#
기본
기본
import { Card } from '@/ui/layout';
<Card onPress={() => router.push('/review')} accessibilityLabel="오늘의 복습">
<AppText variant="headline">오늘의 복습</AppText>
</Card>속성(props)#
| 이름 | 타입 | 기본값 | 필수 | 설명 |
|---|---|---|---|---|
children | ReactNode | — | 필수 | 카드 안의 내용. |
style | StyleProp<ViewStyle> | — | 선택 | 바깥 여백이나 배치만 바꾸는 React Native 스타일이다. |
tone | string | color.card | 선택 | 바탕색. 기본 color.card. |
onPress | () => void | — | 선택 | 있으면 누를 수 있는 카드가 된다. |
accessibilityLabel | string | — | 선택 | 누르는 카드의 이름. 안의 글자와 다르게 읽히게 할 때만 쓴다. |
치수와 토큰#
- 모서리
radius.card(20)- 안쪽 여백
space.lg(16)- 바탕
card- 누름
- 투명도 0.85
접근성#
onPress가 있으면button역할이다. 이름은accessibilityLabel또는 안의 글자.
글자 색 대비
글자 크기별 기준: 작은 글자는 4.5:1 이상, 큰 글자(굵은 18.66px 이상)는 3:1 이상이다. 값은 선택한 서비스와 모드의 토큰으로 계산했다.
| 쓰임 | 글자색 | 바탕 | 대비 | 기준 |
|---|---|---|---|---|
| 카드 위 본문 | text | card | 15.96:1 통과14.29:1 통과15.67:1 통과9.43:1 통과 | 4.5:1 (작은 글자) |
| 카드 위 보조 글자 (13px) | textSecondary | card | 3.94:1 미달6.51:1 통과4.74:1 통과6.14:1 통과 | 4.5:1 (작은 글자) |
잘한 예와 잘못한 예#
오늘의 복습12문제
안쪽 카드