feat: react-hook-form 활용한 로그인 폼 구현

codeit-bootcamp-frontend · Jul 19, 2024 · fd86e17 · fd86e17
1 parent caf28b5
commit fd86e17
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 5 deletions.
diff --git a/src/index.css b/src/index.css
@@ -7,11 +7,23 @@
     @apply text-secondary-100 bg-primary-100 hover:bg-primary-200 active:bg-primary-200 rounded-full h-[56px] cursor-pointer;
   }
 
+  .btn-disabled {
+    @apply bg-secondary-400 hover:bg-secondary-400 cursor-default;
+  }
+
   .input {
-    @apply block bg-secondary-100 outline-primary-100 font-normal w-full h-14 mt-4 inner-p rounded;
+    @apply block bg-secondary-100 outline-none border border-secondary-100 focus:border-primary-100 font-normal w-full h-14 mt-4 inner-p rounded;
+  }
+
+  .input-error {
+    @apply border-error-red focus:border-error-red;
   }
 
   .inner-p {
     @apply px-6 py-4;
   }
+
+  .error-message {
+    @apply px-4 py-2 text-sm text-error-red font-semibold;
+  }
 }
diff --git a/src/pages/LoginPage/LoginPage.tsx b/src/pages/LoginPage/LoginPage.tsx
@@ -2,21 +2,66 @@ import logo from '../../assets/images/logo/logo.svg';
 import googleIcon from '../../assets/images/icons/icon_google.svg';
 import kakaoIcon from '../../assets/images/icons/icon_kakao.svg';
 import { Link } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { SubmitHandler } from 'react-hook-form/dist/types';
+
+type IFormInput = {
+  email: string;
+  password: string;
+};
 
 function LoginPage() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid, isSubmitting },
+  } = useForm<IFormInput>({
+    mode: 'onChange',
+  });
+
+  // @TODO: POST 요청 구현
+  const onSubmit: SubmitHandler<IFormInput> = (data) => console.log(data);
+
   return (
     <div className="max-w-[640px] m-auto md:px-14 px-4">
       <img src={logo} alt="로고" className="md:w-96 w-48 m-auto mb-14" />
-      <form className="flex flex-col gap-y-6">
+      <form autoComplete="off" onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-y-6">
         <label className="font-bold">
           이메일
-          <input type="email" className="input" />
+          <input
+            {...register('email', {
+              required: '이메일은 필수 입력 항목입니다.',
+              pattern: {
+                value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/,
+                message: '잘못된 이메일입니다.',
+              },
+            })}
+            type="email"
+            className={`input ${errors.email && 'input-error'}`}
+          />
+          {errors.email && <span className="error-message">{errors.email.message}</span>}
         </label>
         <label className="font-bold">
           비밀번호
-          <input type="password" className="input" />
+          <input
+            {...register('password', {
+              required: '비밀번호는 필수 입력 항목입니다.',
+              minLength: {
+                value: 8,
+                message: '비밀번호를 8자 이상 입력해주세요',
+              },
+            })}
+            type="password"
+            className={`input ${errors.password && 'input-error'}`}
+          />
+          {errors.password && <span className="error-message">{errors.password.message}</span>}
         </label>
-        <input type="submit" value="로그인" className="btn" />
+        <input
+          type="submit"
+          value="로그인"
+          disabled={!isValid || isSubmitting}
+          className={`btn ${!isValid && 'btn-disabled'}`}
+        />
       </form>
       <div className="flex justify-between items-center bg-[#E6F2FF] inner-p my-6 rounded">
         <p className="font-medium">간편 로그인하기</p>