40 lines
1.8 KiB
JavaScript
40 lines
1.8 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { useAuth } from '../context/AuthContext';
|
|
|
|
export default function LoginPage({ onLoggedIn }) {
|
|
const { login } = useAuth();
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [error, setError] = useState('');
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
setError('');
|
|
try {
|
|
await login(email.trim(), password);
|
|
onLoggedIn?.();
|
|
} catch (err) {
|
|
setError(err?.message || '로그인에 실패했습니다.');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<section className="page" style={{ flex: 1, display:'flex', alignItems:'center', justifyContent:'center' }}>
|
|
<form onSubmit={handleSubmit} style={{ width:'100%', maxWidth:480, padding:'0 16px' }}>
|
|
<div style={{ marginBottom:16, background:'#f7f7f7', borderRadius:12, padding:'16px 18px' }}>
|
|
<input type="email" placeholder="이메일" value={email} onChange={(e)=>setEmail(e.target.value)}
|
|
style={{ width:'100%', background:'transparent', border:'none', outline:'none', fontSize:'1.1rem' }} required />
|
|
</div>
|
|
<div style={{ marginBottom:24, background:'#f7f7f7', borderRadius:12, padding:'16px 18px' }}>
|
|
<input type="password" placeholder="비밀번호" value={password} onChange={(e)=>setPassword(e.target.value)}
|
|
style={{ width:'100%', background:'transparent', border:'none', outline:'none', fontSize:'1.1rem' }} required />
|
|
</div>
|
|
{error && <div style={{ color:'#e53935', marginBottom:12, textAlign:'center' }}>{error}</div>}
|
|
<button type="submit" style={{ width:'100%', height:64, borderRadius:18, border:'none', background:'#111', color:'#fff', fontSize:'1.4rem', fontWeight:700, cursor:'pointer' }}>로그인</button>
|
|
</form>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
|