homepage/.Backup/html/assets/js/script.js

// ============================================================
// ★ EmailJS 설정 - 아래 3가지 값을 본인 계정으로 교체하세요 ★
// ============================================================
const EMAILJS_PUBLIC_KEY  = 'HO6i369gX6X5HEXtJ';
const EMAILJS_SERVICE_ID  = 'service_4ur5lqd';
const EMAILJS_TEMPLATE_ID = 'template_jp0v5qv';
// ============================================================

emailjs.init(EMAILJS_PUBLIC_KEY);

// ── Contact Form ─────────────────────────────────────────────
document.getElementById('contact-submit').addEventListener('click', function () {
    const name    = document.getElementById('contact-name').value.trim();
    const email   = document.getElementById('contact-email').value.trim();
    const company = document.getElementById('contact-company').value.trim();
    const message = document.getElementById('contact-message').value.trim();
    const btn     = document.getElementById('contact-submit');

    if (!name || !email || !message) {
        showStatus('error', t('contact.error.required')); return;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
        showStatus('error', t('contact.error.email')); return;
    }

    btn.disabled = true;
    btn.textContent = t('contact.sending');

    const templateParams = {
        name     : name,
        message  : 'Email   : ' + email + '\nCompany : ' + (company || 'N/A') + '\n\n' + message,
        reply_to : email
    };

    emailjs.send(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_ID, templateParams)
        .then(function () {
            showStatus('success', t('contact.success'));
            document.getElementById('contact-name').value    = '';
            document.getElementById('contact-email').value   = '';
            document.getElementById('contact-company').value = '';
            document.getElementById('contact-message').value = '';
        })
        .catch(function (error) {
            console.error('EmailJS error:', error);
            showStatus('error', t('contact.error.fail'));
        })
        .finally(function () {
            btn.disabled = false;
            btn.textContent = t('contact.btn');
        });
});

function showStatus(type, msg) {
    const status = document.getElementById('contact-status');
    status.classList.remove('hidden', 'bg-green-500/20', 'text-green-400', 'bg-red-500/20', 'text-red-400');
    status.classList.add(type === 'success' ? 'bg-green-500/20' : 'bg-red-500/20',
                         type === 'success' ? 'text-green-400' : 'text-red-400');
    status.textContent = msg;
}

// ============================================================
// 메인 스크립트 (전체 기능 포함)
// ============================================================

// DOMContentLoaded 이벤트
document.addEventListener('DOMContentLoaded', () => {

    // ============================================================
    // 메뉴 토글
    // ============================================================
    const menuBtn = document.querySelector('#mobile-menu-btn');
    const navMenu = document.querySelector('#mobile-menu');
    const closeBtn = document.querySelector('#close-menu-btn');
    if (menuBtn && navMenu) {
        // 메뉴열기
        menuBtn.addEventListener('click', () => {
            navMenu.classList.remove('translate-x-full');
            menuBtn.classList.toggle('open');
        });
        //메뉴닫기
        if (closeBtn) {
            closeBtn.addEventListener('click', () => {
                navMenu.classList.add('translate-x-full');
            });
        }
        //메뉴 링크 클릭 시 닫기
        navMenu.querySelectorAll('a').forEach(link => {
            link.addEventListener('click',() => {
                navMenu.classList.add('translate-x-full');
            });
        });
    }

    // ============================================================
    // 스크롤 애니메이션
    // ============================================================
    const scrollElems = document.querySelectorAll('[data-scroll]');
    const observerOptions = {
        root: null,
        rootMargin: '0px',
        threshold: 0.1
    };
    const scrollObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate');
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);

    scrollElems.forEach(el => scrollObserver.observe(el));

    // ============================================================
    // 상단 버튼/헤더 스크롤 효과
    // ============================================================
    const header = document.querySelector('header');
    const topBtn = document.querySelector('.back-to-top');
    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) {
            header?.classList.add('scrolled');
            topBtn?.classList.add('visible');
        } else {
            header?.classList.remove('scrolled');
            topBtn?.classList.remove('visible');
        }
    });

    topBtn?.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));

    // ============================================================
    // 기타 커스텀 이벤트/버튼
    // ============================================================
    // 예: 상담 신청 모달 열기
    document.querySelectorAll('.open-consult').forEach(btn => {
        btn.addEventListener('click', () => {
            const modal = document.querySelector('#consult-modal');
            modal?.classList.add('open');
        });
    });

    // 예: 모달 닫기
    document.querySelectorAll('.modal .close-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            const modal = btn.closest('.modal');
            modal?.classList.remove('open');
        });
    });
});