feat: 사이드바 추가

frontend/src/components/SideBar/SideBar.jsx

@@ -0,0 +1,5 @@
+import styles from './SideBar.module.css';
+
+export default function SideBar({ children }) {
+  return <aside className={styles.sidebar}>{children}</aside>;
+}

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

@@ -0,0 +1,15 @@
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 320px;
+
+  & > ul {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+}

frontend/src/components/SideBar/SideItem.jsx

@@ -0,0 +1,10 @@
+import styles from './SideItem.module.css';
+
+export default function SideItem({ name, sub }) {
+  return (
+    <li className={styles.item}>
+      <div>{name}</div>
+      <div className={styles.sub}>{sub}</div>
+    </li>
+  );
+}

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

@@ -0,0 +1,16 @@
+.item {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  text-decoration: none;
+  color: var(--text-color);
+  font-size: 20px;
+  line-height: 1.2;
+  font-weight: 400;
+}
+
+.sub {
+  color: var(--text-color-secondary);
+  font-size: 16px;
+  line-height: 1.4;
+}

frontend/src/components/SideBar/SideLink.jsx

@@ -0,0 +1,15 @@
+import { Link } from 'react-router-dom';
+import styles from './SideLink.module.css';
+
+export default function SideLink({ children, path }) {
+  return (
+    <li>
+      <Link
+        to={path}
+        className={styles.link}
+      >
+        {children}
+      </Link>
+    </li>
+  );
+}

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

@@ -0,0 +1,8 @@
+.link {
+  width: 100%;
+  text-decoration: none;
+  color: var(--text-color);
+  font-size: 20px;
+  line-height: 1.2;
+  font-weight: 400;
+}

frontend/src/components/SideBar/SideTitle.jsx

@@ -0,0 +1,5 @@
+import styles from './SideTitle.module.css';
+
+export default function SideTitle({ children }) {
+  return <div className={styles.title}>{children}</div>;
+}

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

@@ -0,0 +1,7 @@
+.title {
+  width: 100%;
+  color: var(--text-color);
+  font-size: 24px;
+  line-height: 1.2;
+  font-weight: 700;
+}

frontend/src/components/SideBar/index.js

@@ -0,0 +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';