Merge pull request #160 from Lee-Na-eun/dev

[Client] / #57 / Mypage.js : css 및 최신 성능개선
codestates · Sep 1, 2021 · deac43a · deac43a
2 parents 7161941 + 8ac8bd1
commit deac43a
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 133 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -1,5 +1,4 @@
 import "./app.css";
-import dummyData from "./dummy/dummyData";
 import Search from "./pages/Search";
 import SearchMore from "./pages/SearchMore";
 import { useEffect, useState } from "react";
@@ -113,6 +112,7 @@ function App() {
             setCloseLogoutModal={setCloseLogoutModal}
             setisLogin={setisLogin}
             accToken={accToken}
+            setSearched={setSearched}
             setAccToken={setAccToken}
           />
         ) : null}
@@ -205,6 +205,7 @@ function App() {
                   setCurrResult={setCurrResult}
                   setEditContentModal={setEditContentModal}
                   setEditResult={setEditResult}
+                  setUserContent={setUserContent}
                 />
               </Route>
               <Route exact path="/mypageEdit">

diff --git a/client/src/comp/SearchResult.js b/client/src/comp/SearchResult.js
@@ -1,5 +1,6 @@
 import React, { useEffect } from "react";
 import styled from "styled-components";
+import thumbs_up_icon from "../thumbs_up_icon.png";
 import { Link, Redirect } from "react-router-dom";
 import empty from "../empty.png";
 
@@ -43,23 +44,29 @@ function SearchResult({
       cursor: pointer;
       transition: all 0.3s;
       p {
-        padding: 0 5px;
+        flex: 1 1 auto;
         font-size: max(14px, 1vw);
-        flex: 1 0 auto;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
       }
       p:nth-child(2) {
         flex: 3 1 auto;
       }
+      .imgWrap {
+        position: relative;
+        right: 0.5vw;
+      }
+      .imgWrap img {
+        position: relative;
+        top: 0.2vw;
+        width: max(1.1vw, 18px);
+        height: max(1.1vw, 18px);
+      }
     }
     li:nth-child(1) {
       margin-top: 0px;
     }
     li:hover {
-      background-color: #000;
-      color: #fff;
+      background-color: white;
+      color: black;
     }
   `;
   const EmptyResult = styled.div`
@@ -131,7 +138,12 @@ function SearchResult({
                 <li key={idx} onClick={() => showMore(ele)}>
                   <p>{ele.wordName}</p>
                   <p>{ele.wordMean}</p>
-                  <p>{ele.thumbsup}</p>
+                  <p>
+                    <span className="imgWrap">
+                      <img src={thumbs_up_icon} alt="thumbsup" />
+                    </span>
+                    <span>{ele.thumbsup}</span>
+                  </p>
                 </li>
               );
             })}

diff --git a/client/src/comp/logoutModal.js b/client/src/comp/logoutModal.js
@@ -96,6 +96,7 @@ function LogoutModal({
   setCloseLogoutModal,
   setisLogin,
   accToken,
+  setSearched,
   setAccToken,
 }) {
   const url = process.env.REACT_APP_API_URL || `http://localhost:4000`;
@@ -107,6 +108,7 @@ function LogoutModal({
     setCloseLogoutModal(false);
     setAccToken(null);
     setisLogin(false);
+    setSearched(false);
     localStorage.clear();
     history.push("/");
   };

diff --git a/client/src/dummy/dummyData.js b/client/src/dummy/dummyData.js
diff --git a/client/src/pages/Mypage.js b/client/src/pages/Mypage.js
@@ -24,6 +24,28 @@ const UserContent = styled.div`
   padding: 1vw 0;
   border-bottom: 3px solid #000;
   margin-bottom: 2vw;
+  > p {
+    line-height: 20px;
+    font-size: max(0.9vw, 13px);
+    padding: 10px 0;
+    > span {
+      font-weight: 700;
+    }
+  }
+  > select {
+    width: max(5vw, 60px);
+    height: max(2vw, 20px);
+    background-color: white;
+    border-radius: 20px;
+    outline: none;
+    cursor: pointer;
+    text-align-last: center;
+    text-align: center;
+    border: 2px solid black;
+    -ms-text-align-last: center;
+    -moz-text-align-last: center;
+    font-size: max(0.8vw, 10px);
+  }
 `;
 
 const ContentList = styled.ul`
@@ -94,6 +116,7 @@ function Mypage({
     userContent.data.map((el) => el.id)
   );
 
+  console.log(userContent);
   useEffect(() => {
     searchUserWord();
   }, [gotDeleted]); // 삭제시 다시 데이터 받아옴
@@ -167,10 +190,20 @@ function Mypage({
           <MypageContent>
             {" "}
             {/* 내가 쓴 글 목록 */}
+            <div id="allCheck">
+              <input
+                type="checkbox"
+                checked={
+                  checkedItems.length === userContent.data.length ? true : false
+                }
+                onChange={(e) => handleAllCheck(e.target.checked)}
+              />
+              전체 선택
+            </div>
             <UserContent>
               <p>
-                작성하신 글은 {contentCount}개 이며, 최대 추천수는{" "}
-                {contentThumbsupCount}개 입니다
+                작성하신 글은 <span>{contentCount}개</span> 이며, 최대 추천수는{" "}
+                <span>{contentThumbsupCount}개</span> 입니다
               </p>
               <select
                 value={orderBy}
@@ -204,18 +237,6 @@ function Mypage({
               })}
             </ContentList>
             <ContentCheck>
-              <div id="allCheck">
-                <input
-                  type="checkbox"
-                  checked={
-                    checkedItems.length === userContent.data.length
-                      ? true
-                      : false
-                  }
-                  onChange={(e) => handleAllCheck(e.target.checked)}
-                />
-                전체 선택
-              </div>
               <button id="delete" onClick={() => deleteContent()}>
                 삭제
               </button>

diff --git a/client/src/pages/Search.js b/client/src/pages/Search.js
@@ -50,9 +50,7 @@ function Search({
           setAccToken={setAccToken}
           setCurrResult={setCurrResult}
         />
-      ) : (
-        <div id="hi">하이~ 에이치아이~</div>
-      )}
+      ) : null}
     </SearchSection>
   );
 }