feat: 스터디 탈퇴 구현

#380
BDD-CLUB · Jan 12, 2025 · 2af6aee · 2af6aee
1 parent b55233d
commit 2af6aee
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 44 deletions.
diff --git a/src/app/team/[teamId]/study/[studyId]/page.tsx b/src/app/team/[teamId]/study/[studyId]/page.tsx
@@ -25,12 +25,14 @@ import { useGetFetchWithToken } from '@/hooks/useFetchWithToken';
 import useGetMyTeam from '@/hooks/useGetMyTeam';
 import useGetUser from '@/hooks/useGetUser';
 import { DocumentList, ParticipantType, Study, StudyMember } from '@/types';
+import LeaveStudyModal from '@/containers/study/Modal/LeaveStudyModal';
 
 const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
   const [studyData, setStudyData] = useState<Study>();
   const [isEditModalOpen, setIsEditModalOpen] = useState<boolean>(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<boolean>(false);
   const [isTerminateModalOpen, setIsTerminateModalOpen] = useState<boolean>(false);
+  const [isLeaveModalOpen, setIsLeaveModalOpen] = useState<boolean>(false);
   const [documentArray, setDocumentArray] = useState<DocumentList[]>([]);
   const [isCreateDocumentModalOpen, setIsCreateDocumentModalOpen] = useState<boolean>(false);
   const categoryData: CreateDocument = { groupId: params.studyId, groupType: 'studies' };
@@ -97,9 +99,11 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
         </Flex>
         {studyData && studyData?.status !== 'ENDED' && user && user.memberId === studyData?.studyLeaderId && (
           <StudyControlPanel
+            isStudyLeader={user.memberId === studyData.studyLeaderId}
             editModalOpen={setIsEditModalOpen}
             terminateModalOpen={setIsTerminateModalOpen}
             deleteModalOpen={setIsDeleteModalOpen}
+            leaveModalOpen={setIsLeaveModalOpen}
           />
         )}
         <Grid gap="4" templateColumns={{ base: '', xl: '2fr 1fr' }} w="100%" my="4">
@@ -199,7 +203,13 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
         isOpen={isDeleteModalOpen}
         setIsOpen={setIsDeleteModalOpen}
       />
-
+      <LeaveStudyModal
+        id={params.studyId}
+        name={studyData?.name || ''}
+        teamId={params.teamId}
+        isOpen={isLeaveModalOpen}
+        setIsOpen={setIsLeaveModalOpen}
+      />
       <CreateDocumentModal
         isOpen={isCreateDocumentModalOpen}
         onClose={() => setIsCreateDocumentModalOpen(false)}

diff --git a/src/containers/study/StudyControlPanel/index.tsx b/src/containers/study/StudyControlPanel/index.tsx
@@ -2,51 +2,77 @@ import { Button, Flex } from '@chakra-ui/react';
 
 import { StudyControlPanelProps } from './types';
 
-const StudyControlPanel = ({ editModalOpen, terminateModalOpen, deleteModalOpen }: StudyControlPanelProps) => {
+const StudyControlPanel = ({
+  isStudyLeader,
+  editModalOpen,
+  terminateModalOpen,
+  deleteModalOpen,
+  leaveModalOpen,
+}: StudyControlPanelProps) => {
   return (
     <Flex gap="2">
-      <Button
-        w="fit-content"
-        px="4"
-        py="1"
-        color="white"
-        bg="orange"
-        shadow="md"
-        _hover={{ bg: 'orange' }}
-        aria-label=""
-        onClick={() => editModalOpen(true)}
-        size="xs"
-      >
-        수정
-      </Button>
-      <Button
-        w="fit-content"
-        px="4"
-        py="1"
-        color="white"
-        bg="orange_dark"
-        shadow="md"
-        _hover={{ bg: 'orange_dark' }}
-        aria-label=""
-        onClick={() => terminateModalOpen(true)}
-        size="xs"
-      >
-        종료
-      </Button>
-      <Button
-        w="fit-content"
-        px="4"
-        py="1"
-        color="black"
-        bg="white"
-        shadow="md"
-        _hover={{ bg: 'white' }}
-        aria-label=""
-        onClick={() => deleteModalOpen(true)}
-        size="xs"
-      >
-        삭제
-      </Button>
+      {isStudyLeader && (
+        <>
+          <Button
+            w="fit-content"
+            px="4"
+            py="1"
+            color="white"
+            bg="orange"
+            shadow="md"
+            _hover={{ bg: 'orange' }}
+            aria-label=""
+            onClick={() => editModalOpen(true)}
+            size="xs"
+          >
+            수정
+          </Button>
+          <Button
+            w="fit-content"
+            px="4"
+            py="1"
+            color="white"
+            bg="orange_dark"
+            shadow="md"
+            _hover={{ bg: 'orange_dark' }}
+            aria-label=""
+            onClick={() => terminateModalOpen(true)}
+            size="xs"
+          >
+            종료
+          </Button>
+          <Button
+            w="fit-content"
+            px="4"
+            py="1"
+            color="black"
+            bg="white"
+            shadow="md"
+            _hover={{ bg: 'white' }}
+            aria-label=""
+            onClick={() => deleteModalOpen(true)}
+            size="xs"
+          >
+            삭제
+          </Button>
+        </>
+      )}
+      {!isStudyLeader && (
+        <Button
+          w="fit-content"
+          px="4"
+          py="1"
+          color="black"
+          bg="white"
+          shadow="md"
+          _hover={{ bg: 'white' }}
+          aria-label=""
+          onClick={() => leaveModalOpen(true)}
+          size="xs"
+        >
+          탈퇴
+        </Button>
+      )}
     </Flex>
   );
 };

diff --git a/src/containers/study/StudyControlPanel/types.ts b/src/containers/study/StudyControlPanel/types.ts
@@ -1,5 +1,7 @@
 export interface StudyControlPanelProps {
+  isStudyLeader: boolean;
   editModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
   terminateModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
   deleteModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  leaveModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }