[feat] add sidebar dashboards

src/app/(with-header-sidebar)/layout.module.css

@@ -5,7 +5,6 @@
 
 .sideBarWrapper {
   border-right: 1px solid var(--gray-300);
-  padding: 22px;
 }
 
 .mainWrapper {

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

@@ -4,7 +4,7 @@ import axiosInstance from '../_utils/axiosInstance';
 
 type UseApiFetchReturnType<T> = {
   data: T | null;
-  loading: boolean;
+  isLoading: boolean;
   error: AxiosError | null;
   refetch: () => Promise<void>;
 };
@@ -27,12 +27,12 @@ export default function useApi<
   options: RequestOptions<TParams, TBody>
 ): UseApiFetchReturnType<T> {
   const [data, setData] = useState<T | null>(null);
-  const [loading, setLoading] = useState<boolean>(true);
+  const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<AxiosError | null>(null);
 
   const fetchData = useCallback(async () => {
     // TODO if (loading) return; add?
-    setLoading(true);
+    setIsLoading(true);
     setError(null);
 
     const config = {
@@ -48,13 +48,13 @@ export default function useApi<
     } catch (err) {
       setError(err as AxiosError);
     } finally {
-      setLoading(false);
+      setIsLoading(false);
     }
   }, [url, JSON.stringify(options)]);
 
   useEffect(() => {
     fetchData();
   }, [fetchData]);
 
-  return { data, loading, error, refetch: fetchData };
+  return { data, isLoading, error, refetch: fetchData };
 }

src/app/reset.css

@@ -37,4 +37,6 @@ button {
 a {
   text-decoration: none;
   color: inherit;
+  display: inherit;
+  width: inherit;
 }

src/components/header/Header.module.css

@@ -75,6 +75,10 @@
     font-size: 16px;
   }
 
+  .icon {
+    display: block;
+  }
+
   .userInfoWrapper {
     margin-left: 36px;
   }
@@ -84,8 +88,4 @@
   .header {
     padding-right: 80px;
   }
-
-  .icon {
-    display: block;
-  }
 }

src/components/sidebar/Dashboards.module.css

@@ -1,10 +1,94 @@
-.dashBoards {
+.dashboards {
+  width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 6px;
 }
 
 .active {
-  color: salmon;
+  border-radius: 4px;
+  background: var(--violet-light);
+}
+
+.titleContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+}
+
+.title,
+.crown {
+  display: none;
+  color: var(--gray-500);
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.arrowLeft,
+.arrowRight {
+  border: 1px solid var(--gray-300);
+  border-right: none;
+  border-radius: 0;
+  background: var(--white);
+  height: 35px;
+}
+
+.arrowRight {
+  border-top: none;
+}
+
+.arrowLeft:disabled,
+.arrowRight:disabled {
+  background: var(--white);
+}
+
+@media screen and (min-width: 768px) {
+  .dashboardsWrapper {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+  }
+
+  .title,
+  .crown {
+    display: inline;
+  }
+
+  .crown {
+    margin-left: -8px;
+  }
+
+  .titleContainer {
+    justify-content: flex-start;
+    gap: 16px;
+    padding: 8px 10px;
+  }
+
+  .arrowWrapper {
+    margin-top: 20px;
+  }
+
+  .arrowLeft,
+  .arrowRight {
+    border: 1px solid var(--gray-300);
+    width: 40px;
+    height: 40px;
+  }
+
+  .arrowLeft {
+    border-radius: 4px 0px 0px 4px;
+  }
+
+  .arrowRight {
+    border-radius: 0px 4px 4px 0px;
+  }
 }

src/components/sidebar/Dashboards.tsx

@@ -1,31 +1,127 @@
 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 type {
+  Dashboard,
+  GetDashboardsResponse,
+} from '@/app/(with-header-sidebar)/mydashboard/_types/dashboards';
 import useApi from '@/app/(with-header-sidebar)/mydashboard/_hooks/useApi';
+import Image from 'next/image';
+import Button from '../Button';
+import { useState } from 'react';
+import styles from './Dashboards.module.css';
 
-export default function Dashboards() {
-  const pathname = usePathname();
+const PAGE_SIZE = 12;
 
+export default function Dashboards() {
+  const [page, setPage] = useState(1);
   const { data } = useApi<GetDashboardsResponse>('/dashboards', {
     method: 'GET',
-    params: { navigationMethod: 'infiniteScroll', page: 1, size: 10 },
+    params: { navigationMethod: 'pagination', page, size: PAGE_SIZE },
   });
 
-  const dashboards = data?.dashboards;
+  const dashboards = data?.dashboards ?? [];
+  const totalCount = data?.totalCount ?? 0;
+  const totalPages = Math.ceil(totalCount / PAGE_SIZE);
+
+  const handlePageChange = (direction: 'next' | 'prev') => {
+    setPage((prevPage) => {
+      if (direction === 'next' && prevPage < totalPages) return prevPage + 1;
+      if (direction === 'prev' && prevPage > 1) return prevPage - 1;
+      return prevPage;
+    });
+  };
+
+  return (
+    <div className={styles.dashboards}>
+      <DashboardList dashboards={dashboards} />
+      <Pagination
+        currentPage={page}
+        totalPages={totalPages}
+        onPageChange={handlePageChange}
+      />
+    </div>
+  );
+}
+
+function DashboardList({ dashboards }: { dashboards: Dashboard[] }) {
+  return (
+    <ul className={styles.dashboardsWrapper}>
+      {dashboards.map((board) => (
+        <DashboardItem key={board.id} {...board} />
+      ))}
+    </ul>
+  );
+}
+
+function DashboardItem({ id, color, title, createdByMe }: Dashboard) {
+  const isActive = usePathname() === `/dashboard/${id}`;
+
+  return (
+    <li>
+      <Link
+        href={`/dashboard/${id}`}
+        className={`link ${isActive ? styles.active : ''}`}
+      >
+        <div className={styles.titleContainer}>
+          <div style={{ background: color }} className={styles.dot}></div>
+          <span className={styles.title}>{title}</span>
+          {createdByMe && (
+            <span className={styles.crown}>
+              <Image src="/icons/crown.svg" alt="왕관" width={15} height={12} />
+            </span>
+          )}
+        </div>
+      </Link>
+    </li>
+  );
+}
+
+function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+}: {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (direction: 'next' | 'prev') => void;
+}) {
+  const isFirstPage = currentPage === 1;
+  const isLastPage = currentPage >= totalPages;
 
   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 className={styles.arrowWrapper}>
+      <Button
+        className={styles.arrowLeft}
+        onClick={() => onPageChange('prev')}
+        disabled={isFirstPage}
+      >
+        <Image
+          src={
+            isFirstPage
+              ? '/icons/arrow_left_light.svg'
+              : '/icons/arrow_left.svg'
+          }
+          alt="왼쪽으로 이동"
+          width={16}
+          height={16}
+        />
+      </Button>
+      <Button
+        className={styles.arrowRight}
+        onClick={() => onPageChange('next')}
+        disabled={isLastPage}
+      >
+        <Image
+          src={
+            isLastPage
+              ? '/icons/arrow_right_light.svg'
+              : '/icons/arrow_right.svg'
+          }
+          alt="오른쪽으로 이동"
+          width={16}
+          height={16}
+        />
+      </Button>
     </div>
   );
 }

src/components/sidebar/SideBar.module.css

@@ -2,19 +2,18 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 30px;
+  gap: 15px;
 }
 
 .logo {
   background-color: transparent;
-  text-align: left;
+  padding-top: 22px;
+  margin-bottom: 10px;
+  text-align: center;
 }
 
 .addDashBoardsContainer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
+  padding: 0 22px;
 }
 
 .addDashBoardsTitle {
@@ -29,6 +28,20 @@
 @media screen and (min-width: 768px) {
   .sideBar {
     min-width: 155px;
+    padding: 0 12px;
+  }
+
+  .logo {
+    text-align: left;
+    margin-bottom: 25px;
+  }
+
+  .addDashBoardsContainer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 0;
   }
 
   .addDashBoardsTitle {

src/components/sidebar/SideBar.tsx

@@ -3,15 +3,21 @@
 import Image from 'next/image';
 import Button from '../Button';
 import useWindowSize from '@/app/(with-header-sidebar)/mydashboard/_hooks/useWindowSize';
-import Dashboards from './DashBoards';
+import Dashboards from './Dashboards';
+import { useRouter } from 'next/navigation';
 import styles from './SideBar.module.css';
 
 export default function SideBar() {
   const { isMobile } = useWindowSize();
+  const router = useRouter();
 
   return (
     <div className={styles.sideBar}>
-      <Button aria-label="홈페이지 이동" className={styles.logo}>
+      <Button
+        aria-label="홈페이지 이동"
+        className={styles.logo}
+        onClick={() => router.push('/')}
+      >
         {isMobile ? (
           <Image
             src="/images/logo_small.svg"