Dialog

사용자에게 중요한 정보를 전달하거나 간단한 작업을 요청할 때 사용하는 모달 컴포넌트입니다. useOverlay 훅과 함께 사용합니다.

Preview

기본 (dim 클릭 시 wiggle)

dim 클릭으로 닫기

알림 다이얼로그 (버튼 1개)

확인 다이얼로그 (negative 버튼)

TextButton 사용

TextButton만 사용 (우측 정렬)

description 없음

Usage

설치

Terminal

$ pnpm add @b1nd/dodam-design-system

기본 사용법

Dialog를 사용하기 위해서는 먼저 어플리케이션 최상단에 OverlayProvider를 추가해야 합니다.

tsx

// app/layout.tsx
import { OverlayProvider } from "@b1nd/dodam-design-system/components";
import { PropsWithChildren } from "react";

export default function RootLayout({ children }: PropsWithChildren) {
  return (
    <html lang="ko">
      <body>
        <OverlayProvider>
          {children}
        </OverlayProvider>
      </body>
    </html>
  );
}

OverlayProvider가 추가되었다면, useOverlay 훅을 사용하여 Dialog를 열 수 있습니다.

tsx

"use client";

import { useOverlay, Dialog } from "@b1nd/dodam-design-system/components";

const Example = () => {
  const overlay = useOverlay();

  const openDialog = () => {
    overlay.open(({ isOpen, close, exit }) => (
      <Dialog
        open={isOpen}
        title="다이얼로그 제목"
        description="다이얼로그 설명입니다."
        onClose={close}
        onExited={exit}
      >
        <Dialog.FilledButton role="assistive" onClick={close}>
          취소
        </Dialog.FilledButton>
        <Dialog.FilledButton onClick={close}>
          확인
        </Dialog.FilledButton>
      </Dialog>
    ));
  };

  return <button onClick={openDialog}>다이얼로그 열기</button>;
};

export default Example;

Dialog Props

Prop	Type	Default	Description
`open`	`boolean`	`-`	다이얼로그 표시 여부
`title`	`string`	`-`	다이얼로그 제목
`description`	`string`	`-`	다이얼로그 설명 (선택)
`closeOnDimmerClick`	`boolean`	`false`	딤 클릭 시 닫기 여부
`onClose`	`() => void`	`-`	닫기 애니메이션 시작 콜백
`onExited`	`() => void`	`-`	닫기 애니메이션 완료 콜백
`children`	`ReactNode`	`-`	버튼 영역에 렌더링할 컨텐츠

Compound Components

Dialog는 버튼을 위한 서브 컴포넌트를 제공합니다.

Component	Description
`Dialog.FilledButton`	FilledButton을 Dialog에 맞게 래핑한 컴포넌트 (display="fill" 기본 적용)
`Dialog.TextButton`	TextButton을 Dialog에 맞게 래핑한 컴포넌트

useOverlay API

useOverlay 훅은 다음 함수들을 반환합니다.

API	Description
`open(element)`	오버레이를 엽니다. element는 `isOpen`, `close`, `exit` props를 받는 함수입니다.
`close()`	현재 오버레이를 닫습니다.