109 lines
2.3 KiB
JavaScript
109 lines
2.3 KiB
JavaScript
// src/components/auth/LoginForm.js
|
|
import React, { useState } from 'react';
|
|
import {
|
|
Box,
|
|
TextField,
|
|
Button,
|
|
Typography,
|
|
InputAdornment,
|
|
IconButton
|
|
} from '@mui/material';
|
|
import { Visibility, VisibilityOff } from '@mui/icons-material';
|
|
|
|
const LoginForm = ({ onSubmit, error }) => {
|
|
const [userId, setUserId] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
onSubmit(userId, password);
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
component="form"
|
|
onSubmit={handleSubmit}
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: 2,
|
|
width: '100%',
|
|
maxWidth: 400,
|
|
margin: '0 auto'
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
mb: 3
|
|
}}
|
|
>
|
|
<img
|
|
src="/logo192.png"
|
|
alt="마이구독 로고"
|
|
style={{
|
|
width: '100px',
|
|
height: '100px',
|
|
objectFit: 'contain'
|
|
}}
|
|
/>
|
|
</Box>
|
|
|
|
<TextField
|
|
label="아이디"
|
|
variant="outlined"
|
|
fullWidth
|
|
value={userId}
|
|
onChange={(e) => setUserId(e.target.value)}
|
|
error={!!error}
|
|
autoComplete="username"
|
|
required
|
|
/>
|
|
|
|
<TextField
|
|
label="비밀번호"
|
|
type={showPassword ? 'text' : 'password'}
|
|
variant="outlined"
|
|
fullWidth
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
error={!!error}
|
|
autoComplete="current-password"
|
|
required
|
|
InputProps={{
|
|
endAdornment: (
|
|
<InputAdornment position="end">
|
|
<IconButton
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
edge="end"
|
|
>
|
|
{showPassword ? <VisibilityOff /> : <Visibility />}
|
|
</IconButton>
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
/>
|
|
|
|
{error && (
|
|
<Typography color="error" variant="body2">
|
|
{error}
|
|
</Typography>
|
|
)}
|
|
|
|
<Button
|
|
type="submit"
|
|
variant="contained"
|
|
color="primary"
|
|
size="large"
|
|
fullWidth
|
|
sx={{ mt: 2 }}
|
|
>
|
|
로그인
|
|
</Button>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default LoginForm; |