dev/msa-fe
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

login 연동
Some checks failed
Build And Test / build-and-push (push) Failing after 2m39s
Details

Browse Source
This commit is contained in:
icurfer
2025-04-22 17:01:03 +09:00
parent 8fcb2cada3
commit 58850f5ff6
9 changed files with 167 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
package-lock.json generated
View File

@ -13,6 +13,7 @@
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.8.4",
"echarts": "^5.6.0",
"react": "^19.1.0",
"react-dom": "^19.1.0",
@ -4923,6 +4924,32 @@
"node": ">=4"
}
},
"node_modules/axios": {
"version": "1.8.4",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.8.4.tgz",
"integrity": "sha512-eBSYY4Y68NNlHbHBMdeDmKNtDgXWhQsJcGqzO3iLUM0GraQFSS9cVgPX5I9b3lbdFKyYoAEGAZF1DwhTaljNAw==",
"license": "MIT",
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/axios/node_modules/form-data": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
"integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
"license": "MIT",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"es-set-tostringtag": "^2.1.0",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/axobject-query": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
@ -13684,6 +13711,12 @@
"node": ">= 0.10"
}
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
"license": "MIT"
},
"node_modules/psl": {
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",

1
package.json
View File

@ -8,6 +8,7 @@
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.8.4",
"echarts": "^5.6.0",
"react": "^19.1.0",
"react-dom": "^19.1.0",

33
src/App.js
View File

@ -7,24 +7,27 @@ import About from './pages/About';
import Board from './pages/Board';
import PostCategory from './pages/PostCategory';
import Login from './pages/Login';
import { AuthProvider } from './context/AuthContext';
function App() {
return (
<Router>
<div className="flex flex-col min-h-screen">
<Navbar />
<main className="flex-grow pt-16">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/board" element={<Board />} />
<Route path="/post/:category" element={<PostCategory />} />
<Route path="/login" element={<Login />} />
</Routes>
</main>
<Footer />
</div>
</Router>
<AuthProvider>
<Router>
<div className="flex flex-col min-h-screen">
<Navbar />
<main className="flex-grow pt-16">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/board" element={<Board />} />
<Route path="/post/:category" element={<PostCategory />} />
<Route path="/login" element={<Login />} />
</Routes>
</main>
<Footer />
</div>
</Router>
</AuthProvider>
);
}

20
src/api/api.js Normal file
View File

@ -0,0 +1,20 @@
// src/api/api.js
import axios from 'axios';
const api = axios.create({
baseURL: process.env.REACT_APP_API_URL, // ✅ 환경변수에서 읽어옴
headers: {
'Content-Type': 'application/json',
}
});
// 요청에 JWT 자동 포함
api.interceptors.request.use(config => {
const token = localStorage.getItem('access');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
export default api;

36
src/components/Navbar.js
View File

@ -1,18 +1,22 @@
import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext'; // ✅ Context에서 로그인 상태 사용
const Navbar = () => {
const navigate = useNavigate();
const { isLoggedIn, logout } = useAuth(); // ✅ 로그인 상태 + 로그아웃 함수
const menuItems = ['home', 'about', 'board', 'etc'];
const postCategories = ['developer', 'systemengineer', 'etc'];
const navigate = useNavigate();
return (
<nav className="fixed w-full z-50 bg-white/90 backdrop-blur-md shadow-sm">
<div className="container mx-auto px-4">
<div className="flex justify-between items-center h-16">
<Link to="/" className="text-2xl font-bold text-[#3B82F6]">TechEdu</Link>
<Link to="/" className="text-2xl font-bold text-[#3B82F6]">Demo</Link>
<div className="hidden md:flex items-center space-x-8">
{menuItems.map((item) => (
{menuItems.map(item => (
<Link
key={item}
to={item === 'home' ? '/' : `/${item}`}
@ -40,13 +44,25 @@ const Navbar = () => {
</div>
</div>
{/* ✅ 로그인 버튼 */}
<Link
to="/login"
className="bg-[#3B82F6] text-white px-4 py-2 rounded hover:bg-blue-700 transition"
>
로그인
</Link>
{/* ✅ 로그인 상태에 따른 버튼 */}
{isLoggedIn ? (
<button
onClick={() => {
logout();
navigate('/login');
}}
className="bg-gray-200 text-gray-700 px-4 py-2 rounded hover:bg-gray-300"
>
로그아웃
</button>
) : (
<Link
to="/login"
className="bg-[#3B82F6] text-white px-4 py-2 rounded hover:bg-blue-700"
>
로그인
</Link>
)}
</div>
</div>
</div>

11
src/components/ProtectedRoute.js Normal file
View File

@ -0,0 +1,11 @@
// src/components/ProtectedRoute.js
import React from 'react';
import { Navigate } from 'react-router-dom';
const ProtectedRoute = ({ children }) => {
const token = localStorage.getItem('access');
return token ? children : <Navigate to="/login" replace />;
};
export default ProtectedRoute;

33
src/context/AuthContext.js Normal file
View File

@ -0,0 +1,33 @@
// src/context/AuthContext.js
import { createContext, useContext, useState, useEffect } from 'react';
const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
const [isLoggedIn, setIsLoggedIn] = useState(false);
useEffect(() => {
const token = localStorage.getItem('access');
setIsLoggedIn(!!token);
}, []);
const login = (tokenObj) => {
localStorage.setItem('access', tokenObj.access);
localStorage.setItem('refresh', tokenObj.refresh);
setIsLoggedIn(true);
};
const logout = () => {
localStorage.removeItem('access');
localStorage.removeItem('refresh');
setIsLoggedIn(false);
};
return (
<AuthContext.Provider value={{ isLoggedIn, login, logout }}>
{children}
</AuthContext.Provider>
);
};
export const useAuth = () => useContext(AuthContext);

6
src/pages/Home.js
View File

@ -16,9 +16,9 @@ const Home = () => {
<div className="absolute inset-0 bg-gradient-to-r from-black/70 to-transparent">
<div className="container mx-auto px-4 h-full flex items-center">
<div className="max-w-2xl text-white">
<h1 className="text-5xl font-bold mb-6">IT 교육의 새로운 기준</h1>
<p className="text-xl mb-8">실무 중심의 IT 교육 콘텐츠로 당신의 커리어를 성장시키세요</p>
<button className="bg-[#3B82F6] text-white px-8 py-3 rounded-lg">학습 시작하기</button>
<h1 className="text-5xl font-bold mb-6">Demo 사이트 입니다.</h1>
<p className="text-xl mb-8">데모 사이트 입니다.</p>
<button className="bg-[#3B82F6] text-white px-8 py-3 rounded-lg">demo</button>
</div>
</div>
</div>

42
src/pages/Login.js
View File

@ -1,45 +1,47 @@
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import api from '../api/api';
import { useAuth } from '../context/AuthContext'; // ✅ 추가: AuthContext 사용
const Login = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const navigate = useNavigate();
const { login } = useAuth(); // ✅ 로그인 상태 업데이트 함수
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const handleLogin = async () => {
try {
const response = await fetch(`${process.env.REACT_APP_API_URL}/api/auth/login/`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password })
const res = await api.post('/api/auth/login/', {
email,
password
});
if (!response.ok) throw new Error('로그인 실패');
// ✅ localStorage 저장 + 전역 상태 갱신
login(res.data); // ← access, refresh 포함된 객체
const data = await response.json();
localStorage.setItem('access', data.access);
localStorage.setItem('refresh', data.refresh);
alert('로그인 성공!');
alert('로그인 성공');
navigate('/');
} catch (error) {
alert('로그인 실패: ' + error.message);
} catch (err) {
const message = err.response?.data?.detail || '서버 오류';
alert('로그인 실패: ' + message);
}
};
return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center px-4">
<div className="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
<div className="min-h-screen flex items-center justify-center bg-gray-100">
<div className="bg-white p-8 rounded shadow-md w-full max-w-md">
<h2 className="text-2xl font-bold mb-6 text-center text-[#3B82F6]">로그인</h2>
<input
type="text"
placeholder="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
type="email"
placeholder="이메일"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full px-4 py-2 border rounded mb-4"
/>
<input
type="password"
placeholder="Password"
placeholder="비밀번호"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full px-4 py-2 border rounded mb-6"