From 2a04d6beffc380d638c48f12cd3ae302c2367f31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=95=9C=EB=8F=99=ED=98=84?= <hando1220@ajou.ac.kr>
Date: Mon, 17 Mar 2025 23:29:04 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C=20API=20=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/routing/List.tsx | 52 ++++++++++++++++++++++++++++++++++----
 1 file changed, 47 insertions(+), 5 deletions(-)

diff --git a/src/pages/routing/List.tsx b/src/pages/routing/List.tsx
index 8ac3de3..4d1ccfa 100644
--- a/src/pages/routing/List.tsx
+++ b/src/pages/routing/List.tsx
@@ -11,16 +11,27 @@ import { Badge } from '@/components/ui/badge';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useAuthStore } from '@/stores/authStore';
 import { Routing } from '@/types/routing';
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+} from '@/components/ui/alert-dialog';
 
 export default function RoutingList() {
   const { authFetch, selectedProject } = useAuthStore();
   const [routings, setRoutings] = useState<Routing[] | null>(null);
+  const [selectedRouting, setSelectedRouting] = useState<Routing | null>(null);
 
   useEffect(() => {
     authFetch(`/api/routings?projectId=${selectedProject?.id}`)
       .then((response) => {
         if (!response.ok) {
-          toast.error('포트포워딩 정보를 조회할 수 없습니다.');
+          toast.error('라우팅 정보를 조회할 수 없습니다.');
           return { contents: [] };
         }
 
@@ -31,6 +42,24 @@ export default function RoutingList() {
       });
   }, [authFetch, selectedProject]);
 
+  const handleDelete = () => {
+    if (selectedRouting === null) throw Error('selectedRouting is null');
+
+    authFetch(`/api/routing?routingId=${selectedRouting.id}`, {
+      method: 'DELETE',
+    }).then((response) => {
+      if (!response.ok) {
+        console.error(response);
+        toast.error('라우팅 설정 삭제에 실패했습니다');
+      } else {
+        toast.warning('라우팅 설정이 삭제되었습니다');
+        setRoutings((prev) => prev!.filter((routing) => routing.id !== selectedRouting.id));
+      }
+    });
+
+    setSelectedRouting(null);
+  };
+
   return (
     <div className="flex flex-1 flex-col gap-4 p-6">
       <div className="flex justify-between mb-2">
@@ -147,10 +176,8 @@ export default function RoutingList() {
                             <Pencil />
                           </Link>
                         </Button>
-                        <Button variant="secondary" className="size-8">
-                          <Link to={`./delete/${routing.id}`}>
-                            <Trash />
-                          </Link>
+                        <Button variant="secondary" className="size-8" onClick={() => setSelectedRouting(routing)}>
+                          <Trash />
                         </Button>
                       </div>
                     </TableCell>
@@ -161,6 +188,21 @@ export default function RoutingList() {
           </Table>
         </CardContent>
       </Card>
+
+      <AlertDialog open={selectedRouting !== null} onOpenChange={(open) => open || setSelectedRouting(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>웹 라우팅 설정 삭제</AlertDialogTitle>
+            <AlertDialogDescription>
+              정말 '{selectedRouting?.name}' 라우팅 설정을 삭제하시겠습니까?
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>취소</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete}>삭제</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }
-- 
GitLab