[apps/cs] feat: 회원 삭제 기능 추가 (CS_UT05010109)

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

@@ -3,6 +3,7 @@
 import dayjs from "dayjs";
 import { usePathname, useRouter } from "next/navigation";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import {
   Button,
   Table,
@@ -18,10 +19,11 @@ import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 function UserDetail({ userUnqId }: { userUnqId: string }) {
   const router = useRouter();
   const pathname = usePathname();
+  const { confirm } = useConfirm();
   const queryClient = useQueryClient();
   const alert = useAlertStore((state) => state.setMessage);
 
-  const { data } = useQuery({
+  const { data, refetch } = useQuery({
     queryKey: [ENDPOINT.USER_SERVICE.USERS, userUnqId],
     queryFn: () => UserApi.findByUserUnqId(userUnqId),
     enabled: !!userUnqId,
@@ -31,9 +33,7 @@ function UserDetail({ userUnqId }: { userUnqId: string }) {
     mutationFn: () => UserApi.lockUser(userUnqId),
     onSuccess: () => {
       alert("계정 잠금이 활성화 되었습니다.");
-      queryClient.invalidateQueries({
-        queryKey: [ENDPOINT.USER_SERVICE.USERS, userUnqId],
-      });
+      refetch();
     },
   });
 
@@ -41,9 +41,7 @@ function UserDetail({ userUnqId }: { userUnqId: string }) {
     mutationFn: () => UserApi.unlockUser(userUnqId),
     onSuccess: () => {
       alert("계정 잠금이 해제되었습니다.");
-      queryClient.invalidateQueries({
-        queryKey: [ENDPOINT.USER_SERVICE.USERS, userUnqId],
-      });
+      refetch();
     },
   });
 
@@ -51,12 +49,26 @@ function UserDetail({ userUnqId }: { userUnqId: string }) {
     mutationFn: () => UserApi.applyUser(userUnqId),
     onSuccess: () => {
       alert("사용자 승인이 완료되었습니다.");
+      refetch();
+    },
+  });
+
+  const { mutateAsync: deleteUser } = useMutationWrapper({
+    mutationFn: () => UserApi.deleteUser(userUnqId),
+    onSuccess: () => {
+      alert("회원이 삭제되었습니다.", router.back);
       queryClient.invalidateQueries({
-        queryKey: [ENDPOINT.USER_SERVICE.USERS, userUnqId],
+        queryKey: [ENDPOINT.USER_SERVICE.USERS],
       });
     },
   });
 
+  const handleDelete = async () => {
+    if (await confirm("삭제하시겠습니까?")) {
+      await deleteUser();
+    }
+  };
+
   return (
     <div className="card card-border !mt-6">
       <div className="card-header">
@@ -164,7 +176,7 @@ function UserDetail({ userUnqId }: { userUnqId: string }) {
         <Button size="lg" onClick={() => router.push(`${pathname}/modify`)}>
           수정
         </Button>
-        <Button size="lg" color="red">
+        <Button size="lg" color="red" onClick={handleDelete}>
           삭제
         </Button>
       </div>