feat: 스터디 탈퇴 모달 구현

#380

src/containers/study/Modal/LeaveStudyModal/index.tsx

@@ -0,0 +1,43 @@
+import { Text } from '@chakra-ui/react';
+import { useRouter } from 'next/navigation';
+
+import { leaveStudy } from '@/app/api/study';
+import ConfirmModal from '@/components/Modal/ConfirmModal';
+import { useMutateWithToken } from '@/hooks/useFetchWithToken';
+import useRefetchSideBar from '@/hooks/useRefetchSideBar';
+
+import { LeaveStudyModalProps } from '../types';
+
+const LeaveStudyModal = ({ id, name, teamId, isOpen, setIsOpen }: LeaveStudyModalProps) => {
+  const leaveStudyAction = useMutateWithToken(leaveStudy);
+  const refetchSidebar = useRefetchSideBar();
+  const router = useRouter();
+
+  const handleClickLeave = () => {
+    leaveStudyAction(id).then((res) => {
+      if (res.ok) {
+        refetchSidebar();
+        setIsOpen(false);
+        router.replace(`/team/${teamId}/studies`);
+      }
+    });
+  };
+
+  return (
+    <ConfirmModal
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+      title="스터디 탈퇴"
+      confirmButtonText="탈퇴"
+      onConfirmButtonClick={handleClickLeave}
+    >
+      <Text align="center">
+        스터디에서 탈퇴하면 다시 되돌릴 수 없습니다.
+        <br />
+        {`"${name}"에서 탈퇴하시겠습니까?`}
+      </Text>
+    </ConfirmModal>
+  );
+};
+
+export default LeaveStudyModal;

src/containers/study/Modal/types.ts

@@ -10,3 +10,9 @@ export interface DeleteStudyModalProps extends Pick<Study, 'id' | 'name'> {
   teamId: number;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
+
+export interface LeaveStudyModalProps extends Pick<Study, 'id' | 'name'> {
+  isOpen: boolean;
+  teamId: number;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}