Merge pull request #83 from part3-4team-Taskify/sidemenuApi

[Feat] 사이드 메뉴 Api연결

Author: hhjin1

src/api/axiosInstance.ts

@@ -1,10 +1,15 @@
 import axios from "axios";
 
+// 👉 디버깅용 로그 출력
+console.log("🔐 BASE_URL:", process.env.NEXT_PUBLIC_BASE_URL);
+console.log("🔐 API_TOKEN:", process.env.NEXT_PUBLIC_API_TOKEN);
+
 const axiosInstance = axios.create({
   baseURL: process.env.NEXT_PUBLIC_BASE_URL,
 });
 
+// 👉 Authorization 헤더 자동 설정
 axiosInstance.defaults.headers.common["Authorization"] =
-  `Bearer ${process.env.NEXT_PUBLIC_API_TOKEN} `;
+  `Bearer ${process.env.NEXT_PUBLIC_API_TOKEN}`;
 
 export default axiosInstance;

src/api/sidemenu.ts

@@ -0,0 +1,33 @@
+import axiosInstance from "./axiosInstance";
+
+export interface Dashboard {
+  id: number;
+  title: string;
+  color: string;
+  userId: number;
+  createdAt: string;
+  updatedAt: string;
+  createdByMe: boolean;
+}
+
+export const getDashboards = async ({
+  teamId,
+  navigationMethod = "pagination",
+  page = 1,
+  size = 10,
+}: {
+  teamId: string;
+  navigationMethod?: "pagination";
+  page?: number;
+  size?: number;
+}): Promise<{
+  dashboards: Dashboard[];
+  totalCount: number;
+  cursorId: string | null;
+}> => {
+  const res = await axiosInstance.get(`${teamId}/dashboards`, {
+    params: { navigationMethod, page, size },
+  });
+
+  return res.data;
+};

src/components/SideMenu/SideMenu.tsx

@@ -2,30 +2,45 @@ import clsx from "clsx";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
 
-import { Dashboard } from "@/components/SideMenu/dashboard";
+import { getDashboards } from "@/api/sidemenu";
 
-interface Props {
-  dashboardList: Dashboard[];
+interface Dashboard {
+  id: number;
+  title: string;
+  color: string;
+  userId: number;
+  createdAt: string;
+  updatedAt: string;
+  createdByMe: boolean;
 }
 
-export default function SideMenu({ dashboardList }: Props) {
+interface SideMenuProps {
+  teamId: string;
+}
+
+export default function SideMenu({ teamId }: SideMenuProps) {
   const router = useRouter();
   const { boardid } = router.query;
   const boardId = parseInt(boardid as string);
 
+  const [dashboardList, setDashboardList] = useState<Dashboard[]>([]);
+
+  useEffect(() => {
+    getDashboards({ teamId })
+      .then((res) => setDashboardList(res.dashboards))
+      .catch((err) => console.error("대시보드 로딩 실패:", err));
+  }, [teamId]);
+
   return (
-    <aside
-      className="h-screen overflow-y-auto border-r border-[var(--color-gray3)] px-3 py-5
-                      lg:w-[300px] md:w-[160px] sm:w-[67px] transition-all duration-200 flex flex-col"
-    >
-      {/* 🔥 로고 섹션 - 반응형 정렬 */}
+    <aside className="h-screen overflow-y-auto border-r border-[var(--color-gray3)] px-3 py-5 lg:w-[300px] md:w-[160px] sm:w-[67px] transition-all duration-200 flex flex-col">
+      {/* 로고 */}
       <div className="mb-14 px-3 sm:mb-9 sm:px-0">
         <Link
           href={"/"}
           className="flex lg:justify-start md:justify-start sm:justify-center"
         >
-          {/* ✅ 태블릿 & 데스크톱: 큰 로고 (768px 이상) */}
           <Image
             src="/svgs/logo_taskify.svg"
             alt="Taskify Large Logo"
@@ -35,7 +50,6 @@ export default function SideMenu({ dashboardList }: Props) {
             priority
             unoptimized
           />
-          {/* ✅ 모바일 & 초소형 화면: 작은 로고 (767px 이하) */}
           <Image
             src="/svgs/logo.svg"
             alt="Taskify Small Logo"
@@ -48,10 +62,9 @@ export default function SideMenu({ dashboardList }: Props) {
         </Link>
       </div>
 
-      {/* 🔥 대시보드 리스트 타이틀 + 추가 버튼 */}
+      {/* 대시보드 타이틀 */}
       <nav>
         <div className="mb-4 flex items-center justify-between px-3 md:px-2">
-          {/* ✅ Dash Boards 텍스트 (768px 이상에서만 표시) */}
           <span className="hidden md:block font-12sb text-[var(--color-black)]">
             Dash Boards
           </span>
@@ -66,7 +79,7 @@ export default function SideMenu({ dashboardList }: Props) {
           </button>
         </div>
 
-        {/* 🔥 대시보드 목록 - 모바일에서 중앙 정렬 */}
+        {/* 대시보드 목록 */}
         <ul className="flex flex-col lg:items-start md:items-start sm:items-center sm:w-full">
           {dashboardList.map((dashboard) => (
             <li
@@ -81,7 +94,6 @@ export default function SideMenu({ dashboardList }: Props) {
                 href={`/dashboard/${dashboard.id}`}
                 className="flex items-center gap-3 sm:gap-2"
               >
-                {/* 컬러 아이콘 */}
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   width="8"
@@ -92,8 +104,6 @@ export default function SideMenu({ dashboardList }: Props) {
                 >
                   <circle cx="4" cy="4" r="4" />
                 </svg>
-
-                {/* 대시보드 제목 & 크라운 아이콘 */}
                 <div className="hidden md:flex items-center gap-2">
                   <span className="truncate font-18m md:text-base">
                     {dashboard.title}

src/pages/mydashboard.tsx

@@ -7,28 +7,8 @@ import DashboardAddButton from "@/components/button/DashboardAddButton";
 import CardButton from "@/components/button/CardButton";
 import { PaginationBtn } from "@/components/button/PaginationBtn";
 
-const dummyDashboards: Dashboard[] = [
-  {
-    id: 1,
-    title: "기획안",
-    color: "#F87171",
-    createdAt: "2024-01-01T00:00:00Z",
-    updatedAt: "2024-01-02T00:00:00Z",
-    createdByMe: true,
-    userId: 101,
-  },
-  {
-    id: 2,
-    title: "디자인 시안",
-    color: "#60A5FA",
-    createdAt: "2024-01-03T00:00:00Z",
-    updatedAt: "2024-01-04T00:00:00Z",
-    createdByMe: false,
-    userId: 102,
-  },
-];
-
 export default function MyDashboardPage() {
+  const teamId = "13";
   const [dashCards, setDashCards] = useState<string[]>([]);
   const [currentPage, setCurrentPage] = useState(1);
   const itemsPerPage = 6;
@@ -57,7 +37,7 @@ export default function MyDashboardPage() {
 
   return (
     <div className="flex h-screen overflow-hidden">
-      <SideMenu dashboardList={dummyDashboards} />
+      <SideMenu teamId="13-4" />
 
       <div className="flex flex-col flex-1 overflow-hidden">
         <HeaderDashboard />