From 59ac59a2074d4bd3fbd6416147e7c301a152d680 Mon Sep 17 00:00:00 2001
From: a-honey <jungahyeon0512@khu.ac.kr>
Date: Fri, 3 Jan 2025 22:19:50 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EC=9C=A0=EC=A0=80=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user/deleteUser.ts      |  9 ++++++
 src/pages/user/DeleteDialog.tsx | 57 +++++++++++++++++++++++++++++++++
 src/pages/user/Detail.tsx       | 15 +++++++++
 3 files changed, 81 insertions(+)
 create mode 100644 src/api/user/deleteUser.ts
 create mode 100644 src/pages/user/DeleteDialog.tsx

diff --git a/src/api/user/deleteUser.ts b/src/api/user/deleteUser.ts
new file mode 100644
index 0000000..556e0c9
--- /dev/null
+++ b/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;
+}
diff --git a/src/pages/user/DeleteDialog.tsx b/src/pages/user/DeleteDialog.tsx
new file mode 100644
index 0000000..97ecfe9
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/pages/user/Detail.tsx b/src/pages/user/Detail.tsx
index e7ba26d..bd3d6bb 100644
--- a/src/pages/user/Detail.tsx
+++ b/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>
   );

From 4058f11819884fcba12684c4efeb99621ee31ece Mon Sep 17 00:00:00 2001
From: a-honey <jungahyeon0512@khu.ac.kr>
Date: Fri, 3 Jan 2025 22:23:52 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20fetch=EC=97=90=EC=84=9C=20=EC=97=90?=
 =?UTF-8?q?=EB=9F=AC=EB=A5=BC=20=EC=9E=A1=EC=95=84=20onError=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=ED=99=95=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/fetchData.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/api/fetchData.ts b/src/api/fetchData.ts
index ce98cb1..4094e63 100644
--- a/src/api/fetchData.ts
+++ b/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();