feat(auth): GitHub 로그인 UI 및 홈 화면 Login 버튼 추가

README.md

@@ -1,16 +1,29 @@
-# React + Vite
+✅ SkillBoost 실행 방법 (명령어 순서 정리)
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+🔵 1. 백엔드 실행 (Spring Boot)
 
-Currently, two official plugins are available:
+cd D:/IdeaProjects/back
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+./gradlew bootRun
 
-## React Compiler
 
-The React Compiler is currently not compatible with SWC. See [this issue](https://github.com/vitejs/vite-plugin-react/issues/428) for tracking the progress.
+또는 IntelliJ에서 Spring Boot 실행 버튼 클릭.
 
-## Expanding the ESLint configuration
+🔵 2. 프론트 실행 (React + Vite)
 
-If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
+cd D:/IdeaProjects/front
+
+npm install
+
+npm run dev
+
+🔵 3. 접속
+
+백엔드:
+
+http://localhost:8080
+
+
+프론트:
+
+http://localhost:3000

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>} />

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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}

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>로 감싼 부분 */}