# TabBar

Mordy 앱 맨 아래의 탭 줄이다. 홈 · 과목 · (+) · 커뮤니티 · 더보기. 가운데 +는 탭이 아니라 자료 추가 행동이다.

- 분류: 탐색
- 가져오기: `import { TabBar } from '@/ui/TabBar'`
- 코드 위치: `apps/mobile/src/ui/TabBar.tsx:20` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/tab-bar

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 앱의 가장 큰 화면 이동(홈, 과목, 커뮤니티, 더보기)에 쓴다. 화면 맨 아래에 한 번만 둔다.
- 가운데 둥근 버튼은 이동이 아니라 "학습 자료 추가"(카메라 열기) 행동이다.

### 쓰지 않는다
- 화면 안의 내용 전환에 쓰지 않는다. `PillTabs`를 쓴다.
- 탭을 5개 넘게 두지 않는다. 이 컴포넌트는 이름 있는 탭 4개와 가운데 버튼 하나를 가정한다.
- 퀴즈, 촬영처럼 한 가지에 집중해야 하는 화면에서는 숨긴다.

## 종류

| 이름 | 설명 |
| --- | --- |
| Mordy | 홈 · 과목 · (+) · 커뮤니티 · 더보기. `@/ui/TabBar`. |
| Calendar 앱 | 오늘 · 캘린더 · (+) · 할 일 · 더보기. 같은 모양이고 가운데 +는 빠른 추가다. `calendar-tab-bar` 문서를 본다. |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 탭 높이 50, 가운데 버튼 52 × 52 | 위쪽 여백 6, 아래는 안전 영역 또는 6 중 큰 값. 줄 전체 높이는 약 62 + 안전 영역. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 선택된 탭 | 아이콘과 이름이 `primary`, 아이콘 선 2.3, 이름 Bold. |
| 선택 안 된 탭 | 아이콘과 이름이 `tabInactive`, 아이콘 선 1.9, 이름 Medium. |
| 가운데 버튼 누름 | 0.95배로 줄어든다. |

## 사용 방법

### 탭 네비게이터에 연결

```tsx
import { TabBar } from '@/ui/TabBar';

<Tabs tabBar={(props) => <TabBar {...props} />}>
  <Tabs.Screen name="index" />
  <Tabs.Screen name="subjects" />
  <Tabs.Screen name="community" />
  <Tabs.Screen name="more" />
</Tabs>
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `state` | `(React Native)` | — | 선택 | Expo Router 탭 네비게이터의 상태(현재 탭 위치). |
| `navigation` | `(React Native)` | — | 선택 | 탭 이동을 요청하는 객체. |

나머지 속성은 `BottomTabBarProps`를 그대로 받는다.

`BottomTabBarProps`를 받는다. 직접 호출하지 않고 탭 네비게이터의 `tabBar`에 연결한다. 탭 이름과 아이콘은 컴포넌트 안에 정해져 있다(`index` 홈, `subjects` 과목, `community` 커뮤니티, `more` 더보기).

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 배경 | `surface`, 위쪽 헤어라인 `line` |
| 탭 | 높이 50, 아이콘 22, 이름 10.5px, 아이콘과 이름 사이 2 |
| 가운데 버튼 | 52 × 52 원, `gradient` 대각선, Plus 26 선 2.6, 그림자 `shadow(2)`에 `primaryStrong` 색 |
| 선택 | `primary`. 선택 안 됨 `tabInactive` |

## 접근성

- 줄의 각 탭은 `tab` 역할이고 `selected` 상태가 전달된다. 이름은 "홈", "과목" 등이다.
- 가운데 버튼의 이름은 "학습 자료 추가"이고 `button` 역할이다(탭이 아니다).
- 아이콘과 글자 이름을 항상 함께 보인다.
- 선택은 색, 아이콘 선 두께, 이름 굵기로 함께 나타낸다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 선택 안 된 탭 이름 (10.5px) | `tabInactive` | `surface` | 4.64:1 통과 | 4.75:1 통과 | 4.88:1 통과 | 7.11:1 통과 | 4.5:1 |
| 선택된 탭 이름 (10.5px 굵게) | `primary` | `surface` | 3.93:1 미달 | 5.26:1 통과 | 4.50:1 통과 | 7.17:1 통과 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: 아이콘과 이름을 함께 보여 준다.
- 잘못한 예: 이름 없이 아이콘만 두면 처음 쓰는 사용자가 무엇인지 알 수 없다.

## 함께 보는 컴포넌트

- [TabBar (Calendar)](https://developers.moring.co/tds/components/calendar-tab-bar.md): Mordy Calendar 앱의 탭 줄이다. 오늘 · 캘린더 · (+) · 할 일 · 더보기. Mordy 앱의 `TabBar`와 같은 모양이고 가운데 +는 빠른 추가를 연다.
- [PillTabs](https://developers.moring.co/tds/components/pill-tabs.md): 알약 모양의 탭 모음이다. 하나를 고르면 그 칸이 짙은 색(네이비, 다크 모드는 주색)으로 채워진다.
- [Screen](https://developers.moring.co/tds/components/screen.md): 모든 화면의 바탕이다. 안전 영역, 키보드, 스크롤, 좌우 여백, 아래 고정 영역을 한 번에 처리한다.