# SecondaryButton

테두리만 있거나 옅은 주색으로 채운 알약 모양 버튼이다. PrimaryButton 옆의 두 번째 행동에 쓴다.

- 분류: 버튼
- 가져오기: `import { SecondaryButton } from '@/ui/Button'`
- 코드 위치: `apps/mobile/src/ui/Button.tsx:50` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/secondary-button

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 같은 화면에 PrimaryButton이 이미 있을 때, 그다음으로 중요한 행동에 쓴다. 예: "이전", "시험지 PDF 받기".
- 화면 어디에도 PrimaryButton이 필요 없을 만큼 가벼운 행동에 쓴다. 예: "다시 확인하기".
- `tone="outline"`은 흰 면 위에, `tone="soft"`는 눈에 덜 띄게 하고 싶을 때 쓴다.

### 쓰지 않는다
- 화면의 가장 중요한 행동에 쓰지 않는다. 그 자리는 PrimaryButton이다.
- 한 줄에 세 개 이상 나란히 놓지 않는다. 둘까지만 나란히 놓는다.
- 목록 행 안에 쓰지 않는다. `SmallButton`을 쓴다.

## 종류

| 이름 | 설명 |
| --- | --- |
| outline (기본) | 흰 면(`surface`), 1.2px 테두리(`primaryLine`), 글자 `primary`. |
| soft | 옅은 주색 면(`primarySoft`), 테두리 없음, 글자 `primary`. |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 높이 48 | `height`를 생략하면 48이다. |
| 큰 버튼 | 높이 50, 52, 54 | 하단 영역에서 PrimaryButton과 높이를 맞출 때 쓴다. |
| 작은 버튼 | 높이 36 | 앱에서는 운영 도구 화면 한 곳에서만 쓴다. 새 화면에서는 쓰지 않는다. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 기본 | outline은 흰 면과 테두리, soft는 옅은 주색 면. |
| 누름 | 투명도 0.8. |
| 비활성 | 투명도 0.45. 눌러도 반응하지 않는다. |

## 사용 방법

### 기본

```tsx
import { SecondaryButton } from '@/ui/Button';

<SecondaryButton label="이전" onPress={prev} />
```

### 옅은 면과 아이콘

```tsx
<SecondaryButton
  label="약점 개념 풀기"
  tone="soft"
  icon={<Target size={18} color={color.primary} strokeWidth={2.2} />}
  onPress={practiceWeak}
/>
```

### 이전·다음을 나란히

```tsx
<View style={{ flexDirection: 'row', gap: space.sm }}>
  <SecondaryButton label="이전" height={52} disabled={index === 0} onPress={prev} style={{ flex: 1 }} />
  <PrimaryButton label="다음" arrow={false} height={52} onPress={next} style={{ flex: 2 }} />
</View>
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `label` | `string` | — | 필수 | 버튼에 쓰는 글자. 한 줄, 길면 80%까지 줄인다. |
| `onPress` | `() => void` | — | 선택 | 누르면 실행할 함수. |
| `disabled` | `boolean` | — | 선택 | `true`이면 투명도 0.45로 바꾸고 누를 수 없게 한다. |
| `busy` | `boolean` | — | 선택 | 이 컴포넌트는 받지만 쓰지 않는다. 처리 중 표시가 필요하면 PrimaryButton을 쓴다. |
| `arrow` | `boolean` | — | 선택 | 이 컴포넌트는 받지만 쓰지 않는다. 화살표를 그리지 않는다. |
| `icon` | `ReactNode` | — | 선택 | 글자 앞에 놓을 아이콘. 색은 직접 `color.primary`로 지정한다. |
| `style` | `StyleProp<ViewStyle>` | — | 선택 | 바깥 여백이나 배치만 바꾸는 React Native 스타일이다. 색, 높이, 모서리는 바꾸지 않는다. |
| `height` | `number` | `48` | 선택 | 버튼 높이(px). 기본 48. |
| `accessibilityHint` | `string` | — | 선택 | 화면 읽기 프로그램이 읽어 주는 설명. |
| `tone` | `'outline' \| 'soft'` | `'outline'` | 선택 | `"outline"`(기본)은 테두리, `"soft"`는 옅은 주색 면. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 높이 | 48 (기본) |
| 모서리 | pill(999) |
| 좌우 안쪽 여백 | 20 |
| 글자 | button (15/20, Bold), 색 primary |
| outline 면과 테두리 | surface 면, 1.2px primaryLine |
| soft 면 | primarySoft |

## 접근성

- 역할은 `button`이다. 접근성 상태에 `disabled`가 들어간다.
- 높이 48 이상이라 눌러야 하는 영역의 최소 크기를 넘는다. 높이 36 버튼은 최소 크기에 못 미치므로 새 화면에서는 쓰지 않는다.
- 앱은 터치 화면이라 마우스 올림(hover)과 키보드 포커스 표시가 없다. 웹에서 같은 모양을 만들 때는 포커스 링(2.5px 실선, 바깥쪽 3px 띄움)을 직접 그린다. 이 문서의 미리보기에는 포커스 링이 그려져 있다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| outline 글자 (15px 굵게) | `primary` | `surface` | 3.93:1 미달 | 5.26:1 통과 | 4.50:1 통과 | 7.17:1 통과 | 4.5:1 |
| soft 글자 (15px 굵게) | `primary` | `primarySoft` | 3.45:1 미달 | 4.32:1 미달 | 4.21:1 미달 | 4.68:1 통과 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: 나란히 놓을 때 PrimaryButton이 더 넓고, SecondaryButton은 보조 행동이라는 것이 보인다.
- 잘못한 예: 두 버튼의 무게가 같으면 어느 쪽이 중요한지 알 수 없다. 한쪽은 PrimaryButton으로 한다.

## 함께 보는 컴포넌트

- [PrimaryButton](https://developers.moring.co/tds/components/primary-button.md): 서비스 주색 그라데이션으로 채운 알약 모양 버튼이다. 한 화면에서 가장 중요한 행동 하나에 쓴다.
- [TextButton](https://developers.moring.co/tds/components/text-button.md): 글자만 있는 가장 가벼운 버튼이다. "나중에", "건너뛰기" 같은 선택 행동에 쓴다.
- [SmallButton](https://developers.moring.co/tds/components/small-button.md): 목록 행 안에 놓는 작은 사각형 버튼이다. "풀기", "승인", "거절" 같은 한 단어 행동에 쓴다.