Style: Add image click UI

skguma · Jan 10, 2022 · 9393f41 · 9393f41
1 parent c1936e1
commit 9393f41
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 3 deletions.
diff --git a/src/components/ResultCard.js b/src/components/ResultCard.js
@@ -1,5 +1,7 @@
 import React, { useState } from "react";
 import styled from "styled-components";
+import thumbnail from "../img/001.jpeg";
+import "../style/style.css";
 
 function ResultCard({ accountId, accountName, ranking, similarity, tweetURL }) {
   const [resultInfo, setResultInfo] = useState([
@@ -9,10 +11,25 @@ function ResultCard({ accountId, accountName, ranking, similarity, tweetURL }) {
     similarity,
     tweetURL
   ]);
+  const [clicked, setClicked] = useState(false);
+  const handleClick = e => {
+    e.preventDefault();
+    setClicked(!clicked);
+  };
   return (
     <Wrapper>
       <Ranking>{ranking}</Ranking>
-      <Thumbnail />
+      <Thumbnail onClick={handleClick}>
+        <Img src={thumbnail} />
+        {clicked ? (
+          <>
+            <Overlay />
+            <CheckButton>✔</CheckButton>
+          </>
+        ) : (
+          ""
+        )}
+      </Thumbnail>
       <ResultInfo>
         <Similarity>{similarity}%</Similarity>
         <TweetURL>원본 트윗</TweetURL>
@@ -38,7 +55,37 @@ const Wrapper = styled.div`
 const Thumbnail = styled.div`
   height: 80%;
   width: inherit;
-  background-color: lightgrey;
+  position: relative;
+`;
+const CheckButton = styled.div`
+  height: 15%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  position: absolute;
+  width: 15%;
+  top: 40%;
+  left: 40%;
+  border-radius: 50%;
+  background-color: #00aaff;
+  pointer: cursor;
+`;
+const Overlay = styled.div`
+  height: 100%;
+  position: absolute;
+  width: 100%;
+  top: 0;
+  left: 0;
+  background-color: #1196c1;
+  border: 2px solid blue;
+  opacity: 0.2;
+  pointer: cursor;
+`;
+const Img = styled.img`
+  height: 100%;
+  width: inherit;
+  cursor: pointer;
 `;
 
 const Ranking = styled.div`

diff --git a/src/style/style.css b/src/style/style.css
@@ -1,9 +1,19 @@
 @import "reset";
 
+* {
+  font-family: "Noto Sans KR", sans-serif !important;
+}
+
 body {
   display: flex;
   justify-content: center;
 }
+.activebtn {
+  background-color: #0095f6;
+}
+.unactivebtn {
+  background-color: #b2dffc;
+}
 
 .main-container {
   display: flex;
@@ -26,7 +36,7 @@ body {
   @media screen and (max-width: 600px) {
     width: 100%;
   }
-  @media screen and (min-width: 600px) and (max-width: 1500px) {
+  @media screen and (max-width: 1500px) {
     width: 600px;
   }
   height: 50px;