login 연동

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"