From f03b07738e0e747e2dc5b915b082fbfac8a17509 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Wed, 26 Mar 2025 15:35:15 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A9=94=EB=89=B4=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/src/pages/menu/api/menu-service.ts    | 11 ++++
 .../cs/src/pages/menu/model/menu-interface.ts |  8 +++
 apps/cs/src/pages/menu/ui/menu-form.tsx       | 63 ++++++++++++++-----
 apps/cs/src/pages/menu/ui/menu-page.tsx       | 19 +++++-
 4 files changed, 83 insertions(+), 18 deletions(-)

diff --git a/apps/cs/src/pages/menu/api/menu-service.ts b/apps/cs/src/pages/menu/api/menu-service.ts
index 4825da594..6d22dcc58 100644
--- a/apps/cs/src/pages/menu/api/menu-service.ts
+++ b/apps/cs/src/pages/menu/api/menu-service.ts
@@ -16,6 +16,17 @@ export class MenuApiService implements MenuService {
     return response.data;
   }
 
+  public async modifyMenu(
+    menuCd: number,
+    data: Omit<MenuFormData, "siteId">,
+  ): Promise<void> {
+    const response = await client.put<void>(
+      `${ENDPOINT.CMS_SERVICE.MENUS}/${menuCd}`,
+      data,
+    );
+    return response.data;
+  }
+
   public async getTreeMenuList(siteId: string): Promise<Menu[]> {
     const response = await client.get<Menu[]>(
       `${ENDPOINT.CMS_SERVICE.MENUS}/${siteId}/tree`,
diff --git a/apps/cs/src/pages/menu/model/menu-interface.ts b/apps/cs/src/pages/menu/model/menu-interface.ts
index dfc8de878..99c132bd6 100644
--- a/apps/cs/src/pages/menu/model/menu-interface.ts
+++ b/apps/cs/src/pages/menu/model/menu-interface.ts
@@ -59,12 +59,20 @@ export const menuFormSchema = z.object({
   evlUseYn: z.string().default("Y").nullish(),
   qrcd: z.string().nullish(),
   useYn: z.string().default("Y").nullish(),
+  menuLnkgSnNm: z.string().nullish(),
+  menuPicUserUnqId: z.string().nullish(),
+  menuPicUserUnqIdNm: z.string().nullish(),
+  menuPicDsgnYmd: z.string().nullish(),
 });
 
 export type MenuFormData = z.infer<typeof menuFormSchema>;
 
 export interface MenuService {
   createMenu: (data: MenuFormData) => Promise<void>;
+  modifyMenu: (
+    menuCd: number,
+    data: Omit<MenuFormData, "siteId">,
+  ) => Promise<void>;
   getTreeMenuList: (siteId: string) => Promise<Menu[]>;
   modifyTreeMenu: (siteId: string, data: TreeMenu[]) => Promise<void>;
   modifyMenuName: (menuCd: number, name: string) => Promise<void>;
diff --git a/apps/cs/src/pages/menu/ui/menu-form.tsx b/apps/cs/src/pages/menu/ui/menu-form.tsx
index 2db4c979a..e85204e17 100644
--- a/apps/cs/src/pages/menu/ui/menu-form.tsx
+++ b/apps/cs/src/pages/menu/ui/menu-form.tsx
@@ -17,36 +17,65 @@ import { PermissionsManagementDialog } from "./permissions-management-dialog";
 interface MenuFormProps {
   form: UseFormReturn<MenuFormData>;
   menuCd?: number;
-  handleSave: (data: MenuFormData) => void;
+  handleCreate: (data: MenuFormData) => void;
+  handleModify: ({
+    menuCd,
+    data,
+  }: {
+    menuCd: number;
+    data: Omit<MenuFormData, "siteId">;
+  }) => void;
   handleDelete?: () => void;
 }
 
-function MenuForm({ form, menuCd, handleSave, handleDelete }: MenuFormProps) {
+function MenuForm({
+  form,
+  menuCd,
+  handleCreate,
+  handleModify,
+  handleDelete,
+}: MenuFormProps) {
   const isModifyMode = !!menuCd;
 
   const { confirm } = useConfirm();
   const [onConfirm, setOnConfirm] = useState(false);
 
-  const onSubmit = async (data: MenuFormData) => {
-    const confirmMessage = isModifyMode
-      ? "수정하시겠습니까?"
-      : "저장하시겠습니까?";
-
+  const handleConfirm = async (fn: () => Promise<void>) => {
     setOnConfirm(true);
-    if (await confirm(confirmMessage)) {
-      setOnConfirm(false);
-      handleSave(data);
-    }
+    await fn();
     setOnConfirm(false);
   };
 
-  const onDelete = async () => {
-    setOnConfirm(true);
-    if (await confirm("삭제하시겠습니까?")) {
-      setOnConfirm(false);
-      handleDelete?.();
+  const onSubmit = async (data: MenuFormData) => {
+    if (isModifyMode) {
+      onModify(data);
+    } else {
+      onCreate(data);
     }
-    setOnConfirm(false);
+  };
+
+  const onCreate = (data: MenuFormData) => {
+    handleConfirm(async () => {
+      if (await confirm("저장하시겠습니까?")) {
+        handleCreate(data);
+      }
+    });
+  };
+
+  const onModify = (data: MenuFormData) => {
+    handleConfirm(async () => {
+      if (await confirm("수정하시겠습니까?")) {
+        handleModify({ menuCd: menuCd!, data });
+      }
+    });
+  };
+
+  const onDelete = () => {
+    handleConfirm(async () => {
+      if (await confirm("삭제하시겠습니까?")) {
+        handleDelete?.();
+      }
+    });
   };
 
   const menuType = form.watch("menuLnkgTypeCd");
diff --git a/apps/cs/src/pages/menu/ui/menu-page.tsx b/apps/cs/src/pages/menu/ui/menu-page.tsx
index f159cbcf2..edd1910fd 100644
--- a/apps/cs/src/pages/menu/ui/menu-page.tsx
+++ b/apps/cs/src/pages/menu/ui/menu-page.tsx
@@ -69,6 +69,22 @@ function MenuPage() {
     },
   });
 
+  const { mutate: modifyMenu } = useMutation({
+    mutationFn: ({
+      menuCd,
+      data,
+    }: {
+      menuCd: number;
+      data: Omit<MenuFormData, "siteId">;
+    }) => MenuApi.modifyMenu(menuCd, data),
+    onSuccess: () => {
+      alert("수정되었습니다.");
+      queryClient.invalidateQueries({
+        queryKey: [ENDPOINT.CMS_SERVICE.MENUS],
+      });
+    },
+  });
+
   const form = useForm<MenuFormData>({
     resolver: zodResolver(menuFormSchema),
     defaultValues: {
@@ -138,7 +154,8 @@ function MenuPage() {
           <MenuForm
             form={form}
             menuCd={selectedMenu?.menuCd}
-            handleSave={createMenu}
+            handleCreate={createMenu}
+            handleModify={modifyMenu}
             handleDelete={handleDelete}
           />
         </div>