From 698ba9e34464bff08a84945952764e6a7044d6be Mon Sep 17 00:00:00 2001 From: 202212025 Date: Sat, 29 Jun 2024 13:36:38 +0900 Subject: [PATCH] =?UTF-8?q?[#9]=20feat:=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=B0=8F=20=EB=A6=AC=EB=B7=B0=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 29 +++++++++ package.json | 1 + src/App.tsx | 9 +++ src/components/Navbar.tsx | 2 +- src/components/ReviewTheme.tsx | 27 +++++++++ src/global.d.ts | 3 + src/image/kakao_login_img.png | Bin 0 -> 2946 bytes src/pages/AuthRedirect.tsx | 49 +++++++++++++++ src/pages/KakaoLogin.tsx | 25 ++++++++ src/pages/LoginPage.tsx | 39 ++++++++++++ src/pages/ReviewList.tsx | 18 ++++++ src/pages/ReviewWriting.tsx | 64 ++++++++++++++++++++ src/pages/UserPage.tsx | 50 ++++++++++++++++ src/styles/LoginPageStyled.tsx | 17 ++++++ src/styles/ReviewListStyled.tsx | 24 ++++++++ src/styles/UserPageStyled.tsx | 102 ++++++++++++++++++++++++++++++++ 16 files changed, 458 insertions(+), 1 deletion(-) create mode 100644 src/components/ReviewTheme.tsx create mode 100644 src/global.d.ts create mode 100644 src/image/kakao_login_img.png create mode 100644 src/pages/AuthRedirect.tsx create mode 100644 src/pages/KakaoLogin.tsx create mode 100644 src/pages/LoginPage.tsx create mode 100644 src/pages/ReviewList.tsx create mode 100644 src/pages/ReviewWriting.tsx create mode 100644 src/pages/UserPage.tsx create mode 100644 src/styles/LoginPageStyled.tsx create mode 100644 src/styles/ReviewListStyled.tsx create mode 100644 src/styles/UserPageStyled.tsx diff --git a/package-lock.json b/package-lock.json index 1f2a7ec..9f38054 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@types/react-router-dom": "^5.3.3", + "axios": "^1.7.2", "react": "^18.3.1", "react-dom": "^18.3.1", "react-icons": "^5.2.1", @@ -5543,6 +5544,29 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz", + "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/axobject-query": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz", @@ -14833,6 +14857,11 @@ "node": ">= 0.10" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/psl": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", diff --git a/package.json b/package.json index ce89b51..bcf0997 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@types/react-router-dom": "^5.3.3", + "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 42b3167..cb02ddc 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,6 +5,10 @@ import ThemeRecs from "./pages/ThemeRecs"; import ThemeRecsQuestions from "./pages/ThemeRecsQuestions"; import ThemeRecsResult from "./pages/ThemeRecsResult"; import Navbar from "./components/Navbar"; +import UserPage from "./pages/UserPage"; +import LoginPage from "./pages/LoginPage"; +import ReviewWriting from "./pages/ReviewWriting"; +import ReviewList from "./pages/ReviewList"; const App: React.FC = () => { return ( @@ -18,6 +22,11 @@ const App: React.FC = () => { element={} /> } /> + } /> + } /> + } /> + } /> + } /> ); diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 7438a57..ffdfa01 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 new file mode 100644 index 0000000..4f20a69 --- /dev/null +++ b/src/components/ReviewTheme.tsx @@ -0,0 +1,27 @@ +import { Theme } from "../styles/RoomThemeStyled"; + +const ReviewTheme = () => { + return ( + +
+

방탈출 테마 이름

+
+
+

탈출 기록

+
+
+

한 줄 평

+
+
+
+

#성공여부

+

#인원수

+

#힌트

+

#남은시간

+
+
+ + ); +}; + +export default ReviewTheme; diff --git a/src/global.d.ts b/src/global.d.ts new file mode 100644 index 0000000..dd1f8c3 --- /dev/null +++ b/src/global.d.ts @@ -0,0 +1,3 @@ +interface Window { + Kakao: any; + } \ No newline at end of file diff --git a/src/image/kakao_login_img.png b/src/image/kakao_login_img.png new file mode 100644 index 0000000000000000000000000000000000000000..09bb358843a08576d0029ff8427120c9f5f5c36d GIT binary patch literal 2946 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 swC^J>2!{xpAaAe;Fon)X-38(Q1DqPh { + 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 new file mode 100644 index 0000000..0da6ee5 --- /dev/null +++ b/src/pages/KakaoLogin.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import loginBtn from '../image/kakao_login_img.png' + +const KakaoLogin: React.FC = () => { + const loginWithKakao = () => { + if (window.Kakao && window.Kakao.Auth) { + window.Kakao.Auth.authorize({ + redirectUri: "http://localhost:3000/auth/kakao/redirect", // 설정한 리디렉션 URI 입력 + }); + } else { + console.error("Kakao SDK가 초기화되지 않았습니다."); + } + }; + + return ( +
+ + 카카오 로그인 버튼 + +

+
+ ); +}; + +export default KakaoLogin; diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx new file mode 100644 index 0000000..761912b --- /dev/null +++ b/src/pages/LoginPage.tsx @@ -0,0 +1,39 @@ +import React, { useEffect } from "react"; +import KakaoLogin from "./KakaoLogin"; // Kakao 로그인 버튼 컴포넌트 +import { Container } from "../styles/LoginPageStyled"; + +const LoginPage: React.FC = () => { + useEffect(() => { + const initializeKakao = () => { + console.log("Kakao SDK 초기화 시도"); // 로그 추가 + if (window.Kakao && !window.Kakao.isInitialized()) { + window.Kakao.init("458c6e177d255cd6277b97d9a180e2b6"); // 여기에 Kakao 앱의 JavaScript 키 입력 + console.log("Kakao SDK 초기화 완료"); // 초기화 완료 로그 + } else if (window.Kakao) { + console.log("Kakao SDK 이미 초기화됨"); // 이미 초기화된 경우 로그 + } else { + console.error("Kakao 객체를 찾을 수 없음"); // Kakao 객체가 없는 경우 로그 + } + }; + + const script = document.createElement('script'); + script.src = "https://developers.kakao.com/sdk/js/kakao.min.js"; + script.async = true; + script.onload = initializeKakao; + document.head.appendChild(script); + + return () => { + document.head.removeChild(script); + }; + }, []); + + return ( + +
+ +
+ + ); +}; + +export default LoginPage; diff --git a/src/pages/ReviewList.tsx b/src/pages/ReviewList.tsx new file mode 100644 index 0000000..5682831 --- /dev/null +++ b/src/pages/ReviewList.tsx @@ -0,0 +1,18 @@ +import ReviewTheme from "../components/ReviewTheme"; +import { Container } from "../styles/ReviewListStyled"; + +const ReviewList = () => { + return ( + <> + +
작성한 리뷰
+
+ + + +
+ + + ) +} +export default ReviewList; \ No newline at end of file diff --git a/src/pages/ReviewWriting.tsx b/src/pages/ReviewWriting.tsx new file mode 100644 index 0000000..50a4c18 --- /dev/null +++ b/src/pages/ReviewWriting.tsx @@ -0,0 +1,64 @@ +import { Select } from "../styles/ThemeRecsQuestionsStyled"; +import { IoIosArrowForward } from "react-icons/io"; +import { Container } from "../styles/NavbarStyled"; + +const ReviewWriting = () => { + return ( + <> + +
+
당신을 위한 방,
+
어떤 방이었나요?
+
+
+