diff --git a/apps/cs/src/entities/menu-authority/ui/management-authority-dialog.tsx b/apps/cs/src/entities/menu-authority/ui/management-authority-dialog.tsx
index 95c37fa7d..4a73cb596 100644
--- a/apps/cs/src/entities/menu-authority/ui/management-authority-dialog.tsx
+++ b/apps/cs/src/entities/menu-authority/ui/management-authority-dialog.tsx
@@ -1,6 +1,6 @@
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import {
@@ -15,7 +15,7 @@ import {
   DialogTrigger,
 } from "@common/components";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import {
   menuAuthorityFormSchema,
   type MenuAuthorityFormData,
@@ -41,7 +41,7 @@ function ManagementAuthorityDialog({
     enabled: !!menuCd,
   });
 
-  const { mutateAsync: saveMenuAuthority } = useMutation({
+  const { mutateAsync: saveMenuAuthority } = useMutationWrapper({
     mutationFn: (data: MenuAuthorityPayload[]) =>
       MenuAuthorityApi.saveMenuAuthority(data),
     onSuccess: () => {
diff --git a/apps/cs/src/entities/posting/ui/posting-dialog.tsx b/apps/cs/src/entities/posting/ui/posting-dialog.tsx
index fa0118aa6..beb9f2c02 100644
--- a/apps/cs/src/entities/posting/ui/posting-dialog.tsx
+++ b/apps/cs/src/entities/posting/ui/posting-dialog.tsx
@@ -2,7 +2,7 @@ import dayjs from "dayjs";
 import { useState } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useFieldArray, useForm } from "react-hook-form";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import {
   Dialog,
@@ -28,6 +28,7 @@ import {
 import { CodeSelect } from "@/entities/code/@x/posting";
 import { AuthorityButton } from "@/entities/menu-authority";
 import { SiteApi, type Site } from "@/entities/site/@x/posting";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import type { PageableList } from "@/shared/model";
 import { ENDPOINT } from "@/shared/config";
 import { PostingApi } from "../api/posting-service";
@@ -37,7 +38,6 @@ import {
   type PostingType,
   type PostPayload,
 } from "../model/posting-interface";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
 
 type DateRange = {
   from: string;
@@ -77,7 +77,7 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
     queryFn: () => SiteApi.getSiteList({}),
   });
 
-  const { mutateAsync: savePosting } = useMutation({
+  const { mutateAsync: savePosting } = useMutationWrapper({
     mutationFn: (data: PostPayload[]) => PostingApi.savePosting(data),
     onSuccess: () => {
       alert("저장되었습니다.");
diff --git a/apps/cs/src/pages/(post)/faq/ui/create-page.tsx b/apps/cs/src/pages/(post)/faq/ui/create-page.tsx
index 2d436c3c8..1adf6f227 100644
--- a/apps/cs/src/pages/(post)/faq/ui/create-page.tsx
+++ b/apps/cs/src/pages/(post)/faq/ui/create-page.tsx
@@ -3,17 +3,16 @@
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation } from "@tanstack/react-query";
 import { PostForm } from "@/widgets/post";
 import { PostApi, postFormSchema, type PostFormData } from "@/entities/post";
-import { useAlertStore, useUserStore } from "@/shared/lib";
+import { useAlertStore, useUserStore, useMutationWrapper } from "@/shared/lib";
 
 function CreatePage({ bbsId }: { bbsId: string }) {
   const router = useRouter();
   const userInfo = useUserStore((state) => state.userInfo);
   const alert = useAlertStore((state) => state.setMessage);
 
-  const { mutateAsync: createPost } = useMutation({
+  const { mutateAsync: createPost } = useMutationWrapper({
     mutationFn: (data: PostFormData) => PostApi.createPost(data),
     onSuccess: () => {
       alert("등록되었습니다.", router.back);
diff --git a/apps/cs/src/pages/(post)/faq/ui/faq-page.tsx b/apps/cs/src/pages/(post)/faq/ui/faq-page.tsx
index 7d739b39f..1057fd2b2 100644
--- a/apps/cs/src/pages/(post)/faq/ui/faq-page.tsx
+++ b/apps/cs/src/pages/(post)/faq/ui/faq-page.tsx
@@ -3,7 +3,7 @@
 import dayjs from "dayjs";
 import React, { useEffect, useState } from "react";
 import { usePathname, useRouter } from "next/navigation";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import {
   Accordion,
   AccordionContent,
@@ -23,8 +23,13 @@ import {
 import { AttachmentApi } from "@/entities/attachment";
 import { PostApi, type PostParams } from "@/entities/post";
 import { AuthorityButton } from "@/entities/menu-authority";
-import { useAlertStore, useMenuStore, usePrompt } from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
+import {
+  useAlertStore,
+  useMenuStore,
+  usePrompt,
+  useMutationWrapper,
+} from "@/shared/lib";
 
 function FaqPage({ bbsId }: { bbsId: string }) {
   const router = useRouter();
@@ -53,7 +58,7 @@ function FaqPage({ bbsId }: { bbsId: string }) {
     enabled: !!bbsInfo?.bbsTypeCd,
   });
 
-  const { mutate: deletePost } = useMutation({
+  const { mutate: deletePost } = useMutationWrapper({
     mutationFn: ({ pstNo, delRsn }: { pstNo: number; delRsn?: string }) =>
       PostApi.deletePost(parseInt(bbsId), pstNo, delRsn),
     onSuccess: () => {
diff --git a/apps/cs/src/pages/(post)/faq/ui/modify-page.tsx b/apps/cs/src/pages/(post)/faq/ui/modify-page.tsx
index c35a94e08..b6da52232 100644
--- a/apps/cs/src/pages/(post)/faq/ui/modify-page.tsx
+++ b/apps/cs/src/pages/(post)/faq/ui/modify-page.tsx
@@ -3,7 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { PostForm } from "@/widgets/post";
 import {
   PostApi,
@@ -11,7 +11,7 @@ import {
   type PostUpdateFormData,
 } from "@/entities/post";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore, useUserStore } from "@/shared/lib";
+import { useAlertStore, useUserStore, useMutationWrapper } from "@/shared/lib";
 
 function ModifyPage({ bbsId, pstNo }: { bbsId: string; pstNo: string }) {
   const router = useRouter();
@@ -23,7 +23,7 @@ function ModifyPage({ bbsId, pstNo }: { bbsId: string; pstNo: string }) {
     queryFn: () => PostApi.getPostInfo(parseInt(bbsId), parseInt(pstNo)),
   });
 
-  const { mutateAsync: updatePost } = useMutation({
+  const { mutateAsync: updatePost } = useMutationWrapper({
     mutationFn: (data: PostUpdateFormData) =>
       PostApi.updatePost(parseInt(bbsId), parseInt(pstNo), data),
     onSuccess: () => {
diff --git a/apps/cs/src/pages/(post)/image/ui/create-page.tsx b/apps/cs/src/pages/(post)/image/ui/create-page.tsx
index dc5e4f894..e986ca058 100644
--- a/apps/cs/src/pages/(post)/image/ui/create-page.tsx
+++ b/apps/cs/src/pages/(post)/image/ui/create-page.tsx
@@ -3,17 +3,16 @@
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation } from "@tanstack/react-query";
 import { PostForm } from "@/widgets/post";
 import { PostApi, postFormSchema, type PostFormData } from "@/entities/post";
-import { useAlertStore, useUserStore } from "@/shared/lib";
+import { useAlertStore, useUserStore, useMutationWrapper } from "@/shared/lib";
 
 function CreatePage({ bbsId }: { bbsId: string }) {
   const router = useRouter();
   const userInfo = useUserStore((state) => state.userInfo);
   const alert = useAlertStore((state) => state.setMessage);
 
-  const { mutateAsync: createPost } = useMutation({
+  const { mutateAsync: createPost } = useMutationWrapper({
     mutationFn: (data: PostFormData) => PostApi.createPost(data),
     onSuccess: () => {
       alert("등록되었습니다.", router.back);
diff --git a/apps/cs/src/pages/(post)/image/ui/modify-page.tsx b/apps/cs/src/pages/(post)/image/ui/modify-page.tsx
index 01f5f2ecd..c856cb215 100644
--- a/apps/cs/src/pages/(post)/image/ui/modify-page.tsx
+++ b/apps/cs/src/pages/(post)/image/ui/modify-page.tsx
@@ -3,7 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { PostForm } from "@/widgets/post";
 import {
   PostApi,
@@ -11,7 +11,7 @@ import {
   type PostUpdateFormData,
 } from "@/entities/post";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore, useUserStore } from "@/shared/lib";
+import { useAlertStore, useUserStore, useMutationWrapper } from "@/shared/lib";
 
 function ModifyPage({ bbsId, pstNo }: { bbsId: string; pstNo: string }) {
   const router = useRouter();
@@ -23,7 +23,7 @@ function ModifyPage({ bbsId, pstNo }: { bbsId: string; pstNo: string }) {
     queryFn: () => PostApi.getPostInfo(parseInt(bbsId), parseInt(pstNo)),
   });
 
-  const { mutateAsync: updatePost } = useMutation({
+  const { mutateAsync: updatePost } = useMutationWrapper({
     mutationFn: (data: PostUpdateFormData) =>
       PostApi.updatePost(parseInt(bbsId), parseInt(pstNo), data),
     onSuccess: () => {
diff --git a/apps/cs/src/pages/(post)/movie/ui/create-page.tsx b/apps/cs/src/pages/(post)/movie/ui/create-page.tsx
index b5e9af8a8..ff20486c5 100644
--- a/apps/cs/src/pages/(post)/movie/ui/create-page.tsx
+++ b/apps/cs/src/pages/(post)/movie/ui/create-page.tsx
@@ -3,17 +3,16 @@
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation } from "@tanstack/react-query";
 import { PostForm } from "@/widgets/post";
 import { PostApi, postFormSchema, type PostFormData } from "@/entities/post";
-import { useAlertStore, useUserStore } from "@/shared/lib";
+import { useAlertStore, useUserStore, useMutationWrapper } from "@/shared/lib";
 
 function CreatePage({ bbsId }: { bbsId: string }) {
   const router = useRouter();
   const userInfo = useUserStore((state) => state.userInfo);
   const alert = useAlertStore((state) => state.setMessage);
 
-  const { mutateAsync: createPost } = useMutation({
+  const { mutateAsync: createPost } = useMutationWrapper({
     mutationFn: (data: PostFormData) => PostApi.createPost(data),
     onSuccess: () => {
       alert("등록되었습니다.", router.back);
diff --git a/apps/cs/src/pages/(post)/movie/ui/modify-page.tsx b/apps/cs/src/pages/(post)/movie/ui/modify-page.tsx
index d73d8d9e5..0f4b87701 100644
--- a/apps/cs/src/pages/(post)/movie/ui/modify-page.tsx
+++ b/apps/cs/src/pages/(post)/movie/ui/modify-page.tsx
@@ -3,7 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { PostForm } from "@/widgets/post";
 import {
   PostApi,
@@ -11,7 +11,7 @@ import {
   type PostUpdateFormData,
 } from "@/entities/post";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore, useUserStore } from "@/shared/lib";
+import { useAlertStore, useUserStore, useMutationWrapper } from "@/shared/lib";
 
 function ModifyPage({ bbsId, pstNo }: { bbsId: string; pstNo: string }) {
   const router = useRouter();
@@ -23,7 +23,7 @@ function ModifyPage({ bbsId, pstNo }: { bbsId: string; pstNo: string }) {
     queryFn: () => PostApi.getPostInfo(parseInt(bbsId), parseInt(pstNo)),
   });
 
-  const { mutateAsync: updatePost } = useMutation({
+  const { mutateAsync: updatePost } = useMutationWrapper({
     mutationFn: (data: PostUpdateFormData) =>
       PostApi.updatePost(parseInt(bbsId), parseInt(pstNo), data),
     onSuccess: () => {
diff --git a/apps/cs/src/pages/(post)/normal/ui/create-page.tsx b/apps/cs/src/pages/(post)/normal/ui/create-page.tsx
index df2ab2a70..5dae6aeab 100644
--- a/apps/cs/src/pages/(post)/normal/ui/create-page.tsx
+++ b/apps/cs/src/pages/(post)/normal/ui/create-page.tsx
@@ -3,10 +3,9 @@
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation } from "@tanstack/react-query";
 import { PostForm } from "@/widgets/post";
 import { PostApi, postFormSchema, type PostFormData } from "@/entities/post";
-import { useAlertStore, useUserStore } from "@/shared/lib";
+import { useAlertStore, useUserStore, useMutationWrapper } from "@/shared/lib";
 
 function CreatePage({ bbsId, pstNo }: { bbsId: string; pstNo?: string }) {
   const answerRegisterMode = !!pstNo;
@@ -15,7 +14,7 @@ function CreatePage({ bbsId, pstNo }: { bbsId: string; pstNo?: string }) {
   const userInfo = useUserStore((state) => state.userInfo);
   const alert = useAlertStore((state) => state.setMessage);
 
-  const { mutateAsync: createPost } = useMutation({
+  const { mutateAsync: createPost } = useMutationWrapper({
     mutationFn: (data: PostFormData) => PostApi.createPost(data),
     onSuccess: () => {
       alert("등록되었습니다.", router.back);
diff --git a/apps/cs/src/pages/(post)/normal/ui/modify-page.tsx b/apps/cs/src/pages/(post)/normal/ui/modify-page.tsx
index 65d0f2070..dc7eb2338 100644
--- a/apps/cs/src/pages/(post)/normal/ui/modify-page.tsx
+++ b/apps/cs/src/pages/(post)/normal/ui/modify-page.tsx
@@ -3,7 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { PostForm } from "@/widgets/post";
 import {
   PostApi,
@@ -11,7 +11,7 @@ import {
   type PostUpdateFormData,
 } from "@/entities/post";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore, useUserStore } from "@/shared/lib";
+import { useAlertStore, useUserStore, useMutationWrapper } from "@/shared/lib";
 
 function ModifyPage({ bbsId, pstNo }: { bbsId: string; pstNo: string }) {
   const router = useRouter();
@@ -23,7 +23,7 @@ function ModifyPage({ bbsId, pstNo }: { bbsId: string; pstNo: string }) {
     queryFn: () => PostApi.getPostInfo(parseInt(bbsId), parseInt(pstNo)),
   });
 
-  const { mutateAsync: updatePost } = useMutation({
+  const { mutateAsync: updatePost } = useMutationWrapper({
     mutationFn: (data: PostUpdateFormData) =>
       PostApi.updatePost(parseInt(bbsId), parseInt(pstNo), data),
     onSuccess: () => {
diff --git a/apps/cs/src/pages/(post)/notice/ui/create-page.tsx b/apps/cs/src/pages/(post)/notice/ui/create-page.tsx
index 5033bff60..eb5a9cb6f 100644
--- a/apps/cs/src/pages/(post)/notice/ui/create-page.tsx
+++ b/apps/cs/src/pages/(post)/notice/ui/create-page.tsx
@@ -3,17 +3,16 @@
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation } from "@tanstack/react-query";
 import { PostForm } from "@/widgets/post";
 import { PostApi, postFormSchema, type PostFormData } from "@/entities/post";
-import { useAlertStore, useUserStore } from "@/shared/lib";
+import { useAlertStore, useUserStore, useMutationWrapper } from "@/shared/lib";
 
 function CreatePage({ bbsId }: { bbsId: string }) {
   const router = useRouter();
   const userInfo = useUserStore((state) => state.userInfo);
   const alert = useAlertStore((state) => state.setMessage);
 
-  const { mutateAsync: createPost } = useMutation({
+  const { mutateAsync: createPost } = useMutationWrapper({
     mutationFn: (data: PostFormData) => PostApi.createPost(data),
     onSuccess: () => {
       alert("등록되었습니다.", router.back);
diff --git a/apps/cs/src/pages/(post)/notice/ui/modify-page.tsx b/apps/cs/src/pages/(post)/notice/ui/modify-page.tsx
index d18d07070..a42190a3e 100644
--- a/apps/cs/src/pages/(post)/notice/ui/modify-page.tsx
+++ b/apps/cs/src/pages/(post)/notice/ui/modify-page.tsx
@@ -3,7 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { PostForm } from "@/widgets/post";
 import {
   PostApi,
@@ -11,7 +11,7 @@ import {
   type PostUpdateFormData,
 } from "@/entities/post";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore, useUserStore } from "@/shared/lib";
+import { useAlertStore, useUserStore, useMutationWrapper } from "@/shared/lib";
 
 function ModifyPage({ bbsId, pstNo }: { bbsId: string; pstNo: string }) {
   const router = useRouter();
@@ -23,7 +23,7 @@ function ModifyPage({ bbsId, pstNo }: { bbsId: string; pstNo: string }) {
     queryFn: () => PostApi.getPostInfo(parseInt(bbsId), parseInt(pstNo)),
   });
 
-  const { mutateAsync: updatePost } = useMutation({
+  const { mutateAsync: updatePost } = useMutationWrapper({
     mutationFn: (data: PostUpdateFormData) =>
       PostApi.updatePost(parseInt(bbsId), parseInt(pstNo), data),
     onSuccess: () => {
diff --git a/apps/cs/src/pages/banner/ui/create-page.tsx b/apps/cs/src/pages/banner/ui/create-page.tsx
index 2add424c3..803d2b2ec 100644
--- a/apps/cs/src/pages/banner/ui/create-page.tsx
+++ b/apps/cs/src/pages/banner/ui/create-page.tsx
@@ -3,8 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation } from "@tanstack/react-query";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import {
   bannerFormSchema,
   type BannerFormData,
@@ -16,7 +15,7 @@ function CreatePage() {
   const router = useRouter();
   const alert = useAlertStore((state) => state.setMessage);
 
-  const { mutateAsync: createBanner } = useMutation({
+  const { mutateAsync: createBanner } = useMutationWrapper({
     mutationFn: (data: BannerFormData) => BannerApi.createBanner(data),
     onSuccess: () => {
       alert("등록되었습니다.", router.back);
diff --git a/apps/cs/src/pages/banner/ui/modify-page.tsx b/apps/cs/src/pages/banner/ui/modify-page.tsx
index 5739a0577..070db0e46 100644
--- a/apps/cs/src/pages/banner/ui/modify-page.tsx
+++ b/apps/cs/src/pages/banner/ui/modify-page.tsx
@@ -4,7 +4,7 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   getCoreRowModel,
   useReactTable,
@@ -13,7 +13,7 @@ import {
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { Button, DataTable } from "@common/components";
 import { PostingApi, type PostPayload } from "@/entities/posting";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
 import {
   bannerFormSchema,
@@ -42,7 +42,7 @@ function ModifyPage({ sequential }: { sequential: string }) {
       PostingApi.getPostingHistory({ pstgTrgtNo: parseInt(sequential) }),
   });
 
-  const { mutateAsync: updateBanner } = useMutation({
+  const { mutateAsync: updateBanner } = useMutationWrapper({
     mutationFn: (data: BannerFormData) =>
       BannerApi.updateBanner(sequential, data),
     onSuccess: () => {
@@ -50,14 +50,14 @@ function ModifyPage({ sequential }: { sequential: string }) {
     },
   });
 
-  const { mutateAsync: deleteBanner } = useMutation({
+  const { mutateAsync: deleteBanner } = useMutationWrapper({
     mutationFn: () => BannerApi.deleteBanner(sequential),
     onSuccess: () => {
       alert("삭제되었습니다.", router.back);
     },
   });
 
-  const { mutateAsync: savePosting } = useMutation({
+  const { mutateAsync: savePosting } = useMutationWrapper({
     mutationFn: (data: PostPayload[]) => PostingApi.savePosting(data),
     onSuccess: () => {
       queryClient.invalidateQueries({
diff --git a/apps/cs/src/pages/bbs/ui/create-page.tsx b/apps/cs/src/pages/bbs/ui/create-page.tsx
index 5bd4bcc89..e5b8b2c21 100644
--- a/apps/cs/src/pages/bbs/ui/create-page.tsx
+++ b/apps/cs/src/pages/bbs/ui/create-page.tsx
@@ -3,8 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation } from "@tanstack/react-query";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import {
   BoardApi,
   boardFormSchema,
@@ -16,7 +15,7 @@ function CreatePage() {
   const router = useRouter();
   const alert = useAlertStore((state) => state.setMessage);
 
-  const { mutateAsync: createBoard } = useMutation({
+  const { mutateAsync: createBoard } = useMutationWrapper({
     mutationFn: (data: BoardFormData) => BoardApi.createBoard(data),
     onSuccess: () => {
       alert("등록되었습니다.", router.back);
diff --git a/apps/cs/src/pages/bbs/ui/modify-page.tsx b/apps/cs/src/pages/bbs/ui/modify-page.tsx
index 0d8fefde7..881928297 100644
--- a/apps/cs/src/pages/bbs/ui/modify-page.tsx
+++ b/apps/cs/src/pages/bbs/ui/modify-page.tsx
@@ -2,8 +2,8 @@
 
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQuery } from "@tanstack/react-query";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { useQuery } from "@tanstack/react-query";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
 import {
   BoardApi,
@@ -20,7 +20,7 @@ function ModifyPage({ bbsId }: { bbsId: string }) {
     queryFn: () => BoardApi.getBoardInfo(bbsId),
   });
 
-  const { mutateAsync: updateBoard } = useMutation({
+  const { mutateAsync: updateBoard } = useMutationWrapper({
     mutationFn: (data: BoardFormData) => BoardApi.updateBoard(bbsId, data),
     onSuccess: () => {
       alert("수정되었습니다.");
diff --git a/apps/cs/src/pages/code/ui/lwpocode-dialog.tsx b/apps/cs/src/pages/code/ui/lwpocode-dialog.tsx
index 49b03cf24..c11c57332 100644
--- a/apps/cs/src/pages/code/ui/lwpocode-dialog.tsx
+++ b/apps/cs/src/pages/code/ui/lwpocode-dialog.tsx
@@ -1,7 +1,7 @@
 import { memo } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import {
   Button,
@@ -29,7 +29,7 @@ import {
   type LwpoCodeFormData,
 } from "@/entities/code";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { Form, FormField, FormItem, FormControl } from "@/shared/ui/form";
 
 type ManagementLwpoCodeDialogProps = {
@@ -66,14 +66,14 @@ const LwpoCodeManagementDialog = memo(
       enabled: !!upCd,
     });
 
-    const { mutateAsync: createLwpoCode } = useMutation({
+    const { mutateAsync: createLwpoCode } = useMutationWrapper({
       mutationFn: (data: LwpoCodeFormData) => LwpoCodeApi.createLwpoCode(data),
       onSuccess: () => {
         alert("등록되었습니다.", () => onOpenChange?.(false));
       },
     });
 
-    const { mutateAsync: updateLwpoCode } = useMutation({
+    const { mutateAsync: updateLwpoCode } = useMutationWrapper({
       mutationFn: (data: LwpoCodeFormData) =>
         LwpoCodeApi.updateLwpoCode(upCd!, lwpoCd!, data),
       onSuccess: () => {
diff --git a/apps/cs/src/pages/code/ui/upcode-dialog.tsx b/apps/cs/src/pages/code/ui/upcode-dialog.tsx
index ea321543f..fafb7429f 100644
--- a/apps/cs/src/pages/code/ui/upcode-dialog.tsx
+++ b/apps/cs/src/pages/code/ui/upcode-dialog.tsx
@@ -1,7 +1,7 @@
 import { memo } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import {
   Button,
@@ -30,7 +30,7 @@ import {
 } from "@/entities/code";
 import { SiteSelect } from "@/entities/site";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { Form, FormField, FormItem, FormControl } from "@/shared/ui/form";
 
 type UpCodeManagementDialogProps = {
@@ -59,14 +59,14 @@ const UpCodeManagementDialog = memo(
       enabled: open && !!upCd,
     });
 
-    const { mutateAsync: createUpCode } = useMutation({
+    const { mutateAsync: createUpCode } = useMutationWrapper({
       mutationFn: (data: UpCodeFormData) => UpCodeApi.createUpCode(data),
       onSuccess: () => {
         alert("등록되었습니다.", () => onOpenChange?.(false));
       },
     });
 
-    const { mutateAsync: updateUpCode } = useMutation({
+    const { mutateAsync: updateUpCode } = useMutationWrapper({
       mutationFn: (data: UpCodeFormData) => UpCodeApi.updateUpCode(upCd!, data),
       onSuccess: () => {
         alert("수정되었습니다.", () => onOpenChange?.(false));
diff --git a/apps/cs/src/pages/contents/ui/create-page.tsx b/apps/cs/src/pages/contents/ui/create-page.tsx
index c055db669..dfbb2a9fb 100644
--- a/apps/cs/src/pages/contents/ui/create-page.tsx
+++ b/apps/cs/src/pages/contents/ui/create-page.tsx
@@ -2,21 +2,20 @@
 
 import { useForm } from "react-hook-form";
 import { useRouter } from "next/navigation";
-import { useMutation } from "@tanstack/react-query";
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
   ContentsApi,
   contentsFormSchema,
   type ContentsFormData,
 } from "@/entities/content";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { ContentsForm } from "./contents-form";
 
 function CreatePage() {
   const router = useRouter();
   const alert = useAlertStore((state) => state.setMessage);
 
-  const { mutateAsync: createContents } = useMutation({
+  const { mutateAsync: createContents } = useMutationWrapper({
     mutationFn: (data: ContentsFormData) => ContentsApi.createContents(data),
     onSuccess: () => {
       alert("등록되었습니다.", router.back);
diff --git a/apps/cs/src/pages/contents/ui/modify-page.tsx b/apps/cs/src/pages/contents/ui/modify-page.tsx
index f27275840..8bf3b629d 100644
--- a/apps/cs/src/pages/contents/ui/modify-page.tsx
+++ b/apps/cs/src/pages/contents/ui/modify-page.tsx
@@ -1,19 +1,10 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
-import { ENDPOINT } from "@/shared/config";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
-import {
-  CONTENTS_APPROVE_STATUS,
-  ContentsApi,
-  contentsFormSchema,
-  type ContentsFormData,
-} from "@/entities/content";
-import { ContentsForm } from "./contents-form";
 import {
   Select,
   SelectTrigger,
@@ -22,6 +13,15 @@ import {
   SelectItem,
   Button,
 } from "@common/components";
+import {
+  CONTENTS_APPROVE_STATUS,
+  ContentsApi,
+  contentsFormSchema,
+  type ContentsFormData,
+} from "@/entities/content";
+import { ENDPOINT } from "@/shared/config";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import { ContentsForm } from "./contents-form";
 
 function ModifyPage({ sequential }: { sequential: string }) {
   const { confirm } = useConfirm();
@@ -47,7 +47,7 @@ function ModifyPage({ sequential }: { sequential: string }) {
     enabled: !!contsVer,
   });
 
-  const { mutateAsync: createContents } = useMutation({
+  const { mutateAsync: createContents } = useMutationWrapper({
     mutationFn: (data: ContentsFormData) => ContentsApi.createContents(data),
     onSuccess: () => {
       setContsVer(0);
@@ -58,7 +58,7 @@ function ModifyPage({ sequential }: { sequential: string }) {
     },
   });
 
-  const { mutateAsync: updateContents } = useMutation({
+  const { mutateAsync: updateContents } = useMutationWrapper({
     mutationFn: (data: ContentsFormData) =>
       ContentsApi.updateContents(contsSn, contsVer, data),
     onSuccess: () => {
@@ -66,7 +66,7 @@ function ModifyPage({ sequential }: { sequential: string }) {
     },
   });
 
-  const { mutateAsync: deleteContents } = useMutation({
+  const { mutateAsync: deleteContents } = useMutationWrapper({
     mutationFn: () => ContentsApi.deleteContents(contsSn, contsVer),
     onSuccess: () => {
       setContsVer(0);
@@ -77,7 +77,7 @@ function ModifyPage({ sequential }: { sequential: string }) {
     },
   });
 
-  const { mutateAsync: requestApprove } = useMutation({
+  const { mutateAsync: requestApprove } = useMutationWrapper({
     mutationFn: () => ContentsApi.requestApprove(contsSn, contsVer),
     onSuccess: () => {
       alert("승인 요청이 완료되었습니다.");
@@ -87,7 +87,7 @@ function ModifyPage({ sequential }: { sequential: string }) {
     },
   });
 
-  const { mutateAsync: approveContents } = useMutation({
+  const { mutateAsync: approveContents } = useMutationWrapper({
     mutationFn: () => ContentsApi.approveContents(contsSn, contsVer),
     onSuccess: () => {
       alert("승인되었습니다.");
diff --git a/apps/cs/src/pages/file/ui/file-page.tsx b/apps/cs/src/pages/file/ui/file-page.tsx
index 0279d9653..9b58b3828 100644
--- a/apps/cs/src/pages/file/ui/file-page.tsx
+++ b/apps/cs/src/pages/file/ui/file-page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { keepPreviousData, useMutation, useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import {
   getCoreRowModel,
   useReactTable,
@@ -10,7 +10,7 @@ import {
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { Button, DataTable, Input, Label } from "@common/components";
 import { AttachmentApi, type AttachmentParams } from "@/entities/attachment";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
 import { createColumns } from "../model/table-columns";
 
@@ -38,7 +38,7 @@ function FilePage() {
     enabled: false,
   });
 
-  const { mutate: deleteAttachment } = useMutation({
+  const { mutate: deleteAttachment } = useMutationWrapper({
     mutationFn: (atflId: string) =>
       AttachmentApi.deleteAttachmentByAtflId(atflId),
     onSuccess: () => {
diff --git a/apps/cs/src/pages/image/ui/create-page.tsx b/apps/cs/src/pages/image/ui/create-page.tsx
index 879e012ae..e7dda81d5 100644
--- a/apps/cs/src/pages/image/ui/create-page.tsx
+++ b/apps/cs/src/pages/image/ui/create-page.tsx
@@ -3,8 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation } from "@tanstack/react-query";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { imageFormSchema, type ImageFormData } from "../model/image-interface";
 import { ImageApi } from "../api/image-service";
 import { ImageForm } from "./image-form";
@@ -13,7 +12,7 @@ function CreatePage() {
   const router = useRouter();
   const alert = useAlertStore((state) => state.setMessage);
 
-  const { mutateAsync: createImage } = useMutation({
+  const { mutateAsync: createImage } = useMutationWrapper({
     mutationFn: (data: ImageFormData) => ImageApi.createImage(data),
     onSuccess: () => {
       alert("등록되었습니다.", router.back);
diff --git a/apps/cs/src/pages/image/ui/modify-page.tsx b/apps/cs/src/pages/image/ui/modify-page.tsx
index 1f6699975..e04787a9e 100644
--- a/apps/cs/src/pages/image/ui/modify-page.tsx
+++ b/apps/cs/src/pages/image/ui/modify-page.tsx
@@ -4,7 +4,7 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   getCoreRowModel,
   useReactTable,
@@ -13,7 +13,7 @@ import {
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { Button, DataTable } from "@common/components";
 import { PostingApi, type PostPayload } from "@/entities/posting";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
 import { imageFormSchema, type ImageFormData } from "../model/image-interface";
 import { columns } from "../model/posting-table-columns";
@@ -39,21 +39,21 @@ function ModifyPage({ sequential }: { sequential: string }) {
       PostingApi.getPostingHistory({ pstgTrgtNo: parseInt(sequential) }),
   });
 
-  const { mutateAsync: updateImage } = useMutation({
+  const { mutateAsync: updateImage } = useMutationWrapper({
     mutationFn: (data: ImageFormData) => ImageApi.updateImage(sequential, data),
     onSuccess: () => {
       alert("수정되었습니다.");
     },
   });
 
-  const { mutateAsync: deleteImage } = useMutation({
+  const { mutateAsync: deleteImage } = useMutationWrapper({
     mutationFn: () => ImageApi.deleteImage(sequential),
     onSuccess: () => {
       alert("삭제되었습니다.", router.back);
     },
   });
 
-  const { mutateAsync: savePosting } = useMutation({
+  const { mutateAsync: savePosting } = useMutationWrapper({
     mutationFn: (data: PostPayload[]) => PostingApi.savePosting(data),
     onSuccess: () => {
       queryClient.invalidateQueries({
diff --git a/apps/cs/src/pages/menu/ui/menu-node.tsx b/apps/cs/src/pages/menu/ui/menu-node.tsx
index f6bb7ee6e..5cda4f522 100644
--- a/apps/cs/src/pages/menu/ui/menu-node.tsx
+++ b/apps/cs/src/pages/menu/ui/menu-node.tsx
@@ -1,7 +1,8 @@
 import { useEffect, useState } from "react";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useQueryClient } from "@tanstack/react-query";
 import type { NodeModel, TreeMethods } from "@minoru/react-dnd-treeview";
 import { Button, cn } from "@common/components";
+import { useMutationWrapper } from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
 import { MenuApi } from "../api/menu-service";
 import type { TreeMenu } from "../model/menu-interface";
@@ -33,7 +34,7 @@ function MenuNode({
 
   const queryClient = useQueryClient();
 
-  const { mutateAsync: updateMenuName } = useMutation({
+  const { mutateAsync: updateMenuName } = useMutationWrapper({
     mutationFn: (nodeName: string) => {
       const encodedName = encodeURIComponent(nodeName);
       return MenuApi.updateMenuName(id as number, encodedName);
diff --git a/apps/cs/src/pages/menu/ui/menu-page.tsx b/apps/cs/src/pages/menu/ui/menu-page.tsx
index d66113a64..6ff6f89bc 100644
--- a/apps/cs/src/pages/menu/ui/menu-page.tsx
+++ b/apps/cs/src/pages/menu/ui/menu-page.tsx
@@ -5,7 +5,7 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { NodeModel } from "@minoru/react-dnd-treeview";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   Button,
   Select,
@@ -16,7 +16,7 @@ import {
 } from "@common/components";
 import { SiteApi } from "@/entities/site";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import type { TreeMenu } from "../model/menu-interface";
 import { MenuApi } from "../api/menu-service";
 import {
@@ -68,7 +68,7 @@ function MenuPage() {
       })),
   });
 
-  const { mutateAsync: createMenu } = useMutation({
+  const { mutateAsync: createMenu } = useMutationWrapper({
     mutationFn: (data: MenuFormData) => MenuApi.createMenu(data),
     onSuccess: () => {
       alert("저장되었습니다.");
@@ -78,7 +78,7 @@ function MenuPage() {
     },
   });
 
-  const { mutate: updateMenu } = useMutation({
+  const { mutate: updateMenu } = useMutationWrapper({
     mutationFn: ({
       menuCd,
       data,
@@ -94,7 +94,7 @@ function MenuPage() {
     },
   });
 
-  const { mutate: deleteMenu } = useMutation({
+  const { mutate: deleteMenu } = useMutationWrapper({
     mutationFn: (menuCd: number) => MenuApi.deleteMenu(menuCd),
     onSuccess: () => {
       alert("삭제되었습니다.");
diff --git a/apps/cs/src/pages/menu/ui/menu-tree.tsx b/apps/cs/src/pages/menu/ui/menu-tree.tsx
index 0a926a27b..a1fa4dacb 100644
--- a/apps/cs/src/pages/menu/ui/menu-tree.tsx
+++ b/apps/cs/src/pages/menu/ui/menu-tree.tsx
@@ -2,7 +2,7 @@
 
 import { useRef } from "react";
 import type { UseFormReturn } from "react-hook-form";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useQueryClient } from "@tanstack/react-query";
 import {
   Tree,
   type NodeModel,
@@ -10,6 +10,7 @@ import {
 } from "@minoru/react-dnd-treeview";
 import { Button } from "@common/components";
 import { ENDPOINT } from "@/shared/config";
+import { useMutationWrapper } from "@/shared/lib";
 import { MenuApi } from "../api/menu-service";
 import type { MenuFormData, TreeMenu, TreeNode } from "../model/menu-interface";
 import { handleDropNode, handleSelectNode } from "../lib/utils";
@@ -38,7 +39,7 @@ function MenuTree({
   const queryClient = useQueryClient();
   const treeMethods = useRef<TreeMethods>(null);
 
-  const { mutate: updateTreeMenu } = useMutation({
+  const { mutate: updateTreeMenu } = useMutationWrapper({
     mutationFn: (newTree: TreeNode) =>
       MenuApi.updateTreeMenu(siteId, [newTree]),
     onSuccess: () => {
diff --git a/apps/cs/src/pages/module/ui/create-page.tsx b/apps/cs/src/pages/module/ui/create-page.tsx
index 6bf2dd331..59884c19d 100644
--- a/apps/cs/src/pages/module/ui/create-page.tsx
+++ b/apps/cs/src/pages/module/ui/create-page.tsx
@@ -3,8 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation } from "@tanstack/react-query";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import {
   AuthorizationsApi,
   authorizationFormSchema,
@@ -16,7 +15,7 @@ function CreatePage() {
   const router = useRouter();
   const alert = useAlertStore((state) => state.setMessage);
 
-  const { mutateAsync: createAuthorization } = useMutation({
+  const { mutateAsync: createAuthorization } = useMutationWrapper({
     mutationFn: (data: AuthorizationFormData) =>
       AuthorizationsApi.createAuthorization(data),
     onSuccess: () => {
diff --git a/apps/cs/src/pages/module/ui/management-authority-dialog.tsx b/apps/cs/src/pages/module/ui/management-authority-dialog.tsx
index af429abf7..8ca38a570 100644
--- a/apps/cs/src/pages/module/ui/management-authority-dialog.tsx
+++ b/apps/cs/src/pages/module/ui/management-authority-dialog.tsx
@@ -1,7 +1,7 @@
 import { useState, memo } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import {
   getCoreRowModel,
   useReactTable,
@@ -25,14 +25,14 @@ import {
   TableHeader,
   TableRow,
 } from "@common/components";
-import { ENDPOINT } from "@/shared/config";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
 import {
   RoleAuthorizationsApi,
   roleAuthorizationsFormSchema,
   type RoleAuthorizationsFormData,
   type RoleAuthorizationsData,
 } from "@/entities/role-authorization";
+import { ENDPOINT } from "@/shared/config";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { createColumns } from "../model/role-authorizations-table-columns";
 import type { Authorizations } from "@/entities/authorization";
 
@@ -56,7 +56,7 @@ const ManagementAuthorityDialog = memo(
       enabled: !!authorizationNo && isOpened,
     });
 
-    const { mutateAsync: saveRoleAuthorization } = useMutation({
+    const { mutateAsync: saveRoleAuthorization } = useMutationWrapper({
       mutationFn: (data: RoleAuthorizationsData) =>
         RoleAuthorizationsApi.createRoleAuthorizations(data),
       onSuccess: () => {
diff --git a/apps/cs/src/pages/module/ui/modify-page.tsx b/apps/cs/src/pages/module/ui/modify-page.tsx
index 3ca2166d3..e26dfca4b 100644
--- a/apps/cs/src/pages/module/ui/modify-page.tsx
+++ b/apps/cs/src/pages/module/ui/modify-page.tsx
@@ -2,8 +2,8 @@
 
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQuery } from "@tanstack/react-query";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { useQuery } from "@tanstack/react-query";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
 import {
   AuthorizationsApi,
@@ -20,7 +20,7 @@ function ModifyPage({ sequential }: { sequential: string }) {
     queryFn: () => AuthorizationsApi.getAuthorizationInfo(sequential),
   });
 
-  const { mutateAsync: updateAuthorization } = useMutation({
+  const { mutateAsync: updateAuthorization } = useMutationWrapper({
     mutationFn: (data: AuthorizationFormData) =>
       AuthorizationsApi.updateAuthorization(sequential, data),
     onSuccess: () => {
diff --git a/apps/cs/src/pages/organization/ui/organization-page.tsx b/apps/cs/src/pages/organization/ui/organization-page.tsx
index 083d185f6..d07477630 100644
--- a/apps/cs/src/pages/organization/ui/organization-page.tsx
+++ b/apps/cs/src/pages/organization/ui/organization-page.tsx
@@ -5,7 +5,7 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { NodeModel } from "@minoru/react-dnd-treeview";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Button } from "@common/components";
 import { DndTree, EditableNode } from "@/widgets/dnd-tree";
 import {
@@ -18,7 +18,7 @@ import {
   type OrganizationTreeForDnd,
 } from "@/entities/organization";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { OrganizationForm } from "./organization-form";
 import { UserOrganizationSection } from "./user-organization-section";
 
@@ -48,7 +48,7 @@ function OrganizationPage() {
     enabled: !!selectedOrganization?.ognzSn,
   });
 
-  const { mutateAsync: createOrganization } = useMutation({
+  const { mutateAsync: createOrganization } = useMutationWrapper({
     mutationFn: (form: OrganizationFormData) =>
       OrganizationApi.createOrganization(form),
     onSuccess: () => {
@@ -59,7 +59,7 @@ function OrganizationPage() {
     },
   });
 
-  const { mutateAsync: deleteOrganization } = useMutation({
+  const { mutateAsync: deleteOrganization } = useMutationWrapper({
     mutationFn: (ognzSn: number) => OrganizationApi.deleteOrganization(ognzSn),
     onSuccess: () => {
       alert("삭제되었습니다.");
@@ -70,7 +70,7 @@ function OrganizationPage() {
     },
   });
 
-  const { mutateAsync: updateOrganizationName } = useMutation({
+  const { mutateAsync: updateOrganizationName } = useMutationWrapper({
     mutationFn: ({ ognzSn, name }: { ognzSn: number; name: string }) =>
       OrganizationApi.updateOrganizationName(ognzSn, name),
     onSuccess: () => {
@@ -81,7 +81,7 @@ function OrganizationPage() {
     },
   });
 
-  const { mutateAsync: updateOrganization } = useMutation({
+  const { mutateAsync: updateOrganization } = useMutationWrapper({
     mutationFn: ({
       ognzSn,
       data,
@@ -97,7 +97,7 @@ function OrganizationPage() {
     },
   });
 
-  const { mutateAsync: updateOrganizationByDnd } = useMutation({
+  const { mutateAsync: updateOrganizationByDnd } = useMutationWrapper({
     mutationFn: (data: OrganizationTreeForDnd) =>
       OrganizationApi.updateOrganizationByDnd([data]),
     onSuccess: () => {
diff --git a/apps/cs/src/pages/organization/ui/user-organization-section.tsx b/apps/cs/src/pages/organization/ui/user-organization-section.tsx
index 7bfd4826b..000af3c32 100644
--- a/apps/cs/src/pages/organization/ui/user-organization-section.tsx
+++ b/apps/cs/src/pages/organization/ui/user-organization-section.tsx
@@ -5,7 +5,6 @@ import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
   useQuery,
-  useMutation,
   useQueryClient,
   keepPreviousData,
 } from "@tanstack/react-query";
@@ -37,7 +36,7 @@ import {
 import { CodeApi, type ICode } from "@/entities/code";
 import type { OrganizationTree } from "@/entities/organization";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { AdditionalUserDialog } from "./additional-user-dialog";
 import { MoveOrganizationDialog } from "./move-organization-dialog";
 
@@ -73,7 +72,7 @@ function UserOrganizationSection({ ognzSn }: UserOrganizationSectionProps) {
     queryFn: () => CodeApi.getCode("JDGDCLCD"),
   });
 
-  const { mutate: saveUserOrganization } = useMutation({
+  const { mutate: saveUserOrganization } = useMutationWrapper({
     mutationFn: (data: UserOrganizationPayload[]) =>
       UserOrganizationApi.saveUserOrganization(data),
     onSuccess: () => {
@@ -84,7 +83,7 @@ function UserOrganizationSection({ ognzSn }: UserOrganizationSectionProps) {
     },
   });
 
-  const { mutate: moveUserOrganization } = useMutation({
+  const { mutate: moveUserOrganization } = useMutationWrapper({
     mutationFn: (data: MoveUserOrganizationPayload[]) =>
       UserOrganizationApi.moveUserOrganization(data),
     onSuccess: () => {
diff --git a/apps/cs/src/pages/popup/ui/create-page.tsx b/apps/cs/src/pages/popup/ui/create-page.tsx
index 668012d6e..5b428e0e1 100644
--- a/apps/cs/src/pages/popup/ui/create-page.tsx
+++ b/apps/cs/src/pages/popup/ui/create-page.tsx
@@ -3,9 +3,8 @@
 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
-import { useMutation } from "@tanstack/react-query";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useUserStore, useAlertStore } from "@/shared/lib";
+import { useUserStore, useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { popupFormSchema, type PopupFormData } from "../model/popup-interface";
 import { PopupApi } from "../api/popup-service";
 import { PopupForm } from "./popup-form";
@@ -15,7 +14,7 @@ function CreatePage() {
   const userInfo = useUserStore((state) => state.userInfo);
   const alert = useAlertStore((state) => state.setMessage);
 
-  const { mutateAsync: createPopup } = useMutation({
+  const { mutateAsync: createPopup } = useMutationWrapper({
     mutationFn: (data: PopupFormData) => PopupApi.createPopup(data),
     onSuccess: () => {
       alert("등록되었습니다.", router.back);
diff --git a/apps/cs/src/pages/popup/ui/modify-page.tsx b/apps/cs/src/pages/popup/ui/modify-page.tsx
index 9c2b518be..34bc2ae66 100644
--- a/apps/cs/src/pages/popup/ui/modify-page.tsx
+++ b/apps/cs/src/pages/popup/ui/modify-page.tsx
@@ -4,7 +4,7 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   getCoreRowModel,
   useReactTable,
@@ -14,7 +14,7 @@ import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { DataTable } from "@common/components";
 import { AuthorityButton } from "@/entities/menu-authority";
 import { PostingApi, type PostPayload } from "@/entities/posting";
-import { useAlertStore, useUserStore } from "@/shared/lib";
+import { useAlertStore, useUserStore, useMutationWrapper } from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
 import {
   popupUpdateFormSchema,
@@ -44,7 +44,7 @@ function ModifyPage({ popupSn }: { popupSn: number }) {
     queryFn: () => PostingApi.getPostingHistory({ pstgTrgtNo: popupSn }),
   });
 
-  const { mutateAsync: updatePopup } = useMutation({
+  const { mutateAsync: updatePopup } = useMutationWrapper({
     mutationFn: (data: PopupUpdateFormData) =>
       PopupApi.updatePopup(popupSn, data),
     onSuccess: () => {
@@ -52,7 +52,7 @@ function ModifyPage({ popupSn }: { popupSn: number }) {
     },
   });
 
-  const { mutateAsync: savePostingHistory } = useMutation({
+  const { mutateAsync: savePostingHistory } = useMutationWrapper({
     mutationFn: (data: PostPayload[]) => PostingApi.savePosting(data),
     onSuccess: () => {
       queryClient.invalidateQueries({
diff --git a/apps/cs/src/pages/recent/ui/recent-page.tsx b/apps/cs/src/pages/recent/ui/recent-page.tsx
index f76d82a22..3c25f5837 100644
--- a/apps/cs/src/pages/recent/ui/recent-page.tsx
+++ b/apps/cs/src/pages/recent/ui/recent-page.tsx
@@ -4,7 +4,7 @@ import dayjs from "dayjs";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
-import { keepPreviousData, useMutation, useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import {
   getCoreRowModel,
   useReactTable,
@@ -32,7 +32,7 @@ import {
 } from "@/entities/post";
 import { BoardApi } from "@/entities/board";
 import { AuthorityButton } from "@/entities/menu-authority";
-import { useAlertStore, usePrompt } from "@/shared/lib";
+import { useAlertStore, useMutationWrapper, usePrompt } from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
 import { columns } from "../model/table-columns";
 import { MovePostDialog } from "./move-post-dialog";
@@ -79,7 +79,7 @@ function RecentPage() {
     queryFn: () => BoardApi.getBoardList(),
   });
 
-  const { mutate: movePost } = useMutation({
+  const { mutate: movePost } = useMutationWrapper({
     mutationFn: (data: MovePost[]) => PostApi.movePost(data),
     onSuccess: () => {
       alert("이동이 완료되었습니다.", refetch);
diff --git a/apps/cs/src/pages/role/model/table-columns.tsx b/apps/cs/src/pages/role/model/table-columns.tsx
index 2e300b245..5ad18bc6f 100644
--- a/apps/cs/src/pages/role/model/table-columns.tsx
+++ b/apps/cs/src/pages/role/model/table-columns.tsx
@@ -41,6 +41,8 @@ export const columns: ColumnDef<Role>[] = [
 const MappingRoleButton = ({ roleId }: { roleId: string }) => {
   const [open, setOpen] = useState(false);
   return (
-    <MappingRoleDialog roleId={roleId} open={open} onOpenChange={setOpen} />
+    <div onClick={(e) => e.stopPropagation()}>
+      <MappingRoleDialog roleId={roleId} open={open} onOpenChange={setOpen} />
+    </div>
   );
 };
diff --git a/apps/cs/src/pages/role/ui/create-page.tsx b/apps/cs/src/pages/role/ui/create-page.tsx
index e37f63f6d..c19d2add5 100644
--- a/apps/cs/src/pages/role/ui/create-page.tsx
+++ b/apps/cs/src/pages/role/ui/create-page.tsx
@@ -3,8 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation } from "@tanstack/react-query";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { RoleForm } from "./role-form";
 import { RoleApi } from "../api/role-service";
 import { roleFormSchema, type RoleFormData } from "../model/role-interface";
@@ -13,7 +12,7 @@ function CreatePage() {
   const router = useRouter();
   const alert = useAlertStore((state) => state.setMessage);
 
-  const { mutateAsync: createRole } = useMutation({
+  const { mutateAsync: createRole } = useMutationWrapper({
     mutationFn: (data: RoleFormData) => RoleApi.createRole(data),
     onSuccess: () => {
       alert("등록되었습니다.", router.back);
diff --git a/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx b/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx
index b2da2bcee..e9a7555fd 100644
--- a/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx
+++ b/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx
@@ -3,7 +3,7 @@ import {
   useReactTable,
   type ColumnDef,
 } from "@tanstack/react-table";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   Dialog,
   DialogTrigger,
@@ -23,7 +23,7 @@ import {
   type RoleAuthorizationsData,
 } from "@/entities/role-authorization";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore } from "@/shared/lib";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 
 type MappingRoleDialogProps = {
   roleId: string;
@@ -46,7 +46,7 @@ function MappingRoleDialog({
     enabled: open,
   });
 
-  const { mutate, isPending } = useMutation({
+  const { mutate, isPending } = useMutationWrapper({
     mutationFn: (data: RoleAuthorizationsData) =>
       RoleAuthorizationsApi.createRoleAuthorizations(data),
     onSuccess: () => {
diff --git a/apps/cs/src/pages/role/ui/modify-page.tsx b/apps/cs/src/pages/role/ui/modify-page.tsx
index 9c57538d4..2a9cd6f19 100644
--- a/apps/cs/src/pages/role/ui/modify-page.tsx
+++ b/apps/cs/src/pages/role/ui/modify-page.tsx
@@ -3,12 +3,12 @@
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQuery } from "@tanstack/react-query";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { useQuery } from "@tanstack/react-query";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import { ENDPOINT } from "@/shared/config";
 import { RoleForm } from "./role-form";
 import { RoleApi } from "../api/role-service";
 import { roleFormSchema, type RoleFormData } from "../model/role-interface";
-import { ENDPOINT } from "@/shared/config";
 
 function ModifyPage({ roleId }: { roleId: string }) {
   const router = useRouter();
@@ -18,15 +18,14 @@ function ModifyPage({ roleId }: { roleId: string }) {
     queryKey: [ENDPOINT.USER_SERVICE.ROLES, roleId],
     queryFn: () => RoleApi.getRoleInfo(roleId),
   });
-
-  const { mutateAsync: updateRole } = useMutation({
+  const { mutateAsync: updateRole } = useMutationWrapper({
     mutationFn: (data: RoleFormData) => RoleApi.updateRole(roleId, data),
     onSuccess: () => {
       alert("수정되었습니다.", router.back);
     },
   });
 
-  const { mutateAsync: deleteRole } = useMutation({
+  const { mutateAsync: deleteRole } = useMutationWrapper({
     mutationFn: () => RoleApi.deleteRole(roleId),
     onSuccess: () => {
       alert("삭제되었습니다.", router.back);
diff --git a/apps/cs/src/pages/role/ui/role-form.tsx b/apps/cs/src/pages/role/ui/role-form.tsx
index e980bfbeb..0ee41fe65 100644
--- a/apps/cs/src/pages/role/ui/role-form.tsx
+++ b/apps/cs/src/pages/role/ui/role-form.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import type { UseFormReturn } from "react-hook-form";
 import {
   Button,
@@ -13,11 +14,9 @@ import {
 } from "@common/components";
 import { FormWrapper } from "@/widgets/form-wrapper";
 import { FormField, FormItem, FormControl } from "@/shared/ui/form";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { RoleApi } from "../api/role-service";
 import type { RoleFormData } from "../model/role-interface";
-import { useMutation } from "@tanstack/react-query";
-import { useAlertStore } from "@/shared/lib";
-import { useState } from "react";
 
 type RoleFormProps = {
   roleId?: string;
@@ -31,7 +30,7 @@ function RoleForm({ roleId, form, ...props }: RoleFormProps) {
 
   const [isValidRoleId, setIsValidRoleId] = useState(false);
 
-  const { mutateAsync: checkDuplicateRoleId } = useMutation({
+  const { mutateAsync: checkDuplicateRoleId } = useMutationWrapper({
     mutationFn: (roleId: string) => RoleApi.checkDuplicateRoleId(roleId),
     onSuccess: (duplicate) => {
       if (!duplicate) {
diff --git a/apps/cs/src/pages/schedule/ui/create-page.tsx b/apps/cs/src/pages/schedule/ui/create-page.tsx
index 656daccea..6222249bc 100644
--- a/apps/cs/src/pages/schedule/ui/create-page.tsx
+++ b/apps/cs/src/pages/schedule/ui/create-page.tsx
@@ -3,10 +3,9 @@
 import dayjs from "dayjs";
 import { useForm } from "react-hook-form";
 import { useRouter, useSearchParams } from "next/navigation";
-import { useMutation } from "@tanstack/react-query";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useAlertStore } from "@/shared/lib";
 import { SITE_ID } from "@/shared/config";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import {
   scheduleFormSchema,
   type ScheduleFormData,
@@ -21,7 +20,7 @@ function CreatePage() {
   const dateStr = searchParams?.get("dateStr");
   const alert = useAlertStore((state) => state.setMessage);
 
-  const { mutateAsync: createSchedule } = useMutation({
+  const { mutateAsync: createSchedule } = useMutationWrapper({
     mutationFn: ScheduleApi.createSchedule,
     onSuccess: () => {
       alert("일정이 등록되었습니다.", router.back);
diff --git a/apps/cs/src/pages/schedule/ui/modify-page.tsx b/apps/cs/src/pages/schedule/ui/modify-page.tsx
index eed7c5367..e8f55534b 100644
--- a/apps/cs/src/pages/schedule/ui/modify-page.tsx
+++ b/apps/cs/src/pages/schedule/ui/modify-page.tsx
@@ -2,10 +2,10 @@
 
 import { useForm } from "react-hook-form";
 import { useRouter } from "next/navigation";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useAlertStore } from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import {
   scheduleUpdateFormSchema,
   type ScheduleUpdateFormData,
@@ -24,7 +24,7 @@ function ModifyPage({ schdlSn }: { schdlSn: string }) {
     queryFn: () => ScheduleApi.getScheduleInfo(parseInt(schdlSn)),
   });
 
-  const { mutateAsync: updateSchedule } = useMutation({
+  const { mutateAsync: updateSchedule } = useMutationWrapper({
     mutationFn: (data: ScheduleUpdateFormData) =>
       ScheduleApi.updateSchedule(parseInt(schdlSn), data),
     onSuccess: () => {
diff --git a/apps/cs/src/pages/site/ui/create-page.tsx b/apps/cs/src/pages/site/ui/create-page.tsx
index 17f7a3dd5..070d53a27 100644
--- a/apps/cs/src/pages/site/ui/create-page.tsx
+++ b/apps/cs/src/pages/site/ui/create-page.tsx
@@ -2,16 +2,15 @@
 
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
-import { useMutation } from "@tanstack/react-query";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { SiteApi, siteFormSchema, type SiteFormData } from "@/entities/site";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { SiteForm } from "./site-form";
 
 function CreatePage() {
   const router = useRouter();
   const alert = useAlertStore((state) => state.setMessage);
-  const { mutateAsync: createSite } = useMutation({
+  const { mutateAsync: createSite } = useMutationWrapper({
     mutationFn: (data: SiteFormData) => SiteApi.createSite(data),
     onSuccess: () => {
       alert("등록되었습니다.", router.back);
diff --git a/apps/cs/src/pages/site/ui/domain-management-dialog.tsx b/apps/cs/src/pages/site/ui/domain-management-dialog.tsx
index 83decdbba..f6a2e67fb 100644
--- a/apps/cs/src/pages/site/ui/domain-management-dialog.tsx
+++ b/apps/cs/src/pages/site/ui/domain-management-dialog.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { useForm, useFieldArray } from "react-hook-form";
@@ -26,13 +26,13 @@ import {
 } from "@common/components";
 import { Form, FormControl, FormField, FormItem } from "@/shared/ui/form";
 import { ENDPOINT } from "@/shared/config";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { DomainApi } from "../api/domain-service";
 import {
   domainFormSchema,
   type Domain,
   type DomainFormData,
 } from "../model/domain-interface";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
 
 type DomainManagementDialogProps = {
   siteId: string;
@@ -63,7 +63,7 @@ function DomainManagementDialog({
     },
   });
 
-  const { mutateAsync } = useMutation({
+  const { mutateAsync } = useMutationWrapper({
     mutationFn: (body: Domain[]) => DomainApi.saveDomainList(body),
   });
 
diff --git a/apps/cs/src/pages/site/ui/ip-management-dialog.tsx b/apps/cs/src/pages/site/ui/ip-management-dialog.tsx
index 9bb7459db..df682f06f 100644
--- a/apps/cs/src/pages/site/ui/ip-management-dialog.tsx
+++ b/apps/cs/src/pages/site/ui/ip-management-dialog.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { useForm, useFieldArray } from "react-hook-form";
@@ -24,11 +24,11 @@ import {
   Checkbox,
   Label,
 } from "@common/components";
-import { Form, FormControl, FormField, FormItem } from "@/shared/ui/form";
 import { ENDPOINT } from "@/shared/config";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import { Form, FormControl, FormField, FormItem } from "@/shared/ui/form";
 import { IpApi } from "../api/ip-service";
 import { ipFormSchema, type IP, type IPFormData } from "../model/ip-interface";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
 
 type IPManagementDialogProps = {
   siteId: string;
@@ -59,7 +59,7 @@ function IPManagementDialog({
     },
   });
 
-  const { mutateAsync } = useMutation({
+  const { mutateAsync } = useMutationWrapper({
     mutationFn: (body: IP[]) => IpApi.saveIpList(body),
   });
 
diff --git a/apps/cs/src/pages/site/ui/modify-page.tsx b/apps/cs/src/pages/site/ui/modify-page.tsx
index ae5503313..5f162d368 100644
--- a/apps/cs/src/pages/site/ui/modify-page.tsx
+++ b/apps/cs/src/pages/site/ui/modify-page.tsx
@@ -3,10 +3,10 @@
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { SiteApi, siteFormSchema, type SiteFormData } from "@/entities/site";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
 import { SiteForm } from "./site-form";
 
 function ModifyPage({ siteId }: { siteId: string }) {
@@ -31,7 +31,7 @@ function ModifyPage({ siteId }: { siteId: string }) {
     enabled: !!siteId,
   });
 
-  const { mutateAsync: updateSite } = useMutation({
+  const { mutateAsync: updateSite } = useMutationWrapper({
     mutationFn: (data: SiteFormData) => SiteApi.updateSite(siteId, data),
     onSuccess: () => {
       alert("수정되었습니다.", () => {
@@ -42,7 +42,7 @@ function ModifyPage({ siteId }: { siteId: string }) {
     },
   });
 
-  const { mutateAsync: deleteSite } = useMutation({
+  const { mutateAsync: deleteSite } = useMutationWrapper({
     mutationFn: () => SiteApi.deleteSite(siteId),
     onSuccess: () => {
       alert("삭제되었습니다.", router.back);
diff --git a/apps/cs/src/pages/survey/ui/article-management-dialog.tsx b/apps/cs/src/pages/survey/ui/article-management-dialog.tsx
index 1e6977e98..38225d092 100644
--- a/apps/cs/src/pages/survey/ui/article-management-dialog.tsx
+++ b/apps/cs/src/pages/survey/ui/article-management-dialog.tsx
@@ -3,7 +3,7 @@ import { useState } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm, useFieldArray } from "react-hook-form";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   Dialog,
   DialogTrigger,
@@ -22,11 +22,11 @@ import {
   DialogClose,
   Checkbox,
 } from "@common/components";
-import { Form, FormControl, FormField, FormItem } from "@/shared/ui/form";
 import { ENDPOINT } from "@/shared/config";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import { Form, FormControl, FormField, FormItem } from "@/shared/ui/form";
 import { SurveyApi } from "../api/survey-service";
 import { articleSchema, type Article } from "../model/survey-interface";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
 
 type ArticleFormData = {
   articles: Article[];
@@ -60,7 +60,7 @@ function ArticleManagementDialog({
     enabled: !!srvyQitemNo && !!open,
   });
 
-  const { mutateAsync } = useMutation({
+  const { mutateAsync } = useMutationWrapper({
     mutationFn: (body: Article[]) => SurveyApi.saveArticleList(body),
     onSuccess: () => {
       queryClient.invalidateQueries({
diff --git a/apps/cs/src/pages/survey/ui/create-page.tsx b/apps/cs/src/pages/survey/ui/create-page.tsx
index a3c3fc217..867c2d749 100644
--- a/apps/cs/src/pages/survey/ui/create-page.tsx
+++ b/apps/cs/src/pages/survey/ui/create-page.tsx
@@ -2,9 +2,8 @@
 
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
-import { useMutation } from "@tanstack/react-query";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useAlertStore } from "@/shared/lib";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import {
   surveyFormSchema,
   type SurveyFormData,
@@ -16,7 +15,7 @@ function CreatePage() {
   const router = useRouter();
   const alert = useAlertStore((state) => state.setMessage);
 
-  const { mutateAsync: createSurvey } = useMutation({
+  const { mutateAsync: createSurvey } = useMutationWrapper({
     mutationFn: (data: SurveyFormData) => SurveyApi.createSurvey(data),
     onSuccess: () => {
       alert("등록되었습니다.", router.back);
diff --git a/apps/cs/src/pages/survey/ui/detail-page.tsx b/apps/cs/src/pages/survey/ui/detail-page.tsx
index e610ce432..464a49f35 100644
--- a/apps/cs/src/pages/survey/ui/detail-page.tsx
+++ b/apps/cs/src/pages/survey/ui/detail-page.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { usePathname, useRouter } from "next/navigation";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   getCoreRowModel,
   useReactTable,
@@ -12,7 +12,7 @@ import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { Button, DataTable } from "@common/components";
 import { PostingApi, type PostPayload } from "@/entities/posting";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore } from "@/shared/lib";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { SurveyApi } from "../api/survey-service";
 import { columns as postingColumns } from "../model/posting-table-columns";
 import { columns as questionColumns } from "../model/question-table-columns";
@@ -44,7 +44,7 @@ function DetailPage({ srvySn }: { srvySn: string }) {
     queryFn: () => SurveyApi.getQuestionList({ srvySn: parseInt(srvySn) }),
   });
 
-  const { mutateAsync: savePostingHistory } = useMutation({
+  const { mutateAsync: savePostingHistory } = useMutationWrapper({
     mutationFn: (data: PostPayload[]) => PostingApi.savePosting(data),
     onSuccess: () => {
       queryClient.invalidateQueries({
diff --git a/apps/cs/src/pages/survey/ui/modify-page.tsx b/apps/cs/src/pages/survey/ui/modify-page.tsx
index d9321b030..d5a6cd964 100644
--- a/apps/cs/src/pages/survey/ui/modify-page.tsx
+++ b/apps/cs/src/pages/survey/ui/modify-page.tsx
@@ -3,8 +3,8 @@
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQuery } from "@tanstack/react-query";
-import { useAlertStore } from "@/shared/lib";
+import { useQuery } from "@tanstack/react-query";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
 import {
   surveyFormSchema,
@@ -23,7 +23,7 @@ function ModifyPage({ srvySn }: { srvySn: string }) {
     enabled: !!srvySn,
   });
 
-  const { mutateAsync: updateSurvey } = useMutation({
+  const { mutateAsync: updateSurvey } = useMutationWrapper({
     mutationFn: (data: SurveyFormData) =>
       SurveyApi.updateSurvey(parseInt(srvySn), data),
     onSuccess: () => {
diff --git a/apps/cs/src/pages/survey/ui/question-add-dialog.tsx b/apps/cs/src/pages/survey/ui/question-add-dialog.tsx
index 3d5436c18..643e788af 100644
--- a/apps/cs/src/pages/survey/ui/question-add-dialog.tsx
+++ b/apps/cs/src/pages/survey/ui/question-add-dialog.tsx
@@ -1,6 +1,6 @@
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useQueryClient } from "@tanstack/react-query";
 import {
   Button,
   Dialog,
@@ -11,7 +11,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@common/components";
-import { useAlertStore } from "@/shared/lib";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import {
   questionFormSchema,
   type QuestionFormData,
@@ -35,7 +35,7 @@ function QuestionAddDialog({
   const queryClient = useQueryClient();
   const alert = useAlertStore((state) => state.setMessage);
 
-  const { mutateAsync: createQuestion } = useMutation({
+  const { mutateAsync: createQuestion } = useMutationWrapper({
     mutationFn: (data: QuestionFormData) =>
       SurveyApi.createQuestion({ ...data, srvySn }),
     onSuccess: () => {
diff --git a/apps/cs/src/pages/survey/ui/question-edit-dialog.tsx b/apps/cs/src/pages/survey/ui/question-edit-dialog.tsx
index 2ebd82e0d..6d722f738 100644
--- a/apps/cs/src/pages/survey/ui/question-edit-dialog.tsx
+++ b/apps/cs/src/pages/survey/ui/question-edit-dialog.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   Button,
   Dialog,
@@ -13,7 +13,7 @@ import {
   DialogTrigger,
 } from "@common/components";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore } from "@/shared/lib";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import {
   questionFormSchema,
   type QuestionTypeCode,
@@ -43,7 +43,7 @@ function QuestionEditDialog({
     enabled: open,
   });
 
-  const { mutateAsync: updateQuestion } = useMutation({
+  const { mutateAsync: updateQuestion } = useMutationWrapper({
     mutationFn: (data: QuestionFormData) =>
       SurveyApi.updateQuestion(srvyQitemNo, data),
     onSuccess: () => {
diff --git a/apps/cs/src/pages/survey/ui/user-survey-article.tsx b/apps/cs/src/pages/survey/ui/user-survey-article.tsx
index f0e76ca42..77644b944 100644
--- a/apps/cs/src/pages/survey/ui/user-survey-article.tsx
+++ b/apps/cs/src/pages/survey/ui/user-survey-article.tsx
@@ -9,7 +9,7 @@ import {
   type UseFormReturn,
 } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import {
   cn,
   Button,
@@ -21,8 +21,8 @@ import {
   Textarea,
 } from "@common/components";
 import { CodeSelect } from "@/entities/code";
-import { useAlertStore } from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { Form, FormControl, FormField, FormItem } from "@/shared/ui/form";
 import { SurveyApi } from "../api/survey-service";
 import {
@@ -41,7 +41,7 @@ function UserSurveyArticle({ srvySn }: { srvySn: string }) {
     queryFn: () => SurveyApi.getUserSurvey(parseInt(srvySn)),
   });
 
-  const { mutate: saveUserSurvey } = useMutation({
+  const { mutate: saveUserSurvey } = useMutationWrapper({
     mutationFn: (data: UserSurveyFormData) => SurveyApi.saveUserSurvey(data),
     onSuccess: () => {
       alert("설문이 제출되었습니다.", window.close);
diff --git a/apps/cs/src/pages/template/ui/create-page.tsx b/apps/cs/src/pages/template/ui/create-page.tsx
index 8d89a1ec3..1bfa224c4 100644
--- a/apps/cs/src/pages/template/ui/create-page.tsx
+++ b/apps/cs/src/pages/template/ui/create-page.tsx
@@ -2,21 +2,20 @@
 
 import { useForm } from "react-hook-form";
 import { useRouter } from "next/navigation";
-import { useMutation } from "@tanstack/react-query";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { TemplateApi } from "../api/template-service";
 import {
   templateFormSchema,
   type TemplateFormData,
 } from "../model/template-interface";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
 import { TemplateForm } from "./template-form";
 
 function CreatePage() {
   const router = useRouter();
   const alert = useAlertStore((state) => state.setMessage);
 
-  const { mutateAsync: createTemplate } = useMutation({
+  const { mutateAsync: createTemplate } = useMutationWrapper({
     mutationFn: (data: TemplateFormData) => TemplateApi.createTemplate(data),
     onSuccess: () => {
       alert("등록되었습니다.", router.back);
diff --git a/apps/cs/src/pages/template/ui/modify-page.tsx b/apps/cs/src/pages/template/ui/modify-page.tsx
index 135ebb851..7d5c80151 100644
--- a/apps/cs/src/pages/template/ui/modify-page.tsx
+++ b/apps/cs/src/pages/template/ui/modify-page.tsx
@@ -2,10 +2,10 @@
 
 import { useForm } from "react-hook-form";
 import { useRouter } from "next/navigation";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import {
   templateFormSchema,
   type TemplateFormData,
@@ -22,7 +22,7 @@ function ModifyPage({ sequential }: { sequential: string }) {
     queryFn: () => TemplateApi.getTemplateInfo(sequential),
   });
 
-  const { mutateAsync: updateTemplate } = useMutation({
+  const { mutateAsync: updateTemplate } = useMutationWrapper({
     mutationFn: (data: TemplateFormData) =>
       TemplateApi.updateTemplate(sequential, data),
     onSuccess: () => {
@@ -30,7 +30,7 @@ function ModifyPage({ sequential }: { sequential: string }) {
     },
   });
 
-  const { mutateAsync: deleteTemplate } = useMutation({
+  const { mutateAsync: deleteTemplate } = useMutationWrapper({
     mutationFn: () => TemplateApi.deleteTemplate(sequential),
     onSuccess: () => {
       alert("삭제되었습니다.", router.back);
diff --git a/apps/cs/src/pages/terms/ui/create-page.tsx b/apps/cs/src/pages/terms/ui/create-page.tsx
index ea6f04fb9..5a80e0eac 100644
--- a/apps/cs/src/pages/terms/ui/create-page.tsx
+++ b/apps/cs/src/pages/terms/ui/create-page.tsx
@@ -2,18 +2,17 @@
 
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
-import { useMutation } from "@tanstack/react-query";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { TermsApi } from "../api/terms-service";
 import { termsFormSchema, type TermsFormData } from "../model/terms-interface";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
 import { TermsForm } from "./terms-form";
 
 function CreatePage() {
   const router = useRouter();
   const alert = useAlertStore((state) => state.setMessage);
 
-  const { mutateAsync: createTerms } = useMutation({
+  const { mutateAsync: createTerms } = useMutationWrapper({
     mutationFn: (data: TermsFormData) => TermsApi.createTerms(data),
     onSuccess: () => {
       alert("등록되었습니다.", router.back);
diff --git a/apps/cs/src/pages/terms/ui/modify-page.tsx b/apps/cs/src/pages/terms/ui/modify-page.tsx
index 8e137d3b7..a13bd5787 100644
--- a/apps/cs/src/pages/terms/ui/modify-page.tsx
+++ b/apps/cs/src/pages/terms/ui/modify-page.tsx
@@ -2,10 +2,10 @@
 
 import { useForm } from "react-hook-form";
 import { useRouter } from "next/navigation";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { termsFormSchema, type TermsFormData } from "../model/terms-interface";
 import { TermsApi } from "../api/terms-service";
 import { TermsForm } from "./terms-form";
@@ -19,14 +19,14 @@ function ModifyPage({ sequential }: { sequential: string }) {
     queryFn: () => TermsApi.getTermsInfo(sequential),
   });
 
-  const { mutateAsync: updateTerms } = useMutation({
+  const { mutateAsync: updateTerms } = useMutationWrapper({
     mutationFn: (data: TermsFormData) => TermsApi.updateTerms(sequential, data),
     onSuccess: () => {
       alert("수정되었습니다.");
     },
   });
 
-  const { mutateAsync: deleteTerms } = useMutation({
+  const { mutateAsync: deleteTerms } = useMutationWrapper({
     mutationFn: () => TermsApi.deleteTerms(sequential),
     onSuccess: () => {
       alert("삭제되었습니다.", router.back);
diff --git a/apps/cs/src/shared/lib/index.ts b/apps/cs/src/shared/lib/index.ts
index 42ec7d509..34c8ae6ff 100644
--- a/apps/cs/src/shared/lib/index.ts
+++ b/apps/cs/src/shared/lib/index.ts
@@ -1,4 +1,5 @@
 export { getCookie, setCookie, removeCookie } from "./cookie";
+export { useMutationWrapper } from "./use-mutation-wrapper";
 export { useAlertStore } from "./use-alert-store";
 export { useMenuStore } from "./use-menu-store";
 export { useUserStore } from "./use-user-store";
diff --git a/apps/cs/src/shared/lib/use-mutation-wrapper.tsx b/apps/cs/src/shared/lib/use-mutation-wrapper.tsx
new file mode 100644
index 000000000..171517845
--- /dev/null
+++ b/apps/cs/src/shared/lib/use-mutation-wrapper.tsx
@@ -0,0 +1,30 @@
+import { AxiosError } from "axios";
+import { useMutation, type UseMutationOptions } from "@tanstack/react-query";
+import { useAlertStore } from "./use-alert-store";
+
+export const useMutationWrapper = <
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown,
+>(
+  mutationOptions: UseMutationOptions<TData, TError, TVariables, TContext>,
+) => {
+  const alert = useAlertStore((state) => state.setMessage);
+  return useMutation({
+    ...mutationOptions,
+    onError: (error) => {
+      let errorMessage = "";
+
+      if (error instanceof AxiosError) {
+        if (error.response?.status) errorMessage += `status: ${error.status}\n`;
+        if (error.response?.data.message)
+          errorMessage += `${error.response?.data.message}\n`;
+        if (error.response?.data.errors[0].message)
+          errorMessage += `${error.response?.data.errors[0].message}\n`;
+      }
+
+      alert(`[Error] ${errorMessage}`);
+    },
+  });
+};
diff --git a/apps/cs/src/widgets/post/ui/post-comment.tsx b/apps/cs/src/widgets/post/ui/post-comment.tsx
index df05afb9b..53ad247f3 100644
--- a/apps/cs/src/widgets/post/ui/post-comment.tsx
+++ b/apps/cs/src/widgets/post/ui/post-comment.tsx
@@ -3,7 +3,7 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Button, Input, Textarea } from "@common/components";
 import {
   CommentApi,
@@ -12,7 +12,12 @@ import {
   type CommentUpdateFormData,
 } from "@/entities/comment";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore, usePrompt, useUserStore } from "@/shared/lib";
+import {
+  useAlertStore,
+  useMutationWrapper,
+  usePrompt,
+  useUserStore,
+} from "@/shared/lib";
 import { Form, FormControl, FormField, FormItem } from "@/shared/ui/form";
 
 function PostComment({ bbsId, pstNo }: { bbsId: number; pstNo: number }) {
@@ -30,7 +35,7 @@ function PostComment({ bbsId, pstNo }: { bbsId: number; pstNo: number }) {
     enabled: !!pstNo,
   });
 
-  const { mutate: createComment } = useMutation({
+  const { mutate: createComment } = useMutationWrapper({
     mutationFn: (data: CommentFormData) => CommentApi.createComment(data),
     onSuccess: () => {
       alert("등록되었습니다.");
@@ -41,7 +46,7 @@ function PostComment({ bbsId, pstNo }: { bbsId: number; pstNo: number }) {
     },
   });
 
-  const { mutate: updateComment } = useMutation({
+  const { mutate: updateComment } = useMutationWrapper({
     mutationFn: ({
       cmntNo,
       data,
@@ -59,7 +64,7 @@ function PostComment({ bbsId, pstNo }: { bbsId: number; pstNo: number }) {
     },
   });
 
-  const { mutate: deleteComment } = useMutation({
+  const { mutate: deleteComment } = useMutationWrapper({
     mutationFn: ({ cmntNo, cmntPswd }: { cmntNo: number; cmntPswd: string }) =>
       CommentApi.deleteComment(bbsId, pstNo, cmntNo, cmntPswd),
     onSuccess: () => {
diff --git a/apps/cs/src/widgets/post/ui/post.tsx b/apps/cs/src/widgets/post/ui/post.tsx
index e1f15f6f3..a7f3cb43a 100644
--- a/apps/cs/src/widgets/post/ui/post.tsx
+++ b/apps/cs/src/widgets/post/ui/post.tsx
@@ -4,11 +4,11 @@ import dayjs from "dayjs";
 import Image from "next/image";
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { Button, Skeleton } from "@common/components";
 import { AttachmentApi } from "@/entities/attachment";
 import { PostApi } from "@/entities/post";
-import { useAlertStore, useMenuStore } from "@/shared/lib";
+import { useAlertStore, useMutationWrapper, useMenuStore } from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
 import { PostAction } from "./post-action";
 import { PostComment } from "./post-comment";
@@ -64,7 +64,7 @@ function Post({ bbsId, pstNo }: { bbsId: string; pstNo: string }) {
     enabled: !!videoAttachment?.atflId,
   });
 
-  const { mutateAsync: deletePost } = useMutation({
+  const { mutateAsync: deletePost } = useMutationWrapper({
     mutationFn: (delRsn?: string) =>
       PostApi.deletePost(parseInt(bbsId), parseInt(pstNo), delRsn),
     onSuccess: () => {