Merge pull request #93 from Youngseo-kangg/dev

[Client] / #23 / Nav.js : nav bar display 수정
codestates · Aug 29, 2021 · 7ae2f50 · 7ae2f50
2 parents 6a77168 + 365da98
commit 7ae2f50
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 61 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/client/src/App.js b/client/src/App.js
@@ -6,7 +6,7 @@ import { useState } from "react";
 import Nav from "./comp/Nav";
 import Modal from "./comp/Modal";
 import Mypage from "./pages/Mypage";
-import { BrowserRouter, Switch, Route, Link } from "react-router-dom";
+import {BrowserRouter, Switch, Route, Link} from "react-router-dom"
 import WriteModal from "./comp/WriteModal";
 
 function App() {
@@ -15,42 +15,41 @@ function App() {
   const [searched, setSearched] = useState(false);
   const [onModal, setOnModal] = useState(false);
   const [writeModal, setWriteModal] = useState(false);
-
+  
   return (
     <BrowserRouter>
       <div id="wrap">
         {onModal ? <Modal /> : null}
         {writeModal ? <WriteModal /> : null}
         <Nav isLogin={isLogin} />
+
+      <div className="exNav">
+        <header>
+          <Link to="/">
+            <h1 id="jurimma"></h1>
+          </Link>
+        </header>
 
-        <div className="exNav">
-          <header>
-            <Link to="/">
-              <h1 id="jurimma"></h1>
-            </Link>
-          </header>
-
-          <Switch>
-            <>
-              <div className="exNav">
-                <Route exact path="/mypage">
-                  <Mypage />
-                </Route>
-                <Route exact path="/">
-                  {isLogin === true && searched === true ? (
-                    <SearchMore data={dummyData.word} />
-                  ) : (
-                    <Search data={dummyData.word} />
-                  )}
-                </Route>
-                <footer>copyright JURIMMA</footer>
-              </div>
-            </>
-          </Switch>
-        </div>
+        <Switch>
+          <>
+            <Route path="/mypage">
+              <Mypage />
+            </Route>
+            <Route exact path="/">
+              {isLogin === true && searched === true ? (
+                <SearchMore data={dummyData.word} />
+              ) : (
+                <Search data={dummyData.word} />
+              )}
+            </Route>
+            <footer>copyright JURIMMA</footer>
+          </>
+        </Switch>
       </div>
+    </div>
     </BrowserRouter>
   );
 }
 
 export default App;
+
diff --git a/client/src/app.css b/client/src/app.css
@@ -35,7 +35,6 @@ button {
   font-family: "Nanum Gothic", "Noto Sans", sans-serif;
   box-sizing: border-box;
 }
-/* HTML5 display-role reset for older browsers */
 
 body {
   line-height: 1;
@@ -88,10 +87,13 @@ h1 {
 
 #wrap {
   display: flex;
+  width:100%;
+  height:100%;
 }
 
 .exNav {
   flex: 5 1 auto;
+  min-height:100vh;
 }
 
 header {
@@ -101,18 +103,6 @@ header {
   place-items: center;
 }
 
-nav {
-  background-color: #38372e;
-  /* background-color: blacks; */
-  height: 100vh;
-  flex: 1 1 auto;
-}
-
-section {
-  height: 60vh;
-  background-color: #ffe65b;
-}
-
 footer {
   height: 4.5vh;
   line-height: 4.5vh;

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
@@ -2,19 +2,18 @@ import React from "react";
 import styled from "styled-components";
 
 const MypageWrap = styled.div`
-  width: 100%;
-  height: 55vh;
-  display: grid;
-  place-items: center;
-  font-size: max(16px, 0.8vw);
-`;
+    width:100%;
+    min-height:55vh;
+    font-size:max(16px, 0.8vw);
+`
 const MypageContent = styled.div`
-  width: 75%;
-  min-width: 200px;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-`;
+    width:75%;
+    min-width:200px;
+    margin:0 auto;
+    display:flex;
+    flex-direction:column;  
+    flex-wrap:wrap;
+`
 const UserContent = styled.div`
   display: flex;
   justify-content: space-between;
@@ -71,7 +70,7 @@ function Mypage() {
             <option>작성 날짜 순</option>
           </select>
         </UserContent>
-
+        
         <ContentList>
           <li className="content">
             <input type="checkbox" />

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>
   );
 }