diff --git a/.gitignore b/.gitignore index 4d29575..d063217 100644 --- 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 new file mode 100644 index 0000000..6408ce3 Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html index aa069f2..9cf4cc5 100644 --- a/public/index.html +++ b/public/index.html @@ -1,8 +1,8 @@ - + - + - React App + 눈사친 diff --git a/src/Router.js b/src/Router.js index be572d7..7417251 100644 --- 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 = () => { } /> } /> + } /> } /> } /> } /> diff --git a/src/apis/index.js b/src/apis/index.js index 5c7f4e4..13e1cd6 100644 --- 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 new file mode 100644 index 0000000..16de1f5 Binary files /dev/null and b/src/assets/images/circle.png differ diff --git a/src/assets/images/loading.png b/src/assets/images/loading.png new file mode 100644 index 0000000..14b390c Binary files /dev/null and b/src/assets/images/loading.png differ diff --git a/src/components/LoginModal/index.jsx b/src/components/LoginModal/index.jsx index e9c0e2f..4b6fe25 100644 --- 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 ( google  Google 계정으로 로그인 - + kakao  카카오톡으로 로그인 diff --git a/src/components/SideMenu/index.jsx b/src/components/SideMenu/index.jsx index 03102c3..4d693f0 100644 --- 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 ( X @@ -19,7 +21,16 @@ const SideMenu = ({ onClose }) => { 눈사친 snow - + {isLogin ? ( + <> + + + + + + ) : ( + + )} ); diff --git a/src/components/SideMenu/styled.js b/src/components/SideMenu/styled.js index 85add55..b0bb58d 100644 --- 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 index f390194..b874c77 100644 --- 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 = () => { + 나는 이성 친구들에게 어떤 유형의 눈사람일까? diff --git a/src/pages/Main/styled.js b/src/pages/Main/styled.js index 982499d..78dec51 100644 --- 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 new file mode 100644 index 0000000..ac2116d --- /dev/null +++ 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 ( + <> + + + + + + circle +  결과를 기다리는 중입니다.  + circle + + + + ); +}; + +export default TestPage; diff --git a/src/pages/ResultLoading/styled.js b/src/pages/ResultLoading/styled.js new file mode 100644 index 0000000..2532380 --- /dev/null +++ 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 new file mode 100644 index 0000000..438f6a5 --- /dev/null +++ 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 new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/TestPage/index.jsx b/src/pages/TestPage/index.jsx index 82aebc0..40a113f 100644 --- 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"); } };