# Card

옅은 주색 틴트(`card`)를 깐 둥근 상자다. 안내, 요약, 눌러서 이동하는 카드에 쓴다.

- 분류: 면과 목록
- 가져오기: `import { Card } from '@/ui/layout'`
- 코드 위치: `apps/mobile/src/ui/layout.tsx:80` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/card

## 미리보기

실제 컴포넌트를 그린 화면은 https://developers.moring.co/tds/components/card 에서 볼 수 있다. 서비스 색 선택기로 Mordy, Morit 색을 바꿔 볼 수 있다.

## 언제 쓰는가

### 쓴다
- 홈의 복습 카드, 과목 행처럼 흰 배경 위에 옅은 색으로 묶어 보여 줄 때 쓴다.
- `onPress`를 넘기면 누를 수 있는 카드가 된다.
- `tone`으로 바탕색을 바꿀 수 있다(`amberSoft` 등).

### 쓰지 않는다
- 카드 안에 카드를 넣지 않는다.
- 흰 패널이 필요한 리포트·설정에는 쓰지 않는다. `Panel`을 쓴다.
- 그림자가 필요하면 쓰지 않는다. `Card`에는 그림자가 없다.

## 종류

| 이름 | 설명 |
| --- | --- |
| 기본 | `card` 바탕. |
| tone | `tone`으로 바탕색을 지정한다. 예: 복습 추천 카드는 `color.amberSoft`. |
| 누르는 카드 | `onPress`가 있으면 버튼으로 동작한다. |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 안쪽 여백 16, 모서리 20 | 크기는 내용이 정한다. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 기본 | 기본 모습이다. |
| 누름 | `onPress`가 있을 때 투명도 0.85. |

## 사용 방법

### 기본

```tsx
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` 또는 안의 글자.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 카드 위 본문 | `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 |

## 잘한 예와 잘못한 예

- 잘한 예: 카드 안은 제목과 보조 한 줄로 단순하게.
- 잘못한 예: 카드 안에 카드를 넣으면 경계가 겹쳐 복잡해 보인다.

## 함께 보는 컴포넌트

- [Panel](https://developers.moring.co/tds/components/panel.md): 회색 바탕(`canvas`) 위에 놓는 흰 패널이다. 제목 줄(제목, 설명 아이콘, 오른쪽 링크)과 내용을 담는다. 리포트와 시험 계획 화면의 기본 면이다.
- [WellRow](https://developers.moring.co/tds/components/well-row.md): 패널 안의 목록 한 줄이다. 옅은 홈(`well`)에 앞 아이콘 타일, 제목, 보조 줄, 뒤 요소가 놓인다.
- [Notice](https://developers.moring.co/tds/components/notice.md): 화면 안에 끼워 넣는 한 줄 안내 상자다. 안내(파랑), 주의(주황), 오류(빨강) 세 가지 톤이 있다.