[#2] feat : add test 결과 로딩 page

donggukthon · Dec 20, 2023 · 3c53d6b · 3c53d6b
1 parent adccc69
commit 3c53d6b
Show file tree

Hide file tree

Showing 17 changed files with 149 additions and 14 deletions.
diff --git a/.gitignore b/.gitignore
@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local
@@ -21,3 +22,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>눈사친</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/Router.js b/src/Router.js
@@ -2,6 +2,7 @@ import React from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Main from "./pages/Main";
 import TestPage from "./pages/TestPage";
+import Loading from "./pages/ResultLoading";
 import { TestResult1 } from "./pages/TestResult1";
 import { TestResult2 } from "./pages/TestResult2";
 import { TestResult3 } from "./pages/TestResult3";
@@ -17,6 +18,7 @@ const Router = () => {
       <Routes>
         <Route path="/" element={<Main />} />
         <Route path="/test/:step" element={<TestPage />} />
+        <Route path="/loading" element={<Loading />} />
         <Route path="/one" element={<TestResult1 />} />
         <Route path="/two" element={<TestResult2 />} />
         <Route path="/three" element={<TestResult3 />} />

diff --git a/src/apis/index.js b/src/apis/index.js
@@ -1,7 +1,7 @@
 import axios from "axios";
 
 export const axiosInstance = axios.create({
-  baseURL: `http://${process.env.REACT_APP_ENDPOINT}`,
+  baseURL: `https://${process.env.REACT_APP_ENDPOINT}`,
   timeout: 20000,
   headers: {
     "Content-Type": "application/json",

diff --git a/src/assets/images/circle.png b/src/assets/images/circle.png
diff --git a/src/assets/images/loading.png b/src/assets/images/loading.png
diff --git a/src/components/LoginModal/index.jsx b/src/components/LoginModal/index.jsx
@@ -10,19 +10,26 @@ import google from "../../assets/images/google.png";
 import kakao from "../../assets/images/kakao.png";
 
 const LoginModal = () => {
+  const REST_API_KEY = process.env.REST_API_KEY;
+  const REDIRECT_URI = process.env.REDIRECT_URI;
+  const kakaoURL = `https://noonsachin.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
   const navigate = useNavigate();
 
   const handleNonmemberButtonClick = () => {
     navigate("/test/0");
   };
 
+  const handleKakaoLogin = () => {
+    window.location.href = kakaoURL;
+  };
+
   return (
     <Container>
       <GoogleButton>
         <img src={google} alt="google" />
         &nbsp;Google 계정으로 로그인
       </GoogleButton>
-      <KakaoButton>
+      <KakaoButton onClick={handleKakaoLogin}>
         <img src={kakao} alt="kakao" />
         &nbsp;카카오톡으로 로그인
       </KakaoButton>

diff --git a/src/components/SideMenu/index.jsx b/src/components/SideMenu/index.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import {
   MenuContainer,
   Header,
@@ -11,6 +11,8 @@ import snow from "../../assets/images/sidesnow.png";
 import snowman from "../../assets/images/sidesnowman.png";
 
 const SideMenu = ({ onClose }) => {
+  const [isLogin, setIsLogin] = useState(false);
+  setIsLogin(false);
   return (
     <MenuContainer>
       <Close onClick={onClose}>X</Close>
@@ -19,7 +21,16 @@ const SideMenu = ({ onClose }) => {
         눈사친
         <Image src={snow} alt="snow" />
       </Header>
-      <Button>따듯한 눈</Button>
+      {isLogin ? (
+        <>
+          <Button>Snow Village 구경하기</Button>
+          <Button>눈사람 정보 확인하기</Button>
+          <Button>따듯한 눈 확인하기</Button>
+          <Button>로그아웃</Button>
+        </>
+      ) : (
+        <Button>로그인 후 이용가능합니다.</Button>
+      )}
       <FooterImage src={snowman} alt="snowman" />
     </MenuContainer>
   );

diff --git a/src/components/SideMenu/styled.js b/src/components/SideMenu/styled.js
@@ -54,12 +54,13 @@ export const Close = styled.p`
 `;
 
 export const Button = styled.button`
-  width: 70%;
+  width: 80%;
   height: 8%;
-  border-radius: 10px;
+  border-radius: 15px;
+  margin-bottom: 5vh;
   color: #102531;
   font-weight: bold;
-  font-size: 1.2rem;
+  font-size: 1rem;
   fill: linear-gradient(
     180deg,
     rgba(255, 255, 255, 0.2) 0%,

diff --git a/src/pages/Main/index.jsx b/src/pages/Main/index.jsx
@@ -8,6 +8,7 @@ import {
   StartButton,
   Container,
   MenuImage,
+  Text,
 } from "./styled";
 import main from "../../assets/images/main.png";
 import logo from "../../assets/images/main_logo.png";
@@ -31,6 +32,7 @@ const Main = () => {
       <Background />
       <SnowAnimation />
       <MenuImage src={menu} alt="menu" onClick={handleMenuClick} />
+      <Text>나는 이성 친구들에게 어떤 유형의 눈사람일까?</Text>
       <MainLogo src={logo} alt="logo" />
       <MainImage src={main} alt="main" />
       <SnowmanImage src={snowman} alt="snowman" />

diff --git a/src/pages/Main/styled.js b/src/pages/Main/styled.js
@@ -11,7 +11,7 @@ export const Background = styled.div`
 export const MainImage = styled.img`
   position: fixed;
   width: 100vw;
-  height: auto;
+  height: 70vh;
   bottom: 15vh;
   z-index: -1;
 `;
@@ -39,7 +39,6 @@ export const SnowmanImage = styled.img`
   left: 20%;
   z-index: -1;
 `;
-
 export const StartButton = styled.button`
   background: white;
   width: 85vw;
@@ -48,6 +47,7 @@ export const StartButton = styled.button`
   box-shadow: 0px 0px 8px 5px rgba(16, 37, 49, 0.5);
   font-size: 1.2rem;
   font-weight: bold;
+  position: relative;
 `;
 
 export const Container = styled.div`
@@ -58,3 +58,13 @@ export const Container = styled.div`
   align-items: center;
   justify-content: flex-end;
 `;
+
+export const Text = styled.p`
+  position: fixed;
+  text-align: center;
+  width: 100vw;
+  top: 7.5vh;
+  z-index: 0;
+  font-size: 0.8rem;
+  color: #bdc3c7;
+`;
diff --git a/src/pages/ResultLoading/index.jsx b/src/pages/ResultLoading/index.jsx
@@ -0,0 +1,53 @@
+import React, { useEffect } from "react";
+import { useRecoilValue } from "recoil";
+import { axiosInstance } from "../../apis";
+import { testState } from "../../store/atoms";
+import { TestHeader } from "../../components";
+import {
+  Background,
+  Container,
+  MainImage,
+  Image,
+  Text,
+  TextWrapper,
+} from "./styled";
+import loading from "../../assets/images/loading.png";
+import circle from "../../assets/images/circle.png";
+
+const TestPage = () => {
+  const testStateValue = useRecoilValue(testState);
+  const values = `${testStateValue.T}${testStateValue.F}${testStateValue.E}${testStateValue.I}${testStateValue.X}${testStateValue.O}`;
+  console.log(values);
+
+  const getResult = async () => {
+    try {
+      const response = await axiosInstance.get(
+        `/api/v1/test-result?result=${values}`,
+      );
+      console.log(response);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  useEffect(() => {
+    getResult();
+  }, []);
+
+  return (
+    <>
+      <Background />
+      <TestHeader />
+      <Container>
+        <MainImage src={loading} alt="loading" />
+        <TextWrapper>
+          <Image src={circle} alt="circle" />
+          <Text>&nbsp;결과를 기다리는 중입니다.&nbsp;</Text>
+          <Image src={circle} alt="circle" />
+        </TextWrapper>
+      </Container>
+    </>
+  );
+};
+
+export default TestPage;
diff --git a/src/pages/ResultLoading/styled.js b/src/pages/ResultLoading/styled.js
@@ -0,0 +1,40 @@
+import styled, { keyframes } from "styled-components";
+
+const moveAnimation = keyframes`
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(10px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+`;
+export const Background = styled.div`
+  background: #102531;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: -1;
+`;
+export const Container = styled.div`
+  width: 100vw;
+  height: 90vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+export const MainImage = styled.img`
+  margin-top: 10vh;
+  width: 100vw;
+`;
+export const Image = styled.img``;
+export const TextWrapper = styled.div`
+  display: flex;
+  margin-top: 5vh;
+  animation: ${moveAnimation} 1s infinite;
+`;
+export const Text = styled.p`
+  color: white;
+`;
diff --git a/src/pages/SnowVillage/index.jsx b/src/pages/SnowVillage/index.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const SnowVillage = () => {
+  return <></>;
+};
+
+export default SnowVillage;
diff --git a/src/pages/SnowVillage/styled.js b/src/pages/SnowVillage/styled.js
diff --git a/src/pages/TestPage/index.jsx b/src/pages/TestPage/index.jsx
@@ -39,7 +39,7 @@ const TestPage = () => {
     if (nextStep <= 9) {
       navigate(`/test/${nextStep}`);
     } else {
-      navigate("/result");
+      navigate("/loading");
     }
   };
 
@@ -69,7 +69,7 @@ const TestPage = () => {
     if (nextStep <= 9) {
       navigate(`/test/${nextStep}`);
     } else {
-      navigate("/result");
+      navigate("/loading");
     }
   };