Web - MobileAlertDialog (Added in 1.3)

Added in 1.3

Definition

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

Principle

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

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

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

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

모바일용 AlertDialog는 width가 좁기 때문에 버튼의 정렬을 설정할 수 있습니다.

구성

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

얼럿 다이얼로그 종류

기본

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

제목 옵션

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

아이콘 옵션

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

아이콘 및 제목 옵션

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

Spec

Guide

Size, Property

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

구성	내용
width	288px
icon	size : 72(성공, 경고, 오류, 정보 4가지 타입) fillType : line iconName 성공 : ic_success 오류 : ic_error 주의 : ic_warning 정보 : ic_information
text	Web - TextLabel 참고 titleText styleTheme : leadParaBold contentText styleTheme : body2Regular
tBtn	Web - 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의 Color Key 참고
base color	`ui_cpnt_alertdialog_base`
border color	`ui_cpnt_alertdialog_border`
shadow	Toast Layer에 소속, elevation-5를 적용합니다.

Properties

iconMode

Added in 1.3

icon 표시 존재 여부

기획 지시사항

기획서 상 작성 방법 : 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	-

btnStack

Added in 1.3

버튼을 나란히 배치할 것인지 층으로 배치할 것인지 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'side'`

Enum Values Description

Visual Ref

'side'

'stack'

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번째 (stack일 땐 가장 상단) 버튼의 텍스트 값입니다.

버튼의 글자 수는 최대 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

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

기획 지시사항

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

Type	`() => any`
Default	-

onClickTBtn2

Added in 1.4

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

기획 지시사항

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

Type	`() => any`
Default	-

onClickTBtn3

Added in 1.4

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

기획 지시사항

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

Type	`() => any`
Default	-

문서 작성 정보

소유자 / 관리자

김혜진, 박윤규

변경 이력

2022/07/22 : btnMode에서 ibtn을 tbtn으로 수정 - 김혜진
2022/06/29 : contentText 필수 표시 추가 - 안은수
2022/06/08 : TextButton의 color spec 변경 (btn2와 btn3의 colorTheme grey_01로 변경), border-radius 16px에서 24px로 수정 - 안은수
2022/06/08 : tBtn1State, tBtn2State, tBtn3State, tBtn1Type, tBtn2Type, tBtn3Type prop 추가 - 안은수
2022/05/25 : 코드에만 있던 prop추가 - 안은수
2022/04/19 : Property 기술방법 변경 - 김혜지
2022/04/11 : 최초작성(기존 패턴을 컴포넌트화 하면서 복제) - 김혜진