feat: 사이드바 컴포넌트 추가

frontend/src/components/Layout/MaxWidthLayout.module.css

@@ -12,6 +12,9 @@
 
   & > aside {
     flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
     width: 320px;
   }
 

frontend/src/components/SideBar/SideBar.jsx

@@ -0,0 +1,10 @@
+import styles from './SideBar.module.css';
+
+export default function SideBar({ title, children }) {
+  return (
+    <div className={styles.group}>
+      <h3 className={styles.groupTitle}>{title}</h3>
+      <ul className={styles.groupList}>{children}</ul>
+    </div>
+  );
+}

frontend/src/components/SideBar/SideBar.module.css

@@ -0,0 +1,30 @@
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 0;
+  margin: 0;
+}
+
+.groupTitle {
+  color: var(--text-color);
+  font-size: 24px;
+  line-height: 1.2;
+  font-weight: 700;
+  margin: 0;
+  padding: 0;
+}
+
+.groupList {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  & > li {
+    padding: 0;
+    margin: 0;
+  }
+}

frontend/src/components/SideBar/SideItem.module.css

@@ -7,7 +7,6 @@
   font-size: 20px;
   line-height: 1.2;
   font-weight: 400;
-  margin-bottom: 16px;
 }
 
 .sub {

frontend/src/components/SideBar/index.js

@@ -1,3 +1,4 @@
+export { default as SideBar } from './SideBar';
 export { default as SideItem } from './SideItem';
 export { default as SideLink } from './SideLink';
 export { default as SideTitle } from './SideTitle';