feat :: 구글 로그인 인증 로직 구현

Author: ljh130334

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.env

src/App.tsx

@@ -6,13 +6,15 @@ import Login from "./pages/Login";
 import Reservation from "./pages/Reservation";
 import ReservationComplete from "./pages/ReservationComplete";
 import DesignerDetail from "./pages/DesignerDetail";
+import OAuthCallback from "./pages/OAuthCallback";
 
 function App() {
   return (
     <Router>
       <Routes>
         {/* 기본 랜딩 페이지 (/) */}
         <Route path="/" element={<Landing />} />
+        <Route path="/oauth/callback" element={<OAuthCallback />} />
         <Route path="/login" element={<Login />} />
         <Route path="/reservation" element={<Reservation />} />
         <Route path="/reservationcomplete" element={<ReservationComplete />} />

src/pages/Landing.tsx

@@ -1,6 +1,18 @@
 import "../styles/Landing.styles.css";
 
 export default function LandingPage() {
+  const handleGoogleLogin = async () => {
+    try {
+      const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/oauth2/login`);
+      if (!res.ok) throw new Error("로그인 URL 요청 실패");
+
+      const loginUrl = await res.text(); // 응답이 단순 URL일 경우
+      window.location.href = loginUrl; // 응답받은 URL로 이동
+    } catch (err) {
+      console.error("Google Login Error:", err);
+    }
+  };
+
   return (
     <div className="landing-container">
       <header className="header">
@@ -18,7 +30,7 @@ export default function LandingPage() {
       </div>
 
       <div className="button-container">
-        <button className="google-login-btn">
+        <button className="google-login-btn" onClick={handleGoogleLogin}>
           <img src="/icons/google-icon.svg" alt="Google" />
           구글로 시작하기
         </button>

src/pages/OAuthCallback.tsx

@@ -0,0 +1,46 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+export default function OAuthCallback() {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const code = urlParams.get("code");
+
+    if (!code) {
+      console.error("Authorization code가 없습니다.");
+      navigate("/"); // 로그인 실패 시 홈으로 리디렉트
+      return;
+    }
+
+    const formData = new URLSearchParams();
+    formData.append("code", code);
+
+    fetch(`${import.meta.env.VITE_BACKEND_URL}/api/oauth2/callback`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      body: formData,
+      credentials: "include", // 쿠키 포함 (RefreshToken 저장)
+    })
+      .then((res) => {
+        if (!res.ok) throw new Error("서버 응답 오류");
+
+        const accessToken = res.headers.get("Authorization"); // 응답 헤더에서 AccessToken 추출
+        if (accessToken) {
+          localStorage.setItem("accessToken", accessToken);
+          navigate("/designerlist"); // 로그인 성공 후 디자이너 리스트 페이지로 이동
+        } else {
+          throw new Error("AccessToken이 없습니다.");
+        }
+      })
+      .catch((err) => {
+        console.error("OAuth Callback Error:", err);
+        navigate("/"); // 로그인 실패 시 홈으로 이동
+      });
+  }, [navigate]);
+
+  return <div>로그인 처리 중...</div>;
+}