Web - DesktopBasicModalWithTab Panel (Added in 2.2)

Added in 2.2

모달이 지켜야 할 기본적인 생성 규칙, 요소를 설명합니다.

Definition

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

Principle

DesktopBasicModalWithTab은 어떠한 대주제 안에서 여러 개의 설정이 필요할 때 사용할 수 있는 모달입니다.
(패널을 넓게 쓰는, UI적인 요소로 사용한다는 느낌입니다.)

DesktopBasicModalWithTab은 2단으로 구성되어 있습니다.
좌측 영역은 Header와 Tab 성격의 SideTab이 있고, 우측 영역은 해당 Tab에서 설정할 수 있는 Body 영역이 있습니다.
하단 영역엔 Footer가 있습니다.

Body 영역 안에는 사용자에게 제공할 옵션들에 대해 컴포넌트를 조합하여 배치할 수 있습니다.

DesktopBasicModalWithTab이 가지고 있는 스펙과 형태는 미리 결정되어 있으므로, 각 기획자가 의도에 따라 이를 변형해서 사용할 수 없습니다.

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

구성

좌측 영역	Header	필수입니다.
좌측 영역	SideTab	필수입니다. 반드시 1개 이상 있어야 합니다. 길어질 경우, 스크롤이 되는 영역입니다.
우측 영역	Body	제목과 본문이 있습니다. 제목과 본문은 필수입니다. 제목을 따로 입력할 수도 있고, SideTab의 값만 있다면 해당 값을 그대로 가져오게 됩니다. 본문 영역은 컴포넌트와 패널의 조합으로 배치될 수 있는 영역입니다. 인풋 계열들은 즉시 적용이 되는 것들을 사용합니다. 길어질 경우, 스크롤이 되는 영역입니다.
하단 영역	Footer	필수입니다. Body 영역에서 설정한 값들을 적용 및 취소할 수 있습니다.

Spec

Size, Property

종류	구성	내용
모달 공통	width	전체 large width : 960px 전체 medium width : 688px 좌측 영역(1단) : 240px 우측 영역(2단) : 각 size별 width에서 좌측 영역을 제외한 너비 하단 영역은 전체 width에 맞춤
	height	min-height : 560px max-height : 720px height : 80vh
	base	radius : 24px
Header	text	TextLabel 참고 styleTheme : headingBold ellipsisMode : use lineLimit : 2
SideTab	base	width : responsive height : 가이드 이미지 참고
SideTab	text	TextLabel 참고 기본 styleTheme : subTitleRegular line-height : 1.3 선택 styleTheme : subTitleBold line-height : 1.3
Body	text	TextLabel 참고 타이틀 styleTheme : headingBold
Footer	DesktopBasicModal Panel의 Footer와 스펙 동일

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`
	좌측 정보 영역 배경	`ui_cpnt_modalwithtab_leftside_base`
Header	text	TextLabel 참고 colorTheme : sysTextPrimary
SideTab	base color	기본 : `ui_cpnt_modalwithtab_sidetab_default` hover : `ui_cpnt_modalwithtab_sidetab_hover` pressed : `ui_cpnt_modalwithtab_sidetab_pressed`
SideTab	text color	TextLabel 참고 기본 colorTheme : sysTextSecondary 선택 colorTheme : sysTextPrimary
Body	text	TextLabel 참고 타이틀 colorTheme : sysTextPrimary
Footer	DesktopBasicModal Panel의 Footer와 스펙 동일

Properties

size

크기를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'large'`

Enum Values Description
`'large'`	CODE `{ width: 960px; }`
`'medium'`	CODE `{ width: 688px; }`

modalTitleText*

모달의 제목을 표시할 텍스트 값입니다.

기획 지시사항

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

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

infoArray*

모달의 정보와 관련된 요소들을 표시하는 array 형태의 값입니다.

기획 지시사항

기획서 상 작성 방법 : type의 array 내부에 있는 항목들을 type에 맞춰 작성합니다.

Type	CODE `{ sideTabTitleText: PDSTextType; bodyTitleText?: PDSTextType; body: React.ReactNode; }[]`
Default	-

Array Values Description

sideTabTitleText*

좌측 영역의 SideTab에 표시 될 text 값입니다.

infoTitleText 값이 없다면 우측 영역 정보란의 제목으로도 함께 표시됩니다.

bodyTitleText

우측 영역 정보란의 제목을 sideTabTitleText과 다르게 표시하고 싶다면 사용할 수 있는 text 값입니다.

(사용하지 않는다면 sideTabTitleText 값이 좌측 영역의 SideTab과 우측 영역 정보란의 제목에 함께 표시 됩니다.)

body*

우측 영역 Body 부분에 표시될 내용입니다. 여러가지 컴포넌트를 조합하여 위치시킬 수 있습니다.

btnMode

버튼의 사용 갯수를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'btn_amount2'`

Enum Values Description
`'btn_amount1'`	가장 우측에서 첫번째 버튼 1개를 표시합니다.
`'btn_amount2'`	우측에서 2개의 버튼을 표시합니다.
`'btn_amount3'`	우측에 2개, 좌측 1개 총 3개의 버튼을 표시합니다.

btn1Text*

가장 우측에 사용되는 버튼 1의 텍스트 값입니다.

기획 지시사항

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

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

btn2Text

우측에서 두번째로 사용되는 버튼 2의 텍스트 값입니다.

기획 지시사항

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

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

btn3Text

가장 좌측에 사용되는 버튼 3의 텍스트 값입니다.

기획 지시사항

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

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

btn1State

가장 우측부터 사용되는 버튼 1 상태를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'normal'`

Enum Values Description
`'normal'`	기본 상태 입니다.
`'disabled'`	비활성화 상태입니다.

btn2State

가장 우측부터 사용되는 버튼 2 상태를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'normal'`

Enum Values Description
`'normal'`	기본 상태 입니다.
`'disabled'`	비활성화 상태입니다.

btn3State

가장 좌측 버튼 3상태를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'normal'`

Enum Values Description
`'normal'`	기본 상태 입니다.
`'disabled'`	비활성화 상태입니다.

btn1Type

가장 우측부터 사용되는 버튼 1의 type을 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'button'`

Enum Values Description
`'button'`	기본적인 버튼의 역할을 합니다.
`'submit'`	form data를 제출하는 버튼의 역할을 합니다. 사용 전 기획 확인 필요합니다.

btn2Type

가장 우측부터 사용되는 버튼 2의 type을 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'button'`

Enum Values Description
`'button'`	기본적인 버튼의 역할을 합니다.
`'submit'`	form data를 제출하는 버튼의 역할을 합니다. 사용 전 기획 확인 필요합니다.

btn3Type

가장 좌측 버튼의 type을 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'button'`

Enum Values Description
`'button'`	기본적인 버튼의 역할을 합니다.
`'submit'`	form data를 제출하는 버튼의 역할을 합니다. 사용 전 기획 확인 필요합니다.

onClickBtn1

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

기획 지시사항

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

Type	`(e: React.MouseEvent<HTMLButtonElement>) => void;`
Default	-

onClickBtn2

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

기획 지시사항

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

Type	`(e: React.MouseEvent<HTMLButtonElement>) => void;`
Default	-

onClickBtn3

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

기획 지시사항

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

Type	`(e: React.MouseEvent<HTMLButtonElement>) => void;`
Default	-

문서 작성 정보

소유자 / 관리자	김혜진, 안은수
변경 이력	2023/08/28 : prop 내용 추가 - 안은수 2023/08/22 : 문서 최초 작성 - 김혜진