AlertModal

Description

AlertModal은 루트 레이아웃에 한 번 선언하고, 어디서든 showAlert() 함수를 호출하여 사용할 수 있는 알림 모달 컴포넌트입니다. 단순한 알림 메시지를 표시할 때 사용하며, 확인 버튼 하나만 제공합니다.

"use client";

import { AlertModal, showAlert } from "@/registry/ui/alert-modal";
import { Button } from "@/shared/ui/button";

export const AlertModalDemo = () => {
  const handleOpenAlert = () => {
    showAlert({
      title: "알림",
      content: "알림 내용입니다.",
      label: "확인",
    });
  };

  return (
    <>
      <Button onClick={handleOpenAlert}>알림 열기</Button>
      <AlertModal />
    </>
  );
};

Installation

pnpx shadcn add @allra/alert-modal

Usage

1. 루트 레이아웃에 전역 선언

먼저 루트 레이아웃(예: app/layout.tsx)에 AlertModal 컴포넌트를 한 번 선언합니다.

import { AlertModal } from "@/registry/ui/alert-modal";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        {children}
        <AlertModal />
      </body>
    </html>
  );
}

2. 사용처에서 함수 호출

어디서든 showAlert() 함수를 호출하여 알림 모달을 열 수 있습니다.

import { showAlert } from "@/registry/ui/alert-modal";
import { Button } from "@/shared/ui/button";

export default function MyComponent() {
  return (
    <Button
      onClick={() =>
        showAlert({
          title: "알림",
          content: "작업이 완료되었습니다.",
          label: "확인",
        })
      }
    >
      알림 표시
    </Button>
  );
}

Props

Prop	Type	Default	Description
`title`	`ReactNode`	`undefined`	알림 모달 제목
`content`	`ReactNode`	`undefined`	알림 모달 본문 내용
`label`	`string`	`"확인"`	확인 버튼 텍스트
`onClose`	`() => void`	`undefined`	모달 닫기 시 실행되는 콜백 함수

Examples

다양한 Props 예시

기본 사용

기본적인 알림 모달 사용 예시입니다.

showAlert({
  title: "알림",
  content: "작업이 완료되었습니다.",
  label: "확인",
});

제목만 표시

제목만 있는 간단한 알림 모달입니다.

showAlert({
  title: "성공",
  label: "확인",
});

내용만 표시

내용만 있는 알림 모달입니다.

showAlert({
  content: "데이터가 성공적으로 저장되었습니다.",
  label: "확인",
});

커스텀 버튼 텍스트

확인 버튼의 텍스트를 변경할 수 있습니다.

showAlert({
  title: "확인하시겠습니까?",
  content: "이 작업은 되돌릴 수 없습니다.",
  label: "알겠습니다",
});

onClose 콜백 사용

모달이 닫힐 때 추가 작업을 수행할 수 있습니다.

showAlert({
  title: "알림",
  content: "작업이 완료되었습니다.",
  label: "확인",
  onClose: () => {
    console.log("알림이 닫혔습니다");
    // 추가 작업 수행
  },
});

복잡한 내용 표시

ReactNode를 사용하여 복잡한 내용을 표시할 수 있습니다.

showAlert({
  title: "결제 완료",
  content: (
    <div>
      <p>결제가 성공적으로 완료되었습니다.</p>
      <p className="mt-2">결제 금액: 10,000원</p>
    </div>
  ),
  label: "확인",
});

On this page