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, + ): Promise { + const response = await client.put( + `${ENDPOINT.CMS_SERVICE.MENUS}/${menuCd}`, + data, + ); + return response.data; + } + public async getTreeMenuList(siteId: string): Promise { const response = await client.get( `${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; export interface MenuService { createMenu: (data: MenuFormData) => Promise; + modifyMenu: ( + menuCd: number, + data: Omit, + ) => Promise; getTreeMenuList: (siteId: string) => Promise; modifyTreeMenu: (siteId: string, data: TreeMenu[]) => Promise; modifyMenuName: (menuCd: number, name: string) => Promise; 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; menuCd?: number; - handleSave: (data: MenuFormData) => void; + handleCreate: (data: MenuFormData) => void; + handleModify: ({ + menuCd, + data, + }: { + menuCd: number; + data: Omit; + }) => 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) => { 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; + }) => MenuApi.modifyMenu(menuCd, data), + onSuccess: () => { + alert("수정되었습니다."); + queryClient.invalidateQueries({ + queryKey: [ENDPOINT.CMS_SERVICE.MENUS], + }); + }, + }); + const form = useForm({ resolver: zodResolver(menuFormSchema), defaultValues: { @@ -138,7 +154,8 @@ function MenuPage() {