From 65432fe1c6bf5d6dfa76a6d226252842cb4322d6 Mon Sep 17 00:00:00 2001
From: ChoiWonkeun <wonkeun824@gmail.com>
Date: Sun, 30 Nov 2025 17:47:36 +0900
Subject: [PATCH] Add GitHub login UI and Home login button

---
 src/App.jsx                             |  6 ++++++
 src/features/auth/GithubCallback.jsx    | 26 +++++++++++++++++++++++++
 src/features/auth/GithubLoginButton.jsx | 18 +++++++++++++++++
 src/features/auth/Login.jsx             | 18 +++++++++++++++++
 src/features/home/Home.jsx              |  8 ++++++++
 src/main.jsx                            |  1 +
 6 files changed, 77 insertions(+)
 create mode 100644 src/features/auth/GithubCallback.jsx
 create mode 100644 src/features/auth/GithubLoginButton.jsx
 create mode 100644 src/features/auth/Login.jsx

diff --git a/src/App.jsx b/src/App.jsx
index f3dac04..be249c2 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,10 @@
 // apps/web/src/App.jsx
 import { Routes, Route } from "react-router-dom";
 
+// 맨 위 import 부분
+import Login from "@/features/auth/Login";
+import GithubCallback from "@/features/auth/GithubCallback";
+
 // Feature-based 페이지들
 import Home from "./features/home/Home";
 import CodingTest from "./features/codingTest/CodingTest";
@@ -27,6 +31,8 @@ export default function App() {
       <Route path="/interview" element={<Intro />} />
       <Route path="/interview/session" element={<Session />} />
       <Route path="/interview/result" element={<Result />} />
+      <Route path="/login" element={<Login />} />
+      <Route path="/oauth/github/callback" element={<GithubCallback />} />
 
       {/* 404 */}
       <Route path="*" element={<div style={{ padding: 24 }}>Not Found</div>} />
diff --git a/src/features/auth/GithubCallback.jsx b/src/features/auth/GithubCallback.jsx
new file mode 100644
index 0000000..3ba758a
--- /dev/null
+++ b/src/features/auth/GithubCallback.jsx
@@ -0,0 +1,26 @@
+// src/features/auth/GithubCallback.jsx
+import { useEffect } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+
+export default function GithubCallback() {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    const token = params.get("token"); // ?token=... 이라고 온다고 가정
+
+    if (token) {
+      localStorage.setItem("accessToken", token);
+      navigate("/", { replace: true });
+    } else {
+      navigate("/login", { replace: true });
+    }
+  }, [location, navigate]);
+
+  return (
+    <div className="bg-app min-h-screen flex items-center justify-center">
+      <p className="text-sm text-white">GitHub 로그인 처리 중...</p>
+    </div>
+  );
+}
diff --git a/src/features/auth/GithubLoginButton.jsx b/src/features/auth/GithubLoginButton.jsx
new file mode 100644
index 0000000..7a77fa7
--- /dev/null
+++ b/src/features/auth/GithubLoginButton.jsx
@@ -0,0 +1,18 @@
+// src/features/auth/GithubLoginButton.jsx
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
+
+export default function GithubLoginButton() {
+  const handleGithubLogin = () => {
+    // 백엔드 OAuth 진입점 (나중에 실제 엔드포인트로만 바꿔주면 됨)
+    window.location.href = `${API_BASE_URL}/oauth2/authorization/github`;
+  };
+
+  return (
+    <button
+      onClick={handleGithubLogin}
+      className="btn-neon w-full py-2 mt-3 text-sm"
+    >
+      Login with GitHub
+    </button>
+  );
+}
diff --git a/src/features/auth/Login.jsx b/src/features/auth/Login.jsx
new file mode 100644
index 0000000..2f40349
--- /dev/null
+++ b/src/features/auth/Login.jsx
@@ -0,0 +1,18 @@
+// src/features/auth/Login.jsx
+import GithubLoginButton from "./GithubLoginButton";
+
+export default function Login() {
+  return (
+    <div className="bg-app min-h-screen flex items-center justify-center p-4">
+      <div className="gcard max-w-md w-full">
+        <div className="ginner glass-sheen p-6 space-y-4">
+          <div className="gheader text-base">Sign in</div>
+
+          {/* 나중에 이메일 로그인 넣고 싶으면 여기 */}
+          
+          <GithubLoginButton />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/home/Home.jsx b/src/features/home/Home.jsx
index a157149..b0364df 100644
--- a/src/features/home/Home.jsx
+++ b/src/features/home/Home.jsx
@@ -19,6 +19,14 @@ export default function Home() {
 
   return (
     <div className="min-h-screen flex flex-col relative overflow-hidden text-white">
+      <header className="w-full flex justify-end p-4 absolute z-20">
+        <Link
+          to="/login"
+          className="text-sm px-4 py-2 rounded-full border border-white/20 bg-black/30 hover:bg-white/10 transition"
+        >
+          Login
+        </Link>
+      </header>
       <Particles
         id="tsparticles"
         options={particlesOptions}
diff --git a/src/main.jsx b/src/main.jsx
index 0f7b7c7..b35a17e 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -4,6 +4,7 @@ import { BrowserRouter } from "react-router-dom"; // 1. 추가된 부분
 import App from "./App";
 import "./index.css";
 
+
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     {/* 2. <BrowserRouter>로 감싼 부분 */}