[st] refactor: 알림톡 발송 페이지

apps/st/src/components/statistics/management/NoticeTalkSending.tsx

@@ -8,14 +8,15 @@ import {
     type RowSelectionState,
     useReactTable,
 } from "@tanstack/react-table";
+import type { AxiosError } from "axios";
 
-import { client } from "@/shared/api/client";
-import { ENDPOINT } from "@/shared/config";
-import { useAlertStore } from "@/shared/lib";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import type { ApiErrorResponse } from "@/shared/model";
 import {
     type AdstZoneResponseDto,
     type BusinessSendRequest,
     type BusinessSendResponse,
+    noticeTalkSendingApi,
     type SelectedRecipient,
     type SewerStUserItem,
     useNtftalkTemplateList,
@@ -122,10 +123,26 @@ function NtitlkSndng() {
     const [previewRecipient, setPreviewRecipient] =
         useState<SelectedRecipient | null>(null);
     const [isPreviewOpen, setIsPreviewOpen] = useState(false);
-    const [isSending, setIsSending] = useState(false);
     const [userListRowSelection, setUserListRowSelection] =
         useState<RowSelectionState>({});
 
+    const sendMutation = useMutationWrapper<
+        BusinessSendResponse,
+        AxiosError<ApiErrorResponse>,
+        BusinessSendRequest
+    >({
+        mutationFn: (payload) => noticeTalkSendingApi.sendBusiness(payload),
+        onSuccess: (data) => {
+            if (!data.success) {
+                alert(data.message || "알림톡 발송 요청에 실패했습니다.");
+                return;
+            }
+            alert(data.message || "알림톡 발송이 요청되었습니다.");
+            setSelectedRecipients([]);
+            setCommonVariableValues({});
+        },
+    });
+
     const { data: templatePageData } = useNtftalkTemplateList();
     const templates = templatePageData?.content ?? [];
 
@@ -321,7 +338,7 @@ function NtitlkSndng() {
             }),
         );
         if (missingVariable) {
-            alert("필수 변수값이 입력되지 않은 발송 대상이 있습니다.");
+            alert("변수값이 입력되지 않은 발송 대상이 있습니다.");
             return;
         }
         if (
@@ -331,34 +348,13 @@ function NtitlkSndng() {
         )
             return;
 
-        const payload: BusinessSendRequest = {
+        sendMutation.mutate({
             templateCode: selectedTemplateCode,
             callback: "032-590-4000",
             recipients: selectedRecipients.map((recipient) =>
                 getMergedVariables(recipient, commonVariableValues),
             ),
-        };
-
-        try {
-            setIsSending(true);
-            const response = await client.post<BusinessSendResponse>(
-                `${ENDPOINT.NTFTALK_SERVICE.ATA_SEND}/business`,
-                payload,
-            );
-            const data = response.data;
-            if (!data.success) {
-                alert(data.message || "알림톡 발송 요청에 실패했습니다.");
-                return;
-            }
-
-            alert(data.message || `알림톡 발송이 요청되었습니다.`);
-            setSelectedRecipients([]);
-            setCommonVariableValues({});
-        } catch {
-            alert("알림톡 발송 중 오류가 발생했습니다.");
-        } finally {
-            setIsSending(false);
-        }
+        });
     };
 
     return (
@@ -567,7 +563,8 @@ function NtitlkSndng() {
                             color="green"
                             onClick={handleSend}
                             disabled={
-                                isSending || selectedRecipients.length === 0
+                                sendMutation.isPending ||
+                                selectedRecipients.length === 0
                             }
                         >
                             발송

apps/st/src/entities/statistics/api/notice-talk/notice-talk-sending-service.ts

@@ -3,6 +3,8 @@ import { ENDPOINT } from "@/shared/config";
 import type { PageableList } from "@/shared/model";
 
 import type {
+    BusinessSendRequest,
+    BusinessSendResponse,
     NtftalkTemplate,
     TemplateVariablesResponse,
 } from "../../model/notice-talk/notice-talk-sending-interface";
@@ -38,6 +40,16 @@ export class NoticeTalkSendingApiService {
         );
         return response.data;
     }
+
+    async sendBusiness(
+        payload: BusinessSendRequest,
+    ): Promise<BusinessSendResponse> {
+        const response = await client.post<BusinessSendResponse>(
+            `${ENDPOINT.NTFTALK_SERVICE.ATA_SEND}/business`,
+            payload,
+        );
+        return response.data;
+    }
 }
 
 export const noticeTalkSendingApi = new NoticeTalkSendingApiService();