feat(social-login) : oauth 페이지들에 있는 공통 콜백 useOAuthCallback.ts으로 컴포넌트화

Author: stupilman

src/app/(auth)/oauth/google/page.tsx

@@ -1,34 +1,10 @@
 "use client";
+import { useOAuthCallback } from "@/hooks/useOAuthCallback";
 
-import { useEffect } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
-
-export default function KakaoCallbackPage() {
-  const router = useRouter();
-  const params = useSearchParams();
-  const code = params.get("code");
-
-  useEffect(() => {
-    if (!code) return;
-
-    const login = async () => {
-      const res = await fetch(
-        `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/v1/auth/login/google?code=${code}`,
-        {
-          method: "GET",
-          credentials: "include", // 쿠키 방식이면 필수
-        }
-      );
-
-      if (res.ok) {
-        router.replace("/home");
-      } else {
-        router.replace("/sign-in");
-      }
-    };
-
-    login();
-  }, [code, router]);
+// TODO: 로그인 실패 시 서버 에러 메시지 기반 분기 처리
+// TODO: 네트워크 오류/타임아웃에 대한 UX 개선 (로딩/재시도)
 
+export default function GoogleCallbackPage() {
+  useOAuthCallback("google");
   return <p>구글 로그인 처리 중...</p>;
 }

src/app/(auth)/oauth/kakao/page.tsx

@@ -1,34 +1,10 @@
 "use client";
+import { useOAuthCallback } from "@/hooks/useOAuthCallback";
 
-import { useEffect } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
+// TODO: 로그인 실패 시 서버 에러 메시지 기반 분기 처리
+// TODO: 네트워크 오류/타임아웃에 대한 UX 개선 (로딩/재시도)
 
 export default function KakaoCallbackPage() {
-  const router = useRouter();
-  const params = useSearchParams();
-  const code = params.get("code");
-
-  useEffect(() => {
-    if (!code) return;
-
-    const login = async () => {
-      const res = await fetch(
-        `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/v1/auth/login/kakao?code=${code}`,
-        {
-          method: "GET",
-          credentials: "include", // 쿠키 방식이면 필수
-        }
-      );
-
-      if (res.ok) {
-        router.replace("/home");
-      } else {
-        router.replace("/sign-in");
-      }
-    };
-
-    login();
-  }, [code, router]);
-
+  useOAuthCallback("kakao");
   return <p>카카오 로그인 처리 중...</p>;
 }

src/hooks/useOAuthCallback.ts

@@ -0,0 +1,37 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+
+export function useOAuthCallback(provider: "google" | "kakao") {
+  const router = useRouter();
+  const params = useSearchParams();
+  const code = params.get("code");
+
+  useEffect(() => {
+    if (!code) return;
+
+    const login = async () => {
+      try {
+        const res = await fetch(
+          `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/v1/auth/login/${provider}?code=${code}`,
+          {
+            method: "GET",
+            credentials: "include",
+          }
+        );
+
+        if (!res.ok) {
+          throw new Error("OAuth login failed");
+        }
+
+        router.replace("/home");
+      } catch (error) {
+        console.error(`[OAuth ${provider}] 로그인 실패`, error);
+        router.replace("/sign-in");
+      }
+    };
+
+    login();
+  }, [code, provider, router]);
+}