feat#42 kakao login

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

@@ -7,7 +7,7 @@ interface GetTicketApiResponse {
 }
 
 export const getTicketApi = async (ticket: string): Promise<GetTicketApiResponse> => {
-  const response = await fetchInstance.get(GET_TICKET_API_PATH, {
+  const response = await fetchInstance.get<GetTicketApiResponse>(GET_TICKET_API_PATH, {
     params: {
       ticket,
     },

src/entities/auth/hooks/index.ts

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

src/entities/auth/hooks/useKakaoLogin.ts

@@ -0,0 +1,38 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { toast } from 'sonner';
+
+import { BASE_URL } from '@/shared';
+
+import { getTicketApi } from '../apis';
+
+// --- 1. "로그인 시작"을 위한 useMutation ---
+// 이 훅은 API를 호출하지 않아. 오직 카카오 로그인 페이지로 '이동'시키는 액션만 책임져.
+export const useKakaoLogin = () => {
+  return useMutation({
+    mutationFn: () => {
+      // 실제로는 Promise를 반환할 필요는 없지만, mutationFn은 Promise를 기대해.
+      window.location.href = `${BASE_URL}/oauth2/authorization/kakao
+`;
+      return Promise.resolve();
+    },
+    onError: () => {
+      toast.error('카카오 로그인 페이지로 이동하는 데 실패했습니다.');
+    },
+  });
+};
+
+// --- 2. "콜백 처리"를 위한 useQuery ---
+export const KakaoCallbackQueryKey = {
+  callback: (ticket: string) => ['kakaoCallback', ticket],
+};
+
+export const useKakaoCallback = (ticket: string) => {
+  return useQuery({
+    queryKey: KakaoCallbackQueryKey.callback(ticket),
+    // code가 있을 때만 이 쿼리를 실행해.
+    queryFn: () => getTicketApi(ticket),
+    // 이 쿼리는 한 번만 실행되면 되므로, 재시도나 캐시 관련 옵션을 조정할 수 있어.
+    retry: 0,
+    staleTime: Infinity,
+  });
+};

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

@@ -1,21 +1,19 @@
-import { BASE_URL, Button } from '@/shared';
+import { useKakaoLogin } from '@/entities';
+import { 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}`;
-  };
-
+  const { mutate: startKakaoLogin, isPending } = useKakaoLogin();
   return (
     <Button
-      onClick={kakaoLogin}
+      onClick={() => startKakaoLogin()}
       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>
+      <span className='text-sm font-semibold'>
+        {isPending ? '이동중' : '카카오 계정으로 계속하기'}
+      </span>
     </Button>
   );
 };

src/pages/oauth/OAuthRedirectPage.tsx

@@ -1,104 +1,33 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
-import { useGetAuthTicket } from '@/entities/auth';
+import { toast } from 'sonner';
 
-import { ROUTER_PATH } from '@/shared';
+import { useKakaoCallback } from '@/entities';
+import { ROUTER_PATH, authStorage } 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]);
+  const { data, isSuccess, isError } = useKakaoCallback(ticket ?? '');
 
-  // 성공 시 처리
   useEffect(() => {
-    if (authData && !isLoading && !apiError && shouldCallApi) {
-      console.log('OAuth 인증 성공!', authData);
-
-      // refreshToken을 localStorage에 저장
-      localStorage.setItem('refreshToken', authData.refreshToken);
+    if (isSuccess && data) {
+      authStorage.refreshToken.set(data.refreshToken);
 
-      // 메인 페이지로 이동
-      navigate(ROUTER_PATH.MAIN, { replace: true });
+      navigate(ROUTER_PATH.ROOT);
     }
-  }, [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>
-    );
-  }
+    if (isError) {
+      // 실패 시, 에러 처리 후 로그인 페이지로 이동
+      toast.error('카카오 로그인에 실패했습니다.');
+      navigate('/login');
+    }
+  }, [isSuccess, isError, data, navigate]);
 
-  return null;
+  return <div>로그인 중입니다...</div>;
 }

src/shared/utils/auth-storage/auth-storage.ts

@@ -0,0 +1,31 @@
+type AuthStorageKey = {
+  accessToken: string;
+  refreshToken: string;
+};
+
+const initStorage = <T extends keyof AuthStorageKey>(key: T, storage: Storage) => {
+  const storageKey = `${key}`;
+
+  const get = (): AuthStorageKey[T] => {
+    const value = storage.getItem(storageKey);
+
+    return JSON.parse(value as string);
+  };
+
+  const set = (value: AuthStorageKey[T]) => {
+    if (value === undefined || value === null) {
+      return storage.removeItem(storageKey);
+    }
+
+    const stringifiedValue = JSON.stringify(value);
+
+    storage.setItem(storageKey, stringifiedValue);
+  };
+
+  return { get, set };
+};
+
+export const authStorage = {
+  accessToken: initStorage('accessToken', localStorage),
+  refreshToken: initStorage('refreshToken', localStorage),
+};

src/shared/utils/auth-storage/index.ts

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

src/shared/utils/index.ts

@@ -2,3 +2,4 @@ export * from './scroll-to-top';
 export * from './class-value';
 export * from './image-cache';
 export * from './chart';
+export * from './auth-storage';