diff --git a/html/assets/js/script.js b/html/assets/js/script.js index b536ac9..6e3d119 100644 --- a/html/assets/js/script.js +++ b/html/assets/js/script.js @@ -1,3 +1,63 @@ +// ============================================================ +// ★ 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; +} + // ============================================================ // 메인 스크립트 (전체 기능 포함) // ============================================================