From 7ad0c6ba93e8bc142b341eba5dcc7a2e5f547e4f Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Tue, 16 Jul 2024 17:13:22 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Layout/MaxWidthLayout.module.css          |  3 ++
 frontend/src/components/SideBar/SideBar.jsx   | 10 +++++++
 .../src/components/SideBar/SideBar.module.css | 30 +++++++++++++++++++
 .../components/SideBar/SideItem.module.css    |  1 -
 frontend/src/components/SideBar/index.js      |  1 +
 5 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/SideBar/SideBar.jsx
 create mode 100644 frontend/src/components/SideBar/SideBar.module.css

diff --git a/frontend/src/components/Layout/MaxWidthLayout.module.css b/frontend/src/components/Layout/MaxWidthLayout.module.css
index cbf9fa1..c13c28d 100644
--- a/frontend/src/components/Layout/MaxWidthLayout.module.css
+++ b/frontend/src/components/Layout/MaxWidthLayout.module.css
@@ -12,6 +12,9 @@
 
   & > aside {
     flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
     width: 320px;
   }
 
diff --git a/frontend/src/components/SideBar/SideBar.jsx b/frontend/src/components/SideBar/SideBar.jsx
new file mode 100644
index 0000000..0244f44
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/frontend/src/components/SideBar/SideBar.module.css b/frontend/src/components/SideBar/SideBar.module.css
new file mode 100644
index 0000000..3f73801
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/frontend/src/components/SideBar/SideItem.module.css b/frontend/src/components/SideBar/SideItem.module.css
index b9b1af8..312a9f5 100644
--- a/frontend/src/components/SideBar/SideItem.module.css
+++ b/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 {
diff --git a/frontend/src/components/SideBar/index.js b/frontend/src/components/SideBar/index.js
index 64c4edc..977d3b1 100644
--- a/frontend/src/components/SideBar/index.js
+++ b/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';