Merge pull request #4 from TaePoong719/feature/#1

디자인 초안이 나옴에 따른 컴포넌트 관계 설정 및 컴포넌트 레이아웃 재조정 (이슈 #1)

src/Router.tsx

@@ -20,9 +20,10 @@ const Router = () => {
 }
 
 const Container = styled.main`
+  margin: 0 auto;
+  max-width: 1200px;
   position: relative;
   top:60px;
-  padding: 10px;
 `
 
 export default Router

src/components/Header.css

@@ -1,4 +1,4 @@
-.header__link_wrapper{
+.header__link-wrapper{
   display:flex;
   justify-content: flex-end;
   margin-right: 3rem;

src/components/Header.tsx

@@ -9,18 +9,25 @@ const Header = () => {
 
   return (
     <Container>
-      <ul className="header__link_wrapper">
-        {
-          pageLink.map((link,idx)=>
-            <li key={pageName[idx]} >
-              <Link to={`/${link}`}> {pageName[idx]} </Link>
-            </li>  
-          )
-        }
-      </ul>
+      <InnerContainer>
+        <ul className="header__link-wrapper">
+          {
+            pageLink.map((link,idx)=>
+              <li key={pageName[idx]} >
+                <Link to={`/${link}`}> {pageName[idx]} </Link>
+              </li>  
+            )
+          }
+        </ul>
+      </InnerContainer>
     </Container>
   )
 }
+const InnerContainer = styled.div`
+  margin: 0 auto;
+  max-width: 1200px;
+
+`
 
 const Container = styled.nav`
   position: fixed;
@@ -29,9 +36,10 @@ const Container = styled.nav`
   right: 0;
   width: 100%;
   height: 60px;
-  background-color: #999;
+  border-bottom: 2px solid #ddd;
   font-size: 1rem;
   z-index: 10;
+  background-color: #fff;
 `
 
 export default Header

src/components/Sidebar.css

@@ -1,4 +1,4 @@
-.sidebar__link_wrapper{
+.sidebar__link-wrapper{
   display:flex;
   flex-flow: column;
   gap: 20px;

src/components/Sidebar.tsx

@@ -14,7 +14,7 @@ const Sidebar = () => {
     // Wiki 사이드바 
     return (
       <Container>
-        <ul className="sidebar__link_wrapper">
+        <ul className="sidebar__link-wrapper">
           {
             sideLink.map((link,idx)=>
               <li key={sideName[idx]} >
@@ -39,13 +39,13 @@ const Sidebar = () => {
 
 const Container = styled.aside`
   position: fixed;
-  left: 0;
-  top: 60px;
-  bottom: 0;
   z-index: 9;
-  width: 140px;
-  height: 100%;
-  background-color: #ddd;
+  width: 180px;
+  height: 100vh;
+  border-right: 2px solid #ddd;
+  box-sizing: border-box;
+  padding: 5px;
+
 `
 
 

src/pages/Gallery.tsx

@@ -53,9 +53,11 @@ Vivamus sed aliquet lacus. Aenean pharetra quis mi vel tempor. Duis id velit ali
 
 const Container = styled.section`
   position: relative;
-  left: 140px;
+  left: 180px;
   height: calc(100% - 60px);
-  width: calc(100% - 140px);
+  width: calc(100% - 180px);
+  padding: 5px;
+  box-sizing: border-box;
 `
 
 export default Gallery

src/pages/Wiki.tsx

@@ -22,9 +22,11 @@ const Wiki = () => {
 
 const Container = styled.section`
   position: relative;
-  left: 140px;
+  left: 180px;
   height: calc(100% - 60px);
-  width: calc(100% - 140px);
+  width: calc(100% - 180px);
+  padding: 5px;
+  box-sizing: border-box;
 `
 
 export default Wiki