Modal

모달은 사용자에게 중요한 정보를 전달하거나 확인을 요청할 때 사용하는 다이얼로그입니다. 화면 위에 떠 있는 카드 형태로 표시되어 사용자의 주의를 집중시킵니다.

Figma 컴포넌트: Modal

Horizontal

아이콘이 텍스트 옆에 배치되어 있는 가로 레이아웃입니다. 가장 일반적으로 사용됩니다.

블로그 게시물이 게시되었습니다

이 블로그 게시물이 게시되었습니다. 팀원들은 이 게시물을 편집하고 변경 사항을 다시 게시할 수 있습니다.

다시 보지 않기

저장되지 않은 변경 사항이나 주의가 필요한 작업에 사용합니다.

저장되지 않은 변경 사항

변경 사항을 저장하시겠습니까, 아니면 취소하시겠습니까?

다시 보지 않기

삭제와 같이 되돌릴 수 없는 파괴적인 액션을 확인할 때 사용합니다.

블로그 게시물 삭제

정말로 이 게시물을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.

다시 보지 않기

아이콘이 텍스트 위에 배치되는 세로 정렬 레이아웃입니다. 폭이 좁은 모달에 적합합니다.

블로그 게시물이 게시되었습니다

팀원들은 이 게시물을 편집하고 변경 사항을 다시 게시할 수 있습니다.

저장되지 않은 변경 사항

변경 사항을 저장하시겠습니까, 아니면 취소하시겠습니까?

블로그 게시물 삭제

정말로 이 게시물을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.

아이콘과 텍스트가 모두 중앙 정렬된 레이아웃입니다. 강조가 필요한 상황에 사용합니다.

요청이 완료되었습니다

요청하신 작업이 정상적으로 완료되었습니다.

배경 오버레이와 backdrop blur가 적용된 풀 모달 형태입니다. 실제 모달이 띄워졌을 때의 모습입니다.

블로그 게시물이 게시되었습니다

팀원들은 이 게시물을 편집하고 변경 사항을 다시 게시할 수 있습니다.

세로로 쌓인 액션 버튼 레이아웃입니다. 모바일이나 좁은 모달에서 사용합니다.

요금제를 업그레이드 하시겠습니까?

더 많은 기능과 사용량을 이용할 수 있습니다.

Prop	Type	Default	Description
`type`	'horizontal' \| 'stacked' \| 'centered'	`'horizontal'`	아이콘과 텍스트의 정렬 방식
`variant`	'default' \| 'warning' \| 'destructive'	`'default'`	모달 종류 (Featured icon 색상 및 confirm 버튼 컬러)
`icon`	ReactNode	`variant별 기본 아이콘`	Featured icon에 사용할 SVG 노드
`title`	string	`'모달 제목'`	제목 텍스트
`description`	string	`-`	설명 텍스트
`showClose`	boolean	`true`	우상단 닫기(X) 버튼 표시 여부
`showCheckbox`	boolean	`false`	액션 영역 좌측 체크박스 표시 여부
`checkboxLabel`	string	`'다시 보지 않기'`	체크박스 옆 레이블 텍스트
`checkboxChecked`	boolean	`false`	체크박스 선택 상태
`cancelText`	string	`'취소'`	취소 버튼 텍스트
`confirmText`	string	`'확인'`	확인 버튼 텍스트
`actions`	'horizontal' \| 'vertical'	`'horizontal'`	액션 버튼 정렬 방향
`showOverlay`	boolean	`false`	배경 오버레이/blur 표시 여부 (실제 모달 표현)
`onClose`	() => void	`-`	닫기 버튼 클릭 핸들러
`onCancel`	() => void	`-`	취소 버튼 클릭 핸들러
`onConfirm`	() => void	`-`	확인 버튼 클릭 핸들러

Property	Values
Type	`Horizontal` `Warning horizontal` `Destructive horizontal` `Stacked left aligned` `Warning stacked left aligned` `Destructive stacked left aligned` `Centered ...`
Breakpoint	`Desktop` `Mobile`