hmw1001
507 lines
19 KiB
JavaScript
507 lines
19 KiB
JavaScript
function initSurveyFormModule(moduleId) {
|
|
const moduleElement = document.getElementById(moduleId);
|
|
if (!moduleElement || moduleElement.classList.contains('initialized')) return;
|
|
|
|
// 설문 데이터 가져오기
|
|
const surveyData = JSON.parse(moduleElement.dataset.survey || '{}');
|
|
const { survey, questions, theme_color } = surveyData;
|
|
|
|
// DOM 요소들
|
|
const questionsContainer = moduleElement.querySelector('#questionsContainer');
|
|
const progressFill = moduleElement.querySelector('#progressFill');
|
|
const progressText = moduleElement.querySelector('#progressText');
|
|
const currentQuestionSpan = moduleElement.querySelector('#currentQuestion');
|
|
const submitBtn = moduleElement.querySelector('#submitBtn');
|
|
const surveyForm = moduleElement.querySelector('#surveyForm');
|
|
const confirmModal = moduleElement.querySelector('.confirm-modal');
|
|
const modalOverlay = confirmModal.querySelector('.modal-overlay');
|
|
const modalClose = confirmModal.querySelector('.modal-close');
|
|
const btnCancel = confirmModal.querySelector('.btn-cancel');
|
|
const btnConfirm = confirmModal.querySelector('.btn-confirm');
|
|
|
|
// CSS 변수 설정
|
|
if (theme_color) {
|
|
moduleElement.style.setProperty('--survey-primary', theme_color);
|
|
moduleElement.style.setProperty('--survey-primary-light', theme_color + '20');
|
|
moduleElement.style.setProperty('--survey-primary-dark', theme_color + 'CC');
|
|
}
|
|
|
|
// 질문 렌더링
|
|
function renderQuestions() {
|
|
if (!questions || !questions.length) return;
|
|
|
|
const questionsHTML = questions.map((question, index) => {
|
|
const fieldName = `answer_${question.sq_id}`;
|
|
const required = question.sq_required ? 'required' : '';
|
|
const requiredMark = question.sq_required ? '<span class="question-required">*</span>' : '';
|
|
|
|
let inputHTML = '';
|
|
|
|
switch (question.sq_type) {
|
|
case 'text':
|
|
inputHTML = `
|
|
<input type="text"
|
|
name="${fieldName}"
|
|
class="form-input"
|
|
placeholder="답변을 입력해주세요"
|
|
${required}>
|
|
`;
|
|
break;
|
|
|
|
case 'textarea':
|
|
inputHTML = `
|
|
<textarea name="${fieldName}"
|
|
class="form-input form-textarea"
|
|
placeholder="자세한 답변을 입력해주세요"
|
|
${required}></textarea>
|
|
`;
|
|
break;
|
|
|
|
case 'radio':
|
|
if (question.sq_options && Array.isArray(question.sq_options)) {
|
|
inputHTML = `
|
|
<div class="radio-group">
|
|
${question.sq_options.map((option, optionIndex) => `
|
|
<div class="radio-item">
|
|
<input type="radio"
|
|
name="${fieldName}"
|
|
value="${escapeHtml(option)}"
|
|
id="${fieldName}_${optionIndex}"
|
|
${required}>
|
|
<label for="${fieldName}_${optionIndex}">
|
|
${escapeHtml(option)}
|
|
</label>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
`;
|
|
}
|
|
break;
|
|
|
|
case 'checkbox':
|
|
if (question.sq_options && Array.isArray(question.sq_options)) {
|
|
inputHTML = `
|
|
<div class="checkbox-group">
|
|
${question.sq_options.map((option, optionIndex) => `
|
|
<div class="checkbox-item">
|
|
<input type="checkbox"
|
|
name="${fieldName}[]"
|
|
value="${escapeHtml(option)}"
|
|
id="${fieldName}_${optionIndex}">
|
|
<label for="${fieldName}_${optionIndex}">
|
|
${escapeHtml(option)}
|
|
</label>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
`;
|
|
}
|
|
break;
|
|
|
|
case 'select':
|
|
if (question.sq_options && Array.isArray(question.sq_options)) {
|
|
inputHTML = `
|
|
<select name="${fieldName}" class="form-select" ${required}>
|
|
<option value="">선택해주세요</option>
|
|
${question.sq_options.map(option => `
|
|
<option value="${escapeHtml(option)}">
|
|
${escapeHtml(option)}
|
|
</option>
|
|
`).join('')}
|
|
</select>
|
|
`;
|
|
}
|
|
break;
|
|
|
|
case 'rating':
|
|
const scale = question.sq_options?.scale || 5;
|
|
const labels = question.sq_options?.labels || [];
|
|
inputHTML = `
|
|
<div class="rating-container">
|
|
${Array.from({ length: scale }, (_, i) => i + 1).map(value => `
|
|
<div class="rating-item" data-value="${value}">
|
|
<input type="radio"
|
|
name="${fieldName}"
|
|
value="${value}"
|
|
id="${fieldName}_${value}"
|
|
style="display: none;"
|
|
${required}>
|
|
<div class="rating-number">${value}</div>
|
|
${labels[value - 1] ? `<div class="rating-label">${escapeHtml(labels[value - 1])}</div>` : ''}
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
`;
|
|
break;
|
|
|
|
case 'date':
|
|
inputHTML = `
|
|
<input type="date"
|
|
name="${fieldName}"
|
|
class="form-date"
|
|
${required}>
|
|
`;
|
|
break;
|
|
}
|
|
|
|
return `
|
|
<div class="question-container" data-question="${index + 1}">
|
|
<div class="question-header">
|
|
<span class="question-number">${index + 1}</span>
|
|
<h3 class="question-title">
|
|
${escapeHtml(question.sq_title)}
|
|
${requiredMark}
|
|
</h3>
|
|
|
|
${question.sq_description ? `
|
|
<p class="question-description">${escapeHtml(question.sq_description)}</p>
|
|
` : ''}
|
|
</div>
|
|
|
|
<div class="question-input">
|
|
${inputHTML}
|
|
<div class="error-message" id="error_${question.sq_id}"></div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
questionsContainer.innerHTML = questionsHTML;
|
|
}
|
|
|
|
// HTML 이스케이프 함수
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
// 진행률 업데이트
|
|
function updateProgress() {
|
|
let answeredQuestions = 0;
|
|
const totalQuestions = questions.length;
|
|
|
|
questions.forEach((question, index) => {
|
|
const questionContainer = questionsContainer.children[index];
|
|
if (!questionContainer) return;
|
|
|
|
const inputs = questionContainer.querySelectorAll('input, textarea, select');
|
|
let hasAnswer = false;
|
|
|
|
inputs.forEach(input => {
|
|
if (input.type === 'radio' || input.type === 'checkbox') {
|
|
if (input.checked) hasAnswer = true;
|
|
} else if (input.value.trim() !== '') {
|
|
hasAnswer = true;
|
|
}
|
|
});
|
|
|
|
if (hasAnswer) {
|
|
answeredQuestions++;
|
|
}
|
|
});
|
|
|
|
const progress = Math.round((answeredQuestions / totalQuestions) * 100);
|
|
progressFill.style.width = progress + '%';
|
|
progressText.textContent = progress + '%';
|
|
currentQuestionSpan.textContent = answeredQuestions;
|
|
|
|
// 모든 필수 질문이 답변되었는지 확인
|
|
const requiredQuestions = questionsContainer.querySelectorAll('input[required], textarea[required], select[required]');
|
|
let allRequiredAnswered = true;
|
|
|
|
requiredQuestions.forEach(input => {
|
|
if (input.type === 'radio') {
|
|
const radioGroup = questionsContainer.querySelectorAll(`input[name="${input.name}"]`);
|
|
let radioChecked = false;
|
|
radioGroup.forEach(radio => {
|
|
if (radio.checked) radioChecked = true;
|
|
});
|
|
if (!radioChecked) allRequiredAnswered = false;
|
|
} else if (input.type === 'checkbox') {
|
|
const checkboxGroup = questionsContainer.querySelectorAll(`input[name="${input.name}"]`);
|
|
let checkboxChecked = false;
|
|
checkboxGroup.forEach(checkbox => {
|
|
if (checkbox.checked) checkboxChecked = true;
|
|
});
|
|
if (!checkboxChecked) allRequiredAnswered = false;
|
|
} else if (input.value.trim() === '') {
|
|
allRequiredAnswered = false;
|
|
}
|
|
});
|
|
|
|
submitBtn.disabled = !allRequiredAnswered;
|
|
}
|
|
|
|
// 이벤트 리스너 바인딩
|
|
function bindEvents() {
|
|
// 라디오/체크박스 스타일링
|
|
questionsContainer.addEventListener('click', (e) => {
|
|
const radioItem = e.target.closest('.radio-item');
|
|
const checkboxItem = e.target.closest('.checkbox-item');
|
|
|
|
if (radioItem) {
|
|
const input = radioItem.querySelector('input');
|
|
const groupName = input.name;
|
|
|
|
// 라디오 버튼 그룹의 다른 선택 해제
|
|
questionsContainer.querySelectorAll(`input[name="${groupName}"]`).forEach(radio => {
|
|
radio.closest('.radio-item').classList.remove('selected');
|
|
});
|
|
|
|
input.checked = true;
|
|
radioItem.classList.add('selected');
|
|
updateProgress();
|
|
}
|
|
|
|
if (checkboxItem) {
|
|
const input = checkboxItem.querySelector('input');
|
|
input.checked = !input.checked;
|
|
checkboxItem.classList.toggle('selected', input.checked);
|
|
updateProgress();
|
|
}
|
|
});
|
|
|
|
// 평점 클릭 이벤트
|
|
questionsContainer.addEventListener('click', (e) => {
|
|
const ratingItem = e.target.closest('.rating-item');
|
|
if (ratingItem) {
|
|
const value = ratingItem.dataset.value;
|
|
const input = ratingItem.querySelector('input');
|
|
const container = ratingItem.closest('.rating-container');
|
|
|
|
// 같은 그룹의 다른 평점 해제
|
|
container.querySelectorAll('.rating-item').forEach(item => {
|
|
item.classList.remove('selected');
|
|
});
|
|
|
|
// 현재 평점 선택
|
|
ratingItem.classList.add('selected');
|
|
input.checked = true;
|
|
|
|
updateProgress();
|
|
}
|
|
});
|
|
|
|
// 일반 입력 필드 이벤트
|
|
questionsContainer.addEventListener('input', updateProgress);
|
|
questionsContainer.addEventListener('change', updateProgress);
|
|
|
|
// 폼 제출 이벤트
|
|
surveyForm.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
|
|
if (submitBtn.disabled) {
|
|
showNotification('모든 필수 항목을 입력해주세요.', 'error');
|
|
return;
|
|
}
|
|
|
|
// 확인 모달 표시
|
|
showConfirmModal();
|
|
});
|
|
|
|
// 모달 이벤트
|
|
modalClose.addEventListener('click', hideConfirmModal);
|
|
btnCancel.addEventListener('click', hideConfirmModal);
|
|
modalOverlay.addEventListener('click', hideConfirmModal);
|
|
|
|
btnConfirm.addEventListener('click', () => {
|
|
hideConfirmModal();
|
|
submitSurvey();
|
|
});
|
|
|
|
// ESC 키로 모달 닫기
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && confirmModal.classList.contains('show')) {
|
|
hideConfirmModal();
|
|
}
|
|
});
|
|
}
|
|
|
|
// 확인 모달 표시
|
|
function showConfirmModal() {
|
|
confirmModal.classList.add('show');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
// 확인 모달 숨기기
|
|
function hideConfirmModal() {
|
|
confirmModal.classList.remove('show');
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
// 설문 제출
|
|
function submitSurvey() {
|
|
submitBtn.classList.add('loading');
|
|
submitBtn.innerHTML = '<div class="loading-spinner"></div> 제출 중...';
|
|
submitBtn.disabled = true;
|
|
|
|
const formData = new FormData(surveyForm);
|
|
formData.append('ajax', '1');
|
|
|
|
fetch(surveyForm.action, {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showNotification('설문이 성공적으로 제출되었습니다!', 'success');
|
|
setTimeout(() => {
|
|
window.location.href = data.redirect_url;
|
|
}, 1500);
|
|
} else {
|
|
showNotification(data.errors ? data.errors.join('\n') : '제출 중 오류가 발생했습니다.', 'error');
|
|
submitBtn.classList.remove('loading');
|
|
submitBtn.innerHTML = '<i class="fa fa-paper-plane"></i> 설문 제출하기';
|
|
submitBtn.disabled = false;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
showNotification('제출 중 오류가 발생했습니다.', 'error');
|
|
submitBtn.classList.remove('loading');
|
|
submitBtn.innerHTML = '<i class="fa fa-paper-plane"></i> 설문 제출하기';
|
|
submitBtn.disabled = false;
|
|
});
|
|
}
|
|
|
|
// 알림 표시
|
|
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' : type === 'error' ? 'exclamation-circle' : 'info-circle'}"></i>
|
|
<span>${message}</span>
|
|
</div>
|
|
`;
|
|
|
|
// 스타일 추가
|
|
notification.style.cssText = `
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
background: ${type === 'success' ? '#28a745' : type === 'error' ? '#dc3545' : '#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;
|
|
max-width: 300px;
|
|
word-wrap: break-word;
|
|
`;
|
|
|
|
document.body.appendChild(notification);
|
|
|
|
setTimeout(() => {
|
|
notification.style.animation = 'slideOutRight 0.3s ease';
|
|
setTimeout(() => {
|
|
notification.remove();
|
|
}, 300);
|
|
}, 5000);
|
|
}
|
|
|
|
// 스크롤 시 질문 하이라이트
|
|
function initScrollHighlight() {
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
// 모든 하이라이트 제거
|
|
questionsContainer.querySelectorAll('.question-container').forEach(q => {
|
|
q.classList.remove('highlight');
|
|
});
|
|
// 현재 질문 하이라이트
|
|
entry.target.classList.add('highlight');
|
|
}
|
|
});
|
|
}, {
|
|
threshold: 0.5,
|
|
rootMargin: '-20% 0px -20% 0px'
|
|
});
|
|
|
|
questionsContainer.querySelectorAll('.question-container').forEach(question => {
|
|
observer.observe(question);
|
|
});
|
|
}
|
|
|
|
// 질문 애니메이션 초기화
|
|
function initQuestionAnimations() {
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.opacity = '1';
|
|
entry.target.style.animationPlayState = 'running';
|
|
}
|
|
});
|
|
}, {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
});
|
|
|
|
questionsContainer.querySelectorAll('.question-container').forEach(question => {
|
|
question.style.opacity = '0';
|
|
question.style.animationPlayState = 'paused';
|
|
observer.observe(question);
|
|
});
|
|
}
|
|
|
|
// 초기화
|
|
function init() {
|
|
renderQuestions();
|
|
bindEvents();
|
|
updateProgress();
|
|
initScrollHighlight();
|
|
initQuestionAnimations();
|
|
|
|
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;
|
|
flex-shrink: 0;
|
|
}
|
|
`;
|
|
|
|
// 스타일 추가 (한 번만)
|
|
if (!document.getElementById('survey-form-module-styles')) {
|
|
const styleSheet = document.createElement('style');
|
|
styleSheet.id = 'survey-form-module-styles';
|
|
styleSheet.textContent = additionalStyles;
|
|
document.head.appendChild(styleSheet);
|
|
} |