diff --git a/src/features/login/Container.tsx b/src/features/login/Container.tsx index 87d95c4..00a30b2 100644 --- a/src/features/login/Container.tsx +++ b/src/features/login/Container.tsx @@ -3,33 +3,29 @@ import { FunctionComponent } from 'react'; import useLogin from './hooks/useLogin'; const LoginContainer: FunctionComponent = () => { - const { - email, - handleEmailChange, - password, - handlePasswordChange, - error, - handleSubmitClick, - } = useLogin(); + const { errors, register, handleSubmit, onSubmit } = useLogin(); return ( -
+
Login
- {error && Please check your email or password} - -
+ {(errors.email || errors.password) && ( +
Please enter your email or password
+ )} + {errors.dataError &&
{errors.dataError.message}
} + + ); }; diff --git a/src/features/login/hooks/useLogin.tsx b/src/features/login/hooks/useLogin.tsx index 3ae5c11..501e72c 100644 --- a/src/features/login/hooks/useLogin.tsx +++ b/src/features/login/hooks/useLogin.tsx @@ -1,32 +1,29 @@ -import { ChangeEventHandler, ReactEventHandler, useState } from 'react'; +import { useForm, SubmitHandler } from 'react-hook-form'; import { useAtom } from 'jotai'; import { useNavigate } from 'react-router-dom'; import { setItem } from '../../shared/utils/storage'; -import { DummyUser } from '../type'; +import { DummyUser, InputKey } from '../type'; import { DUMMY_USER } from '../constants'; import { userAtom } from '../atom'; import { URL } from '../../shared/constants/url'; const useLogin = () => { - const [email, setEmail] = useState(''); - const [password, setPassword] = useState(''); - const [error, setError] = useState(false); const [, setUser] = useAtom(userAtom); - const navigate = useNavigate(); - - const handleEmailChange: ChangeEventHandler = (e) => { - setEmail(e.target.value); - setError(false); - }; - const handlePasswordChange: ChangeEventHandler = (e) => { - setPassword(e.target.value); - setError(false); - }; - const handleSubmitClick: ReactEventHandler = () => { - if (DUMMY_USER.email !== email || DUMMY_USER.password !== password) { - setError(true); + const { + register, + handleSubmit, + formState: { errors }, + } = useForm(); + const onSubmit: SubmitHandler = (data) => { + if ( + DUMMY_USER.email !== data.email || + DUMMY_USER.password !== data.password + ) { + alert("'No user information'"); + // TODO: setError 띄웠다가 다시 삭제하는 방법 + // setError('dataError', { message: 'No user information' }); return; } const curUser: DummyUser = { ...DUMMY_USER }; @@ -36,13 +33,13 @@ const useLogin = () => { navigate(URL.home); }; + const navigate = useNavigate(); + return { - email, - handleEmailChange, - password, - handlePasswordChange, - error, - handleSubmitClick, + errors, + register, + handleSubmit, + onSubmit, }; }; diff --git a/src/features/login/type.ts b/src/features/login/type.ts index d662d88..f55c815 100644 --- a/src/features/login/type.ts +++ b/src/features/login/type.ts @@ -4,3 +4,9 @@ export type User = { department?: string; }; export type DummyUser = User & { password?: string }; + +export type InputKey = { + email: string; + password: string; + dataError: string; +};