FeedbackCard
문제를 채점한 뒤 결과("정답!", "오답")와 해설을 보여 주는 카드다.
- 분류
- 알림과 안내
- 가져오기
import { FeedbackCard } from '@/ui/feedback'- 코드 위치
apps/mobile/src/ui/feedback.tsx:14
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
정답!
광합성은 엽록체에서 일어나요.
아쉬워요
정답은 광합성이에요.
건너뛰었어요
언제 쓰는가#
쓴다
- 문제를 풀고 채점이 끝난 순간의 결과 카드에 쓴다. 제목은 결과, 안에는 해설을 넣는다.
- 정답은
correct, 오답은wrong, 그 밖의 안내(건너뜀, 모르겠어요)는neutral.
쓰지 않는다
- 채점 전에는 쓰지 않는다. 정답을 미리 알려 주게 된다.
- 일반 안내에 쓰지 않는다.
Notice를 쓴다.
종류#
| 이름 | 설명 |
|---|---|
| correct | successSoft 바탕, success 체크 원, 제목 success. |
| wrong | dangerSoft 바탕, danger × 원, 제목 danger. |
| neutral | card 바탕, textSecondary 느낌표 원. |
크기#
| 이름 | 값 | 설명 |
|---|---|---|
| 기본 | 안쪽 여백 16, 모서리 16 | 내용(해설)은 아이콘 너비만큼(30) 들여 쓴다. |
상태#
정답!
광합성은 엽록체에서 일어나요.
아쉬워요
호흡은 미토콘드리아에서 일어나요.
건너뛰었어요
| 상태 | 모습과 동작 |
|---|---|
| correct | 기본 모습이다. |
| wrong | 기본 모습이다. |
| neutral | 기본 모습이다. |
사용 방법#
기본
기본
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"라서 나타날 때 읽어 준다.- 결과는 색, 아이콘(체크, ×), 제목 글자로 함께 알린다.
글자 색 대비
글자 크기별 기준: 작은 글자는 4.5:1 이상, 큰 글자(굵은 18.66px 이상)는 3:1 이상이다. 값은 선택한 서비스와 모드의 토큰으로 계산했다.
| 쓰임 | 글자색 | 바탕 | 대비 | 기준 |
|---|---|---|---|---|
| 정답 제목 (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 (작은 글자) |
잘한 예와 잘못한 예#
정답!