feat: 내 스터디 id 목록 조회 방법 변경

#364

src/app/api/study.ts

@@ -129,10 +129,14 @@ const patchCurriculumCompleted = (token: string, curriculumId: number, participa
     },
   });
 
+const getMyStudies = (token: string, memberId: number) =>
+  studyFetcher(`/studies/members/${memberId}`, { headers: { Authorization: `Bearer ${token}` } });
+
 export {
   postStudy,
   getStudyAll,
   getStudy,
+  getMyStudies,
   deleteStudy,
   putEditStudy,
   patchTerminateStudy,

src/app/team/[teamId]/study/[studyId]/document/page.tsx

@@ -1,25 +1,25 @@
 'use client';
 
 import { Button, Flex, Text } from '@chakra-ui/react';
-import { useAtomValue } from 'jotai';
 import { useRouter } from 'next/navigation';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
-import { myStudyAtom } from '@/atom';
+import { getMyStudies } from '@/app/api/study';
 import Documents from '@/containers/document/Documents';
 import CreateDocumentModal from '@/containers/study/CreateDocumentModal';
 import { CreateDocument } from '@/containers/study/CreateDocumentModal/type';
 // import useGetMyTeam from '@/hooks/useGetMyTeam';
 import useGetUser from '@/hooks/useGetUser';
+import { Study } from '@/types';
 
 const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
   const [openCreateModal, setOpenCreateModal] = useState(false);
+  const [myStudies, setMyStudies] = useState<number[]>([]);
   const categoryData: CreateDocument = { groupId: params.studyId, groupType: 'studies' };
 
   const user = useGetUser();
   const router = useRouter();
 
-  const myStudies = useAtomValue(myStudyAtom);
   // const myTeam = useGetMyTeam();
   if (user && !user.isLogin) router.replace(`/team/${params.teamId}`);
   // if (myTeam && !myTeam.some((id) => id === +params.teamId)) router.replace(`/team/${params.teamId}`);
@@ -29,6 +29,17 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
     return myStudies.some((studyId) => studyId === +params.studyId);
   }, [user, myStudies, params.studyId]);
 
+  useEffect(() => {
+    if (!user || !user.isLogin) return;
+    getMyStudies(user.token, user.memberId)
+      .then((res) => {
+        if (res.ok && res.body) {
+          setMyStudies(res.body.map((study: Study) => study.id));
+        }
+      })
+      .catch(() => router.replace(`/team/${params.teamId}`));
+  }, [user, setMyStudies, router, params.teamId]);
+
   return (
     <Flex align="center" direction="column" gap="9" w="100%" p="8">
       <Flex justify="space-between" w="100%">

src/atom.ts

@@ -16,6 +16,5 @@ export const defaultUserAtom = {
 export const userAtom = atomWithStorage('user', defaultUserAtom as UserAtomType);
 
 export const myTeamAtom = atomWithStorage('myTeam', []);
-export const myStudyAtom = atomWithStorage('myStudy', []);
 
 export const loginBackPathAtom = atomWithStorage('loginBackPath', '/');

src/components/Sidebar/SidebarContent/index.tsx

@@ -9,7 +9,7 @@ import { BsPlus, BsGrid } from 'react-icons/bs';
 import { MdOutlineLogout } from 'react-icons/md';
 
 import { useGetSideBarInfoQuery } from '@/app/api/member';
-import { defaultUserAtom, myStudyAtom, myTeamAtom, userAtom } from '@/atom';
+import { defaultUserAtom, myTeamAtom, userAtom } from '@/atom';
 import GoogleLoginButton from '@/containers/main/GoogleLoginButton';
 import TeamModal from '@/containers/team/TeamModal';
 import useGetUser from '@/hooks/useGetUser';
@@ -24,8 +24,6 @@ const SidebarContent = ({ isOpen, setIsOpen }: SidebarContentProps) => {
   const user = useGetUser();
   const setUser = useSetAtom(userAtom);
   const setMyTeams = useSetAtom(myTeamAtom);
-  const setMyStudies = useSetAtom(myStudyAtom);
-
   const router = useRouter();
 
   const { data: sidebarInfo } = useGetSideBarInfoQuery();
@@ -39,15 +37,8 @@ const SidebarContent = ({ isOpen, setIsOpen }: SidebarContentProps) => {
     const myTeams = sidebarInfo?.body.myTeamsAndStudies
       ? sidebarInfo.body.myTeamsAndStudies.map((team: SidebarTeam) => team.teamId)
       : [];
-    const myStudies = sidebarInfo?.body.myTeamsAndStudies
-      ? sidebarInfo.body.myTeamsAndStudies.reduce((r: number[], team: SidebarTeam) => {
-          team.teamStudies.forEach((study) => r.push(study.id));
-          return r;
-        }, [])
-      : [];
     setMyTeams(myTeams);
-    setMyStudies(myStudies);
-  }, [setMyTeams, setMyStudies, sidebarInfo]);
+  }, [setMyTeams, sidebarInfo]);
 
   return (
     <>