first commit 2

theme/rd.dnssash/rb.custom/survey_list/module.js

@@ -0,0 +1,333 @@
+function initSurveyListModule(moduleId) {
+    const moduleElement = document.getElementById(moduleId);
+    if (!moduleElement || moduleElement.classList.contains('initialized')) return;
+
+    const surveySection = moduleElement.querySelector('.survey-section');
+    const surveyGrid = moduleElement.querySelector('.survey-grid');
+    const modal = moduleElement.querySelector('.survey-modal');
+    const modalOverlay = modal.querySelector('.modal-overlay');
+    const modalClose = modal.querySelector('.modal-close');
+    const modalTitle = modal.querySelector('.modal-title');
+    const modalAuthor = modal.querySelector('.modal-author');
+    const modalDeadline = modal.querySelector('.modal-deadline');
+    const modalDescription = modal.querySelector('.modal-description');
+    const questionsCount = modal.querySelector('.questions-count');
+    const participantsCount = modal.querySelector('.participants-count');
+    const estimatedTime = modal.querySelector('.estimated-time');
+    const progressFill = modal.querySelector('.progress-fill');
+    const progressText = modal.querySelector('.progress-text');
+    const btnParticipate = modal.querySelector('.modal-footer .btn-participate');
+    const btnCancel = modal.querySelector('.btn-cancel');
+
+    // 설문 데이터 가져오기
+    const surveysData = JSON.parse(surveySection.dataset.surveys || '[]');
+
+    // 설문 카드 렌더링
+    function renderSurveyCards() {
+        if (!surveysData.length) return;
+
+        const cardsHTML = surveysData.map(survey => `
+            <div class="survey-card" data-survey-id="${survey.id}" style="--theme-color: ${survey.theme_color}">
+                <div class="survey-card-header">
+                    <h3 class="survey-title">${survey.title}</h3>
+                    ${survey.description ? `<p class="survey-description">${survey.description}</p>` : ''}
+                </div>
+                
+                <div class="survey-meta">
+                    <span><i class="fa fa-calendar"></i> ${survey.days_left}일 남음</span>
+                    <span><i class="fa fa-user"></i> ${survey.created_by}</span>
+                </div>
+                
+                <div class="survey-stats">
+                    <div class="stat-item">
+                        <i class="fa fa-question-circle"></i>
+                        <span>${survey.questions_count}개 질문</span>
+                    </div>
+                    <div class="stat-item">
+                        <i class="fa fa-users"></i>
+                        <span>${formatNumber(survey.response_count)}명 참여</span>
+                    </div>
+                    <div class="stat-item">
+                        <i class="fa fa-clock"></i>
+                        <span>약 ${survey.questions_count}분</span>
+                    </div>
+                </div>
+                
+                ${survey.max_responses ? `
+                <div class="survey-progress">
+                    <div class="progress-bar">
+                        <div class="progress-fill" style="width: ${survey.progress}%"></div>
+                    </div>
+                    <div class="progress-text">
+                        ${formatNumber(survey.response_count)} / ${formatNumber(survey.max_responses)}명
+                    </div>
+                </div>
+                ` : ''}
+                
+                <div class="survey-actions">
+                    <button class="btn-participate" data-survey-id="${survey.id}">
+                        <i class="fa fa-play"></i> 참여하기
+                    </button>
+                    <button class="btn-share" data-survey-id="${survey.id}" data-title="${survey.title}">
+                        <i class="fa fa-share"></i>
+                    </button>
+                </div>
+            </div>
+        `).join('');
+
+        surveyGrid.innerHTML = cardsHTML;
+    }
+
+    // 모달 열기
+    function openModal(surveyId) {
+        const survey = surveysData.find(s => s.id == surveyId);
+        if (!survey) return;
+
+        // 모달 내용 업데이트
+        modalTitle.textContent = survey.title;
+        modalAuthor.textContent = survey.created_by;
+        modalDeadline.textContent = `${survey.days_left}일 남음`;
+        modalDescription.textContent = survey.description || '설문에 대한 설명이 없습니다.';
+        questionsCount.textContent = `${survey.questions_count}개`;
+        participantsCount.textContent = `${formatNumber(survey.response_count)}명`;
+        estimatedTime.textContent = `${survey.questions_count}분`;
+
+        // 진행률 업데이트
+        if (survey.max_responses) {
+            progressFill.style.width = `${survey.progress}%`;
+            progressText.textContent = `${formatNumber(survey.response_count)} / ${formatNumber(survey.max_responses)}명 참여`;
+            modal.querySelector('.progress-section').style.display = 'block';
+        } else {
+            modal.querySelector('.progress-section').style.display = 'none';
+        }
+
+        // 참여하기 버튼 링크 설정
+        btnParticipate.href = `${window.location.origin}/theme/rd.lwd/survey_page.php?sv_id=${survey.id}`;
+
+        // 모달 표시
+        modal.classList.add('show');
+        document.body.style.overflow = 'hidden';
+    }
+
+    // 모달 닫기
+    function closeModal() {
+        modal.classList.remove('show');
+        document.body.style.overflow = '';
+    }
+
+    // 설문 공유
+    function shareSurvey(surveyId, title) {
+        const url = `${window.location.origin}/theme/rd.lwd/rb.custom/survey_form/survey_page.php?sv_id=${surveyId}`;
+        
+        if (navigator.share) {
+            // Web Share API 지원시
+            navigator.share({
+                title: title,
+                text: '설문에 참여해보세요!',
+                url: url
+            }).catch(err => {
+                console.log('공유 취소:', err);
+            });
+        } else {
+            // 클립보드에 복사
+            if (navigator.clipboard) {
+                navigator.clipboard.writeText(url).then(() => {
+                    showNotification('설문 링크가 클립보드에 복사되었습니다!', 'success');
+                }).catch(() => {
+                    // 클립보드 복사 실패시 프롬프트로 표시
+                    prompt('설문 링크를 복사하세요:', url);
+                });
+            } else {
+                // 클립보드 API 미지원시 프롬프트로 표시
+                prompt('설문 링크를 복사하세요:', url);
+            }
+        }
+    }
+
+    // 알림 표시
+    function showNotification(message, type = 'info') {
+        const notification = document.createElement('div');
+        notification.className = `survey-notification survey-notification-${type}`;
+        notification.innerHTML = `
+            <div class="notification-content">
+                <i class="fa fa-${type === 'success' ? 'check-circle' : 'info-circle'}"></i>
+                <span>${message}</span>
+            </div>
+        `;
+        
+        // 스타일 추가
+        notification.style.cssText = `
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: ${type === 'success' ? '#28a745' : '#17a2b8'};
+            color: white;
+            padding: 15px 20px;
+            border-radius: 8px;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+            z-index: 1060;
+            animation: slideInRight 0.3s ease;
+        `;
+        
+        document.body.appendChild(notification);
+        
+        setTimeout(() => {
+            notification.style.animation = 'slideOutRight 0.3s ease';
+            setTimeout(() => {
+                notification.remove();
+            }, 300);
+        }, 3000);
+    }
+
+    // 숫자 포맷팅
+    function formatNumber(num) {
+        return new Intl.NumberFormat('ko-KR').format(num);
+    }
+
+    // 이벤트 리스너 등록
+    function bindEvents() {
+        // 설문 카드 클릭 (모달 열기)
+        surveyGrid.addEventListener('click', (e) => {
+            const card = e.target.closest('.survey-card');
+            if (card && !e.target.closest('.survey-actions')) {
+                const surveyId = card.dataset.surveyId;
+                openModal(surveyId);
+            }
+        });
+
+        // 참여하기 버튼 클릭
+        surveyGrid.addEventListener('click', (e) => {
+            if (e.target.closest('.btn-participate')) {
+                e.stopPropagation();
+                const surveyId = e.target.closest('.btn-participate').dataset.surveyId;
+                window.location.href = `${window.location.origin}/theme/rd.lwd/rb.custom/survey_form/survey_page.php?sv_id=${surveyId}`;
+            }
+        });
+
+        // 공유 버튼 클릭
+        surveyGrid.addEventListener('click', (e) => {
+            if (e.target.closest('.btn-share')) {
+                e.stopPropagation();
+                const shareBtn = e.target.closest('.btn-share');
+                const surveyId = shareBtn.dataset.surveyId;
+                const title = shareBtn.dataset.title;
+                shareSurvey(surveyId, title);
+            }
+        });
+
+        // 모달 닫기 이벤트
+        modalClose.addEventListener('click', closeModal);
+        btnCancel.addEventListener('click', closeModal);
+        modalOverlay.addEventListener('click', closeModal);
+
+        // ESC 키로 모달 닫기
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && modal.classList.contains('show')) {
+                closeModal();
+            }
+        });
+
+        // 카드 호버 효과
+        surveyGrid.addEventListener('mouseenter', (e) => {
+            const card = e.target.closest('.survey-card');
+            if (card) {
+                const themeColor = card.style.getPropertyValue('--theme-color') || '#AA20FF';
+                card.style.setProperty('--survey-primary', themeColor);
+            }
+        }, true);
+    }
+
+    // 스크롤 애니메이션
+    function initScrollAnimation() {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.style.animationPlayState = 'running';
+                }
+            });
+        }, {
+            threshold: 0.1,
+            rootMargin: '0px 0px -50px 0px'
+        });
+
+        // 카드들에 애니메이션 적용
+        setTimeout(() => {
+            const cards = surveyGrid.querySelectorAll('.survey-card');
+            cards.forEach((card, index) => {
+                card.style.animationDelay = `${index * 0.1}s`;
+                card.style.animationPlayState = 'paused';
+                observer.observe(card);
+            });
+        }, 100);
+    }
+
+    // 진행률 바 애니메이션
+    function animateProgressBars() {
+        const progressBars = surveyGrid.querySelectorAll('.progress-fill');
+        progressBars.forEach(bar => {
+            const width = bar.style.width;
+            bar.style.width = '0%';
+            setTimeout(() => {
+                bar.style.width = width;
+            }, 500);
+        });
+    }
+
+    // 초기화
+    function init() {
+        renderSurveyCards();
+        bindEvents();
+        initScrollAnimation();
+        
+        // 진행률 바 애니메이션 (약간의 지연 후)
+        setTimeout(animateProgressBars, 800);
+        
+        moduleElement.classList.add('initialized');
+    }
+
+    // 모듈 초기화 실행
+    init();
+}
+
+// 추가 CSS 애니메이션 (JavaScript로 동적 추가)
+const additionalStyles = `
+    @keyframes slideInRight {
+        from {
+            transform: translateX(100%);
+            opacity: 0;
+        }
+        to {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+    
+    @keyframes slideOutRight {
+        from {
+            transform: translateX(0);
+            opacity: 1;
+        }
+        to {
+            transform: translateX(100%);
+            opacity: 0;
+        }
+    }
+    
+    .survey-notification .notification-content {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+    
+    .survey-notification i {
+        font-size: 1.2em;
+    }
+`;
+
+// 스타일 추가 (한 번만)
+if (!document.getElementById('survey-list-module-styles')) {
+    const styleSheet = document.createElement('style');
+    styleSheet.id = 'survey-list-module-styles';
+    styleSheet.textContent = additionalStyles;
+    document.head.appendChild(styleSheet);
+}