💄 [Client] Mypage.js : hover와 size 수정

codestates · Aug 28, 2021 · ce826a9 · ce826a9
1 parent 85f293d
commit ce826a9
Show file tree

Hide file tree

Showing 6 changed files with 166 additions and 131 deletions.
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,38 +15,40 @@ 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>
 
-        <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 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>
       </div>
-    </div>
     </BrowserRouter>
   );
 }

diff --git a/client/src/app.css b/client/src/app.css
@@ -36,9 +36,6 @@ button {
   box-sizing: border-box;
 }
 /* HTML5 display-role reset for older browsers */
-html {
-  /* font-size: 16px; */
-}
 
 body {
   line-height: 1;
@@ -121,5 +118,5 @@ footer {
   min-height: 67px;
   line-height: 10vh;
   text-align: center;
-  font-size: 0.97rem;
+  font-size: max(0.85vw, 11px);
 }
diff --git a/client/src/comp/Nav.js b/client/src/comp/Nav.js
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import styled from "styled-components";
-import {Link} from "react-router-dom"
+import { Link } from "react-router-dom";
 import profile from "../none_profile.jpeg";
 
 function Nav({ isLogin }) {
@@ -24,6 +24,12 @@ function Nav({ isLogin }) {
     font-weight: 700;
     display: block;
     margin-top: 5vh;
+    cursor: pointer;
+    transition: 0.3s;
+    :hover {
+      background-color: black;
+      color: white;
+    }
     &:nth-child(1) {
       margin-top: 0;
     }
@@ -38,6 +44,12 @@ function Nav({ isLogin }) {
     font-weight: 700;
     display: block;
     margin: 5vh auto 0;
+    cursor: pointer;
+    transition: 0.3s;
+    :hover {
+      background-color: black;
+      color: white;
+    }
     &:nth-child(1) {
       margin-top: 0;
     }
@@ -46,6 +58,7 @@ function Nav({ isLogin }) {
   const ProfileWrap = styled.div`
     width: 100%;
     text-align: center;
+    cursor: pointer;
     > img {
       width: 22vh;
       height: 22vh;
@@ -62,6 +75,12 @@ function Nav({ isLogin }) {
       font-weight: 700;
       display: block;
       margin: 0 auto;
+      transition: 0.3s;
+    }
+    > button:hover {
+      background-color: black;
+      color: white;
+      cursor: pointer;
     }
   `;
 
@@ -76,9 +95,7 @@ function Nav({ isLogin }) {
             </ProfileWrap>
             <Button2>LOGOUT</Button2>
             <Button2>
-              <Link to="/mypage">
-                MYPAGE
-              </Link>
+              <Link to="/mypage">MYPAGE</Link>
             </Button2>
           </div>
         </NavWrap>

diff --git a/client/src/comp/SearchInput.js b/client/src/comp/SearchInput.js
@@ -6,23 +6,36 @@ const SearchWrap = styled.div`
   margin: 0 auto;
   padding: 2vh 0vh 4vh;
   text-align: center;
+  box-sizing: border-box;
   > .searchInput {
-    width: 60%;
-    height: 40px;
+    width: 58%;
+    height: 3.2vw;
+    min-height: 35px;
     border: 2px solid #000;
-    border-radius: 20px;
+    border-radius: 30px;
     margin-right: 10px;
     outline: none;
     padding-left: 20px;
   }
   > .searchBtn {
-    width: 90px;
-    height: 44px;
+    width: 6vw;
+    height: 3.2vw;
+    min-height: 35px;
+    min-width: 50px;
     background-color: #000;
     color: #fff;
     border: none;
     margin-top: 1vh;
-    border-radius: 20px;
+    border-radius: 30px;
+    font-size: max(0.8vw, 11px);
+    border: 2px solid black;
+    cursor: pointer;
+    transition: 0.3s;
+  }
+  > .searchBtn:hover {
+    background-color: white;
+    color: black;
+    border: 2px solid black;
   }
 `;
 function SearchInput() {

diff --git a/client/src/comp/SearchResult.js b/client/src/comp/SearchResult.js
@@ -26,7 +26,7 @@ function SearchResult({ data }) {
       background-color: #ffff8d;
       p {
         padding: 0 5px;
-        font-size: 75%;
+        font-size: max(11px, 0.9vw);
         flex: 1 0 auto;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -63,7 +63,7 @@ function SearchResult({ data }) {
     border: 2px solid black;
     background-color: black;
     color: white;
-    font-size: 0.8rem;
+    font-size: max(11px, 0.8vw);
     transition: 0.2s;
     :hover {
       background-color: white;