Web - DesktopTabBar

Definition

정의	DesktopTabBar
최적화 대상	Desktop
기획 배포	완료
디자인 가이드 배포	완료
개발 코드 배포	완료

Principle

탭은 페이지 전체 헤더에 따라 서로 관련이 있는 메뉴들을 사용합니다. 즉, 같은 맥락 안에서 화면 전환이 필요할 때 탭을 사용합니다.

‌

Tab 종류

‌PageHeader 영역에 쓰여지는 Tab과 콘텐츠 내 사용하는 Tab이 있습니다.

‌

PageHeaderTab

MainTab
- 페이지 헤더 영역에서 메인 메뉴 역할을 하고 있는 탭 메뉴입니다.
SubTab
- 페이지 헤더 영역에서 서브 메뉴 역할을 하고 있는 탭 메뉴입니다. MainTab의 활성화된 메뉴의 하위 탭 메뉴가 필요할 때 사용합니다.

ContentsTab

콘텐츠 내 내용 구분을 위해 사용하는 탭메뉴입니다.

Spec

Guide

Size, Property

종류

Height

text

Medium

(MainTab, ContentsTab)

40px

Web - TextLabel 참고

inactive
- styleTheme : caption1Regular
- singleLineMode : use

active
- styleTheme : caption1Bold
- singleLineMode : use

Small

(SubTab)

32px

Web - TextLabel 참고

inactive
- styleTheme : caption1Regular
- singleLineMode : use

active
- styleTheme : caption1Bold
- singleLineMode : use

Divider

Divider 참고

direction : horizontal

Color 구성

Color Key

MainTab

	active	inactive
textColor	TextLabel colorTheme : usrTextBrandPrimary	TextLabel colorTheme : sysTextSecondary
active indicator border color	`ui_cpnt_tabbar_border_active_indicator_primary`	-
Divider	Divider 참고
base color (공통)	`ui_cpnt_tabbar_base_area`

SubTab

active

inactive

textColor

TextLabel

colorTheme : sysTextPrimary

TextLabel

colorTheme : sysTextSecondary

base color (공통)

ui_cpnt_tabbar_base_area_sub

ContentsTab

	active	inactive
textColor	TextLabel colorTheme : sysTextPrimary	TextLabel colorTheme : sysTextSecondary
active indicator border color	`ui_cpnt_tabbar_border_active_indicator`	-
Divider	Divider 참고
base color (공통)	`ui_cpnt_tabbar_base_area`

Properties

textArray (Deprecated in 1.5)

~~표시될 텍스트 배열입니다.~~

Deprecated in 1.5

~~기획 지시사항~~

~~기획서 상 작성 방법 : 텍스트만 기술~~

Type

CODE

{
  title: number | string | object | Array<string | object> | undefined | null;
  path: string;
  subArray?: {
    title: number | string | object | Array<string | object> | undefined | null;
    path: string;
  }[];
}

Default

-

itemArray

Added in 1.4

tab item의 title, isActive, onClick 이벤트, subArray 값 리스트 입니다.

기획 지시사항

기획서 상 작성 방법 : 텍스트만 기술

Type

CODE

{
  title: number | string | object | Array<string | object> | undefined | null;
  isActive: boolean;
  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
  iconMode?: 'none' | 'use';
  iconName?: FillIconNameKeys | LineIconNameKeys;
  iconFillType?: 'line' | 'fill';
  subArray?: {
    title: number | string | object | Array<string | object> | undefined | null;
    isActive: boolean;
    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
  }[];
}

Default

-

styleTheme

미리 결정되어있는 스타일 유형입니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'main'`

Enum Values Description
`'main'`	main용 탭 바 2.1에서 디자인 변경 됨
`'content'`	2.1에서 디자인 변경 됨
`'content_black'`	Added in 2.1 content 탭 바

iconMode

Added in 2.2

아이콘 유무를 결정합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'none'`

Enum Values Description

'none'

아이콘을 사용하지 않습니다.

'use'

아이콘을 사용합니다.

*탭명 우측에 배치되며, styleTheme에 포함되는 'main' | 'content' | 'content_black' 에만 적용됨

iconFillType

Added in 2.2

아이콘의 형태를 결정합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'line'`

Enum Values Description

Enum Values Description
`'line'`	line 형태의 아이콘을 사용합니다.
`'fill'`	fill 형태의 아이콘을 사용합니다.

iconName

Added in 2.2

아이콘 이름을 의미합니다. 사용할 수 있는 아이콘은 미리 정해져있습니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	-

Enum Values Description
Icon 컴포넌트의 iconName 값 중 하나를 부여합니다. (ic_xxx의 형식입니다.)

문서 작성 정보

소유자 / 관리자

김혜진, 박윤규

변경 이력

2024/03/12 : itemArray에 iconMode, iconName, iconFillType 추가 - 안은수
2023/12/06 : 탭바에 아이콘 관련 prop 추가 - 김혜진
2023/07/25 : SW 디자인 개편에 따른 styleTheme 내 value 수정 및 추가 - 김혜진
2022/09/29 : itemArray 내부 onClick type 변경 - 안은수
2022/05/24 : itemArray prop추가 - 안은수
2022/03/24 : Property 기술방법 변경 - 안은수
2022/02/25 : 개발 코드 배포여부 추가 - 안은수
2022/02/19 : Property 기술방법 변경 - 박윤규
2021/11/17 : style을 styleTheme로 수정 - 김혜진
2021/11/11 : 행간에 대한 내용 추가 - 김혜진
2021/10/26 : 텍스트 부분 TextLabel 값으로 수정 - 김혜진
2021/10/22 : MainTab 중앙정렬에 대한 값 삭제(UserDesktopTabBar 유형 추가) - 김혜진
2021/10/18 : MainTab 중앙정렬에 대한 값 추가 - 김혜진
2021/09/30 : Spec 내용 추가 - 김혜진
2021/09/16 : Principle 내용 추가 - 김혜진
2021/09/10-11 : Property 및 Value 업데이트 - 박윤규
2021/09/10 : Principle, Property 내용 정리 - 김혜진
2021/09/08 : 최초 작성 - 김혜원