Web - DesktopBasicModal Panel

정의

DesktopBasicModal

최적화 대상

Desktop

기획 배포

완료

디자인 가이드 배포

완료

개발 코드 배포

완료

Header

• 필수입니다.

• 모달의 타이틀이 들어가는 영역입니다.

• 스크롤 시, 고정되는 영역입니다.

Body

• 필수입니다.

• 모달의 내용이 들어가는 영역입니다.

• 문장만 있는 경우도 있고, Component들이 조합된 형태가 들어가기도 합니다.

• 길어질 경우, 스크롤이 되는 영역입니다.

• contentText에 텍스트 값이 없을 경우, 숨김 처리 됩니다.

Footer

• 최대 3개까지 들어갈 수 있습니다.

  • 버튼 좌측에 1개, 우측에 최대 2개 가능

• 우측 2개 버튼은 필수입니다.

• 버튼의 순서는 가장 우측부터 좌측으로 갑니다.

  • 주로 우측에서 1번째는 해당 모달에 대한 액션(생성, 적용, 등록 등)을 보여주고, 우측에서 2번째는 모달을 닫는 액션(취소)을 보여줍니다.
    따라서 기본적으로 2개의 버튼을 Footer에 배치합니다.

  • 가장 좌측 버튼은 거의 사용하지 않으며, 값 초기화와 같은 예외적인 상황이 생길 때 사용합니다.

width

• large : 960px

• medium : 688px

• small : 400px

• rlarge

  • min-width : 960px

  • width : 80vw

  • max-width : 1400px

height

Body 영역에만 부여

• max-height : 60vh

• 모달 전체 height : calc (60vh + header_height + footer_height)

text

Web - TextLabel 참고

• titleText

  • styleTheme : headingBold

• contentText

  • styleTheme : subTitleRegular

mBtn

Web - MainButton 참고

• size : medium

base

radius : 24px

Text

TextLabel

• titleText

  • colorTheme : sysTextPrimary

• contentText

  • colorTheme : sysTextSecondary

MainButton

MainButton의 Color Key 참고

• 가장 우측 버튼 styleTheme: primary (default값)

• 그 외 나머지 버튼 styleTheme: secondary

base color

ui_cpnt_modal_base

border color

ui_cpnt_modal_border (1px)

• 모달 base, footer 상단에 적용

shadow

Modal Layer에 소속, elevation-5를 적용합니다.

dimmed

모달 바깥 dim 처리 된 영역

ui_cpnt_modal_dimmed

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

-

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

-

enum

'mbtn_amount2'

'mbtn_amount1'

가장 우측에서 첫번째 버튼 1개를 표시합니다.

'mbtn_amount2'

우측에서 2개의 버튼을 표시합니다.

'mbtn_amount3'

우측에 2개, 좌측 1개 총 3개의 버튼을 표시합니다.

enum

'large'

'large'

'medium'

'small'

'rlarge'

enum

'use'

'none'

여백을 사용하지 않습니다.

'use'

여백을 사용합니다.
(Guide 내 간격 참고)

enum

'overlay'

'auto'

'overlay'

'visible'

(가장 아래에 Dropdown같은 컴포넌트가 쓰일때 한시적으로 사용합니다.)

*layer구현전에 개발적으로 필요할때 임시로 쓰일 수 있는 value입니다.

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

-

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

-

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

-

enum

'normal'

'normal'

기본 상태 입니다.

'disabled'

비활성화 상태입니다.

enum

'normal'

'normal'

기본 상태 입니다.

'disabled'

비활성화 상태입니다.

enum

'normal'

'normal'

기본 상태 입니다.

'disabled'

비활성화 상태입니다.

enum

'button'

'button'

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

'submit'

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

enum

'button'

'button'

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

'submit'

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

enum

'button'

'button'

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

'submit'

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

() => void;

-

() => void;

-

() => void;

-

enum

'visible'

'hidden'

아예 표시하지 않습니다.

/* 참고용 */
#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
*/

'visible'

항상 표시합니다.

React.ReactNode

-

김혜진

• 2023/01/27: bodyOverflowType prop에 'overlay' value추가 및 default값으로 설정- 안은수

• 2023/01/25 : rlarge에 대한 spec 수정 및 scrollVisibleType prop 추가 - 김혜진

• 2022/06/08 : spec 내 이미지 수정 - 김혜진

• 2022/06/08: 코드에만 있던 prop추가 - 안은수

• 2022/06/08 : spec 수정(MainButton의 fillType line을 제거, styleTheme을 1에는 primary, 2와3에는 secondary 부여) - 안은수

• 2022/05/31 : spec 수정(max-height) - 김혜진

• 2022/05/10 : spec 수정(width, height, radius) - 김혜진

• 2022/04/29 : prop 추가 (bodySpacingMode) - 김혜진

• 2022/04/28 : 문서 최초 작성(복제) - 김혜진