diff --git a/package-lock.json b/package-lock.json index 907c595..77baa5e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,8 +18,8 @@ "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@types/react-router-dom": "^5.3.3", - "axios": "^1.7.2", "aos": "^2.3.4", + "axios": "^1.7.2", "react": "^18.3.1", "react-dom": "^18.3.1", "react-icons": "^5.2.1", @@ -5730,7 +5730,6 @@ "version": "2.3.4", "resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz", "integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==", - "license": "MIT", "dependencies": { "classlist-polyfill": "^1.0.3", "lodash.debounce": "^4.0.6", diff --git a/package.json b/package.json index abcd6fc..69d801d 100644 --- a/package.json +++ b/package.json @@ -13,8 +13,8 @@ "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@types/react-router-dom": "^5.3.3", - "axios": "^1.7.2", "aos": "^2.3.4", + "axios": "^1.7.2", "react": "^18.3.1", "react-dom": "^18.3.1", "react-icons": "^5.2.1", diff --git a/src/App.tsx b/src/App.tsx index 84278fb..42acbe3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,6 +12,7 @@ import UserPage from "./pages/UserPage"; import LoginPage from "./pages/LoginPage"; import ReviewWriting from "./pages/ReviewWriting"; import ReviewList from "./pages/ReviewList"; +import KakaoRedirectHandler from "./pages/KakaoRedirectHandler"; const App: React.FC = () => { useEffect(() => { @@ -31,7 +32,7 @@ const App: React.FC = () => { } /> } /> } /> - } /> + } /> } /> } /> } /> diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index d94565f..33c61d4 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -31,7 +31,7 @@ const Navbar = () => { - +
diff --git a/src/components/ReviewTheme.tsx b/src/components/ReviewTheme.tsx index 4f20a69..170bd0f 100644 --- a/src/components/ReviewTheme.tsx +++ b/src/components/ReviewTheme.tsx @@ -1,8 +1,10 @@ -import { Theme } from "../styles/RoomThemeStyled"; +import { Theme } from "../styles/RoomTheme2Styled"; const ReviewTheme = () => { + + return ( - +

방탈출 테마 이름

diff --git a/src/pages/AuthRedirect.tsx b/src/pages/AuthRedirect.tsx deleted file mode 100644 index 62baa73..0000000 --- a/src/pages/AuthRedirect.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import axios from 'axios'; - -interface KakaoUser { - nickname: string; - profile_image: string; -} - -const MyPage: React.FC = () => { - const [user, setUser] = useState(null); - - useEffect(() => { - const fetchKakaoUserInfo = async () => { - const token = localStorage.getItem('kakao_token'); - if (token) { - try { - const response = await axios.get('https://kapi.kakao.com/v2/user/me', { - headers: { - Authorization: `Bearer ${token}`, - }, - }); - const { properties } = response.data; - setUser({ - nickname: properties.nickname, - profile_image: properties.profile_image, - }); - } catch (error) { - console.error('Failed to fetch Kakao user info', error); - } - } - }; - - fetchKakaoUserInfo(); - }, []); - - if (!user) { - return
Loading...
; - } - - return ( -
-

My Page

- {user.nickname} -

{user.nickname}

-
- ); -}; - -export default MyPage; \ No newline at end of file diff --git a/src/pages/KakaoLogin.tsx b/src/pages/KakaoLogin.tsx index 0da6ee5..45659e2 100644 --- a/src/pages/KakaoLogin.tsx +++ b/src/pages/KakaoLogin.tsx @@ -1,8 +1,12 @@ -import React from "react"; +import React, { useEffect } from "react"; import loginBtn from '../image/kakao_login_img.png' +import axios from "axios"; +import { useNavigate } from "react-router-dom"; const KakaoLogin: React.FC = () => { + const loginWithKakao = () => { + if (window.Kakao && window.Kakao.Auth) { window.Kakao.Auth.authorize({ redirectUri: "http://localhost:3000/auth/kakao/redirect", // 설정한 리디렉션 URI 입력 @@ -23,3 +27,4 @@ const KakaoLogin: React.FC = () => { }; export default KakaoLogin; + diff --git a/src/pages/KakaoRedirectHandler.tsx b/src/pages/KakaoRedirectHandler.tsx new file mode 100644 index 0000000..9bef8a8 --- /dev/null +++ b/src/pages/KakaoRedirectHandler.tsx @@ -0,0 +1,37 @@ +import React, { useEffect } from "react"; +import { useNavigate } from "react-router-dom"; +import axios from "axios"; + +const KakaoRedirectHandler = () => { + console.log("로그인중..."); + const navigate = useNavigate(); + const code = new URL(window.location.href).searchParams.get("code"); + console.log(code); + const login = async () => { + try { + console.log('code', code); + + const response = await axios.post( + "https://api.labyrinth30-edu.link/auth/kakao/redirect", + { + params: { code }, + } + ); + localStorage.setItem("accessToken", response.data.accessToken); + navigate("/themeRecs"); + console.log(response); + } catch (error) { + console.log('123', error); + } + }; + + useEffect(() => { + if (code) { + login(); + } + }, []); + return ( +
로그인 중..
+ ); +}; +export default KakaoRedirectHandler; diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx index 761912b..a91c712 100644 --- a/src/pages/LoginPage.tsx +++ b/src/pages/LoginPage.tsx @@ -3,6 +3,7 @@ import KakaoLogin from "./KakaoLogin"; // Kakao 로그인 버튼 컴포넌트 import { Container } from "../styles/LoginPageStyled"; const LoginPage: React.FC = () => { + useEffect(() => { const initializeKakao = () => { console.log("Kakao SDK 초기화 시도"); // 로그 추가 diff --git a/src/pages/ReviewWriting.tsx b/src/pages/ReviewWriting.tsx index 50a4c18..5ab8732 100644 --- a/src/pages/ReviewWriting.tsx +++ b/src/pages/ReviewWriting.tsx @@ -1,8 +1,45 @@ import { Select } from "../styles/ThemeRecsQuestionsStyled"; import { IoIosArrowForward } from "react-icons/io"; import { Container } from "../styles/NavbarStyled"; +import axios from "axios"; +import { useState } from "react"; + +interface reviewContents { + themeName: String; + isSuccess: Boolean; + numberOfPeople: Number; + numberofHintsUsed: Number; + remainingTime: Number; + totalThemeTime: Number; + content: String; +} const ReviewWriting = () => { + const [minute1, setMinute1] = useState(0); + const [second, setSecond] = useState(0); + const [minute2, setMinute2] = useState(0); + + const handleSubmit = (event: React.FormEvent) => { + event.preventDefault(); + + const minute1Converted = minute1 / 60; + const minute2Converted = minute2 / 60; + + const data = { + minute1: minute1Converted, + second: second, + minute2: minute2Converted + }; + + axios.post('YOUR_BACKEND_ENDPOINT', data) + .then(response => { + console.log('Response:', response.data); + }) + .catch(error => { + console.error('Error:', error); + }); + }; + return ( <> @@ -37,9 +74,18 @@ const ReviewWriting = () => { 회
- 분 - 초 / - 분 + setMinute1(Number(e.target.value))} + />분 + setSecond(Number(e.target.value))} + />초 / + setMinute2(Number(e.target.value))} + />분
@@ -49,9 +95,9 @@ const ReviewWriting = () => {
어떠셨나요?
-