Merge pull request #172 from prgrms-web-devcourse-final-project/feat/169-kakao-login

[feat] 카카오 로그인 구현

Author: kangsuyeong

src/App.tsx

@@ -26,6 +26,7 @@ import TestLoginModal from '@/components/testLogin/TestLoginModal';
 
 import { useSheetStore } from './store/sheetStore';
 import AnimatedLayout from '@/layouts/AnimatedLayout';
+import KaKaoRedirection from '@/components/KaKaoRedirection';
 
 function App() {
   const location = useLocation();
@@ -83,6 +84,8 @@ function App() {
               <Route path="/mypage/blocklist" element={<BlockList />} />
               <Route path="/user/:userId" element={<UserProfile isMyPage={false} />} />
             </Route>
+
+            <Route path="/auth/login/kakao/callback" element={<KaKaoRedirection />} />
             <Route path="*" element={<NotFound />} />
           </Route>
         </Routes>

src/apis/auth.ts

@@ -40,3 +40,9 @@ export const reissueToken = async () => {
   }
   return data;
 };
+
+// 카카오 로그인
+export const getKakaoLogin = async (code: string) => {
+  const { data } = await axiosInstance.get('/auth/login/kakao', { params: { code } });
+  return data;
+};

src/components/KaKaoRedirection.tsx

@@ -0,0 +1,32 @@
+import { getKakaoLogin } from '@/apis/auth';
+import Loading from '@/components/loading/Loading';
+import { useAuthStore } from '@/store/authStore';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router';
+
+function KaKaoRedirection() {
+  const navigate = useNavigate();
+  const kakaoCode = new URL(window.location.href).searchParams.get('code');
+  const { setAccessToken } = useAuthStore();
+
+  const handleKaKaoLogin = async () => {
+    try {
+      const { code, data } = await getKakaoLogin(kakaoCode as string);
+      if (code === 200) {
+        setAccessToken(data.accessToken);
+        navigate('/home');
+      } else {
+        throw new Error('로그인 에러');
+      }
+    } catch (error) {
+      console.error('로그인 에러가 발생했습니다.');
+    }
+  };
+
+  useEffect(() => {
+    handleKaKaoLogin();
+  }, []);
+  return <Loading />;
+}
+
+export default KaKaoRedirection;

src/pages/Login.tsx

@@ -71,6 +71,13 @@ export default function Login() {
     resetInputs();
   };
 
+  const handleKakaoLogin = () => {
+    const KAKAO_CLIENT_ID = import.meta.env.VITE_KAKAO_CLIENT_ID;
+    const KAKAO_REDIRECT_URI = import.meta.env.VITE_KAKAO_REDIRECT_URI;
+    const link = `https://kauth.kakao.com/oauth/authorize?client_id=${KAKAO_CLIENT_ID}&redirect_uri=${KAKAO_REDIRECT_URI}&response_type=code`;
+    window.location.href = link;
+  };
+
   const renderButtonContent = () => {
     if (isLoading) {
       return <SpinLoading />;
@@ -119,7 +126,10 @@ export default function Login() {
 
       <div className="flex flex-col gap-3 items-center w-full mt-2.5 ">
         {/* 소셜 로그인 */}
-        <Button className="bg-[#FEE500] text-gray-80 gap-1.5 hover:bg-[#fded63]">
+        <Button
+          className="bg-[#FEE500] text-gray-80 gap-1.5 hover:bg-[#fded63]"
+          onClick={handleKakaoLogin}
+        >
           <img className="w-4" src={kakao} alt="카카오 아이콘" />
           <span className="text-black/85">카카오로 시작하기</span>
         </Button>