Web - DesktopAlertDialog (Added in 1.3)

Added in 1.3

Definition

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

Principle

이용자가 선택한 액션에 대한 확실한 안내 또는 피드백이 필요할 때 사용합니다. 크게 성공, 경고, 오류, 정보 네 가지 종류가 있습니다.

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

우측 상단에 닫기 버튼은 따로 존재하지 않고, Footer 영역에 닫기 역할을 하는 액션 버튼이 존재합니다. 또한 외부를 누르더라도 꺼지지 않습니다.

액션 버튼은 TextButton을 사용합니다.

구성

아이콘	옵션이며, 1개까지 넣을 수 있습니다. 크게 성공, 경고, 오류 3가지 타입으로 분류하여 사용할 수 있습니다.
제목	옵션입니다. 제목의 글자 수는 최대 50자까지 가능합니다.
본문	필수입니다. 본문의 글자 수는 최대 200자까지 가능합니다.
버튼 1, 2, 3 (Footer)	버튼 1개는 반드시 들어가야합니다. 버튼의 순서는 가장 우측부터 좌측으로 갑니다. 버튼의 글자 수는 최대 12자까지 가능합니다. 버튼 3개를 사용할 경우, 버튼 모두에 12자까지 적용되는 것은 아닙니다. 1개의 버튼에 12자를 적용할 경우 나머지 2개의 버튼은 글자 수 조정이 필요합니다. (적절한 배분 필요, 아래 예시 이미지 참고) enter키 입력시 가장 우측 버튼이 가진 이벤트가 발생합니다.

얼럿 다이얼로그 종류

기본

필수 요소인 본문과 버튼이 조합된 형태의 얼럿 다이얼로그 입니다.
이용자가 선택한 액션에 대한 간단한 안내 사항을 전달할 때 기본 형태를 사용합니다. (가장 중요도가 낮습니다.)

제목 옵션

기본 얼럿 다이얼로그에서 타이틀이 추가된 형태입니다.
어떠한 내용의 얼럿 다이얼로그인지 명확히 보여줄 수 있습니다.

아이콘 옵션

기본 얼럿 다이얼로그에서 아이콘이 추가된 형태입니다.
이용자에게 성공, 경고, 오류 내용이라는 것을 아이콘으로 빠르게 인지 시킬 수 있습니다.

아이콘 및 제목 옵션

모든 옵션을 다 넣은 형태의 얼럿 다이얼로그입니다.
이용자에게 아이콘과 제목으로 어떤 내용인지 빠르게 인지 시킬 수 있습니다.
이용자에게 전달할 안내 사항이나 피드백이 매우 중요할 때 해당 형태를 사용합니다.

Spec

Guide

Size, Property

(color와 관련한 사항은 하단에 기술)

구성	내용
width	min-width: 480px max width: 560px
icon	size : 72 (성공, 경고, 오류, 정보 4가지 타입) fillType : line iconName 성공 : ic_success 오류 : ic_error 주의 : ic_warning 정보 : ic_information
text	TextLabel 참고 titleText styleTheme : leadParaBold contentText styleTheme : body1Regular
tBtn	TextButton 참고 size : large
base	radius : 24px

Color 구성

Color Key

구성	내용
icon color	시스템 컬러를 적용합니다. 성공, 오류, 경고, 정보에 따라 정해진 시스템 컬러를 사용합니다. 성공 : `ui_cpnt_alertdialog_icon_success` 오류 : `ui_cpnt_alertdialog_icon_error` 주의 : `ui_cpnt_alertdialog_icon_warning` 정보 : `ui_cpnt_alertdialog_icon_information`
Text	TextLabel titleText colorTheme : sysTextPrimary contentText colorTheme : sysTextPrimary
TextButton	TextButton btn1 colorTheme : none btn2 colorTheme : grey_01 btn3 colorTheme : grey_01
base color	`ui_cpnt_alertdialog_base`
border color	`ui_cpnt_alertdialog_border`
shadow	Toast Layer에 소속, elevation-5를 적용합니다.
dimmed	얼럿 다이얼로그 바깥 dim 처리 된 영역 `ui_cpnt_alertdialog_dimmed`

Properties

iconMode

Added in 1.3

채팅 전역의 스타일을 교체할 수 있는 테마를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'none'`

Enum Values Description		Visual Ref
`'none'`	없음	-
`'success'`	성공
`'error'`	오류
`'warning'`	주의
`'information'`	정보

titleText

Added in 1.3

제목의 글자 수는 최대 50자까지 가능합니다.

기획 지시사항

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

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

contentText*

Added in 1.3

본문의 글자 수는 최대 200자까지 가능합니다.

기획 지시사항

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

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

btnMode

Added in 1.3

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

기획 지시사항

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

Type	`enum`
Default	`'tbtn_amount1'`

Enum Values Description
`'tbtn_amount1'`	1개
`'tbtn_amount2'`	2개
`'tbtn_amount3'`	3개

tBtn1Text

Added in 1.3

가장 우측에서 1번째

버튼의 글자 수는 최대 12자까지 가능합니다.
- 버튼 3개를 사용할 경우, 버튼 모두에 12자까지 적용되는 것은 아닙니다. 1개의 버튼에 12자를 적용할 경우 나머지 2개의 버튼은 글자 수 조정이 필요합니다.

기획 지시사항

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

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

tBtn2Text

Added in 1.3

가장 우측부터 사용되는 버튼 2

기획 지시사항

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

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

tBtn3Text

Added in 1.3

가장 우측부터 사용되는 버튼 3

기획 지시사항

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

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

tBtn1State

Added in 1.4

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

기획 지시사항

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

Type	`enum`
Default	`'normal'`

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

tBtn2State

Added in 1.4

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

기획 지시사항

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

Type	`enum`
Default	`'normal'`

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

tBtn3State

Added in 1.4

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

기획 지시사항

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

Type	`enum`
Default	`'normal'`

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

tBtn1Type

Added in 1.4

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

기획 지시사항

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

Type	`enum`
Default	`'button'`

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

tBtn2Type

Added in 1.4

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

기획 지시사항

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

Type	`enum`
Default	`'button'`

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

tBtn3Type

Added in 1.4

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

기획 지시사항

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

Type	`enum`
Default	`'button'`

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

onClickTBtn1

Added in 1.4

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

기획 지시사항

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

Type	`() => any`
Default	-

onClickTBtn2

Added in 1.4

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

기획 지시사항

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

Type	`() => any`
Default	-

onClickTBtn3

Added in 1.4

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

기획 지시사항

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

Type	`() => any`
Default	-

문서 작성 정보

소유자 / 관리자

김혜진, 박윤규

변경 이력

2024/03/12 : enter키 입력시 onClickTBtn1 이벤트 발생한다는 설명 추가 - 안은수
2022/06/30 : btnMode에서 ibtn으로 잘못 기입한 부분을 tbtn으로 수정 - 김혜진
2022/06/29 : contentText 필수 표시 추가 - 안은수
2022/06/08 : TextButton의 color spec 변경 반영 (btn2와 btn3의 colorTheme grey_01로 변경) - 안은수
2022/06/08 : tBtn1State, tBtn2State, tBtn3State, tBtn1Type, tBtn2Type, tBtn3Type prop 추가 - 안은수
2022/05/24 : 코드에만 있던 prop추가(onClick관련) - 안은수
2022/04/19 : Property 기술방법 변경 - 김혜지
2022/04/11 : 최초작성(기존 패턴을 컴포넌트화 하면서 복제) - 김혜진