Dialog

모달 다이얼로그 및 확인 다이얼로그 컴포넌트입니다.

설치

Terminal

npx @msub-core/ui-cli add dialog

사용법

TSX

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
  DialogClose,
  ConfirmDialog,
} from "@msub-core/ui/components/dialog"

function MyComponent() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>열기</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>제목</DialogTitle>
          <DialogDescription>설명</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose asChild>
            <Button>확인</Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

DialogContent Props

Prop	Type	Default	Required	Description
showClose	boolean	false	No	우측 상단 닫기 버튼 표시 여부
onOpenAutoFocus	(event: Event) => void	-	No	열릴 때 포커스 이벤트
onCloseAutoFocus	(event: Event) => void	-	No	닫힐 때 포커스 이벤트
onEscapeKeyDown	(event: KeyboardEvent) => void	-	No	ESC 키 누를 때 이벤트
onInteractOutside	(event: Event) => void	-	No	외부 클릭 시 이벤트

기본 Dialog

ConfirmDialog

ConfirmDialog Props

Prop	Type	Default	Required	Description
open	boolean	-	No	다이얼로그 열림 상태
onOpenChange	(open: boolean) => void	-	No	열림 상태 변경 핸들러
title	string	-	No	다이얼로그 제목
description	string	-	No	다이얼로그 설명
confirmText	string	"확인"	No	확인 버튼 텍스트
cancelText	string	"취소"	No	취소 버튼 텍스트
onConfirm	() => void	-	No	확인 버튼 클릭 핸들러
confirmButtonVariant	"default" \| "destructive"	-	No	확인 버튼 스타일
loading	boolean	-	No	확인 버튼 로딩 상태

삭제 확인

로그아웃 확인

로딩 상태

성공 다이얼로그

애니메이션 성공 다이얼로그

체크마크 애니메이션과 펄스 링 효과가 포함된 성공 다이얼로그입니다.