아마 끝?

INVINCIBLE-DMS · Dec 11, 2023 · f7d45eb · f7d45eb
1 parent 851598e
commit f7d45eb
Show file tree

Hide file tree

Showing 8 changed files with 254 additions and 71 deletions.
diff --git a/src/Components/InTestPage/endBtn.jsx b/src/Components/InTestPage/endBtn.jsx
@@ -1,20 +1,26 @@
 import React from "react";
+import { useNavigate } from "react-router-dom";
 import { styled } from "styled-components";
 
 export const EndBtn = () => {
-  return <Wrapper>테스트 끝내기</Wrapper>;
+  const link = useNavigate();
+
+  const onClick = () => {
+    link("/home");
+  };
+
+  return <Wrapper onClick={onClick}>설문완료</Wrapper>;
 };
 
 const Wrapper = styled.div`
   width: 280px;
   height: 60px;
   border-radius: 50px;
-  border: black 1px solid;
-  position: absolute;
-  top: 50px;
-  right: 50px;
+  margin-top: 200px;
   text-align: center;
   font-size: 24px;
   line-height: 54px;
   cursor: pointer;
+  background-color: ${({ theme }) => theme.color.normalPink};
+  color: white;
 `;
diff --git a/src/Components/InTestPage/prgress.jsx b/src/Components/InTestPage/prgress.jsx
@@ -1,12 +1,12 @@
 import React, { useState } from "react";
 import { styled } from "styled-components";
 
-export const Progress = () => {
+export const Progress = ({ number }) => {
   return (
     <Wrapper>
-      <Text>Question 13/30</Text>
+      <Text>Question {number}/20</Text>
       <ProgressBar>
-        <Progress_></Progress_>
+        <Progress_ width={(600 / 20) * number}></Progress_>
       </ProgressBar>
     </Wrapper>
   );

diff --git a/src/Components/ResultPage/load.jsx b/src/Components/ResultPage/load.jsx
@@ -44,13 +44,13 @@ const AnimatedHeartPiece = styled(HeartPiece)`
 const HeartAnimation = () => {
   const colors = [
     { id: 0, color: "#FF49C2", height: 40, top: 24 },
-    { id: 1, color: "#FF49C2", height: 70, top: 34 },
+    { id: 1, color: "#FF49C2", height: 68, top: 34 },
     { id: 2, color: "#FF49C2", height: 80, top: 39 },
     { id: 3, color: "#FF49C2", height: 90, top: 34 },
     { id: 4, color: "#FF49C2", height: 90, top: 24 },
     { id: 5, color: "#FF49C2", height: 90, top: 34 },
     { id: 6, color: "#FF49C2", height: 80, top: 39 },
-    { id: 7, color: "#FF49C2", height: 70, top: 34 },
+    { id: 7, color: "#FF49C2", height: 68, top: 34 },
     { id: 8, color: "#FF49C2", height: 40, top: 24 },
   ];
 

diff --git a/src/apis/Match/index.js b/src/apis/Match/index.js
@@ -1,9 +1,9 @@
 import { instance } from "../axios";
 
 export const match = async (name) => {
-  return await instance.get(`/user/${name}`);
+  return await instance.get(`/user?user=${name}`);
 };
 
 export const bothMatch = async (name1, name2) => {
-  return await instance.get(`/user/both`);
+  return await instance.get(`/user/both?user1=${name1}&user2=${name2}`);
 };
diff --git a/src/apis/Survey/index.js b/src/apis/Survey/index.js
@@ -5,5 +5,6 @@ export const newSurvey = async () => {
 };
 
 export const ansSurvey = async (data) => {
+  console.log(data);
   return await instance.put("/survey-storage", data);
 };
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
@@ -1,11 +1,39 @@
-import React from "react";
+import React, { useState } from "react";
 import { styled } from "styled-components";
 import leftPhone from "../asset/imgs/leftPhone.svg";
 import rightPhone from "../asset/imgs/rightPhone.svg";
 import FadeInBox from "../Components/HomePage/FadeInBox";
 import { Speech } from "../Components/HomePage/Speech";
+import { useNavigate } from "react-router-dom";
 
 const HomePage = () => {
+  const link = useNavigate();
+
+  const [inputState, setInputState] = useState({
+    name: "",
+    name1: "",
+    name2: "",
+  });
+
+  const { name, name1, name2 } = inputState;
+
+  const onChange = (e) => {
+    const { name, value } = e.target;
+
+    setInputState({
+      ...inputState,
+      [name]: value,
+    });
+  };
+
+  const onMatch = (name) => {
+    link(`/result/${name}/null`);
+  };
+
+  const onBothMatch = (name1, name2) => {
+    link(`/result/${name1}/${name2}`);
+  };
+
   return (
     <Body>
       <TopWrapper>
@@ -16,8 +44,18 @@ const HomePage = () => {
               나와 <span>최고의 궁합</span>은 누구일까
               <QuestionMark>?</QuestionMark>
             </Main>
-            <TopInput placeholder='ex ) 홍길동' />
-            <Button>궁합 맞춰보기</Button>
+            <TopInput
+              placeholder='ex ) 홍길동'
+              onChange={onChange}
+              name='name'
+              value={name}
+            />
+            <Button
+              onClick={() => {
+                onMatch(name);
+              }}>
+              궁합 맞춰보기
+            </Button>
           </TextContainer>
         </Left>
         <Right>
@@ -41,12 +79,27 @@ const HomePage = () => {
           </FadeInBox>
           <FadeInBox>
             <BottomInputContainer>
-              <BottomInput placeholder='ex ) 왕자님' />
-              <BottomInput placeholder='ex ) 공주님' />
+              <BottomInput
+                placeholder='ex ) 왕자님'
+                onChange={onChange}
+                name='name1'
+                value={name1}
+              />
+              <BottomInput
+                placeholder='ex ) 공주님'
+                onChange={onChange}
+                name='name2'
+                value={name2}
+              />
             </BottomInputContainer>
           </FadeInBox>
           <FadeInBox>
-            <Button>친구들의 궁합은?</Button>
+            <Button
+              onClick={() => {
+                onBothMatch(name1, name2);
+              }}>
+              친구들의 궁합은?
+            </Button>
           </FadeInBox>
         </BottomLeft>
         <BottomRight>

diff --git a/src/pages/InTestPage.jsx b/src/pages/InTestPage.jsx
@@ -2,23 +2,96 @@ import React from "react";
 import { styled } from "styled-components";
 import { Progress } from "../Components/InTestPage/prgress";
 import { EndBtn } from "../Components/InTestPage/endBtn";
+import { useEffect } from "react";
+import { newSurvey, ansSurvey } from "../apis/Survey";
+import { useNavigate } from "react-router-dom";
+import { useState } from "react";
+import { theme } from "../styles/theme";
 
 export default function InTestPage() {
+  const buttons = [
+    { size: 100, color: theme.color.strongPink },
+    { size: 80, color: theme.color.normalPink },
+    { size: 60, color: theme.color.lightPink },
+    { size: 80, color: theme.color.milkPink },
+    { size: 100, color: theme.color.whitePink },
+  ];
+
+  const link = useNavigate();
+  const [data, setData] = useState();
+  const [id, setId] = useState(0);
+  const [select, setSelect] = useState(null);
+  const [wait, setWait] = useState(false);
+  const [end, setEnd] = useState(false);
+
+  const value = (num) => {
+    if (num == 0) return "STRONGLY_AGREE";
+    else if (num == 1) return "AGREE";
+    else if (num == 2) return "NEUTRAL";
+    else if (num == 3) return "DISAGREE";
+    else if (num == 4) return "STRONGLY_DISAGREE";
+  };
+
+  useEffect(() => {
+    if (data) return;
+    newSurvey()
+      .then((res) => {
+        setData([...res.data, { content: "끝", surveyType: "끝" }]);
+      })
+      .catch((err) => {
+        link("/home");
+      });
+  }, []);
+
+  const onClick = (num) => {
+    if (wait) return;
+    setSelect(num);
+    setWait(true);
+    ansSurvey({
+      surveyType: data[id].surveyType,
+      answerType: value(num),
+    });
+    setTimeout(() => {
+      setId(id + 1);
+      setSelect(null);
+      setWait(false);
+      if (id + 1 == 3) setEnd(true);
+    }, 2000);
+  };
+
   return (
     <Wrapper>
-      <Progress />
-      <Text>당신은 천재입니까?</Text>
-      <Line />
-      <BtnContainer>
-        <span>매우 그렇다</span>
-        <Btn1></Btn1>
-        <Btn2></Btn2>
-        <Btn3></Btn3>
-        <Btn4></Btn4>
-        <Btn5></Btn5>
-        <span>매우 아니다</span>
-      </BtnContainer>
-      <EndBtn />
+      {data ? (
+        end ? (
+          <EndBtn />
+        ) : (
+          <>
+            <Progress number={id} />
+            <Text>{data[id].content}</Text>
+            <Line />
+            <BtnContainer>
+              <span>매우 그렇다</span>
+              {buttons.map((button, index) => (
+                <Btn
+                  size={button.size}
+                  backColor={button.color}
+                  key={index}
+                  onClick={() => {
+                    onClick(index);
+                  }}>
+                  <InnerBall
+                    backColor={button.color}
+                    selected={index === select}
+                  />
+                </Btn>
+              ))}
+              <span>매우 아니다</span>
+            </BtnContainer>
+          </>
+        )
+      ) : (
+        <>Loading..</>
+      )}
     </Wrapper>
   );
 }
@@ -56,42 +129,21 @@ const BtnContainer = styled.div`
   }
 `;
 
-const Btn1 = styled.div`
-  width: 100px;
-  height: 100px;
-  border-radius: 50%;
-  border: ${({ theme }) => theme.color.strongPink} 8px solid;
-  cursor: pointer;
-`;
-
-const Btn2 = styled.div`
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-  border: ${({ theme }) => theme.color.normalPink} 8px solid;
-  cursor: pointer;
-`;
-
-const Btn3 = styled.div`
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
-  border: ${({ theme }) => theme.color.lightPink} 8px solid;
-  cursor: pointer;
-`;
-
-const Btn4 = styled.div`
-  width: 80px;
-  height: 80px;
+const Btn = styled.div`
+  width: ${({ size }) => size + "px"};
+  height: ${({ size }) => size + "px"};
   border-radius: 50%;
-  border: ${({ theme }) => theme.color.milkPink} 8px solid;
+  border: ${({ backColor }) => backColor} 8px solid;
   cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 `;
 
-const Btn5 = styled.div`
-  width: 100px;
-  height: 100px;
+const InnerBall = styled.div`
+  width: ${({ selected }) => (selected ? "90%" : 0)};
+  background-color: ${({ backColor }) => backColor};
+  height: ${({ selected }) => (selected ? "90%" : 0)};
   border-radius: 50%;
-  border: ${({ theme }) => theme.color.whitePink} 8px solid;
-  cursor: pointer;
+  transition: 0.2s linear;
 `;