✨ Feat(#2): Sidebar 제작

src/components/Sidebar/DashboardItem.tsx

@@ -0,0 +1,25 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+import crown from '@/../public/icons/crown.svg';
+import { Dashboard } from '@/types/Dashboard.interface';
+
+interface DashboardItemProps {
+  dashboard: Dashboard;
+  nowDashboard?: number;
+}
+
+export default function DashboardItem({ dashboard, nowDashboard }: DashboardItemProps) {
+  const isActive = nowDashboard === dashboard.id;
+  const itemClasses = `flex items-center gap-4 rounded-md px-3 py-3 ${isActive ? 'bg-violet_f1 text-black_33' : 'text-gray_78'} hover:bg-violet_f1`;
+
+  return (
+    <li>
+      <Link href={`/dashboard/${dashboard.id}`} className={itemClasses}>
+        <div className='rounded-full p-1' style={{ backgroundColor: dashboard.color }} />
+        <p className='text-lg font-medium'>{dashboard.title}</p>
+        {dashboard.createdByMe && <Image src={crown} alt='my' />}
+      </Link>
+    </li>
+  );
+}

src/components/Sidebar/index.tsx

@@ -0,0 +1,46 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useSelector } from 'react-redux';
+
+import DashboardItem from './DashboardItem';
+
+import logo from '@/../public/icons/logo.svg';
+import plus from '@/../public/icons/plus.svg';
+import { useFetchDashboards } from '@/hooks/useFetchDashboards';
+import { RootState } from '@/store/store';
+
+export default function Sidebar() {
+  const router = useRouter();
+  const { id } = router.query;
+
+  const { isLoading } = useFetchDashboards();
+  const dashboards = useSelector((state: RootState) => state.dashboards.dashboards);
+
+  if (isLoading) return <div>Loading...</div>;
+
+  return (
+    <aside className='flex h-screen w-72 flex-col gap-14 border-r border-gray_d9 px-3 py-5'>
+      <Link href='/' className='px-3'>
+        <Image src={logo} alt='logo' priority />
+      </Link>
+
+      <div className='flex flex-col gap-2'>
+        <div className='flex items-center justify-between'>
+          <p className='px-3 text-xs font-bold text-gray_78'>Dashboards</p>
+
+          {/* 모달 연결 해야함 */}
+          <a href='#' className='p-3'>
+            <Image src={plus} alt='add' />
+          </a>
+        </div>
+        <div className='mx-2 mb-2 border-b border-gray_d9' />
+        <ul className='flex flex-col gap-2'>
+          {dashboards.map((dashboard) => (
+            <DashboardItem key={dashboard.id} dashboard={dashboard} nowDashboard={Number(id)} />
+          ))}
+        </ul>
+      </div>
+    </aside>
+  );
+}