From 255ecba37bdf33e3f9e2afef1137b6fffdc0eef1 Mon Sep 17 00:00:00 2001 From: jisu Seo Date: Tue, 9 Jan 2024 20:09:51 +0900 Subject: [PATCH 1/2] =?UTF-8?q?Refactor:=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=9E=84=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/authClient.ts | 2 +- src/api/client.ts | 2 +- .../Auth/Login/AuthButtons/KakaoLoginButton.tsx | 11 ++++++----- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/api/authClient.ts b/src/api/authClient.ts index 57f7f4a9..b84aecba 100644 --- a/src/api/authClient.ts +++ b/src/api/authClient.ts @@ -1,7 +1,7 @@ import axios from 'axios'; const authClient = axios.create({ - baseURL: import.meta.env.VITE_SERVER_URL, + baseURL: `${import.meta.env.VITE_SERVER_URL}api/`, headers: { 'Content-Type': 'application/json', }, diff --git a/src/api/client.ts b/src/api/client.ts index 07bd5c25..e73881dc 100644 --- a/src/api/client.ts +++ b/src/api/client.ts @@ -1,7 +1,7 @@ import axios from 'axios'; const client = axios.create({ - baseURL: import.meta.env.VITE_SERVER_URL, + baseURL: `${import.meta.env.VITE_SERVER_URL}api/`, headers: { 'Content-Type': 'application/json', }, diff --git a/src/components/Auth/Login/AuthButtons/KakaoLoginButton.tsx b/src/components/Auth/Login/AuthButtons/KakaoLoginButton.tsx index aba29b0f..1829eedb 100644 --- a/src/components/Auth/Login/AuthButtons/KakaoLoginButton.tsx +++ b/src/components/Auth/Login/AuthButtons/KakaoLoginButton.tsx @@ -1,14 +1,15 @@ import { KakaoIcon } from '@components/common/icons/Icons'; const KakaoLoginButton = () => { - const VITE_KAKAO_LOGIN_TEST_API_KEY = import.meta.env - .VITE_KAKAO_LOGIN_TEST_API_KEY; - const REDIRECT_URI = `${window.location.href}/kakao`; - const KAKAO_LOGIN_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${VITE_KAKAO_LOGIN_TEST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`; + // const VITE_KAKAO_LOGIN_TEST_API_KEY = import.meta.env + // .VITE_KAKAO_LOGIN_TEST_API_KEY; + // const REDIRECT_URI = `${window.location.href}/kakao`; + // const KAKAO_LOGIN_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${VITE_KAKAO_LOGIN_TEST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`; return ( 카카오로 로그인 From 10f55f3a86c503f95ab7267287f328a09b32b3df Mon Sep 17 00:00:00 2001 From: jisu Seo Date: Fri, 12 Jan 2024 03:57:16 +0900 Subject: [PATCH 2/2] =?UTF-8?q?Feat:=20=EC=B9=B4=EC=B9=B4=EC=98=A4=20?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@types/member.types.ts | 18 ++++---- .../Login/AuthButtons/KakaoLoginButton.tsx | 7 +-- src/components/Auth/Login/KakaoLogin.tsx | 44 +++++++++++++++++++ src/components/Auth/Login/index.ts | 3 +- src/pages/login/loginKakao.page.tsx | 15 +------ src/pages/signup/signupInfo.page.tsx | 8 +++- 6 files changed, 65 insertions(+), 30 deletions(-) create mode 100644 src/components/Auth/Login/KakaoLogin.tsx diff --git a/src/@types/member.types.ts b/src/@types/member.types.ts index bdb4b699..a7ef7fd7 100644 --- a/src/@types/member.types.ts +++ b/src/@types/member.types.ts @@ -14,15 +14,15 @@ interface MemberInfo { nickname: string; email: string; profileImageUrl: string | null; - ageType: - | 'TEENAGER' - | 'TWENTIES' - | 'THIRTIES' - | 'FOURTIES' - | 'ABOVE_FIFTIES' - | 'DEFATULT' - | null; - genderType: 'MALE' | 'FEMALE' | 'NON_BINARY' | null; + ageType: string | null; + // | 'TEENAGER' + // | 'TWENTIES' + // | 'THIRTIES' + // | 'FOURTIES' + // | 'ABOVE_FIFTIES' + // | 'DEFATULT' + genderType: string | null; + // 'MALE' | 'FEMALE' | 'NON_BINARY' | 'DEFATULT'; survey: Survey | null; } diff --git a/src/components/Auth/Login/AuthButtons/KakaoLoginButton.tsx b/src/components/Auth/Login/AuthButtons/KakaoLoginButton.tsx index 1829eedb..c5227cc7 100644 --- a/src/components/Auth/Login/AuthButtons/KakaoLoginButton.tsx +++ b/src/components/Auth/Login/AuthButtons/KakaoLoginButton.tsx @@ -1,15 +1,10 @@ import { KakaoIcon } from '@components/common/icons/Icons'; const KakaoLoginButton = () => { - // const VITE_KAKAO_LOGIN_TEST_API_KEY = import.meta.env - // .VITE_KAKAO_LOGIN_TEST_API_KEY; - // const REDIRECT_URI = `${window.location.href}/kakao`; - // const KAKAO_LOGIN_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${VITE_KAKAO_LOGIN_TEST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`; - return ( 카카오로 로그인 diff --git a/src/components/Auth/Login/KakaoLogin.tsx b/src/components/Auth/Login/KakaoLogin.tsx new file mode 100644 index 00000000..541ce440 --- /dev/null +++ b/src/components/Auth/Login/KakaoLogin.tsx @@ -0,0 +1,44 @@ +import { UserInfoState } from '@recoil/Auth.atom'; +import { setItem } from '@utils/localStorageFun'; +import { useEffect } from 'react'; +import { useNavigate, useSearchParams } from 'react-router-dom'; +import { useSetRecoilState } from 'recoil'; + +const KakaoLogin = () => { + const setUserInfo = useSetRecoilState(UserInfoState); + const navigate = useNavigate(); + + const [searchParams, _] = useSearchParams(); + const nickname = searchParams.get('nickname'); + const email = searchParams.get('email'); + const gender = searchParams.get('gender'); + const age_range = searchParams.get('age_range'); + const accessToken = searchParams.get('token'); + const profile_image = searchParams.get('profile_image'); + const signup = searchParams.get('signup'); + + useEffect(() => { + if (accessToken) { + setItem('accessToken', accessToken); + setUserInfo({ + nickname: nickname!, + email: email!, + profileImageUrl: profile_image, + ageType: age_range, + genderType: gender, + survey: null, + }); + if (signup) { + navigate('/signup/success'); + } else { + navigate('/'); + } + } else { + alert('로그인에 실패했습니다. 다시 시도해주세요.'); + navigate('/login'); + } + }, []); + return <>카카오 로그인 중입니다.; +}; + +export default KakaoLogin; diff --git a/src/components/Auth/Login/index.ts b/src/components/Auth/Login/index.ts index 424a52d4..33ef9f5a 100644 --- a/src/components/Auth/Login/index.ts +++ b/src/components/Auth/Login/index.ts @@ -1,5 +1,6 @@ import LoginLogo from './LoginLogo'; import LoginForm from './LoginForm'; import AuthButtonsWrapper from './AuthButtons/AuthButtonsWrapper'; +import KakaoLogin from './KakaoLogin'; -export { LoginLogo, LoginForm, AuthButtonsWrapper }; +export { LoginLogo, LoginForm, AuthButtonsWrapper, KakaoLogin }; diff --git a/src/pages/login/loginKakao.page.tsx b/src/pages/login/loginKakao.page.tsx index 3d8ee18a..a3f10231 100644 --- a/src/pages/login/loginKakao.page.tsx +++ b/src/pages/login/loginKakao.page.tsx @@ -1,18 +1,7 @@ -import { useEffect } from 'react'; +import { KakaoLogin } from '@components/Auth/Login'; const LoginKakao = () => { - const code = new URL(window.location.href).searchParams.get('code'); - - useEffect(() => { - console.log(code); - try { - // const res = postKakaoLogin(); - } catch (err) { - console.log('카카오 로그인 중 에러 발생'); - } - }, []); - - return
잠시만 기다려주세요
; + return ; }; export default LoginKakao; diff --git a/src/pages/signup/signupInfo.page.tsx b/src/pages/signup/signupInfo.page.tsx index cf5e2c16..7438e5a7 100644 --- a/src/pages/signup/signupInfo.page.tsx +++ b/src/pages/signup/signupInfo.page.tsx @@ -77,7 +77,13 @@ const SignupInfo = () => { return (
- + { + navigate('/'); + }} + />