♻️ Refactor: 버튼 활성화 isValid 추가 및 setError 메시지 처리

FRONTENDSCHOOL5 · Nov 3, 2023 · 1d38a8f · 1d38a8f
1 parent 95d9081
commit 1d38a8f
Showing 1 changed file with 9 additions and 7 deletions.
diff --git a/src/components/Login/LoginForm.jsx b/src/components/Login/LoginForm.jsx
@@ -4,7 +4,8 @@ import Button from '../common/Button/Button';
 import { useForm, useController } from 'react-hook-form';
 
 const LoginForm = ({ handleLogin, message }) => {
-  const { control, handleSubmit, formState: { errors } } = useForm({
+  const { control, handleSubmit, setError, formState: { isValid, errors } } = useForm({
+    mode: 'onChange',
     defaultValues: {
       email: '[email protected]',
       password: 'bc12345',
@@ -25,12 +26,13 @@ const LoginForm = ({ handleLogin, message }) => {
 
   const onSubmit = (user) => {
     handleLogin(user);
+    if (message) {
+      setError('password', {
+        message: message
+      })
+    }
   };
 
-  const isValid = () => {
-    return emailController.field.value !== '' && passwordController.field.value !== '';
-  }
-
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <Input
@@ -45,15 +47,15 @@ const LoginForm = ({ handleLogin, message }) => {
         label="비밀번호"
         type="password"
         placeHolder="비밀번호를 입력해주세요"
-        errorMsg={message}
+        errorMsg={errors.password?.message || message}
         required
         {...passwordController.field}
           />
       <Button
         type="submit"
         size="L"
         text="로그인"
-        isDisabled={!isValid()}
+        isDisabled={!isValid}
       />
     </form>
   );