feat: 컨펌 & 얼럿 다이얼로그 스토어 생성

2025-03-19 15:54:20 +09:00
parent 25a2ac5716
commit 6f0e1a6e40
7 changed files with 120 additions and 3 deletions
@@ -0,0 +1,28 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogClose,
+  Button,
+} from "@common/components/ui";
+import { useAlertStore } from "../lib/use-alert-store";
+
+function AlertDialog() {
+  const { alertMessage, setAlertMessage } = useAlertStore((state) => state);
+  return (
+    <Dialog open={!!alertMessage} onOpenChange={() => setAlertMessage("")}>
+      <DialogContent aria-describedby={undefined}>
+        <div className="py-10">
+          <p className="text-center text-[1.4rem]">{alertMessage}</p>
+        </div>
+        <DialogFooter className="!justify-center">
+          <DialogClose asChild>
+            <Button>확인</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { AlertDialog };
@@ -0,0 +1,46 @@
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogClose,
+  Button,
+  type ButtonProps,
+} from "@common/components/ui";
+
+type ConfirmDialogProps = {
+  open: boolean;
+  confirmButtonProps?: ButtonProps & { label?: string };
+  cancelButtonProps?: ButtonProps & { label?: string };
+};
+
+function ConfirmDialog({
+  open,
+  confirmButtonProps,
+  cancelButtonProps,
+}: ConfirmDialogProps) {
+  const { message, onConfirm, onCancel } = useConfirm();
+  return (
+    <Dialog open={open} onOpenChange={onCancel}>
+      <DialogContent aria-describedby={undefined}>
+        <div className="py-10">
+          <p className="text-center text-[1.4rem]">{message}</p>
+        </div>
+        <DialogFooter className="!justify-center">
+          <DialogClose asChild>
+            <Button onClick={onConfirm} {...confirmButtonProps}>
+              {confirmButtonProps?.label ?? "확인"}
+            </Button>
+          </DialogClose>
+          <DialogClose asChild>
+            <Button onClick={onCancel} color="white" {...cancelButtonProps}>
+              {cancelButtonProps?.label ?? "취소"}
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { ConfirmDialog };