[st] chore: 알림톡발송 페이지 수정

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

@@ -77,6 +77,16 @@ interface SelectedRecipient extends SewerStUserItem {
     variableOverrides: Record<string, string>;
 }
 
+type CommonVariableKey =
+    | "userNm"
+    | "sido"
+    | "gugun"
+    | "gubunNm"
+    | "deptNm"
+    | "jbgdNm"
+    | "telNo"
+    | "custom";
+
 const EMPTY_ADST_LIST: AdstZoneResponseDto[] = [];
 const GUBUN_OPTIONS = [
     { value: "PIC", label: "입력자" },
@@ -139,18 +149,7 @@ function NtitlkSndng() {
         Record<string, string>
     >({});
     const [commonVariableMapping, setCommonVariableMapping] = useState<
-        Record<
-            string,
-            | "userNm"
-            | "sido"
-            | "gugun"
-            | "gubunNm"
-            | "deptNm"
-            | "jbgdNm"
-            | "telNo"
-            | "custom"
-            | ""
-        >
+        Record<string, CommonVariableKey>
     >({});
 
     const [previewRecipient, setPreviewRecipient] =
@@ -286,7 +285,7 @@ function NtitlkSndng() {
             rowSelection: userListRowSelection,
         },
         onRowSelectionChange: setUserListRowSelection,
-        getRowId: (row) => `${row.userNm}-${row.telNo}`,
+        getRowId: (row, i) => `${i}-${row.telNo}`,
     });
 
     const selectedTemplate = useMemo(
@@ -527,7 +526,7 @@ function NtitlkSndng() {
                         </div>
                     </div>
 
-                    <div className="space-y-3">
+                    <div className="space-y-4">
                         <p className="text-lg font-medium">미리보기</p>
                         <div className="relative">
                             <div className="h-[32rem] overflow-auto rounded-[20px] rounded-b-none bg-[rgb(176,192,207)] p-8 pb-0 before:absolute before:left-0 before:top-0 before:block before:h-full before:w-full before:rounded-[20px] before:rounded-b-none before:border-[10px] before:border-b-0 before:border-black before:content-['']">
@@ -640,7 +639,7 @@ function NtitlkSndng() {
                         </div>
                     </div>
 
-                    <div className="h-[32rem] overflow-x-auto rounded-md border">
+                    <div className="h-[28rem] overflow-x-auto rounded-md border">
                         {isUserListLoading ? (
                             <div className="flex items-center justify-center p-6">
                                 <div className="relative flex size-[6rem] justify-center">
@@ -659,7 +658,7 @@ function NtitlkSndng() {
                         )}
                     </div>
                     {!isUserListLoading && userList.length > 0 && (
-                        <div className="mt-3 flex items-center justify-end gap-4">
+                        <div className="mt-4 flex items-center justify-end gap-4">
                             <p className="text-xl text-muted-foreground">
                                 선택{" "}
                                 <span className="font-semibold text-foreground">
@@ -692,6 +691,14 @@ function NtitlkSndng() {
                         <span className="text-xl font-semibold text-foreground">
                             {selectedRecipients.length}명
                         </span>
+                        <Button
+                            type="button"
+                            color="white"
+                            onClick={() => setSelectedRecipients([])}
+                            disabled={selectedRecipients.length === 0}
+                        >
+                            초기화
+                        </Button>
                         <Button
                             type="button"
                             color="green"
@@ -741,16 +748,8 @@ function NtitlkSndng() {
                                             setCommonVariableMapping(
                                                 (prev) => ({
                                                     ...prev,
-                                                    [variableName]: value as
-                                                        | "userNm"
-                                                        | "sido"
-                                                        | "gugun"
-                                                        | "gubunNm"
-                                                        | "deptNm"
-                                                        | "jbgdNm"
-                                                        | "telNo"
-                                                        | "custom"
-                                                        | "",
+                                                    [variableName]:
+                                                        value as CommonVariableKey,
                                                 }),
                                             )
                                         }
@@ -850,8 +849,10 @@ function NtitlkSndng() {
                                     </TableRow>
                                 </TableHeader>
                                 <TableBody>
-                                    {selectedRecipients.map((recipient) => (
-                                        <TableRow key={recipient.telNo}>
+                                    {selectedRecipients.map((recipient, i) => (
+                                        <TableRow
+                                            key={`${i}-${recipient.telNo}`}
+                                        >
                                             <TableCell align="center">
                                                 {recipient.userNm}
                                             </TableCell>