#11 feat: nav 팀 대시보드 api 연동 & 팀 대시보드 api type 추가 & Navbar 대시보드 연동 반영

src/components/Dashboard.tsx

@@ -1,16 +1,17 @@
 import * as S from '../styles/DashboardStyled';
+import { DashboardItem } from '../types/PersonalDashBoard';
+import { TeamDashboardInfoResDto } from '../types/TeamDashBoard';
 
 interface Props {
   text: string;
+  dashboard?: DashboardItem[] | TeamDashboardInfoResDto[];
 }
-const Dashboard = ({ text }: Props) => {
+const Dashboard = ({ text, dashboard }: Props) => {
   return (
     <S.DashboardContainer>
       <h6>{text} 대시보드</h6>
-      {Array.from({ length: 7 }, (_, index) => (
-        <S.DashboardItem key={index}>
-          {text} 대시보드 {index + 1}
-        </S.DashboardItem>
+      {dashboard?.map((value, index) => (
+        <S.DashboardItem key={index}>{value.title}</S.DashboardItem>
       ))}
     </S.DashboardContainer>
   );

src/components/Navbar.tsx

@@ -3,29 +3,37 @@ import rightarrow from '../img/rightarrow.png';
 import * as S from '../styles/NavBarStyled';
 import Dashboard from './Dashboard';
 import Profile from './Profile';
+import { usePersonalDashBoardSearch } from '../hooks/usePersonalDashBoard';
+import useTeamDashBoard from '../hooks/useTeamDashBoard';
+import useInfo from '../hooks/useInfo';
 
 const Navbar = () => {
+  const { dashboard } = usePersonalDashBoardSearch();
+  const { teamDashboard } = useTeamDashBoard();
+  const { info } = useInfo();
   return (
     <S.NavBarLayout>
       <div>
         <S.UserInfoContainer>
-          <Profile width="45px" height="45px" />
+          <Profile width="45px" height="45px" profile={info?.data.picture} />
           <S.UserDetailContainer>
-            <p>홍길동님</p>
+            <p>{info?.data.nickName}</p>
 
             <Link to="/mypage">
               마이페이지 <img src={rightarrow} alt="마이페이지 이동 화살표" />
             </Link>
           </S.UserDetailContainer>
         </S.UserInfoContainer>
         <S.ButtonContainer>
-          <S.NavButton variant="primary">대시보드 생성</S.NavButton>
+          <Link to="/createBoard">
+            <S.NavButton variant="primary">대시보드 생성</S.NavButton>
+          </Link>
           <S.NavButton variant="secondary">도전! 챌린지</S.NavButton>
         </S.ButtonContainer>
       </div>
       <S.DashboardsContainer>
-        <Dashboard text="개인" />
-        <Dashboard text="팀" />
+        <Dashboard text="개인" dashboard={dashboard?.data.personalDashboardListResDto} />
+        <Dashboard text="팀" dashboard={teamDashboard?.data.teamDashboardInfoResDto} />
       </S.DashboardsContainer>
     </S.NavBarLayout>
   );

src/hooks/useTeamDashBoard.ts

@@ -0,0 +1,28 @@
+/*
+ * 팀 대시보드 조회 커스텀 훅
+ */
+
+import { useEffect, useState } from 'react';
+import { searchTeamDashBoard } from '../api/BoardApi';
+import { TeamDashboardResponse } from '../types/TeamDashBoard';
+
+const useTeamDashBoard = () => {
+  const [teamDashboard, setTeamDashboard] = useState<TeamDashboardResponse>();
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const data = await searchTeamDashBoard(); // 서버에서 데이터를 받아옵니다.
+        setTeamDashboard(data); // 받아온 데이터를 상태에 저장합니다.
+      } catch (error) {
+        console.log(error);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  return { teamDashboard };
+};
+
+export default useTeamDashBoard;

src/types/TeamDashBoard.ts

@@ -0,0 +1,26 @@
+// 각 요소의 타입을 정의
+export interface TeamDashboardInfoResDto {
+  dashboardId: string | null;
+  myId: string | null;
+  creatorId: string | null;
+  title: string;
+  description: string;
+  blockProgress: number;
+  joinMembers: string[] | null; // joinMembers가 배열일 수 있으므로 string[]로 정의. 타입에 따라 다를 수 있음.
+}
+
+export interface PageInfoResDto {
+  currentPage: number;
+  totalPages: number;
+  totalItems: number;
+}
+
+// 전체 응답 구조를 정의
+export interface TeamDashboardResponse {
+  statusCode: number;
+  message: string;
+  data: {
+    teamDashboardInfoResDto: TeamDashboardInfoResDto[];
+    pageInfoResDto: PageInfoResDto;
+  };
+}