feat(social-auth) : 카카오, 구글 소셜 로그인 구현

Author: stupilman

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

@@ -0,0 +1,34 @@
+"use client";
+
+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]);
+
+  return <p>구글 로그인 처리 중...</p>;
+}

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

@@ -0,0 +1,34 @@
+"use client";
+
+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/kakao?code=${code}`,
+        {
+          method: "GET",
+          credentials: "include", // 쿠키 방식이면 필수
+        }
+      );
+
+      if (res.ok) {
+        router.replace("/home");
+      } else {
+        router.replace("/sign-in");
+      }
+    };
+
+    login();
+  }, [code, router]);
+
+  return <p>카카오 로그인 처리 중...</p>;
+}

src/components/auth/SocialButton.tsx

@@ -1,8 +1,31 @@
+"use client";
+
 import { MessageCircle } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import Image from "next/image";
 
+const KAKAO_AUTH_URL =
+  "https://kauth.kakao.com/oauth/authorize" +
+  `?response_type=code` +
+  `&client_id=${process.env.NEXT_PUBLIC_KAKAO_CLIENT_ID}` +
+  `&redirect_uri=${process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI}`;
+
+const GOOGLE_AUTH_URL =
+  "https://accounts.google.com/o/oauth2/v2/auth" +
+  `?response_type=code` +
+  `&client_id=${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}` +
+  `&redirect_uri=${process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI}` +
+  `&scope=openid%20email%20profile`;
+
 export default function SocialButton() {
+  const handleKakaoLogin = () => {
+    window.location.href = KAKAO_AUTH_URL;
+  };
+
+  const handleGoogleLogin = () => {
+    window.location.href = GOOGLE_AUTH_URL;
+  };
+
   return (
     <>
       <div className="social bg-bg-main flex w-full flex-col gap-3">
@@ -11,6 +34,7 @@ export default function SocialButton() {
           variant="default"
           size="lg"
           asChild={false}
+          onClick={handleKakaoLogin}
         >
           <MessageCircle />
           Kakao로 계속하기
@@ -21,6 +45,7 @@ export default function SocialButton() {
           variant="outline"
           size="lg"
           asChild={false}
+          onClick={handleGoogleLogin}
         >
           <Image src="/googleIcon.svg" alt="Google icon" width={15} height={15} />
           Google로 계속하기