From f264a084975edcbb5aa1f1c6eb97d30ea54d00fb Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Wed, 16 Apr 2025 10:28:53 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=BB=A8=ED=8E=8C=20=EB=A1=9C?=
 =?UTF-8?q?=EC=A7=81=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/src/pages/banner/ui/modify-page.tsx |  68 +++++------
 apps/cs/src/pages/image/ui/modify-page.tsx  |  66 +++++------
 apps/cs/src/pages/menu/ui/menu-page.tsx     | 124 +++++++++-----------
 apps/cs/src/shared/ui/confirm-dialog.tsx    |   8 +-
 4 files changed, 119 insertions(+), 147 deletions(-)

diff --git a/apps/cs/src/pages/banner/ui/modify-page.tsx b/apps/cs/src/pages/banner/ui/modify-page.tsx
index 024e334c1..4063b83c4 100644
--- a/apps/cs/src/pages/banner/ui/modify-page.tsx
+++ b/apps/cs/src/pages/banner/ui/modify-page.tsx
@@ -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>
   );
 }
 
diff --git a/apps/cs/src/pages/image/ui/modify-page.tsx b/apps/cs/src/pages/image/ui/modify-page.tsx
index cf51acd6a..79e26c811 100644
--- a/apps/cs/src/pages/image/ui/modify-page.tsx
+++ b/apps/cs/src/pages/image/ui/modify-page.tsx
@@ -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>
   );
 }
 
diff --git a/apps/cs/src/pages/menu/ui/menu-page.tsx b/apps/cs/src/pages/menu/ui/menu-page.tsx
index 8e474b0b6..5f5dd6c70 100644
--- a/apps/cs/src/pages/menu/ui/menu-page.tsx
+++ b/apps/cs/src/pages/menu/ui/menu-page.tsx
@@ -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>
   );
 }
 
diff --git a/apps/cs/src/shared/ui/confirm-dialog.tsx b/apps/cs/src/shared/ui/confirm-dialog.tsx
index 4223d197e..955b742ee 100644
--- a/apps/cs/src/shared/ui/confirm-dialog.tsx
+++ b/apps/cs/src/shared/ui/confirm-dialog.tsx
@@ -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>