Web - UserDesktopNavBar

Definition

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

Principle

전역 내비게이션 역할을 하며 상단에 위치해 있을 경우 사용합니다.

좌측엔 셀러의 로고 이미지(이미지가 없으면 채널이름) 영역이 있고 우측엔 구독자 이미지 영역이 있습니다.

중앙엔 내비게이션 역할을 하는 pApp 명이 나열됩니다.
pApp 5개까지 보여지며 그 이상 늘어나면 더보기 버튼이 표시됩니다.

더보기 클릭 시 ContextMenu가 펼쳐지며 나머지 pApp 명이 표시됩니다.

구성

*publ Account에 사용할 경우 좌측 정보 영역 부분(logo or text)만 값을 넣는다.

Spec

Guide

현재 pApp 명이 5개까지 나열, 초과 시 더보기가 뜨는 형태입니다.
화면의 너비가 1200px 이하일 경우, 맞춰서 계속 줄어드는 것이 아닌 잘리게 됩니다.

Size

Height	64px
logoImage	height: 48px width : 180px 180x48일 때 가장 이상적인 사이즈입니다. object-fit : contain; object-position : left;
text	Web - TextLabel 참고 titleText styleTheme : heading1Bold singleLineMode : use max-width 200px까지 대응, 그 후엔 말줄임 처리 navText styleTheme 선택됨 : body1Bold 선택 안됨 : body1Regular singleLineMode : use textAlign : center
userImage	Web - ImageView 참고 shapeType : circular width : 32 ratio : 1_1 scaleType : cover borderMode : use
iBtn	Web - IconButton 참고 (pApp 메뉴가 5개 이상일 때 활성화 되는 더보기 버튼) fillType : fill baseSize : medium iconSize : 24 shapeType : rectangle iconName : ic_more iconFillType : fill
mBtn	Web - MainButton 참고 styleTheme: secondary size : small
ContextMenu	Web - ContextMenu Web - ContextMenuItem 참고 (더보기 버튼 눌렀을 때 뜨는 메뉴) size : medium valueArray : pApp 메뉴명

Color 구성

Color Key

titleText	TextLabel 참고 colorTheme : sysTextPrimary singleLineMode : use
navText	TextLabel 참고 colorTheme 선택됨 : sysTextPrimary 선택 안됨 : sysTextSecondary singleLineMode : use
IconButton	iconColorKey : `ui_cpnt_button_icon_default` baseColorKey : `ui_cpnt_button_fill_base_transparent`
base color	`ui_cpnt_userdesktopnavbar_base_area`
divider	direction : horizontal

Properties

logoImageSrc

셀러의 로고 이미지 src

기획 지시사항

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

Type	`string`
Default	-

titleText

셀러의 채널 이름 (로고가 추가되었으면 보여지지 않습니다.)

(200px 영역 밖으로 나가게되면 말줄임 처리)

기획 지시사항

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

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

menuMode

내비게이션 표시 모양을 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'center_text'`

Enum Values Description
`'center_text'`	중앙 정렬형 텍스트
`'none'`	표시하지 않음

textArray

내비게이션 역할을 하는 pApp명 나열

*pApp 5개까지 보여지며 그 이상 늘어나면 아이콘 버튼 생성

기획 지시사항

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

Type	CODE `{ text: number \| string \| object \| Array<string \| object> \| undefined \| null; value: string \| number \| null \| boolean; }[]`
Default	-

loginInfoMode

로그인의 정보를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'profile'`

Enum Values Description
`'none'`	표시하지 않음
`'profile'`	프로필 이미지 보여짐
`'button'`	Added in 1.2 버튼 보여짐
~~login_button~~	Deprecated in 1.2 ~~로그인 버튼 보여짐~~

mBtnText

Added in 1.2

loginInfoMode가 button일 때, 텍스트 값 입니다.

기획 지시사항

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

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

userImageSrc

기획 지시사항

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

Type	`string`
Default	-

dividerType

아이템 하단의 divider 표시 유형을 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	사용하지 않음
`'solid'`	1px solid 형태 사용

onClickLogo

Added in 1.2

로고가 클릭이 된 시점에 이벤트를 부여합니다.

기획 지시사항

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

Type	`() => void`
Default	-

onClickLoginInfo

Added in 1.2

로그인 정보 버튼이 클릭이 된 시점에 이벤트를 부여합니다.

기획 지시사항

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

Type	`() => void`
Default	-

문서 작성 정보

소유자 / 관리자

김혜진, 박윤규

변경 이력

2022/06/29 : menuMode 필수 표시 삭제 - 안은수
2022/06/08 : spec 내 이미지 수정 - 김혜진
2022/06/08 : mainButton의 fillType제거, styleTheme secondary부여 - 안은수
2022/04/04 : Property 기술방법 변경, 코드에만 있던 prop추가 - 안은수
2022/02/25 : 개발 코드 배포여부 추가 - 안은수
2022/02/03 : 스트링 키값이 직접 박혀있는거 삭제 (login_button 값을 button으로 수정, btnText prop 추가) - 김혜진
2021/11/24 : 화면 너비에 따른 contextmenu 위치 변경, 하단 divider 추가, logo image 사이즈 변경, 전체 가이드 수정, prop 추가 - 김혜진
2021/11/18 : 스펙 내용 추가 (stringkey, 부가 설명), userImage 스펙 내용 추가 - 김혜진
2021/11/17 : prop 수정, text에 대한 설명 수정 - 김혜진
2021/11/16 : 더보기 눌렀을 때 뜨는 contextmenu에 대한 스펙 추가, iBtnIconName에 대한 prop 삭제(spec 내 기술), loginStatus에 대한 prop 추가 - 김혜진
2021/11/11 : 행간에 대한 내용 추가 - 김혜진
2021/10/25 : 내용 업데이트 - 김혜진
2021/10/22 : 내용 업데이트 - 김혜진
2021/10/11 : Principle이랑 Props & value 추가 - 김혜원
2021/09/14 : 최초 작성 - 김혜원