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

---
 .../management/NoticeTalkSending.tsx          | 93 +++++++------------
 1 file changed, 35 insertions(+), 58 deletions(-)

diff --git a/apps/st/src/components/statistics/management/NoticeTalkSending.tsx b/apps/st/src/components/statistics/management/NoticeTalkSending.tsx
index ff5031193..6ead463fb 100644
--- a/apps/st/src/components/statistics/management/NoticeTalkSending.tsx
+++ b/apps/st/src/components/statistics/management/NoticeTalkSending.tsx
@@ -2,6 +2,7 @@
 
 import { useMemo, useState } from "react";
 
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { useQuery } from "@tanstack/react-query";
 import {
     type ColumnDef,
@@ -129,6 +130,7 @@ function getMergedVariables(
 
 function NtitlkSndng() {
     const alert = useAlertStore((state) => state.setMessage);
+    const { confirm } = useConfirm();
 
     const [searchStatsYr, setSearchStatsYr] = useState(getDefaultStatsYear());
     const [searchSido, setSearchSido] = useState("");
@@ -444,10 +446,6 @@ function NtitlkSndng() {
             alert("알림톡 템플릿을 선택해주세요.");
             return;
         }
-        if (selectedRecipients.length === 0) {
-            alert("발송할 담당자를 1명 이상 선택해주세요.");
-            return;
-        }
 
         const missingVariable = selectedRecipients.some((recipient) =>
             variableNames.some((name) => {
@@ -462,6 +460,12 @@ function NtitlkSndng() {
             alert("필수 변수값이 입력되지 않은 발송 대상이 있습니다.");
             return;
         }
+        if (
+            !(await confirm(
+                `${selectedRecipients.length}명에게 발송하시겠습니까?`,
+            ))
+        )
+            return;
 
         const payload: BusinessSendRequest = {
             templateCode: selectedTemplateCode,
@@ -483,10 +487,7 @@ function NtitlkSndng() {
                 return;
             }
 
-            alert(
-                data.message ||
-                    `${data.sentCount}건의 알림톡 발송이 요청되었습니다.`,
-            );
+            alert(data.message || `알림톡 발송이 요청되었습니다.`);
             setSelectedRecipients([]);
             setCommonVariableValues({});
         } catch {
@@ -675,6 +676,7 @@ function NtitlkSndng() {
                             </p>
                             <Button
                                 type="button"
+                                color="gray"
                                 onClick={handleAddSelectedToRecipients}
                             >
                                 + 발송 목록 추가
@@ -687,10 +689,7 @@ function NtitlkSndng() {
             <section className="card card-border p-4">
                 <div className="mb-3 flex items-center justify-between">
                     <h3 className="text-xl font-semibold">발송 목록</h3>
-                    <div className="flex items-center gap-4">
-                        <span className="text-xl font-semibold text-foreground">
-                            {selectedRecipients.length}명
-                        </span>
+                    <div className="flex items-center gap-2">
                         <Button
                             type="button"
                             color="white"
@@ -703,7 +702,9 @@ function NtitlkSndng() {
                             type="button"
                             color="green"
                             onClick={handleSend}
-                            disabled={isSending}
+                            disabled={
+                                isSending || selectedRecipients.length === 0
+                            }
                         >
                             발송
                         </Button>
@@ -711,29 +712,8 @@ function NtitlkSndng() {
                 </div>
 
                 {variableNames.length > 0 && (
-                    <div className="mb-4 rounded-md border p-3">
-                        <div className="flex items-center justify-between">
-                            <p className="text-lg font-medium">
-                                변수 일괄 적용
-                            </p>
-                            <div className="flex gap-2">
-                                <Button
-                                    type="button"
-                                    size="sm"
-                                    color="white"
-                                    onClick={handleResetCommonValues}
-                                >
-                                    초기화
-                                </Button>
-                                <Button
-                                    type="button"
-                                    size="sm"
-                                    onClick={handleApplyCommonValues}
-                                >
-                                    적용하기
-                                </Button>
-                            </div>
-                        </div>
+                    <div className="mb-4 space-y-4 rounded-md border p-3">
+                        <p className="text-lg font-medium">변수 일괄 적용</p>
                         <div className="grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-6">
                             {variableNames.map((variableName) => (
                                 <div key={variableName} className="space-y-2">
@@ -806,6 +786,21 @@ function NtitlkSndng() {
                                     )}
                                 </div>
                             ))}
+                            <div className="flex items-end gap-2">
+                                <Button
+                                    type="button"
+                                    color="white"
+                                    onClick={handleResetCommonValues}
+                                >
+                                    초기화
+                                </Button>
+                                <Button
+                                    type="button"
+                                    onClick={handleApplyCommonValues}
+                                >
+                                    적용하기
+                                </Button>
+                            </div>
                         </div>
                     </div>
                 )}
@@ -816,9 +811,9 @@ function NtitlkSndng() {
                             선택된 발송 대상이 없습니다.
                         </p>
                     ) : (
-                        <div className="overflow-x-auto rounded-md border">
+                        <div className="max-h-[40rem] overflow-x-auto rounded-md border">
                             <Table variant="line" className="text-sm">
-                                <TableHeader>
+                                <TableHeader className="top-0">
                                     <TableRow>
                                         <TableHead className="min-w-[100px]">
                                             이름
@@ -826,15 +821,6 @@ function NtitlkSndng() {
                                         <TableHead className="min-w-[120px]">
                                             전화번호
                                         </TableHead>
-                                        {/* <TableHead className="min-w-[80px]">
-                                            시도
-                                        </TableHead>
-                                        <TableHead className="min-w-[100px]">
-                                            시군구
-                                        </TableHead>
-                                        <TableHead className="min-w-[120px]">
-                                            소속
-                                        </TableHead> */}
                                         {variableNames.map((variableName) => (
                                             <TableHead
                                                 key={variableName}
@@ -844,7 +830,7 @@ function NtitlkSndng() {
                                             </TableHead>
                                         ))}
                                         <TableHead className="min-w-[160px] text-center">
-                                            액션
+                                            버튼
                                         </TableHead>
                                     </TableRow>
                                 </TableHeader>
@@ -859,15 +845,6 @@ function NtitlkSndng() {
                                             <TableCell align="center">
                                                 {recipient.telNo}
                                             </TableCell>
-                                            {/* <TableCell align="center">
-                                                {recipient.sido}
-                                            </TableCell>
-                                            <TableCell align="center">
-                                                {recipient.gugun}
-                                            </TableCell>
-                                            <TableCell align="center">
-                                                {recipient.deptNm}
-                                            </TableCell> */}
                                             {variableNames.map(
                                                 (variableName) => (
                                                     <TableCell
@@ -894,7 +871,7 @@ function NtitlkSndng() {
                                                 ),
                                             )}
                                             <TableCell align="center">
-                                                <div className="flex justify-center gap-1">
+                                                <div className="flex justify-center gap-2">
                                                     <Button
                                                         type="button"
                                                         size="sm"