기본적인 폼 유효성 검사 구현

import React, { useState } from 'react';

function SimpleValidationForm() {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [usernameError, setUsernameError] = useState('');
  const [emailError, setEmailError] = useState('');
  const [formValid, setFormValid] = useState(false); // 폼 전체 유효성 상태

  // 입력 변경 핸들러
  const handleUsernameChange = (e) => {
    setUsername(e.target.value);
    // 실시간 유효성 검사 (선택 사항)
    if (e.target.value.trim() === '') {
      setUsernameError('사용자 이름은 필수입니다.');
    } else {
      setUsernameError('');
    }
  };

  const handleEmailChange = (e) => {
    setEmail(e.target.value);
    // 실시간 유효성 검사 (선택 사항)
    if (!e.target.value.includes('@')) {
      setEmailError('유효한 이메일 주소를 입력해주세요.');
    } else {
      setEmailError('');
    }
  };

  // 폼 제출 핸들러
  const handleSubmit = (e) => {
    e.preventDefault();

    let valid = true;
    // 제출 시 최종 유효성 검사
    if (username.trim() === '') {
      setUsernameError('사용자 이름은 필수입니다.');
      valid = false;
    } else {
      setUsernameError('');
    }

    if (!email.includes('@')) {
      setEmailError('유효한 이메일 주소를 입력해주세요.');
      valid = false;
    } else {
      setEmailError('');
    }

    if (valid) {
      console.log('폼 데이터 유효:', { username, email });
      alert(`제출 완료!\n사용자 이름: ${username}\n이메일: ${email}`);
      // 폼 초기화
      setUsername('');
      setEmail('');
    } else {
      console.log('폼 데이터 유효하지 않음.');
      alert('폼 입력값을 확인해주세요.');
    }
    setFormValid(valid); // 폼 전체 유효성 상태 업데이트
  };

  return (
    <div style={{ maxWidth: '500px', 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}>
        <div style={{ marginBottom: '15px' }}>
          <label htmlFor="username" style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>사용자 이름:</label>
          <input
            type="text"
            id="username"
            value={username}
            onChange={handleUsernameChange}
            style={{ width: '100%', padding: '10px', border: usernameError ? '1px solid red' : '1px solid #ccc', borderRadius: '4px', boxSizing: 'border-box' }}
          />
          {usernameError && <p style={{ color: 'red', fontSize: '0.8em', marginTop: '5px' }}>{usernameError}</p>}
        </div>
        <div style={{ marginBottom: '15px' }}>
          <label htmlFor="email" style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>이메일:</label>
          <input
            type="email"
            id="email"
            value={email}
            onChange={handleEmailChange}
            style={{ width: '100%', padding: '10px', border: emailError ? '1px solid red' : '1px solid #ccc', borderRadius: '4px', boxSizing: 'border-box' }}
          />
          {emailError && <p style={{ color: 'red', fontSize: '0.8em', marginTop: '5px' }}>{emailError}</p>}
        </div>
        <button type="submit" className="button" style={{ width: '100%', padding: '12px', fontSize: '1.1em' }}>
          제출
        </button>
      </form>
    </div>
  );
}

export default SimpleValidationForm;

// ... 기존 코드 ...

const [password, setPassword] = useState('');
const [passwordError, setPasswordError] = useState('');

const validatePassword = (value) => {
  let error = '';
  if (value.length < 8) {
    error = '비밀번호는 최소 8자 이상이어야 합니다.';
  } else if (!/[A-Z]/.test(value)) {
    error = '비밀번호는 최소 하나의 대문자를 포함해야 합니다.';
  } else if (!/[a-z]/.test(value)) {
    error = '비밀번호는 최소 하나의 소문자를 포함해야 합니다.';
  } else if (!/[0-9]/.test(value)) {
    error = '비밀번호는 최소 하나의 숫자를 포함해야 합니다.';
  } else if (!/[!@#$%^&*()]/.test(value)) { // 예시: 특정 특수 문자 허용
    error = '비밀번호는 최소 하나의 특수 문자(!@#$%^&*())를 포함해야 합니다.';
  }
  return error;
};

const handlePasswordChange = (e) => {
  const value = e.target.value;
  setPassword(value);
  setPasswordError(validatePassword(value));
};

// ... handleSubmit 함수 내에서 password 유효성 검사 추가 ...
let valid = true;
// ... 기존 유효성 검사 ...
const passwordValidationError = validatePassword(password);
setPasswordError(passwordValidationError);
if (passwordValidationError) {
  valid = false;
}
// ...

// ... 기존 코드 ...

const [confirmPassword, setConfirmPassword] = useState('');
const [confirmPasswordError, setConfirmPasswordError] = useState('');

const handleConfirmPasswordChange = (e) => {
  const value = e.target.value;
  setConfirmPassword(value);
  // 실시간 검사: 비밀번호와 일치하는지
  if (password !== value) {
    setConfirmPasswordError('비밀번호가 일치하지 않습니다.');
  } else {
    setConfirmPasswordError('');
  }
};

// ... handleSubmit 함수 내에서 confirmPassword 유효성 검사 추가 ...
let valid = true;
// ... 기존 유효성 검사 ...
if (password !== confirmPassword) {
  setConfirmPasswordError('비밀번호가 일치하지 않습니다.');
  valid = false;
} else {
  setConfirmPasswordError('');
}
// ...

// 컴포넌트를 렌더링할 때 현재 입력값에서 파생합니다.
const formValid =
  username.trim() !== '' &&
  email.includes('@') &&
  validatePassword(password) === '' &&
  password === confirmPassword;

return (
  // ...
  <button type="submit" className="button" disabled={!formValid}>
    제출
  </button>
  // ...
);