43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
|
import { Button, Card, Form, Input, message } from 'antd';
|
||
|
|
import { useNavigate } from 'react-router-dom';
|
||
|
|
import { authApi } from '@/api/auth';
|
||
|
|
import { useAuthStore } from '@/stores/auth';
|
||
|
|
|
||
|
|
export default function LoginPage() {
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const setAuth = useAuthStore((s) => s.setAuth);
|
||
|
|
|
||
|
|
const onFinish = async (values: { loginId: string; password: string }) => {
|
||
|
|
try {
|
||
|
|
const resp = await authApi.login(values);
|
||
|
|
localStorage.setItem('accessToken', resp.accessToken);
|
||
|
|
if (resp.refreshToken) localStorage.setItem('refreshToken', resp.refreshToken);
|
||
|
|
setAuth({
|
||
|
|
userId: resp.userId, loginId: resp.loginId,
|
||
|
|
userName: resp.userName, roles: resp.roles,
|
||
|
|
});
|
||
|
|
message.success(`${resp.userName}님 환영합니다`);
|
||
|
|
navigate('/');
|
||
|
|
} catch {
|
||
|
|
// 인터셉터에서 메시지 처리
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center',
|
||
|
|
minHeight: '100vh' }}>
|
||
|
|
<Card title="GA 수수료 정산 솔루션" style={{ width: 400 }}>
|
||
|
|
<Form layout="vertical" onFinish={onFinish}>
|
||
|
|
<Form.Item label="아이디" name="loginId" rules={[{ required: true }]}>
|
||
|
|
<Input autoFocus />
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item label="비밀번호" name="password" rules={[{ required: true }]}>
|
||
|
|
<Input.Password />
|
||
|
|
</Form.Item>
|
||
|
|
<Button type="primary" htmlType="submit" block>로그인</Button>
|
||
|
|
</Form>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|