# AmberButton

주의 색(amber)으로 채운 알약 모양 버튼이다. "복습 추천" 카드의 행동에만 쓴다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- AmberSoft 면 위에 놓는 "복습 추천" 같은 추천 카드의 행동 하나에 쓴다.

### 쓰지 않는다
- 일반 행동에 쓰지 않는다. 일반 행동은 PrimaryButton이다.
- 경고나 오류를 알리는 데 쓰지 않는다. 오류는 `danger`, 안내는 `Notice`를 쓴다.
- 흰 글자 대비가 낮으므로(아래 표) 새 화면에서 글자가 작아지는 곳에는 쓰지 않는다.

## 종류

종류가 없다. 모양이 하나다.

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 높이 46 | `height`를 생략하면 46이다. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 기본 | amber 면, 흰 글자. |
| 누름 | 투명도 0.85. |
| 비활성 | 비활성 표현이 없다. 처리 중에는 글자를 "준비 중…"으로 바꾸고 `onPress`를 막는다. |

## 사용 방법

### 기본

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

<AmberButton label="지금 복습하기" onPress={startReview} />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `label` | `string` | — | 필수 | 버튼에 쓰는 글자. |
| `onPress` | `() => void` | — | 선택 | 누르면 실행할 함수. |
| `disabled` | `boolean` | — | 선택 | 이 컴포넌트는 받지만 쓰지 않는다. |
| `busy` | `boolean` | — | 선택 | 이 컴포넌트는 받지만 쓰지 않는다. |
| `arrow` | `boolean` | — | 선택 | 이 컴포넌트는 받지만 쓰지 않는다. |
| `icon` | `ReactNode` | — | 선택 | 이 컴포넌트는 받지만 쓰지 않는다. |
| `style` | `StyleProp<ViewStyle>` | — | 선택 | 바깥 여백이나 배치만 바꾸는 React Native 스타일이다. 색, 높이, 모서리는 바꾸지 않는다. |
| `height` | `number` | `46` | 선택 | 버튼 높이(px). 기본 46. |
| `accessibilityHint` | `string` | — | 선택 | 이 컴포넌트는 받지만 쓰지 않는다. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 높이 | 46 |
| 모서리 | pill(999) |
| 글자 | button (15/20, Bold), 색 white |
| 배경 | amber |

## 접근성

- 역할은 `button`이다.
- 흰 글자와 amber 면의 대비가 낮다. 아래 표에서 서비스별 값을 확인한다. 새로 만드는 웹 화면에서는 글자를 `text` 색으로 바꿔 대비를 맞춘다.
- 앱은 터치 화면이라 마우스 올림(hover)과 키보드 포커스 표시가 없다. 웹에서 같은 모양을 만들 때는 포커스 링(2.5px 실선, 바깥쪽 3px 띄움)을 직접 그린다. 이 문서의 미리보기에는 포커스 링이 그려져 있다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 버튼 글자 (15px 굵게) | `white` | `amber` | 2.02:1 미달 | 2.02:1 미달 | 2.25:1 미달 | 1.82:1 미달 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: 추천 카드 안에서 행동이 하나일 때만 쓴다.
- 잘못한 예: 일반 저장 행동에 쓰지 않는다. 색이 "주의"를 뜻하기 때문이다.

## 함께 보는 컴포넌트

- [PrimaryButton](https://developers.moring.co/tds/components/primary-button.md): 서비스 주색 그라데이션으로 채운 알약 모양 버튼이다. 한 화면에서 가장 중요한 행동 하나에 쓴다.
- [Notice](https://developers.moring.co/tds/components/notice.md): 화면 안에 끼워 넣는 한 줄 안내 상자다. 안내(파랑), 주의(주황), 오류(빨강) 세 가지 톤이 있다.