init commit

public/js/calculator.js

@@ -0,0 +1,384 @@
+// Calculator Logic
+class ProjectCalculator {
+    constructor() {
+        this.selectedServices = [];
+        this.selectedComplexity = null;
+        this.selectedTimeline = null;
+        this.currentStep = 1;
+        this.totalSteps = 3;
+        
+        this.init();
+    }
+    
+    init() {
+        this.setupEventListeners();
+        this.updateProgressBar();
+    }
+    
+    setupEventListeners() {
+        // Service selection
+        document.querySelectorAll('.service-option').forEach(option => {
+            option.addEventListener('click', (e) => this.handleServiceSelection(e));
+        });
+        
+        // Complexity selection
+        document.querySelectorAll('.complexity-option').forEach(option => {
+            option.addEventListener('click', (e) => this.handleComplexitySelection(e));
+        });
+        
+        // Timeline selection
+        document.querySelectorAll('.timeline-option').forEach(option => {
+            option.addEventListener('click', (e) => this.handleTimelineSelection(e));
+        });
+        
+        // Navigation buttons
+        document.querySelectorAll('.next-step').forEach(btn => {
+            btn.addEventListener('click', () => this.nextStep());
+        });
+        
+        document.querySelectorAll('.prev-step').forEach(btn => {
+            btn.addEventListener('click', () => this.prevStep());
+        });
+        
+        // Restart button
+        const restartBtn = document.querySelector('.restart-calculator');
+        if (restartBtn) {
+            restartBtn.addEventListener('click', () => this.restart());
+        }
+    }
+    
+    handleServiceSelection(e) {
+        const option = e.currentTarget;
+        const service = option.dataset.service;
+        const price = parseInt(option.dataset.basePrice);
+        
+        option.classList.toggle('selected');
+        
+        if (option.classList.contains('selected')) {
+            this.selectedServices.push({ service, price });
+            this.animateSelection(option, true);
+        } else {
+            this.selectedServices = this.selectedServices.filter(s => s.service !== service);
+            this.animateSelection(option, false);
+        }
+        
+        this.updateStepButton();
+    }
+    
+    handleComplexitySelection(e) {
+        const option = e.currentTarget;
+        
+        // Clear previous selections
+        document.querySelectorAll('.complexity-option').forEach(opt => {
+            opt.classList.remove('selected');
+            this.animateSelection(opt, false);
+        });
+        
+        // Select current option
+        option.classList.add('selected');
+        this.animateSelection(option, true);
+        
+        this.selectedComplexity = {
+            value: option.dataset.value,
+            multiplier: parseFloat(option.dataset.multiplier)
+        };
+        
+        this.updateStepButton();
+    }
+    
+    handleTimelineSelection(e) {
+        const option = e.currentTarget;
+        
+        // Clear previous selections
+        document.querySelectorAll('.timeline-option').forEach(opt => {
+            opt.classList.remove('selected');
+            this.animateSelection(opt, false);
+        });
+        
+        // Select current option
+        option.classList.add('selected');
+        this.animateSelection(option, true);
+        
+        this.selectedTimeline = {
+            value: option.dataset.value,
+            multiplier: parseFloat(option.dataset.multiplier)
+        };
+        
+        this.updateStepButton();
+    }
+    
+    animateSelection(element, selected) {
+        if (selected) {
+            element.style.borderColor = '#3B82F6';
+            element.style.backgroundColor = '#EBF8FF';
+            element.style.transform = 'translateY(-2px)';
+            element.style.boxShadow = '0 8px 25px rgba(59, 130, 246, 0.15)';
+        } else {
+            element.style.borderColor = '';
+            element.style.backgroundColor = '';
+            element.style.transform = '';
+            element.style.boxShadow = '';
+        }
+    }
+    
+    updateStepButton() {
+        const step1Button = document.querySelector('#step-1 .next-step');
+        const step2Button = document.querySelector('#step-2 .next-step');
+        
+        if (step1Button) {
+            step1Button.disabled = this.selectedServices.length === 0;
+            step1Button.style.opacity = this.selectedServices.length > 0 ? '1' : '0.6';
+        }
+        
+        if (step2Button) {
+            const isValid = this.selectedComplexity && this.selectedTimeline;
+            step2Button.disabled = !isValid;
+            step2Button.style.opacity = isValid ? '1' : '0.6';
+        }
+    }
+    
+    updateProgressBar() {
+        const progressBar = document.querySelector('.calculator-progress-bar');
+        if (progressBar) {
+            const progress = (this.currentStep / this.totalSteps) * 100;
+            progressBar.style.width = `${progress}%`;
+            progressBar.className = `calculator-progress-bar step-${this.currentStep}`;
+        }
+    }
+    
+    nextStep() {
+        if (this.currentStep >= this.totalSteps) return;
+        
+        const currentStepElement = document.querySelector('.calculator-step.active');
+        const nextStepElement = currentStepElement.nextElementSibling;
+        
+        if (nextStepElement && nextStepElement.classList.contains('calculator-step')) {
+            // Animate out current step
+            currentStepElement.style.opacity = '0';
+            currentStepElement.style.transform = 'translateX(-20px)';
+            
+            setTimeout(() => {
+                currentStepElement.classList.remove('active');
+                currentStepElement.style.display = 'none';
+                
+                // Animate in next step
+                nextStepElement.classList.add('active');
+                nextStepElement.style.display = 'block';
+                nextStepElement.style.opacity = '0';
+                nextStepElement.style.transform = 'translateX(20px)';
+                
+                setTimeout(() => {
+                    nextStepElement.style.opacity = '1';
+                    nextStepElement.style.transform = 'translateX(0)';
+                }, 50);
+                
+                this.currentStep++;
+                this.updateProgressBar();
+                
+                if (this.currentStep === 3) {
+                    setTimeout(() => this.calculateFinalPrice(), 300);
+                }
+            }, 200);
+        }
+    }
+    
+    prevStep() {
+        if (this.currentStep <= 1) return;
+        
+        const currentStepElement = document.querySelector('.calculator-step.active');
+        const prevStepElement = currentStepElement.previousElementSibling;
+        
+        if (prevStepElement && prevStepElement.classList.contains('calculator-step')) {
+            // Animate out current step
+            currentStepElement.style.opacity = '0';
+            currentStepElement.style.transform = 'translateX(20px)';
+            
+            setTimeout(() => {
+                currentStepElement.classList.remove('active');
+                currentStepElement.style.display = 'none';
+                
+                // Animate in previous step
+                prevStepElement.classList.add('active');
+                prevStepElement.style.display = 'block';
+                prevStepElement.style.opacity = '0';
+                prevStepElement.style.transform = 'translateX(-20px)';
+                
+                setTimeout(() => {
+                    prevStepElement.style.opacity = '1';
+                    prevStepElement.style.transform = 'translateX(0)';
+                }, 50);
+                
+                this.currentStep--;
+                this.updateProgressBar();
+            }, 200);
+        }
+    }
+    
+    calculateFinalPrice() {
+        let total = 0;
+        
+        // Calculate base price from services
+        this.selectedServices.forEach(service => {
+            total += service.price;
+        });
+        
+        // Apply complexity multiplier
+        if (this.selectedComplexity) {
+            total *= this.selectedComplexity.multiplier;
+        }
+        
+        // Apply timeline multiplier
+        if (this.selectedTimeline) {
+            total *= this.selectedTimeline.multiplier;
+        }
+        
+        // Animate price reveal
+        const priceElement = document.getElementById('final-price');
+        if (priceElement) {
+            priceElement.style.opacity = '0';
+            priceElement.style.transform = 'scale(0.8)';
+            
+            setTimeout(() => {
+                priceElement.textContent = '₩' + total.toLocaleString();
+                priceElement.style.opacity = '1';
+                priceElement.style.transform = 'scale(1)';
+            }, 300);
+        }
+        
+        // Generate summary
+        setTimeout(() => this.generateSummary(total), 600);
+    }
+    
+    generateSummary(total) {
+        const summary = document.getElementById('project-summary');
+        if (!summary) return;
+        
+        let summaryHTML = '';
+        
+        // Services
+        const servicesLabel = window.calculatorTranslations?.result?.selected_services || 'Selected Services';
+        const complexityLabel = window.calculatorTranslations?.result?.complexity || 'Complexity';
+        const timelineLabel = window.calculatorTranslations?.result?.timeline || 'Timeline';
+        
+        summaryHTML += `<div class="mb-4"><strong>${servicesLabel}:</strong></div>`;
+        this.selectedServices.forEach(service => {
+            summaryHTML += `<div class="ml-4 mb-2 flex items-center">
+                <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                ${this.getServiceName(service.service)} 
+                <span class="ml-auto font-semibold">₩${service.price.toLocaleString()}</span>
+            </div>`;
+        });
+        
+        // Complexity
+        if (this.selectedComplexity) {
+            summaryHTML += `<div class="mt-4 mb-2 flex items-center">
+                <i class="fas fa-layer-group text-blue-500 mr-2"></i>
+                <strong>${complexityLabel}:</strong> 
+                <span class="ml-2">${this.getComplexityName(this.selectedComplexity.value)}</span>
+                <span class="ml-auto text-sm text-gray-500">×${this.selectedComplexity.multiplier}</span>
+            </div>`;
+        }
+        
+        // Timeline
+        if (this.selectedTimeline) {
+            summaryHTML += `<div class="mb-2 flex items-center">
+                <i class="fas fa-clock text-purple-500 mr-2"></i>
+                <strong>${timelineLabel}:</strong> 
+                <span class="ml-2">${this.getTimelineName(this.selectedTimeline.value)}</span>
+                <span class="ml-auto text-sm text-gray-500">×${this.selectedTimeline.multiplier}</span>
+            </div>`;
+        }
+        
+        // Animate summary appearance
+        summary.style.opacity = '0';
+        summary.innerHTML = summaryHTML;
+        
+        setTimeout(() => {
+            summary.style.opacity = '1';
+        }, 200);
+    }
+    
+    getServiceName(service) {
+        if (window.calculatorTranslations && window.calculatorTranslations.services) {
+            return window.calculatorTranslations.services[service] || service;
+        }
+        
+        const names = {
+            web: 'Web Development',
+            mobile: 'Mobile App',
+            design: 'UI/UX Design',
+            marketing: 'Digital Marketing'
+        };
+        return names[service] || service;
+    }
+    
+    getComplexityName(complexity) {
+        if (window.calculatorTranslations && window.calculatorTranslations.complexity) {
+            return window.calculatorTranslations.complexity[complexity] || complexity;
+        }
+        
+        const names = {
+            simple: 'Simple',
+            medium: 'Medium',
+            complex: 'Complex'
+        };
+        return names[complexity] || complexity;
+    }
+    
+    getTimelineName(timeline) {
+        if (window.calculatorTranslations && window.calculatorTranslations.timeline) {
+            return window.calculatorTranslations.timeline[timeline] || timeline;
+        }
+        
+        const names = {
+            standard: 'Standard',
+            rush: 'Rush',
+            extended: 'Extended'
+        };
+        return names[timeline] || timeline;
+    }
+    
+    restart() {
+        // Reset all selections
+        this.selectedServices = [];
+        this.selectedComplexity = null;
+        this.selectedTimeline = null;
+        this.currentStep = 1;
+        
+        // Reset UI
+        document.querySelectorAll('.service-option, .complexity-option, .timeline-option').forEach(opt => {
+            opt.classList.remove('selected');
+            this.animateSelection(opt, false);
+        });
+        
+        // Reset steps
+        document.querySelectorAll('.calculator-step').forEach(step => {
+            step.classList.remove('active');
+            step.style.display = 'none';
+            step.style.opacity = '1';
+            step.style.transform = 'translateX(0)';
+        });
+        
+        // Show first step
+        const firstStep = document.getElementById('step-1');
+        if (firstStep) {
+            firstStep.classList.add('active');
+            firstStep.style.display = 'block';
+        }
+        
+        this.updateProgressBar();
+        this.updateStepButton();
+    }
+}
+
+// Initialize calculator when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    // Theme initialization
+    const theme = localStorage.getItem('theme') || 'light';
+    document.documentElement.className = theme === 'dark' ? 'dark' : '';
+    
+    // Initialize calculator
+    if (document.querySelector('.calculator-step')) {
+        new ProjectCalculator();
+    }
+});

public/js/main.js

@@ -0,0 +1,544 @@
+// Main JavaScript for SmartSolTech Website
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize AOS (Animate On Scroll)
+    if (typeof AOS !== 'undefined') {
+        AOS.init({
+            duration: 800,
+            easing: 'ease-in-out',
+            once: true,
+            offset: 100
+        });
+    }
+    
+    // Mobile Navigation Toggle
+    const mobileMenuButton = document.querySelector('.mobile-menu-button');
+    const mobileMenu = document.querySelector('.mobile-menu');
+    
+    if (mobileMenuButton && mobileMenu) {
+        mobileMenuButton.addEventListener('click', function() {
+            mobileMenu.classList.toggle('show');
+            const isOpen = mobileMenu.classList.contains('show');
+            
+            // Toggle button icon
+            const icon = mobileMenuButton.querySelector('svg');
+            if (icon) {
+                icon.innerHTML = isOpen 
+                    ? '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />'
+                    : '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />';
+            }
+            
+            // Accessibility
+            mobileMenuButton.setAttribute('aria-expanded', isOpen);
+        });
+        
+        // Close mobile menu when clicking outside
+        document.addEventListener('click', function(e) {
+            if (!mobileMenuButton.contains(e.target) && !mobileMenu.contains(e.target)) {
+                mobileMenu.classList.remove('show');
+                mobileMenuButton.setAttribute('aria-expanded', 'false');
+            }
+        });
+    }
+    
+    // Navbar Scroll Effect
+    const navbar = document.querySelector('nav');
+    let lastScrollY = window.scrollY;
+    
+    window.addEventListener('scroll', function() {
+        const currentScrollY = window.scrollY;
+        
+        if (navbar) {
+            if (currentScrollY > 100) {
+                navbar.classList.add('navbar-scrolled');
+            } else {
+                navbar.classList.remove('navbar-scrolled');
+            }
+            
+            // Hide/show navbar on scroll
+            if (currentScrollY > lastScrollY && currentScrollY > 200) {
+                navbar.style.transform = 'translateY(-100%)';
+            } else {
+                navbar.style.transform = 'translateY(0)';
+            }
+        }
+        
+        lastScrollY = currentScrollY;
+    });
+    
+    // Smooth Scrolling for Anchor Links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            e.preventDefault();
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                const offsetTop = target.offsetTop - (navbar ? navbar.offsetHeight : 0);
+                window.scrollTo({
+                    top: offsetTop,
+                    behavior: 'smooth'
+                });
+            }
+        });
+    });
+    
+    // Contact Form Handler
+    const quickContactForm = document.getElementById('quick-contact-form');
+    if (quickContactForm) {
+        quickContactForm.addEventListener('submit', handleContactSubmit);
+    }
+    
+    const mainContactForm = document.getElementById('contact-form');
+    if (mainContactForm) {
+        mainContactForm.addEventListener('submit', handleContactSubmit);
+    }
+    
+    async function handleContactSubmit(e) {
+        e.preventDefault();
+        
+        const form = e.target;
+        const submitButton = form.querySelector('button[type="submit"]');
+        const originalText = submitButton.textContent;
+        
+        // Show loading state
+        submitButton.disabled = true;
+        submitButton.classList.add('btn-loading');
+        submitButton.textContent = '전송 중...';
+        
+        try {
+            const formData = new FormData(form);
+            const data = Object.fromEntries(formData.entries());
+            
+            const response = await fetch('/api/contact/submit', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(data)
+            });
+            
+            const result = await response.json();
+            
+            if (result.success) {
+                showNotification('메시지가 성공적으로 전송되었습니다! 곧 연락드리겠습니다.', 'success');
+                form.reset();
+            } else {
+                showNotification('메시지 전송 중 오류가 발생했습니다. 다시 시도해주세요.', 'error');
+            }
+        } catch (error) {
+            console.error('Contact form error:', error);
+            showNotification('메시지 전송 중 오류가 발생했습니다. 다시 시도해주세요.', 'error');
+        } finally {
+            // Reset button state
+            submitButton.disabled = false;
+            submitButton.classList.remove('btn-loading');
+            submitButton.textContent = originalText;
+        }
+    }
+    
+    // Notification System
+    function showNotification(message, type = 'info') {
+        const notification = document.createElement('div');
+        notification.className = `notification notification-${type}`;
+        notification.innerHTML = `
+            <div class="notification-content">
+                <span class="notification-message">${message}</span>
+                <button class="notification-close" aria-label="Close notification">
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                    </svg>
+                </button>
+            </div>
+        `;
+        
+        // Styles
+        notification.style.cssText = `
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            z-index: 9999;
+            max-width: 400px;
+            padding: 1rem;
+            border-radius: 0.5rem;
+            color: white;
+            font-weight: 500;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+            transform: translateX(100%);
+            transition: transform 0.3s ease;
+            ${type === 'success' ? 'background: #10b981;' : ''}
+            ${type === 'error' ? 'background: #ef4444;' : ''}
+            ${type === 'info' ? 'background: #3b82f6;' : ''}
+        `;
+        
+        document.body.appendChild(notification);
+        
+        // Animate in
+        setTimeout(() => {
+            notification.style.transform = 'translateX(0)';
+        }, 100);
+        
+        // Close button handler
+        const closeButton = notification.querySelector('.notification-close');
+        closeButton.addEventListener('click', () => {
+            closeNotification(notification);
+        });
+        
+        // Auto close after 5 seconds
+        setTimeout(() => {
+            closeNotification(notification);
+        }, 5000);
+    }
+    
+    function closeNotification(notification) {
+        notification.style.transform = 'translateX(100%)';
+        setTimeout(() => {
+            if (notification.parentNode) {
+                notification.parentNode.removeChild(notification);
+            }
+        }, 300);
+    }
+    
+    // Portfolio Filter (if on portfolio page)
+    const portfolioFilters = document.querySelectorAll('.portfolio-filter');
+    const portfolioItems = document.querySelectorAll('.portfolio-item');
+    
+    portfolioFilters.forEach(filter => {
+        filter.addEventListener('click', function() {
+            const category = this.dataset.category;
+            
+            // Update active filter
+            portfolioFilters.forEach(f => f.classList.remove('active'));
+            this.classList.add('active');
+            
+            // Filter items
+            portfolioItems.forEach(item => {
+                if (category === 'all' || item.dataset.category === category) {
+                    item.style.display = 'block';
+                    item.style.animation = 'fadeIn 0.5s ease';
+                } else {
+                    item.style.display = 'none';
+                }
+            });
+        });
+    });
+    
+    // Image Lazy Loading
+    const images = document.querySelectorAll('img[data-src]');
+    const imageObserver = new IntersectionObserver((entries, observer) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                const img = entry.target;
+                img.src = img.dataset.src;
+                img.classList.remove('lazy');
+                imageObserver.unobserve(img);
+            }
+        });
+    });
+    
+    images.forEach(img => imageObserver.observe(img));
+    
+    // Service Worker Registration for PWA
+    if ('serviceWorker' in navigator && 'PushManager' in window) {
+        navigator.serviceWorker.register('/sw.js')
+            .then(registration => {
+                console.log('Service Worker registered successfully:', registration);
+            })
+            .catch(error => {
+                console.log('Service Worker registration failed:', error);
+            });
+    }
+    
+    // Performance Monitoring
+    if ('performance' in window) {
+        window.addEventListener('load', () => {
+            setTimeout(() => {
+                const perfData = performance.getEntriesByType('navigation')[0];
+                const loadTime = perfData.loadEventEnd - perfData.loadEventStart;
+                
+                if (loadTime > 3000) {
+                    console.warn('Page load time is slow:', loadTime + 'ms');
+                }
+            }, 1000);
+        });
+    }
+    
+    // Cookie Consent (if needed)
+    function initCookieConsent() {
+        const consent = localStorage.getItem('cookieConsent');
+        if (!consent) {
+            showCookieConsent();
+        }
+    }
+    
+    function showCookieConsent() {
+        const banner = document.createElement('div');
+        banner.className = 'cookie-consent';
+        banner.innerHTML = `
+            <div class="cookie-content">
+                <p>이 웹사이트는 더 나은 서비스 제공을 위해 쿠키를 사용합니다.</p>
+                <div class="cookie-buttons">
+                    <button id="accept-cookies" class="btn btn-primary">동의</button>
+                    <button id="decline-cookies" class="btn btn-secondary">거부</button>
+                </div>
+            </div>
+        `;
+        
+        banner.style.cssText = `
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0, 0, 0, 0.9);
+            color: white;
+            padding: 1rem;
+            z-index: 9999;
+            transform: translateY(100%);
+            transition: transform 0.3s ease;
+        `;
+        
+        document.body.appendChild(banner);
+        
+        setTimeout(() => {
+            banner.style.transform = 'translateY(0)';
+        }, 100);
+        
+        document.getElementById('accept-cookies').addEventListener('click', () => {
+            localStorage.setItem('cookieConsent', 'accepted');
+            banner.style.transform = 'translateY(100%)';
+            setTimeout(() => banner.remove(), 300);
+        });
+        
+        document.getElementById('decline-cookies').addEventListener('click', () => {
+            localStorage.setItem('cookieConsent', 'declined');
+            banner.style.transform = 'translateY(100%)';
+            setTimeout(() => banner.remove(), 300);
+        });
+    }
+    
+    // Initialize cookie consent
+    // initCookieConsent();
+    
+    // Parallax Effect
+    const parallaxElements = document.querySelectorAll('.parallax');
+    
+    function updateParallax() {
+        const scrollY = window.pageYOffset;
+        
+        parallaxElements.forEach(element => {
+            const speed = element.dataset.speed || 0.5;
+            const yPos = -(scrollY * speed);
+            element.style.transform = `translateY(${yPos}px)`;
+        });
+    }
+    
+    if (parallaxElements.length > 0) {
+        window.addEventListener('scroll', updateParallax);
+    }
+    
+    // Counter Animation
+    const counters = document.querySelectorAll('.counter');
+    const counterObserver = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                animateCounter(entry.target);
+                counterObserver.unobserve(entry.target);
+            }
+        });
+    });
+    
+    counters.forEach(counter => counterObserver.observe(counter));
+    
+    function animateCounter(element) {
+        const target = parseInt(element.dataset.count);
+        const duration = 2000;
+        const start = performance.now();
+        
+        function updateCounter(currentTime) {
+            const elapsed = currentTime - start;
+            const progress = Math.min(elapsed / duration, 1);
+            
+            const current = Math.floor(progress * target);
+            element.textContent = current.toLocaleString();
+            
+            if (progress < 1) {
+                requestAnimationFrame(updateCounter);
+            }
+        }
+        
+        requestAnimationFrame(updateCounter);
+    }
+    
+    // Typing Effect for Hero Text
+    const typingElements = document.querySelectorAll('.typing-effect');
+    
+    typingElements.forEach(element => {
+        const text = element.textContent;
+        element.textContent = '';
+        element.style.borderRight = '2px solid';
+        
+        let i = 0;
+        const timer = setInterval(() => {
+            element.textContent += text[i];
+            i++;
+            
+            if (i >= text.length) {
+                clearInterval(timer);
+                element.style.borderRight = 'none';
+            }
+        }, 100);
+    });
+    
+    // Handle form validation
+    const forms = document.querySelectorAll('form[data-validate]');
+    forms.forEach(form => {
+        form.addEventListener('submit', function(e) {
+            if (!validateForm(this)) {
+                e.preventDefault();
+            }
+        });
+        
+        // Real-time validation
+        const inputs = form.querySelectorAll('input, textarea');
+        inputs.forEach(input => {
+            input.addEventListener('blur', () => validateField(input));
+            input.addEventListener('input', () => clearFieldError(input));
+        });
+    });
+    
+    function validateForm(form) {
+        let isValid = true;
+        const inputs = form.querySelectorAll('input[required], textarea[required]');
+        
+        inputs.forEach(input => {
+            if (!validateField(input)) {
+                isValid = false;
+            }
+        });
+        
+        return isValid;
+    }
+    
+    function validateField(field) {
+        const value = field.value.trim();
+        const type = field.type;
+        let isValid = true;
+        let message = '';
+        
+        // Required field check
+        if (field.hasAttribute('required') && !value) {
+            isValid = false;
+            message = '이 필드는 필수입니다.';
+        }
+        
+        // Email validation
+        if (type === 'email' && value) {
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            if (!emailRegex.test(value)) {
+                isValid = false;
+                message = '올바른 이메일 형식을 입력해주세요.';
+            }
+        }
+        
+        // Phone validation
+        if (type === 'tel' && value) {
+            const phoneRegex = /^[0-9-+\s()]+$/;
+            if (!phoneRegex.test(value)) {
+                isValid = false;
+                message = '올바른 전화번호 형식을 입력해주세요.';
+            }
+        }
+        
+        // Show/hide error
+        if (!isValid) {
+            showFieldError(field, message);
+        } else {
+            clearFieldError(field);
+        }
+        
+        return isValid;
+    }
+    
+    function showFieldError(field, message) {
+        clearFieldError(field);
+        
+        field.classList.add('error');
+        const errorDiv = document.createElement('div');
+        errorDiv.className = 'field-error';
+        errorDiv.textContent = message;
+        errorDiv.style.cssText = 'color: #ef4444; font-size: 0.875rem; margin-top: 0.25rem;';
+        
+        field.parentNode.appendChild(errorDiv);
+    }
+    
+    function clearFieldError(field) {
+        field.classList.remove('error');
+        const errorDiv = field.parentNode.querySelector('.field-error');
+        if (errorDiv) {
+            errorDiv.remove();
+        }
+    }
+});
+
+// Utility Functions
+const utils = {
+    // Debounce function
+    debounce: function(func, wait) {
+        let timeout;
+        return function executedFunction(...args) {
+            const later = () => {
+                clearTimeout(timeout);
+                func(...args);
+            };
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+        };
+    },
+    
+    // Throttle function
+    throttle: function(func, limit) {
+        let inThrottle;
+        return function() {
+            const args = arguments;
+            const context = this;
+            if (!inThrottle) {
+                func.apply(context, args);
+                inThrottle = true;
+                setTimeout(() => inThrottle = false, limit);
+            }
+        };
+    },
+    
+    // Format currency
+    formatCurrency: function(amount, currency = 'KRW') {
+        return new Intl.NumberFormat('ko-KR', {
+            style: 'currency',
+            currency: currency,
+            minimumFractionDigits: 0
+        }).format(amount);
+    },
+    
+    // Format date
+    formatDate: function(date, options = {}) {
+        const defaultOptions = { 
+            year: 'numeric', 
+            month: 'long', 
+            day: 'numeric' 
+        };
+        return new Intl.DateTimeFormat('ko-KR', { ...defaultOptions, ...options }).format(new Date(date));
+    }
+};
+
+// Global error handler
+window.addEventListener('error', function(e) {
+    console.error('Global error:', e.error);
+    // Could send error to analytics service
+});
+
+// Unhandled promise rejection handler
+window.addEventListener('unhandledrejection', function(e) {
+    console.error('Unhandled promise rejection:', e.reason);
+    // Could send error to analytics service
+});
+
+// Export for use in other modules
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = utils;
+}