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