// ============================================================ // ★ 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('.menu-btn'); const navMenu = document.querySelector('.nav-menu'); if (menuBtn && navMenu) { menuBtn.addEventListener('click', () => { navMenu.classList.toggle('open'); menuBtn.classList.toggle('open'); }); } // ============================================================ // 스크롤 애니메이션 // ============================================================ 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'); }); }); });