/** * 파일명: 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); // 💡 [DB 저장] AJAX 요청으로 먼저 데이터를 서버에 저장 // GnuBoard의 g5_url 변수를 사용하여 AJAX 요청 URL을 생성합니다. const save_url = (typeof g5_url !== 'undefined' ? g5_url : '') + '/adm/contact_inquiry/ajax_save_inquiry.php'; fetch(save_url, { method: 'POST', body: formData }) .then(response => { if (!response.ok) { throw new Error('서버와의 통신에 실패했습니다.'); } return response.json(); }) .then(data => { if (data.success) { // DB 저장 성공 시 메일 발송 진행 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, '
') }; // 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 = `
${errorMessage || '오류가 발생했습니다.'}
`; formMessages.style.display = 'block'; } else { alert(errorMessage || '오류가 발생했습니다.'); } }, onComplete: function() { submitButton.disabled = false; submitButton.textContent = originalButtonText; } }); } else { // 메일 모듈이 없어도 DB 저장은 되었으므로 성공 처리 (선택사항) alert('상담 신청이 접수되었습니다. (메일 발송 실패)'); contactForm.reset(); closeModal(); submitButton.disabled = false; submitButton.textContent = originalButtonText; } } else { throw new Error(data.message || '상담 신청 저장 중 오류가 발생했습니다.'); } }) .catch(error => { console.error('Error:', error); alert(error.message || '오류가 발생했습니다.'); submitButton.disabled = false; submitButton.textContent = originalButtonText; }); }); } });