feat: 관리자 삭제 기능 작업

apps/cs/src/entities/group-user/index.ts

@@ -1,2 +1,5 @@
 export { GroupUsersApi } from "./api/group-user-service";
-export { type GroupUserListResponseDto } from "./model/group-user-interface";
+export {
+  type GroupUserListResponseDto,
+  type GroupUserSaveData,
+} from "./model/group-user-interface";

apps/cs/src/entities/user/index.ts

@@ -13,3 +13,4 @@ export {
   type AdminUserList,
   type AdminUserListResponse,
 } from "./model/user-interface";
+export { PasswordResetDialog } from "./ui/password-reset-dialog";

apps/cs/src/entities/user/ui/password-reset-dialog.tsx

@@ -31,9 +31,13 @@ import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 
 interface PasswordResetDialogProps {
   userUnqId: string;
+  children: React.ReactNode;
 }
 
-export function PasswordResetDialog({ userUnqId }: PasswordResetDialogProps) {
+export function PasswordResetDialog({
+  userUnqId,
+  children,
+}: PasswordResetDialogProps) {
   const alert = useAlertStore((state) => state.setMessage);
 
   const [open, setOpen] = useState(false);
@@ -60,11 +64,7 @@ export function PasswordResetDialog({ userUnqId }: PasswordResetDialogProps) {
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button color="gray">
-          <i className="diveicon di-arrow-reset" /> 비밀번호 초기화
-        </Button>
-      </DialogTrigger>
+      <DialogTrigger asChild>{children}</DialogTrigger>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>비밀번호 초기화</DialogTitle>

apps/cs/src/pages/admin/model/table-columns.tsx

@@ -1,6 +1,13 @@
 import dayjs from "dayjs";
+import { memo } from "react";
 import type { ColumnDef } from "@tanstack/react-table";
-import type { AdminUserList } from "@/entities/user";
+import { useQueryClient } from "@tanstack/react-query";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { Button } from "@common/components";
+import { PasswordResetDialog, type AdminUserList } from "@/entities/user";
+import { GroupUsersApi, type GroupUserSaveData } from "@/entities/group-user";
+import { ENDPOINT } from "@/shared/config";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { ManagerIpDialog } from "../ui/manager-ip-dialog";
 
 export const columns: ColumnDef<AdminUserList["content"][number]>[] = [
@@ -23,11 +30,11 @@ export const columns: ColumnDef<AdminUserList["content"][number]>[] = [
     header: "관리자명",
   },
   {
-    accessorKey: "userStateCodeName",
+    accessorKey: "groupNm",
     header: "관리자구분",
   },
   {
-    accessorKey: "groupNm",
+    accessorKey: "ogdpSeNm",
     header: "소속",
   },
   {
@@ -43,7 +50,63 @@ export const columns: ColumnDef<AdminUserList["content"][number]>[] = [
     id: "action",
     header: "관리",
     cell: ({ row }) => {
-      return <ManagerIpDialog userUnqId={row.original.userUnqId} />;
+      return (
+        <ActionCell
+          userUnqId={row.original.userUnqId}
+          groupId={row.original.groupId}
+        />
+      );
     },
   },
 ];
+
+const ActionCell = memo(
+  ({ userUnqId, groupId }: { userUnqId: string; groupId: string }) => {
+    const queryClient = useQueryClient();
+    const { confirm } = useConfirm();
+    const alert = useAlertStore((state) => state.setMessage);
+
+    const { mutate: onDelete } = useMutationWrapper({
+      mutationFn: (data: GroupUserSaveData) =>
+        GroupUsersApi.saveGroupUser([data]),
+      onSuccess: () => {
+        queryClient.invalidateQueries({
+          queryKey: [ENDPOINT.USER_SERVICE.USERS],
+        });
+        alert("삭제되었습니다.");
+      },
+    });
+
+    const handleDelete = async () => {
+      if (await confirm("관리자를 삭제하시겠습니까?")) {
+        onDelete({
+          mode: "D",
+          groupId,
+          userUnqId,
+        });
+      }
+    };
+
+    return (
+      <div className="flex justify-center gap-2">
+        <ManagerIpDialog userUnqId={userUnqId} />
+        <PasswordResetDialog userUnqId={userUnqId}>
+          <Button size="sm" color="gray">
+            비밀번호 초기화
+          </Button>
+        </PasswordResetDialog>
+        <Button size="sm" color="red" onClick={handleDelete}>
+          삭제
+        </Button>
+      </div>
+    );
+  },
+  (prevProps, nextProps) => {
+    return (
+      prevProps.userUnqId === nextProps.userUnqId &&
+      prevProps.groupId === nextProps.groupId
+    );
+  },
+);
+
+ActionCell.displayName = "ActionCell";

apps/cs/src/pages/users/ui/user-detail.tsx

@@ -11,10 +11,9 @@ import {
   TableHead,
   TableRow,
 } from "@common/components";
-import { USER_STATE_CODE, UserApi } from "@/entities/user";
+import { USER_STATE_CODE, UserApi, PasswordResetDialog } from "@/entities/user";
 import { ENDPOINT } from "@/shared/config";
 import { useAlertStore, useMutationWrapper } from "@/shared/lib";
-import { PasswordResetDialog } from "./password-reset-dialog";
 
 function UserDetail({ userUnqId }: { userUnqId: string }) {
   const router = useRouter();
@@ -76,7 +75,11 @@ function UserDetail({ userUnqId }: { userUnqId: string }) {
               계정잠금
             </Button>
           )}
-          <PasswordResetDialog userUnqId={userUnqId} />
+          <PasswordResetDialog userUnqId={userUnqId}>
+            <Button color="gray">
+              <i className="diveicon di-arrow-reset" /> 비밀번호 초기화
+            </Button>
+          </PasswordResetDialog>
           {data?.userStateCode === USER_STATE_CODE.대기 && (
             <Button className="emerald" onClick={() => onApplyUser()}>
               <i className="diveicon di-check-circle-line" /> 가입승인