# FilterPill

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

- 분류: 입력과 선택
- 가져오기: `import { FilterPill } from '@/ui/FilterSheet'`
- 코드 위치: `apps/mobile/src/ui/FilterSheet.tsx:12` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/filter-pill

## 미리보기

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

## 언제 쓰는가

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

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

## 종류

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

## 크기

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

## 상태

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

## 사용 방법

### 필터와 선택 목록

```tsx
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)

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

## 치수와 토큰

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

## 접근성

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

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 기본 값 글자 (13px 굵게) | `text` | `surface` | 17.15:1 통과 | 15.25:1 통과 | 16.13:1 통과 | 10.92:1 통과 | 4.5:1 |
| 켜진 글자 (13px 굵게) | `primary` | `selected` | 3.69:1 미달 | 4.73:1 통과 | 4.37:1 미달 | 5.80:1 통과 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: 고른 값을 같이 보여 준다. 눌러 보지 않아도 어떤 필터인지 안다.
- 잘못한 예: 값이 없이 이름만 있으면 지금 어떤 조건인지 알 수 없다.

## 함께 보는 컴포넌트

- [OptionSheet](https://developers.moring.co/tds/components/option-sheet.md): 시트 안에서 목록 중 하나를 고르는 컴포넌트다. 행마다 라디오 표시가 있고, 고르면 바로 닫힌다.
- [Chip](https://developers.moring.co/tds/components/chip.md): 짧은 글자를 담는 작은 알약 표지다. 상태, 분류, D-Day를 알린다. 눌리지 않는다.
- [PillTabs](https://developers.moring.co/tds/components/pill-tabs.md): 알약 모양의 탭 모음이다. 하나를 고르면 그 칸이 짙은 색(네이비, 다크 모드는 주색)으로 채워진다.