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

FilterPill

"과목 전체 ▾"처럼 이름과 지금 값을 보여 주고, 누르면 선택 목록을 여는 알약 버튼이다.

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

미리보기#

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

눌러서 값 바꾸기
켜짐

언제 쓰는가#

쓴다

  • 목록 위의 필터 조건(과목, 정렬, 기간)을 보여 주고 바꿀 때 쓴다.
  • 누르면 OptionSheet를 열어 값을 고르게 한다.
  • "전체"가 아닌 값이 골라졌으면 active를 켜서 주색으로 표시한다.

쓰지 않는다

  • 값을 바로 바꾸는 토글에 쓰지 않는다. 누르면 목록이 열린다는 약속이다. 켜고 끄기는 SettingsSwitch.
  • 필터 조건이 하나뿐일 때는 쓰지 않는다. 목록 제목 옆의 TextButton이 간단하다.

종류#

FilterPill 종류
이름설명
기본 (`active=false`)surface 배경, line 테두리.
켜짐 (`active=true`)selected 배경, primaryLine 테두리, 글자와 화살표 primary.

크기#

FilterPill 크기
이름값설명
기본높이 38, 좌우 14shrink(기본 true)면 줄이 모자랄 때 값 글자를 줄여서 맞춘다.

상태#

기본
켜짐
비활성
FilterPill 상태
상태모습과 동작
기본기본 모습이다.
켜짐기본 모습이다.
비활성투명도 0.4. 눌러도 반응하지 않는다.
누름투명도 0.8. 누르는 순간 선택 진동.

사용 방법#

필터와 선택 목록

필터와 선택 목록
import { FilterPill, OptionSheet } from '@/ui/FilterSheet';

<FilterPill label="과목" value={subjectName ?? '전체'} active={subject != null} onPress={() => setOpen(true)} />
<OptionSheet
  visible={open}
  title="과목"
  options={[{ value: null, label: '전체' }, ...subjects]}
  value={subject}
  onPick={setSubject}
  onClose={() => setOpen(false)}
/>

속성(props)#

FilterPill 속성
이름타입기본값필수설명
labelstring—필수필터 이름(작은 글자).
valuestring—필수지금 고른 값. "전체"처럼 기본 값도 글자로 쓴다.
activeboolean—필수"전체"가 아닌 값이 골라졌는지. true면 주색으로 표시한다.
onPress() => void—필수눌렀을 때 호출된다. 보통 OptionSheet를 연다.
disabledboolean—선택true이면 투명도 0.4로 바꾸고 누를 수 없게 한다.
shrinkbooleantrue선택true(기본)면 공간이 모자랄 때 줄어든다. false면 줄어들지 않는다.

치수와 토큰#

모양
높이 38, 좌우 14, pill, 1px 테두리, 요소 사이 6
글자
이름 caption SemiBold(11.5), 값 smallStrong(13)
화살표
ChevronDown 15px, 선 2.3

접근성#

  • 역할은 button, 이름은 "{label} {value}"(예: "과목 수학")이다.
  • 켜짐은 색과 값 글자로 함께 나타낸다.
  • 앱은 터치 화면이라 마우스 올림(hover)이 없다. 웹에서는 포커스 링(2.5px 실선, 바깥 3px)을 직접 그린다. 이 문서의 미리보기에는 포커스 링이 그려져 있다.

글자 색 대비

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

FilterPill 글자 색 대비
쓰임글자색바탕대비기준
기본 값 글자 (13px 굵게)textsurface17.15:1 통과15.25:1 통과16.13:1 통과10.92:1 통과4.5:1 (작은 글자)
켜진 글자 (13px 굵게)primaryselected3.69:1 미달4.73:1 통과4.37:1 미달5.80:1 통과4.5:1 (작은 글자)

잘한 예와 잘못한 예#

잘한 예고른 값을 같이 보여 준다. 눌러 보지 않아도 어떤 필터인지 안다.
필터 ▾
잘못한 예값이 없이 이름만 있으면 지금 어떤 조건인지 알 수 없다.
  • OptionSheet: 시트 안에서 목록 중 하나를 고르는 컴포넌트다. 행마다 라디오 표시가 있고, 고르면 바로 닫힌다.
  • Chip: 짧은 글자를 담는 작은 알약 표지다. 상태, 분류, D-Day를 알린다. 눌리지 않는다.
  • PillTabs: 알약 모양의 탭 모음이다. 하나를 고르면 그 칸이 짙은 색(네이비, 다크 모드는 주색)으로 채워진다.