알림 다이얼로그

알림 다이얼로그 (Alert Dialog)

알림 다이얼로그는 중요한 내용으로 사용자의 작업을 잠시 멈추게 하고 응답을 기대하는 모달 다이얼로그예요. 예를 들어 "정말 삭제할까요?"처럼 되돌릴 수 없는 작업을 확인할 때 꼭 필요한 컴포넌트죠. 사용자가 어떤 동작을 하기 전에 명시적으로 확인받아야 하는 상황에서 사용하면 돼요.

출처: 문서

본문

설치하기

init 명령으로 프로젝트를 초기화했다면, 다음 명령어로 알림 다이얼로그 컴포넌트를 바로 추가할 수 있어요.

CLI Manual 
npx shadcn@latest add alert-dialog

다음 의존성을 설치해 주세요.

npm install @radix-ui/react-alert-dialog

다음 코드를 프로젝트에 복사해서 붙여넣어 주세요.

import 경로를 프로젝트 설정에 맞게 바꿔 주세요.

사용하기

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

다음 구조로 조립하면 돼요. Trigger가 다이얼로그를 열고, Header 안에 제목과 설명을 넣으며, Footer에 확인/취소 버튼을 배치해요.

<AlertDialog>
  <AlertDialogTrigger>Open</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

더 알아보기 (Learn more)