73 lines
2.6 KiB
TypeScript
73 lines
2.6 KiB
TypeScript
'use client';
|
|
import { Button, TextInput } from '@sdt/sdt-ui-kit';
|
|
import Link from 'next/link';
|
|
import useLogin from '../hooks/useLogin';
|
|
import { emailRegex, passwordRegex } from '@/utils/reg';
|
|
|
|
interface LoginPropsType {}
|
|
|
|
function Login({}: LoginPropsType) {
|
|
const {
|
|
hookForm: { handleSubmit, register, formState },
|
|
} = useLogin();
|
|
return (
|
|
<div className="flex justify-center items-center w-full h-screen bg-cover bg-center">
|
|
<div className="w-[37.5rem] shadow-md border rounded-[16px] px-10 sm:px-14 lg:px-5 py-7 sm:py-9 flex flex-col justify-center">
|
|
<form onSubmit={handleSubmit((data) => console.log(data))}>
|
|
<div className="mt-5 flex flex-col">
|
|
<TextInput
|
|
{...register('email', {
|
|
required: '이메일을 입력하세요.',
|
|
pattern: {
|
|
value: emailRegex,
|
|
message: '올바른 이메일을 입력하세요.',
|
|
},
|
|
})}
|
|
error={!!formState.errors.email}
|
|
message={(formState.errors.email?.message as string) ?? ''}
|
|
maxLength={40}
|
|
type="text"
|
|
className={`rounded-t-[6px] text-[20px] w-full`}
|
|
placeholder="이메일 주소"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<TextInput
|
|
{...register('password', {
|
|
required: '비밀번호를 다시 입력하세요.',
|
|
pattern: {
|
|
value: passwordRegex,
|
|
message:
|
|
'8~16자 영문 대 소문자, 숫자, 특수문자를 사용하세요.',
|
|
},
|
|
})}
|
|
error={!!formState.errors.password?.message}
|
|
message={(formState.errors.password?.message as string) ?? ''}
|
|
maxLength={16}
|
|
type="password"
|
|
className={`rounded-b-[6px] text-[20px] w-full border-t-none`}
|
|
placeholder="비밀번호"
|
|
/>
|
|
</div>
|
|
<div className="flex justify-center items-center">
|
|
<Button
|
|
type="submit"
|
|
className={`mt-8 text-[20px] font-semibold w-full bg-main`}
|
|
backgroundColor="bg-teal-500"
|
|
>
|
|
로그인
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
|
|
<div className="w-full mt-2 flex justify-center">
|
|
<span className="mr-3 text-[#9e9e9e]">비밀번호를 잊으셨나요?</span>
|
|
<Link href={'/reset-password'}>비밀번호 재설정</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Login;
|