From 17708c4bf511acfce316276a082c218c53f736a9 Mon Sep 17 00:00:00 2001
From: Lee jin <83453646+j-nary@users.noreply.github.com>
Date: Sun, 20 Oct 2024 19:46:09 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=AA=A8=EC=9E=84=20=EC=82=AD=EC=A0=9C?=
 =?UTF-8?q?=20dialog=20mds=20=EB=A7=88=EC=9D=B4=EA=B7=B8=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=85=98=20(#937)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  2 +-
 .../Modal/Confirm/HostConfirmModal.tsx        | 22 ---------
 .../meetingDetail/MeetingController/index.tsx | 45 ++++++++++---------
 yarn.lock                                     | 10 ++---
 4 files changed, 30 insertions(+), 49 deletions(-)
 delete mode 100644 src/components/page/meetingDetail/MeetingController/Modal/Confirm/HostConfirmModal.tsx

diff --git a/package.json b/package.json
index fe44b089..dd03c085 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "@sopt-makers/fonts": "^2.0.1",
     "@sopt-makers/icons": "^1.0.5",
     "@sopt-makers/playground-common": "^1.5.2",
-    "@sopt-makers/ui": "^2.4.2",
+    "@sopt-makers/ui": "^2.4.4",
     "@stitches/react": "^1.2.8",
     "@tanstack/react-query": "^4.10.3",
     "@types/autosize": "^4.0.3",
diff --git a/src/components/page/meetingDetail/MeetingController/Modal/Confirm/HostConfirmModal.tsx b/src/components/page/meetingDetail/MeetingController/Modal/Confirm/HostConfirmModal.tsx
deleted file mode 100644
index f7cea061..00000000
--- a/src/components/page/meetingDetail/MeetingController/Modal/Confirm/HostConfirmModal.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import ConfirmModal from '@components/modal/ConfirmModal';
-
-interface HostConfirmModalProps {
-  isModalOpened: boolean;
-  handleModalClose: () => void;
-  handleConfirm: () => void;
-}
-
-const HostConfirmModal = ({ isModalOpened, handleModalClose, handleConfirm }: HostConfirmModalProps) => {
-  return (
-    <ConfirmModal
-      isModalOpened={isModalOpened}
-      message="모임을 삭제하시겠습니까?"
-      cancelButton="돌아가기"
-      confirmButton="삭제하기"
-      handleModalClose={handleModalClose}
-      handleConfirm={handleConfirm}
-    />
-  );
-};
-
-export default HostConfirmModal;
diff --git a/src/components/page/meetingDetail/MeetingController/index.tsx b/src/components/page/meetingDetail/MeetingController/index.tsx
index 9a990550..c6e6e63f 100644
--- a/src/components/page/meetingDetail/MeetingController/index.tsx
+++ b/src/components/page/meetingDetail/MeetingController/index.tsx
@@ -8,7 +8,6 @@ import dayjs from 'dayjs';
 import { playgroundLink } from '@sopt-makers/playground-common';
 import useModal from '@hooks/useModal';
 import DefaultModal from '@components/modal/DefaultModal';
-import HostConfirmModal from './Modal/Confirm/HostConfirmModal';
 import ProfileConfirmModal from './Modal/Confirm/ProfileConfirmModal';
 import GuestConfirmModal from './Modal/Confirm/GuestConfirmModal';
 import ApplicationModalContent from './Modal/Content/ApplicationModalContent';
@@ -93,11 +92,6 @@ const MeetingController = ({
   const meetingId = router.query.id;
   const isRecruiting = status === ERecruitmentStatus.RECRUITING;
 
-  const {
-    isModalOpened: isHostModalOpened,
-    handleModalOpen: handleHostModalOpen,
-    handleModalClose: handleHostModalClose,
-  } = useModal();
   const {
     isModalOpened: isGuestModalOpened,
     handleModalOpen: handleGuestModalOpen,
@@ -122,6 +116,30 @@ const MeetingController = ({
     setModalTitle(`모집 현황 (${approvedApplyCount}/${capacity}명)`);
   };
 
+  const handleHostModalOpen = () => {
+    const dialogOption: DialogOptionType = {
+      title: '모임을 삭제하시겠습니까?',
+      description: '삭제한 모임은 되돌릴 수 없어요',
+      type: 'default',
+      typeOptions: {
+        cancelButtonText: '취소',
+        approveButtonText: '삭제하기',
+        buttonFunction: handleDeleteMeeting,
+      },
+    };
+    dialogOpen(dialogOption);
+  };
+
+  const handleDeleteMeeting = () => {
+    queryClient.invalidateQueries({ queryKey: ['fetchMeetingList'] });
+    mutateMeetingDeletion(Number(meetingId), {
+      onSuccess: () => {
+        dialogClose();
+        router.push('/');
+      },
+    });
+  };
+
   const handleApplicationModal = () => {
     if (!me?.hasActivities) {
       handleProfileModalOpen();
@@ -209,16 +227,6 @@ const MeetingController = ({
     });
   };
 
-  const handleDeleteMeeting = () => {
-    queryClient.invalidateQueries({ queryKey: ['fetchMeetingList'] });
-    mutateMeetingDeletion(Number(meetingId), {
-      onSuccess: () => {
-        router.push('/');
-      },
-    });
-    handleHostModalClose();
-  };
-
   return (
     <>
       <SPanelWrapper>
@@ -272,11 +280,6 @@ const MeetingController = ({
           )}
         </div>
       </SPanelWrapper>
-      <HostConfirmModal
-        isModalOpened={isHostModalOpened}
-        handleModalClose={handleHostModalClose}
-        handleConfirm={handleDeleteMeeting}
-      />
       <ProfileConfirmModal
         isModalOpened={isProfileModalOpened}
         handleModalClose={handleProfileModalClose}
diff --git a/yarn.lock b/yarn.lock
index 0f188f58..df10032c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6781,9 +6781,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sopt-makers/ui@npm:^2.4.2":
-  version: 2.4.2
-  resolution: "@sopt-makers/ui@npm:2.4.2"
+"@sopt-makers/ui@npm:^2.4.4":
+  version: 2.4.4
+  resolution: "@sopt-makers/ui@npm:2.4.4"
   dependencies:
     "@radix-ui/react-dialog": "npm:^1.0.5"
     "@radix-ui/react-switch": "npm:^1.0.3"
@@ -6796,7 +6796,7 @@ __metadata:
   peerDependencies:
     react: ^18.2.0
     react-dom: ^18.2.0
-  checksum: 10c0/05921a1b83e3ee5828627724e42b9eb98c6f07ce65e9be436cd2cbf0e60990a19495dd249b6c4b75a02d888916d3e55ac50a16b2c28361d1a71fbb8d5b09910a
+  checksum: 10c0/bb5fa03a300a674b564459393cdef9e5a9bd07bd99521f710a2cbcabe870794bfb9f9348d060edf2304a118e75248d3b5ec3294898778028c56e25ce47fe3907
   languageName: node
   linkType: hard
 
@@ -20703,7 +20703,7 @@ __metadata:
     "@sopt-makers/fonts": "npm:^2.0.1"
     "@sopt-makers/icons": "npm:^1.0.5"
     "@sopt-makers/playground-common": "npm:^1.5.2"
-    "@sopt-makers/ui": "npm:^2.4.2"
+    "@sopt-makers/ui": "npm:^2.4.4"
     "@stitches/react": "npm:^1.2.8"
     "@storybook/addon-essentials": "npm:^8.1.11"
     "@storybook/addon-interactions": "npm:^8.1.11"