mingle-website/js/contact.js

// ========================================
// Contact 페이지 전용 JavaScript
// ========================================

document.addEventListener('DOMContentLoaded', function() {
    initContactForm();
    initModal();
    initMap();
    initFormValidation();
});

// i18n 헬퍼 (var 사용 — 여러 JS 파일에서 중복 선언 허용)
var _t = _t || ((key, fallback) => window.i18n?.t(key, fallback) ?? fallback);

// 연락처 폼 초기화
function initContactForm() {
    const form = document.getElementById('contactForm');
    
    if (form) {
        form.addEventListener('submit', handleFormSubmit);
        
        // 실시간 유효성 검사
        const inputs = form.querySelectorAll('input, select, textarea');
        inputs.forEach(input => {
            input.addEventListener('blur', validateField);
            input.addEventListener('input', clearFieldError);
        });
        
        // 전화번호 자동 포맷팅
        const phoneInput = document.getElementById('phone');
        if (phoneInput) {
            phoneInput.addEventListener('input', formatPhoneNumber);
        }
        
        // 리셋 버튼 확인
        const resetBtn = form.querySelector('button[type="reset"]');
        if (resetBtn) {
            resetBtn.addEventListener('click', handleFormReset);
        }
    }
}

// 폼 제출 처리
async function handleFormSubmit(e) {
    e.preventDefault();
    
    const form = e.target;
    const submitBtn = form.querySelector('button[type="submit"]');
    
    // 유효성 검사
    if (!validateForm(form)) {
        showNotification(_t('contact.js.checkInput', '입력 정보를 확인해 주세요.'), 'error');
        return;
    }

    // 개인정보 동의 확인
    const privacyCheckbox = document.getElementById('privacyConsent');
    if (privacyCheckbox && !privacyCheckbox.checked) {
        showNotification(_t('contact.js.privacyRequired', '개인정보 수집 및 이용에 동의해 주세요.'), 'error');
        return;
    }
    
    // 제출 버튼 비활성화
    const originalText = submitBtn.textContent;
    submitBtn.textContent = _t('contact.js.sending', '전송 중...');
    submitBtn.disabled = true;
    
    try {
        // 폼 데이터 수집
        const formData = new FormData(form);
        const data = Object.fromEntries(formData);
        
        // 실제 서버 전송 (현재는 시뮬레이션)
        await submitContactForm(data);
        
        // 성공 메시지
        showNotification(_t('contact.js.sendSuccess', '문의가 성공적으로 전송되었습니다. 빠른 시일 내에 연락드리겠습니다.'), 'success');
        form.reset();
        
    } catch (error) {
        console.error('Form submission error:', error);
        showApiErrorFallback();
    } finally {
        // 버튼 복원
        submitBtn.textContent = originalText;
        submitBtn.disabled = false;
    }
}

// 서버 전송 (API)
async function submitContactForm(data) {
    const response = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            name: data.name || '',
            email: data.email || '',
            phone: data.phone || '',
            service: data.service || '',
            message: data.message || ''
        })
    });

    const result = await response.json();

    if (!response.ok || !result.success) {
        throw new Error(result.error || '전송 실패');
    }

    return result;
}

// API 실패 시 대체 연락 안내
function showApiErrorFallback() {
    // 기존 fallback 제거
    const existing = document.getElementById('apiErrorFallback');
    if (existing) existing.remove();

    const fallback = document.createElement('div');
    fallback.id = 'apiErrorFallback';
    fallback.className = 'api-error-fallback';
    fallback.innerHTML = `
        <div class="api-error-content">
            <button class="api-error-close" onclick="this.parentElement.parentElement.remove()">&times;</button>
            <div class="api-error-icon"><i class="fa-solid fa-triangle-exclamation"></i></div>
            <h3>${_t('contact.js.errorTitle', '전송에 실패했습니다')}</h3>
            <p>${_t('contact.js.errorDesc', '일시적인 서버 오류로 문의가 전송되지 않았습니다. 아래 방법으로 직접 연락해 주세요.')}</p>
            <div class="api-error-contacts">
                <a href="mailto:minglestudio@minglestudio.co.kr" class="api-error-method">
                    <i class="fa-solid fa-envelope"></i>
                    <div>
                        <strong>${_t('contact.js.errorEmail', '이메일')}</strong>
                        <span>minglestudio@minglestudio.co.kr</span>
                    </div>
                </a>
                <a href="tel:010-9288-9190" class="api-error-method">
                    <i class="fa-solid fa-phone"></i>
                    <div>
                        <strong>${_t('contact.js.errorPhone', '전화')}</strong>
                        <span>010-9288-9190</span>
                    </div>
                </a>
                <a href="https://open.kakao.com/o/sXOK0Iji" target="_blank" rel="noopener" class="api-error-method">
                    <i class="fa-solid fa-comment"></i>
                    <div>
                        <strong>${_t('contact.js.errorKakao', '카카오톡')}</strong>
                        <span>${_t('contact.js.errorKakaoDesc', '오픈채팅으로 상담')}</span>
                    </div>
                </a>
                <a href="https://discord.gg/minglestudio" target="_blank" rel="noopener" class="api-error-method">
                    <i class="fa-brands fa-discord"></i>
                    <div>
                        <strong>Discord</strong>
                        <span>${_t('contact.js.errorDiscord', '디스코드 서버에서 문의')}</span>
                    </div>
                </a>
            </div>
        </div>
    `;
    document.body.appendChild(fallback);
}

// 폼 리셋 처리
function handleFormReset(e) {
    const confirmed = confirm(_t('contact.js.resetConfirm', '입력한 내용이 모두 삭제됩니다. 계속하시겠습니까?'));
    if (!confirmed) {
        e.preventDefault();
    } else {
        // 에러 메시지 제거
        const errorElements = document.querySelectorAll('.field-error');
        errorElements.forEach(el => el.remove());

        // 필드 에러 스타일 제거
        const fields = document.querySelectorAll('.form-group input, .form-group select, .form-group textarea');
        fields.forEach(field => field.classList.remove('error'));

        // 제출 버튼 재비활성화
        const btn = document.getElementById('submitBtn');
        if (btn) {
            btn.disabled = true;
            btn.classList.add('btn-submit-disabled');
        }
    }
}

// 폼 유효성 검사
function validateForm(form) {
    let isValid = true;
    
    // 필수 필드 검사
    const requiredFields = form.querySelectorAll('[required]');
    requiredFields.forEach(field => {
        if (!validateField({ target: field })) {
            isValid = false;
        }
    });
    
    // 이메일 형식 검사
    const emailField = form.querySelector('#email');
    if (emailField && emailField.value && !isValidEmail(emailField.value)) {
        showFieldError(emailField, _t('contact.js.invalidEmail', '올바른 이메일 형식을 입력해 주세요.'));
        isValid = false;
    }
    
    // 전화번호 형식 검사
    const phoneField = form.querySelector('#phone');
    if (phoneField && phoneField.value && !isValidPhone(phoneField.value)) {
        showFieldError(phoneField, _t('contact.js.invalidPhone', '올바른 전화번호 형식을 입력해 주세요.'));
        isValid = false;
    }
    
    return isValid;
}

// 개별 필드 유효성 검사
function validateField(e) {
    const field = e.target;
    const value = field.value.trim();
    
    // 기존 에러 메시지 제거
    clearFieldError(e);
    
    // 필수 필드 검사
    if (field.required && !value) {
        showFieldError(field, _t('contact.js.required', '필수 입력 항목입니다.'));
        return false;
    }
    
    // 이메일 형식 검사
    if (field.type === 'email' && value && !isValidEmail(value)) {
        showFieldError(field, _t('contact.js.invalidEmail', '올바른 이메일 형식을 입력해 주세요.'));
        return false;
    }
    
    // 전화번호 형식 검사
    if (field.type === 'tel' && value && !isValidPhone(value)) {
        showFieldError(field, _t('contact.js.invalidPhone', '올바른 전화번호 형식을 입력해 주세요.'));
        return false;
    }
    
    return true;
}

// 필드 에러 표시
function showFieldError(field, message) {
    field.classList.add('error');
    
    const errorEl = document.createElement('div');
    errorEl.className = 'field-error';
    errorEl.textContent = message;
    errorEl.style.color = '#ef4444';
    errorEl.style.fontSize = '0.875rem';
    errorEl.style.marginTop = '0.25rem';
    
    field.parentNode.appendChild(errorEl);
}

// 필드 에러 제거
function clearFieldError(e) {
    const field = e.target;
    field.classList.remove('error');
    
    const errorEl = field.parentNode.querySelector('.field-error');
    if (errorEl) {
        errorEl.remove();
    }
}

// 이메일 유효성 검사
function isValidEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}

// 전화번호 유효성 검사
function isValidPhone(phone) {
    const phoneRegex = /^[0-9-+\s()]+$/;
    return phoneRegex.test(phone) && phone.replace(/[^0-9]/g, '').length >= 10;
}

// 전화번호 자동 포맷팅
function formatPhoneNumber(e) {
    let value = e.target.value.replace(/[^0-9]/g, '');
    
    if (value.length >= 11) {
        // 01X-XXXX-XXXX 형태
        value = value.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
    } else if (value.length >= 7) {
        // 01X-XXX-XXXX 또는 01X-XXXX-XXX 형태
        value = value.replace(/(\d{3})(\d{3,4})(\d{0,4})/, '$1-$2-$3');
    } else if (value.length >= 3) {
        // 01X-XXX 형태
        value = value.replace(/(\d{3})(\d{0,4})/, '$1-$2');
    }
    
    e.target.value = value;
}

// common.js의 showNotification 참조 (전역 재선언 방지)
if (typeof showNotification === 'undefined') {
    var showNotification = window.commonUtils?.showNotification || function() {};
}

// 모달 전역 함수 (onclick에서도 호출 가능)
let _modalLastFocus = null;

function openPrivacyModal() {
    const modal = document.getElementById('privacyModal');
    if (!modal) return;
    _modalLastFocus = document.activeElement;
    modal.classList.add('active');
    modal.style.display = 'flex';
    document.body.style.overflow = 'hidden';
    document.body.style.position = 'fixed';
    document.body.style.width = '100%';
    document.body.style.top = `-${window.scrollY}px`;
    const closeBtn = modal.querySelector('.modal-close');
    if (closeBtn) closeBtn.focus();
}

function closePrivacyModal() {
    const modal = document.getElementById('privacyModal');
    if (!modal) return;
    modal.classList.remove('active');
    modal.style.display = '';
    const scrollY = document.body.style.top;
    document.body.style.overflow = '';
    document.body.style.position = '';
    document.body.style.width = '';
    document.body.style.top = '';
    window.scrollTo(0, parseInt(scrollY || '0') * -1);
    if (_modalLastFocus) _modalLastFocus.focus();
}

// 모달 초기화
function initModal() {
    // 이벤트 위임 (백업 — HTML onclick이 주요 트리거)
    document.addEventListener('click', function(e) {
        if (e.target.closest('.privacy-link')) {
            e.preventDefault();
            openPrivacyModal();
        }
        if (e.target.closest('.modal-close')) {
            closePrivacyModal();
        }
        if (e.target.id === 'privacyModal') {
            closePrivacyModal();
        }
    });

    document.addEventListener('keydown', function(e) {
        const modal = document.getElementById('privacyModal');
        if (e.key === 'Escape' && modal?.classList.contains('active')) {
            closePrivacyModal();
        }
    });
}

// 지도 초기화
function initMap() {
    // HTML에 이미 정적으로 정보가 표시되어 있으므로
    // JavaScript로 덮어쓸 필요가 없음
    // 지도 기능은 외부 링크(네이버 지도, 구글 맵)를 통해 제공
}


// 폼 유효성 검사 초기화
function initFormValidation() {
    // 에러/알림 스타일은 contact.css에 정의됨
}