🔷 타입 안전 폼 검증 시스템 구축

// 폼 데이터 타입 정의
interface FormData {
  name: string;
  email: string;
  phone: string;
}

// 유효성 검사 로직
function validateForm(data: FormData): { [key: string]: string } {
  const errors: { [key: string]: string } = {};

  // 필수 항목 체크
  if (!data.name.trim()) {
    errors.name = '이름은 필수 입력사항입니다.';
  }

  // 이메일 형식 검사
  const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
  if (data.email && !emailRegex.test(data.email)) {
    errors.email = '올바른 이메일 형식이 아닙니다.';
  }

  // 전화번호 검사
  const phoneRegex = /^010\d{8}$/;
  if (data.phone && !phoneRegex.test(data.phone)) {
    errors.phone = '올바른 휴대폰 번호 형식이 아닙니다.';
  }

  return errors;
}

// DOM 조작 및 이벤트 핸들링
window.onload = () => {
  const form = document.getElementById('myForm') as HTMLFormElement;
  const nameInput = document.getElementById('name') as HTMLInputElement;
  const emailInput = document.getElementById('email') as HTMLInputElement;
  const phoneInput = document.getElementById('phone') as HTMLInputElement;
  const errorMessages = {
    name: document.getElementById('nameError'),
    email: document.getElementById('emailError'),
    phone: document.getElementById('phoneError')
  };

  form.addEventListener('submit', (e) => {
    e.preventDefault();
    
    const data: FormData = {
      name: nameInput.value,
      email: emailInput.value,
      phone: phoneInput.value
    };
    
    const errors = validateForm(data);
    
    // 에러 메시지 업데이트
    Object.keys(errors).forEach(key => {
      if (errorMessages[key as keyof typeof errorMessages]) {
        errorMessages[key as keyof typeof errorMessages]!.textContent = errors[key];
      }
    });
  });
};