Feature/#364 학습자료스터디 갤러리 권환 (#366)

* feat: 팀의 학습자료 갤러리에서 팀원일 때만 학습자료 추가 버튼이 보이도록 수정 #364 * feat: 팀의 스터디 갤러리에서 팀원 일때만 스터디 추가 버튼이 보이도록 수정 #364 * fix: 스터디 페이지로 들어가지 못하던 문제 해결 #364 * feat: 스터디의 학습자료 갤러이에서 스터디원 에게만 자료 등록 버튼 보이도록 수정 #364 * feat: 스터디의 학습자료 갤러리 팀원 또는 스터디원만 접근할 수 있도록 수정 #364 * feat: 스터디 페이지에 들어가지지 않는 문제 일단... #364 * feat: 내 스터디 id 목록 조회 방법 변경 #364 * fix: 자신의 팀인 경우에도 스터디 못 들어가는 오류 해결 #364
BDD-CLUB · Dec 5, 2024 · 523db77 · 523db77
1 parent 4c24134
commit 523db77
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 22 deletions.
diff --git a/src/app/api/study.ts b/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,

diff --git a/src/app/team/[teamId]/document/page.tsx b/src/app/team/[teamId]/document/page.tsx
@@ -1,24 +1,38 @@
 'use client';
 
 import { Button, Flex, Text } from '@chakra-ui/react';
-import { useState } from 'react';
+import { useAtomValue } from 'jotai';
+import { useMemo, useState } from 'react';
 
+import { myTeamAtom } from '@/atom';
 import Documents from '@/containers/document/Documents';
 import CreateDocumentModal from '@/containers/study/CreateDocumentModal';
 import { CreateDocument } from '@/containers/study/CreateDocumentModal/type';
+import useGetUser from '@/hooks/useGetUser';
 
 const Page = ({ params }: { params: { teamId: number } }) => {
   const [openCreateModal, setOpenCreateModal] = useState(false);
   const categoryData: CreateDocument = { groupId: params.teamId, groupType: 'teams' };
+
+  const user = useGetUser();
+  const myTeam = useAtomValue(myTeamAtom);
+
+  const auth = useMemo(() => {
+    if (!user || !user.isLogin) return false;
+    return myTeam.some((teamId) => teamId === +params.teamId);
+  }, [user, myTeam, params.teamId]);
+
   return (
     <Flex align="center" direction="column" gap="9" w="100%" p="8">
       <Flex justify="space-between" w="100%">
         <Flex direction="row" gap="2">
           <Text textStyle="bold_2xl">학습자료 갤러리</Text>
         </Flex>
-        <Button color="white" bg="orange_dark" onClick={() => setOpenCreateModal(true)} rounded="full">
-          자료 등록
-        </Button>
+        {auth && (
+          <Button color="white" bg="orange_dark" onClick={() => setOpenCreateModal(true)} rounded="full">
+            자료 등록
+          </Button>
+        )}
       </Flex>
       <Documents groupId={params.teamId} category="teams" refetchTrigger={openCreateModal} />
       <CreateDocumentModal

diff --git a/src/app/team/[teamId]/study-gallery/page.tsx b/src/app/team/[teamId]/study-gallery/page.tsx
@@ -1,23 +1,36 @@
 'use client';
 
 import { Button, Flex, Text } from '@chakra-ui/react';
-import { useState } from 'react';
+import { useAtomValue } from 'jotai';
+import { useMemo, useState } from 'react';
 
+import { myTeamAtom } from '@/atom';
 import StudyModal from '@/containers/study/Modal/StudyModal';
 import StudyGallery from '@/containers/study-gallery/StudyGallery';
+import useGetUser from '@/hooks/useGetUser';
 
 const Page = ({ params }: { params: { teamId: number } }) => {
   const [isOpenModal, setIsOpenModal] = useState(false);
 
+  const user = useGetUser();
+  const myTeam = useAtomValue(myTeamAtom);
+
+  const auth = useMemo(() => {
+    if (!user || !user.isLogin) return false;
+    return myTeam.some((teamId) => teamId === +params.teamId);
+  }, [user, myTeam, params.teamId]);
+
   return (
     <Flex align="center" direction="column" gap="9" w="100%" p="8">
       <Flex justify="space-between" w="100%">
         <Flex direction="row" gap="2">
           <Text textStyle="bold_2xl">스터디 갤러리</Text>
         </Flex>
-        <Button color="white" bg="orange_dark" onClick={() => setIsOpenModal(true)} rounded="full">
-          스터디 추가
-        </Button>
+        {auth && (
+          <Button color="white" bg="orange_dark" onClick={() => setIsOpenModal(true)} rounded="full">
+            스터디 추가
+          </Button>
+        )}
       </Flex>
       <StudyGallery teamId={params.teamId} refetchTrigger={isOpenModal} />
       <StudyModal teamId={params.teamId} isOpen={isOpenModal} setIsModalOpen={setIsOpenModal} studyInfo={null} />

diff --git a/src/app/team/[teamId]/study/[studyId]/document/page.tsx b/src/app/team/[teamId]/study/[studyId]/document/page.tsx
@@ -1,24 +1,56 @@
 'use client';
 
 import { Button, Flex, Text } from '@chakra-ui/react';
-import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useMemo, useState } from 'react';
 
+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 router = useRouter();
+
+  const myTeam = useGetMyTeam();
+  const user = useGetUser();
+  if (user && !user.isLogin) router.replace(`/team/${params.teamId}`);
+  if (myTeam && !myTeam.some((id) => id === +params.teamId)) router.replace(`/team/${params.teamId}`);
+
+  const auth = useMemo(() => {
+    if (!user || !user.isLogin) return false;
+    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%">
         <Flex direction="row" gap="2">
           <Text textStyle="bold_2xl">학습자료 갤러리</Text>
         </Flex>
-        <Button color="white" bg="orange_dark" onClick={() => setOpenCreateModal(true)} rounded="full">
-          자료 등록
-        </Button>
+        {auth && (
+          <Button color="white" bg="orange_dark" onClick={() => setOpenCreateModal(true)} rounded="full">
+            자료 등록
+          </Button>
+        )}
       </Flex>
       <Documents groupId={params.studyId} category="studies" refetchTrigger={openCreateModal} />
       <CreateDocumentModal

diff --git a/src/app/team/[teamId]/study/[studyId]/page.tsx b/src/app/team/[teamId]/study/[studyId]/page.tsx
@@ -1,15 +1,13 @@
 'use client';
 
 import { Flex, Grid, IconButton, Text, Link, Card } from '@chakra-ui/react';
-import { useAtomValue } from 'jotai';
 import NextLink from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { MdOutlineArrowForwardIos } from 'react-icons/md';
 
 import { getDocumentList } from '@/app/api/document';
 import { getStudy, getStudyMembers } from '@/app/api/study';
-import { myTeamAtom } from '@/atom';
 import DocumentCard from '@/components/DocumentCard';
 import Title from '@/components/Title';
 import CurriculumCard from '@/containers/study/CurriculumCard';
@@ -21,6 +19,7 @@ import StudyControlPanel from '@/containers/study/StudyControlPanel';
 import StudyInfoCard from '@/containers/study/StudyInfoCard';
 import StudyParticipantMenu from '@/containers/study/StudyParticipantMenu';
 import { useGetFetchWithToken } from '@/hooks/useFetchWithToken';
+import useGetMyTeam from '@/hooks/useGetMyTeam';
 import useGetUser from '@/hooks/useGetUser';
 import { DocumentList, ParticipantType, Study, StudyMember } from '@/types';
 
@@ -33,9 +32,9 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
 
   const router = useRouter();
   const user = useGetUser();
-  const myTeam = useAtomValue(myTeamAtom);
+  const myTeam = useGetMyTeam();
   if (user && !user.isLogin) router.replace(`/team/${params.teamId}`);
-  if (user && !myTeam.some((id) => id === +params.teamId)) router.replace(`/team/${params.teamId}`);
+  if (myTeam && !myTeam.some((id) => id === +params.teamId)) router.replace(`/team/${params.teamId}`);
 
   const { result, refetch: refetchStudyMembers } = useGetFetchWithToken(getStudyMembers, [params?.studyId]);
 
@@ -132,7 +131,7 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
                   {documentArray.map((data) => (
                     <DocumentCard
                       id={data.id}
-                      key={data.title}
+                      key={data.id}
                       title={data.title}
                       description={data.description}
                       date={data.date}

diff --git a/src/components/Sidebar/SidebarContent/index.tsx b/src/components/Sidebar/SidebarContent/index.tsx
@@ -24,7 +24,6 @@ const SidebarContent = ({ isOpen, setIsOpen }: SidebarContentProps) => {
   const user = useGetUser();
   const setUser = useSetAtom(userAtom);
   const setMyTeams = useSetAtom(myTeamAtom);
-
   const router = useRouter();
 
   const { data: sidebarInfo } = useGetSideBarInfoQuery();
@@ -35,10 +34,10 @@ const SidebarContent = ({ isOpen, setIsOpen }: SidebarContentProps) => {
   };
 
   useEffect(() => {
-    const myTeams = sidebarInfo?.body.myTeamsAndStudies
-      ? sidebarInfo.body.myTeamsAndStudies.map((team: { teamId: number }) => team.teamId)
-      : [];
-    setMyTeams(myTeams);
+    if (sidebarInfo?.body.myTeamsAndStudies) {
+      const myTeams = sidebarInfo.body.myTeamsAndStudies.map((team: SidebarTeam) => team.teamId);
+      setMyTeams(myTeams);
+    }
   }, [setMyTeams, sidebarInfo]);
 
   return (

diff --git a/src/hooks/useGetMyTeam.ts b/src/hooks/useGetMyTeam.ts
@@ -0,0 +1,17 @@
+import { useAtomValue } from 'jotai';
+import { useEffect, useState } from 'react';
+
+import { myTeamAtom } from '@/atom';
+
+const useGetMyTeam = () => {
+  const [isMounted, setIsMounted] = useState(false);
+  const myTeam = useAtomValue(myTeamAtom);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  return isMounted ? myTeam : null;
+};
+
+export default useGetMyTeam;