first commit 2
This commit is contained in:
hmw1001
@@ -0,0 +1,540 @@
|
||||
/* 설문 목록 모듈 스타일 */
|
||||
.survey-list-module {
|
||||
--survey-primary: #AA20FF;
|
||||
--survey-primary-light: rgba(170, 32, 255, 0.1);
|
||||
--survey-primary-dark: #8A1ACC;
|
||||
}
|
||||
|
||||
.survey-section {
|
||||
padding: 80px 0;
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.survey-section .section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.survey-section .section-header .subtitle {
|
||||
color: var(--survey-primary);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.survey-section .section-header h2 {
|
||||
font-size: 2.5em;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.survey-section .section-header p {
|
||||
font-size: 1.1em;
|
||||
color: #666;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.survey-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 30px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.survey-card {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
transition: all 0.4s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.survey-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--survey-primary) 0%, var(--survey-primary-dark) 100%);
|
||||
transform: scaleX(0);
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
.survey-card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
|
||||
border-color: var(--survey-primary-light);
|
||||
}
|
||||
|
||||
.survey-card:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.survey-card-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.survey-title {
|
||||
font-size: 1.4em;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.survey-description {
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 20px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.survey-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
font-size: 0.9em;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.survey-stats {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.9em;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.stat-item i {
|
||||
color: var(--survey-primary);
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.survey-progress {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: #e0e0e0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--survey-primary) 0%, var(--survey-primary-dark) 100%);
|
||||
border-radius: 4px;
|
||||
transition: width 0.6s ease;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 0.8em;
|
||||
color: #666;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.survey-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-participate {
|
||||
flex: 1;
|
||||
padding: 12px 20px;
|
||||
background: var(--survey-primary);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-participate:hover {
|
||||
background: var(--survey-primary-dark);
|
||||
transform: translateY(-2px);
|
||||
color: white;
|
||||
box-shadow: 0 5px 15px rgba(170, 32, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-share {
|
||||
padding: 12px;
|
||||
background: #f8f9fa;
|
||||
color: #666;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-share:hover {
|
||||
background: #e9ecef;
|
||||
color: #333;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.section-footer {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.btn-more {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 15px 30px;
|
||||
background: var(--survey-primary);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 50px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 5px 15px rgba(170, 32, 255, 0.2);
|
||||
}
|
||||
|
||||
.btn-more:hover {
|
||||
background: var(--survey-primary-dark);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(170, 32, 255, 0.3);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-more i {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-more:hover i {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
font-size: 4em;
|
||||
color: #ddd;
|
||||
margin-bottom: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.empty-state h3 {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
font-size: 1em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 모달 스타일 */
|
||||
.survey-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1050;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.survey-modal.show {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 90%;
|
||||
max-width: 600px;
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||||
animation: slideUp 0.4s ease-out;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 25px;
|
||||
font-size: 2rem;
|
||||
color: #aaa;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
z-index: 1;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 30px 30px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.5em;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0 0 10px 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.modal-meta {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
font-size: 0.9em;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.modal-description {
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.modal-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.modal-stats .stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.modal-stats .stat-item i {
|
||||
font-size: 1.5em;
|
||||
color: var(--survey-primary);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.9em;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.2em;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.progress-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 20px 30px 30px;
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
padding: 12px 24px;
|
||||
background: #f8f9fa;
|
||||
color: #666;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
background: #e9ecef;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.modal-footer .btn-participate {
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
/* 반응형 */
|
||||
@media (max-width: 768px) {
|
||||
.survey-section {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.survey-section .section-header h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.survey-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.survey-card {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.survey-stats {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.survey-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 95%;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.modal-header,
|
||||
.modal-body,
|
||||
.modal-footer {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal-stats {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-footer .btn-participate,
|
||||
.btn-cancel {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* 애니메이션 */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -40%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.survey-card {
|
||||
animation: fadeInUp 0.6s ease forwards;
|
||||
}
|
||||
|
||||
.survey-card:nth-child(even) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.survey-card:nth-child(odd) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 호버 효과 강화 */
|
||||
.survey-card:hover .survey-title {
|
||||
color: var(--survey-primary);
|
||||
}
|
||||
|
||||
.survey-card:hover .stat-item i {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.survey-card:hover .progress-fill {
|
||||
box-shadow: 0 0 10px rgba(170, 32, 255, 0.3);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
|
||||
// 설문 관리 라이브러리 로드
|
||||
include_once(G5_ADMIN_PATH.'/survey_manage/lib/survey.lib.php');
|
||||
|
||||
// 설문 데이터 가져오기
|
||||
$limit = 6; // 표시할 설문 수
|
||||
$where = " WHERE sv_status = 'active' ";
|
||||
$where .= " AND DATE(sv_start_date) <= CURDATE() ";
|
||||
$where .= " AND DATE(sv_end_date) >= CURDATE() ";
|
||||
|
||||
$sql = " SELECT * FROM survey_master $where ORDER BY sv_created_at DESC LIMIT $limit ";
|
||||
$result = sql_query($sql);
|
||||
|
||||
$survey_data = array();
|
||||
while ($row = sql_fetch_array($result)) {
|
||||
$questions_count = sql_fetch("SELECT COUNT(*) as cnt FROM survey_questions WHERE sv_id = '{$row['sv_id']}'")['cnt'];
|
||||
$response_count = get_survey_response_count($row['sv_id'], 'completed');
|
||||
$max_responses = $row['sv_max_responses'];
|
||||
$progress = $max_responses ? ($response_count / $max_responses) * 100 : 0;
|
||||
$days_left = ceil((strtotime($row['sv_end_date']) - time()) / (60 * 60 * 24));
|
||||
|
||||
$survey_data[] = array(
|
||||
'id' => $row['sv_id'],
|
||||
'title' => get_text($row['sv_title']),
|
||||
'description' => get_text(cut_str(strip_tags($row['sv_description']), 100)),
|
||||
'questions_count' => $questions_count,
|
||||
'response_count' => $response_count,
|
||||
'max_responses' => $max_responses,
|
||||
'progress' => min($progress, 100),
|
||||
'days_left' => $days_left,
|
||||
'theme_color' => $row['sv_theme_color'] ?: '#AA20FF',
|
||||
'created_by' => $row['sv_created_by']
|
||||
);
|
||||
}
|
||||
|
||||
$survey_json = json_encode($survey_data, JSON_UNESCAPED_UNICODE);
|
||||
|
||||
// CSS와 JS 파일의 버전을 파일 수정 시간으로 자동 갱신
|
||||
$module_css_path = G5_THEME_PATH.'/rb.custom/survey_list/module.css';
|
||||
$module_js_path = G5_THEME_PATH.'/rb.custom/survey_list/module.js';
|
||||
$module_css_ver = file_exists($module_css_path) ? filemtime($module_css_path) : G5_CSS_VER;
|
||||
$module_js_ver = file_exists($module_js_path) ? filemtime($module_js_path) : G5_JS_VER;
|
||||
|
||||
// 이 모듈만의 고유 ID를 생성합니다.
|
||||
$module_id = 'survey_list_module_'.uniqid();
|
||||
?>
|
||||
|
||||
<!-- 모듈의 가장 바깥 요소에 고유 ID를 부여합니다. -->
|
||||
<div id="<?php echo $module_id; ?>" class="survey-list-module">
|
||||
<section class="survey-section" data-surveys='<?php echo htmlspecialchars($survey_json, ENT_QUOTES, 'UTF-8'); ?>'>
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="subtitle">Survey</span>
|
||||
<h2>설문조사</h2>
|
||||
<p>다양한 설문에 참여하고 소중한 의견을 나눠주세요</p>
|
||||
</div>
|
||||
|
||||
<?php if (!empty($survey_data)): ?>
|
||||
<div class="survey-grid">
|
||||
<!-- JS로 설문 카드가 생성될 영역 -->
|
||||
</div>
|
||||
|
||||
<div class="section-footer">
|
||||
<a href="<?php echo G5_THEME_URL; ?>/rb.custom/survey_list/survey_list_page.php" class="btn-more">
|
||||
<span>모든 설문 보기</span>
|
||||
<i class="fa fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="empty-state">
|
||||
<i class="fa fa-poll"></i>
|
||||
<h3>진행중인 설문이 없습니다</h3>
|
||||
<p>새로운 설문이 등록되면 알려드리겠습니다.</p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 설문 상세 모달 -->
|
||||
<div class="survey-modal">
|
||||
<div class="modal-overlay"></div>
|
||||
<div class="modal-content">
|
||||
<button type="button" class="modal-close">×</button>
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title"></h3>
|
||||
<div class="modal-meta">
|
||||
<span class="modal-author"></span>
|
||||
<span class="modal-deadline"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p class="modal-description"></p>
|
||||
<div class="modal-stats">
|
||||
<div class="stat-item">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
<span class="stat-label">질문 수</span>
|
||||
<span class="stat-value questions-count"></span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<i class="fa fa-users"></i>
|
||||
<span class="stat-label">참여자</span>
|
||||
<span class="stat-value participants-count"></span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<i class="fa fa-clock"></i>
|
||||
<span class="stat-label">예상 시간</span>
|
||||
<span class="stat-value estimated-time"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-section">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill"></div>
|
||||
</div>
|
||||
<div class="progress-text"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn-cancel">취소</button>
|
||||
<a href="#" class="btn-participate">참여하기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 이 모듈에 필요한 CSS 파일을 불러옵니다. -->
|
||||
<link rel="stylesheet" href="<?php echo G5_THEME_URL; ?>/rb.custom/survey_list/module.css?ver=<?php echo $module_css_ver; ?>">
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const currentModuleId = '<?php echo $module_id; ?>';
|
||||
const initFunctionName = 'initSurveyListModule';
|
||||
const scriptId = 'survey-list-module-script';
|
||||
|
||||
if (document.getElementById(scriptId)) {
|
||||
if (typeof window[initFunctionName] === 'function') {
|
||||
window[initFunctionName](currentModuleId);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const script = document.createElement('script');
|
||||
script.id = scriptId;
|
||||
script.src = '<?php echo G5_THEME_URL; ?>/rb.custom/survey_list/module.js?ver=<?php echo $module_js_ver; ?>';
|
||||
script.async = true;
|
||||
|
||||
script.onload = () => {
|
||||
if (typeof window[initFunctionName] === 'function') {
|
||||
window[initFunctionName](currentModuleId);
|
||||
}
|
||||
};
|
||||
document.head.appendChild(script);
|
||||
})();
|
||||
</script>
|
||||
@@ -0,0 +1,199 @@
|
||||
<?php
|
||||
include_once('../../../../common.php');
|
||||
|
||||
$g5['title'] = '설문조사';
|
||||
include_once(G5_THEME_PATH.'/head.sub.php');
|
||||
?>
|
||||
|
||||
<style>
|
||||
/* 페이지 전용 스타일 */
|
||||
body {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
padding-top: 100px; /* 헤더 높이만큼 */
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, #AA20FF 0%, #8A1ACC 100%);
|
||||
color: white;
|
||||
padding: 80px 0;
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 3em;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
font-size: 1.2em;
|
||||
opacity: 0.9;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
background: white;
|
||||
padding: 40px 0;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
padding: 15px 20px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 50px;
|
||||
font-size: 1em;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: #AA20FF;
|
||||
box-shadow: 0 0 0 3px rgba(170, 32, 255, 0.1);
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
padding: 15px 30px;
|
||||
background: #AA20FF;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-btn:hover {
|
||||
background: #8A1ACC;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(170, 32, 255, 0.3);
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.filter-tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
padding: 10px 20px;
|
||||
background: white;
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
border-radius: 25px;
|
||||
border: 2px solid #e0e0e0;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.filter-tab:hover,
|
||||
.filter-tab.active {
|
||||
background: #AA20FF;
|
||||
color: white;
|
||||
border-color: #AA20FF;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.surveys-section {
|
||||
padding: 0 0 80px 0;
|
||||
}
|
||||
|
||||
/* 반응형 */
|
||||
@media (max-width: 768px) {
|
||||
.page-container {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 2.2em;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
flex-direction: column;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-tabs {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="page-container">
|
||||
<!-- 페이지 헤더 -->
|
||||
<div class="page-header">
|
||||
<div class="container">
|
||||
<h1><i class="fa fa-poll"></i> 설문조사</h1>
|
||||
<p>다양한 설문에 참여하고 소중한 의견을 나눠주세요</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 검색 섹션 -->
|
||||
<div class="search-section">
|
||||
<div class="container">
|
||||
<form method="get" class="search-form">
|
||||
<input type="text"
|
||||
name="stx"
|
||||
value="<?php echo htmlspecialchars($_GET['stx'] ?? ''); ?>"
|
||||
placeholder="관심있는 설문을 검색해보세요..."
|
||||
class="search-input">
|
||||
<button type="submit" class="search-btn">
|
||||
<i class="fa fa-search"></i> 검색
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 필터 섹션 -->
|
||||
<div class="filter-section">
|
||||
<div class="container">
|
||||
<div class="filter-tabs">
|
||||
<a href="?" class="filter-tab <?php echo !isset($_GET['category']) ? 'active' : ''; ?>">전체</a>
|
||||
<a href="?category=customer" class="filter-tab <?php echo ($_GET['category'] ?? '') == 'customer' ? 'active' : ''; ?>">고객서비스</a>
|
||||
<a href="?category=product" class="filter-tab <?php echo ($_GET['category'] ?? '') == 'product' ? 'active' : ''; ?>">제품개발</a>
|
||||
<a href="?category=marketing" class="filter-tab <?php echo ($_GET['category'] ?? '') == 'marketing' ? 'active' : ''; ?>">마케팅</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 설문 목록 섹션 (rb.custom 모듈 사용) -->
|
||||
<div class="surveys-section">
|
||||
<?php
|
||||
// 전체 설문 목록을 위한 커스텀 모듈 (확장된 버전)
|
||||
include_once(G5_THEME_PATH.'/rb.custom/survey_list/module.php');
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
include_once(G5_THEME_PATH.'/tail.sub.php');
|
||||
?>
|
||||
Reference in New Issue
Block a user