refactor: 관리자 선택 및 삭제 로직 수정

apps/cs/src/pages/admin/ui/add-admin-dialog.tsx

@@ -184,13 +184,14 @@ function AddAdminDialog() {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button>관리자추가</Button>
+        <Button>관리자등록</Button>
       </DialogTrigger>
       <DialogContent className="max-w-4xl">
         <DialogHeader>
-          <DialogTitle>관리자 추가</DialogTitle>
+          <DialogTitle>관리자 등록</DialogTitle>
         </DialogHeader>
-        <form onSubmit={handleSearch} className="mb-4 flex items-end gap-2">
+
+        <form onSubmit={handleSearch} className="flex items-center gap-2">
           <Select
             onValueChange={(value) =>
               setUserSearchQuery({ ...userSearchQuery, keywordType: value })
@@ -217,12 +218,14 @@ function AddAdminDialog() {
           />
           <Button type="submit">검색</Button>
         </form>
+        <hr className="my-4" />
+        <Label className="text-label">1. 사용자 선택</Label>
         {tableComponent}
         <hr className="my-4" />
-        <div className="mb-4 flex items-center gap-2">
-          <Label className="mr-2 text-label">그룹</Label>
+        <div className="mb-4 flex flex-col gap-4">
+          <Label className="mr-2 text-label">2. 그룹 선택</Label>
           <Select onValueChange={(value) => setSelectedGroupId(value)}>
-            <SelectTrigger className="h-[3.2rem] w-[16rem] !text-[1.3rem]">
+            <SelectTrigger className="h-[3.2rem] w-[24rem] !text-[1.3rem]">
               <SelectValue placeholder="그룹 선택" />
             </SelectTrigger>
             <SelectContent>
@@ -244,7 +247,7 @@ function AddAdminDialog() {
               Object.keys(rowSelection).length === 0 || !selectedGroupId
             }
           >
-            추가
+            등록
           </Button>
         </DialogFooter>
       </DialogContent>

apps/cs/src/pages/admin/ui/admin-page.tsx

@@ -101,7 +101,7 @@ function AdminPage() {
     ...columns,
   ];
 
-  const { tableComponent } = useDataTable({
+  const { tableComponent, tableInstance: table } = useDataTable({
     query,
     tableOptions: {
       columns: adminColumns,
@@ -115,7 +115,6 @@ function AdminPage() {
       getCoreRowModel: getCoreRowModel(),
       onPaginationChange: setPagination,
       onRowSelectionChange: setRowSelection,
-      getRowId: (row) => row.userUnqId,
     },
     dataTableOptions: {
       viewPagination: true,
@@ -128,23 +127,21 @@ function AdminPage() {
   };
 
   const handleDeleteAdmins = async () => {
-    const selectedRows = Object.keys(rowSelection);
+    const selectedRows = table.getSelectedRowModel().rows.map((row) => ({
+      groupId: row.original.groupId,
+      userUnqId: row.original.userUnqId,
+    }));
 
     if (!(await confirm("관리자를 삭제하시겠습니까?"))) {
       return;
     }
 
     try {
-      const usersToDelete = selectedRows.map((userUnqId) => {
-        const admin = query.data?.content.find(
-          (item) => item.userUnqId === userUnqId,
-        );
-        return {
-          mode: "D",
-          groupId: admin?.groupId || "",
-          userUnqId,
-        };
-      });
+      const usersToDelete = selectedRows.map((row) => ({
+        mode: "D",
+        groupId: row.groupId,
+        userUnqId: row.userUnqId,
+      }));
 
       await GroupUsersApi.saveGroupUser(usersToDelete);