# TabBar (Calendar)

Mordy Calendar 앱의 탭 줄이다. 오늘 · 캘린더 · (+) · 할 일 · 더보기. Mordy 앱의 `TabBar`와 같은 모양이고 가운데 +는 빠른 추가를 연다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 이 컴포넌트는 Mordy Calendar 앱(`apps/calendar/src/cal`)에만 있다.
- 앱의 큰 화면 이동에 쓴다.
- 가운데 +는 이동이 아니라 "할 일이나 일정 추가"(빠른 추가 시트 열기)다.

### 쓰지 않는다
- Mordy 앱에는 쓰지 않는다. 그쪽은 `TabBar`(`@/ui/TabBar`)다.

## 종류

종류가 없다. Mordy의 `TabBar`와 탭 이름·아이콘·가운데 버튼의 행동만 다르다.

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 탭 높이 50, 가운데 버튼 52 |  |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 선택됨 | `primary`, 아이콘 선 2.3, 이름 Bold. |
| 선택 안 됨 | `tabInactive`, 선 1.9, Medium. |

## 사용 방법

### 기본

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

<Tabs tabBar={(props) => <TabBar {...props} />}>…</Tabs>
```

### 속성(props)

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

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

`BottomTabBarProps`를 받는다. 탭은 `index` 오늘, `calendar` 캘린더, `tasks` 할 일, `more` 더보기다.

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 모양 | Mordy `TabBar`와 같다(탭 아이콘 22, 이름 10.5, 가운데 52 원 `gradient`) |
| 가운데 버튼 이름 | "할 일이나 일정 추가" |

## 접근성

- `TabBar`와 같다. 가운데 버튼은 `button` 역할이다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 선택 안 된 탭 이름 | `tabInactive` | `surface` | 4.64:1 통과 | 4.75:1 통과 | 4.88:1 통과 | 7.11:1 통과 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: 아이콘과 이름을 함께 보인다.
- 잘못한 예: Mordy 앱 화면에 쓰지 않는다.

## 함께 보는 컴포넌트

- [TabBar](https://developers.moring.co/tds/components/tab-bar.md): Mordy 앱 맨 아래의 탭 줄이다. 홈 · 과목 · (+) · 커뮤니티 · 더보기. 가운데 +는 탭이 아니라 자료 추가 행동이다.
- [QuickAddHost](https://developers.moring.co/tds/components/quick-add.md): 할 일, 일정, 시험을 한 줄로 빠르게 추가하는 시트다. 한 줄에 "내일 4시 영어학원"처럼 쓰면 날짜와 시간을 알아듣고, 못 알아들은 것은 알약 선택으로 채운다.