✨ Feat: ProjectRetro 그룹 삭제 api 연결

src/api/retroGroupsApi/deleteGroup.tsx

@@ -0,0 +1,11 @@
+import { DeleteRetrospectiveRequest } from '@/api/@types/Groups';
+import axiosInstance from '@/api/axiosConfig';
+
+export const DeleteGroup = async ({ retrospectiveGroupId }: DeleteRetrospectiveRequest): Promise<void> => {
+  try {
+    const response = await axiosInstance.delete(`/retrospectiveGroups/${retrospectiveGroupId}`);
+    return response.data;
+  } catch (error) {
+    throw new Error(error as string);
+  }
+};

src/components/projectRetro/DeleteModal.tsx

@@ -1,13 +1,30 @@
 import { IoMdClose } from 'react-icons/io';
 import { RiFolder6Fill } from 'react-icons/ri';
+import { DeleteGroup } from '@/api/retroGroupsApi/deleteGroup';
+import { useCustomToast } from '@/hooks/useCustomToast';
 import * as S from '@/styles/projectRetro/DeleteModal.styles';
 
 interface DeleteModalProps {
   isClose: () => void;
-  //   groupId: number;
+  modalClose: () => void;
+  groupId: number;
 }
 
-const DeleteModal: React.FC<DeleteModalProps> = ({ isClose }) => {
+const DeleteModal: React.FC<DeleteModalProps> = ({ isClose, modalClose, groupId }) => {
+  const toast = useCustomToast();
+  const handleDeleteGroup = async () => {
+    try {
+      await DeleteGroup({ retrospectiveGroupId: groupId });
+      setTimeout(() => {
+        isClose();
+        modalClose();
+        toast.info('그룹이 삭제되었습니다.');
+      }, 1000);
+    } catch (e) {
+      toast.error('그룹 삭제에 실패했습니다.');
+    }
+  };
+
   return (
     <S.Background>
       <S.Container>
@@ -27,7 +44,7 @@ const DeleteModal: React.FC<DeleteModalProps> = ({ isClose }) => {
               <S.ProjectName>프로젝트1</S.ProjectName> {/* 프로젝트 이름 */}
               <S.Text>를 삭제하시겠습니까?</S.Text>
             </div>
-            <S.Button>Delete</S.Button>
+            <S.Button onClick={handleDeleteGroup}>Delete</S.Button>
           </S.Bottom>
         </S.Modal>
       </S.Container>

src/components/projectRetro/Modal.tsx

@@ -214,7 +214,8 @@ const Modal: React.FC<ModalProps> = ({ isClose, type, groupId }) => {
           </S.ButtonContainer>
         </S.Modal>
       </S.Container>
-      {deleteModal && <DeleteModal isClose={() => setDeleteModal(false)} />}
+      {deleteModal && <DeleteModal groupId={9} isClose={() => setDeleteModal(false)} modalClose={isClose} />}{' '}
+      {/* groupId 받아오기 */}
     </S.Background>
   );
 };