From 523db77194ce39d77873469d7b4aa1778c3ac8f8 Mon Sep 17 00:00:00 2001 From: llddang <77055208+llddang@users.noreply.github.com> Date: Thu, 5 Dec 2024 20:14:59 +0900 Subject: [PATCH] =?UTF-8?q?Feature/#364=20=ED=95=99=EC=8A=B5=EC=9E=90?= =?UTF-8?q?=EB=A3=8C=EC=8A=A4=ED=84=B0=EB=94=94=20=EA=B0=A4=EB=9F=AC?= =?UTF-8?q?=EB=A6=AC=20=EA=B6=8C=ED=99=98=20(#366)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 팀의 학습자료 갤러리에서 팀원일 때만 학습자료 추가 버튼이 보이도록 수정 #364 * feat: 팀의 스터디 갤러리에서 팀원 일때만 스터디 추가 버튼이 보이도록 수정 #364 * fix: 스터디 페이지로 들어가지 못하던 문제 해결 #364 * feat: 스터디의 학습자료 갤러이에서 스터디원 에게만 자료 등록 버튼 보이도록 수정 #364 * feat: 스터디의 학습자료 갤러리 팀원 또는 스터디원만 접근할 수 있도록 수정 #364 * feat: 스터디 페이지에 들어가지지 않는 문제 일단... #364 * feat: 내 스터디 id 목록 조회 방법 변경 #364 * fix: 자신의 팀인 경우에도 스터디 못 들어가는 오류 해결 #364 --- src/app/api/study.ts | 4 ++ src/app/team/[teamId]/document/page.tsx | 22 ++++++++-- src/app/team/[teamId]/study-gallery/page.tsx | 21 ++++++++-- .../study/[studyId]/document/page.tsx | 40 +++++++++++++++++-- .../team/[teamId]/study/[studyId]/page.tsx | 9 ++--- .../Sidebar/SidebarContent/index.tsx | 9 ++--- src/hooks/useGetMyTeam.ts | 17 ++++++++ 7 files changed, 100 insertions(+), 22 deletions(-) create mode 100644 src/hooks/useGetMyTeam.ts diff --git a/src/app/api/study.ts b/src/app/api/study.ts index 1e0d8299..826368af 100644 --- 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 index 50e175fb..98b00794 100644 --- 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 ( 학습자료 갤러리 - + {auth && ( + + )} { 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 ( 스터디 갤러리 - + {auth && ( + + )} diff --git a/src/app/team/[teamId]/study/[studyId]/document/page.tsx b/src/app/team/[teamId]/study/[studyId]/document/page.tsx index d252fe5c..bdcaeea7 100644 --- 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([]); 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 ( 학습자료 갤러리 - + {auth && ( + + )} { 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) => ( { 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 new file mode 100644 index 00000000..5f6a5799 --- /dev/null +++ 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;