Feature/#354 QA에서 발견된 UX 문제 해결 (#356)

* feat: 학습자료 생성 모달이 닫히면, 남아있던 data 초기화 #354 * feat: 팀페이지에서 학습자료 갯수를 넘어 페이지네비게이션 되는 오류 해결 #354 * feat: 팀원이 아닌 사람이 스터디에 들어올 수 없도록 수정 #354 * feat: 10MB 이내의 파일만 등록 가능하도록 수정 #354 * fix: 학습자료 첨부에서 첨부파일에 null이 들어가는 빌드 오류 해결 #354
BDD-CLUB · Nov 24, 2024 · 9b9b13c · 9b9b13c
1 parent 7aaa69b
commit 9b9b13c
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 32 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="학습자료 등록"
       subButtonText="취소"
-      onSubButtonClick={onClose}
+      onSubButtonClick={handleCloseModal}
       mainButtonText="등록"
       onMainButtonClick={onConfirmButtonClick}
     >