React - 실시간 폼 유효성 피드백 + UX 개선

import { useForm } from 'react-hook-form';

export default function SignupForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, touchedFields },
  } = useForm({ mode: 'onChange' });

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <input
          {...register('email', {
            required: '이메일은 필수입니다',
            pattern: {
              value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
              message: '이메일 형식이 올바르지 않습니다',
            },
          })}
          placeholder="이메일 입력"
          style={{
            borderColor: touchedFields.email && errors.email ? 'red' : '#ccc',
          }}
        />
        {errors.email && <small>{errors.email.message}</small>}
      </div>

      <button type="submit">가입하기</button>
    </form>
  );
}