Feat/38/dashboard layout

src/app/(dashboard)/dashboard/page.tsx

@@ -0,0 +1,3 @@
+export default function page() {
+  return <div>대시시보드 페이지</div>;
+}

src/app/(dashboard)/layout.tsx

@@ -0,0 +1,25 @@
+import { PropsWithChildren } from 'react';
+import Header from '@/components/dashboard-header/Header';
+import Sidebar from '@/components/Sidebar/Sidebar';
+
+export default function layout({ children }: PropsWithChildren) {
+  return (
+    <div className='flex h-screen'>
+      {/* sidebar */}
+      <div className='w-[67px] border-r bg-white md:w-[160px] lg:w-[300px]'>
+        <Sidebar />
+      </div>
+
+      {/* main */}
+      <main className='flex-1 overflow-y-auto bg-gray-10'>
+        {/* header */}
+        <div className='sticky left-0 top-0 z-30 bg-white'>
+          <Header showCrown showSetting showMembers showProfile />
+        </div>
+
+        {/* content page */}
+        {children}
+      </main>
+    </div>
+  );
+}

src/app/(dashboard)/mydashboard/page.tsx

@@ -0,0 +1,3 @@
+export default function page() {
+  return <div>마이데시보드 페이지</div>;
+}

src/components/Sidebar/Sidebar.tsx

@@ -35,21 +35,19 @@ export default function Sidebar() {
   });
 
   return (
-    <aside className='h-screen w-[67px] px-2 py-5 md:w-[160px] lg:w-[300px]'>
-      <div className='flex flex-col items-center gap-[14px] md:items-center md:gap-14 lg:items-stretch'>
+    <aside className='flex h-screen flex-col px-2 py-5'>
+      <div className='mb-[14px] flex justify-center md:mb-14 md:justify-start'>
         <SidebarLogo />
-
-        <div className='flex flex-col gap-8'>
-          <div className='flex flex-col gap-4'>
-            <div className='flex justify-center md:justify-between'>
-              <p className='hidden text-xs font-semibold text-gray-50 md:block'>Dash Boards</p>
-              <Image src={add_box} width={14} height={14} alt='add_button' className='cursor-pointer' />
-            </div>
-            <SidebarItemList currentGroups={currentGroups} />
-          </div>
-
-          <PaginationControls canGoPrev={canGoPrev} canGoNext={canGoNext} handlePrev={handlePrev} handleNext={handleNext} totalPages={totalPages} alwaysShow={false} className='hidden md:flex' />
+      </div>
+      <div className='mb-4 flex justify-center md:justify-between'>
+        <p className='hidden text-xs font-semibold text-gray-50 md:block'>Dash Boards</p>
+        <Image src={add_box} width={14} height={14} alt='add_button' className='cursor-pointer' />
+      </div>
+      <div className='flex-1 overflow-y-auto [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar]:w-1'>
+        <div className='mb-8'>
+          <SidebarItemList currentGroups={currentGroups} />
         </div>
+        <PaginationControls canGoPrev={canGoPrev} canGoNext={canGoNext} handlePrev={handlePrev} handleNext={handleNext} totalPages={totalPages} alwaysShow={false} className='hidden md:flex' />
       </div>
     </aside>
   );