From 02655510bd60c75c92829f8694bbc9697a60d83e Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Fri, 8 May 2026 17:05:35 +0900
Subject: [PATCH] =?UTF-8?q?[st]=20refactor:=20=EC=95=8C=EB=A6=BC=ED=86=A1?=
 =?UTF-8?q?=20=EB=B0=9C=EC=86=A1=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../management/NoticeTalkSending.tsx          | 55 +++++++++----------
 .../notice-talk-sending-service.ts            | 12 ++++
 2 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/apps/st/src/components/statistics/management/NoticeTalkSending.tsx b/apps/st/src/components/statistics/management/NoticeTalkSending.tsx
index ff0cae557..df0076a76 100644
--- a/apps/st/src/components/statistics/management/NoticeTalkSending.tsx
+++ b/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
                             }
                         >
                             발송
diff --git a/apps/st/src/entities/statistics/api/notice-talk/notice-talk-sending-service.ts b/apps/st/src/entities/statistics/api/notice-talk/notice-talk-sending-service.ts
index 476c8fecd..a770b45e2 100644
--- a/apps/st/src/entities/statistics/api/notice-talk/notice-talk-sending-service.ts
+++ b/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();