[진행중] Web - DesktopBasicModalWithTab Panel (Added in 2.2)

Added in 2.2

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

Definition

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

Principle

DesktopBasicModalWithTab은 어떠한 대주제 안에서 여러 개의 설정이 필요할 때 사용할 수 있는 모달입니다.

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단) : responsive 하단 영역은 전체 width에 맞춤
	height	min-height : 560px max-height : 720px height : 80vh
	base	radius : 24px
Header	text	Web - TextLabel 참고 styleTheme : headingBold ellipsisMode : use lineLimit : 2
SideTab	base	width : responsive height : 가이드 이미지 참고
SideTab	text	Web - TextLabel 참고 기본 styleTheme : subTitleBold line-height : 1.3 선택 styleTheme : subTitleRegular line-height : 1.3
Body	text	Web - TextLabel 참고 타이틀 styleTheme : headingBold
Footer	Web - DesktopBasicModal Panel 의 Footer와 스펙 동일

https://shuffle.dev/tailwind

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	Web - 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	Web - TextLabel 참고 기본 colorTheme : sysTextSecondary 선택 colorTheme : sysTextPrimary
Body	text	Web - TextLabel 참고 colorTheme : sysTextPrimary
Footer	Web - 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;
  btnMode?: 'btn_amount1' | 'btn_amount2' | 'btn_amount3';
  btn1Text?: PDSTextType;
  btn2Text?: PDSTextType; 
  btn3Text?: PDSTextType; 
  onClickBtn1?: (e: React.MouseEvent<HTMLButtonElement>) => void;
  onClickBtn2?: (e: React.MouseEvent<HTMLButtonElement>) => void;
  onClickBtn3?: (e: React.MouseEvent<HTMLButtonElement>) => void;
}[]

Default

-

Array Values Description
sideTabTitleText*	좌측 영역의 SideTab에 표시 될 text 값입니다. infoTitleText 값이 없다면 우측 영역 정보란의 제목으로도 함께 표시됩니다.
bodyTitleText	우측 영역 정보란의 제목을 sideTabTitleText과 다르게 표시하고 싶다면 사용할 수 있는 text 값입니다. (사용하지 않는다면 sideTabTitleText 값이 좌측 영역의 SideTab과 우측 영역 정보란의 제목에 함께 표시 됩니다.)
btnMode	우측 영역 Footer 부분 버튼 표시에 대한 값입니다. `'btn_amount1'`: 1개의 버튼을 표시합니다. `'btn_amount2'`: 2개의 버튼을 표시합니다. `'btn_amount3'`: 3개의 버튼을 표시합니다.
btn1Text	Footer 부분에서 가장 우측 버튼에 표시 될 text 값입니다.
btn2Text	Footer 부분에서 우측에서 두번째 버튼에 표시 될 text 값입니다. (btnMode가 `'btn_amount1'`인 경우에는 무시됩니다.)
btn3Text	Footer 부분에서 가장 좌측 버튼에 표시 될 text 값입니다. (btnMode가 `'btn_amount2'`인 경우에는 무시됩니다.)
onClickBtn1	우측 영역 Footer 부분 버튼을 눌렀을 경우에 실행할 액션 값입니다.
onClickBtn2	우측 영역 Footer 부분 버튼을 눌렀을 경우에 실행할 액션 값입니다. (btnMode가 `'btn_amount1'`인 경우에는 무시됩니다.)
onClickBtn3	우측 영역 Footer 부분 버튼을 눌렀을 경우에 실행할 액션 값입니다. (btnMode가 `'btn_amount2'`인 경우에는 무시됩니다.)

onClose*

모달 내부 우측 상단에 위치한 X 버튼을 눌렀을 경우에 실행할 액션을 부여합니다.

기획 지시사항

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

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

문서 작성 정보

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