From f7d712a722f2545299fa44991c923a3b7ff5ccea Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Tue, 16 Jul 2024 14:53:19 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=B6=94=EA=B0=80,=20?=
 =?UTF-8?q?=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20=EC=BB=A8=ED=85=90?=
 =?UTF-8?q?=EC=B8=A0=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ArticleDetailAnswer.module.css               |  1 +
 .../src/components/Layout/MaxWidthLayout.jsx     |  4 ++--
 .../components/Layout/MaxWidthLayout.module.css  | 16 ++++++++++++++++
 frontend/src/components/SideBar/SideBar.jsx      |  5 -----
 .../src/components/SideBar/SideBar.module.css    | 15 ---------------
 .../src/components/SideBar/SideItem.module.css   |  1 +
 frontend/src/components/SideBar/SideLink.jsx     |  2 +-
 .../src/components/SideBar/SideLink.module.css   |  5 +++++
 .../src/components/SideBar/SideTitle.module.css  |  1 +
 frontend/src/components/SideBar/index.js         |  1 -
 10 files changed, 27 insertions(+), 24 deletions(-)
 delete mode 100644 frontend/src/components/SideBar/SideBar.jsx
 delete mode 100644 frontend/src/components/SideBar/SideBar.module.css

diff --git a/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.module.css b/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.module.css
index 82466df..cd6460e 100644
--- a/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.module.css
+++ b/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.module.css
@@ -3,6 +3,7 @@
   border: 1px solid var(--border-color);
   border-radius: 16px;
   padding: 12px 16px;
+  box-sizing: border-box;
 }
 
 .answerHeader {
diff --git a/frontend/src/components/Layout/MaxWidthLayout.jsx b/frontend/src/components/Layout/MaxWidthLayout.jsx
index 9b4dc8c..8c302b9 100644
--- a/frontend/src/components/Layout/MaxWidthLayout.jsx
+++ b/frontend/src/components/Layout/MaxWidthLayout.jsx
@@ -1,5 +1,5 @@
 import styles from './MaxWidthLayout.module.css';
 
-export default function MaxWidthLayout({ children }) {
-  return <div className={styles.area}>{children}</div>;
+export default function MaxWidthLayout({ children, hasSideBar = false }) {
+  return <div className={`${styles.area} ${hasSideBar ? styles.hasSideBar : ''}`}>{children}</div>;
 }
diff --git a/frontend/src/components/Layout/MaxWidthLayout.module.css b/frontend/src/components/Layout/MaxWidthLayout.module.css
index 2e1a689..cbf9fa1 100644
--- a/frontend/src/components/Layout/MaxWidthLayout.module.css
+++ b/frontend/src/components/Layout/MaxWidthLayout.module.css
@@ -1,5 +1,21 @@
 .area {
+  width: 100%;
   max-width: 1320px;
   padding: 0 40px;
   margin: 0 auto;
+  box-sizing: border-box;
+}
+
+.hasSideBar {
+  display: flex;
+  gap: 20px;
+
+  & > aside {
+    flex-shrink: 0;
+    width: 320px;
+  }
+
+  & > main {
+    width: 100%;
+  }
 }
diff --git a/frontend/src/components/SideBar/SideBar.jsx b/frontend/src/components/SideBar/SideBar.jsx
deleted file mode 100644
index 5fdbfdb..0000000
--- a/frontend/src/components/SideBar/SideBar.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-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
deleted file mode 100644
index 692b448..0000000
--- a/frontend/src/components/SideBar/SideBar.module.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.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.module.css b/frontend/src/components/SideBar/SideItem.module.css
index 312a9f5..b9b1af8 100644
--- a/frontend/src/components/SideBar/SideItem.module.css
+++ b/frontend/src/components/SideBar/SideItem.module.css
@@ -7,6 +7,7 @@
   font-size: 20px;
   line-height: 1.2;
   font-weight: 400;
+  margin-bottom: 16px;
 }
 
 .sub {
diff --git a/frontend/src/components/SideBar/SideLink.jsx b/frontend/src/components/SideBar/SideLink.jsx
index d93d817..adc5413 100644
--- a/frontend/src/components/SideBar/SideLink.jsx
+++ b/frontend/src/components/SideBar/SideLink.jsx
@@ -3,7 +3,7 @@ import styles from './SideLink.module.css';
 
 export default function SideLink({ children, path }) {
   return (
-    <li>
+    <li className={styles.list}>
       <Link
         to={path}
         className={styles.link}
diff --git a/frontend/src/components/SideBar/SideLink.module.css b/frontend/src/components/SideBar/SideLink.module.css
index a4dd687..1e32624 100644
--- a/frontend/src/components/SideBar/SideLink.module.css
+++ b/frontend/src/components/SideBar/SideLink.module.css
@@ -1,3 +1,8 @@
+.list {
+  list-style: none;
+  margin-bottom: 16px;
+}
+
 .link {
   width: 100%;
   text-decoration: none;
diff --git a/frontend/src/components/SideBar/SideTitle.module.css b/frontend/src/components/SideBar/SideTitle.module.css
index eacb1d4..1b90468 100644
--- a/frontend/src/components/SideBar/SideTitle.module.css
+++ b/frontend/src/components/SideBar/SideTitle.module.css
@@ -4,4 +4,5 @@
   font-size: 24px;
   line-height: 1.2;
   font-weight: 700;
+  margin-bottom: 20px;
 }
diff --git a/frontend/src/components/SideBar/index.js b/frontend/src/components/SideBar/index.js
index 977d3b1..64c4edc 100644
--- a/frontend/src/components/SideBar/index.js
+++ b/frontend/src/components/SideBar/index.js
@@ -1,4 +1,3 @@
-export { default as SideBar } from './SideBar';
 export { default as SideItem } from './SideItem';
 export { default as SideLink } from './SideLink';
 export { default as SideTitle } from './SideTitle';