[#62] react-hook-form 설치 및 유효성 검사 로직

package.json

@@ -23,6 +23,7 @@
     "react-datepicker": "^4.25.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.12",
+    "react-hook-form": "^7.49.3",
     "react-loading-skeleton": "^3.3.1",
     "react-paginate": "^8.2.0",
     "react-router-dom": "^6.21.1",

src/components/common/Auth/AuthButton/index.tsx → src/components/Auth/AuthButton/index.tsx

@@ -2,12 +2,19 @@ import styled from '@emotion/styled';
 
 import { AuthButton, AuthButtonStyleProps } from '@/types/auth';
 
-const AuthButton = ({ size, variant, text, buttonFunc }: AuthButton) => {
+const AuthButton = ({
+  size,
+  variant,
+  text,
+  disabled,
+  buttonFunc
+}: AuthButton) => {
   return (
     <SubmitButton
       $size={size}
       $variant={variant}
       onClick={buttonFunc}
+      disabled={disabled}
     >
       {text}
     </SubmitButton>

src/components/common/Auth/AuthInputNormal/index.tsx → src/components/Auth/AuthInputNormal/index.tsx

@@ -1,70 +1,76 @@
-import { ChangeEvent, useState } from 'react';
 import styled from '@emotion/styled';
+import { useFormContext } from 'react-hook-form';
 
-import { AuthInputNormal } from '@/types/auth';
+import { AuthInputNormal, AuthInputStyleProps } from '@/types/auth';
 import closeIcon from '@assets/icons/ic-login-close.svg';
 import checkInvalid from '@assets/icons/ic-signup-check-invalid.svg';
 import checkValid from '@assets/icons/ic-signup-check-valid.svg';
+import { getInputOptions } from '@utils/index';
 
 const AuthInputNormal = ({
   type,
   id,
   placeholder,
   usedFor,
-  isInvalid
+  isError
 }: AuthInputNormal) => {
-  const [text, setText] = useState<string>('');
+  const { register, watch, resetField, getFieldState, formState } =
+    useFormContext();
+  const inputValue = watch(id);
+  const handleReset = () => resetField(id);
 
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setText(event.target.value);
-  };
-
-  const handleReset = (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-    setText('');
-  };
-
-  // TODO : react-hook-form 적용 후 유효성 검사 로직 예정
+  const isInputTouched = getFieldState(id, formState).isTouched;
+  const isValid = isInputTouched ? !isError : false;
 
   return (
-    <Container>
+    <Container
+      $usedFor={usedFor}
+      $type={type}
+    >
       <Input
         type={type}
         id={id}
         placeholder={placeholder}
-        value={text}
-        onChange={handleChange}
+        $usedFor={usedFor}
+        $type={type}
+        {...register(id, getInputOptions(id))}
       />
       <Buttons>
-        {usedFor === 'login' && text.length > 0 && (
-          <Button onClick={handleReset}>
+        {usedFor === 'login' && !!inputValue && (
+          <Button
+            type="button"
+            onClick={handleReset}
+          >
             <Icon
               src={closeIcon}
               alt="지우기 버튼"
             />
           </Button>
         )}
-        {usedFor === 'signup' &&
-          (isInvalid ? <Icon src={checkInvalid} /> : <Icon src={checkValid} />)}
+        {usedFor === 'signup' && type !== 'email' && (
+          <Icon src={isValid ? checkValid : checkInvalid} />
+        )}
       </Buttons>
     </Container>
   );
 };
 
 export default AuthInputNormal;
 
-const Container = styled.div`
+const Container = styled.div<AuthInputStyleProps>`
   position: relative;
 
-  width: 524px;
+  width: ${props =>
+    props.$usedFor === 'signup' && props.$type === 'email' ? '358px' : '524px'};
   height: 79px;
 
   display: flex;
   align-items: center;
 `;
 
-const Input = styled.input`
-  width: 524px;
+const Input = styled.input<AuthInputStyleProps>`
+  width: ${props =>
+    props.$usedFor === 'signup' && props.$type === 'email' ? '358px' : '524px'};
   height: 79px;
 
   border-radius: 16px;

src/components/common/Auth/AuthInputPassword/index.tsx → src/components/Auth/AuthInputPassword/index.tsx

@@ -1,30 +1,32 @@
-import { ChangeEvent, useState } from 'react';
+import { useState } from 'react';
 import styled from '@emotion/styled';
+import { useFormContext } from 'react-hook-form';
 
 import { AuthInput } from '@/types/auth';
 import eyeOn from '@assets/icons/ic-login-eye-on.svg';
 import eyeOff from '@assets/icons/ic-login-eye-off.svg';
 import closeIcon from '@assets/icons/ic-login-close.svg';
 import checkInvalid from '@assets/icons/ic-signup-check-invalid.svg';
 import checkValid from '@assets/icons/ic-signup-check-valid.svg';
+import { getInputOptions } from '@utils/index';
 
 const AuthInputPassword = ({
   id,
   placeholder,
   usedFor,
-  isInvalid
+  isError
 }: AuthInput) => {
-  const [text, setText] = useState<string>('');
-  const [showPW, setShowPW] = useState(false);
+  const { register, watch, resetField, getFieldState, formState } =
+    useFormContext();
 
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setText(event.target.value);
-  };
+  const inputValue = watch(id);
+  const handleReset = () => resetField(id);
 
-  const handleReset = (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-    setText('');
-  };
+  const passwordValue = watch('user_password');
+  const isInputTouched = getFieldState(id, formState).isTouched;
+  const isValid = isInputTouched ? !isError : false;
+
+  const [showPW, setShowPW] = useState(false);
 
   const handleShowPW = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
@@ -37,28 +39,28 @@ const AuthInputPassword = ({
         type={showPW ? 'text' : 'password'}
         id={id}
         placeholder={placeholder}
-        value={text}
-        onChange={handleChange}
+        {...register(id, getInputOptions(id, passwordValue))}
       />
       <Buttons>
-        {text.length > 0 && (
+        {!!inputValue && (
           <Button onClick={handleShowPW}>
             <Icon
               src={showPW ? eyeOn : eyeOff}
               alt={showPW ? '비밀번호 보기 버튼' : '비밀번호 숨김 버튼'}
             />
           </Button>
         )}
-        {usedFor === 'login' && text.length > 0 && (
+        {usedFor === 'login' && !!inputValue && (
           <Button onClick={handleReset}>
             <Icon
               src={closeIcon}
               alt="지우기 버튼"
             />
           </Button>
         )}
-        {usedFor === 'signup' &&
-          (isInvalid ? <Icon src={checkInvalid} /> : <Icon src={checkValid} />)}
+        {usedFor === 'signup' && (
+          <Icon src={isValid ? checkValid : checkInvalid} />
+        )}
       </Buttons>
     </Container>
   );