From f86103cf425936a140d1f40ed2c21a75d06abafd Mon Sep 17 00:00:00 2001 From: wonkeun-choi Date: Thu, 27 Nov 2025 22:56:46 +0900 Subject: [PATCH 1/4] Update README.md --- README.md | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 963909f..5ee78b4 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,23 @@ -# React + Vite +✅ SkillBoost 실행 방법 (명령어 순서 정리) +🔵 1. 백엔드 실행 (Spring Boot) +cd D:/IdeaProjects/back +./gradlew bootRun -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. -Currently, two official plugins are available: +또는 IntelliJ에서 Spring Boot 실행 버튼 클릭. -- [@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 +🔵 2. 프론트 실행 (React + Vite) +cd D:/IdeaProjects/front +npm install +npm run dev -## React Compiler +🔵 3. 접속 -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. +백엔드: -## Expanding the ESLint configuration +http://localhost:8080 -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. + +프론트: + +http://localhost:3000 From 7bd6820e53d186c916487249293317ce55b8957a Mon Sep 17 00:00:00 2001 From: wonkeun-choi Date: Thu, 27 Nov 2025 22:57:01 +0900 Subject: [PATCH 2/4] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 5ee78b4..718d253 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ ✅ SkillBoost 실행 방법 (명령어 순서 정리) + 🔵 1. 백엔드 실행 (Spring Boot) cd D:/IdeaProjects/back ./gradlew bootRun From 8618d3f4b84ad93d2c1ac9c2e67beefa295f4846 Mon Sep 17 00:00:00 2001 From: wonkeun-choi Date: Thu, 27 Nov 2025 22:59:20 +0900 Subject: [PATCH 3/4] Update README.md --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index 718d253..e61c9d1 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,20 @@ ✅ SkillBoost 실행 방법 (명령어 순서 정리) 🔵 1. 백엔드 실행 (Spring Boot) + cd D:/IdeaProjects/back + ./gradlew bootRun 또는 IntelliJ에서 Spring Boot 실행 버튼 클릭. 🔵 2. 프론트 실행 (React + Vite) + cd D:/IdeaProjects/front + npm install + npm run dev 🔵 3. 접속 From 65432fe1c6bf5d6dfa76a6d226252842cb4322d6 Mon Sep 17 00:00:00 2001 From: ChoiWonkeun Date: Sun, 30 Nov 2025 17:47:36 +0900 Subject: [PATCH 4/4] 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() { } /> } /> } /> + } /> + } /> {/* 404 */} Not Found} /> 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 ( +
+

GitHub 로그인 처리 중...

+
+ ); +} 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 ( + + ); +} 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 ( +
+
+
+
Sign in
+ + {/* 나중에 이메일 로그인 넣고 싶으면 여기 */} + + +
+
+
+ ); +} 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 (
+
+ + Login + +
{/* 2. 로 감싼 부분 */}