💄 [Client] Nav.js : nav bar display 수정

codestates · Aug 29, 2021 · 94cb453 · 94cb453
1 parent 85f293d
commit 94cb453
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 29 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/client/src/App.js b/client/src/App.js
@@ -31,8 +31,8 @@ function App() {
         </header>
 
         <Switch>
-          <div className="exNav">
-            <Route exact path="/mypage">
+          <>
+            <Route path="/mypage">
               <Mypage />
             </Route>
             <Route exact path="/">
@@ -43,7 +43,7 @@ function App() {
               )}
             </Route>
             <footer>copyright JURIMMA</footer>
-          </div>
+          </>
         </Switch>
       </div>
     </div>

diff --git a/client/src/app.css b/client/src/app.css
@@ -35,10 +35,6 @@ button {
   font-family: "Nanum Gothic", "Noto Sans", sans-serif;
   box-sizing: border-box;
 }
-/* HTML5 display-role reset for older browsers */
-html {
-  /* font-size: 16px; */
-}
 
 body {
   line-height: 1;
@@ -91,10 +87,13 @@ h1 {
 
 #wrap {
   display: flex;
+  width:100%;
+  height:100%;
 }
 
 .exNav {
   flex: 5 1 auto;
+  min-height:100vh;
 }
 
 header {
@@ -104,18 +103,6 @@ header {
   place-items: center;
 }
 
-nav {
-  background-color: #38372e;
-  /* background-color: blacks; */
-  height: 100vh;
-  flex: 1 1 auto;
-}
-
-section {
-  height: 55vh;
-  background-color: #ffe65b;
-}
-
 footer {
   height: 10vh;
   min-height: 67px;

diff --git a/client/src/comp/Nav.js b/client/src/comp/Nav.js
@@ -6,13 +6,13 @@ import profile from "../none_profile.jpeg";
 function Nav({ isLogin }) {
   const NavWrap = styled.nav`
     background-color: #38372e;
-    /* background-color: black; */
-    position: sticky;
-    top: 0;
-    height: 100vh;
     flex: 1 1 auto;
-    display: grid;
-    place-items: center;
+    display:flex;
+    min-height:100vh;
+    justify-content:center;
+    align-items:center;
+    /* display: grid;
+    place-items: center; */
   `;
 
   const Button1 = styled.button`

diff --git a/client/src/pages/Mypage.js b/client/src/pages/Mypage.js
@@ -3,13 +3,16 @@ import styled from "styled-components";
 
 const MypageWrap = styled.div`
     width:100%;
-    display:grid;
-    place-items:center;
+    min-height:55vh;
+    /* display:grid;
+    place-items:center; */
     font-size:max(16px, 0.8vw);
 `
 const MypageContent = styled.div`
     width:75%;
+    border:1px solid red;
     min-width:200px;
+    margin:0 auto;
     display:flex;
     flex-direction:column;  
     flex-wrap:wrap;
@@ -91,6 +94,55 @@ function Mypage(){
                             <p>추천 수</p>
                         </div>
                     </li>
+                    <li className="content">
+                        <input type="checkbox" />
+                        <div className="contentInfo">
+                            <p>단어</p>
+                            <p>단어 뜻</p>
+                            <p>추천 수</p>
+                        </div>
+                    </li>
+                    <li className="content">
+                        <input type="checkbox" />
+                        <div className="contentInfo">
+                            <p>단어</p>
+                            <p>단어 뜻</p>
+                            <p>추천 수</p>
+                        </div>
+                    </li>
+                    <li className="content">
+                        <input type="checkbox" />
+                        <div className="contentInfo">
+                            <p>단어</p>
+                            <p>단어 뜻</p>
+                            <p>추천 수</p>
+                        </div>
+                    </li>
+                    <li className="content">
+                        <input type="checkbox" />
+                        <div className="contentInfo">
+                            <p>단어</p>
+                            <p>단어 뜻</p>
+                            <p>추천 수</p>
+                        </div>
+                    </li>
+                    <li className="content">
+                        <input type="checkbox" />
+                        <div className="contentInfo">
+                            <p>단어</p>
+                            <p>단어 뜻</p>
+                            <p>추천 수</p>
+                        </div>
+                    </li>
+                    <li className="content">
+                        <input type="checkbox" />
+                        <div className="contentInfo">
+                            <p>단어</p>
+                            <p>단어 뜻</p>
+                            <p>추천 수</p>
+                        </div>
+                    </li>
+
                 </ContentList>
 
                 <ContentCheck>

diff --git a/client/src/pages/Search.js b/client/src/pages/Search.js
@@ -1,12 +1,17 @@
+import styled from "styled-components";
 import SearchInput from "../comp/SearchInput";
 import SearchResult from "../comp/SearchResult";
 
+const SearchSection = styled.section`
+  min-height:55vh;
+`
+
 function Search({data}) {
   return (
-    <section>
+    <SearchSection>
       <SearchInput />
       <SearchResult data={data} />
-    </section>
+    </SearchSection>
   );
 }