Merge pull request #21 from TeamBNBN/fe/sideLayout

[Front-End] feat: 사이드바 레이아웃 추가, 사이드바 컨텐츠 수정

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 {

frontend/src/components/Layout/MaxWidthLayout.jsx

@@ -1,5 +1,5 @@
 import styles from './MaxWidthLayout.module.css';
 
-export default function MaxWidthLayout({ children }) {
+export default function MaxWidthLayout({ children, hasSideBar = false }) {
-  return <div className={styles.area}>{children}</div>;
+  return <div className={`${styles.area} ${hasSideBar ? styles.hasSideBar : ''}`}>{children}</div>;
 }

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%;
+  }
 }

frontend/src/components/SideBar/SideBar.jsx

@@ -1,5 +0,0 @@
-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

@@ -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;
-  }
-}

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 {

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}

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

@@ -1,3 +1,8 @@
+.list {
+  list-style: none;
+  margin-bottom: 16px;
+}
+
 .link {
   width: 100%;
   text-decoration: none;

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

@@ -4,4 +4,5 @@
   font-size: 24px;
   line-height: 1.2;
   font-weight: 700;
+  margin-bottom: 20px;
 }

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';