TabBar

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

이 페이지의 목차

미리보기
언제 쓰는가
종류
크기
상태
사용 방법
속성(props)
치수와 토큰
접근성
잘한 예와 잘못한 예
함께 보는 컴포넌트

분류: 탐색
가져오기: import { TabBar } from '@/ui/TabBar'
코드 위치: apps/mobile/src/ui/TabBar.tsx:20

미리보기#

실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.

탭을 눌러 선택 바꾸기

언제 쓰는가#

쓴다

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

쓰지 않는다

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

종류#

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

크기#

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

상태#

선택된 탭

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

사용 방법#

탭 네비게이터에 연결

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)#

TabBar 속성
이름	타입	기본값	필수	설명
`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 역할이다(탭이 아니다).
아이콘과 글자 이름을 항상 함께 보인다.
선택은 색, 아이콘 선 두께, 이름 굵기로 함께 나타낸다.

글자 색 대비

글자 크기별 기준: 작은 글자는 4.5:1 이상, 큰 글자(굵은 18.66px 이상)는 3:1 이상이다. 값은 선택한 서비스와 모드의 토큰으로 계산했다.

TabBar 글자 색 대비
쓰임	글자색	바탕	대비	기준
선택 안 된 탭 이름 (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): Mordy Calendar 앱의 탭 줄이다. 오늘 · 캘린더 · (+) · 할 일 · 더보기. Mordy 앱의 TabBar와 같은 모양이고 가운데 +는 빠른 추가를 연다.
PillTabs: 알약 모양의 탭 모음이다. 하나를 고르면 그 칸이 짙은 색(네이비, 다크 모드는 주색)으로 채워진다.
Screen: 모든 화면의 바탕이다. 안전 영역, 키보드, 스크롤, 좌우 여백, 아래 고정 영역을 한 번에 처리한다.