hmw1001
124 lines
5.1 KiB
JavaScript
124 lines
5.1 KiB
JavaScript
/**
|
|
* 파일명: contact-form-handler.js
|
|
* 설명: 홈페이지 메인의 상담 신청 폼을 처리하고 팝업을 제어하는 스크립트
|
|
*/
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 모달 요소 선택 (contact.skin.php의 구조에 맞춤)
|
|
const modal = document.getElementById('contact-modal');
|
|
|
|
// 모달이 없으면 실행 중단
|
|
if (!modal) return;
|
|
|
|
const closeBtn = modal.querySelector('.modal-close');
|
|
// modal 자체가 overlay 역할을 하므로 overlay 변수는 modal과 동일하거나 별도 배경 요소일 수 있음
|
|
// contact.skin.php 구조상 id="contact-modal"이 overlay 역할을 함
|
|
const overlay = modal;
|
|
const contactForm = modal.querySelector('form');
|
|
const formMessages = modal.querySelector('.form-message-area');
|
|
const submitButton = contactForm ? contactForm.querySelector('button[type="submit"]') : null;
|
|
|
|
// 모달 열기 함수
|
|
const openModal = (e) => {
|
|
if (e) e.preventDefault();
|
|
modal.classList.add('active'); // CSS에서 .active 클래스로 제어한다고 가정
|
|
document.body.style.overflow = 'hidden';
|
|
};
|
|
|
|
// 모달 닫기 함수
|
|
const closeModal = () => {
|
|
modal.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
};
|
|
|
|
// 1. 모달 열기 이벤트 위임 (어디서든 .open-contact-modal 클래스 클릭 시 열림)
|
|
document.addEventListener('click', function(e) {
|
|
const targetBtn = e.target.matches('.open-contact-modal') ? e.target : e.target.closest('.open-contact-modal');
|
|
if (targetBtn) {
|
|
openModal(e);
|
|
}
|
|
});
|
|
|
|
// 2. 모달 닫기 이벤트
|
|
if (closeBtn) {
|
|
closeBtn.addEventListener('click', closeModal);
|
|
}
|
|
|
|
// 배경 클릭 시 닫기
|
|
if (overlay) {
|
|
overlay.addEventListener('click', function(e) {
|
|
if (e.target === overlay) {
|
|
closeModal();
|
|
}
|
|
});
|
|
}
|
|
|
|
// ESC 키 누르면 닫기
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && modal.classList.contains('active')) {
|
|
closeModal();
|
|
}
|
|
});
|
|
|
|
// 3. 폼 제출 처리
|
|
if (contactForm && submitButton) {
|
|
contactForm.addEventListener('submit', function(e) {
|
|
e.preventDefault(); // 기본 폼 전송 막기
|
|
|
|
const originalButtonText = submitButton.textContent;
|
|
submitButton.disabled = true;
|
|
submitButton.textContent = '전송 중...';
|
|
|
|
if (formMessages) {
|
|
formMessages.style.display = 'none';
|
|
formMessages.className = 'form-message-area'; // 초기화
|
|
formMessages.innerHTML = '';
|
|
}
|
|
|
|
const formData = new FormData(contactForm);
|
|
const variables = {
|
|
contact_subject: formData.get('contact_subject'),
|
|
contact_name: formData.get('contact_name'),
|
|
contact_hp: formData.get('contact_hp'),
|
|
contact_email: formData.get('contact_email'),
|
|
contact_message: formData.get('contact_message').replace(/\n/g, '<br>')
|
|
};
|
|
|
|
// universalMailer 객체 확인 및 메일 발송
|
|
if (window.universalMailer && typeof window.universalMailer.send === 'function') {
|
|
window.universalMailer.send({
|
|
template_code: 'contact_inquiry', // 관리자에서 생성할 템플릿 코드
|
|
to_email : variables.contact_email,
|
|
// [추가] 참조 이메일 설정
|
|
// 'ADMIN_EMAIL' 키워드를 사용하면 서버(ajax_universal_send.php)에서
|
|
// 실제 관리자 이메일 주소(config.php의 cf_admin_email)로 자동 치환합니다.
|
|
cc_email: ['ADMIN_EMAIL'],
|
|
// bcc_email: ['msbfox@naver.com'],
|
|
variables: variables,
|
|
onSuccess: function(response) {
|
|
alert(response.message || '상담 신청이 성공적으로 접수되었습니다.');
|
|
contactForm.reset();
|
|
closeModal();
|
|
},
|
|
onError: function(errorMessage) {
|
|
if (formMessages) {
|
|
formMessages.innerHTML = `<div class="message error">${errorMessage || '오류가 발생했습니다.'}</div>`;
|
|
formMessages.style.display = 'block';
|
|
} else {
|
|
alert(errorMessage || '오류가 발생했습니다.');
|
|
}
|
|
},
|
|
onComplete: function() {
|
|
submitButton.disabled = false;
|
|
submitButton.textContent = originalButtonText;
|
|
}
|
|
});
|
|
} else {
|
|
alert('메일 발송 모듈(universalMailer)이 로드되지 않았습니다.');
|
|
submitButton.disabled = false;
|
|
submitButton.textContent = originalButtonText;
|
|
}
|
|
});
|
|
}
|
|
});
|