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

OptionSheet

시트 안에서 목록 중 하나를 고르는 컴포넌트다. 행마다 라디오 표시가 있고, 고르면 바로 닫힌다.

이 페이지의 목차
분류
알림과 안내
가져오기
import { OptionSheet } from '@/ui/FilterSheet'
코드 위치
apps/mobile/src/ui/FilterSheet.tsx:30

미리보기#

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

내 시험
눌러서 닫고 다시 열어 보기

언제 쓰는가#

쓴다

  • FilterPill을 눌렀을 때 값을 고르는 목록으로 쓴다.
  • 선택지가 7개 이상일 때 ChoiceCard 대신 쓴다.
  • 행 오른쪽에 개수(count)나 색 점(dot)을 보여 줄 수 있다.

쓰지 않는다

  • 여러 개를 동시에 고르는 목록에 쓰지 않는다. 라디오라서 하나만 고른다.
  • 선택지가 2~3개면 쓰지 않는다. PillTabs나 ChoiceCard가 가볍다.

종류#

종류가 없다. 선택지에 count, dot, hint를 붙일 수 있다.

크기#

OptionSheet 크기
이름값설명
기본목록 최대 높이 420넘치면 목록 안에서 스크롤된다. 행 사이 간격 8.

상태#

OptionSheet 상태
상태모습과 동작
선택됨WellRow가 selected가 되고 라디오가 켜진다.
고르면값을 onPick으로 알리고 시트를 닫는다(햅틱 select).

사용 방법#

기본

기본
import { OptionSheet } from '@/ui/FilterSheet';

<OptionSheet
  visible={open}
  title="과목"
  options={[{ value: null, label: '전체' }, { value: 'math', label: '수학', count: 18 }]}
  value={subject}
  onPick={setSubject}
  onClose={() => setOpen(false)}
/>

속성(props)#

OptionSheet 속성
이름타입기본값필수설명
visibleboolean—필수열려 있는지.
titlestring—필수시트 제목.
optionsSheetOption[]—필수선택지 목록. 각 항목: value(null 가능), label, count(개수), dot(색 점), hint(보조 글).
valuestring | null—필수지금 고른 value.
onPick(v: string | null) => void—필수고른 value와 함께 호출된다.
onClose() => void—필수닫을 때 호출된다.

치수와 토큰#

행
WellRow + 오른쪽에 개수(smallStrong textTertiary)와 RadioMark
목록
최대 높이 420, 행 사이 8, 아래 8

접근성#

  • 각 행의 이름은 "{label}, {count}개"이고 선택 상태가 전달된다.
  • Sheet의 접근성을 그대로 따른다.

잘한 예와 잘못한 예#

수학
잘한 예고른 값이 라디오와 테두리로 분명하다.
체크 여러 개를 고르는 목록
잘못한 예한 번에 여러 개를 고르는 데 쓰지 않는다.
  • FilterPill: "과목 전체 ▾"처럼 이름과 지금 값을 보여 주고, 누르면 선택 목록을 여는 알약 버튼이다.
  • Sheet: 화면 아래에서 올라오는 시트다. 위쪽 두 모서리가 둥글고, 손잡이와 제목 줄, 닫기 버튼이 있다.
  • WellRow: 패널 안의 목록 한 줄이다. 옅은 홈(well)에 앞 아이콘 타일, 제목, 보조 줄, 뒤 요소가 놓인다.
  • RadioMark: 선택 목록 행의 끝에 놓는 동그란 라디오 표시다. 시트의 선택 목록에서 쓴다.