회원가입, 로그인 연결

Author: chaesunwoong

src/components/login/Login.jsx

@@ -1,19 +1,62 @@
-// src/components/Login.jsx
-import React from 'react';
-import './Login.css'; // CSS 파일 import
+import React, { useState } from 'react';
+import axios from 'axios';
+import './Login.css';
 
 function Login() {
+    const [formData, setFormData] = useState({
+        username: '',
+        password: '',
+    });
+
+    const handleChange = (e) => {
+        setFormData({
+            ...formData,
+            [e.target.id]: e.target.value
+        });
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+
+        try {
+            const response = await axios.post('http://localhost:5000/api/users/login', {
+                userId: formData.username,
+                password: formData.password,
+            });
+
+            const { token, name, role, userId } = response.data;
+
+            console.log('✅ 로그인 성공:', response.data);
+
+            // 토큰 및 사용자 정보 저장 (예: 로컬스토리지)
+            localStorage.setItem('token', token);
+            localStorage.setItem('username', name);
+            localStorage.setItem('userId', userId);
+            localStorage.setItem('role', role);
+
+            alert('로그인 성공!');
+            // 페이지 이동 (예: 홈으로)
+            // window.location.href = '/';
+        } catch (error) {
+            console.error('❌ 로그인 실패:', error.response?.data || error.message);
+            alert(error.response?.data?.message || '로그인에 실패했습니다.');
+        }
+    };
+
     return (
         <div className="login-container">
             <div className="login-box">
                 <h1 className="login-title">로그인</h1>
                 <p className="login-subtitle">계정에 로그인하여 CodeViz를 시작하세요</p>
-                <form className="login-form">
+
+                <form className="login-form" onSubmit={handleSubmit}>
                     <label htmlFor="username">아이디</label>
                     <input
                         id="username"
                         type="text"
                         placeholder="사용자 아이디 입력"
+                        value={formData.username}
+                        onChange={handleChange}
                         required
                     />
                     <div className="password-container">
@@ -24,14 +67,19 @@ function Login() {
                         id="password"
                         type="password"
                         placeholder="••••••••"
+                        value={formData.password}
+                        onChange={handleChange}
                         required
                     />
+
                     <div className="remember-me">
                         <input type="checkbox" id="remember" />
                         <label htmlFor="remember">로그인 상태 유지</label>
                     </div>
+
                     <button type="submit">로그인</button>
                 </form>
+
                 <div className="divider">또는 소셜 계정으로 로그인</div>
                 <div className="social-buttons">
                     <button disabled>Google</button>

src/components/signup/SignUp.jsx

@@ -1,31 +1,75 @@
-// src/components/SignUp.jsx
-import React from 'react';
-import '../login/Login.css'; // 로그인과 같은 스타일 사용
+import React, { useState } from 'react';
+import axios from 'axios';
+import '../login/Login.css'; // 로그인 스타일 재사용
 
 function SignUp() {
+    const [formData, setFormData] = useState({
+        username: '',
+        email: '',
+        password: '',
+        confirmPassword: '',
+        name: '',
+    });
+
+    const handleChange = (e) => {
+        setFormData({
+            ...formData,
+            [e.target.id]: e.target.value
+        });
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+
+        if (formData.password !== formData.confirmPassword) {
+            alert('비밀번호가 일치하지 않습니다.');
+            return;
+        }
+
+        try {
+            const response = await axios.post('http://localhost:5000/api/users/signup', {
+                userId: formData.username,
+                email: formData.email,
+                password: formData.password,
+                name: formData.name,
+            }, {
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+
+
+            console.log('회원가입 성공:', response.data);
+            alert('회원가입이 완료되었습니다!');
+        } catch (error) {
+            console.error('회원가입 오류:', error.response?.data || error.message);
+            alert('회원가입에 실패했습니다.');
+        }
+    };
+
     return (
         <div className="login-container">
             <div className="login-box">
                 <h1 className="login-title">회원가입</h1>
                 <p className="login-subtitle">CodeViz 계정을 만들고 코드 시각화를 시작하세요</p>
 
-                <form className="login-form">
+                <form className="login-form" onSubmit={handleSubmit}>
                     <label htmlFor="username">아이디 *</label>
-                    <input id="username" type="text" placeholder="사용할 아이디 입력" required />
+                    <input id="username" type="text" placeholder="사용할 아이디 입력" value={formData.username} onChange={handleChange} required />
 
                     <label htmlFor="email">이메일 *</label>
-                    <input id="email" type="email" placeholder="name@example.com" required />
+                    <input id="email" type="email" placeholder="name@example.com" value={formData.email} onChange={handleChange} required />
                     <small>인증번호를 받을 이메일 주소를 입력해주세요.</small>
 
                     <label htmlFor="password">비밀번호 *</label>
-                    <input id="password" type="password" required />
+                    <input id="password" type="password" value={formData.password} onChange={handleChange} required />
                     <small>비밀번호는 8자 이상이어야 합니다.</small>
 
-                    <label htmlFor="confirm-password">비밀번호 확인 *</label>
-                    <input id="confirm-password" type="password" required />
+                    <label htmlFor="confirmPassword">비밀번호 확인 *</label>
+                    <input id="confirmPassword" type="password" value={formData.confirmPassword} onChange={handleChange} required />
 
                     <label htmlFor="name">이름 *</label>
-                    <input id="name" type="text" placeholder="홍길동" required />
+                    <input id="name" type="text" placeholder="홍길동" value={formData.name} onChange={handleChange} required />
 
                     <div className="remember-me">
                         <input type="checkbox" id="terms" required />