From 2f18a4905c3a68d8ad2506ba2b6545a8920cffba Mon Sep 17 00:00:00 2001
From: llddang <77055208+llddang@users.noreply.github.com>
Date: Thu, 5 Dec 2024 20:16:46 +0900
Subject: [PATCH] =?UTF-8?q?Feature/#365=20=EC=8A=A4=ED=84=B0=EB=94=94?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20=ED=95=99=EC=8A=B5?=
 =?UTF-8?q?=EC=9E=90=EB=A3=8C=20=EC=B6=94=EA=B0=80=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84=20(#367)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 스터디 페이지에 학습자료 등록 버튼 추가

#364

* feat: 스터디원 목록이 있을 때만 스터디원 목록 컴포넌트를 렌더링하도록 수정

#365
---
 .../team/[teamId]/study/[studyId]/page.tsx    | 57 +++++++++++++------
 1 file changed, 39 insertions(+), 18 deletions(-)

diff --git a/src/app/team/[teamId]/study/[studyId]/page.tsx b/src/app/team/[teamId]/study/[studyId]/page.tsx
index 9452823..1e7a3b4 100644
--- a/src/app/team/[teamId]/study/[studyId]/page.tsx
+++ b/src/app/team/[teamId]/study/[studyId]/page.tsx
@@ -4,12 +4,15 @@ import { Flex, Grid, IconButton, Text, Link, Card } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
+import { BsPlus } from 'react-icons/bs';
 import { MdOutlineArrowForwardIos } from 'react-icons/md';
 
 import { getDocumentList } from '@/app/api/document';
 import { getStudy, getStudyMembers } from '@/app/api/study';
 import DocumentCard from '@/components/DocumentCard';
 import Title from '@/components/Title';
+import CreateDocumentModal from '@/containers/study/CreateDocumentModal';
+import { CreateDocument } from '@/containers/study/CreateDocumentModal/type';
 import CurriculumCard from '@/containers/study/CurriculumCard';
 import DeleteStudyModal from '@/containers/study/Modal/DeleteStudyModal';
 import StudyModal from '@/containers/study/Modal/StudyModal';
@@ -29,6 +32,8 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<boolean>(false);
   const [isTerminateModalOpen, setIsTerminateModalOpen] = useState<boolean>(false);
   const [documentArray, setDocumentArray] = useState<DocumentList[]>([]);
+  const [isCreateDocumentModalOpen, setIsCreateDocumentModalOpen] = useState<boolean>(false);
+  const categoryData: CreateDocument = { groupId: params.studyId, groupType: 'studies' };
 
   const router = useRouter();
   const user = useGetUser();
@@ -57,7 +62,7 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
         setDocumentArray(res.body.content);
       }
     });
-  }, [params.studyId, isEditModalOpen]);
+  }, [params.studyId, isEditModalOpen, isCreateDocumentModalOpen]);
 
   useEffect(() => {
     if (!isTerminateModalOpen) {
@@ -107,25 +112,34 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
               />
             )}
 
-            <Flex align="right" direction="column" rowGap="3" w="100%">
-              <Link
-                as={NextLink}
-                gap="3"
-                display="flex"
-                w="fit-content"
-                ml="auto"
-                href={`/team/${params.teamId}/study/${params.studyId}/document`}
-              >
+            <Flex direction="column" rowGap="3" w="100%">
+              <Flex align="center" justify="space-between">
+                <Link
+                  as={NextLink}
+                  gap="3"
+                  display="flex"
+                  w="fit-content"
+                  href={`/team/${params.teamId}/study/${params.studyId}/document`}
+                >
+                  <IconButton
+                    fontSize="16px"
+                    aria-label=""
+                    icon={<MdOutlineArrowForwardIos />}
+                    isRound
+                    size="icon_sm"
+                    variant="icon_orange"
+                  />
+                  <Text>전체 보기</Text>
+                </Link>
                 <IconButton
-                  fontSize="16px"
+                  shadow="base"
                   aria-label=""
-                  icon={<MdOutlineArrowForwardIos />}
-                  isRound
-                  size="icon_sm"
-                  variant="icon_orange"
+                  icon={<BsPlus />}
+                  onClick={() => setIsCreateDocumentModalOpen(true)}
+                  size="icon_md"
+                  variant="icon_orange_dark"
                 />
-                <Text>전체 보기</Text>
-              </Link>
+              </Flex>
               {documentArray && documentArray.length > 0 ? (
                 <Grid gap="2" templateColumns={{ base: 'repeat(2, 1fr)', lg: 'repeat(4, 1fr)' }}>
                   {documentArray.map((data) => (
@@ -161,7 +175,7 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
                   refetchMembers={handleRefetchMembers}
                 />
               )}
-              <Participant participantInfos={participantData || []} />
+              {participantData && <Participant participantInfos={participantData} />}
             </Flex>
           </Flex>
         </Grid>
@@ -185,6 +199,13 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
         isOpen={isDeleteModalOpen}
         setIsOpen={setIsDeleteModalOpen}
       />
+
+      <CreateDocumentModal
+        isOpen={isCreateDocumentModalOpen}
+        onClose={() => setIsCreateDocumentModalOpen(false)}
+        categoryData={categoryData}
+        category="create"
+      />
     </>
   );
 };