dnssash/adm/contact_inquiry/contact-form-handler.js

/**
 * 파일명: 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, '<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 {
                        // 메일 모듈이 없어도 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;
            });
        });
    }
});