Feature/#253 학습자료 crud api 연결 (#292)

* feat : 버튼 클릭시 모달 오픈 연결

* feat : 파일 받아오는거까지 확인

* feat : api 전송 확인

* feat : 팀 페이지에서 카테고리 변경시 데이터 받아와지지 않는 문제 해결

* feat : 주석처리

* feat : img, url 전송 확인, 근데 file 전송 실패 이유는 잘 모르겠음...

* feat : 학습자료카드 bookmark정보 삭제 / mocks와 DTO 형식 통일

* feat : getDocumentList 성공

* feat : 학습자료 post teamId 적용

* feat : 팀페이지 + 버튼 누르면 모달창 오픈
- 팀 id 다를때에도 제대로 들어오는거 확인됨

* feat : 학습자료 상세 페이지 get 완료

* refactor : 주석정리

* feat : 스터디 / 팀별 학습자료 post, get 확인

* feat : 미리보기 img 준비

* feat : 팀 페이지 학습자료 페이지 생성 + delete api 전송 확인
- delete 이후 페이지 update 필요

* api : getDocumentList api 수정 반영 완료 + page navigator 작동 확인

* feat : put Document api  정리

* feat : 수정 버튼 클릭시 수정 모달 open

* feat : 학습자료 api 무한요청 => useEffect 수정

* feat : console 정리

* feat : put 수정 확인 : 화면 update 필요

* feat : 미리보기 이미지 적용

* feat : mocks 수정

src/app/api/document.ts

@@ -1,42 +1,46 @@
 import { fetcher } from '@/app/api/fetcher';
-import { Document, DocumentType } from '@/types';
+import { UpdateDocument } from '@/containers/study/CreateDocumentModal/type';
 
 const documentFetcher = fetcher();
 
-const postDocument = (groupType: number, groupId: number, document: Document, files: FormData) => {
+const postDocument = (token: string, groupType: string, groupId: number, request: FormData) =>
   documentFetcher(`/${groupType}/${groupId}/documents`, {
     method: 'POST',
-    body: { document, files },
+    body: request,
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
   });
-};
 
-const getDocumentList = (groupType: number, groupId: number, page: number = 0, size: number = 4) => {
-  documentFetcher(`/${groupType}/${groupId}/documents?page=${page}&size=${size}`, {
-    method: 'GET',
-  });
-};
+const getDocumentList = (category: string, teamId: number, page: number, size: number) =>
+  documentFetcher(`/${category}/${teamId}/documents?page=${page}&size=${size}`);
 
-const getDocument = (documentId: number) => {
+const getDocument = (token: string, documentId: number) =>
   documentFetcher(`/${documentId}`, {
-    method: 'GET',
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
   });
-};
 
-const putDocument = (documentId: number, title: string, description: string, accessType: DocumentType) => {
+const putDocument = (
+  token: string,
+  documentId: number,
+  request: Pick<UpdateDocument, 'title' | 'description' | 'accessType'>,
+) =>
   documentFetcher(`/${documentId}`, {
     method: 'PUT',
-    body: {
-      title,
-      description,
-      accessType,
+    body: request,
+    headers: {
+      Authorization: `Bearer ${token}`,
     },
   });
-};
 
-const deleteDocument = (documentId: number) => {
+const deleteDocument = (token: string, documentId: number) =>
   documentFetcher(`/${documentId}`, {
     method: 'DELETE',
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
   });
-};
 
 export { postDocument, getDocumentList, getDocument, putDocument, deleteDocument };

src/app/team/[teamId]/document/page.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { Button, Flex, Text } from '@chakra-ui/react';
+import { useState } from 'react';
+
+import Documents from '@/containers/document/Documents';
+import CreateDocumentModal from '@/containers/study/CreateDocumentModal';
+import { CreateDocument } from '@/containers/study/CreateDocumentModal/type';
+
+const Page = ({ params }: { params: { teamId: number } }) => {
+  const [openCreateModal, setOpenCreateModal] = useState(false);
+  const categoryData: CreateDocument = { groupId: params.teamId, groupType: 'teams' };
+  return (
+    <Flex align="center" direction="column" gap="9" w="100%" p="8">
+      <Flex justify="space-between" w="100%">
+        <Flex direction="row" gap="2">
+          <Text textStyle="bold_2xl">학습자료 갤러리</Text>
+        </Flex>
+        <Button color="white" bg="orange_dark" onClick={() => setOpenCreateModal(true)} rounded="full">
+          자료 등록
+        </Button>
+      </Flex>
+      <Documents groupId={params.teamId} category="teams" />
+      <CreateDocumentModal
+        isOpen={openCreateModal}
+        onClose={() => setOpenCreateModal(false)}
+        categoryData={categoryData}
+        // groupId={params.teamId}
+        // groupType="teams"
+        category="create"
+      />
+    </Flex>
+  );
+};
+
+export default Page;

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

@@ -6,14 +6,16 @@ import { Box, Button, Flex, useBreakpointValue } from '@chakra-ui/react';
 import { useEffect, useState } from 'react';
 import { BsLink45Deg } from 'react-icons/bs';
 
+import { getDocumentList } from '@/app/api/document';
 import { getGarden } from '@/app/api/garden';
 import { getStudies } from '@/app/api/study';
 import { getTeamInfo, postInviteTeam } from '@/app/api/team';
-import { DocumentCardProps } from '@/components/DocumentCard/types';
 import Garden3D from '@/components/Garden3D';
 import TabButton from '@/components/TabButton';
 import Title from '@/components/Title';
 import { CARD_PER_PAGE, TEAM_CATEGORY_INFOS } from '@/constants/team';
+import CreateDocumentModal from '@/containers/study/CreateDocumentModal';
+import { CreateDocument } from '@/containers/study/CreateDocumentModal/type';
 import StudyModal from '@/containers/study/Modal/StudyModal';
 import AttendanceRate from '@/containers/team/AttendanceRate';
 import DocumentGridView from '@/containers/team/DocumentGridView';
@@ -22,24 +24,21 @@ import StudyGridView from '@/containers/team/StudyGridView';
 import TeamControlPanel from '@/containers/team/TeamControlPanel';
 import TeamMember from '@/containers/team/teamMember';
 import { useGetFetchWithToken, useMutateWithToken } from '@/hooks/useFetchWithToken';
-import documentCardData from '@/mocks/documentCard';
-import { Garden, StudyRank } from '@/types';
+import { DocumentList, Garden, StudyRank } from '@/types';
 
 const Page = ({ params }: { params: { teamId: number } }) => {
   const teamInfo = useGetFetchWithToken(getTeamInfo, [params.teamId]);
-
   const [garden, setGarden] = useState<Garden[]>([]);
-
   const [category, setCategory] = useState<string>(TEAM_CATEGORY_INFOS[0].name);
   const [cardIdx, setCardIdx] = useState<number>(0);
-
   const [studyArray, setStudyArray] = useState<StudyRank[]>([]);
-  const [documentArray, setDocumentArray] = useState<DocumentCardProps[]>([]);
+  const [documentArray, setDocumentArray] = useState<DocumentList[]>([]);
   const [documentLength, setDocumentLength] = useState<number>(0);
-
   const [isCreateStudyModalOpen, setIsCreateStudyModalOpen] = useState<boolean>(false);
+  const [isCreateDocumentModalOoen, setIsCreateDocumentModalOpen] = useState<boolean>(false);
 
   const inviteTeam = useMutateWithToken(postInviteTeam);
+  const categoryData: CreateDocument = { groupId: params.teamId, groupType: 'teams' };
 
   const getCardData = (start: number) => {
     if (category === '스터디') {
@@ -52,25 +51,34 @@ const Page = ({ params }: { params: { teamId: number } }) => {
         }
       });
     } else if (category === '학습자료') {
+      const page = Math.floor(start / CARD_PER_PAGE);
+      const size = CARD_PER_PAGE;
+
       // TODO: 학습자료 목록 조회하기.
-      setDocumentArray(documentCardData.slice(start, start + CARD_PER_PAGE));
+      getDocumentList('teams', params.teamId, page, size).then((res) => {
+        if (res.ok) {
+          setDocumentArray(res.body.content);
+          setDocumentLength(res.body.numberOfElements);
+        }
+      });
     }
   };
 
   useEffect(() => {
-    // TODO: 아래의 handleNextClick의 조건문을 기능시키기 위해,
-    //       팀 상세 정보 조회 api에서 팀의 스터디와 학습자료 갯수를 받아와야할 것 같습니다.
-    setDocumentLength(documentCardData.length);
-
     getGarden(params.teamId).then((res) => {
       setGarden(res.body);
     });
+    TEAM_CATEGORY_INFOS[1].page = `/team/${params.teamId}/document`;
   }, []);
 
   useEffect(() => {
     getCardData(cardIdx);
   }, [cardIdx]);
 
+  useEffect(() => {
+    getCardData(0);
+  }, [category]);
+
   const handlePrevClick = () => {
     if (cardIdx - CARD_PER_PAGE < 0) return;
 
@@ -90,17 +98,24 @@ 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;
 
-      setCardIdx((idx) => idx + CARD_PER_PAGE);
+      getDocumentList('teams', params.teamId, nextPage, size).then((res) => {
+        if (res.ok) {
+          setCardIdx((idx) => idx + CARD_PER_PAGE);
+        }
+      });
     }
   };
 
   const handlePlusClick = () => {
     if (category === '스터디') {
       setIsCreateStudyModalOpen(true);
     } else if (category === '학습자료') {
-      // TODO: create study `asset` modal 띄우기
+      setIsCreateDocumentModalOpen(true);
     }
   };
 
@@ -190,6 +205,12 @@ const Page = ({ params }: { params: { teamId: number } }) => {
         setIsModalOpen={setIsCreateStudyModalOpen}
         studyInfo={null}
       />
+      <CreateDocumentModal
+        isOpen={isCreateDocumentModalOoen}
+        onClose={() => setIsCreateDocumentModalOpen(false)}
+        categoryData={categoryData}
+        category="create"
+      />
     </>
   );
 };

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

@@ -1,21 +1,32 @@
 'use client';
 
 import { Button, Flex, Text } from '@chakra-ui/react';
+import { useState } from 'react';
 
 import Documents from '@/containers/document/Documents';
+import CreateDocumentModal from '@/containers/study/CreateDocumentModal';
+import { CreateDocument } from '@/containers/study/CreateDocumentModal/type';
 
-const Page = () => {
+const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
+  const [openCreateModal, setOpenCreateModal] = useState(false);
+  const categoryData: CreateDocument = { groupId: params.studyId, groupType: 'studies' };
   return (
     <Flex align="center" direction="column" gap="9" w="100%" p="8">
       <Flex justify="space-between" w="100%">
         <Flex direction="row" gap="2">
           <Text textStyle="bold_2xl">학습자료 갤러리</Text>
         </Flex>
-        <Button color="white" bg="orange_dark" rounded="full">
+        <Button color="white" bg="orange_dark" onClick={() => setOpenCreateModal(true)} rounded="full">
           자료 등록
         </Button>
       </Flex>
-      <Documents />
+      <Documents groupId={params.studyId} category="studies" />
+      <CreateDocumentModal
+        isOpen={openCreateModal}
+        onClose={() => setOpenCreateModal(false)}
+        categoryData={categoryData}
+        category="create"
+      />
     </Flex>
   );
 };

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

@@ -5,6 +5,7 @@ import NextLink from 'next/link';
 import { useEffect, useState } from 'react';
 import { MdOutlineArrowForwardIos } from 'react-icons/md';
 
+import { getDocumentList } from '@/app/api/document';
 import { getStudy } from '@/app/api/study';
 import DocumentCard from '@/components/DocumentCard';
 import Title from '@/components/Title';
@@ -16,20 +17,25 @@ import TerminateStudyModal from '@/containers/study/Modal/TerminateStudyModal';
 import Participant from '@/containers/study/Participant';
 import StudyControlPanel from '@/containers/study/StudyControlPanel';
 import StudyInfoCard from '@/containers/study/StudyInfoCard';
-import documentCardData from '@/mocks/documentCard';
 import participantData from '@/mocks/participant';
-import { Study } from '@/types';
+import { DocumentList, Study } from '@/types';
 
-const Page = ({ params }: { params: { studyId: number } }) => {
+const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
   const [studyData, setStudyData] = useState<Study>();
   const [isEditModalOpen, setIsEditModalOpen] = useState<boolean>(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<boolean>(false);
   const [isTerminateModalOpen, setIsTerminateModalOpen] = useState<boolean>(false);
+  const [documentArray, setDocumentArray] = useState<DocumentList[]>([]);
 
   useEffect(() => {
     getStudy(params.studyId).then((data) => {
       setStudyData(data.body);
     });
+    getDocumentList('studies', params.studyId, 0, 4).then((res) => {
+      if (res.ok) {
+        setDocumentArray(res.body.content);
+      }
+    });
   }, [params.studyId]);
 
   return (
@@ -56,7 +62,14 @@ const Page = ({ params }: { params: { studyId: number } }) => {
           <Flex direction="column" rowGap={{ base: '6', '2xl': '12' }}>
             <CurriculumCard />
             <Flex align="right" direction="column" rowGap="3">
-              <Link as={NextLink} gap="3" display="flex" w="fit-content" ml="auto" href="/team/1/study/1/document">
+              <Link
+                as={NextLink}
+                gap="3"
+                display="flex"
+                w="fit-content"
+                ml="auto"
+                href={`/team/${params.teamId}/study/${params.studyId}/document`}
+              >
                 <IconButton
                   fontSize="16px"
                   aria-label=""
@@ -68,15 +81,17 @@ const Page = ({ params }: { params: { studyId: number } }) => {
                 <Text>전체 보기</Text>
               </Link>
               <Grid gap="2" templateColumns={{ base: 'repeat(2, 1fr)', lg: 'repeat(4, 1fr)' }}>
-                {documentCardData.map((data) => (
+                {documentArray.map((data) => (
                   <DocumentCard
                     id={data.id}
                     key={data.title}
                     title={data.title}
-                    content={data.content}
+                    description={data.description}
                     date={data.date}
-                    bookmark={data.bookmark}
-                    img={data.img}
+                    uploaderName={data.uploaderName}
+                    setReload={() => {}}
+                    files={data.files}
+                    type={data.type}
                   />
                 ))}
               </Grid>