[기능 구현] 카카오 OAuth 리다이렉트 페이지 및 인증 API 연동 구현 (#45)

Author: Dobbymin

src/app/routes/components/auth.routes.tsx

@@ -1,4 +1,4 @@
-import { LoginPage, RealtorCertificationPage, RealtorLoginPage } from '@/pages';
+import { LoginPage, OAuthRedirectPage, RealtorCertificationPage, RealtorLoginPage } from '@/pages';
 import { ROUTER_PATH } from '@/shared';
 import { Layout } from '@/widgets';
 
@@ -14,6 +14,11 @@ export const authRoutes = [
         element: <LoginPage />,
         handle: { layout: ROUTE_CONFIG.LOGIN.layout },
       },
+      {
+        path: ROUTE_CONFIG.OAUTH_REDIRECT.path,
+        element: <OAuthRedirectPage />,
+        handle: { layout: ROUTE_CONFIG.OAUTH_REDIRECT.layout },
+      },
     ],
   },
   {

src/app/routes/config/route-config.ts

@@ -31,6 +31,10 @@ export const ROUTE_CONFIG: Record<string, RouteConfig> = {
     path: ROUTER_PATH.REALTOR_CERTIFICATION,
     layout: 'Auth',
   },
+  OAUTH_REDIRECT: {
+    path: ROUTER_PATH.OAUTH_REDIRECT,
+    layout: 'Auth',
+  },
   REALTOR: {
     path: ROUTER_PATH.REALTOR,
     requiresRealtor: true, // 공인중개사만 접근 가능

src/entities/auth/apis/get-ticket.api.ts

@@ -0,0 +1,16 @@
+import { fetchInstance } from '@/shared';
+
+export const GET_TICKET_API_PATH = '/api/auth/ticket';
+
+interface GetTicketApiResponse {
+  refreshToken: string;
+}
+
+export const getTicketApi = async (ticket: string): Promise<GetTicketApiResponse> => {
+  const response = await fetchInstance.get(GET_TICKET_API_PATH, {
+    params: {
+      ticket,
+    },
+  });
+  return response.data;
+};

src/entities/auth/apis/index.ts

@@ -0,0 +1 @@
+export * from './get-ticket.api';

src/entities/auth/hooks/getAuthTicket.ts

@@ -0,0 +1,14 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getTicketApi } from '../apis';
+
+export const GetAuthTicketQueryKey = {
+  ticket: (ticket: string) => ['ticket', ticket],
+};
+
+export const useGetAuthTicket = (ticket: string) => {
+  return useQuery({
+    queryKey: GetAuthTicketQueryKey.ticket(ticket),
+    queryFn: () => getTicketApi(ticket),
+  });
+};

src/entities/auth/hooks/index.ts

@@ -0,0 +1 @@
+export * from './getAuthTicket';

src/entities/auth/index.ts

@@ -0,0 +1,2 @@
+export * from './apis';
+export * from './hooks';

src/features/login/components/common/buttons/KakaoLoginButton.tsx

@@ -1,10 +1,19 @@
-import { Button } from '@/shared';
+import { BASE_URL, Button } from '@/shared';
 
 import KakaoSymbol from '../../../_assets/kakao-symbol.webp';
 
 export const KakaoLoginButton = () => {
+  const kakaoLogin = () => {
+    // OAuth 서버로 리다이렉트하되, 리다이렉트 URL을 명시적으로 지정
+    const redirectUri = encodeURIComponent(`${window.location.origin}/oauth/redirect`);
+    window.location.href = `${BASE_URL}/oauth2/authorization/kakao?redirect_uri=${redirectUri}`;
+  };
+
   return (
-    <Button className='flex h-11 w-90 items-center gap-3 rounded-lg bg-kakao text-black hover:bg-kakao/80 active:bg-kakao/80'>
+    <Button
+      onClick={kakaoLogin}
+      className='flex h-11 w-90 items-center gap-3 rounded-lg bg-kakao text-black hover:bg-kakao/80 active:bg-kakao/80'
+    >
       <img src={KakaoSymbol} className='size-4' width={16} height={16} alt='kakao' />
       <span className='text-sm font-semibold'>카카오 계정으로 계속하기</span>
     </Button>

src/pages/index.ts

@@ -2,3 +2,4 @@ export * from './main';
 export * from './realtor';
 export * from './login';
 export * from './diagnostics';
+export * from './oauth';

src/pages/oauth/OAuthRedirectPage.tsx

@@ -0,0 +1,104 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+
+import { useGetAuthTicket } from '@/entities/auth';
+
+import { ROUTER_PATH } from '@/shared';
+
+export default function OAuthRedirectPage() {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const [error, setError] = useState<string | null>(null);
+
+  // URL에서 ticket 파라미터 추출
+  const ticket = searchParams.get('ticket');
+  const oauthError = searchParams.get('error');
+  const errorDescription = searchParams.get('error_description');
+
+  useEffect(() => {
+    if (oauthError) {
+      setError(errorDescription || `OAuth 인증 오류: ${oauthError}`);
+    } else if (!ticket) {
+      setError('인증 토큰이 없습니다. 다시 로그인해주세요.');
+    }
+  }, [oauthError, errorDescription, ticket]);
+
+  // ticket이 있고 OAuth 에러가 없을 때만 API 호출
+  const shouldCallApi = !!ticket && !oauthError;
+  const {
+    data: authData,
+    error: apiError,
+    isLoading,
+  } = useGetAuthTicket(shouldCallApi ? ticket : '');
+
+  // API 에러 처리
+  useEffect(() => {
+    if (apiError) {
+      console.error('API 호출 중 오류:', apiError);
+      setError('인증 검증에 실패했습니다. 다시 시도해주세요.');
+    }
+  }, [apiError]);
+
+  // 성공 시 처리
+  useEffect(() => {
+    if (authData && !isLoading && !apiError && shouldCallApi) {
+      console.log('OAuth 인증 성공!', authData);
+
+      // refreshToken을 localStorage에 저장
+      localStorage.setItem('refreshToken', authData.refreshToken);
+
+      // 메인 페이지로 이동
+      navigate(ROUTER_PATH.MAIN, { replace: true });
+    }
+  }, [authData, isLoading, apiError, navigate, shouldCallApi]);
+
+  if (isLoading && shouldCallApi) {
+    return (
+      <div className='flex min-h-screen items-center justify-center'>
+        <div className='text-center'>
+          <div className='mb-4'>
+            <div className='mx-auto h-8 w-8 animate-spin rounded-full border-4 border-blue-500 border-t-transparent'></div>
+          </div>
+          <p className='text-lg font-medium text-gray-700'>인증 처리 중...</p>
+          <p className='mt-2 text-sm text-gray-500'>잠시만 기다려주세요.</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className='flex min-h-screen items-center justify-center'>
+        <div className='text-center'>
+          <div className='mb-4'>
+            <div className='mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
+              <svg
+                className='h-6 w-6 text-red-600'
+                fill='none'
+                viewBox='0 0 24 24'
+                stroke='currentColor'
+              >
+                <path
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                  strokeWidth={2}
+                  d='M6 18L18 6M6 6l12 12'
+                />
+              </svg>
+            </div>
+          </div>
+          <h2 className='mb-2 text-xl font-semibold text-gray-900'>인증 실패</h2>
+          <p className='mb-4 text-gray-600'>{error}</p>
+          <button
+            onClick={() => navigate(ROUTER_PATH.LOGIN)}
+            className='rounded-lg bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600'
+          >
+            로그인 페이지로 돌아가기
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+}