Feature/#280 스터디 목록 조회 api 연결

src/app/api/study.ts

@@ -70,6 +70,9 @@ const leaveStudy = (studyId: number) =>
 
 const getStudyMembers = (studyId: number) => studyFetcher(`/studies/${studyId}/members`);
 
+const getStudies = (studyId: number, page: number, size: number) =>
+  studyFetcher(`/teams/${studyId}/studies?page=${page}&size=${size}`);
+
 const getCurriculum = (token: string, studyId: number) =>
   studyFetcher(`/studies/${studyId}/curriculums`, {
     method: 'GET',
@@ -115,6 +118,7 @@ export {
   deleteStudyMember,
   leaveStudy,
   getStudyMembers,
+  getStudies,
   getCurriculum,
   postCurriculum,
   patchCurriculumCompleted,

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

@@ -7,10 +7,10 @@ import { useEffect, useState } from 'react';
 import { BsLink45Deg } from 'react-icons/bs';
 
 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 { StudyCardProps } from '@/components/StudyCard/types';
 import TabButton from '@/components/TabButton';
 import Title from '@/components/Title';
 import { CARD_PER_PAGE, TEAM_CATEGORY_INFOS } from '@/constants/team';
@@ -23,8 +23,7 @@ import TeamControlPanel from '@/containers/team/TeamControlPanel';
 import TeamMember from '@/containers/team/teamMember';
 import { useGetFetchWithToken, useMutateWithToken } from '@/hooks/useFetchWithToken';
 import documentCardData from '@/mocks/documentCard';
-import studyCardData from '@/mocks/studyCard';
-import { Garden } from '@/types';
+import { Garden, StudyRank } from '@/types';
 
 const Page = ({ params }: { params: { teamId: number } }) => {
   const teamInfo = useGetFetchWithToken(getTeamInfo, [params.teamId]);
@@ -34,7 +33,7 @@ const Page = ({ params }: { params: { teamId: number } }) => {
   const [category, setCategory] = useState<string>(TEAM_CATEGORY_INFOS[0].name);
   const [cardIdx, setCardIdx] = useState<number>(0);
 
-  const [studyArray, setStudyArray] = useState<StudyCardProps[]>([]);
+  const [studyArray, setStudyArray] = useState<StudyRank[]>([]);
   const [studyLength, setStudyLength] = useState<number>(0);
   const [documentArray, setDocumentArray] = useState<DocumentCardProps[]>([]);
   const [documentLength, setDocumentLength] = useState<number>(0);
@@ -45,8 +44,15 @@ const Page = ({ params }: { params: { teamId: number } }) => {
 
   const getCardData = (start: number) => {
     if (category === '스터디') {
-      // TODO: 스터디 목록 조회하기.
-      setStudyArray(studyCardData.slice(start, start + CARD_PER_PAGE));
+      const page = Math.floor(start / CARD_PER_PAGE);
+      const size = CARD_PER_PAGE;
+
+      getStudies(params.teamId, page, size).then((res) => {
+        if (res.ok) {
+          setStudyArray(res.body);
+          setStudyLength(res.body.length);
+        }
+      });
     } else if (category === '학습자료') {
       // TODO: 학습자료 목록 조회하기.
       setDocumentArray(documentCardData.slice(start, start + CARD_PER_PAGE));
@@ -56,7 +62,6 @@ const Page = ({ params }: { params: { teamId: number } }) => {
   useEffect(() => {
     // TODO: 아래의 handleNextClick의 조건문을 기능시키기 위해,
     //       팀 상세 정보 조회 api에서 팀의 스터디와 학습자료 갯수를 받아와야할 것 같습니다.
-    setStudyLength(studyCardData.length);
     setDocumentLength(documentCardData.length);
 
     getGarden(params.teamId).then((res) => {
@@ -75,10 +80,22 @@ const Page = ({ params }: { params: { teamId: number } }) => {
   };
 
   const handleNextClick = () => {
-    if (category === '스터디' && cardIdx + CARD_PER_PAGE >= studyLength) return;
-    if (category === '학습자료' && cardIdx + CARD_PER_PAGE >= documentLength) return;
+    if (category === '스터디') {
+      if (cardIdx + CARD_PER_PAGE > studyLength) return;
+
+      const nextPage = Math.floor((cardIdx + CARD_PER_PAGE) / CARD_PER_PAGE);
+      const size = CARD_PER_PAGE;
+
+      getStudies(params.teamId, nextPage, size).then((res) => {
+        if (res.ok) {
+          setCardIdx((idx) => idx + CARD_PER_PAGE);
+        }
+      });
+    } else if (category === '학습자료') {
+      if (cardIdx + CARD_PER_PAGE >= documentLength) return;
 
-    setCardIdx((idx) => idx + CARD_PER_PAGE);
+      setCardIdx((idx) => idx + CARD_PER_PAGE);
+    }
   };
 
   const handlePlusClick = () => {
@@ -158,7 +175,14 @@ const Page = ({ params }: { params: { teamId: number } }) => {
           )}
           {/* TODO 전체보기, 네비게이션 이동 버튼 */}
           {/* TODO 스터디 카드 */}
-          {category === '스터디' && <StudyGridView studyArray={studyArray} />}
+          {category === '스터디' && (
+            <StudyGridView
+              studyArray={studyArray.map((study, index) => ({
+                ...study.studyReferenceResponse,
+                rank: cardIdx + index + 1,
+              }))}
+            />
+          )}
           {category === '학습자료' && <DocumentGridView documentArray={documentArray} />}
         </Flex>
       </Flex>

src/components/StudyCard/index.tsx

@@ -1,8 +1,8 @@
 import { Card, CardHeader, CardBody, CardFooter, Text, Image, Progress } from '@chakra-ui/react';
 
-import { StudyCardProps } from '@/components/StudyCard/types';
+import { StudyCardProps } from './types';
 
-const StudyCard = ({ name, description, startDate, endDate, cropId, percent, rank }: StudyCardProps) => {
+const StudyCard = ({ name, description, startDate, endDate, cropId, studyProgressRatio, rank }: StudyCardProps) => {
   return (
     <Card
       alignItems="center"
@@ -29,8 +29,8 @@ const StudyCard = ({ name, description, startDate, endDate, cropId, percent, ran
         <Card textStyle="bold_md" alignItems="center" w="8" h="8" textAlign="center" shadow="md">
           {rank}
         </Card>
-        <Progress flex="1" h="1.5" colorScheme="blackAlpha" rounded="md" value={percent} />
-        <Text textStyle="sm">{percent}%</Text>
+        <Progress flex="1" h="1.5" colorScheme="blackAlpha" rounded="md" value={studyProgressRatio} />
+        <Text textStyle="sm">{studyProgressRatio}%</Text>
       </CardFooter>
     </Card>
   );

src/components/StudyCard/types.ts

@@ -1,13 +1,5 @@
-export interface StudyCardProps {
-  id: number;
-  name: string;
-  description: string;
-  startDate: string;
-  endDate: string;
-  status: 'IN_PROGRESS' | 'COMPLETED' | 'NOT_STARTED';
-  isDeleted: boolean;
-  cropId: number;
-  teamId: number;
-  percent: number;
+import { Study } from '@/types';
+
+export interface StudyCardProps extends Study {
   rank: number;
 }

src/containers/team/StudyGridView/index.tsx

@@ -17,10 +17,8 @@ const StudyGridView = ({ studyArray }: StudyGridViewProps) => {
             startDate={study.startDate}
             endDate={study.endDate}
             status={study.status}
-            isDeleted={study.isDeleted}
             cropId={study.cropId}
-            teamId={study.teamId}
-            percent={study.percent}
+            studyProgressRatio={study.studyProgressRatio}
             rank={study.rank}
           />
         );

src/mocks/studyCard.ts

@@ -8,10 +8,8 @@ const studyCardData: StudyCardProps[] = [
     startDate: '2024/01/01',
     endDate: '2024/01/31',
     status: 'IN_PROGRESS',
-    isDeleted: false,
     cropId: 1,
-    teamId: 1,
-    percent: 80,
+    studyProgressRatio: 80,
     rank: 1,
   },
   {
@@ -21,10 +19,8 @@ const studyCardData: StudyCardProps[] = [
     startDate: '2024/01/01',
     endDate: '2024/01/31',
     status: 'IN_PROGRESS',
-    isDeleted: false,
     cropId: 2,
-    teamId: 2,
-    percent: 40,
+    studyProgressRatio: 40,
     rank: 2,
   },
   {
@@ -34,10 +30,8 @@ const studyCardData: StudyCardProps[] = [
     startDate: '2024/01/01',
     endDate: '2024/01/31',
     status: 'IN_PROGRESS',
-    isDeleted: false,
     cropId: 3,
-    teamId: 3,
-    percent: 50,
+    studyProgressRatio: 50,
     rank: 3,
   },
   {
@@ -47,10 +41,8 @@ const studyCardData: StudyCardProps[] = [
     startDate: '2024/01/01',
     endDate: '2024/01/31',
     status: 'IN_PROGRESS',
-    isDeleted: false,
     cropId: 4,
-    teamId: 4,
-    percent: 50,
+    studyProgressRatio: 50,
     rank: 4,
   },
   {
@@ -60,10 +52,8 @@ const studyCardData: StudyCardProps[] = [
     startDate: '2024/01/01',
     endDate: '2024/01/31',
     status: 'IN_PROGRESS',
-    isDeleted: false,
     cropId: 4,
-    teamId: 4,
-    percent: 50,
+    studyProgressRatio: 50,
     rank: 4,
   },
   {
@@ -73,10 +63,8 @@ const studyCardData: StudyCardProps[] = [
     startDate: '2024/01/01',
     endDate: '2024/01/31',
     status: 'IN_PROGRESS',
-    isDeleted: false,
     cropId: 4,
-    teamId: 4,
-    percent: 50,
+    studyProgressRatio: 50,
     rank: 4,
   },
   {
@@ -86,10 +74,8 @@ const studyCardData: StudyCardProps[] = [
     startDate: '2024/01/01',
     endDate: '2024/01/31',
     status: 'IN_PROGRESS',
-    isDeleted: false,
     cropId: 4,
-    teamId: 4,
-    percent: 50,
+    studyProgressRatio: 50,
     rank: 4,
   },
   {
@@ -99,10 +85,8 @@ const studyCardData: StudyCardProps[] = [
     startDate: '2024/01/01',
     endDate: '2024/01/31',
     status: 'IN_PROGRESS',
-    isDeleted: false,
     cropId: 4,
-    teamId: 4,
-    percent: 50,
+    studyProgressRatio: 50,
     rank: 4,
   },
   {
@@ -112,10 +96,8 @@ const studyCardData: StudyCardProps[] = [
     startDate: '2024/01/01',
     endDate: '2024/01/31',
     status: 'IN_PROGRESS',
-    isDeleted: false,
     cropId: 4,
-    teamId: 4,
-    percent: 50,
+    studyProgressRatio: 50,
     rank: 4,
   },
 ];

src/types.ts

@@ -68,6 +68,11 @@ export interface TeamRank {
   teamGardenResponse: Garden[];
 }
 
+export interface StudyRank {
+  point: number;
+  studyReferenceResponse: Study;
+}
+
 export interface Document {
   title: string;
   description: string;