Merge branch 'develop' into Feature/#348-학습자료_수정_시_모달의_제목을_학습자료_수정으로_변경

BDD-CLUB · Nov 24, 2024 · aa1d594 · aa1d594
2 parents 52cea72 + 552c344
commit aa1d594
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 35 deletions.
diff --git a/src/app/team/[teamId]/page.tsx b/src/app/team/[teamId]/page.tsx
@@ -61,7 +61,7 @@ const Page = ({ params }: { params: { teamId: number } }) => {
       getDocumentList('teams', params.teamId, page, size).then((res) => {
         if (res.ok) {
           setDocumentArray(res.body.content);
-          setDocumentLength(res.body.numberOfElements);
+          setDocumentLength(res.body.totalElements);
         }
       });
     }
@@ -75,10 +75,6 @@ const Page = ({ params }: { params: { teamId: number } }) => {
     TEAM_CATEGORY_INFOS[1].page = `/team/${params.teamId}/document`;
   }, []);
 
-  useEffect(() => {
-    getCardData(cardIdx);
-  }, [cardIdx]);
-
   useEffect(() => {
     getCardData(0);
   }, [category]);
@@ -98,6 +94,7 @@ const Page = ({ params }: { params: { teamId: number } }) => {
   const handlePrevClick = () => {
     if (cardIdx - CARD_PER_PAGE < 0) return;
 
+    getCardData(cardIdx - CARD_PER_PAGE);
     setCardIdx((idx) => idx - CARD_PER_PAGE);
   };
 
@@ -115,13 +112,15 @@ const Page = ({ params }: { params: { teamId: number } }) => {
         }
       });
     } else if (category === '학습자료') {
-      if (cardIdx + CARD_PER_PAGE > documentLength) return;
+      if (cardIdx + CARD_PER_PAGE >= documentLength) return;
 
       const nextPage = Math.floor((cardIdx + CARD_PER_PAGE) / CARD_PER_PAGE);
       const size = CARD_PER_PAGE;
 
       getDocumentList('teams', params.teamId, nextPage, size).then((res) => {
         if (res.ok) {
+          setDocumentArray(res.body.content);
+          setDocumentLength(res.body.totalElements);
           setCardIdx((idx) => idx + CARD_PER_PAGE);
         }
       });

diff --git a/src/app/team/[teamId]/study/[studyId]/page.tsx b/src/app/team/[teamId]/study/[studyId]/page.tsx
@@ -1,12 +1,15 @@
 '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';
@@ -28,7 +31,11 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
   const [isTerminateModalOpen, setIsTerminateModalOpen] = useState<boolean>(false);
   const [documentArray, setDocumentArray] = useState<DocumentList[]>([]);
 
+  const router = useRouter();
   const user = useGetUser();
+  const myTeam = useAtomValue(myTeamAtom);
+  if (user && !user.isLogin) router.replace(`/team/${params.teamId}`);
+  if (user && !myTeam.some((id) => id === +params.teamId)) router.replace(`/team/${params.teamId}`);
 
   const participantData = useGetFetchWithToken(getStudyMembers, [params?.studyId])?.map(
     (data: StudyMember) =>
@@ -67,7 +74,7 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
             </>
           )}
         </Flex>
-        {studyData && studyData?.status !== 'ENDED' && user?.memberId === studyData?.studyLeaderId && (
+        {studyData && studyData?.status !== 'ENDED' && user && user.memberId === studyData?.studyLeaderId && (
           <StudyControlPanel
             editModalOpen={setIsEditModalOpen}
             terminateModalOpen={setIsTerminateModalOpen}
@@ -76,11 +83,11 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
         )}
         <Grid gap="4" templateColumns={{ base: '', xl: '2fr 1fr' }} w="100%" my="4">
           <Flex direction="column" rowGap={{ base: '6', '2xl': '12' }}>
-            {studyData && (
+            {studyData && user && user.memberId !== -1 && (
               <CurriculumCard
                 cropId={studyData.cropId}
                 studyProgressRatio={studyData.studyProgressRatio}
-                isStudyLeader={user?.memberId === studyData?.studyLeaderId}
+                isStudyLeader={user.memberId === studyData.studyLeaderId}
               />
             )}
 
@@ -129,7 +136,7 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
           <Flex direction="column" rowGap={{ base: '6', '2xl': '12' }}>
             {/* <Feed /> */}
             <Flex align="right" direction="column" rowGap="3">
-              {studyData && user?.memberId === studyData.studyLeaderId && (
+              {studyData && user && user.memberId === studyData.studyLeaderId && (
                 <StudyParticipantMenu
                   studyId={params.studyId}
                   teamId={studyData?.teamReference.id}

diff --git a/src/containers/study/CreateDocumentModal/index.tsx b/src/containers/study/CreateDocumentModal/index.tsx
@@ -23,6 +23,8 @@ const DocumentBoxIcon = {
   URL: <BsLink45Deg />,
 };
 
+const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+
 const CreateDocumentModal = ({ isOpen, onClose, categoryData, category }: DocumentModalProps) => {
   const [doctype, setDocType] = useState<DocumentType>('IMAGE');
   const [docList, setDocList] = useState<DocumentList>({
@@ -51,6 +53,20 @@ const CreateDocumentModal = ({ isOpen, onClose, categoryData, category }: Docume
   const handleChange = (value: string) => {
     setSelectedValue(value as DocumentAccessType);
   };
+
+  const handleCloseModal = () => {
+    onClose();
+    setTitle('');
+    setDescription('');
+    setSelectedValue('ALL');
+    setDocList({
+      IMAGE: [],
+      DOCUMENT: [],
+      URL: [],
+    });
+    setDocType('IMAGE');
+  };
+
   const user = useGetUser();
 
   const onConfirmButtonClick = () => {
@@ -84,48 +100,64 @@ const CreateDocumentModal = ({ isOpen, onClose, categoryData, category }: Docume
       const categoryDatas = categoryData as CreateDocument;
       createDocs(categoryDatas.groupType, categoryDatas.groupId, documentForm).then((response) => {
         if (response.ok) {
-          onClose();
+          handleCloseModal();
         }
       });
     } else if (category === 'update') {
       const categoryDatas = categoryData as DocumentDetail;
       postDocs(categoryDatas.id, { title, description, accessType: selectedValue }).then((response) => {
         if (response.ok) {
-          onClose();
+          handleCloseModal();
         }
       });
     } else {
-      onClose();
+      handleCloseModal();
     }
   };
 
   const handleGetDoc = {
     IMAGE: (e: ChangeEvent<HTMLInputElement>) => {
-      const imgs = Array.from(e.target.files || []);
+      const images = Array.from(e.target.files || []);
+      let alertFlag = false;
+      const filteredImages = images.reduce(
+        (r, img) => {
+          if (img.size >= MAX_FILE_SIZE) alertFlag = true;
+          else
+            r.push({
+              key: img.name,
+              name: img.name,
+              content: img,
+            });
+          return r;
+        },
+        [] as { key: string; name: string; content: File }[],
+      );
+      if (alertFlag) alert('10MB 이내의 파일을 첨부해주세요.');
       setDocList((prev) => ({
         ...prev,
-        IMAGE: [
-          ...prev.IMAGE,
-          ...imgs.map((img) => ({
-            key: img.name,
-            name: img.name,
-            content: img,
-          })),
-        ],
+        IMAGE: [...prev.IMAGE, ...filteredImages],
       }));
     },
     DOCUMENT: (e: ChangeEvent<HTMLInputElement>) => {
       const files = Array.from(e.target.files || []);
+      let alertFlag = false;
+      const filteredFiles = files.reduce(
+        (r, file) => {
+          if (file.size >= MAX_FILE_SIZE) alertFlag = true;
+          else
+            r.push({
+              key: file.name,
+              name: file.name,
+              content: file,
+            });
+          return r;
+        },
+        [] as { key: string; name: string; content: File }[],
+      );
+      if (alertFlag) alert('10MB 이내의 파일을 첨부해주세요.');
       setDocList((prev) => ({
         ...prev,
-        DOCUMENT: [
-          ...prev.DOCUMENT,
-          ...files.map((file) => ({
-            key: file.name.toString(),
-            name: file.name,
-            content: file,
-          })),
-        ],
+        DOCUMENT: [...prev.DOCUMENT, ...filteredFiles],
       }));
     },
     URL: () => {
@@ -179,10 +211,10 @@ const CreateDocumentModal = ({ isOpen, onClose, categoryData, category }: Docume
     <ActionModal
       isOpen={isOpen}
       size="xl"
-      onClose={onClose}
+      onClose={handleCloseModal}
       title={`학습자료 ${category === 'create' ? '생성' : '수정'}`}
       subButtonText="취소"
-      onSubButtonClick={onClose}
+      onSubButtonClick={handleCloseModal}
       mainButtonText="등록"
       onMainButtonClick={onConfirmButtonClick}
     >

diff --git a/src/containers/study/DocumentModal/index.tsx b/src/containers/study/DocumentModal/index.tsx
@@ -67,13 +67,20 @@ const DocumentModal = ({ id, isOpen, setIsDocsModalOpen, setReload }: DocumentMo
         <Flex direction="column" gap="2">
           {document?.type === 'IMAGE' &&
             document?.files.map((data) => (
-              <Link key={data.url} href={S3_URL(data.url)} download>
+              <Link key={data.url} href={S3_URL(data.url)} download target="_blank" rel="noopener noreferrer">
                 <Image alt={data.id.toString()} id={data.id.toString()} rounded="2xl" src={S3_URL(data.url)} />
               </Link>
             ))}
           {document?.type === 'DOCUMENT' &&
             document?.files.map((data) => (
-              <Link key={data.url} href={S3_URL(data.url)} download id={data.id.toString()}>
+              <Link
+                key={data.url}
+                href={S3_URL(data.url)}
+                download
+                id={data.id.toString()}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 <IconBox
                   // leftIcon={data.type === 'pdf' ? <BiFile size={30} /> : <BsFolder2Open size={30} />}
                   leftIcon={<BiFile size={30} />}
@@ -83,7 +90,7 @@ const DocumentModal = ({ id, isOpen, setIsDocsModalOpen, setReload }: DocumentMo
             ))}
           {document?.type === 'URL' &&
             document.files.map((data) => (
-              <Link key={data.url} href={data.url}>
+              <Link key={data.url} href={data.url} target="_blank" rel="noopener noreferrer">
                 <IconBox leftIcon={<BiLink size="30" />} content={data.url} />
               </Link>
             ))}