refactor: 로그인 컴포넌트 분리

src/app/(iTracker)/login/page.tsx

@@ -1,38 +1,13 @@
 'use client';
 
-import { API_BASE_URL } from '@/shared/api/constants';
+import Login from '@/features/auth/components/login';
 import { Loading } from '@/shared/components/Loading';
-import { useToast } from '@/shared/components/shadcn/ui/use-toast';
-import { useSearchParams } from 'next/navigation';
-import { Suspense, useEffect } from 'react';
+import { Suspense } from 'react';
 
 export default function LoginPage() {
-  const params = useSearchParams();
-  const { toast } = useToast();
-
-  useEffect(() => {
-    if (params.get('needLogin') === 'true') {
-      toast({
-        title: '로그인이 필요한 기능이에요.',
-        description: '로그인 페이지로 이동했습니다. 로그인 후 이용해주세요.',
-      });
-    }
-  }, [params, toast]);
-
-  const handleButtonClick = () => {
-    window.location.href = `${API_BASE_URL}/api/v1/oauth/kakao`;
-  };
-
   return (
     <Suspense fallback={<Loading />}>
-      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
-        <button
-          onClick={handleButtonClick}
-          style={{ padding: '10px 20px', fontSize: '18px', borderRadius: '5px', cursor: 'pointer' }}
-        >
-          카카오톡 로그인
-        </button>
-      </div>
+      <Login />
     </Suspense>
   );
 }

src/app/(iTracker)/oauth/redirected/kakao/page.tsx

@@ -1,43 +1,12 @@
 'use client';
 
-import { useState, useEffect, Suspense } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
 import { Loading } from '@/shared/components/Loading';
-import { useToast } from '@/shared/components/shadcn/ui/use-toast';
-import { getLoginToken } from '@/features/auth/api/oauth';
+import { Suspense } from 'react';
 
 export default function KakaoCallbackPage() {
-  const searchParams = useSearchParams();
-  const [authCode, setAuthCode] = useState<string | null>(null);
-  const router = useRouter();
-  const { toast } = useToast();
-
-  useEffect(() => {
-    const code = searchParams.get('code');
-    if (code && code !== authCode) {
-      setAuthCode(code);
-    }
-  }, [searchParams, authCode]);
-
-  useEffect(() => {
-    if (authCode) {
-      getLoginToken(authCode)
-        .then(() => {
-          toast({
-            title: '로그인 완료!',
-          });
-          router.push('/my');
-        })
-        .catch((e) => {
-          console.error(e);
-          router.push('/login');
-        });
-    }
-  }, [authCode, router, toast]);
-
   return (
     <Suspense fallback={<Loading />}>
-      <div>processing...</div>
+      <KakaoCallbackPage />
     </Suspense>
   );
 }

src/features/auth/components/KakaoCallback.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useToast } from '@/shared/components/shadcn/ui/use-toast';
+import { getLoginToken } from '@/features/auth/api/oauth';
+
+export default function KakaoCallbackPage() {
+  const searchParams = useSearchParams();
+  const [authCode, setAuthCode] = useState<string | null>(null);
+  const router = useRouter();
+  const { toast } = useToast();
+
+  useEffect(() => {
+    const code = searchParams.get('code');
+    if (code && code !== authCode) {
+      setAuthCode(code);
+    }
+  }, [searchParams, authCode]);
+
+  useEffect(() => {
+    if (authCode) {
+      getLoginToken(authCode)
+        .then(() => {
+          toast({
+            title: '로그인 완료!',
+          });
+          router.push('/my');
+        })
+        .catch((e) => {
+          console.error(e);
+          router.push('/login');
+        });
+    }
+  }, [authCode, router, toast]);
+
+  return <div>processing...</div>;
+}

src/features/auth/components/login.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { API_BASE_URL } from '@/shared/api/constants';
+import { useToast } from '@/shared/components/shadcn/ui/use-toast';
+import { useSearchParams } from 'next/navigation';
+import { useEffect } from 'react';
+
+export default function Login() {
+  const params = useSearchParams();
+  const { toast } = useToast();
+
+  useEffect(() => {
+    if (params.get('needLogin') === 'true') {
+      toast({
+        title: '로그인이 필요한 기능이에요.',
+        description: '로그인 페이지로 이동했습니다. 로그인 후 이용해주세요.',
+      });
+    }
+  }, [params, toast]);
+
+  const handleButtonClick = () => {
+    window.location.href = `${API_BASE_URL}/api/v1/oauth/kakao`;
+  };
+
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+      <button
+        onClick={handleButtonClick}
+        style={{ padding: '10px 20px', fontSize: '18px', borderRadius: '5px', cursor: 'pointer' }}
+      >
+        카카오톡 로그인
+      </button>
+    </div>
+  );
+}