124 lines
4.6 KiB
JavaScript
124 lines
4.6 KiB
JavaScript
// Header scroll effect
|
|
const mainHeader = document.getElementById('main-header');
|
|
const brandName = document.getElementById('brand-name');
|
|
const navLinks = document.querySelectorAll('.nav-link');
|
|
|
|
window.addEventListener('scroll', () => {
|
|
if (window.scrollY > 50) {
|
|
mainHeader.classList.add('glass-effect', 'py-3');
|
|
mainHeader.classList.remove('py-6');
|
|
if (brandName) brandName.classList.replace('text-white', 'text-slate-900');
|
|
navLinks.forEach(link => {
|
|
link.classList.replace('text-slate-100', 'text-slate-700');
|
|
});
|
|
} else {
|
|
mainHeader.classList.remove('glass-effect', 'py-3');
|
|
mainHeader.classList.add('py-6');
|
|
if (brandName) brandName.classList.replace('text-slate-900', 'text-white');
|
|
navLinks.forEach(link => {
|
|
link.classList.replace('text-slate-700', 'text-slate-100');
|
|
});
|
|
}
|
|
});
|
|
|
|
// Mobile menu open
|
|
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
const closeMenuBtn = document.getElementById('close-menu-btn');
|
|
|
|
if (mobileMenuBtn) {
|
|
mobileMenuBtn.addEventListener('click', () => {
|
|
mobileMenu.classList.remove('translate-x-full');
|
|
});
|
|
}
|
|
|
|
// Mobile menu close
|
|
if (closeMenuBtn) {
|
|
closeMenuBtn.addEventListener('click', () => {
|
|
mobileMenu.classList.add('translate-x-full');
|
|
});
|
|
}
|
|
|
|
// Close on nav link click
|
|
const mobileNavLinks = mobileMenu ? mobileMenu.querySelectorAll('a') : [];
|
|
mobileNavLinks.forEach(link => {
|
|
link.addEventListener('click', () => {
|
|
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 {
|
|
// FastAPI 엔드포인트로 요청 (nginx 프록시를 통함)
|
|
const response = await fetch('/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';
|
|
}
|
|
});
|
|
}
|