From 94cb45368b6305d79cf5bc75904d42b1d5da438b Mon Sep 17 00:00:00 2001
From: Youngseo Kang <youngseo.kangg@gmail.com>
Date: Sun, 29 Aug 2021 14:03:38 +0900
Subject: [PATCH] =?UTF-8?q?:lipstick:=20[Client]=20Nav.js=20:=20nav=20bar?=
 =?UTF-8?q?=20display=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .DS_Store                  | Bin 6148 -> 8196 bytes
 client/src/App.js          |   6 ++--
 client/src/app.css         |  19 ++-----------
 client/src/comp/Nav.js     |  12 ++++----
 client/src/pages/Mypage.js |  56 +++++++++++++++++++++++++++++++++++--
 client/src/pages/Search.js |   9 ++++--
 6 files changed, 73 insertions(+), 29 deletions(-)

diff --git a/.DS_Store b/.DS_Store
index cce96022a1b596b2229d29fe8918870e9c966512..a51b23fb4dd8956c011348db0db3968ea975426f 100644
GIT binary patch
delta 530
zcmZoMXmOBWU|?W$DortDU;r^WfEYvza8E20o2aKKDgcrP@)<mH@{^Nt@{>T4n*}+<
zST-wg^fE7I=ir#wz)}xV#=@Y-kjjw9P=>6Ofq^L<D5v)y41g?%x^#w2h7vS&SJBk5
z1I+`gW5{4AWk^C*&FqY<+78I!f-BDiYRhBDXDDJwMboqqSrd@W&5+1Yz)&z*ibal(
z@h7t6WFD5r$!}P@c#RBdbrh-%jSUTS6ig>Kvsq4#VU?;E1ZqoUNM^_elIcKS>oVj3
zEd=rP7_u0Of$Tg~s~H@Drq4qP1s*gLaOqo*rjL^$h{1JoHLI>NJJ6nFpeHkdCY3N0
zquR$P3(~iFE~^FO<}{ua%v=)OKmk`!%mQQYJM(0I5zoo~JRBUr$OT0@!{&INIm`fo
Chl7*=

delta 166
zcmZp1XfcprU|?W$DortDU=RQ@Ie-{Mvv5r;6q~50C<+o_1dF9G6f+bsq%tHk=xr=q
z&dkU$`HMg!<H^Z&!VTOK)z!vk7CH*1MwXMgL}VFfPF4_-XPh<JK}de`O(CPrmcqJ>
w8;gw?7qfG42r>hW1OfqWAmIwKYGdJd=E?jro*;`Em>`Y-xr<?QJkK0v05T6A<p2Nx

diff --git a/client/src/App.js b/client/src/App.js
index 968066a..c1bfc80 100644
--- 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
index f9a7038..553c911 100644
--- 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
index 2e6db35..0aaf132 100644
--- 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
index 3c3c65b..9d9d06e 100644
--- 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
index 98f76a5..bbb85a2 100644
--- 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>
   );
 }