Feature/#371 학습자료 상세 조회 에러 처리

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

@@ -144,6 +144,7 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
                 <Grid gap="2" templateColumns={{ base: 'repeat(2, 1fr)', lg: 'repeat(4, 1fr)' }}>
                   {documentArray.map((data) => (
                     <DocumentCard
+                      teamId={params.teamId}
                       id={data.id}
                       key={data.id}
                       title={data.title}

src/containers/document/Documents/index.tsx

@@ -37,6 +37,7 @@ const Documents = ({ groupId, category, refetchTrigger = false }: DocumentPagePr
           <Grid gap={{ sm: '2', md: '4', xl: '8' }} templateColumns={`repeat(${itemsPerPage / 2}, 1fr)`} w="100%">
             {currentData.map((data) => (
               <DocumentCard
+                teamId={data.teamId}
                 id={data.id}
                 key={data.id}
                 title={data.title}

src/containers/study/DocumentModal/index.tsx

@@ -2,17 +2,20 @@
 
 import { Box, Flex, Text, Image } from '@chakra-ui/react';
 import Link from 'next/link';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { BiFile, BiLink } from 'react-icons/bi';
 
 import { deleteDocument, getDocument } from '@/app/api/document';
+import { getTeamMembers } from '@/app/api/team';
 import IconBox from '@/components/IconBox';
 import ActionModal from '@/components/Modal/ActionModal';
+import AlertModal from '@/components/Modal/AlertModal';
 import S3_URL from '@/constants/s3Url';
 import CreateDocumentModal from '@/containers/study/CreateDocumentModal';
 import { useGetFetchWithToken, useMutateWithToken } from '@/hooks/useFetchWithToken';
+import useGetUser from '@/hooks/useGetUser';
 import colors from '@/theme/foundations/colors';
-import { DocumentDetail } from '@/types';
+import { DocumentDetail, Member } from '@/types';
 
 import { DocumentModalProps } from './types';
 
@@ -39,6 +42,24 @@ const DocumentModal = ({ id, isOpen, setIsDocsModalOpen, setReload }: DocumentMo
     setReload((prev: boolean) => !prev);
   };
 
+  const user = useGetUser();
+  const [isMember, setIsMember] = useState<boolean>(false);
+  const { result: teamMembers } = useGetFetchWithToken(getTeamMembers, [document?.teamId], user);
+
+  useEffect(() => {
+    if (user?.isLogin) {
+      setIsMember(teamMembers?.some((member: Member) => member.id === user.memberId));
+    }
+  }, [teamMembers, user]);
+
+  if (!isMember) {
+    return (
+      <AlertModal isOpen={isOpen} onClose={() => setIsDocsModalOpen(false)} title="접근 권한이 없습니다." size="sm">
+        <Text>{user?.isLogin ? '팀원만 접근 가능합니다.' : '로그인 후 접근 가능합니다.'}</Text>
+      </AlertModal>
+    );
+  }
+
   return (
     <ActionModal
       isOpen={isOpen}

src/containers/team/DocumentGridView/index.tsx

@@ -10,6 +10,7 @@ const DocumentGridView = ({ documentArray, setReload = () => {} }: DocumentGridV
       {documentArray?.map((document) => {
         return (
           <DocumentCard
+            teamId={document.teamId}
             key={document.id}
             id={document.id}
             title={document.title}

src/mocks/documentCard.ts

@@ -2,6 +2,7 @@ import { DocumentList } from '@/types';
 
 const documentCardData: DocumentList[] = [
   {
+    teamId: 1,
     id: 1,
     title: '자료이름1',
     description: '이번 포스팅은 [스터디 목적]에 관한것입니다. 먼저 [목차]는 이렇습니다.',
@@ -18,6 +19,7 @@ const documentCardData: DocumentList[] = [
     type: 'IMAGE',
   },
   {
+    teamId: 1,
     id: 2,
     title: '자료이름2',
     description: '이번 포스팅은 [스터디 목적]에 관한것입니다. 먼저 [목차]는 이렇습니다.',
@@ -34,6 +36,7 @@ const documentCardData: DocumentList[] = [
     type: 'IMAGE',
   },
   {
+    teamId: 1,
     id: 3,
     title: '자료이름3',
     description: '이번 포스팅은 [스터디 목적]에 관한것입니다. 먼저 [목차]는 이렇습니다.',
@@ -51,6 +54,7 @@ const documentCardData: DocumentList[] = [
   },
 
   {
+    teamId: 1,
     id: 4,
     title: '자료이름4',
     description: '이번 포스팅은 [스터디 목적]에 관한것입니다. 먼저 [목차]는 이렇습니다.',
@@ -67,6 +71,7 @@ const documentCardData: DocumentList[] = [
     type: 'IMAGE',
   },
   {
+    teamId: 1,
     id: 5,
     title: '자료이름5',
     description: '이번 포스팅은 [스터디 목적]에 관한것입니다. 먼저 [목차]는 이렇습니다.',
@@ -84,6 +89,7 @@ const documentCardData: DocumentList[] = [
   },
 
   {
+    teamId: 1,
     id: 6,
     title: '자료이름6',
     description: '이번 포스팅은 [스터디 목적]에 관한것입니다. 먼저 [목차]는 이렇습니다.',
@@ -100,6 +106,7 @@ const documentCardData: DocumentList[] = [
     type: 'IMAGE',
   },
   {
+    teamId: 1,
     id: 7,
     title: '자료이름7',
     description: '이번 포스팅은 [스터디 목적]에 관한것입니다. 먼저 [목차]는 이렇습니다.',
@@ -116,6 +123,7 @@ const documentCardData: DocumentList[] = [
     type: 'IMAGE',
   },
   {
+    teamId: 1,
     id: 8,
     title: '자료이름8',
     description: '이번 포스팅은 [스터디 목적]에 관한것입니다. 먼저 [목차]는 이렇습니다.',

src/mocks/documentCardAll.ts

@@ -2,6 +2,7 @@ import { DocumentList } from '@/types';
 
 const documentCardDataAll: DocumentList[] = [
   {
+    teamId: 1,
     id: 1,
     title: '자료이름1',
     description: '이번 포스팅은 [스터디 목적]에 관한것입니다. 먼저 [목차]는 이렇습니다.',
@@ -17,6 +18,7 @@ const documentCardDataAll: DocumentList[] = [
     type: 'IMAGE',
   },
   {
+    teamId: 1,
     id: 2,
     title: '자료이름2',
     description: '이번 포스팅은 [스터디 목적]에 관한것입니다. 먼저 [목차]는 이렇습니다.',
@@ -32,6 +34,7 @@ const documentCardDataAll: DocumentList[] = [
     type: 'IMAGE',
   },
   {
+    teamId: 1,
     id: 3,
     title: '자료이름3',
     description: '이번 포스팅은 [스터디 목적]에 관한것입니다. 먼저 [목차]는 이렇습니다.',
@@ -47,6 +50,7 @@ const documentCardDataAll: DocumentList[] = [
     type: 'IMAGE',
   },
   {
+    teamId: 1,
     id: 4,
     title: '자료이름4',
     description: '이번 포스팅은 [스터디 목적]에 관한것입니다. 먼저 [목차]는 이렇습니다.',
@@ -62,6 +66,7 @@ const documentCardDataAll: DocumentList[] = [
     type: 'IMAGE',
   },
   {
+    teamId: 1,
     id: 5,
     title: '자료이름5',
     description: '이번 포스팅은 [스터디 목적]에 관한것입니다. 먼저 [목차]는 이렇습니다.',
@@ -77,6 +82,7 @@ const documentCardDataAll: DocumentList[] = [
     type: 'IMAGE',
   },
   {
+    teamId: 1,
     id: 6,
     title: '자료이름6',
     description: '이번 포스팅은 [스터디 목적]에 관한것입니다. 먼저 [목차]는 이렇습니다.',
@@ -92,6 +98,7 @@ const documentCardDataAll: DocumentList[] = [
     type: 'IMAGE',
   },
   {
+    teamId: 1,
     id: 7,
     title: '자료이름7',
     description: '이번 포스팅은 [스터디 목적]에 관한것입니다. 먼저 [목차]는 이렇습니다.',
@@ -107,6 +114,7 @@ const documentCardDataAll: DocumentList[] = [
     type: 'IMAGE',
   },
   {
+    teamId: 1,
     id: 8,
     title: '자료이름8',
     description: '이번 포스팅은 [스터디 목적]에 관한것입니다. 먼저 [목차]는 이렇습니다.',
@@ -122,6 +130,7 @@ const documentCardDataAll: DocumentList[] = [
     type: 'IMAGE',
   },
   {
+    teamId: 1,
     id: 9,
     title: '자료이름9',
     description: '이번 포스팅은 [스터디 목적]에 관한것입니다. 먼저 [목차]는 이렇습니다.',
@@ -137,6 +146,7 @@ const documentCardDataAll: DocumentList[] = [
     type: 'IMAGE',
   },
   {
+    teamId: 1,
     id: 10,
     title: '자료이름10',
     description: '이번 포스팅은 [스터디 목적]에 관한것입니다. 먼저 [목차]는 이렇습니다.',
@@ -152,6 +162,7 @@ const documentCardDataAll: DocumentList[] = [
     type: 'IMAGE',
   },
   {
+    teamId: 1,
     id: 11,
     title: '자료이름11',
     description: '이번 포스팅은 [스터디 목적]에 관한것입니다. 먼저 [목차]는 이렇습니다.',
@@ -167,6 +178,7 @@ const documentCardDataAll: DocumentList[] = [
     type: 'IMAGE',
   },
   {
+    teamId: 1,
     id: 12,
     title: '자료이름12',
     description: '이번 포스팅은 [스터디 목적]에 관한것입니다. 먼저 [목차]는 이렇습니다.',

src/types.ts

@@ -111,6 +111,7 @@ export interface Document {
 }
 
 export interface DocumentList {
+  readonly teamId: number;
   id: number;
   title: string;
   description: string;