[Feature/result]

src/components/CameraInput.js

@@ -9,6 +9,7 @@ const CameraInput = () => {
   // 파일 미리볼 url을 저장할 state
   const [camInput, setCamInput] = useState(previewImg);
   const imgInput = useRef();
+  const [active, setActive] = useState(true);
   const navigate = useNavigate();
 
   // 업로드 된 사진을 미리보기에 올리는 함수
@@ -53,10 +54,10 @@ const CameraInput = () => {
       />
       {camInput !== previewImg && (
         <>
-          <StyledButton big onClick={handleImgSubmit}>
+          <StyledButton big active={active} onClick={handleImgSubmit}>
             결과보기
           </StyledButton>
-          <StyledButton big onClick={handleImgRemove}>
+          <StyledButton big active={active} onClick={handleImgRemove}>
             삭제하기
           </StyledButton>
         </>

src/components/EmailBox.js

@@ -1,25 +1,45 @@
 import React, { useState } from "react";
 import styled, { css } from "styled-components";
+import "../style/style.css";
 
 const EmailBox = ({ changeState }) => {
+  const [isActive, setActive] = useState(false);
   const [values, setValues] = useState({ email: "" });
   const handleChange = e => {
     const { name, value } = e.target;
     setValues({ [name]: value });
   };
   const handleSubmit = e => {
     e.preventDefault();
-    alert("이메일로 발송되었습니다.");
+    if (isActive) {
+      alert("이메일로 발송되었습니다.");
 
-    // TODO: 서버로 이메일 전송하기
-    // 부모의 centerReport를 false로 만들기
-    changeState();
+      // TODO: 서버로 이메일 전송하기
+      // 부모의 centerReport를 false로 만들기
+      changeState();
+    } else {
+      alert("이메일에 @를 포함해서 입력해주세요.");
+    }
+  };
+
+  const checkValid = () => {
+    values.email.includes("@") ? setActive(true) : setActive(false);
   };
   return (
     <Wrapper>
       <form onSubmit={handleSubmit}>
-        <input value={values.email} name="email" onChange={handleChange} />
-        <button type="submit">전송</button>
+        <input
+          value={values.email}
+          name="email"
+          onKeyUp={checkValid}
+          onChange={handleChange}
+        />
+        <button
+          className={isActive ? "activebtn" : "unactivebtn"}
+          type="submit"
+        >
+          전송
+        </button>
       </form>
     </Wrapper>
   );

src/components/NetworkGraph.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { runForceGraph } from "./forceGraphGenerator";
-import styles from "./forceGraph.module.css";
+import styles from "../style/forceGraph.module.css";
 
 export function ForceGraph({ linksData, nodesData, nodeHoverTooltip }) {
   const containerRef = React.useRef(null);

src/components/ReportButtons.js

@@ -2,33 +2,51 @@ import React, { useState } from "react";
 import styled, { css } from "styled-components";
 import StyledButton from "../style/StyledButton";
 import EmailBox from "./EmailBox";
+
 const ReportButtons = () => {
-  const FINISH_MESSAGE = "트위터 신고가 완료되었습니다.";
-  const [active, setActive] = useState(true);
   const [twitterText, setTwitterText] = useState("트위터 계정 신고하기");
   const [centerText, setCenterText] =
     useState("디지털성범죄 지원센터에 신고하기");
-  const [centerReport, setCenterReport] = useState("");
-  const changeText = () => {
-    setTwitterText(FINISH_MESSAGE);
-  };
+  const FINISH_MESSAGE = "트위터 신고가 완료되었습니다.";
+  const FINISH = "finish";
+  const ONGOING = "ongoing";
+  const INITIAL_STATE = "";
+
+  // 트위터 버튼 한번 클릭됐는지 값 관리
+  const [active, setActive] = useState(true);
+
+  // 이메일 박스 전환 담당
+  const [centerReport, setCenterReport] = useState(INITIAL_STATE);
+  // 센터 버튼 한번 클릭됐는지 값 관리(처음엔 클릭 가능)
+  const [centerActive, setCenterActive] = useState(true);
+
   const handleTwitterReport = () => {
     // TODO: 트위터 계정 신고하는 로직 짜기
-    changeText();
-    setActive(true);
-    alert(FINISH_MESSAGE);
+    if (active) {
+      setActive(false); // 비활성화 상태로 변경
+      alert(FINISH_MESSAGE); // 트위터 신고가 완료되었다는 alert 메시지 출력
+    } else {
+      alert("이미 신고가 완료되었습니다.");
+    }
   };
   const changeState = () => {
-    setCenterReport("FINISH");
+    setCenterReport(FINISH); // 이메일 박스 -> 원래 버튼으로 화면 전환
+    setCenterActive(false); // 버튼 disable하게 하기
   };
   const handleCenterReport = () => {
-    setCenterReport(true);
+    if (centerReport === INITIAL_STATE) {
+      // 아직 누르지 않은 상태면 누르기
+      setCenterActive(true);
+      setCenterReport(ONGOING); // 이메일박스 나오게 하기
+    } else {
+      alert("이미 신고가 완료되었습니다.");
+    }
   };
   return (
     <ButtonWrapper>
-      {centerReport === "FINISH" ? (
+      {centerReport === FINISH || centerReport === INITIAL_STATE ? (
         <>
-          <StyledButton active={active} onClick={handleCenterReport} big>
+          <StyledButton active={centerActive} onClick={handleCenterReport} big>
             {centerText}
           </StyledButton>
           <StyledButton active={active} onClick={handleTwitterReport} big>

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`

src/components/forceGraphGenerator.js

@@ -1,5 +1,5 @@
 import * as d3 from "d3";
-import styles from "./forceGraph.module.css";
+import styles from "../style/forceGraph.module.css";
 
 export function runForceGraph(
   container,

src/style/StyledButton.js

@@ -11,29 +11,38 @@ const Wrapper = styled.div`
   height: 20px;
   ${({ theme, active }) => {
     const { fonts, colors } = theme;
-    return css`
-      background: ${colors.purple};
-      color: white;
-      height: ${props => props.height};
-      font-size: ${props => props.fontSize};
-      ${props =>
-        props.big &&
-        `
-  font-size: 2rem;
-  padding: 10px;
-`}
-      &:hover {
-        background: #8b00ff;
+    if (active) {
+      //활성상태
+      return css`
+        background: ${colors.purple};
         color: white;
-      }
-    `;
+        height: ${props => props.height};
+        font-size: ${props => props.fontSize};
+        &:hover {
+          background: #8b00ff;
+          color: white;
+        }
+      `;
+    } else {
+      // 비활성상태
+      return css`
+        background: ${colors.grey};
+        color: white;
+        height: ${props => props.height};
+        font-size: ${props => props.fontSize};
+        &:hover {
+          background: grey;
+          color: white;
+        }
+      `;
+    }
   }}
 `;
 // stateless면 여러개 컴포넌트 있어도 됨
 const StyledButton = ({ children, big, active, ...rest }) => {
   console.log("active:", active);
   return (
-    <Wrapper fontSize="10px" {...rest}>
+    <Wrapper fontSize="10px" {...rest} active={active}>
       {children}
     </Wrapper>
   );

src/components/forceGraph.module.css → src/style/forceGraph.module.css

@@ -1,9 +1,7 @@
 .container {
   width: 100%;
-  height: 80vh;
-  position: relative;
+  height: 300px;
   background-color: white;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
 }
 
 .container svg {

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;

src/style/theme.js

@@ -36,7 +36,8 @@ const colors = {
   blue: "#3C63B0",
   purple: "#8575FF",
   black: "#000000",
-  grey: "#A9A9A9"
+  grey: "#A9A9A9",
+  white: "#FFFFFF"
 };
 
 const size = {