Web - MobileOverlay Panel

Added in 1.4

Definition

정의	MobileOverlay (구 BottomSheet)
최적화 대상	Mobile
기획 배포	완료
디자인 가이드 배포	완료
개발 코드 배포

Principle

Overlay는 주 화면이 존재하고 부가적인 조작이 필요하거나 관련있는 콘텐츠를 추가적으로 제공할 때 사용합니다.. 주 화면은 오버레이 존재 여부와 상관없이 인터렉션이 가능합니다.

기존의 흐름에서 벗어나지 않고 관련된 작업을 할 수 있어 더 빠르게 진행되는 느낌을 제공할 수 있습니다.
또한 다양한 추가적인 정보를 제공할 때인데, 화면 이동이 발생하지 않아 사용자는 신속하고 간편한 느낌을 받을 수 있습니다.

그 중 MobileOverlay는 화면 하단에 있으며 힌트처럼 항상 헤더 부분이 노출되어 있습니다.
즉 접히거나 펼쳐진 상태는 존재하나 닫히는 상태는 없습니다. 따라서 DesktopOverlay처럼 우측 상단에 닫기가 존재하지 않습니다.

Handlebar가 항상 존재합니다. Handlebar는 사용자에게 MobileOverlay가 확장할 수 있음을 알려줍니다. 드래그를 통해 확장 할 수 있습니다.

확장 상태는, 접힌 상태와 콘텐츠 일부 영역을 덮은 상태 그리고 화면 전체를 덮은 상태가 있습니다. (state : collapsed, half-expanded, expanded / half-expanded의 경우 특정 앵커값(지정된 값)까지만 펼쳐집니다.)

Header와 Body, Footer영역이 있습니다.

Header : 오버레이의 타이틀 영역입니다. 화면에 항상 노출되는 영역입니다. 스크롤 시 고정되어 있습니다.
Body : 펼쳐졌을 경우 보여지는 영역입니다. 여러 컴포넌트를 배치할 수 있습니다. 스크롤이 가능한 영역입니다.
Footer : 하단에 고정되어 있습니다. 주로 버튼이나 입력창이 올 수 있습니다.

Shadow를 가지고 있으며, Overlay Layer에 포함되는 요소이기 때문에 elevation-3으로 설정합니다.
(Elevations and Shadows 문서 참고)

*채널 소개에 적용한 건 모바일오버레이가 아니라 시트를 사용하여 따로 만든 형태로 봐야할 것

구성

Spec

Guide

헤더 영역을 드래그 해서 펼치거나 접을 수 있고 우측 IconButton으로 펼치고 접을 수 있습니다. (가이드 내 draggable과 녹색 터치 영역 참고)

captionText가 사용되지 않는다면 나머지 구성요소(icon, titleText...)가 영역 내 center 정렬이 됩니다.

접힌 상태와 콘텐츠 일부 영역을 덮은 상태 그리고 화면 전체를 덮은 상태가 존재합니다. (half-expanded의 경우 특정 앵커값(지정된 값)까지만 펼쳐집니다.)

*현재 half-expanded는 영상 바로 아래까지 펼쳐진 상태

Size, Property

(color와 관련한 사항은 하단에 기술)

	구성	내용
Header 영역	height	80px
	icon	Web - Icon 참고 size : 20
	text	Web - TextLabel 참고 titleText styleTheme : caption1Bold ellipsisMode : use lineLimit : 1 captionText styleTheme : caption1Regular ellipsisMode : use lineLimit : 1
	iBtn	Web - IconButton 참고 fillType : fill baseSize : large iconSize : 20 shapeType : rectangle iconName : ic_arrow_up, ic_arrow_down iconFillType : line
	Handlebar	width : 64px height : 8px
	radius	top-left, top-right : 24px
Body 영역	Component 조합
Footer 영역	Component 조합 (주로 버튼과 텍스트필드 사용할 것을 권장)
전체 영역	border	1px

Color 구성

Color Key

구성	내용
icon color	`ui_cpnt_bottomsheet_icon_01`
titleText	colorTheme : sysTextPrimary
captionText	colorTheme : sysTextSecondary
IconButton	iconColorKey : `ui_cpnt_button_icon_default` baseColorKey : `ui_cpnt_button_fill_base_transparent`
Handlebar	`ui_cpnt_bottomsheet_bar`
base color	`ui_cpnt_bottomsheet_base`
border	`ui_cpnt_bottomsheet_border`
shadow	Overlay Layer에 소속, elevation-3를 적용합니다.

Properties

Properties항목들은 개발 코드 배포후에 확정됩니다.

titleText

Header 영역에 표시할 타이틀 텍스트 값입니다.

기획 지시사항

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

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

captionText

Header 영역에 표시할 추가 설명 텍스트 값입니다.

기획 지시사항

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

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

iconMode

Header 영역 좌측 아이콘 사용 여부를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'use'`

Enum Values Description
`'none'`	아이콘을 사용하지 않습니다.
`'use'`	아이콘을 사용합니다.

iconName

아이콘 사용 시 아이콘의 이름을 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'ic_'`

Enum Values Description

'ic_xxx'

표시할 아이콘의 이름입니다.

Web - Icon의 Value 값을 참고해주세요. (ic_xxx의 형식입니다.)

iconFillType

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

기획 지시사항

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

Type	`enum`
Default	`'line'`

Enum Values Description
`'line'`
`'fill'`

bodySpacingMode

Body 영역의 여백 사용 여부를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	여백을 사용하지 않습니다.
`'use'`	여백을 사용합니다. (Guide 내 간격 참고)

scrollMode

스크롤을 사용할 지에 대한 여부를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'infinite'`

Enum Values Description
`'none'`	모든 스크롤이 불가능하고, 아이템을 단순히 나열합니다. height는 자동으로 Item의 갯수만큼 늘어나게 됩니다.
`'infinite'`	무한 스크롤을 사용합니다. height는 부모의 높이에 맞추게 됩니다.
`'page'`	페이지네이션 형식을 사용하고, 제한적으로만 스크롤을 사용합니다.

scrollVisibleType

스크롤이 생겼을 시, 스크롤의 노출 여부를 결정합니다.

Type	`enum`
Default	`'hidden'`

Enum Values Description

Enum Values Description

'hidden'

아예 표시하지 않습니다.

CODE

/* 참고용 */
#element{
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}
#element::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}
/* 참고
* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_hide_scrollbar_keep_func
*/

'moving'

(아직 사용할 수 없습니다)

움직일때에만 표시하고 더이상 표시하지 않습니다.

CODE

$body

'visible'

(아직 사용할 수 없습니다)

항상 표시합니다.

/* hidden과 비슷한 방식으로 수치를 결정 */ 2{ 3}

문서 작성 정보

소유자 / 관리자	김혜진
변경 이력	2022/05/16 : 문서 spec 업데이트 - 김혜진 2022/05/11 : 문서 업데이트 - 김혜진 2022/04/28 : 문서 최초 작성 (복제) - 김혜진