Feat/47/todo card component

src/app/(after-login)/dashboard/[id]/page.tsx

@@ -6,7 +6,6 @@ export default async function DashboardDetailPage({ params }: { params: Promise<
 
   return (
     <div className='p-10'>
-      <div className='mb-8'>아이디 {id} : 대시보드 상세페이지</div>
       <div>
         <Link href={`/dashboard/${id}/edit`}>
           <Button>수정하기</Button>

src/app/(after-login)/layout.tsx

@@ -6,14 +6,14 @@ 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]'>
+      <div className='fixed top-0 z-50 w-auto overflow-hidden border-r bg-white md:relative md:w-[160px] lg:w-[300px]'>
         <Sidebar />
       </div>
 
       {/* main */}
-      <main className='flex-1 overflow-y-auto bg-gray-10'>
+      <main className='flex-1 overflow-y-auto bg-gray-10 pl-16 md:pl-0'>
         {/* header */}
-        <div className='sticky left-0 top-0 z-30 bg-white'>
+        <div className='sticky left-16 top-0 z-30 bg-white md:left-0'>
           <Header showCrown showSetting showMembers showProfile />
         </div>
 

src/components/dashboard/Sidebar.tsx

@@ -1,15 +1,45 @@
 'use client';
 
+import { useEffect, useRef, useState } from 'react';
+import { cn } from '@/utils/helper';
 import SidebarDashboardList from '@/components/dashboard/SidebarDashboardList';
 import SidebarLogo from '@/components/dashboard/SidebarLogo';
 import SidebarHeader from '@/components/dashboard/SidebarHeader';
+import { usePathname } from 'next/navigation';
 
 export default function Sidebar() {
+  const pathname = usePathname();
+  const [open, setIsOpen] = useState(false);
+  const sidebarRef = useRef<HTMLDivElement | null>(null);
+
+  const onToggleMenu = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  // 사이드메뉴 외부 클릭시 사이드 메뉴 닫기
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (sidebarRef.current && !sidebarRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+
+  // 라우트에 변화가 생기면 사이드 매뉴 닫기
+  useEffect(() => {
+    setIsOpen(false);
+  }, [pathname]);
+
   return (
-    <aside className='flex h-screen flex-col px-2 py-5'>
+    <aside ref={sidebarRef} className={cn('flex h-screen w-16 flex-col transition-[width] md:w-40 lg:w-[300px]', open && 'w-56')}>
       <SidebarLogo />
-      <SidebarHeader />
-      <SidebarDashboardList />
+      <SidebarHeader open={open} />
+      <SidebarDashboardList open={open} onToggle={onToggleMenu} />
     </aside>
   );
 }