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>;
+}