From 69c174fed74471b5210e629ea6f909d1633b285d Mon Sep 17 00:00:00 2001
From: ttaerrim <ltr0121@naver.com>
Date: Thu, 23 Nov 2023 11:53:38 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=EC=82=AD=EC=A0=9C=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EA=B8=80=EC=9D=84?=
 =?UTF-8?q?=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MogacoDetail/DetailHeaderButtons.tsx      | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/app/frontend/src/components/MogacoDetail/DetailHeaderButtons.tsx b/app/frontend/src/components/MogacoDetail/DetailHeaderButtons.tsx
index 6bf0454c0..ea3c5fbab 100644
--- 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>
       </>