mingle-website/js/services.js

// ========================================
// Services 페이지 전용 JavaScript
// ========================================

document.addEventListener('DOMContentLoaded', function() {
    initEmailForm();
    initServiceAnimations();
});

// 이메일 폼 토글 기능
function initEmailForm() {
    const showEmailBtn = document.getElementById('showEmailForm');
    const emailForm = document.getElementById('emailForm');
    
    if (showEmailBtn && emailForm) {
        showEmailBtn.addEventListener('click', function() {
            if (emailForm.style.display === 'none' || !emailForm.style.display) {
                emailForm.style.display = 'block';
                showEmailBtn.textContent = '📧 이메일 양식 닫기';
                emailForm.scrollIntoView({ behavior: 'smooth', block: 'center' });
            } else {
                emailForm.style.display = 'none';
                showEmailBtn.innerHTML = '<span>📧</span> 이메일 문의하기';
            }
        });
    }
}

// 서비스 페이지 애니메이션
function initServiceAnimations() {
    // 프로세스 스텝 애니메이션
    const processSteps = document.querySelectorAll('.process-step');
    const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry, index) => {
            if (entry.isIntersecting) {
                setTimeout(() => {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }, index * 200);
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.3 });
    
    processSteps.forEach(step => {
        step.style.opacity = '0';
        step.style.transform = 'translateY(30px)';
        step.style.transition = 'all 0.6s ease';
        observer.observe(step);
    });
    
    // 장비 카드 애니메이션
    const equipmentCards = document.querySelectorAll('.equipment-card');
    equipmentCards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(30px)';
        card.style.transition = 'all 0.6s ease';
        
        setTimeout(() => {
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
        }, 100 * (index + 1));
    });
}

// 테이블 행 하이라이트
document.querySelectorAll('.services-table tbody tr').forEach(row => {
    row.addEventListener('mouseenter', function() {
        this.style.backgroundColor = 'rgba(255, 136, 0, 0.05)';
    });
    
    row.addEventListener('mouseleave', function() {
        if (!this.classList.contains('main-service')) {
            this.style.backgroundColor = '';
        }
    });
});

// ========================================
// 포트폴리오 팝업 기능
// ========================================

// 포트폴리오 팝업 열기
function openPortfolioPopup() {
    const popup = document.getElementById('portfolioPopup');
    if (popup) {
        popup.classList.add('active');
        document.body.style.overflow = 'hidden'; // 배경 스크롤 방지
        
        // ESC 키로 닫기
        document.addEventListener('keydown', handleEscapeKey);
        
        // 애니메이션 효과
        setTimeout(() => {
            popup.style.opacity = '1';
        }, 10);
    }
}

// 포트폴리오 팝업 닫기
function closePortfolioPopup() {
    const popup = document.getElementById('portfolioPopup');
    if (popup) {
        // 팝업 내 모든 iframe 정지
        const iframes = popup.querySelectorAll('iframe');
        iframes.forEach(iframe => {
            const src = iframe.src;
            iframe.src = '';
            setTimeout(() => {
                iframe.src = src;
            }, 100);
        });
        
        popup.style.opacity = '0';
        
        setTimeout(() => {
            popup.classList.remove('active');
            document.body.style.overflow = ''; // 스크롤 복원
        }, 300);
        
        // ESC 키 이벤트 제거
        document.removeEventListener('keydown', handleEscapeKey);
    }
}

// ESC 키 처리
function handleEscapeKey(event) {
    if (event.key === 'Escape') {
        closePortfolioPopup();
    }
}

// ========================================
// 스트리밍 포트폴리오 팝업 기능
// ========================================

// 스트리밍 포트폴리오 팝업 열기
function openStreamingPortfolioPopup() {
    const popup = document.getElementById('streamingPortfolioPopup');
    if (popup) {
        popup.classList.add('active');
        document.body.style.overflow = 'hidden';
        
        document.addEventListener('keydown', handleStreamingEscapeKey);
        
        setTimeout(() => {
            popup.style.opacity = '1';
        }, 10);
    }
}

// 스트리밍 포트폴리오 팝업 닫기
function closeStreamingPortfolioPopup() {
    const popup = document.getElementById('streamingPortfolioPopup');
    if (popup) {
        // 팝업 내 모든 iframe 정지
        const iframes = popup.querySelectorAll('iframe');
        iframes.forEach(iframe => {
            const src = iframe.src;
            iframe.src = '';
            setTimeout(() => {
                iframe.src = src;
            }, 100);
        });
        
        popup.style.opacity = '0';
        
        setTimeout(() => {
            popup.classList.remove('active');
            document.body.style.overflow = '';
        }, 300);
        
        document.removeEventListener('keydown', handleStreamingEscapeKey);
    }
}

// 스트리밍 팝업 ESC 키 처리
function handleStreamingEscapeKey(event) {
    if (event.key === 'Escape') {
        closeStreamingPortfolioPopup();
    }
}

// 팝업 초기화
document.addEventListener('DOMContentLoaded', function() {
    // 뮤비/숏폼 팝업 초기화
    const popup = document.getElementById('portfolioPopup');
    if (popup) {
        popup.style.opacity = '0';
        popup.style.transition = 'opacity 0.3s ease';
        
        const overlay = popup.querySelector('.popup-overlay');
        if (overlay) {
            overlay.addEventListener('click', closePortfolioPopup);
        }
        
        const content = popup.querySelector('.popup-content');
        if (content) {
            content.addEventListener('click', function(event) {
                event.stopPropagation();
            });
        }
    }
    
    // 스트리밍 팝업 초기화
    const streamingPopup = document.getElementById('streamingPortfolioPopup');
    if (streamingPopup) {
        streamingPopup.style.opacity = '0';
        streamingPopup.style.transition = 'opacity 0.3s ease';
        
        const streamingOverlay = streamingPopup.querySelector('.popup-overlay');
        if (streamingOverlay) {
            streamingOverlay.addEventListener('click', closeStreamingPortfolioPopup);
        }
        
        const streamingContent = streamingPopup.querySelector('.popup-content');
        if (streamingContent) {
            streamingContent.addEventListener('click', function(event) {
                event.stopPropagation();
            });
        }
    }
});