#11 feat:마이페이지 팀&챌린지 대시보드 조회 api 연동

AJD-Archive · Sep 11, 2024 · a9d2a25 · a9d2a25
1 parent 359db83
commit a9d2a25
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 10 deletions.
diff --git a/src/api/MyPageApi.ts b/src/api/MyPageApi.ts
@@ -1,4 +1,4 @@
-import { ProfileInfo } from '../types/MyPage';
+import { ProfileInfo, ReturnData } from '../types/MyPage';
 import { axiosInstance } from '../utils/apiConfig';
 
 export const fetchData = async (): Promise<ProfileInfo | undefined> => {
@@ -9,3 +9,13 @@ export const fetchData = async (): Promise<ProfileInfo | undefined> => {
     console.error('Error fetching data:', error);
   }
 };
+
+export const fetchBlockData = async (): Promise<ReturnData | undefined> => {
+  try {
+    const res = await axiosInstance.get('/members/mypage/dashboard-challenges');
+
+    return res.data as ReturnData;
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+};
diff --git a/src/pages/MyPage.tsx b/src/pages/MyPage.tsx
@@ -4,15 +4,22 @@ import googleicon from '../img/googleicon.png';
 import kakaologo from '../img/kakaologo.png';
 import bell from '../img/bell.png';
 import ChallengeBlock from '../components/ChallengeBlock';
-import ReactPaginate from 'react-paginate';
 import * as S from '../styles/MyPageStyled';
 import Profile from '../components/Profile';
 import { useQuery } from '@tanstack/react-query';
-import { fetchData } from '../api/MyPageApi';
+import { fetchBlockData, fetchData } from '../api/MyPageApi';
+import { ChangeEvent, useState } from 'react';
+import Pagination from '@mui/material/Pagination';
+import { TeamDashboardInfoResDto } from '../types/TeamDashBoard';
 
 const MyPage = () => {
   const { data } = useQuery({ queryKey: ['profile'], queryFn: fetchData });
+  const { data: teamBlock } = useQuery({ queryKey: ['teamBlcok'], queryFn: fetchBlockData });
+
+  const [teamBool, setTeamBool] = useState<boolean>(true);
+
   const socialType = data?.data.socialType;
+
   const SocialIcon = () => (
     <S.GoogleImageIcon
       src={socialType === 'KAKAO' ? kakaologo : googleicon}
@@ -45,15 +52,21 @@ const MyPage = () => {
           </S.ImageWrapper>
         </Flex>
         <S.ChanllengeBlockContainer>
-          <ChallengeBlock />
-          <ChallengeBlock />
-          <ChallengeBlock />
-          <ChallengeBlock />
-          <ChallengeBlock />
-          <ChallengeBlock />
+          {teamBool
+            ? teamBlock?.data.teamDashboardList.teamDashboardInfoResDto.map((item, idx) => (
+                <ChallengeBlock key={idx} />
+              ))
+            : teamBlock?.data.challengeList.challengeInfoResDto.map((item, idx) => (
+                <ChallengeBlock key={idx} />
+              ))}
         </S.ChanllengeBlockContainer>
         <S.PagenateBox>
-          <ReactPaginate pageCount={6} pageRangeDisplayed={6} previousLabel="<" nextLabel=">" />
+          {/* <Pagination
+            page={teamPage}
+            count={teamBlock?.data.teamDashboardList.pageInfoResDto.totalPages}
+            defaultPage={1}
+            onChange={onChangePageNation}
+          /> */}
         </S.PagenateBox>
       </S.MyPageLayout>
     </Flex>

diff --git a/src/types/MyPage.ts b/src/types/MyPage.ts
@@ -10,3 +10,42 @@ export interface ProfileInfo {
     introduction: 'string';
   };
 }
+
+interface PageInfoResDto {
+  currentPage: number;
+  totalPages: number;
+  totalItems: number;
+}
+
+interface TeamDashboardInfoResDto {
+  // 팀 대시보드 정보에 맞는 속성들을 추가해야 합니다. 예시로는 아래와 같이 비워둡니다.
+}
+
+interface ChallengeInfoResDto {
+  // 챌린지 정보에 맞는 속성들을 추가해야 합니다. 예시로는 아래와 같이 비워둡니다.
+}
+
+interface TeamDashboardList {
+  teamDashboardInfoResDto: TeamDashboardInfoResDto[];
+  pageInfoResDto: PageInfoResDto;
+}
+
+interface ChallengeList {
+  challengeInfoResDto: ChallengeInfoResDto[];
+  pageInfoResDto: PageInfoResDto;
+}
+
+interface ApiResponse {
+  statusCode: number;
+  message: string;
+  data: {
+    teamDashboardList: TeamDashboardList;
+    challengeList: ChallengeList;
+  };
+}
+export interface ReturnData {
+  data: {
+    teamDashboardList: TeamDashboardList;
+    challengeList: ChallengeList;
+  };
+}