Refactor: OAuthCallback 부분 리팩토링

frontend/src/components/OAuthCallback/index.tsx

@@ -1,26 +1,18 @@
-import { useEffect } from 'react';
+import { useHandleOAuthCallback } from '@/hooks/useOAuthCallbackHooks';
 import { useNavigate } from 'react-router-dom';
+import { useEffect } from 'react';
 import useAuthStore from '@/stores/useAuthStore';
-import useProfileQuery from '@/queries/useProfileQuery';
 
 export default function OAuthCallback() {
-  const queryParams = new URLSearchParams(window.location.search);
+  useHandleOAuthCallback();
-  const accessToken = queryParams.get('accessToken');
   const navigate = useNavigate();
-  const setLoggedIn = useAuthStore((state) => state.setLoggedIn);
+  const profile = useAuthStore((state) => state.profile);
-  const setProfile = useAuthStore((state) => state.setProfile);
-  const { data: profile } = useProfileQuery();
 
   useEffect(() => {
-    if (!accessToken) {
+    if (profile) {
-      navigate('/');
+      navigate('/browse', { replace: true });
-      return;
     }
+  }, [profile, navigate]);
 
-    setLoggedIn(true, accessToken);
+  return null;
-    setProfile(profile);
-    navigate('/browse');
-  }, [accessToken, navigate, profile, setLoggedIn, setProfile]);
-
-  return <p>처리 중입니다...</p>;
 }

frontend/src/hooks/useOAuthCallbackHooks.ts

@@ -0,0 +1,19 @@
+import useAuthStore from '@/stores/useAuthStore';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { getProfile } from '@/api/authApi';
+
+export function useHandleOAuthCallback() {
+  const queryParams = new URLSearchParams(window.location.search);
+  const accessToken = queryParams.get('accessToken');
+  const setLoggedIn = useAuthStore((state) => state.setLoggedIn);
+  const setProfile = useAuthStore((state) => state.setProfile);
+
+  accessToken && setLoggedIn(true, accessToken);
+
+  const { data: profile } = useSuspenseQuery({
+    queryKey: ['profile'],
+    queryFn: getProfile,
+  });
+
+  setProfile(profile);
+}

frontend/src/router/index.tsx

@@ -92,7 +92,11 @@ const router = createBrowserRouter([
   },
   {
     path: webPath.oauthCallback(),
-    element: <OAuthCallback />,
+    element: (
+      <Suspense fallback={<div></div>}>
+        <OAuthCallback />
+      </Suspense>
+    ),
   },
 ]);