feat: 비회원 및 팀원이 아닌 회원이 접근 시 모달 표시

#371

Author: yeonddori

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}