diff --git a/src/containers/study/Modal/LeaveStudyModal/index.tsx b/src/containers/study/Modal/LeaveStudyModal/index.tsx new file mode 100644 index 00000000..a2af42d9 --- /dev/null +++ b/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 ( + setIsOpen(false)} + title="스터디 탈퇴" + confirmButtonText="탈퇴" + onConfirmButtonClick={handleClickLeave} + > + + 스터디에서 탈퇴하면 다시 되돌릴 수 없습니다. +
+ {`"${name}"에서 탈퇴하시겠습니까?`} +
+
+ ); +}; + +export default LeaveStudyModal; diff --git a/src/containers/study/Modal/types.ts b/src/containers/study/Modal/types.ts index 26845b08..5fb2ed05 100644 --- a/src/containers/study/Modal/types.ts +++ b/src/containers/study/Modal/types.ts @@ -10,3 +10,9 @@ export interface DeleteStudyModalProps extends Pick { teamId: number; setIsOpen: React.Dispatch>; } + +export interface LeaveStudyModalProps extends Pick { + isOpen: boolean; + teamId: number; + setIsOpen: React.Dispatch>; +}