ActionModal

Description

ActionModal은 루트 레이아웃에 한 번 선언하고, 어디서든 actionModal() 함수를 호출하여 사용할 수 있는 모달 컴포넌트입니다. 두 가지 버튼 배치 방식을 지원하며, 확인 및 취소 액션을 쉽게 처리할 수 있습니다.

"use client";

import { actionModal } from "@/registry/ui/action-modal";
import { ActionModal } from "@/registry/ui/action-modal";
import { Button } from "@/shared/ui/button";

export const ActionModalDemo = () => {
  const handleOpenModal = () => {
    actionModal({
      title: "테스트",
      content: "테스트 내용입니다.",
      label: "확인",
      subLabel: "닫기",
    });
  };

  return (
    <>
      <Button onClick={handleOpenModal}>모달 열기</Button>
      <ActionModal />
    </>
  );
};

Installation

pnpx shadcn add @allra/action-modal

Usage

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

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

import { ActionModal } from "@/registry/ui/action-modal";

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

2. 사용처에서 함수 호출

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

import { actionModal } from "@/registry/ui/action-modal";
import { Button } from "@/shared/ui/button";

export default function MyComponent() {
  return (
    <Button
      onClick={() =>
        actionModal({
          title: "제목",
          content: "내용",
          label: "확인",
          subLabel: "닫기",
        })
      }
    >
      모달 열기
    </Button>
  );
}

Props

Prop	Type	Default	Description
`title`	`ReactNode`	`undefined`	모달 제목
`content`	`ReactNode`	`undefined`	모달 본문 내용
`description`	`string`	`undefined`	모달 설명 텍스트
`label`	`ReactNode`	`required`	확인 버튼 텍스트
`subLabel`	`ReactNode`	`undefined`	닫기/취소 버튼 텍스트
`handleAction`	`() => void`	`undefined`	확인 버튼 클릭 시 실행되는 콜백 함수
`handleSubAction`	`() => void`	`undefined`	닫기/취소 버튼 클릭 시 실행되는 콜백 함수
`onXClick`	`() => void`	`undefined`	X 버튼 클릭 시 실행되는 콜백 함수
`showX`	`boolean`	`false`	X 버튼 표시 여부
`variant`	`"normal" \| "sub-action"`	`"normal"`	버튼 배치 방식 (normal: 세로, sub-action: 가로)
`labelVariant`	`"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"`	`"default"`	확인 버튼 스타일 변형
`subLabelVariant`	`"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"`	`"outline"`	닫기/취소 버튼 스타일 변형

Examples

다양한 Props 예시

기본 사용 (normal variant)

normal variant는 버튼이 세로로 배치되며, 확인 버튼이 위에, 닫기 버튼이 아래에 위치합니다.

actionModal({
  title: "확인하시겠습니까?",
  content: "이 작업은 되돌릴 수 없습니다.",
  label: "확인",
  subLabel: "취소",
  variant: "normal",
});

sub-action variant (가로 배치)

sub-action variant는 버튼이 가로로 동등하게 배치되며, 닫기 버튼이 왼쪽, 확인 버튼이 오른쪽에 위치합니다.

actionModal({
  title: "삭제하시겠습니까?",
  content: "이 작업은 되돌릴 수 없습니다.",
  label: "삭제",
  subLabel: "취소",
  variant: "sub-action",
});

X 버튼 표시

X 버튼을 표시하여 모달을 닫을 수 있습니다.

actionModal({
  title: "알림",
  content: "알림 내용입니다.",
  label: "확인",
  showX: true,
  onXClick: () => {
    console.log("X 버튼 클릭");
  },
});

description 사용

description을 추가하여 모달에 추가 설명을 제공할 수 있습니다.

actionModal({
  title: "결제 확인",
  description: "결제 정보를 확인해주세요.",
  content: "총 금액: 10,000원",
  label: "결제하기",
  subLabel: "취소",
  variant: "sub-action",
});

콜백 함수 사용

handleAction과 handleSubAction을 사용하여 버튼 클릭 시 추가 작업을 수행할 수 있습니다.

actionModal({
  title: "작업 확인",
  content: "작업을 진행하시겠습니까?",
  label: "진행",
  subLabel: "취소",
  variant: "normal",
  handleAction: () => {
    console.log("작업 진행");
    // 작업 로직
  },
  handleSubAction: () => {
    console.log("작업 취소");
    // 취소 로직
  },
});

버튼 variant 커스터마이징

확인 버튼과 닫기 버튼의 스타일을 각각 커스터마이징할 수 있습니다.

actionModal({
  title: "삭제 확인",
  content: "정말 삭제하시겠습니까?",
  label: "삭제",
  subLabel: "취소",
  variant: "sub-action",
  labelVariant: "destructive",
  subLabelVariant: "outline",
});

On this page