Web - MobileHeaderBar

정의

MobileHeaderBar

최적화 대상

Mobile

기획 배포

완료

디자인 가이드 배포

완료

개발 코드 배포

완료

텍스트형

• 가장 일반적인 형태입니다.

• 높이값은 56px 입니다.

• 좌측에 적용하는 아이콘 형태는 MP 유형에서 메뉴 또는 뒤로가기 형태, MS 유형에서 뒤로가기 형태, MM 유형에서 닫기 형태입니다.

• 화면 확장 시, 아이콘 버튼의 위치와 사이즈를 동일하게 유지합니다.

• 타이틀 영역은 중앙 정렬이고, 숨길 수 있습니다.

• 우측 영역의 아이콘 버튼은 최대 2개까지 가능합니다.

• 타이틀 밑에 서브 텍스트가 있는 경우도 존재합니다.

  • 기존 좌우 버튼 영역과 타이틀 위치는 유지합니다. (서브 텍스트만 밑에 추가된다는 느낌)

• 높이값은 72px입니다.

프로필형

• 타이틀 영역이 프로필로 되어있는 것을 말합니다.

  • 현재는 프로필 정보(프로필 이미지와 닉네임)를 가지고 있습니다.

이미지형

• 타이틀에 텍스트 대신 로고 이미지가 오는 경우가 있습니다.

  • 현재는 publ 로고만 존재합니다.

• 높이값은 56px 입니다.

구성

내용

Height

• 텍스트형, 이미지형 : 56px

• 서브 텍스트 있는 경우 : 72px

• 프로필형 : auto (프로필 정보가 올 때)

text

Web - TextLabel 참고

• titleText

  • styleTheme : body2Bold

  • singleLineMode : use

• captionText

  • style : caption2Regular

  • singleLineMode : use

• nickname

  • style : caption1Regular

  • singleLineMode : use

profileImageSize

Web - ImageView 참고

• shapeType : circular

• width : 40

• ratio : 1_1

• scaleType : cover

• borderMode : use

image (타이틀 영역에 들어가는 이미지)

Web - ImageView 참고

• shapeType : rectangle

• width : 32

• height : 460

• scaleType : cover

iBtn

Web - IconButton 참고

• fillType : fill

• baseSize : large

• iconSize : 24

• shapeType : rectangle

leftBtnMode

• iconName

  • 뒤로가기 : ic_arrow_left

  • 메뉴 : ic_menu

  • 닫기 : ic_xmark

• iconFillType : line

divider

Web - Divider 참고

• direction : horizontal

구성

내용

iconColor

IconButton

• iconColorKey : ui_cpnt_button_icon_enabled

  • default값이며, iBtn colorkey prop을 사용하게된다면, 해당 키는 override 됩니다.

textColor

TextLabel

• titleText

  • colorTheme : sysTextPrimary

• captionText

  • colorTheme : sysTextTertiary

• nicknameText

  • colorTheme : sysTextPrimary

divider

Divider의 Color Key 참고

baseColor

ui_cpnt_headerbar_base_area

구성

내용

iconColor

IconButton

• iconColorKey ui_cpnt_headerbar_icon_02

  • default값이며, iBtn colorkey prop을 사용하게된다면, 해당 키는 override 됩니다.

textColor

TextLabel

• titleText

  • colorTheme : sysTextWhite

• captionText

  • colorTheme : sysTextWhite

• nicknameText

  • colorTheme : sysTextWhite

divider

Divider

• colorTheme : divider2

baseColor

ui_cpnt_headerbar_base_area_transparent

enum

'text'

'text'

'profile'

사용자 프로필 정보

'image'

이미지 사용
*현재 publ Account 로고 사용 중

number | string | object | Array<string | object> | undefined | null

-

number | string | object | Array<string | object> | undefined | null

-

enum

'back'

'back'

뒤로가기

'none'

'menu'

메뉴

'close'

닫기

enum

'none'

'none'

아무것도 표시하지 않습니다.

'ibtn_amount1'

우측 버튼 1개를 표시합니다.

'ibtn_amount2'

우측 버튼 2개를 표시합니다.

enum

'none'

'none'

배경 부분의 투명도가 없는 상태입니다.

'transparent_white'

배경 부분의 투명도가 투명 상태이고, 나타나는 요소들이 통일된 흰색으로 표시됩니다.

enum

-

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

enum

'line'

'line'

line 형태의 아이콘을 사용합니다.

'fill'

fill 형태의 아이콘을 사용합니다.

enum

'ui_cpnt_button_icon_enabled'

정해져 있는 컬러 값 중 하나를 부여합니다. (ui_xxx의 형식입니다.)

enum

'normal'

'normal'

기본 상태 입니다.

'disabled'

비활성화 상태입니다.

enum

'button'

'button'

기본적인 버튼의 역할을 합니다.

'submit'

form data를 제출하는 버튼의 역할을 합니다.

'reset'

form data를 초기 값으로 재설정하는 버튼의 역할을 합니다.

enum

-

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

enum

'line'

'line'

line 형태의 아이콘을 사용합니다.

'fill'

fill 형태의 아이콘을 사용합니다.

enum

'ui_cpnt_button_icon_enabled'

정해져 있는 컬러 값 중 하나를 부여합니다. (ui_xxx의 형식입니다.)

enum

'normal'

'normal'

기본 상태 입니다.

'disabled'

비활성화 상태입니다.

enum

'button'

'button'

기본적인 버튼의 역할을 합니다.

'submit'

form data를 제출하는 버튼의 역할을 합니다.

'reset'

form data를 초기 값으로 재설정하는 버튼의 역할을 합니다.

enum

'no'

'no'

'solid'

solid 형식의 라인 사용

enum

'none'

'none'

'solid'

solid 형식의 라인 사용

string

-

(e: React.MouseEvent<HTMLButtonElement>) => void;

-

(e: React.MouseEvent<HTMLButtonElement>) => void;

-

(e: React.MouseEvent<HTMLButtonElement>) => void;

-

김혜진, 박윤규

• 2023/09/25 : colorTheme 관련 Spec 및 Prop 추가 - 김혜원

• 2022/09/29 : onClickLeftBtn, onClickIBtn1, onClickIBtn2 type 변경 - 안은수

• 2022/08/03 : captionText prop 추가 및 해당 prop 추가에 따른 Principle, Spec 내용 추가 - 김혜진

• 2022/04/01 : Property 기술방법 변경, 코드에만 있던 prop추가 - 안은수

• 2022/02/25 : 개발 코드 배포여부 추가 - 안은수

• 2022/02/08 : iBtn state, color와 관련한 prop 추가 - 김혜진

• 2022/01/27 : dividerType 명칭 변경(dividerMode) - 김혜진

• 2021/12/22 : prop에서 textMode를 textType이라 명칭 수정, textType 내 image 값 추가(해당 내용 spec에 상세 기술) - 김혜진

• 2021/11/17 : style을 styleTheme로 수정 - 김혜진

• 2021/11/16 : icon에 대한 spec, prop 추가 - 김혜진

• 2021/11/11 : 프로필 들어갈 때(expand) 가이드 수정, 행간에 대한 설명 추가, 아이콘 컬러 키값 수정 - 김혜진

• 2021/10/26 : 텍스트 부분 TextLabel 값으로 수정, 기본형일 때 사이즈 body1에서 body2로 수정 - 김혜진

• 2021/10/21 : Property, Value 수정 - 김혜진

• 2021/10/01 : 문서 최초 작성 - 김혜진