feat: 메뉴 수정 작업

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`,

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>;

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");

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>