Skip to Content
컴포넌트Dialog

Dialog

모달 대화상자 컴포넌트입니다. 네이티브 <dialog> 기반으로 Esc 키와 백드롭 클릭으로 닫을 수 있습니다.

Import

import {
  Dialog, DialogTrigger, DialogContent, DialogClose,
  DialogHeader, DialogTitle, DialogDescription, DialogFooter,
} from '@choblue/ui/dialog'

기본 사용

<Dialog>
  <DialogTrigger asChild>
    <Button>다이얼로그 열기</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>다이얼로그 제목</DialogTitle>
      <DialogDescription>다이얼로그 설명입니다.</DialogDescription>
    </DialogHeader>
    <div className="p-6 pt-0">
      <p>다이얼로그 본문 내용입니다.</p>
    </div>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">취소</Button>
      </DialogClose>
      <DialogClose asChild>
        <Button>확인</Button>
      </DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

서브 컴포넌트

컴포넌트엘리먼트설명
DialogProvider상태 관리 컨테이너
DialogTrigger<button>다이얼로그를 여는 버튼 (asChild 지원)
DialogContent<dialog>네이티브 모달 본문
DialogClose<button>다이얼로그를 닫는 버튼 (asChild 지원)
DialogHeader<div>헤더 레이아웃
DialogTitle<h2>제목
DialogDescription<p>설명 텍스트
DialogFooter<div>하단 액션 레이아웃

Dialog Props

Prop타입기본값설명
openboolean-제어 모드 열림 상태
onOpenChange(open: boolean) => void-상태 변경 핸들러

DialogTrigger / DialogClose Props

Prop타입기본값설명
asChildbooleanfalse자식 요소에 props를 위임 (Slot 패턴)

useConfirm (Imperative API)

onClick 핸들러에서 Promise 기반으로 확인 다이얼로그를 호출할 수 있습니다.

Import

import { ConfirmProvider, useConfirm } from '@choblue/ui/dialog'

기본 사용

앱 루트에 ConfirmProvider를 배치한 뒤, useConfirm 훅으로 confirm 함수를 가져옵니다.

const confirm = useConfirm();
 
const handleClick = async () => {
  const ok = await confirm({
    title: "계속하시겠습니까?",
    description: "이 작업은 되돌릴 수 없습니다.",
  });
  if (ok) { /* confirmed */ }
};

Danger variant

variant: "danger"를 전달하면 확인 버튼이 danger 스타일로 렌더링됩니다.

const ok = await confirm({
  title: "상품 삭제",
  description: "이 상품이 영구적으로 삭제됩니다.",
  confirmText: "삭제",
  cancelText: "유지",
  variant: "danger",
});

ConfirmOptions

Prop타입기본값설명
titlestring(필수)다이얼로그 제목
descriptionstring-부가 설명
confirmTextstring"확인"확인 버튼 텍스트
cancelTextstring"취소"취소 버튼 텍스트
variant"default" | "danger""default"확인 버튼 스타일
render(props: ConfirmRenderProps) => ReactNode-커스텀 콘텐츠 렌더 함수

커스텀 콘텐츠 (render)

render 함수를 전달하면 다이얼로그 내용을 자유롭게 구성할 수 있습니다.

const ok = await confirm({
  render: ({ confirm, cancel }) => (
    <>
      <DialogHeader>
        <DialogTitle>상품 삭제</DialogTitle>
        <DialogDescription>
          이 상품이 영구적으로 삭제됩니다.
        </DialogDescription>
      </DialogHeader>
      <div className="p-6 pt-0">
        <ProductCard />
      </div>
      <DialogFooter>
        <Button variant="outline" onClick={cancel}>취소</Button>
        <Button variant="danger" onClick={confirm}>삭제</Button>
      </DialogFooter>
    </>
  ),
});

render가 전달되면 title, description, confirmText, cancelText, variant는 무시됩니다.

ConfirmRenderProps

Prop타입설명
confirm() => void확인 처리 (Promise를 true로 resolve)
cancel() => void취소 처리 (Promise를 false로 resolve)
Last updated on
SelectToast