From ce826a97d86be6789f639bf035263c648ace01f2 Mon Sep 17 00:00:00 2001 From: Lee Naeun Date: Sat, 28 Aug 2021 22:47:37 +0900 Subject: [PATCH] =?UTF-8?q?:lipstick:=20[Client]=20Mypage.js=20:=20hover?= =?UTF-8?q?=EC=99=80=20size=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/App.js | 52 ++++----- client/src/app.css | 5 +- client/src/comp/Nav.js | 25 ++++- client/src/comp/SearchInput.js | 25 +++-- client/src/comp/SearchResult.js | 4 +- client/src/pages/Mypage.js | 186 ++++++++++++++++---------------- 6 files changed, 166 insertions(+), 131 deletions(-) diff --git a/client/src/App.js b/client/src/App.js index 968066a..de34844 100644 --- 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 (
{onModal ? : null} {writeModal ? : null}
); } diff --git a/client/src/app.css b/client/src/app.css index f9a7038..6c044ce 100644 --- 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 index 2e6db35..f3af538 100644 --- 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 }) { LOGOUT - - MYPAGE - + MYPAGE diff --git a/client/src/comp/SearchInput.js b/client/src/comp/SearchInput.js index 42284c8..13eac02 100644 --- 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 index b935a3f..108a257 100644 --- 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; diff --git a/client/src/pages/Mypage.js b/client/src/pages/Mypage.js index 3c3c65b..a2fe553 100644 --- a/client/src/pages/Mypage.js +++ b/client/src/pages/Mypage.js @@ -2,104 +2,110 @@ import React from "react"; import styled from "styled-components"; const MypageWrap = styled.div` - width:100%; - display:grid; - place-items:center; - font-size:max(16px, 0.8vw); -` + width: 100%; + height: 55vh; + display: grid; + place-items: center; + 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; + display: flex; + flex-direction: column; + flex-wrap: wrap; +`; const UserContent = styled.div` - display:flex; - justify-content:space-between; + display: flex; + justify-content: space-between; + padding: 1vw 0; + border-bottom: 3px solid #000; + margin-bottom: 2vw; +`; +const ContentList = styled.ul` + display: flex; + flex-direction: column; + margin-bottom: 2vw; + > .content { + display: flex; + justify-content: space-between; padding: 1vw 0; border-bottom: 3px solid #000; - margin-bottom:2vw; -` -const ContentList = styled.ul` - display:flex; - flex-direction:column; - margin-bottom:2vw; - >.content{ - display:flex; - justify-content: space-between; - padding: 1vw 0; - border-bottom: 3px solid #000; - > input{ - flex:1 1 auto; - } - >.contentInfo{ - flex:5 1 auto; - display:flex; - justify-content: space-evenly; - } + > input { + flex: 1 1 auto; } -` -const ContentCheck = styled.div` - display:flex; - justify-content: space-between; - >button{ - height:2vw; - min-height:25px; - width:8vw; - min-width:80px; - border:2px solid black; - border-radius:20px; - word-break:keep-all; + > .contentInfo { + flex: 5 1 auto; + display: flex; + justify-content: space-evenly; } -` + } +`; +const ContentCheck = styled.div` + display: flex; + justify-content: space-between; + > button { + width: 9vw; + min-width: 75px; + height: 5vh; + border: 2px solid black; + border-radius: 5vh; + word-break: keep-all; + cursor: pointer; + transition: 0.3s; + } + > button:hover { + background-color: black; + color: white; + } +`; -function Mypage(){ - return( - - - -

작성하신 글은 0개 이며, 최대 추천수는 0개 입니다

- - +function Mypage() { + return ( + + + +

작성하신 글은 0개 이며, 최대 추천수는 0개 입니다

+ + - -
  • - -
    -

    단어

    -

    단어 뜻

    -

    추천 수

    -
    -
    • -
  • - -
    -

    단어

    -

    단어 뜻

    -

    추천 수

    -
    -
    • -
  • - -
    -

    단어

    -

    단어 뜻

    -

    추천 수

    -
    -
    • -     + +
  • + +
    +

    단어

    +

    단어 뜻

    +

    추천 수

    +
    +
    • +
  • + +
    +

    단어

    +

    단어 뜻

    +

    추천 수

    +
    +
    • +
  • + +
    +

    단어

    +

    단어 뜻

    +

    추천 수

    +
    +
    • +     - - - - -     -     - ) + + + + +     +     + ); } /*
    @@ -127,4 +133,4 @@ function Mypage(){ */ -export default Mypage \ No newline at end of file +export default Mypage;