Alert Dialog

모션

Dialog와 같은 확대 모션을 사용합니다. 등장은 300ms, 퇴장은 200ms입니다. 움직임 감소 설정에서는 전환을 생략합니다. 공통 모션 규칙을 따릅니다.

설치

pnpm dlx ply-ui add alert-dialog button

공통 설치 설정을 먼저 적용합니다.

사용법

확인과 취소 버튼을 따로 두고 결과를 설명하는 제목과 본문을 제공합니다.

예제의 삭제는 로컬 상태 변경입니다. 실제 삭제 API는 확인 동작에 연결합니다.

구성

구성 요소	역할
`Root`	확인창의 열림 상태를 관리합니다.
`Trigger`	확인창을 여는 버튼입니다.
`Portal / Backdrop`	확인창을 별도 영역에 렌더하고 배경을 덮습니다.
`Popup`	확인할 작업과 선택 버튼을 담습니다.
`Title`	확인이 필요한 작업을 설명하는 제목입니다.
`Description`	작업 결과나 영향을 설명합니다.
`Close`	취소 또는 확인 후 창을 닫습니다. 확인 동작 자체는 콜백으로 연결합니다.

구현 코드

components/ui/alert-dialog.tsx

alert-dialog.tsx

"use client";

import type { ComponentProps } from "react";
import { AlertDialog as Primitive } from "@base-ui/react/alert-dialog";
import { withClassName } from "../../lib/cx";
import "./alert-dialog.css";

// 동작과 접근성은 Base UI가 담당합니다. 이 파일은 스타일 연결만 담당합니다.
function AlertDialogBackdrop({
  className,
  ...props
}: ComponentProps<typeof Primitive.Backdrop>) {
  return (
    <Primitive.Backdrop
      {...props}
      className={withClassName("rbx-backdrop", className)}
    />
  );
}

function AlertDialogPopup({
  className,
  ...props
}: ComponentProps<typeof Primitive.Popup>) {
  return (
    <Primitive.Popup
      {...props}
      className={withClassName("rbx-dialog", className)}
    />
  );
}

function AlertDialogTitle({
  className,
  ...props
}: ComponentProps<typeof Primitive.Title>) {
  return (
    <Primitive.Title
      {...props}
      className={withClassName("rbx-dialog-title", className)}
    />
  );
}

function AlertDialogDescription({
  className,
  ...props
}: ComponentProps<typeof Primitive.Description>) {
  return (
    <Primitive.Description
      {...props}
      className={withClassName("rbx-description", className)}
    />
  );
}

function AlertDialogTrigger({
  className,
  ...props
}: ComponentProps<typeof Primitive.Trigger>) {
  return (
    <Primitive.Trigger
      {...props}
      className={withClassName("rbx-button", className)}
    />
  );
}

function AlertDialogClose({
  className,
  ...props
}: ComponentProps<typeof Primitive.Close>) {
  return (
    <Primitive.Close
      {...props}
      className={withClassName("rbx-button", className)}
    />
  );
}

// Root/Portal 등 스타일 없는 파트와 제네릭 API는 원본을 그대로 보존합니다.
export const AlertDialog = {
  ...Primitive,
  Backdrop: AlertDialogBackdrop,
  Popup: AlertDialogPopup,
  Title: AlertDialogTitle,
  Description: AlertDialogDescription,
  Trigger: AlertDialogTrigger,
  Close: AlertDialogClose,
};

components/ui/alert-dialog.css

alert-dialog.css

@import "./button.css";
/* AlertDialog: 공통 구조는 theme.css, 컴포넌트 전용 조정은 아래에 작성합니다. */

모션

설치

사용법

구성

구현 코드

목차