[KAN-132] feat: 모임취소 재확인 모달 기능 추가

INtiful · Oct 17, 2024 · 257dcc7 · 257dcc7
1 parent a4bb2e0
commit 257dcc7
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 17 deletions.
diff --git a/src/app/components/BottomFloatingBar/ParticipationButton.tsx b/src/app/components/BottomFloatingBar/ParticipationButton.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 
 import { UserData } from '@/types/client.type';
@@ -10,6 +10,7 @@ import useCancelGathering from '@/hooks/useCancelGathering';
 import useParticipation from '@/hooks/useParticipation';
 import { GatheringParticipantsType } from '@/types/data.type';
 import Popup from '../Popup/Popup';
+import CancelGatheringModal from '../Modal/CancelGatheringModal';
 
 interface ParticipationButtonProps {
   isHost: boolean;
@@ -31,6 +32,7 @@ const ParticipationButton = ({
   participantsData,
 }: ParticipationButtonProps) => {
   const router = useRouter();
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const params = useParams();
 
   const { copyUrlToClipboard } = useCopyUrlToClipboard();
@@ -90,10 +92,18 @@ const ParticipationButton = ({
     const disabled = isRegistrationEnded; // 마감일이 지난 경우 버튼 비활성화
 
     return (
-      <div className='flex w-[330px] gap-[10px]'>
-        {renderButton('취소하기', 'white', cancelGathering)}
-        {renderButton('공유하기', 'default', copyUrlToClipboard, disabled)}
-      </div>
+      <>
+        <div className='flex w-[330px] gap-[10px]'>
+          {renderButton('취소하기', 'white', () => setIsModalOpen(true))}
+          {renderButton('공유하기', 'default', copyUrlToClipboard, disabled)}
+        </div>
+        {isModalOpen && (
+          <CancelGatheringModal
+            onClick={cancelGathering}
+            onClose={() => setIsModalOpen(false)}
+          />
+        )}
+      </>
     );
   }
 

diff --git a/src/app/components/Modal/CancelGatheringModal.tsx b/src/app/components/Modal/CancelGatheringModal.tsx
@@ -6,13 +6,14 @@ import ModalHeader from './ModalHeader';
 
 interface CancelGatheringModalProps {
   onClose: () => void;
-  onSubmit?: () => void;
+  onClick?: () => void;
 }
 
 const CancelGatheringModal = ({
   onClose,
-  onSubmit,
+  onClick,
 }: CancelGatheringModalProps) => {
+  console.log('모달');
   return (
     <ModalFrame onClose={onClose}>
       <div className='flex max-h-328 w-320 flex-col gap-24 rounded-xl bg-var-white p-24 md:w-440 dark:border dark:border-neutral-600 dark:bg-neutral-800'>
@@ -24,18 +25,10 @@ const CancelGatheringModal = ({
           {/* 버튼 그룹 */}
           <div className={'flex w-full justify-center gap-8'}>
             <div className='w-120'>
-              <Button
-                name='취소'
-                variant='white'
-                onClick={() => console.log('모임취소')}
-              />
+              <Button name='취소' variant='white' onClick={onClose} />
             </div>
             <div className='w-120'>
-              <Button
-                name='확인'
-                variant='default'
-                onClick={() => console.log('닫기')}
-              />
+              <Button name='확인' variant='default' onClick={onClick} />
             </div>
           </div>
         </div>