login 연동

package-lock.json

@@ -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",

package.json

@@ -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",

src/App.js

@@ -7,9 +7,11 @@ 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 (
+    <AuthProvider>
       <Router>
         <div className="flex flex-col min-h-screen">
           <Navbar />
@@ -25,6 +27,7 @@ function App() {
           <Footer />
         </div>
       </Router>
+    </AuthProvider>
   );
 }
 

src/api/api.js

@@ -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;

src/components/Navbar.js

@@ -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>
 
-            {/* ✅ 로그인 버튼 */}
+            {/* ✅ 로그인 상태에 따른 버튼 */}
+            {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 transition"
+                className="bg-[#3B82F6] text-white px-4 py-2 rounded hover:bg-blue-700"
               >
                 로그인
               </Link>
+            )}
           </div>
         </div>
       </div>

src/components/ProtectedRoute.js

@@ -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;

src/context/AuthContext.js

@@ -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);

src/pages/Home.js

@@ -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>

src/pages/Login.js

@@ -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"