토큰에 추가된 userId를 반영하여 로그인 성공 시 유저 고유의 마이페이지로 리다이렉트 한다. (SWYP-team-2th#131

)

src/api/config.ts

@@ -5,7 +5,8 @@ import {
   removeAccessToken,
 } from '@/components/login/Auth/token';
 
-const isDevelopment = window.location.host.includes('dev.');
+const isDevelopment =
+  import.meta.env.VITE_API_URL_DEV || window.location.host.includes('dev.');
 
 const axiosConfig: AxiosRequestConfig = {
   baseURL: isDevelopment

src/api/useGetIdentificationInfo.ts

@@ -0,0 +1,27 @@
+import { useQuery } from '@tanstack/react-query';
+import { request } from '@/api/config';
+import { getAccessToken } from '@/components/login/Auth/token';
+
+interface IdentificationInfoResponse {
+  id: number;
+  nickname: string;
+  profileUrl: string;
+}
+
+export default function useGetIdentificationInfo() {
+  return useQuery<IdentificationInfoResponse>({
+    queryKey: ['identificationInfo'],
+    queryFn: async () => {
+      const token = getAccessToken();
+      return request<IdentificationInfoResponse>({
+        method: 'GET',
+        url: '/users/me',
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+    },
+    // 토큰이 저장되도 여기 쿼리문이 실행되지 않기 때문에 토큰이 들어오면 현재 쿼리문 실행되도록 설정
+    enabled: !!getAccessToken(),
+  });
+}

src/api/usePostKaKaoLogin.ts

@@ -1,9 +1,11 @@
 import { useMutation } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
 import { request } from '@/api/config';
 import { setAccessToken } from '@/components/login/Auth/token';
 
 interface LoginResponseType {
   accessToken: string;
+  userId: number;
 }
 
 interface LoginRequestType {
@@ -12,21 +14,23 @@ interface LoginRequestType {
 }
 
 export default function usePostKakaoLogin() {
+  const navigate = useNavigate();
+
   return useMutation<LoginResponseType, Error, LoginRequestType>({
     mutationFn: async (data) => {
-      console.log('API 요청 데이터:', data);
       return request<LoginResponseType>({
         method: 'POST',
         url: '/auth/oauth2/code/kakao',
         data,
       });
     },
     onSuccess: (data) => {
-      console.log('로그인 성공, 토큰:', data.accessToken);
       setAccessToken(data.accessToken);
+      navigate(`/user/${data.userId}`);
     },
     onError: (err) => {
       console.error('로그인 실패:', err);
+      navigate('/onboarding');
     },
   });
 }

src/pages/Login/OAuthPage.tsx

@@ -1,32 +1,17 @@
 import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
 import usePostKakaoLogin from '@/api/usePostKaKaoLogin';
 
 export default function OAuthPage() {
-  const navigate = useNavigate();
   const { mutate } = usePostKakaoLogin();
 
   useEffect(() => {
     const code = new URL(window.location.href).searchParams.get('code');
 
     if (code) {
-      mutate(
-        {
-          redirectUri: `${window.location.origin}/oauth`,
-          code,
-        },
-        {
-          onSuccess: (data) => {
-            console.log('로그인 성공, 토큰:', data.accessToken);
-            // 추후 onboarding -> 마이페이지 userId 포함해서 수정 예정
-            navigate('/onboarding');
-          },
-          onError: (err) => {
-            console.error('로그인 실패:', err);
-            navigate('/onboarding');
-          },
-        },
-      );
+      mutate({
+        redirectUri: `${window.location.origin}/oauth`,
+        code,
+      });
     }
   }, []);