Merge branch 'dev' into feature/#5

src/Router.tsx

@@ -24,9 +24,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

@@ -14,23 +14,30 @@ const Header = () => {
 
   return (
     <Container>
-      <ul className="header__link_wrapper">
-        {
-          pageLink.map((link,idx)=>
-            <li key={pageName[idx]} >
-              <Link to={`/${link}`}> {pageName[idx]} </Link>
-            </li>  
-          )
-        }
+      <InnerContainer>
+        <ul className="header__link-wrapper">
+          {
+            pageLink.map((link,idx)=>
+              <li key={pageName[idx]} >
+                <Link to={`/${link}`}> {pageName[idx]} </Link>
+              </li>  
+            )
+          }
         <li>{(user?.displayName) ? <>{user.displayName}님 <button onClick={handlerLogout}>로그아웃</button></> : <Link to={`/login`}> 로그인 </Link>} </li>
-      </ul>
+        </ul>
+      </InnerContainer>
     </Container>
   )
 }
 
 const handlerLogout = () => {
   signOut(auth);
 }
+const InnerContainer = styled.div`
+  margin: 0 auto;
+  max-width: 1200px;
+
+`
 
 const Container = styled.nav`
   position: fixed;
@@ -39,9 +46,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

@@ -46,13 +46,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;
+
+`
 
 export default Sidebar;

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

@@ -33,9 +33,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;