Skip to content

Commit be87066

Browse files
chaesunwoongchaesunwoong
committed
회원가입, 로그인 연결과 API 주소 설정 파일(config.js)추가
1 parent 6901c7e commit be87066

3 files changed

Lines changed: 61 additions & 21 deletions

File tree

‎src/components/login/Login.jsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useState } from 'react';
22
import axios from 'axios';
3+
import config from '../../config';
34
import './Login.css';
45

56
function Login() {
@@ -11,15 +12,15 @@ function Login() {
1112
const handleChange = (e) => {
1213
setFormData({
1314
...formData,
14-
[e.target.id]: e.target.value
15+
[e.target.id]: e.target.value,
1516
});
1617
};
1718

1819
const handleSubmit = async (e) => {
1920
e.preventDefault();
2021

2122
try {
22-
const response = await axios.post('http://localhost:5000/api/users/login', {
23+
const response = await axios.post(`${config.API_BASE_URL}/api/users/login`, {
2324
userId: formData.username,
2425
password: formData.password,
2526
});
@@ -28,15 +29,13 @@ function Login() {
2829

2930
console.log('✅ 로그인 성공:', response.data);
3031

31-
// 토큰 및 사용자 정보 저장 (예: 로컬스토리지)
3232
localStorage.setItem('token', token);
3333
localStorage.setItem('username', name);
3434
localStorage.setItem('userId', userId);
3535
localStorage.setItem('role', role);
3636

3737
alert('로그인 성공!');
38-
// 페이지 이동 (예: 홈으로)
39-
// window.location.href = '/';
38+
// window.location.href = '/'; // 필요한 경우 이동
4039
} catch (error) {
4140
console.error('❌ 로그인 실패:', error.response?.data || error.message);
4241
alert(error.response?.data?.message || '로그인에 실패했습니다.');

‎src/components/signup/SignUp.jsx‎

Lines changed: 52 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React, { useState } from 'react';
22
import axios from 'axios';
3-
import '../login/Login.css'; // 로그인 스타일 재사용
3+
import config from '../../config';
4+
5+
import '../login/Login.css';
46

57
function SignUp() {
68
const [formData, setFormData] = useState({
@@ -14,7 +16,7 @@ function SignUp() {
1416
const handleChange = (e) => {
1517
setFormData({
1618
...formData,
17-
[e.target.id]: e.target.value
19+
[e.target.id]: e.target.value,
1820
});
1921
};
2022

@@ -27,23 +29,18 @@ function SignUp() {
2729
}
2830

2931
try {
30-
const response = await axios.post('http://localhost:5000/api/users/signup', {
32+
const response = await axios.post(`${config.API_BASE_URL}/api/users/signup`, {
3133
userId: formData.username,
3234
email: formData.email,
3335
password: formData.password,
3436
name: formData.name,
35-
}, {
36-
headers: {
37-
'Content-Type': 'application/json'
38-
}
3937
});
4038

41-
4239
console.log('회원가입 성공:', response.data);
4340
alert('회원가입이 완료되었습니다!');
4441
} catch (error) {
4542
console.error('회원가입 오류:', error.response?.data || error.message);
46-
alert('회원가입에 실패했습니다.');
43+
alert(error.response?.data?.message || '회원가입에 실패했습니다.');
4744
}
4845
};
4946

@@ -55,30 +52,69 @@ function SignUp() {
5552

5653
<form className="login-form" onSubmit={handleSubmit}>
5754
<label htmlFor="username">아이디 *</label>
58-
<input id="username" type="text" placeholder="사용할 아이디 입력" value={formData.username} onChange={handleChange} required />
55+
<input
56+
id="username"
57+
type="text"
58+
placeholder="사용할 아이디 입력"
59+
value={formData.username}
60+
onChange={handleChange}
61+
required
62+
/>
5963

6064
<label htmlFor="email">이메일 *</label>
61-
<input id="email" type="email" placeholder="name@example.com" value={formData.email} onChange={handleChange} required />
65+
<input
66+
id="email"
67+
type="email"
68+
placeholder="name@example.com"
69+
value={formData.email}
70+
onChange={handleChange}
71+
required
72+
/>
6273
<small>인증번호를 받을 이메일 주소를 입력해주세요.</small>
6374

6475
<label htmlFor="password">비밀번호 *</label>
65-
<input id="password" type="password" value={formData.password} onChange={handleChange} required />
76+
<input
77+
id="password"
78+
type="password"
79+
value={formData.password}
80+
onChange={handleChange}
81+
required
82+
/>
6683
<small>비밀번호는 8자 이상이어야 합니다.</small>
6784

6885
<label htmlFor="confirmPassword">비밀번호 확인 *</label>
69-
<input id="confirmPassword" type="password" value={formData.confirmPassword} onChange={handleChange} required />
86+
<input
87+
id="confirmPassword"
88+
type="password"
89+
value={formData.confirmPassword}
90+
onChange={handleChange}
91+
required
92+
/>
7093

7194
<label htmlFor="name">이름 *</label>
72-
<input id="name" type="text" placeholder="홍길동" value={formData.name} onChange={handleChange} required />
95+
<input
96+
id="name"
97+
type="text"
98+
placeholder="홍길동"
99+
value={formData.name}
100+
onChange={handleChange}
101+
required
102+
/>
73103

74104
<div className="remember-me">
75105
<input type="checkbox" id="terms" required />
76-
<label htmlFor="terms"><strong>이용약관에 동의합니다.</strong><br />이용약관을 읽고 동의합니다.</label>
106+
<label htmlFor="terms">
107+
<strong>이용약관에 동의합니다.</strong><br />
108+
이용약관을 읽고 동의합니다.
109+
</label>
77110
</div>
78111

79112
<div className="remember-me">
80113
<input type="checkbox" id="privacy" required />
81-
<label htmlFor="privacy"><strong>개인정보 처리방침에 동의합니다.</strong><br />개인정보 처리방침을 확인 후 동의합니다.</label>
114+
<label htmlFor="privacy">
115+
<strong>개인정보 처리방침에 동의합니다.</strong><br />
116+
개인정보 처리방침을 확인 후 동의합니다.
117+
</label>
82118
</div>
83119

84120
<button type="submit">회원가입 완료</button>

‎src/config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const config = {
2+
API_BASE_URL: 'http://3.38.244.234:8080',
3+
};
4+
5+
export default config;

0 commit comments

Comments
 (0)