diff --git a/src/Components/Nav.jsx b/src/Components/Nav.jsx index 6b186ec..0af7999 100644 --- a/src/Components/Nav.jsx +++ b/src/Components/Nav.jsx @@ -6,19 +6,31 @@ import { theme } from "../styles/theme"; export const Nav = () => { return ( - + - - - - diff --git a/src/apis/Profile/index.js b/src/apis/Profile/index.js index 275571b..6017ee8 100644 --- a/src/apis/Profile/index.js +++ b/src/apis/Profile/index.js @@ -1,5 +1,7 @@ -import { instance } from "../axios" +import { instance } from "../axios"; export const getMyPage = async (token) => { - return await instance.get("/my-info/user", { headers: { "Authorization": token } }) -} \ No newline at end of file + return await instance.get("/user/my-info", { + headers: { Authorization: token }, + }); +}; diff --git a/src/asset/imgs/Profile.svg b/src/asset/imgs/Profile.svg index 7fe7d6b..3f8cdad 100644 --- a/src/asset/imgs/Profile.svg +++ b/src/asset/imgs/Profile.svg @@ -1,4 +1,22 @@ - - + + + + + + + + + + + + + + + + + + + + diff --git a/src/asset/imgs/profilePicture.svg b/src/asset/imgs/profilePicture.svg index 2a01dd4..3f8cdad 100644 --- a/src/asset/imgs/profilePicture.svg +++ b/src/asset/imgs/profilePicture.svg @@ -1,9 +1,22 @@ - - + + + + + + + + + + + + + + + + - - - - + + + diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx index 346911d..ab8f693 100644 --- a/src/pages/HomePage.jsx +++ b/src/pages/HomePage.jsx @@ -1,14 +1,25 @@ -import React, { useState } from "react"; +import React, { useEffect, 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"; +import { Cookies } from "react-cookie"; const HomePage = () => { const link = useNavigate(); + const cookie = new Cookies(); + const navigate = new useNavigate(); + + useEffect(() => { + const token = cookie.get("accessToken"); + if (!token) { + navigate("/signup"); + } + }); + const [inputState, setInputState] = useState({ name: "", name1: "", @@ -45,15 +56,16 @@ const HomePage = () => { ? @@ -80,15 +92,15 @@ const HomePage = () => { @@ -97,7 +109,8 @@ const HomePage = () => { @@ -105,16 +118,16 @@ const HomePage = () => { - + - + - + - + diff --git a/src/pages/MyPage.jsx b/src/pages/MyPage.jsx index 1410760..3f2c713 100644 --- a/src/pages/MyPage.jsx +++ b/src/pages/MyPage.jsx @@ -8,219 +8,228 @@ import { useState } from "react"; import { Cookies } from "react-cookie"; export const MyPage = () => { - const cookies = new Cookies(); - - getMyPage(cookies.get("accessToken")).then(res => { - console.log(res.data); - }) - - return ( - <> - - - - - - 이름 - 이의진 - - - 학번 - 1211 - - - - 우리 반 정보 - - - - - 사탕 - 230 - - - 랭킹 - 10 - - 수정하기 - 내 게시물 보기 - - - - - 지금까지 저희를 이용해주셔서 감사합니다! - 가장 궁합이 좋은 사람은 님으로 궁합이 .............였네요! - 회원님이 포함되어있는 반의 궁합 랭킹은 무려 - 이랍니다! - - - - - ) -} + const cookies = new Cookies(); + const [data, setData] = useState({ + username: "홍길동", + studentId: "1101", + profileImageUrl: Profile, + classCandyCount: 0, + }); + + getMyPage(cookies.get("accessToken")).then((res) => { + setData(res.data); + }); + + return ( + <> + + + + + + 이름 + {data.username} + + + 학번 + {data.studentId} + + + + 우리 반 정보 + + + + + 사탕 + {data.classCandyCount} + + + 랭킹 + - + + 수정하기 + 내 게시물 보기 + + + + + + { + "지금까지 저희를 이용해주셔서 감사합니다!\n가장 궁합이 좋은 사람은 변정현님으로 궁합이 100%였네요!\n회원님이 포함되어있는 반의 궁합 랭킹은 무려 -등이랍니다!" + } + + + + + + ); +}; const Texts = styled.div` - padding: 30px; - font-size: 20px; - color: rgba(0, 0, 0, 0.53); + padding: 10px; + box-sizing: border-box; + font-size: 18px; + color: rgba(0, 0, 0, 0.53); + white-space: pre-wrap; + word-break: break-all; `; const Contents = styled.div` - width: 500px; - height: 570px; - border: 1px solid rgba(0, 0, 0, 0.21); + width: 500px; + height: 570px; + border: 1px solid rgba(0, 0, 0, 0.21); `; const LetterImg = styled.img` - width: 350px; - margin-left: 130px; + width: 350px; + margin-left: 130px; `; const MyBoardButton = styled.button` - margin-top: 13px; - width: 190px; - height: 45px; - border-radius: 100px; - font-weight: bold; - font-size: 15px; - color: white; - border: none; - background-color: ${({ theme }) => theme.color.milkPink}; - &:hover { - background-color: ${({ theme }) => theme.color.lightPink}; - cursor: pointer; - transition: 0.2s; - } + margin-top: 13px; + width: 190px; + height: 45px; + border-radius: 100px; + font-weight: bold; + font-size: 15px; + color: white; + border: none; + background-color: ${({ theme }) => theme.color.milkPink}; + &:hover { + background-color: ${({ theme }) => theme.color.lightPink}; + cursor: pointer; + transition: 0.2s; + } `; const EditButton = styled.button` - margin-top: 120px; - width: 190px; - height: 45px; - border-radius: 100px; - font-weight: bold; - font-size: 15px; - color: white; - border: none; - background-color: ${({ theme }) => theme.color.lightPink}; - &:hover { - background-color: ${({ theme }) => theme.color.normalPink}; - cursor: pointer; - transition: 0.2s; - } + margin-top: 120px; + width: 190px; + height: 45px; + border-radius: 100px; + font-weight: bold; + font-size: 15px; + color: white; + border: none; + background-color: ${({ theme }) => theme.color.lightPink}; + &:hover { + background-color: ${({ theme }) => theme.color.normalPink}; + cursor: pointer; + transition: 0.2s; + } `; const RankingWrapper = styled.div` - position: absolute; - top: 400px; - display: flex; - flex-direction: row; - justify-content: space-between; - width: 120px; - margin-left: 20px; + position: absolute; + top: 400px; + display: flex; + flex-direction: row; + justify-content: space-between; + width: 120px; + margin-left: 20px; `; const Number = styled.div` - font-weight: bold; + font-weight: bold; `; const Text = styled.div` - font-weight: bold; - color: ${({ theme }) => theme.color.darkGray}; - + font-weight: bold; + color: ${({ theme }) => theme.color.darkGray}; `; const CandyWrapper = styled.div` - position: absolute; - top: 365px; - display: flex; - flex-direction: row; - justify-content: space-between; - width: 120px; - margin-left: 20px; + position: absolute; + top: 365px; + display: flex; + flex-direction: row; + justify-content: space-between; + width: 120px; + margin-left: 20px; `; - const ClassInfoBox = styled.img` - width: 200px; - margin-top: 5px; - position: relative; + width: 200px; + margin-top: 5px; + position: relative; `; const Infos = styled.div` - font-weight: bold; + font-weight: bold; `; const Title = styled.div` - font-weight: bold; - color: ${({ theme }) => theme.color.darkGray}; + font-weight: bold; + color: ${({ theme }) => theme.color.darkGray}; `; - const SchoolIcon = styled.img` - height: 25px; + height: 25px; `; const ClassTitle = styled.div` - font-weight: bold; + font-weight: bold; `; const TitleWrapper = styled.div` - display: flex; - flex-direction: row; - justify-content: space-between; - width: 120px; - margin-top: 80px; + display: flex; + flex-direction: row; + justify-content: space-between; + width: 120px; + margin-top: 80px; `; const NumberWrapper = styled.div` - display: flex; - flex-direction: row; - justify-content: space-between; - width: 140px; + display: flex; + flex-direction: row; + justify-content: space-between; + width: 140px; `; const NameWrapper = styled.div` - display: flex; - flex-direction: row; - justify-content: space-between; - width: 140px; - margin-bottom: 10px; + display: flex; + flex-direction: row; + justify-content: space-between; + width: 140px; + margin-bottom: 10px; `; const MyInfos = styled.div` - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; `; const ProfilePicture = styled.img` - width: 100px; - margin-bottom: 40px; + width: 100px; + margin-bottom: 40px; `; const LetterWrapper = styled.div` - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; `; const InfoWrapper = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-left: 85px; - margin-top: 12px; - width: 240px; - height: 680px; - border-radius: 15px; - border: 1px solid ${({ theme }) => theme.color.strongPink}; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-left: 85px; + margin-top: 12px; + width: 240px; + height: 680px; + border-radius: 15px; + border: 1px solid ${({ theme }) => theme.color.strongPink}; `; const Wrapper = styled.div` - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; `; -export default MyPage; \ No newline at end of file +export default MyPage; diff --git a/src/pages/ResultPage.jsx b/src/pages/ResultPage.jsx index e09e4b5..3707bb6 100644 --- a/src/pages/ResultPage.jsx +++ b/src/pages/ResultPage.jsx @@ -17,7 +17,7 @@ const ResultPage = () => { if (name2 === "null") { match(name1) .then((res) => { - setResult(res.data); + setResult(res.data.matchScore); const timer = setTimeout(() => { setLoad(false); setTimeout(() => { @@ -31,7 +31,7 @@ const ResultPage = () => { } else { bothMatch(name1, name2) .then((res) => { - setResult(res.data); + setResult(res.data.matchScore); const timer = setTimeout(() => { setLoad(false); setTimeout(() => { @@ -84,8 +84,9 @@ const ResultPage = () => { )} diff --git a/src/pages/SignUp.jsx b/src/pages/SignUp.jsx index 2b59581..003c700 100644 --- a/src/pages/SignUp.jsx +++ b/src/pages/SignUp.jsx @@ -1,192 +1,195 @@ -import React, { useState } from 'react'; -import styled from 'styled-components'; +import React, { useState } from "react"; +import styled from "styled-components"; import NameIcon from "../asset/imgs/NameIcon.png"; import NumberIcon from "../asset/imgs/NumberIcon.png"; -import { Link } from 'react-router-dom'; -import { theme } from '../styles/theme'; -import { getXquareUserInfo, postLogin, postXquareLogin } from '../apis/SignUp'; -import { Cookies } from 'react-cookie'; +import { Link } from "react-router-dom"; +import { theme } from "../styles/theme"; +import { getXquareUserInfo, postLogin, postXquareLogin } from "../apis/SignUp"; +import { Cookies } from "react-cookie"; +import { useNavigate } from "react-router-dom"; export const SignUp = () => { - const [name, setName] = useState(''); - const [number, setNumber] = useState(''); - const [isButtonDisabled, setIsButtonDisabled] = useState(true); - const [data, setData] = useState({ - account_id: '', - password: '', - device_token: 'aa' - }); - const cookie = new Cookies(); - - const onClick = (e) => { - postXquareLogin(data).then(res => { - getXquareUserInfo(res.data.access_token, data.account_id).then(res => { - const userInfo = res.data; - - const loginData = { - username: userInfo.name, - studentId: `${userInfo.grade}${userInfo.class_num}${userInfo.num}`, - profileImgUrl: userInfo.profile_file_name - } - - postLogin(loginData).then(res => { - cookie.set("accessToken", res.data.accessToken); - }) - }) - }) - } - - const updateButtonState = (newName, newNumber) => { - setIsButtonDisabled(!(newName && newNumber)); - }; - - const handleChange = (e) => { - setData(prev => { - const newData = { ...prev, [e.target.id]: e.target.value }; - updateButtonState(newData.account_id, newData.password); - return newData; + const [isButtonDisabled, setIsButtonDisabled] = useState(true); + const [data, setData] = useState({ + account_id: "", + password: "", + device_token: "aa", + }); + const cookie = new Cookies(); + const navigate = new useNavigate(); + + const onClick = (e) => { + postXquareLogin(data).then((res) => { + getXquareUserInfo(res.data.access_token, data.account_id).then((res) => { + const userInfo = res.data; + + const loginData = { + username: userInfo.name, + studentId: `${userInfo.grade}${userInfo.class_num}${userInfo.num}`, + profileImgUrl: userInfo.profile_file_name, + }; + + postLogin(loginData).then((res) => { + cookie.set("accessToken", res.data.accessToken); + navigate("/"); }); - } - - return ( - - - 회원가입 - - - - - - - - - - - 회원가입 - - - ); -} + }); + }); + }; + + const updateButtonState = (newName, newNumber) => { + setIsButtonDisabled(!(newName && newNumber)); + }; + + const handleChange = (e) => { + setData((prev) => { + const newData = { ...prev, [e.target.id]: e.target.value }; + updateButtonState(newData.account_id, newData.password); + return newData; + }); + }; + + return ( + + + 회원가입 + + + + + + + + + + + + 회원가입 + + + + ); +}; const NextBtn = styled(Link)` - display: flex; - justify-content: center; - align-items: center; - text-decoration: none; - width: 250px; - height: 40px; - font-size: 17px; + display: flex; + justify-content: center; + align-items: center; + text-decoration: none; + width: 250px; + height: 40px; + font-size: 17px; + background-color: ${({ theme }) => theme.color.strongPink}; + opacity: ${({ disabled }) => (disabled ? "60%" : "100%")}; + font-weight: bolder; + color: white; + border: none; + border-radius: 5px; + pointer-events: ${({ disabled }) => + disabled ? "none" : "auto"}; /* Prevent clicking when disabled */ + &:hover { + cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")}; background-color: ${({ theme }) => theme.color.strongPink}; - opacity: ${({ disabled }) => (disabled ? '60%' : '100%')}; - font-weight: bolder; - color: white; - border: none; - border-radius: 5px; - pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')}; /* Prevent clicking when disabled */ - &:hover { - cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')}; - background-color: ${({ theme }) => theme.color.strongPink}; - opacity: ${({ disabled }) => (disabled ? '60%' : '100%')}; - transition: 0.3s; - } + opacity: ${({ disabled }) => (disabled ? "60%" : "100%")}; + transition: 0.3s; + } `; - const NumberImg = styled.img` - width: 19px; - height: 22px; - position: absolute; - left: 10px; - top: 50%; - transform: translateY(-50%); + width: 19px; + height: 22px; + position: absolute; + left: 10px; + top: 50%; + transform: translateY(-50%); `; const NumberWrapper = styled.div` - display: flex; - position: relative; + display: flex; + position: relative; `; const NameImg = styled.img` - width: 19px; - height: 23px; - position: absolute; - left: 10px; - top: 50%; - transform: translateY(-50%); + width: 19px; + height: 23px; + position: absolute; + left: 10px; + top: 50%; + transform: translateY(-50%); `; const NameWrapper = styled.div` - display: flex; - position: relative; + display: flex; + position: relative; `; const InputWrapper = styled.div` - place-self: start center; - display: flex; - flex-direction: column; - justify-content: space-between; - height: 95px; + place-self: start center; + display: flex; + flex-direction: column; + justify-content: space-between; + height: 95px; `; const Name = styled.input` - border-radius: 5px; - border: 1.5px solid lightgray; - width: 210px; - height: 40px; - padding-left: 40px; - &:focus{ - border: 1px solid ${({ theme }) => theme.color.strongPink}; - outline: none; - } + border-radius: 5px; + border: 1.5px solid lightgray; + width: 210px; + height: 40px; + padding-left: 40px; + &:focus { + border: 1px solid ${({ theme }) => theme.color.strongPink}; + outline: none; + } `; const Number = styled.input` - border-radius: 5px; - border: 1.5px solid lightgray; - width: 210px; - height: 40px; - padding-left: 40px; - &:focus{ - border: 1px solid ${({ theme }) => theme.color.strongPink}; - outline: none; - } + border-radius: 5px; + border: 1.5px solid lightgray; + width: 210px; + height: 40px; + padding-left: 40px; + &:focus { + border: 1px solid ${({ theme }) => theme.color.strongPink}; + outline: none; + } `; const Title = styled.div` - font-size: 30px; - font-weight: 900; + font-size: 30px; + font-weight: 900; `; const Wrapper = styled.div` - display: flex; - justify-content: center; - align-items: center; - height: 100vh; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; `; const Box = styled.div` - display: grid; - grid-template-rows: 1fr 1fr 1fr; - place-items: center center; - width: 430px; - height: 532px; - border-radius: 10px; - background-color: white; - border: 1px solid lightgray; - box-shadow: 3px 3px 5px lightgray; - box-sizing: border-box; - padding: 20px; + display: grid; + grid-template-rows: 1fr 1fr 1fr; + place-items: center center; + width: 430px; + height: 532px; + border-radius: 10px; + background-color: white; + border: 1px solid lightgray; + box-shadow: 3px 3px 5px lightgray; + box-sizing: border-box; + padding: 20px; `; export default SignUp; diff --git a/src/router/Router.jsx b/src/router/Router.jsx index 61f04b6..b216028 100644 --- a/src/router/Router.jsx +++ b/src/router/Router.jsx @@ -1,20 +1,31 @@ import { BrowserRouter, Routes, Route } from "react-router-dom"; -import * as _ from "../pages"; +import { Layout } from "./Layout"; +import HomePage from "../pages/HomePage"; +import { DetailPage } from "../pages/DetailPage"; +import { BoardPage } from "../pages/BoardPage"; +import { MyPage } from "../pages/MyPage"; +import { Ranking } from "../pages/Ranking"; +import ResultPage from "../pages/ResultPage"; +import TestPage from "../pages/TestPage"; +import InTestPage from "../pages/InTestPage"; +import { SignUp } from "../pages/SignUp"; export const Router = () => { - return - - }> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - } /> - - -} + return ( + + + }> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + } /> + + + ); +};