# IconButton

아이콘 하나만 있는 투명한 둥근 버튼이다. 헤더의 "뒤로", "검색"에 쓴다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 헤더의 뒤로 가기, 검색, 북마크처럼 뜻이 널리 알려진 아이콘 행동에 쓴다.
- `label`에 행동 이름을 반드시 쓴다.

### 쓰지 않는다
- 처음 보는 아이콘에 쓰지 않는다. 글자가 있는 버튼을 쓴다.
- 배경색이 필요한 버튼에 쓰지 않는다. 배경이 없다.

## 종류

종류가 없다. 안에 들어가는 아이콘은 사용하는 쪽이 넣는다.

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 40 × 40 | 크기를 바꾸는 속성이 없다. `hitSlop` 10으로 누르는 영역은 60×60이 된다. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 기본 | 투명 배경. 아이콘만 보인다. |
| 누름 | 투명도 0.6. |
| 비활성 | 비활성 표현이 없다. |

## 사용 방법

### 헤더의 검색 버튼

```tsx
import { IconButton } from '@/ui/Button';
import { Search } from '@/ui/icons';

<IconButton label="검색" onPress={() => router.push('/search')}>
  <Search size={22} color={color.text} strokeWidth={2.2} />
</IconButton>
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `onPress` | `() => void` | — | 선택 | 누르면 실행할 함수. |
| `children` | `ReactNode` | — | 필수 | 버튼 안에 그릴 아이콘. |
| `label` | `string` | — | 필수 | 화면 읽기 프로그램이 읽는 이름. 필수. |
| `style` | `StyleProp<ViewStyle>` | — | 선택 | 위치를 맞출 때만 쓴다. 예: 헤더 가장자리에 맞추려고 `marginLeft: -10`. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 크기 | 40 × 40, 모서리 20(원) |
| 아이콘 | 22px, 선 두께 2.2, 색 text |
| 누르는 영역 | hitSlop 사방 10 |

## 접근성

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

## 잘한 예와 잘못한 예

- 잘한 예: 이름(`label`)과 아이콘 뜻이 같다.
- 잘못한 예: `label` 없이 쓰지 않는다. 시각 장애가 있는 사용자는 이 버튼의 뜻을 알 수 없다.

## 함께 보는 컴포넌트

- [BackHeader](https://developers.moring.co/tds/components/back-header.md): 화면 위쪽의 뒤로 가기 줄이다. 왼쪽에 뒤로 화살표, 가운데에 제목(선택), 오른쪽에 행동 자리가 있다.
- [TitleHeader](https://developers.moring.co/tds/components/title-header.md): 탭의 첫 화면 위쪽에 놓는 큰 제목 줄이다. 왼쪽에 제목, 오른쪽에 행동 자리가 있다.