Web - DesktopHeadlessModal Panel

Added in 1.4

모달의 내용은 개별 기획자가 와이어프레임을 만드는 것이 원칙입니다.
모달이 지켜야 할 기본적인 생성 규칙, 요소를 설명합니다.

Definition

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

Principle

DesktopHeadlessModal은 DesktopBasicModal과 달리 Header & Footer 가 없고, 한 모달 속에 여러가지의 목적을 달성할 수 있게 허용해주는 모달입니다.

제공하는 정보의 중요도에 따라 모달의 닫히는 방식이 결정되어야합니다.

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

나가기 버튼 추가시, ic_xmark 를 사용하는것을 권고합니다. (자세한 추천 스펙은 아래에서 참고해주세요)

구성

Body

필수입니다.
모달의 내용이 들어가는 영역입니다.
문장만 있는 경우도 있고, Component가 조합된 형태가 들어가기도 합니다.
길어질 경우, 스크롤이 되는 영역입니다. 스크롤이 표시 될지 말지는 prop에서 설정할 수 있습니다.

Spec

Size, Property

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

구성	내용
width	large : width : 960px medium : width : 688px small : wdith : 400px rlarge : min-width : 960px width : 60vw
height	large : max-height : 80vh medium : max-height : 80vh small : max-height : 80vh rlarge max-height : 80vh
base	radius : 24px

Color 구성

Color Key

구성	내용
base color	`ui_cpnt_modal_base`
border color	`ui_cpnt_modal_border` (1px)
shadow	Modal Layer에 소속, elevation-5를 적용합니다.
dimmed	모달 바깥 dim 처리 된 영역 `ui_cpnt_modal_dimmed`

Recommended exit IconButton spec

IconButton 스펙

구성	내용
iconName	`'ic_xmark'`
baseSize	`'large'`
baseColorKey	`'ui_cpnt_button_fill_base_transparent'`
iconColorKey	normal : `'ui_cpnt_icon_sys_grey_01'` fixed-dark : `'ui_cpnt_icon_sys_dark'` fixed-white : `'ui_cpnt_icon_sys_white'`

Properties

body*

모달의 내용이 들어가는 영역입니다. 문장만 있는 경우도 있고, Component가 조합된 형태가 들어가기도 합니다.
(길어질 경우, 스크롤이 되는 영역입니다. 스크롤이 표시 될지 말지는 prop에서 설정할 수 있습니다.

기획 지시사항

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

Type	`React.ReactNode`
Default	-

size

모달의 사이즈를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'rlarge'`

Enum Values Description
`'large'`	CODE `{ width: 960px; }`
`'medium'`	CODE `{ width: 688px; }`
`'small'`	CODE `{ width: 400px; }`
`'rlarge'`	추가 필요

dimmedClickCloseMode

모달이 닫히는 액션을 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'none'`

Enum Values Description
`'use'`	배경 클릭시 닫힘
`'none'`	배경 클릭해도 닫히지 않음 (반드시 나가기 버튼을 제공하세요)

scrollVisibleType

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

기획 지시사항

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

Type	`enum`
Default	`'visible'`

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'

항상 표시합니다.

onClose

Added in 1.4

dimmedClickCloseMode가 'use'일때, dim이 클릭된 시점에 이벤트를 부여합니다.

기획 지시사항

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

Type	`() => void`
Default	-

문서 작성 정보

소유자 / 관리자	김혜원
변경 이력	2023/01/27: scrollVisibleType prop default값 'hidden'에서 'visible'로 변경 - 안은수 2022/06/08: 코드에만 있던 prop추가 - 안은수 2022/04/25 : 사이즈 값 및 prop 이름 확정 - 김혜원 2022/04/18 : 내용 수정 - 김혜원 2022/04/12 : 최초작성 - 김혜원