# CircleButton

화살표가 들어 있는 둥근 주색 버튼이다. 온보딩에서 다음 단계로 넘어갈 때 쓴다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 온보딩처럼 한 단계씩 넘어가는 화면의 "다음"에 쓴다.

### 쓰지 않는다
- 글자가 필요한 행동에 쓰지 않는다. 글자가 없어서 접근성 이름(`label`)에만 의존한다.
- 온보딩 밖에서 쓰지 않는다. 다른 화면에서는 PrimaryButton이 다음 행동을 맡는다.

## 종류

종류가 없다. 화살표 아이콘 하나만 들어간다.

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 지름 56 | `size`로 바꿀 수 있다. 앱은 56만 쓴다. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 기본 | 대각선(135°) 그라데이션, 그림자 `shadow(2)`. |
| 누름 | 0.96배로 줄어든다. |
| 비활성 | 비활성 표현이 없다. |

## 사용 방법

### 기본

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

<CircleButton onPress={() => router.push('/(onboarding)/fields')} />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `onPress` | `() => void` | — | 선택 | 누르면 실행할 함수. |
| `size` | `number` | `56` | 선택 | 지름(px). 기본 56. |
| `label` | `string` | `'다음'` | 선택 | 화면 읽기 프로그램이 읽는 이름. 기본 "다음". |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 지름 | 56 |
| 배경 | gradient, 대각선(왼쪽 위 → 오른쪽 아래) |
| 그림자 | shadow(2) |
| 아이콘 | ArrowRight 22px, 선 두께 2.4, white |

## 접근성

- 역할은 `button`이고 이름은 `label`("다음")이다. 글자가 없으므로 이름을 반드시 둔다.
- 앱은 터치 화면이라 마우스 올림(hover)과 키보드 포커스 표시가 없다. 웹에서 같은 모양을 만들 때는 포커스 링(2.5px 실선, 바깥쪽 3px 띄움)을 직접 그린다. 이 문서의 미리보기에는 포커스 링이 그려져 있다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 아이콘 (22px) | `onPrimaryStrong` | `gradient` (양 끝 중 낮은 값) | 3.08:1 통과 | 3.08:1 통과 | 4.60:1 통과 | 5.48:1 통과 | 3:1 |

## 잘한 예와 잘못한 예

- 잘한 예: 이름(`label`)을 화면의 행동에 맞춰 "다음 단계"처럼 구체적으로 쓴다.
- 잘못한 예: 결과가 중요한 행동(저장, 결제)에 쓰지 않는다. 글자가 없어 무엇이 일어나는지 알 수 없다.

## 함께 보는 컴포넌트

- [PrimaryButton](https://developers.moring.co/tds/components/primary-button.md): 서비스 주색 그라데이션으로 채운 알약 모양 버튼이다. 한 화면에서 가장 중요한 행동 하나에 쓴다.
- [PageDots](https://developers.moring.co/tds/components/page-dots.md): 지금이 몇 번째 단계인지 알려 주는 작은 점 줄이다. 온보딩 단계 표시에 쓴다.