Merge pull request #10 from TaePoong719/revert-4-feature/#1

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

src/Router.tsx

@@ -20,10 +20,9 @@ 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,25 +9,18 @@ const Header = () => {
 
   return (
     <Container>
-      <InnerContainer>
-        <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>
     </Container>
   )
 }
-const InnerContainer = styled.div`
-  margin: 0 auto;
-  max-width: 1200px;
-
-`
 
 const Container = styled.nav`
   position: fixed;
@@ -36,10 +29,9 @@ const Container = styled.nav`
   right: 0;
   width: 100%;
   height: 60px;
-  border-bottom: 2px solid #ddd;
+  background-color: #999;
   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: 180px;
-  height: 100vh;
-  border-right: 2px solid #ddd;
-  box-sizing: border-box;
-  padding: 5px;
-
+  width: 140px;
+  height: 100%;
+  background-color: #ddd;
 `
 
 

src/pages/Gallery.tsx

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

src/pages/Wiki.tsx

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