# FeedbackCard

문제를 채점한 뒤 결과("정답!", "오답")와 해설을 보여 주는 카드다.

- 분류: 알림과 안내
- 가져오기: `import { FeedbackCard } from '@/ui/feedback'`
- 코드 위치: `apps/mobile/src/ui/feedback.tsx:14` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/feedback-card

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 문제를 풀고 채점이 끝난 순간의 결과 카드에 쓴다. 제목은 결과, 안에는 해설을 넣는다.
- 정답은 `correct`, 오답은 `wrong`, 그 밖의 안내(건너뜀, 모르겠어요)는 `neutral`.

### 쓰지 않는다
- 채점 전에는 쓰지 않는다. 정답을 미리 알려 주게 된다.
- 일반 안내에 쓰지 않는다. `Notice`를 쓴다.

## 종류

| 이름 | 설명 |
| --- | --- |
| correct | `successSoft` 바탕, `success` 체크 원, 제목 `success`. |
| wrong | `dangerSoft` 바탕, `danger` × 원, 제목 `danger`. |
| neutral | `card` 바탕, `textSecondary` 느낌표 원. |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 안쪽 여백 16, 모서리 16 | 내용(해설)은 아이콘 너비만큼(30) 들여 쓴다. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| correct | 기본 모습이다. |
| wrong | 기본 모습이다. |
| neutral | 기본 모습이다. |

## 사용 방법

### 기본

```tsx
import { FeedbackCard } from '@/ui/feedback';

<FeedbackCard tone={correct ? 'correct' : 'wrong'} title={correct ? '정답!' : '아쉬워요'}>
  <AppText variant="body">{explanation}</AppText>
</FeedbackCard>
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `tone` | `'correct' \| 'wrong' \| 'neutral'` | — | 필수 | `"correct"`, `"wrong"`, `"neutral"`. |
| `title` | `string` | — | 필수 | 결과 제목. |
| `children` | `ReactNode` | — | 선택 | 제목 아래 내용(해설). |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 모양 | 모서리 16, 안쪽 여백 16 |
| 제목 | `headline`, 톤 색. 아이콘 22px(채운 원 + `surface` 색 기호) |
| 내용 | 제목 아래 8, 왼쪽 30 |

## 접근성

- `accessibilityLiveRegion="polite"`라서 나타날 때 읽어 준다.
- 결과는 색, 아이콘(체크, ×), 제목 글자로 함께 알린다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 정답 제목 (17px 굵게) | `success` | `successSoft` | 3.74:1 미달 | 6.59:1 통과 | 4.21:1 미달 | 4.68:1 통과 | 4.5:1 |
| 오답 제목 (17px 굵게) | `danger` | `dangerSoft` | 4.09:1 미달 | 5.39:1 통과 | 4.69:1 통과 | 5.43:1 통과 | 4.5:1 |
| 중립 제목 (17px 굵게) | `textSecondary` | `card` | 3.94:1 미달 | 6.51:1 통과 | 4.74:1 통과 | 6.14:1 통과 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: 결과 글자와 아이콘, 색을 함께 쓴다.
- 잘못한 예: 제목 없이 색만 칠하면 의미가 전달되지 않는다.

## 함께 보는 컴포넌트

- [OptionRow](https://developers.moring.co/tds/components/option-row.md): 퀴즈 보기 한 줄이다. 고르기 전, 고른 뒤, 채점 뒤(정답, 오답)의 모습이 정해져 있다.
- [Notice](https://developers.moring.co/tds/components/notice.md): 화면 안에 끼워 넣는 한 줄 안내 상자다. 안내(파랑), 주의(주황), 오류(빨강) 세 가지 톤이 있다.