Web - DesktopHeaderBar

Definition

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

Principle

Navigation bar를 만들때 HeaderBar의 디자인을 사용합니다.
즉 HeaderBar가 Navigation의 역할을 합니다.

(Side menu도 Navigation 역할을 할 수 있습니다.)

large 사이즈는 Overlay에 사용합니다.

Things to Note

*iconMode left면 leftBtnMode는 none이 원칙!

*leftBtnMode 활성화시, menu, back, close 이외의 아이콘은 들어갈 수 없음

Spec

Guide

Size, Property

	XLarge	Large (Overlay Header)
Height	64px	56px
text	Web - TextLabel 참고 styleTheme : body1Bold singleLineMode : use	Web - TextLabel 참고 styleTheme : body1Bold singleLineMode : use
icon (좌측)	size : 24 fillType : line iconName : (해당 페이지 아이콘)	size : 24 fillType : line iconName : (해당 페이지 아이콘)
iBtn (좌측 - 뒤로가기, 우측 - 닫기, 도움말)	Web - IconButton 참고 fillType : fill baseSize : large iconSize : 24 shapeType : rectangle iconName 뒤로가기 : ic_arrow_left 닫기 : ic_xmark 도움말 : ic_help_window iconFillType : line	Web - IconButton 참고 fillType : fill baseSize : large iconSize : 24 shapeType : rectangle iconName 뒤로가기 : ic_arrow_left 닫기 : ic_xmark iconFillType : line
mBtn	Web - MainButton 참고 fillType : line size : small	N/A
mBtnFill	Web - MainButton 참고 fillType : fill size : small	N/A
Divider	Web - Divider 참고 direction : horizontal

‌

Color 구성

‌

Color Key

구성	내용
iconColor	`ui_cpnt_headerbar_icon`
textColor	TextLabel colorTheme : sysTextPrimary
IconButton	iconColorKey : `ui_cpnt_button_icon_enabled` baseColorKey : `ui_cpnt_button_fill_base_transparent`
Divider	Divider 참고
baseColor	`ui_cpnt_headerbar_base_area`

Properties

text

헤더에 사용될 텍스트 값입니다.

기획 지시사항

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

Type	`number \| string \| object \| Array<string \| object> \| undefined \| null`
Default	-

size

크기를 결정합니다.
*large는 Overlay에 사용됩니다.

기획 지시사항

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

Type	`enum`
Default	`'xlarge'`

Enum Values Description
`'xlarge'`
`'large'`	Overlay의 Header로 사용합니다.

leftDisplayType

왼쪽 영역의 종류 결정

기획 지시사항

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

Type	`enum`
Default	`'text'`

Enum Values Description
`'text'`	텍스트로만 이루어진 형태입니다.
`'icon'`	해당 페이지에 맞는 아이콘이 들어갑니다.
`'back'`	(spec 내 iBtn 기술 참고)

iconName

leftDisplayType이 icon일 때, 텍스트 좌측에 있는 아이콘 이름을 결정합니다.

기획 지시사항

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

Type	`enum`
Default	-

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

rightBtnMode

우측에서 첫번째 버튼의 사용 유무와 종류를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	사용하지 않습니다.
`'close'`	닫기 버튼 입니다. (spec 내 iBtn 기술 참고)
`'mbtn'`	Line 타입의 메인 버튼입니다. (small, Line fillType) *large 사이즈엔 사용하지 않습니다.
`'mbtn_fill'`	Added in 1.3.1 Fill 타입의 메인 버튼입니다. (small, Fill fillType) *large 사이즈엔 사용하지 않습니다.
`'help_window'`	Added in 1.3.1 도움말 창을 띄울 수 있는 버튼입니다. (spec 내 iBtn 기술 참고)

rightBtn2Mode

Added in 1.2.0

우측에서 두번째 버튼의 사용 유무와 종류를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`
`'help_window'`	도움말 창을 띄울 수 있는 버튼입니다. (spec 내 iBtn 기술 참고)
`'mbtn'`	Added in 1.3.1 Line 타입의 메인 버튼입니다. (small, Line fillType) *large 사이즈엔 사용하지 않습니다.
`'mbtn_fill'`	Added in 1.3.1 Fill 타입의 메인 버튼입니다. (small, Fill fillType) *large 사이즈엔 사용하지 않습니다.

rightBtn3Mode

Added in 1.3.1

우측에서 세번째 버튼의 사용 유무와 종류를 결정합니다.
*현재 도움말에 대한 것만 가능합니다.

기획 지시사항

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

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`
`'help_window'`	도움말 창을 띄울 수 있는 버튼입니다. (spec 내 iBtn 기술 참고)

mBtnText

rightBtnMode가 mbtn인 경우 버튼 내부에 들어갈 텍스트를 결정합니다.

//TODO 시각적 기준의 글자수 길이 제한

기획 지시사항

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

Type	`number \| string \| object \| Array<string \| object> \| undefined \| null`
Default	-

mBtn2Text

Added in 1.3.1

rightBtn2Mode가 mbtn인 경우 버튼 내부에 들어갈 텍스트를 결정합니다.

//TODO 시각적 기준의 글자수 길이 제한

기획 지시사항

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

Type	`number \| string \| object \| Array<string \| object> \| undefined \| null`
Default	-

btnState

Added in 1.3.1

rightBtnMode에 ibtn, mbtn을 사용할 경우, 버튼의 상태를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'normal'`

Enum Values Description
`'normal'`	기본 상태입니다.
`'disabled'`	비활성화 상태입니다.

btn2State

Added in 1.3.1

rightBtn2Mode에 ibtn, mbtn을 사용할 경우, 버튼의 상태를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'normal'`

Enum Values Description
`'normal'`	기본 상태입니다.
`'disabled'`	비활성화 상태입니다.

btn3State

Added in 1.3.1

rightBtn2Mode에 ibtn, mbtn을 사용할 경우, 버튼의 상태를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'normal'`

Enum Values Description
`'normal'`	기본 상태입니다.
`'disabled'`	비활성화 상태입니다.

dividerType

라인 유형

기획 지시사항

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

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	사용하지 않음
`'solid'`	solid 형식의 라인 사용

onClickLeftBtn

Added in 1.2.3

컴포넌트 좌측에 버튼이 있을 때, 해당 버튼이 클릭이 된 시점에 이벤트를 부여합니다.

기획 지시사항

기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type	`() => void`
Default	-

onClickRightBtn

Added in 1.2.3

우측에서 첫번째 버튼이 있을때, 해당 버튼이 클릭이 된 시점에 이벤트를 부여합니다.

기획 지시사항

기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type	`() => void`
Default	-

onClickRightBtn2

Added in 1.3.1

우측에서 두번째 버튼이 있을때, 해당 버튼이 클릭이 된 시점에 이벤트를 부여합니다.

기획 지시사항

기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type	`() => void`
Default	-

onClickRightBtn3

Added in 1.3.1

우측에서 두번째 버튼이 있을때, 해당 버튼이 클릭이 된 시점에 이벤트를 부여합니다.

기획 지시사항

기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type	`() => void`
Default	-

문서 작성 정보

소유자 / 관리자

김혜진, 박윤규

변경 이력

2022/04/18 : 우측 영역의 버튼 관련 action prop 추가 - 안은수
2022/04/15 : 우측 영역의 버튼 spec과 prop 수정 및 추가 - 김혜진
2022/03/24 : Property 기술방법 변경, 코드에만 있던 prop추가 - 안은수
2022/02/25 : 개발 코드 배포여부 추가 - 안은수
2022/02/19 : Property 기술방법 변경 - 박윤규
2022/02/03 : prop 추가 (rightBtn2Mode) - 김혜진
2021/11/18 : leftDisplayType 내 ibtn을 back으로 수정 - 김혜진
2021/11/17 : style을 styleTheme로 수정 - 김혜진
2021/11/16 : 스펙에 icon에 대한 내용 추가 - 김혜진
2021/11/11 : 행간에 대한 내용 추가, 아이콘 버튼의 아이콘 컬러키 수정 - 김혜진
2021/10/29 : 좌측 영역에 대한 prop 수정, spec 내 가이드 수정 - 김혜진
2021/10/26 : 텍스트 부분 TextLabel 값으로 수정 - 김혜진
2021/10/08 : 가이드 이미지 업데이트 - 김혜진
2021/09/30 : Spec 추가 / 우측 버튼 종류 추가에 따른 Property, Value 수정 - 김혜진
2021/09/10-11 : Property 및 Value 업데이트 - 박윤규
2021/09/08 : 최초 작성 - 김혜원