Web - DesktopTutorialModal Panel (Added in 1.9)

Added in 1.9

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

Definition

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

Principle

DesktopTutorialModal은 어떠한 기능에 대해 사용자의 이해를 돕기 위해 단계별로 설명이 필요할 때 사용할 수 있는 모달입니다.

DesktopTutorialModal은 2단으로 구성되어 있습니다.
좌측 영역은 Header와 Step 성격의 SideTab이 있고, 우측 영역은 해당 단계를 설명하는 이미지와 문구 그리고 Footer가 있습니다.

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

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

구성

좌측 영역	Header	필수입니다.
좌측 영역	SideTab	필수입니다. 반드시 1개 이상 있어야 합니다. 길어질 경우, 스크롤이 되는 영역입니다.
우측 영역	이미지	기획상 필수입니다. (이미지를 넣지 않을 경우 회색 영역으로 표현됩니다.) 16:9 비율의 이미지가 들어갑니다.
	정보	제목과 본문이 있습니다. 제목은 필수입니다. (제목을 따로 입력할 수도 있고, SideTab의 값만 있다면 해당 값을 그대로 가져오게 됩니다.) 길어질 경우, 스크롤이 되는 영역입니다.
	Footer	선택입니다. 추가적인 정보를 보여주고 싶을 때 해당 페이지로 이동할 수 있습니다.

Spec

Size, Property

종류	구성	내용
모달 공통	width	전체 large : width : 960px 좌측 영역(1단) : 240px 우측 영역(2단) : responsive
	height	rlarge min-height : 560px max-height : 720px height : 80vh
	base	radius : 24px
	다음 버튼	Added in 2.2 Web - IconButton 참고 iconName : ic_arrow_right iconSize : 24 baseSize : medium shapeType : circular *단계별 설명을 반드시 보여주고자 할 때 sequenceMode : use 사용
	닫기 버튼	Web - IconButton 참고 iconName : ic_xmark iconSize : 24 baseSize : medium shapeType : circular
Header	text	Web - TextLabel 참고 styleTheme : headingBold ellipsisMode : use lineLimit : 2
SideTab	base	width : responsive height : 가이드 이미지 참고
SideTab	text	Web - TextLabel 참고 기본 styleTheme : subTitleRegular line-height : 1.3 선택 styleTheme : subTitleBold line-height : 1.3
Image	-	Web - ImageView 참고 width : responsive ratio : 16_9 scaleType : cover shapeType : rectangle backgroundFillMode : use
정보	text	Web - TextLabel 참고 타이틀 styleTheme : headingBold 본문 styleTheme : body2Regular
Footer	base	height : 88px
Footer	MainButton	Web - MainButton 참고 size : medium

Web - MobileHeaderBar

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`
	다음 버튼	Added in 2.2 iconColorKey : `ui_cpnt_button_icon_white` baseColorKey : `ui_cpnt_button_fill_base_tutorialmodal`
	닫기 버튼	Web - IconButton 참고 iconColorKey : `ui_cpnt_button_icon_white` baseColorKey : `ui_cpnt_button_fill_base_tutorialmodal`
	우측 정보 영역 배경	`ui_cpnt_tutorialmodal_info_base`
Header	text	Web - TextLabel 참고 colorTheme : sysTextPrimary
SideTab	base color	기본 : `ui_cpnt_tutorialmodal_sidetab_default` hover : `ui_cpnt_tutorialmodal_sidetab_hover` pressed : `ui_cpnt_tutorialmodal_sidetab_pressed`
SideTab	text color	Web - TextLabel 참고 기본 colorTheme : sysTextSecondary 선택 colorTheme : sysTextPrimary
Image	-	Web - ImageView 참고
정보	text	Web - TextLabel 참고 타이틀 colorTheme : sysTextPrimary 본문 colorTheme : sysTextPrimary
Footer	MainButton	Web - MainButton 참고

Properties

modalTitleText*

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

기획 지시사항

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

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

infoArray*

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

기획 지시사항

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

Type

CODE

{
  sideTabTitleText: PDSTextType;
  infoTitleText?: PDSTextType;
  infoDescText?: PDSTextType;
  imageSrc?: string;
  btnMode?: 'none' | 'btn_amount1';
  btn1Text?: PDSTextType;
  onClickBtn1?: (e: React.MouseEvent<HTMLButtonElement>) => void;
}[]

Default

-

Array Values Description
sideTabTitleText*	좌측 영역의 SideTab에 표시 될 text 값입니다. infoTitleText 값이 없다면 우측 영역 정보란의 제목으로도 함께 표시됩니다.
infoTitleText	우측 영역 정보란의 제목을 sideTabTitleText과 다르게 표시하고 싶다면 사용할 수 있는 text 값입니다. (사용하지 않는다면 sideTabTitleText 값이 좌측 영역의 SideTab과 우측 영역 정보란의 제목에 함께 표시 됩니다.)
infoDescText	우측 영역 정보란의 본문에 표시 될 text 값입니다.
imageSrc	우측 영역 정보란의 상단 이미지를 표시하는 src 값입니다.
btnMode	우측 영역 Footer 부분 버튼 표시에 대한 값입니다. `'none'`: 버튼을 표시하지 않습니다. `'btn_amount1'`: 1개의 버튼을 표시합니다.
btn1Text	우측 영역 Footer 부분 버튼에 표시 될 text 값입니다. (btnMode가 `'none'`인 경우에는 무시됩니다.)
onClickBtn1	우측 영역 Footer 부분 버튼을 눌렀을 경우에 실행할 액션 값입니다. (btnMode가 `'none'`인 경우에는 무시됩니다.)

sequenceMode

Added in 2.2

우측 상단 버튼으로 어떤 버튼이 올지 결정할 수 있습니다.

기획 지시사항

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

Type	`enum`
Default	`'use'`

Enum Values Description
`'use'`	우측 상단 버튼이 시퀀스처럼 다음(>) 버튼이었다 마지막 스텝일 때 닫기(X)가 되는 모드
`'none'`	우측 상단 버튼이 항상 닫기(X)인 모드

onClose*

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

기획 지시사항

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

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

문서 작성 정보

소유자 / 관리자	김혜진, 안은수
변경 이력	2024/03/12 : sequenceMode일 때 우측 아이콘 버튼 관련 이미지/스펙 추가 - 김혜진 2024/03/12 : sequenceMode prop 추가 -안은수 2023/02/16 : Properties 정리 -안은수 2023/02/15 : spec 정리 - 김혜진 2023/02/09 : 문서 최초 작성 - 김혜진