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 (
-
+ {(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;
+};