Feat: 카카오 로그인 구현

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;
 }
 

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 (
     <a
       href={`${import.meta.env.VITE_SERVER_URL}oauth2/authorization/kakao`}
-      // href={KAKAO_LOGIN_URL}
+      // href="http://localhost:8080/oauth2/authorization/kakao"
       className="body3 mb-2 flex h-14 w-full items-center justify-center gap-2 rounded-lg bg-[#fee304] p-2 text-['#3B1E1E']">
       <KakaoIcon />
       카카오로 로그인

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;

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 };

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 <div>잠시만 기다려주세요</div>;
+  return <KakaoLogin />;
 };
 
 export default LoginKakao;

src/pages/signup/signupInfo.page.tsx

@@ -77,7 +77,13 @@ const SignupInfo = () => {
 
   return (
     <div className="flex h-[95vh] flex-col">
-      <BackBox showBack showSkip />
+      <BackBox
+        showBack
+        showSkip
+        skipHandler={() => {
+          navigate('/');
+        }}
+      />
       <AuthTitle
         title={
           <>