Implement Contact Form with Python FastAPI backend and mailcow SMTP integration

html/assets/js/script.js

@@ -46,3 +46,78 @@ mobileNavLinks.forEach(link => {
         mobileMenu.classList.add('translate-x-full');
     });
 });
+
+// Contact form handler
+const contactSubmitBtn = document.getElementById('contact-submit');
+const contactForm = {
+    name: document.getElementById('contact-name'),
+    email: document.getElementById('contact-email'),
+    company: document.getElementById('contact-company'),
+    message: document.getElementById('contact-message')
+};
+const contactStatus = document.getElementById('contact-status');
+
+if (contactSubmitBtn) {
+    contactSubmitBtn.addEventListener('click', async (e) => {
+        e.preventDefault();
+        
+        // 폼 데이터 수집
+        const formData = {
+            name: contactForm.name.value,
+            email: contactForm.email.value,
+            company: contactForm.company.value,
+            message: contactForm.message.value
+        };
+        
+        // 로딩 상태 표시
+        contactSubmitBtn.disabled = true;
+        contactSubmitBtn.textContent = 'Sending...';
+        contactStatus.classList.add('hidden');
+        
+        try {
+            // Python FastAPI 엔드포인트로 요청
+            const response = await fetch('http://localhost:8001/api/contact', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(formData),
+                mode: 'cors',
+                credentials: 'omit'
+            });
+            
+            const result = await response.json();
+            
+            // 응답 처리
+            contactStatus.classList.remove('hidden');
+            
+            if (response.ok && result.success !== false) {
+                // 성공 메시지
+                contactStatus.classList.remove('bg-red-900/50', 'text-red-200');
+                contactStatus.classList.add('bg-green-900/50', 'text-green-200');
+                contactStatus.textContent = result.message;
+                
+                // 폼 초기화
+                contactForm.name.value = '';
+                contactForm.email.value = '';
+                contactForm.company.value = '';
+                contactForm.message.value = '';
+            } else {
+                // 오류 메시지
+                contactStatus.classList.remove('bg-green-900/50', 'text-green-200');
+                contactStatus.classList.add('bg-red-900/50', 'text-red-200');
+                contactStatus.textContent = result.detail || result.message || 'Failed to send message';
+            }
+        } catch (error) {
+            // 네트워크 오류
+            contactStatus.classList.remove('hidden', 'bg-green-900/50', 'text-green-200');
+            contactStatus.classList.add('bg-red-900/50', 'text-red-200');
+            contactStatus.textContent = 'Error: Could not send message. Please try again later.';
+            console.error('Contact form error:', error);
+        } finally {
+            // 버튼 상태 복구
+            contactSubmitBtn.disabled = false;
+            contactSubmitBtn.textContent = 'Send Message';
+        }
+    });
+}