Very Good Version !

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

@@ -0,0 +1,149 @@
+// ============================================================
+// ★ 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');
+        });
+    });
+});