✨ Feat: 유저 삭제 기능 추가

src/api/fetchData.ts

@@ -43,6 +43,7 @@ export default async function fetchData<
     if (response.status === 401) {
       localStorage.removeItem("accessToken");
       localStorage.removeItem("refreshToken");
+      window.location.href = `/auth/${AuthPaths.LOGIN}`;
     }
 
     const newAccessToken = response.headers.get("x-access-token");
@@ -51,7 +52,7 @@ export default async function fetchData<
     }
 
     if (!response.ok) {
-      window.location.href = `/auth/${AuthPaths.LOGIN}`;
+      throw new Error(`${response.status}`);
     }
 
     return response.json();

src/api/user/deleteUser.ts

@@ -0,0 +1,9 @@
+import fetchData from "../fetchData";
+
+export default async function deleteUser(userId: number) {
+  const url = `/admin-root/users/${userId}`;
+
+  const response = await fetchData({ url, method: "DELETE" });
+
+  return response;
+}

src/pages/user/DeleteDialog.tsx

@@ -0,0 +1,57 @@
+import {
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../../components/ui/dialog";
+
+import { Button } from "../../components/ui/button";
+import { DefaultPaths } from "../../router/paths";
+import deleteUser from "../../api/user/deleteUser";
+import { useMutation } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+
+type DeleteDialogProps = {
+  id: number;
+  email: string;
+};
+
+export default function DeleteDialog({ id, email }: DeleteDialogProps) {
+  const navigate = useNavigate();
+  const deleteMutation = useMutation({
+    mutationFn: () => deleteUser(id),
+
+    onSuccess: () => {
+      navigate(`/${DefaultPaths.USER.LIST}`);
+    },
+    onError: () => {
+      alert("계정 삭제는 root 계정만 가능합니다.");
+    },
+  });
+
+  const onClickDeleteUser = () => {
+    deleteMutation.mutate();
+  };
+
+  return (
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>해당 유저를 삭제하시겠습니까?</DialogTitle>
+        <DialogDescription className="flex flex-col gap-[20px] justify-center">
+          <div>한번 삭제한 유저는 되돌릴 수 없습니다.</div>
+          <div>
+            <label>사용자 계정 아이디</label>
+            <div>{id}</div>
+          </div>
+          <div>
+            <label>사용자 계정 이메일</label>
+            <div>{email}</div>
+          </div>
+          <Button variant="destructive" onClick={onClickDeleteUser}>
+            삭제하기
+          </Button>
+        </DialogDescription>
+      </DialogHeader>
+    </DialogContent>
+  );
+}

src/pages/user/Detail.tsx

@@ -4,10 +4,14 @@ import APIErrorProvider, {
 import APILoadingProvider, {
   useAPILoading,
 } from "../../components/fallback/APILoadingProvider";
+import { Dialog, DialogTrigger } from "../../components/ui/dialog";
 
+import { Button } from "../../components/ui/button";
+import DeleteDialog from "./DeleteDialog";
 import ItemContainer from "../../components/Detail/ItemContainer";
 import UIErrorBoundary from "../../components/fallback/UIErrorBoundary";
 import { UserType } from "../../api/user";
+import sprite from "../../assets/SVGsprite.svg";
 import { useLoaderData } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import userQueryOptions from "../../queries/userQueryOptions";
@@ -109,6 +113,17 @@ function UserDetailContent() {
             </ItemContainer>
           </div>
         </div>
+        <Dialog>
+          <DialogTrigger className="flex justify-end">
+            <Button variant="destructive">
+              <svg width={30} height={30}>
+                <use href={`${sprite}#trash`}></use>
+              </svg>
+              계정 삭제하기
+            </Button>
+          </DialogTrigger>
+          <DeleteDialog id={data.id} email={data.email} />
+        </Dialog>
       </div>
     </div>
   );