[feat] add sidebar dashboard list api call

src/app/(with-header-sidebar)/layout.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import SideBar from '@/components/SideBar';
+import SideBar from '@/components/sidebar/SideBar';
 import styles from './layout.module.css';
 import MainContainer from '@/components/MainContainer';
 

src/app/(with-header-sidebar)/mydashboard/hooks/useApi.ts → src/app/(with-header-sidebar)/mydashboard/_hooks/useApi.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback } from 'react';
 import { AxiosResponse, AxiosError } from 'axios';
-import axiosInstance from '../utils/axiosInstance';
+import axiosInstance from '../_utils/axiosInstance';
 
 type UseApiFetchReturnType<T> = {
   data: T | null;
@@ -50,7 +50,7 @@ export default function useApi<
     } finally {
       setLoading(false);
     }
-  }, [url, options.method, options.params, options.body]);
+  }, [url, JSON.stringify(options)]);
 
   useEffect(() => {
     fetchData();

src/app/(with-header-sidebar)/mydashboard/types/dashboards.ts → src/app/(with-header-sidebar)/mydashboard/_types/dashboards.ts

@@ -1,4 +1,4 @@
-interface Dashboard {
+export interface Dashboard {
   id: number;
   title: string;
   color: string;
@@ -8,14 +8,14 @@ interface Dashboard {
   createdByMe: boolean;
 }
 
-interface GetDashboardsRequestParams {
+export interface GetDashboardsRequestParams {
   navigationMethod: 'infiniteScroll' | 'pagination';
   cursorId?: number;
   page?: number;
   size?: number;
 }
 
-interface GetDashboardsResponse {
+export interface GetDashboardsResponse {
   dashboards: Dashboard[];
   totalCount: number;
   cursorId: number | null;

src/app/(with-header-sidebar)/mydashboard/utils/axiosInstance.ts → src/app/(with-header-sidebar)/mydashboard/_utils/axiosInstance.ts

@@ -11,7 +11,8 @@ const axiosInstance: AxiosInstance = axios.create({
 
 axiosInstance.interceptors.request.use(
   (config) => {
-    const token = 'your-token-here'; // TODO: Add token
+    const token =
+      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NDgwNCwidGVhbUlkIjoiMTAtMSIsImlhdCI6MTczMTcyMzkwNywiaXNzIjoic3AtdGFza2lmeSJ9.k8FqEAl7DbhwxhJNAkkMq8lYrgStN-9I3xrsR0cYm2c'; // TODO: Add token
     if (token) {
       config.headers['Authorization'] = `Bearer ${token}`;
     }

src/app/not-found.module.css

@@ -0,0 +1,3 @@
+.title {
+  color: skyblue;
+}

src/app/not-found.tsx

@@ -0,0 +1,5 @@
+import styles from './not-found.module.css';
+
+export default function NotFoundPage() {
+  return <div className={styles.title}>Page not found!!</div>;
+}

src/components/MainContainer.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
+import Header from './header/Header';
 import styles from './MainContainer.module.css';
-import Header from './Header';
 
 export default function MainContainer({ children }: { children: ReactNode }) {
   return (

src/components/Header.tsx → src/components/header/Header.tsx

@@ -1,20 +1,20 @@
 'use client';
 import { usePathname } from 'next/navigation';
 import Image from 'next/image';
-import Button from './Button';
+import Button from '../Button';
 import UserInfo from './UserInfo';
 import styles from './Header.module.css';
 
 interface HeaderProps {
-  component: React.ComponentType;
+  component?: React.ComponentType;
 }
 
 export default function Header({ component: Component }: HeaderProps) {
   const pathname = usePathname();
 
   return (
     <header className={styles.header}>
-      <span className={styles.title}>내 대시보드</span>
+      <h2 className={styles.title}>내 대시보드</h2>
       <div className={styles.buttonContainer}>
         <Button className={styles.button}>
           <Image

src/components/UserInfo.tsx → src/components/header/UserInfo.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import type { User } from '@/app/(with-header-sidebar)/mydashboard/types/user';
-import styles from './UserInfo.module.css';
+import type { User } from '@/app/(with-header-sidebar)/mydashboard/_types/user';
 import Image from 'next/image';
-import useWindowSize from '@/app/(with-header-sidebar)/mydashboard/hooks/useWindowSize';
+import useWindowSize from '@/app/(with-header-sidebar)/mydashboard/_hooks/useWindowSize';
 import { useState, useEffect } from 'react';
-import UserInfoSkeleton from './skeleton/UserInfoSkeleton';
+import UserInfoSkeleton from '../skeleton/UserInfoSkeleton';
+import styles from './UserInfo.module.css';
 
 const user: User = {
   id: 1,

src/components/sidebar/Dashboards.module.css

@@ -0,0 +1,10 @@
+.dashBoards {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 6px;
+}
+
+.active {
+  color: salmon;
+}

src/components/sidebar/Dashboards.tsx

@@ -0,0 +1,31 @@
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import type { GetDashboardsResponse } from '@/app/(with-header-sidebar)/mydashboard/_types/dashboards';
+import styles from './Dashboards.module.css';
+import useApi from '@/app/(with-header-sidebar)/mydashboard/_hooks/useApi';
+
+export default function Dashboards() {
+  const pathname = usePathname();
+
+  const { data } = useApi<GetDashboardsResponse>('/dashboards', {
+    method: 'GET',
+    params: { navigationMethod: 'infiniteScroll', page: 1, size: 10 },
+  });
+
+  const dashboards = data?.dashboards;
+
+  return (
+    <div className={styles.dashBoards}>
+      {dashboards &&
+        dashboards.map((board) => (
+          <Link
+            key={board.id}
+            href={`/dashboard/${board.id}`}
+            className={`link ${pathname === '/dashboard/' + board.id ? styles.active : ''}`}
+          >
+            {board.title}
+          </Link>
+        ))}
+    </div>
+  );
+}

src/components/sidebar/SideBar.module.css

@@ -0,0 +1,46 @@
+.sideBar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 30px;
+}
+
+.logo {
+  background-color: transparent;
+  text-align: left;
+}
+
+.addDashBoardsContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.addDashBoardsTitle {
+  display: none;
+}
+
+.addButton {
+  background-color: transparent;
+  width: 20px;
+}
+
+@media screen and (min-width: 768px) {
+  .sideBar {
+    min-width: 155px;
+  }
+
+  .addDashBoardsTitle {
+    display: inline;
+    color: var(--gray-500);
+    font-size: 12px;
+    font-weight: 600;
+  }
+}
+
+@media screen and (min-width: 1199px) {
+  .sideBar {
+    min-width: 300px;
+  }
+}

src/components/SideBar.tsx → src/components/sidebar/SideBar.tsx

@@ -1,55 +1,47 @@
 'use client';
 
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
 import Image from 'next/image';
-import Button from './Button';
-import useWindowSize from '@/app/(with-header-sidebar)/mydashboard/hooks/useWindowSize';
+import Button from '../Button';
+import useWindowSize from '@/app/(with-header-sidebar)/mydashboard/_hooks/useWindowSize';
+import Dashboards from './DashBoards';
 import styles from './SideBar.module.css';
 
 export default function SideBar() {
-  const pathname = usePathname();
   const { isMobile } = useWindowSize();
 
   return (
     <div className={styles.sideBar}>
-      <Button aria-label="홈페이지 이동" className={styles.button}>
+      <Button aria-label="홈페이지 이동" className={styles.logo}>
         {isMobile ? (
           <Image
             src="/images/logo_small.svg"
             alt="로고 홈페이지이동"
             width={24}
             height={27}
+            priority
           />
         ) : (
           <Image
             src="/images/logo_large.svg"
             alt="로고 홈페이지이동"
             width={109}
             height={33}
+            priority
           />
         )}
       </Button>
-      <Button aria-label="대시보드 추가하기" className={styles.button}>
-        <Image
-          src="/icons/add_box.svg"
-          alt="대시보드 추가하기"
-          width={20}
-          height={20}
-        />
-      </Button>
-      <Link
-        href={'/dashboard/1'}
-        className={`link ${pathname === '/dashboard/1' ? styles.active : ''}`}
-      >
-        O
-      </Link>
-      <Link
-        href={'/dashboard/2'}
-        className={`link ${pathname === '/dashboard/2' ? styles.active : ''}`}
-      >
-        O
-      </Link>
+      <div className={styles.addDashBoardsContainer}>
+        <span className={styles.addDashBoardsTitle}>Dash Boards</span>
+        <Button aria-label="대시보드 추가하기" className={styles.addButton}>
+          <Image
+            src="/icons/add_box.svg"
+            alt="대시보드 추가하기"
+            width={20}
+            height={20}
+          />
+        </Button>
+      </div>
+      <Dashboards />
     </div>
   );
 }

src/middleware.ts

@@ -0,0 +1,24 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export function middleware(request: NextRequest) {
+  const user = request.cookies.get('user'); // TODO get token
+
+  // const restrictedPaths = ['/dashboard', '/mypage', '/mydashboard'];
+  const restrictedPaths = ['/test'];
+
+  if (
+    restrictedPaths.some((path) => request.nextUrl.pathname.startsWith(path))
+  ) {
+    if (!user) {
+      // return NextResponse.redirect(new URL('/login', request.url));
+      return NextResponse.redirect(new URL('/', request.url));
+    }
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  // matcher: ['/dashboard/:path*', '/mypage', '/mydashboard/:path*'],
+  matcher: ['/test'],
+};