From 217b34d68d57067d0af913272e35f5c8c6b363c9 Mon Sep 17 00:00:00 2001 From: "yeondu._" <70528332+Yeonsu00-12@users.noreply.github.com> Date: Mon, 11 Sep 2023 15:22:21 +0900 Subject: [PATCH 1/3] Fix : KakaoLogin --- hustle_web/package-lock.json | 9 ++ hustle_web/package.json | 1 + .../src/components/Login/Kakao/KakaoLogin.tsx | 84 +++++++++++++------ hustle_web/src/components/Login/Login.tsx | 16 ++-- 4 files changed, 76 insertions(+), 34 deletions(-) diff --git a/hustle_web/package-lock.json b/hustle_web/package-lock.json index 7358342..53d8596 100644 --- a/hustle_web/package-lock.json +++ b/hustle_web/package-lock.json @@ -22,6 +22,7 @@ "react-dom": "^18.2.0", "react-hook-form": "^7.45.1", "react-icons": "^4.10.1", + "react-kakao-login": "^2.1.1", "react-query": "^3.39.3", "react-router-dom": "^6.15.0", "react-scripts": "5.0.0", @@ -20864,6 +20865,14 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-kakao-login": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/react-kakao-login/-/react-kakao-login-2.1.1.tgz", + "integrity": "sha512-t9htk41/i0zUY7q92mtqdqVZZ018BPi1DgbSVVrPCmuMKhZGJOnZ9OfaKLVPu3sn8QXbJc3dPwqKOiElpb44hQ==", + "peerDependencies": { + "react": ">= 15.3.0" + } + }, "node_modules/react-query": { "version": "3.39.3", "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz", diff --git a/hustle_web/package.json b/hustle_web/package.json index 22e95f7..fc55950 100644 --- a/hustle_web/package.json +++ b/hustle_web/package.json @@ -17,6 +17,7 @@ "react-dom": "^18.2.0", "react-hook-form": "^7.45.1", "react-icons": "^4.10.1", + "react-kakao-login": "^2.1.1", "react-query": "^3.39.3", "react-router-dom": "^6.15.0", "react-scripts": "5.0.0", diff --git a/hustle_web/src/components/Login/Kakao/KakaoLogin.tsx b/hustle_web/src/components/Login/Kakao/KakaoLogin.tsx index b344f8a..a30798d 100644 --- a/hustle_web/src/components/Login/Kakao/KakaoLogin.tsx +++ b/hustle_web/src/components/Login/Kakao/KakaoLogin.tsx @@ -1,36 +1,70 @@ import axios from 'axios'; import { useEffect } from 'react'; -const kakaoLogin = () => { +const KakaoLoginRedirect = () => { + console.log('카카오 라우터 페이지'); useEffect(() => { + console.log('카카오 라우터 페이지'); const code = new URL(window.location.href).searchParams.get('code'); + const REST_API_KEY = '170a8a097251697cc023f05857280065'; + const REDIRECT_URL = 'http://localhost:3000/kakaoLogin'; const grantType = 'authorization_code'; - const REST_API_KEY = process.env.REACT_API_KEY; - const REDIRECT_URI = process.env.REDIRECT_URI; - axios.post( - `https://kauth.kakao.com/oauth/token?grant_type=${grantType}&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&code=${code}`, + `https://kauth.kakao.com/oauth/token?grant_type=${grantType}&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URL}&code=${code}`, {}, - { headers: { 'Content-type': 'application/x-www-form-urlencoded;charset=utf-8' }} - ) - .then((res) => { + { headers: { 'Content-type' : 'application/x-www-form-urlencoded;charset=utf-8' }, + } + ) + .then((res) => { console.log(res); - const accessToken = res.data.accessToken; - axios.post('https://api.sport-hustle.com/api/auth/signin/oauth', - {}, - { - headers : { - Authorization : `Bearer ${accessToken}`, - 'Content-type' : 'application/x-www-form-urlencoded;charset=utf-8', - } - }) - .then((res: any) => { - console.log('seconde : ', res.data.accessToken); - }) - }) - .catch((error) => { - console.log(error); - }) + const {data} = res; + const { access_token, refresh_token } = data; + // res에 포함된 토큰 받아 원하는 로직 ㄱ ㄱ + if(access_token) { + console.log( `Bearer ${access_token}`); + localStorage.setItem('access_token', access_token); + localStorage.setItem('refresh_token', refresh_token); + + axios + .post( + 'https://kapi.kakao.com/v2/user/me', + {}, + { + headers: { + Authorization: `Bearer ${access_token}`, + 'Content-type' : 'application/x-www-form-urlencoded', + }, + } + ) + .then((res) => { + const userData = { + email: res.data.kakao_account.email, + name: res.data.kakao_account.profile.nickname, + birthday: res.data.kakao_account.birthday, + gender : res.data.kakao_account.gender, + universityId : 0, + snsId: '', + snsType: '', + isMailing : res.data.kakao_account.has_email, + // 필요한 다른 사용자 정보 추가 + }; + axios + .post('https://api.sport-hustle.com/api/auth/signup/oauth', userData) + .then((res)=> { + console.log('회원가입 성공', res); + }) + .catch((error) => { + console.log('회원가입 오류 : ', error); + }) + console.log('데이터 성공 : ', res); + }); + } else { + console.log('accessToken 없음'); + } +}) + .catch((Error) => { + console.log(Error) + }) },[]) return ( @@ -40,4 +74,4 @@ const kakaoLogin = () => { ); }; -export default kakaoLogin; \ No newline at end of file +export default KakaoLoginRedirect; \ No newline at end of file diff --git a/hustle_web/src/components/Login/Login.tsx b/hustle_web/src/components/Login/Login.tsx index 1ad4133..05f406a 100644 --- a/hustle_web/src/components/Login/Login.tsx +++ b/hustle_web/src/components/Login/Login.tsx @@ -7,8 +7,6 @@ import { defaultLoginValue } from '../../constants/defaultFormOption'; import FormRequirements from '../../constants/FormRequirements'; import axios from 'axios'; import { AuthContext } from '../Auth/AuthProvider'; -import { userAtom } from '../../recoil/login/login'; -import { useRecoilState } from 'recoil'; const { idRequirements, passwordRequirements } = FormRequirements; const defaultValue = defaultLoginValue; @@ -73,14 +71,14 @@ const LoginMain = () => { } }; - const kakaoLoginHandler = () => { - const REST_API_KEY = process.env.REACT_API_KEY; - const REDIRECT_URL = process.env.REDIRECT_URI; - const kakaoUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URL}&response_type=code` + + const REST_API_KEY = '170a8a097251697cc023f05857280065'; + const REDIRECT_URL = 'http://localhost:3000/kakaoLogin'; + const kakaoUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URL}&response_type=code`; - window.location.href = kakaoUrl; - - } + const kakaoLoginHandler = () => { + window.location.href = kakaoUrl; + } return ( From 2075cf3d1a48da73b7060a005a9cbd8c9f8be16d Mon Sep 17 00:00:00 2001 From: "yeondu._" <70528332+Yeonsu00-12@users.noreply.github.com> Date: Mon, 11 Sep 2023 17:35:18 +0900 Subject: [PATCH 2/3] =?UTF-8?q?Fix=20:=20kakaoLogin=20=EC=9D=B8=EA=B0=80?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EB=B0=B1=EC=9C=BC=EB=A1=9C=20=EC=A0=84?= =?UTF-8?q?=EC=86=A1=ED=95=98=EB=8A=94=20=EB=B6=80=EB=B6=84=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Login/Kakao/KakaoLogin.tsx | 84 +++++-------------- 1 file changed, 21 insertions(+), 63 deletions(-) diff --git a/hustle_web/src/components/Login/Kakao/KakaoLogin.tsx b/hustle_web/src/components/Login/Kakao/KakaoLogin.tsx index a30798d..cceb86c 100644 --- a/hustle_web/src/components/Login/Kakao/KakaoLogin.tsx +++ b/hustle_web/src/components/Login/Kakao/KakaoLogin.tsx @@ -1,71 +1,29 @@ import axios from 'axios'; -import { useEffect } from 'react'; +import { useEffect,useContext } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { AuthContext } from '../../Auth/AuthProvider'; + const KakaoLoginRedirect = () => { - console.log('카카오 라우터 페이지'); + const navigate = useNavigate(); + const { setIsLoggedIn } = useContext(AuthContext); + useEffect(() => { - console.log('카카오 라우터 페이지'); const code = new URL(window.location.href).searchParams.get('code'); - const REST_API_KEY = '170a8a097251697cc023f05857280065'; - const REDIRECT_URL = 'http://localhost:3000/kakaoLogin'; - const grantType = 'authorization_code'; - axios.post( - `https://kauth.kakao.com/oauth/token?grant_type=${grantType}&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URL}&code=${code}`, - {}, - { headers: { 'Content-type' : 'application/x-www-form-urlencoded;charset=utf-8' }, - } - ) - .then((res) => { - console.log(res); - const {data} = res; - const { access_token, refresh_token } = data; - // res에 포함된 토큰 받아 원하는 로직 ㄱ ㄱ - if(access_token) { - console.log( `Bearer ${access_token}`); - localStorage.setItem('access_token', access_token); - localStorage.setItem('refresh_token', refresh_token); - - axios - .post( - 'https://kapi.kakao.com/v2/user/me', - {}, - { - headers: { - Authorization: `Bearer ${access_token}`, - 'Content-type' : 'application/x-www-form-urlencoded', - }, - } - ) - .then((res) => { - const userData = { - email: res.data.kakao_account.email, - name: res.data.kakao_account.profile.nickname, - birthday: res.data.kakao_account.birthday, - gender : res.data.kakao_account.gender, - universityId : 0, - snsId: '', - snsType: '', - isMailing : res.data.kakao_account.has_email, - // 필요한 다른 사용자 정보 추가 - }; - axios - .post('https://api.sport-hustle.com/api/auth/signup/oauth', userData) - .then((res)=> { - console.log('회원가입 성공', res); - }) - .catch((error) => { - console.log('회원가입 오류 : ', error); - }) - console.log('데이터 성공 : ', res); - }); - } else { - console.log('accessToken 없음'); - } -}) - .catch((Error) => { - console.log(Error) - }) - },[]) + axios.get(`https://api.sport-hustle.com/api/oauth/kakao/token?code=${code}`, { + headers : {'Content-Type' : 'application/json;charset=utf-8'}, + }) + .then((res) => { + console.log('코드 전송 성공', res); + // localStorage.setItem('token : ',res.headers.authorization) + localStorage.setItem('카카오 토큰', res.data.accessToken); + setIsLoggedIn(true); + navigate('/'); + }).catch((error) => { + console.log('코드 전송 실패', error); + }) + },[setIsLoggedIn, navigate]); + return (
From 94fdcd1efb72b10c5f47383bf7434ba4ae32223f Mon Sep 17 00:00:00 2001 From: "yeondu._" <70528332+Yeonsu00-12@users.noreply.github.com> Date: Wed, 20 Sep 2023 01:24:59 +0900 Subject: [PATCH 3/3] =?UTF-8?q?Fix=20:=20=EC=B9=B4=EC=B9=B4=EC=98=A4=20?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- hustle_web/src/Router.tsx | 2 +- .../src/components/Login/Kakao/KakaoLogin.tsx | 60 ++++++++++---- hustle_web/src/components/Login/Login.tsx | 14 ++-- .../components/SignIn/UniversitySearch.tsx | 80 ++++--------------- hustle_web/src/constants/interfaces.ts | 4 + hustle_web/src/recoil/login/loginState.tsx | 1 - hustle_web/src/routes.ts | 2 +- 7 files changed, 73 insertions(+), 90 deletions(-) diff --git a/hustle_web/src/Router.tsx b/hustle_web/src/Router.tsx index 3186b5d..3125bba 100644 --- a/hustle_web/src/Router.tsx +++ b/hustle_web/src/Router.tsx @@ -39,7 +39,7 @@ const Router = () => { } /> } /> } /> - }/> + }/> } /> { const navigate = useNavigate(); - const { setIsLoggedIn } = useContext(AuthContext); + const { setIsLoggedIn, setAccessToken, refreshAccessToken } = useContext(AuthContext); + const code = new URL(window.location.href).searchParams.get('code'); + const [selectedUniversity, setSelectedUniversity] = useState(''); - useEffect(() => { - const code = new URL(window.location.href).searchParams.get('code'); - axios.get(`https://api.sport-hustle.com/api/oauth/kakao/token?code=${code}`, { - headers : {'Content-Type' : 'application/json;charset=utf-8'}, - }) + const handleUniversitySelection = (universityId: number) => { + const university = `${universityId}`; + setSelectedUniversity(university); + console.log(selectedUniversity); + }; + + const handleSubmit = () => { + axios.get(`https://api.sport-hustle.com/api/oauth/kakao/token?code=${code}`) .then((res) => { - console.log('코드 전송 성공', res); - // localStorage.setItem('token : ',res.headers.authorization) - localStorage.setItem('카카오 토큰', res.data.accessToken); - setIsLoggedIn(true); - navigate('/'); + console.log('카카오 정보 : ',res.data); + console.log('카카오 accessToken : ',res.data.accessToken); + const token = res.data.accessToken; + const postData = { + kakaoInfo : res.data, + university : selectedUniversity, // 선택된 대학교 아이디 값 + }; + axios.post('카카오 회원가입 정보 api', postData,{ + headers : { + 'Authorization' : `Bearer ${token}` + } + }) + .then((res) => { + console.log('회원가입 성공 : ', res); + setIsLoggedIn(true); + const accessToken = res.data.accessToken; + localStorage.setItem('카카오 허슬 토큰', accessToken); + localStorage.setItem('카카오 허슬 리프레시 토큰', res.data.refreshToken); + setAccessToken(accessToken); + navigate('/'); + }) }).catch((error) => { - console.log('코드 전송 실패', error); + console.log('카카오 정보 가져오기 실패',error); + if(error.res && error.res.status === 400){ + refreshAccessToken(); + } else { + navigate('/login'); + } }) - },[setIsLoggedIn, navigate]); + } return (
- 로그인 중입니다. 잠시만 기다려주세요 +
카카오 추가 정보
+ +
); }; diff --git a/hustle_web/src/components/Login/Login.tsx b/hustle_web/src/components/Login/Login.tsx index 05f406a..d315d21 100644 --- a/hustle_web/src/components/Login/Login.tsx +++ b/hustle_web/src/components/Login/Login.tsx @@ -1,4 +1,4 @@ -import React, { useContext, useState } from 'react'; +import React, { useContext, useEffect, useState } from 'react'; import * as L from './LoginStyle'; import { useNavigate } from 'react-router-dom'; import { LoginProps } from '../../constants/interfaces'; @@ -71,12 +71,10 @@ const LoginMain = () => { } }; - - const REST_API_KEY = '170a8a097251697cc023f05857280065'; - const REDIRECT_URL = 'http://localhost:3000/kakaoLogin'; - const kakaoUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URL}&response_type=code`; - - const kakaoLoginHandler = () => { + function loginwithKakao() { + const REST_API_KEY = '170a8a097251697cc023f05857280065'; + const REDIRECT_URL = 'http://localhost:3000/oauth/kakaoLogin'; + const kakaoUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URL}&response_type=code`; window.location.href = kakaoUrl; } @@ -114,7 +112,7 @@ const LoginMain = () => { 카카오 로그인 diff --git a/hustle_web/src/components/SignIn/UniversitySearch.tsx b/hustle_web/src/components/SignIn/UniversitySearch.tsx index ef7c0b1..edefd9a 100644 --- a/hustle_web/src/components/SignIn/UniversitySearch.tsx +++ b/hustle_web/src/components/SignIn/UniversitySearch.tsx @@ -4,68 +4,53 @@ import { useState, useEffect } from 'react'; import { UniversityProps } from '../../constants/interfaces'; import Select from 'react-select'; -// interface UniversitySearchProps { -// onSelectUniversity: (universityName: string) => void; -// } - const UniversitySearch = ({ onSelecteUniversity }: { onSelecteUniversity: (UniversityId: number) => void; }) => { const [universityList, setUniversityList] = useState([]); - const [searchQuery, setSearchQuery] = useState(''); // 검색어 상태 추가 - const [selectedId, setSelectedId] = useState(0); + const [searchQuery,] = useState(''); // 검색어 상태 추가 + const [selectedUniversity, setSelectedUniversity] = useState(null); const handleSearchUniversity = async () => { - // setUniversityList(dummyUniversityData); try { const response = await axios.get( `https://api.sport-hustle.com/api/university?keyword=${searchQuery}` ); - setUniversityList(response.data.universities); + setUniversityList(response.data.data); } catch (error) { console.error('대학교 검색 오류:', error); setUniversityList([]); } }; - const options = universityList.map((university) => ({ + const options = universityList + .filter((university) => typeof university.id === 'number') + .map((university) => ({ value: university.id, - label: university.name + label: university.name, + address : university.address })); - // const handleUniversitySelection = (universityId: number) => { - // const selectedUniversity = universityList.find(university => university.id === universityId); - - // if(selectedUniversity){ - // setSearchQuery(selectedUniversity.name); // 선택된 대학교 이름을 검색창에 표시 - // onSelecteUniversity(selectedUniversity.id); // 선택된 대학교 이름을 부모 컴포넌트로 전달 - // } - // }; - const handleUniversitySelection = (selectedOption: any) => { - if (selectedOption) { - setSearchQuery(selectedOption.label); // 선택된 대학교 이름을 검색창에 표시 - onSelecteUniversity(selectedOption.value); // 선택된 대학교 ID를 부모 컴포넌트로 전달 - } + setSelectedUniversity(selectedOption); }; useEffect(() => { handleSearchUniversity(); - }); + },[searchQuery]); + + useEffect(() => { + if (selectedUniversity !== null) { + onSelecteUniversity(selectedUniversity.id); + } + }, [selectedUniversity, onSelecteUniversity]); + return ( <> 소속 대학교 - {/* ) => { - setSearchQuery(e.target.value); - }} - /> */} {universityList.length > 0 && (