본문으로 건너뛰기
TDSMoring 디자인 시스템

ChoiceCard

카드 모양의 선택지다. 고르면 테두리가 굵어지고 체크 표시가 붙는다. 온보딩의 과목·알림 선택에 쓴다.

이 페이지의 목차
분류
입력과 선택
가져오기
import { ChoiceCard } from '@/ui/controls'
코드 위치
apps/mobile/src/ui/controls.tsx:66

미리보기#

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

corner (여러 개 선택)
end + radio (하나만 선택)

언제 쓰는가#

쓴다

  • 여러 개를 고르는 선택(과목 고르기)에는 기본값 role="checkbox"를 쓴다.
  • 하나만 고르는 선택(알림 받기/나중에)에는 role="radio"를 쓰고, 체크는 check="end"로 줄 오른쪽에 둔다.
  • 선택지마다 아이콘과 두 줄 정도의 설명을 넣을 수 있다.

쓰지 않는다

  • 퀴즈 보기에 쓰지 않는다. OptionRow를 쓴다.
  • 선택지가 7개를 넘으면 쓰지 않는다. OptionSheet로 목록을 띄운다.
  • 눌러도 상태가 안 바뀌는 안내 카드에 쓰지 않는다. Card를 쓴다.

종류#

ChoiceCard 종류
이름설명
corner (기본)체크 배지가 카드 오른쪽 위 모서리(7, 7)에 붙는다. 타일 모양에 쓴다.
end체크 배지(22)가 줄 오른쪽 끝에 놓인다. 한 줄짜리 선택지에 쓴다.
rolecheckbox(여러 개) 또는 radio(하나). 접근성 역할만 바뀌고 모양은 같다.

크기#

ChoiceCard 크기
이름값설명
기본안쪽 여백 14, 모서리 16크기를 바꾸는 속성이 없다. 폭과 높이는 안의 내용과 style이 정한다.

상태#

선택 전
선택됨
ChoiceCard 상태
상태모습과 동작
선택 전surface 배경, 1.2px cardBorder 테두리.
선택됨selected 배경, 1.8px primary 테두리, 체크 배지.
누름투명도 0.9.

사용 방법#

여러 개 선택

여러 개 선택
import { ChoiceCard } from '@/ui/controls';

<ChoiceCard selected={picked.has(id)} onPress={() => toggle(id)} style={{ width: '48%' }}>
  <SubjectIcon icon="math" colorKey="blue" variant="soft" />
  <AppText variant="bodyStrong">수학</AppText>
</ChoiceCard>

하나만 선택

하나만 선택
<ChoiceCard role="radio" check="end" selected={choice === 'yes'} onPress={() => setChoice('yes')}>
  <AppText variant="bodyStrong">네, 알림을 받을게요</AppText>
</ChoiceCard>

속성(props)#

ChoiceCard 속성
이름타입기본값필수설명
selectedboolean—필수선택되었는지.
onPress() => void—필수눌렀을 때 호출된다.
childrenReactNode—필수카드 안에 그릴 내용.
styleStyleProp<ViewStyle>—선택폭, 높이, 바깥 여백을 정하는 스타일.
check'corner' | 'end''corner'선택체크 배지의 위치. "corner"(기본) 또는 "end".
role'checkbox' | 'radio''checkbox'선택접근성 역할. "checkbox"(기본) 또는 "radio".

치수와 토큰#

모양
모서리 radius.lg(16), 안쪽 여백 14
선택 전
surface 배경, 1.2px cardBorder
선택됨
selected 배경, 1.8px primary
체크 배지
corner 20px(오른쪽 위 7·7), end 22px, primary 원, 흰 체크 12px 선 3.2

접근성#

  • 역할은 checkbox 또는 radio, 상태는 checked(checkbox) 또는 selected(radio)다.
  • 선택은 테두리 굵기, 배경색, 체크 배지로 함께 나타내므로 색만으로 구분하지 않는다.
  • 앱은 터치 화면이라 마우스 올림(hover)이 없다. 웹에서는 포커스 링(2.5px 실선, 바깥 3px)을 직접 그린다. 이 문서의 미리보기에는 포커스 링이 그려져 있다.

글자 색 대비

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

ChoiceCard 글자 색 대비
쓰임글자색바탕대비기준
체크 배지 아이콘onPrimaryprimary3.93:1 통과3.31:1 통과4.60:1 통과7.25:1 통과3:1 (큰 글자)

잘한 예와 잘못한 예#

잘한 예하나만 고르는 선택에는 radio로 지정한다.
수학
잘못한 예선택했는지 테두리만 바뀌고 체크 배지가 없으면 색을 구분하기 어렵다. ChoiceCard를 직접 흉내 내지 않는다.
  • OptionRow: 퀴즈 보기 한 줄이다. 고르기 전, 고른 뒤, 채점 뒤(정답, 오답)의 모습이 정해져 있다.
  • RadioMark: 선택 목록 행의 끝에 놓는 동그란 라디오 표시다. 시트의 선택 목록에서 쓴다.
  • OptionSheet: 시트 안에서 목록 중 하나를 고르는 컴포넌트다. 행마다 라디오 표시가 있고, 고르면 바로 닫힌다.