✨ 삭제 버튼 클릭 시 글을 삭제

boostcampwm2023 · Nov 23, 2023 · 69c174f · 69c174f
1 parent 564d40d
commit 69c174f
Showing 1 changed file with 32 additions and 1 deletion.
diff --git a/app/frontend/src/components/MogacoDetail/DetailHeaderButtons.tsx b/app/frontend/src/components/MogacoDetail/DetailHeaderButtons.tsx
@@ -1,10 +1,36 @@
+import { useNavigate, useParams } from 'react-router-dom';
+
 import { Button } from '@/components';
+import { useDeleteMogacoQuery } from '@/queries/hooks';
 
 type DetailHeaderButtonsProps = {
   state: 'not-participated' | 'participated' | 'hosted';
 };
 
 export function DetailHeaderButtons({ state }: DetailHeaderButtonsProps) {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const { mutateAsync } = useDeleteMogacoQuery();
+
+  const handleDelete = async () => {
+    if (!id) {
+      return;
+    }
+
+    const { status } = await mutateAsync(id);
+    if (status === 200) {
+      navigate('/mogaco');
+    }
+  };
+
+  const onClickDelete = () => {
+    // eslint-disable-next-line no-alert
+    const answer = window.confirm('삭제하시겠습니까?');
+    if (answer) {
+      handleDelete();
+    }
+  };
+
   if (state === 'not-participated') {
     return (
       <Button theme="primary" shape="fill" size="large">
@@ -32,7 +58,12 @@ export function DetailHeaderButtons({ state }: DetailHeaderButtonsProps) {
         <Button theme="primary" shape="line" size="large">
           수정
         </Button>
-        <Button theme="danger" shape="line" size="large">
+        <Button
+          theme="danger"
+          shape="line"
+          size="large"
+          onClick={onClickDelete}
+        >
           삭제
         </Button>
       </>