From 0642b55e33b52e6013f7ecc51ff12815b7917aa3 Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Mon, 15 Jul 2024 10:21:38 +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=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/SideBar/SideBar.jsx      |  5 +++++
 .../src/components/SideBar/SideBar.module.css    | 15 +++++++++++++++
 frontend/src/components/SideBar/SideItem.jsx     | 10 ++++++++++
 .../src/components/SideBar/SideItem.module.css   | 16 ++++++++++++++++
 frontend/src/components/SideBar/SideLink.jsx     | 15 +++++++++++++++
 .../src/components/SideBar/SideLink.module.css   |  8 ++++++++
 frontend/src/components/SideBar/SideTitle.jsx    |  5 +++++
 .../src/components/SideBar/SideTitle.module.css  |  7 +++++++
 frontend/src/components/SideBar/index.js         |  4 ++++
 9 files changed, 85 insertions(+)
 create mode 100644 frontend/src/components/SideBar/SideBar.jsx
 create mode 100644 frontend/src/components/SideBar/SideBar.module.css
 create mode 100644 frontend/src/components/SideBar/SideItem.jsx
 create mode 100644 frontend/src/components/SideBar/SideItem.module.css
 create mode 100644 frontend/src/components/SideBar/SideLink.jsx
 create mode 100644 frontend/src/components/SideBar/SideLink.module.css
 create mode 100644 frontend/src/components/SideBar/SideTitle.jsx
 create mode 100644 frontend/src/components/SideBar/SideTitle.module.css
 create mode 100644 frontend/src/components/SideBar/index.js

diff --git a/frontend/src/components/SideBar/SideBar.jsx b/frontend/src/components/SideBar/SideBar.jsx
new file mode 100644
index 0000000..5fdbfdb
--- /dev/null
+++ b/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>;
+}
diff --git a/frontend/src/components/SideBar/SideBar.module.css b/frontend/src/components/SideBar/SideBar.module.css
new file mode 100644
index 0000000..692b448
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/frontend/src/components/SideBar/SideItem.jsx b/frontend/src/components/SideBar/SideItem.jsx
new file mode 100644
index 0000000..93a1d62
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/frontend/src/components/SideBar/SideItem.module.css b/frontend/src/components/SideBar/SideItem.module.css
new file mode 100644
index 0000000..312a9f5
--- /dev/null
+++ b/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;
+}
diff --git a/frontend/src/components/SideBar/SideLink.jsx b/frontend/src/components/SideBar/SideLink.jsx
new file mode 100644
index 0000000..d93d817
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/frontend/src/components/SideBar/SideLink.module.css b/frontend/src/components/SideBar/SideLink.module.css
new file mode 100644
index 0000000..a4dd687
--- /dev/null
+++ b/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;
+}
diff --git a/frontend/src/components/SideBar/SideTitle.jsx b/frontend/src/components/SideBar/SideTitle.jsx
new file mode 100644
index 0000000..895d8e5
--- /dev/null
+++ b/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>;
+}
diff --git a/frontend/src/components/SideBar/SideTitle.module.css b/frontend/src/components/SideBar/SideTitle.module.css
new file mode 100644
index 0000000..eacb1d4
--- /dev/null
+++ b/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;
+}
diff --git a/frontend/src/components/SideBar/index.js b/frontend/src/components/SideBar/index.js
new file mode 100644
index 0000000..977d3b1
--- /dev/null
+++ b/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';