본문으로 건너뛰기
TDSMoring 디자인 시스템

TabBar (Calendar)

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

이 페이지의 목차
분류
Calendar 앱
가져오기
import { TabBar } from '@/cal/TabBar'
코드 위치
apps/calendar/src/cal/TabBar.tsx:20

미리보기#

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

탭 눌러 보기

언제 쓰는가#

쓴다

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

쓰지 않는다

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

종류#

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

크기#

TabBar (Calendar) 크기
이름값설명
기본탭 높이 50, 가운데 버튼 52

상태#

TabBar (Calendar) 상태
상태모습과 동작
선택됨primary, 아이콘 선 2.3, 이름 Bold.
선택 안 됨tabInactive, 선 1.9, Medium.

사용 방법#

기본

기본
import { TabBar } from '@/cal/TabBar';

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

속성(props)#

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

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

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

치수와 토큰#

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

접근성#

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

글자 색 대비

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

TabBar (Calendar) 글자 색 대비
쓰임글자색바탕대비기준
선택 안 된 탭 이름tabInactivesurface4.64:1 통과4.75:1 통과4.88:1 통과7.11:1 통과4.5:1 (작은 글자)

잘한 예와 잘못한 예#

잘한 예아이콘과 이름을 함께 보인다.
Mordy 앱의 하단 탭에 Calendar 탭 줄
잘못한 예Mordy 앱 화면에 쓰지 않는다.
  • TabBar: Mordy 앱 맨 아래의 탭 줄이다. 홈 · 과목 · (+) · 커뮤니티 · 더보기. 가운데 +는 탭이 아니라 자료 추가 행동이다.
  • QuickAddHost: 할 일, 일정, 시험을 한 줄로 빠르게 추가하는 시트다. 한 줄에 "내일 4시 영어학원"처럼 쓰면 날짜와 시간을 알아듣고, 못 알아들은 것은 알약 선택으로 채운다.