폼 상태 커스텀 훅과 라이브러리

import { useState, useCallback } from 'react';

/**
 * 폼 상태와 유효성 검사를 관리하는 커스텀 훅
 * @param {object} initialValues - 폼 필드의 초기 값
 * @param {function} validate - 폼 데이터 객체를 받아 에러 객체를 반환하는 유효성 검사 함수
 * @returns {{ values, errors, handleChange, handleSubmit, resetForm }}
 */
const useForm = (initialValues, validate) => {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false); // 제출 중 상태 (선택 사항)

  const handleChange = useCallback((e) => {
    const { name, value, type, checked } = e.currentTarget;
    setValues(prevValues => ({
      ...prevValues,
      [name]: type === 'checkbox' ? checked : value,
    }));
    // 입력 시 실시간 유효성 검사를 하고 싶다면 여기에 validate 로직을 추가할 수 있습니다.
    // 하지만 보통은 제출 시점에 모든 유효성을 검사하는 것이 일반적입니다.
  }, []);

  const handleSubmit = useCallback((callback) => async (e) => {
    e.preventDefault();
    setIsSubmitting(true);

    try {
      const validationErrors = validate(values); // 유효성 검사 실행
      setErrors(validationErrors);

      if (Object.keys(validationErrors).length === 0) {
        // 에러가 없으면 콜백 함수 실행
        await callback(values); // 비동기 콜백을 지원하기 위해 await
      }
    } catch (submitError) {
      // 검증 또는 제출 콜백에서 발생한 오류 처리 (예: API 제출 실패)
      console.error("폼 제출 오류:", submitError);
      setErrors(prevErrors => ({
        ...prevErrors,
        submit: submitError.message || '폼 제출 중 오류가 발생했습니다.'
      }));
    } finally {
      setIsSubmitting(false);
    }
  }, [values, validate]);

  const resetForm = useCallback(() => {
    setValues(initialValues);
    setErrors({});
    setIsSubmitting(false);
  }, [initialValues]);

  return {
    values,
    errors,
    isSubmitting,
    handleChange,
    handleSubmit,
    resetForm,
  };
};

export default useForm;

import React from 'react';
import useForm from '../hooks/useForm'; // 커스텀 훅 임포트

// 유효성 검사 함수 (useForm에 전달될 콜백)
const validateUserInfo = (values) => {
  const errors = {};
  if (!values.username.trim()) {
    errors.username = '사용자 이름은 필수입니다.';
  } else if (values.username.length < 3) {
    errors.username = '사용자 이름은 3자 이상이어야 합니다.';
  }
  if (!values.email.trim()) {
    errors.email = '이메일은 필수입니다.';
  } else if (!/\S+@\S+\.\S+/.test(values.email)) {
    errors.email = '유효한 이메일 주소를 입력해주세요.';
  }
  if (!values.password) {
    errors.password = '비밀번호는 필수입니다.';
  } else if (values.password.length < 6) {
    errors.password = '비밀번호는 6자 이상이어야 합니다.';
  }
  if (values.password !== values.confirmPassword) {
    errors.confirmPassword = '비밀번호가 일치하지 않습니다.';
  }
  return errors;
};

function UserRegistrationForm() {
  const {
    values,
    errors,
    isSubmitting,
    handleChange,
    handleSubmit,
    resetForm,
  } = useForm(
    { username: '', email: '', password: '', confirmPassword: '' }, // 초기값
    validateUserInfo // 유효성 검사 함수
  );

  // 폼 제출 로직 (useForm의 handleSubmit에 전달될 콜백)
  const onSubmit = async (formData) => {
    // 실제 API 호출 로직을 여기에 작성
    console.log('폼 데이터 제출 시작:', formData);
    try {
      // 가상 API 호출 지연
      await new Promise(resolve => setTimeout(resolve, 1000));
      console.log('폼 데이터 제출 완료:', formData);
      alert('회원가입이 완료되었습니다!');
      resetForm(); // 제출 성공 후 폼 초기화
    } catch (error) {
      console.error('회원가입 실패:', error);
      alert('회원가입에 실패했습니다.');
      throw error; // useForm 훅에서 에러를 잡을 수 있도록 다시 던짐
    }
  };

  return (
    <div style={{ maxWidth: '600px', margin: '30px auto', padding: '25px', border: '1px solid #ddd', borderRadius: '8px', boxShadow: '0 2px 10px rgba(0,0,0,0.05)', backgroundColor: '#fff' }}>
      <h2 style={{ textAlign: 'center', color: '#2c3e50', marginBottom: '30px' }}>회원가입 폼 (커스텀 훅)</h2>
      <form onSubmit={handleSubmit(onSubmit)} aria-busy={isSubmitting}> {/* handleSubmit에 실제 제출 함수를 전달 */}
        <div style={{ marginBottom: '15px' }}>
          <label htmlFor="registration-username" style={{ display: 'block', marginBottom: '5px' }}>사용자 이름:</label>
          <input
            id="registration-username"
            type="text"
            name="username"
            value={values.username}
            onChange={handleChange}
            aria-invalid={Boolean(errors.username)}
            aria-describedby={errors.username ? 'registration-username-error' : undefined}
            style={{ width: '100%', padding: '8px', border: errors.username ? '1px solid red' : '1px solid #ccc' }}
          />
          {errors.username && <p id="registration-username-error" style={{ color: 'red', fontSize: '0.8em', marginTop: '5px' }}>{errors.username}</p>}
        </div>
        <div style={{ marginBottom: '15px' }}>
          <label htmlFor="registration-email" style={{ display: 'block', marginBottom: '5px' }}>이메일:</label>
          <input
            id="registration-email"
            type="email"
            name="email"
            value={values.email}
            onChange={handleChange}
            aria-invalid={Boolean(errors.email)}
            aria-describedby={errors.email ? 'registration-email-error' : undefined}
            style={{ width: '100%', padding: '8px', border: errors.email ? '1px solid red' : '1px solid #ccc' }}
          />
          {errors.email && <p id="registration-email-error" style={{ color: 'red', fontSize: '0.8em', marginTop: '5px' }}>{errors.email}</p>}
        </div>
        <div style={{ marginBottom: '15px' }}>
          <label htmlFor="registration-password" style={{ display: 'block', marginBottom: '5px' }}>비밀번호:</label>
          <input
            id="registration-password"
            type="password"
            name="password"
            value={values.password}
            onChange={handleChange}
            aria-invalid={Boolean(errors.password)}
            aria-describedby={errors.password ? 'registration-password-error' : undefined}
            style={{ width: '100%', padding: '8px', border: errors.password ? '1px solid red' : '1px solid #ccc' }}
          />
          {errors.password && <p id="registration-password-error" style={{ color: 'red', fontSize: '0.8em', marginTop: '5px' }}>{errors.password}</p>}
        </div>
        <div style={{ marginBottom: '15px' }}>
          <label htmlFor="registration-confirm-password" style={{ display: 'block', marginBottom: '5px' }}>비밀번호 확인:</label>
          <input
            id="registration-confirm-password"
            type="password"
            name="confirmPassword"
            value={values.confirmPassword}
            onChange={handleChange}
            aria-invalid={Boolean(errors.confirmPassword)}
            aria-describedby={errors.confirmPassword ? 'registration-confirm-password-error' : undefined}
            style={{ width: '100%', padding: '8px', border: errors.confirmPassword ? '1px solid red' : '1px solid #ccc' }}
          />
          {errors.confirmPassword && <p id="registration-confirm-password-error" style={{ color: 'red', fontSize: '0.8em', marginTop: '5px' }}>{errors.confirmPassword}</p>}
        </div>
        {errors.submit && <p role="alert" style={{ color: 'red', fontSize: '0.9em', marginTop: '10px' }}>{errors.submit}</p>} {/* 제출 오류 */}
        <button type="submit" className="button" disabled={isSubmitting} style={{ width: '100%', padding: '10px' }}>
          {isSubmitting ? '등록 중...' : '회원가입'}
        </button>
      </form>
    </div>
  );
}

export default UserRegistrationForm;

const normalizedUsername = values.username.trim();
// 원 validateUserInfo의 username 검사 두 조건만 이 값으로 비교합니다.
if (!normalizedUsername) {
  errors.username = '사용자 이름은 필수입니다.';
} else if (normalizedUsername.length < 3) {
  errors.username = '사용자 이름은 3자 이상이어야 합니다.';
}