Merge pull request #9 from junction-asia-2023/feat/loginform

feat(login): apply react-hook-form to login

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 (
-    <div>
+    <form onSubmit={handleSubmit(onSubmit)}>
       <div>Login</div>
       <input
         type="text"
-        value={email}
         placeholder="Insert your email"
-        onChange={handleEmailChange}
+        {...register('email', { required: true })}
+        area-invalid={errors.email ? 'true' : 'false'}
       />
       <input
         type="password"
-        value={password}
         placeholder="Insert your password"
-        onChange={handlePasswordChange}
+        {...register('password', { required: true })}
+        aria-invalid={errors.password ? 'true' : 'false'}
       />
-      {error && <span>Please check your email or password</span>}
-      <button onClick={handleSubmitClick}>submit</button>
-    </div>
+      {(errors.email || errors.password) && (
+        <div>Please enter your email or password</div>
+      )}
+      {errors.dataError && <div>{errors.dataError.message}</div>}
+      <input type="submit" />
+    </form>
   );
 };
 

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<HTMLInputElement> = (e) => {
-    setEmail(e.target.value);
-    setError(false);
-  };
-  const handlePasswordChange: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setPassword(e.target.value);
-    setError(false);
-  };
-  const handleSubmitClick: ReactEventHandler<HTMLButtonElement> = () => {
-    if (DUMMY_USER.email !== email || DUMMY_USER.password !== password) {
-      setError(true);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<InputKey>();
+  const onSubmit: SubmitHandler<InputKey> = (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,
   };
 };
 

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