Web - DesktopHeadlessModal Panel

정의

DesktopHeadlessModal

최적화 대상

Desktop

기획 배포

완료

디자인 가이드 배포

완료

개발 코드 배포

완료

Body

• 필수입니다.

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

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

• 길어질 경우, 스크롤이 되는 영역입니다. 스크롤이 표시 될지 말지는 prop에서 설정할 수 있습니다.

Footer
(선택)

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

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

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

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

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

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

width

• xlarge :

  • width : 1200px

• large :

  • width : 960px

• medium :

  • width : 688px

• small :

  • wdith : 400px

• rxlarge :

  • min-width : 1200px

  • width : 70vw

• rlarge :

  • min-width : 960px

  • width : 60vw

height

• large :

  • max-height : 80vh

• medium :

  • max-height : 80vh

• small :

  • max-height : 80vh

• rlarge

  • max-height : 80vh

mBtn

Web - MainButton 참고

• size : medium

base

radius : 24px

mainButton

MainButton의 Color Key 참고

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

• 그 외 나머지 버튼 styleTheme: secondary

base color

ui_cpnt_modal_base

border color

ui_cpnt_modal_border (1px)

shadow

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

dimmed

모달 바깥 dim 처리 된 영역

ui_cpnt_modal_dimmed

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'

React.ReactNode

-

enum

'rlarge'

'xlarge'

'large'

'medium'

'small'

'rxlarge'

'rlarge'

enum

'none'

'use'

배경 클릭시 닫힘

'none'

배경 클릭해도 닫히지 않음 (반드시 나가기 버튼을 제공하세요)

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
*/

'moving'

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

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

$body

'visible'

항상 표시합니다.

enum

'none'

'use'

footer를 사용합니다.

'none'

footer를 사용하지 않습니다.

enum

'tbtn_amount1'

'tbtn_amount1'

1개

'tbtn_amount2'

2개

'tbtn_amount3'

3개

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

-

() => void

-

김혜원

• 2025/06/19 : 사이즈 xlarge, rxlarge value 추가 및 footer prop 추가 - 곽은선

• 2023/01/27: scrollVisibleType prop default값 'hidden'에서 'visible'로 변경 - 안은수

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

• 2022/04/25 : 사이즈 값 및 prop 이름 확정 - 김혜원

• 2022/04/18 : 내용 수정 - 김혜원

• 2022/04/12 : 최초작성 - 김혜원