Merge branch 'dev' into dev

codestates · Aug 29, 2021 · 365da98 · 365da98
2 parents 94cb453 + 6a77168
commit 365da98
Show file tree

Hide file tree

Showing 8 changed files with 168 additions and 191 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -52,3 +52,4 @@ function App() {
 }
 
 export default App;
+
diff --git a/client/src/app.css b/client/src/app.css
@@ -104,9 +104,8 @@ header {
 }
 
 footer {
-  height: 10vh;
-  min-height: 67px;
-  line-height: 10vh;
+  height: 4.5vh;
+  line-height: 4.5vh;
   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 }) {
@@ -20,32 +20,53 @@ function Nav({ isLogin }) {
     height: 7vh;
     border: none;
     border-radius: 40px;
-    font-size: 0.98rem;
+    font-size: max(0.85vw, 12px);
     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;
     }
+    :hover {
+      background-color: black;
+      color: white;
+    }
   `;
 
   const Button2 = styled.button`
     width: 20vh;
     height: 7vh;
     border: none;
     border-radius: 40px;
-    font-size: 0.98rem;
+    font-size: max(0.85vw, 12px);
     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;
     }
+    :hover {
+      background-color: black;
+      color: white;
+    }
   `;
 
   const ProfileWrap = styled.div`
     width: 100%;
     text-align: center;
+    cursor: pointer;
     > img {
       width: 22vh;
       height: 22vh;
@@ -58,10 +79,16 @@ function Nav({ isLogin }) {
       height: 7vh;
       border: none;
       border-radius: 40px;
-      font-size: 0.98rem;
+      font-size: max(0.85vw, 12px);
       font-weight: 700;
       display: block;
       margin: 0 auto;
+      transition: 0.3s;
+    }
+    > button:hover {
+      background-color: black;
+      color: white;
+      cursor: pointer;
     }
   `;
 
@@ -76,9 +103,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;
+    padding-left: max;
   }
   > .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;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -52,3 +52,4 @@ function App() {
		}

		export default App;