[apps/cs] feat: 메뉴 임시저장 및 불러오기 기능 작업

apps/cs/src/entities/menu/api/menu-service.ts

@@ -5,6 +5,7 @@ import type {
   Menu,
   MenuItem,
   MenuFormData,
+  MenuTemporarilyStoredData,
 } from "../model/menu-interface";
 
 export class MenuApiService implements MenuService {
@@ -44,6 +45,26 @@ export class MenuApiService implements MenuService {
   public async deleteMenu(menuCd: number): Promise<void> {
     await client.delete(`${ENDPOINT.CMS_SERVICE.MENUS}/${menuCd}`);
   }
+
+  public async menuTemporaryStorage(
+    menuCd: number,
+    data: MenuFormData,
+  ): Promise<void> {
+    const response = await client.post<void>(
+      `${ENDPOINT.CMS_SERVICE.MENU_TEMPORARY_STORAGE}/${menuCd}`,
+      data,
+    );
+    return response.data;
+  }
+
+  public async getMenuTemporarilyStoredData(
+    menuCd: number,
+  ): Promise<MenuTemporarilyStoredData[]> {
+    const response = await client.get<MenuTemporarilyStoredData[]>(
+      `${ENDPOINT.CMS_SERVICE.MENU_TEMPORARY_STORAGE}/menu/${menuCd}/user`,
+    );
+    return response.data;
+  }
 }
 
 export const MenuApi = new MenuApiService();

apps/cs/src/entities/menu/model/menu-interface.ts

@@ -31,6 +31,16 @@ export interface MenuItem {
   requiredUrlPath: boolean;
 }
 
+export interface MenuTemporarilyStoredData {
+  tmprStrgSn: number;
+  menuCd: number;
+  menuTmprStrg: string;
+  regDt: string;
+  rgtr: string;
+  mdfcnDt: string;
+  mdfr: string;
+}
+
 export const menuFormSchema = z.object({
   siteId: z.string(),
   menuKornNm: z.string(),
@@ -78,4 +88,8 @@ export interface MenuService {
     data: Omit<MenuFormData, "siteId">,
   ) => Promise<void>;
   deleteMenu: (menuCd: number) => Promise<void>;
+  menuTemporaryStorage: (menuCd: number, data: MenuFormData) => Promise<void>;
+  getMenuTemporarilyStoredData: (
+    menuCd: number,
+  ) => Promise<MenuTemporarilyStoredData[]>;
 }

apps/cs/src/pages/menu/ui/menu-form.tsx

@@ -1,11 +1,14 @@
 import type { UseFormReturn } from "react-hook-form";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { Button } from "@common/components";
-import type { MenuFormData } from "@/entities/menu";
+import { MenuApi, menuFormSchema, type MenuFormData } from "@/entities/menu";
 import { ManagementAuthorityDialog } from "@/entities/menu-authority";
 import { Form } from "@/shared/ui/form";
 import { BaseMenuForm } from "./base-menu-form";
 import { TypeMenuForm } from "./type-menu-form";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import { ENDPOINT } from "@/shared/config";
+import { useQuery } from "@tanstack/react-query";
 
 interface MenuFormProps {
   form: UseFormReturn<MenuFormData>;
@@ -31,6 +34,20 @@ function MenuForm({
   const isModifyMode = !!menuCd;
 
   const { confirm } = useConfirm();
+  const alert = useAlertStore((state) => state.setMessage);
+
+  const { data: menuTemporarilyStoredData } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.MENU_TEMPORARY_STORAGE, menuCd],
+    queryFn: () => MenuApi.getMenuTemporarilyStoredData(menuCd!),
+    enabled: !!menuCd,
+  });
+
+  const { mutate: menuTemporaryStorage } = useMutationWrapper({
+    mutationFn: () => MenuApi.menuTemporaryStorage(menuCd!, form.getValues()),
+    onSuccess: () => {
+      alert("메뉴 임시 저장이 완료되었습니다.");
+    },
+  });
 
   const onSubmit = async (data: MenuFormData) => {
     if (isModifyMode) {
@@ -58,6 +75,22 @@ function MenuForm({
     }
   };
 
+  const handleMenuTemporaryStorage = () => {
+    if (!menuCd || !menuFormSchema.parse(form.getValues())) return;
+    menuTemporaryStorage();
+  };
+
+  const handleLoadTemporaryData = () => {
+    if (!menuTemporarilyStoredData?.[0]?.menuTmprStrg) {
+      alert("불러올 임시 저장 데이터가 없습니다.");
+      return;
+    }
+
+    const storedData = menuTemporarilyStoredData[0].menuTmprStrg;
+    const parsedData = JSON.parse(storedData);
+    form.reset(parsedData);
+  };
+
   const menuType = form.watch("menuLnkgTypeCd");
   const isSubmitDisabled = !form.watch("siteId");
 
@@ -70,10 +103,20 @@ function MenuForm({
               {isModifyMode ? "메뉴 수정" : "메뉴 등록"}
             </h3>
             <div className="flex items-center gap-2">
-              <Button color="white" disabled={!isModifyMode}>
+              <Button
+                color="white"
+                type="button"
+                disabled={!isModifyMode}
+                onClick={handleLoadTemporaryData}
+              >
                 불러오기
               </Button>
-              <Button color="gray" disabled={!isModifyMode}>
+              <Button
+                color="gray"
+                type="button"
+                disabled={!isModifyMode}
+                onClick={handleMenuTemporaryStorage}
+              >
                 임시저장
               </Button>
               <ManagementAuthorityDialog menuCd={menuCd} />

apps/cs/src/shared/config/api.ts

@@ -22,7 +22,6 @@ export const ENDPOINT = {
     LOGINLOG: "/user-service/api/v1/login-logs",
     APILOG: "/user-service/api/v1/api-logs",
     PRIVACYLOG: "/user-service//api/v1/prvc-inq-logs",
-    
   },
   CMS_SERVICE: {
     SITES: "/cms-service/api/v1/sites",
@@ -33,6 +32,7 @@ export const ENDPOINT = {
     MENUS: "/cms-service/api/v1/menus",
     MENU_ROLES: "/cms-service/api/v1/menu-roles",
     MENU_AUTHRTS: "/cms-service/api/v1/menu-authrts",
+    MENU_TEMPORARY_STORAGE: "/cms-service/api/v1/menu-tmpr-strg",
     CONTENTS: "/cms-service/api/v1/contents",
     CONTENTS_DETAILS: "/cms-service/api/v1/contents-details",
     ORGANIZATIONS: "/cms-service/api/v1/ognzs",