refactor: 컨펌 로직 정리

2025-04-16 10:28:53 +09:00
parent 9cc14b1186
commit f264a08497
4 changed files with 119 additions and 147 deletions
@@ -14,7 +14,6 @@ import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { Button, DataTable } from "@common/components/ui";
 import { PostingApi, type PostPayloadData } from "@/entities/posting";
 import { useAlertStore } from "@/shared/lib/use-alert-store";
-import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
 import { ENDPOINT } from "@/shared/config";
 import {
  bannerFormSchema,
@@ -30,7 +29,6 @@ function ModifyPage({ sequential }: { sequential: string }) {
  const queryClient = useQueryClient();
  const { setMessage: alert } = useAlertStore((state) => state);

-  const [onConfirm, setOnConfirm] = useState(false);
  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});

  const { data: bannerDetail } = useQuery({
@@ -65,6 +63,7 @@ function ModifyPage({ sequential }: { sequential: string }) {
      queryClient.invalidateQueries({
        queryKey: [ENDPOINT.CMS_SERVICE.POSTINGS, sequential],
      });
+      alert("삭제되었습니다.");
    },
  });

@@ -90,52 +89,43 @@ function ModifyPage({ sequential }: { sequential: string }) {
      mode: "D",
    }));

-    setOnConfirm(true);
    if (await confirm("삭제하시겠습니까?")) {
-      setOnConfirm(false);
-      await savePosting(data);
-      alert("삭제되었습니다.");
+      savePosting(data);
    }
-    setOnConfirm(false);
  };

  return (
-    <>
-      <div className="mt-6 flex flex-col">
-        <div className="card card-border">
-          <div className="card-header">
-            <h3 className="text-2xl font-medium text-label">배너 수정</h3>
-          </div>
-          <BannerForm
-            form={form}
-            bnrSn={Number(sequential)}
-            handleSave={updateBanner}
-            handleDelete={deleteBanner}
-          />
+    <div className="mt-6 flex flex-col">
+      <div className="card card-border">
+        <div className="card-header">
+          <h3 className="text-2xl font-medium text-label">배너 수정</h3>
        </div>
-        <div className="card card-border">
-          <div className="card-header">
-            <h3 className="text-2xl font-medium text-label">
-              사이트 게시 이력
-            </h3>
-          </div>
-          <div className="card">
-            <div className="mb-4 flex justify-end">
-              <Button
-                size="sm"
-                color="red"
-                disabled={!table.getFilteredSelectedRowModel().rows.length}
-                onClick={handleDeletePostingHistory}
-              >
-                이력삭제
-              </Button>
-            </div>
-            <DataTable table={table} />
+        <BannerForm
+          form={form}
+          bnrSn={Number(sequential)}
+          handleSave={updateBanner}
+          handleDelete={deleteBanner}
+        />
+      </div>
+      <div className="card card-border">
+        <div className="card-header">
+          <h3 className="text-2xl font-medium text-label">사이트 게시 이력</h3>
+        </div>
+        <div className="card">
+          <div className="mb-4 flex justify-end">
+            <Button
+              size="sm"
+              color="red"
+              disabled={!table.getFilteredSelectedRowModel().rows.length}
+              onClick={handleDeletePostingHistory}
+            >
+              이력삭제
+            </Button>
          </div>
+          <DataTable table={table} />
        </div>
      </div>
-      <ConfirmDialog open={onConfirm} />
-    </>
+    </div>
  );
 }

@@ -14,7 +14,6 @@ import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { Button, DataTable } from "@common/components/ui";
 import { PostingApi, type PostPayloadData } from "@/entities/posting";
 import { useAlertStore } from "@/shared/lib/use-alert-store";
-import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
 import { ENDPOINT } from "@/shared/config";
 import { imageFormSchema, type ImageFormData } from "../model/image-interface";
 import { columns } from "../model/posting-table-columns";
@@ -27,7 +26,6 @@ function ModifyPage({ sequential }: { sequential: string }) {
  const queryClient = useQueryClient();
  const { setMessage: alert } = useAlertStore((state) => state);

-  const [onConfirm, setOnConfirm] = useState(false);
  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});

  const { data: imageDetail } = useQuery({
@@ -61,6 +59,7 @@ function ModifyPage({ sequential }: { sequential: string }) {
      queryClient.invalidateQueries({
        queryKey: [ENDPOINT.CMS_SERVICE.POSTINGS, sequential],
      });
+      alert("삭제되었습니다.");
    },
  });

@@ -86,52 +85,43 @@ function ModifyPage({ sequential }: { sequential: string }) {
      mode: "D",
    }));

-    setOnConfirm(true);
    if (await confirm("삭제하시겠습니까?")) {
-      setOnConfirm(false);
      await savePosting(data);
-      alert("삭제되었습니다.");
    }
-    setOnConfirm(false);
  };

  return (
-    <>
-      <div className="mt-6 flex flex-col">
-        <div className="card card-border">
-          <div className="card-header">
-            <h3 className="text-2xl font-medium text-label">이미지 수정</h3>
-          </div>
-          <ImageForm
-            form={form}
-            imgSn={Number(sequential)}
-            handleSave={updateImage}
-            handleDelete={deleteImage}
-          />
+    <div className="mt-6 flex flex-col">
+      <div className="card card-border">
+        <div className="card-header">
+          <h3 className="text-2xl font-medium text-label">이미지 수정</h3>
        </div>
-        <div className="card card-border">
-          <div className="card-header">
-            <h3 className="text-2xl font-medium text-label">
-              사이트 게시 이력
-            </h3>
-          </div>
-          <div className="card">
-            <div className="mb-4 flex justify-end">
-              <Button
-                size="sm"
-                color="red"
-                disabled={!table.getFilteredSelectedRowModel().rows.length}
-                onClick={handleDeletePostingHistory}
-              >
-                이력삭제
-              </Button>
-            </div>
-            <DataTable table={table} />
+        <ImageForm
+          form={form}
+          imgSn={Number(sequential)}
+          handleSave={updateImage}
+          handleDelete={deleteImage}
+        />
+      </div>
+      <div className="card card-border">
+        <div className="card-header">
+          <h3 className="text-2xl font-medium text-label">사이트 게시 이력</h3>
+        </div>
+        <div className="card">
+          <div className="mb-4 flex justify-end">
+            <Button
+              size="sm"
+              color="red"
+              disabled={!table.getFilteredSelectedRowModel().rows.length}
+              onClick={handleDeletePostingHistory}
+            >
+              이력삭제
+            </Button>
          </div>
+          <DataTable table={table} />
        </div>
      </div>
-      <ConfirmDialog open={onConfirm} />
-    </>
+    </div>
  );
 }

@@ -16,7 +16,6 @@ import {
 } from "@common/components/ui";
 import { SiteApi } from "@/entities/site";
 import { ENDPOINT } from "@/shared/config";
-import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
 import { useAlertStore } from "@/shared/lib/use-alert-store";
 import type { TreeMenu } from "../model/menu-interface";
 import { MenuApi } from "../api/menu-service";
@@ -35,7 +34,6 @@ function MenuPage() {
  const { confirm } = useConfirm();

  const [siteId, setSiteId] = useState("");
-  const [onConfirm, setOnConfirm] = useState(false);
  const [selectedMenu, setSelectedMenu] = useState<TreeMenu | null>(null);
  const [additionalNode, setAdditionalNode] =
    useState<NodeModel<TreeMenu> | null>(null);
@@ -174,12 +172,9 @@ function MenuPage() {
  };

  const handleNodeDelete = async () => {
-    setOnConfirm(true);
    if (await confirm("삭제하시겠습니까?")) {
-      setOnConfirm(false);
      deleteMenu(selectedMenu!.menuCd!);
    }
-    setOnConfirm(false);
  };

  const handleAddMenu = () => {
@@ -196,68 +191,65 @@ function MenuPage() {
    : (treeData ?? []);

  return (
-    <>
-      <div className="card !mb-0 flex !min-h-[calc(100vh-16.8rem)] gap-2">
-        <div className="card card-border w-[24rem]">
-          <Select value={siteId} onValueChange={handleSiteIdChange}>
-            <SelectTrigger>
-              <SelectValue placeholder="선택하세요" />
-            </SelectTrigger>
-            <SelectContent>
-              {options?.map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          {siteId && (
-            <>
-              <div className="my-4 flex gap-2">
-                <Button
-                  size="sm"
-                  color="primary"
-                  className="flex-1"
-                  onClick={handleAddMenu}
-                >
-                  메뉴 추가
-                </Button>
-                <Button
-                  size="sm"
-                  color="red"
-                  className="flex-1"
-                  onClick={handleNodeDelete}
-                  disabled={!selectedMenu}
-                >
-                  메뉴 삭제
-                </Button>
-              </div>
-              <div className="card card-border !mx-0">
-                <MenuTree
-                  tree={tree}
-                  siteId={siteId}
-                  selectedMenu={selectedMenu}
-                  additionalNodeForm={additionalNodeForm}
-                  onSelectNode={handleNodeSelect}
-                  onAdditionalNodeSave={handleAdditionalNodeSave}
-                  onAdditionalNodeCancel={resetAdditionalNode}
-                />
-              </div>
-            </>
-          )}
-        </div>
-        <div className="card card-border flex-1">
-          <MenuForm
-            form={form}
-            menuCd={selectedMenu?.menuCd}
-            handleCreate={createMenu}
-            handleUpdate={updateMenu}
-            handleDelete={deleteMenu}
-          />
-        </div>
+    <div className="card !mb-0 flex !min-h-[calc(100vh-16.8rem)] gap-2">
+      <div className="card card-border w-[24rem]">
+        <Select value={siteId} onValueChange={handleSiteIdChange}>
+          <SelectTrigger>
+            <SelectValue placeholder="선택하세요" />
+          </SelectTrigger>
+          <SelectContent>
+            {options?.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        {siteId && (
+          <>
+            <div className="my-4 flex gap-2">
+              <Button
+                size="sm"
+                color="primary"
+                className="flex-1"
+                onClick={handleAddMenu}
+              >
+                메뉴 추가
+              </Button>
+              <Button
+                size="sm"
+                color="red"
+                className="flex-1"
+                onClick={handleNodeDelete}
+                disabled={!selectedMenu}
+              >
+                메뉴 삭제
+              </Button>
+            </div>
+            <div className="card card-border !mx-0">
+              <MenuTree
+                tree={tree}
+                siteId={siteId}
+                selectedMenu={selectedMenu}
+                additionalNodeForm={additionalNodeForm}
+                onSelectNode={handleNodeSelect}
+                onAdditionalNodeSave={handleAdditionalNodeSave}
+                onAdditionalNodeCancel={resetAdditionalNode}
+              />
+            </div>
+          </>
+        )}
      </div>
-      <ConfirmDialog open={onConfirm} />
-    </>
+      <div className="card card-border flex-1">
+        <MenuForm
+          form={form}
+          menuCd={selectedMenu?.menuCd}
+          handleCreate={createMenu}
+          handleUpdate={updateMenu}
+          handleDelete={deleteMenu}
+        />
+      </div>
+    </div>
  );
 }

@@ -9,19 +9,19 @@ import {
 } from "@common/components/ui";

 type ConfirmDialogProps = {
-  open?: boolean;
+  isOpen?: boolean;
  confirmButtonProps?: ButtonProps & { label?: string };
  cancelButtonProps?: ButtonProps & { label?: string };
 };

 function ConfirmDialog({
-  open,
+  isOpen,
  confirmButtonProps,
  cancelButtonProps,
 }: ConfirmDialogProps) {
-  const { message, isOpen, onConfirm, onCancel } = useConfirm();
+  const { message, isOpen: isGlobalOpen, onConfirm, onCancel } = useConfirm();
  return (
-    <Dialog open={open ?? isOpen} onOpenChange={onCancel}>
+    <Dialog open={isOpen ?? isGlobalOpen} onOpenChange={onCancel}>
      <DialogContent aria-describedby={undefined}>
        <div className="py-10">
          <p className="text-center text-[1.4rem] text-foreground">{message}</p>