hmw1001
944 lines
31 KiB
PHP
944 lines
31 KiB
PHP
<?php
|
|
$sub_menu = '710200';
|
|
include_once('./_common.php');
|
|
|
|
auth_check_menu($auth, $sub_menu, "w");
|
|
|
|
$sv_id = isset($_GET['sv_id']) ? (int)$_GET['sv_id'] : 0;
|
|
$template_id = isset($_GET['template_id']) ? (int)$_GET['template_id'] : 0;
|
|
$is_edit = $sv_id > 0;
|
|
|
|
$survey = array(
|
|
'sv_title' => '',
|
|
'sv_description' => '',
|
|
'sv_start_date' => date('Y-m-d H:i'),
|
|
'sv_end_date' => date('Y-m-d H:i', strtotime('+30 days')),
|
|
'sv_allow_anonymous' => 1,
|
|
'sv_allow_multiple' => 0,
|
|
'sv_max_responses' => '',
|
|
'sv_theme_color' => '#AA20FF',
|
|
'sv_thank_message' => ''
|
|
);
|
|
|
|
$questions = array();
|
|
|
|
if ($is_edit) {
|
|
$survey = get_survey($sv_id);
|
|
if (!$survey) {
|
|
alert('존재하지 않는 설문입니다.', 'survey_list.php');
|
|
}
|
|
$questions = get_survey_questions($sv_id);
|
|
$g5['title'] = '설문 수정';
|
|
} else {
|
|
$g5['title'] = '설문 작성';
|
|
}
|
|
|
|
include_once(G5_ADMIN_PATH.'/admin.head.php');
|
|
|
|
// 템플릿 목록
|
|
$templates = get_survey_templates();
|
|
?>
|
|
|
|
<style>
|
|
.survey-form-container {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.form-header {
|
|
background: linear-gradient(135deg, #AA20FF 0%, #8A1ACC 100%);
|
|
color: white;
|
|
padding: 30px;
|
|
border-radius: 15px;
|
|
margin-bottom: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.form-header h1 {
|
|
margin: 0 0 10px 0;
|
|
font-size: 2.2em;
|
|
}
|
|
|
|
.form-tabs {
|
|
display: flex;
|
|
background: white;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
margin-bottom: 20px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.form-tab {
|
|
flex: 1;
|
|
padding: 15px 20px;
|
|
background: #fff;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 1em;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.form-tab.active {
|
|
background: #AA20FF;
|
|
color: white;
|
|
}
|
|
|
|
.form-tab:not(.active):hover {
|
|
background: #e9ecef;
|
|
}
|
|
|
|
.tab-content {
|
|
display: none;
|
|
background: white;
|
|
border-radius: 15px;
|
|
padding: 30px;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.tab-content.active {
|
|
display: block;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 8px;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.form-label.required::after {
|
|
content: ' *';
|
|
color: #e74c3c;
|
|
}
|
|
|
|
.form-input,
|
|
.form-textarea,
|
|
.form-select {
|
|
width: 100%;
|
|
padding: 12px 15px;
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 8px;
|
|
font-size: 1em;
|
|
transition: all 0.3s ease;
|
|
background: #fafafa;
|
|
}
|
|
|
|
/* 셀렉트 박스 높이 수정 */
|
|
select,
|
|
.form-select,
|
|
.question-type-select {
|
|
height: 43px !important;
|
|
line-height: 41px !important;
|
|
padding: 8px 12px !important;
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
.form-input:focus,
|
|
.form-textarea:focus,
|
|
.form-select:focus {
|
|
outline: none;
|
|
border-color: #AA20FF;
|
|
background: white;
|
|
box-shadow: 0 0 0 3px rgba(170, 32, 255, 0.1);
|
|
}
|
|
|
|
.form-textarea {
|
|
min-height: 100px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.form-row {
|
|
display: flex;
|
|
gap: 20px;
|
|
}
|
|
|
|
.form-col {
|
|
flex: 1;
|
|
}
|
|
|
|
.checkbox-group {
|
|
display: flex;
|
|
gap: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.checkbox-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.checkbox-item input[type="checkbox"] {
|
|
transform: scale(1.2);
|
|
accent-color: #AA20FF;
|
|
}
|
|
|
|
.color-picker {
|
|
width: 60px;
|
|
height: 40px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.template-section {
|
|
background: #fff;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.template-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 15px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.template-card {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
border: 2px solid #e0e0e0;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.template-card:hover {
|
|
border-color: #AA20FF;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.template-card.selected {
|
|
border-color: #AA20FF;
|
|
background: rgba(170, 32, 255, 0.05);
|
|
}
|
|
|
|
.questions-container {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.question-item {
|
|
background: #fff;
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.question-header {
|
|
display: flex;
|
|
justify-content: between;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.question-number {
|
|
background: #AA20FF;
|
|
color: white;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.question-controls {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: 5px 10px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 0.8em;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-danger {
|
|
background: #dc3545;
|
|
color: white;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: #6c757d;
|
|
color: white;
|
|
}
|
|
|
|
.btn-sm:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.question-type-select {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.options-container {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.option-item {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.option-input {
|
|
flex: 1;
|
|
padding: 8px 12px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.add-option-btn {
|
|
background: #28a745;
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 15px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.add-question-btn {
|
|
width: 100%;
|
|
padding: 15px;
|
|
background: #AA20FF;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 10px;
|
|
font-size: 1.1em;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.add-question-btn:hover {
|
|
background: #8A1ACC;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
gap: 15px;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
background: white;
|
|
border-radius: 15px;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.btn {
|
|
padding: 12px 30px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 1em;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #AA20FF;
|
|
color: white;
|
|
}
|
|
|
|
.btn-success {
|
|
background: #28a745;
|
|
color: white;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: #6c757d;
|
|
color: white;
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.help-text {
|
|
font-size: 0.9em;
|
|
color: #666;
|
|
margin-top: 5px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* 반응형 */
|
|
@media (max-width: 768px) {
|
|
.survey-form-container {
|
|
padding: 10px;
|
|
}
|
|
|
|
.form-row {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.form-tabs {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.template-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.form-actions {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.question-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="survey-form-container">
|
|
<div class="form-header">
|
|
<h1><?php echo $is_edit ? '설문 수정' : '새 설문 만들기'; ?></h1>
|
|
<p><?php echo $is_edit ? '설문 내용을 수정할 수 있습니다' : '전문적인 설문조사를 쉽게 만들어보세요'; ?></p>
|
|
</div>
|
|
|
|
<form id="surveyForm" method="post" action="survey_form_update.php">
|
|
<input type="hidden" name="sv_id" value="<?php echo $sv_id; ?>">
|
|
|
|
<!-- 탭 메뉴 -->
|
|
<div class="form-tabs">
|
|
<button type="button" class="form-tab active" data-tab="basic">
|
|
<i class="fa fa-info-circle"></i> 기본 정보
|
|
</button>
|
|
<button type="button" class="form-tab" data-tab="questions">
|
|
<i class="fa fa-question-circle"></i> 질문 설정
|
|
</button>
|
|
<button type="button" class="form-tab" data-tab="settings">
|
|
<i class="fa fa-cog"></i> 고급 설정
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 기본 정보 탭 -->
|
|
<div class="tab-content active" id="basic">
|
|
<?php if (!$is_edit): ?>
|
|
<!-- 템플릿 선택 -->
|
|
<div class="template-section">
|
|
<h3><i class="fa fa-magic"></i> 템플릿으로 빠르게 시작하기</h3>
|
|
<p class="help-text">미리 만들어진 템플릿을 선택하면 질문이 자동으로 추가됩니다.</p>
|
|
|
|
<div class="template-grid">
|
|
<div class="template-card" data-template="0">
|
|
<h4><i class="fa fa-plus"></i> 직접 작성</h4>
|
|
<p>처음부터 직접 설문을 만들어보세요</p>
|
|
</div>
|
|
<?php foreach ($templates as $template): ?>
|
|
<div class="template-card" data-template="<?php echo $template['st_id']; ?>">
|
|
<h4><?php echo htmlspecialchars($template['st_name']); ?></h4>
|
|
<p><?php echo htmlspecialchars($template['st_description']); ?></p>
|
|
<small style="color: #666;"><?php echo $template['st_category']; ?></small>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<input type="hidden" name="template_id" id="templateId" value="<?php echo $template_id; ?>">
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label required">설문 제목</label>
|
|
<input type="text" name="sv_title" class="form-input"
|
|
value="<?php echo htmlspecialchars($survey['sv_title']); ?>"
|
|
placeholder="설문조사의 제목을 입력하세요" required>
|
|
<div class="help-text">명확하고 흥미로운 제목을 작성하면 더 많은 참여를 유도할 수 있습니다.</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">설문 설명</label>
|
|
<textarea name="sv_description" class="form-textarea"
|
|
placeholder="설문의 목적과 내용을 간단히 설명해주세요"><?php echo htmlspecialchars($survey['sv_description']); ?></textarea>
|
|
<div class="help-text">설문의 목적과 예상 소요시간을 안내하면 참여율이 높아집니다.</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-col">
|
|
<label class="form-label required">시작일시</label>
|
|
<input type="datetime-local" name="sv_start_date" class="form-input"
|
|
value="<?php echo date('Y-m-d\TH:i', strtotime($survey['sv_start_date'])); ?>" required>
|
|
</div>
|
|
<div class="form-col">
|
|
<label class="form-label required">종료일시</label>
|
|
<input type="datetime-local" name="sv_end_date" class="form-input"
|
|
value="<?php echo date('Y-m-d\TH:i', strtotime($survey['sv_end_date'])); ?>" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">테마 색상</label>
|
|
<input type="color" name="sv_theme_color" class="color-picker"
|
|
value="<?php echo $survey['sv_theme_color']; ?>">
|
|
<div class="help-text">설문 페이지의 메인 색상을 선택하세요.</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">완료 메시지</label>
|
|
<textarea name="sv_thank_message" class="form-textarea"
|
|
placeholder="설문 완료 후 표시될 감사 메시지를 입력하세요"><?php echo htmlspecialchars($survey['sv_thank_message']); ?></textarea>
|
|
<div class="help-text">참여자에게 감사 인사와 함께 추가 안내사항을 전달할 수 있습니다.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 질문 설정 탭 -->
|
|
<div class="tab-content" id="questions">
|
|
<div class="questions-container">
|
|
<div id="questionsList">
|
|
<?php if (!empty($questions)): ?>
|
|
<?php foreach ($questions as $index => $question): ?>
|
|
<div class="question-item" data-question-id="<?php echo $question['sq_id']; ?>">
|
|
<!-- 질문 내용 렌더링 -->
|
|
</div>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<button type="button" class="add-question-btn" onclick="addQuestion()">
|
|
<i class="fa fa-plus"></i> 질문 추가하기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 고급 설정 탭 -->
|
|
<div class="tab-content" id="settings">
|
|
<div class="form-group">
|
|
<label class="form-label">참여 설정</label>
|
|
<div class="checkbox-group">
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" name="sv_allow_anonymous" value="1"
|
|
<?php echo $survey['sv_allow_anonymous'] ? 'checked' : ''; ?>>
|
|
<label>익명 참여 허용</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" name="sv_allow_multiple" value="1"
|
|
<?php echo $survey['sv_allow_multiple'] ? 'checked' : ''; ?>>
|
|
<label>중복 참여 허용</label>
|
|
</div>
|
|
</div>
|
|
<div class="help-text">익명 참여를 허용하면 로그인하지 않은 사용자도 참여할 수 있습니다.</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">최대 응답 수</label>
|
|
<input type="number" name="sv_max_responses" class="form-input"
|
|
value="<?php echo $survey['sv_max_responses']; ?>"
|
|
placeholder="제한 없음" min="1">
|
|
<div class="help-text">응답 수를 제한하려면 숫자를 입력하세요. 비워두면 제한이 없습니다.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 폼 액션 -->
|
|
<div class="form-actions">
|
|
<button type="submit" name="action" value="save_draft" class="btn btn-secondary">
|
|
<i class="fa fa-save"></i> 임시저장
|
|
</button>
|
|
<button type="submit" name="action" value="save_and_activate" class="btn btn-success">
|
|
<i class="fa fa-play"></i> 저장 후 활성화
|
|
</button>
|
|
<a href="survey_list.php" class="btn btn-secondary">
|
|
<i class="fa fa-times"></i> 취소
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
let questionCount = <?php echo count($questions); ?>;
|
|
const questionTypes = {
|
|
'text': '단답형',
|
|
'textarea': '장문형',
|
|
'radio': '단일선택',
|
|
'checkbox': '다중선택',
|
|
'select': '드롭다운',
|
|
'rating': '평점',
|
|
'date': '날짜'
|
|
};
|
|
|
|
// 탭 전환
|
|
document.querySelectorAll('.form-tab').forEach(tab => {
|
|
tab.addEventListener('click', function() {
|
|
const targetTab = this.dataset.tab;
|
|
|
|
// 탭 활성화
|
|
document.querySelectorAll('.form-tab').forEach(t => t.classList.remove('active'));
|
|
this.classList.add('active');
|
|
|
|
// 콘텐츠 표시
|
|
document.querySelectorAll('.tab-content').forEach(content => {
|
|
content.classList.remove('active');
|
|
});
|
|
document.getElementById(targetTab).classList.add('active');
|
|
});
|
|
});
|
|
|
|
// 템플릿 선택
|
|
document.querySelectorAll('.template-card').forEach(card => {
|
|
card.addEventListener('click', function() {
|
|
document.querySelectorAll('.template-card').forEach(c => c.classList.remove('selected'));
|
|
this.classList.add('selected');
|
|
|
|
const templateId = this.dataset.template;
|
|
document.getElementById('templateId').value = templateId;
|
|
|
|
// 템플릿 질문 로드
|
|
if (templateId > 0) {
|
|
loadTemplateQuestions(templateId);
|
|
} else {
|
|
// 직접 작성 선택 시 기존 질문들 초기화
|
|
document.getElementById('questionsList').innerHTML = '';
|
|
questionCount = 0;
|
|
}
|
|
});
|
|
});
|
|
|
|
// 템플릿 질문 로드 함수
|
|
function loadTemplateQuestions(templateId) {
|
|
fetch(`ajax_get_template.php?st_id=${templateId}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// 기존 질문들 초기화
|
|
document.getElementById('questionsList').innerHTML = '';
|
|
questionCount = 0;
|
|
|
|
// 템플릿 질문들 추가
|
|
data.questions.forEach((question, index) => {
|
|
addTemplateQuestion(question, index + 1);
|
|
});
|
|
|
|
// 기본 정보도 템플릿에서 가져오기
|
|
if (data.template.st_name) {
|
|
document.querySelector('input[name="sv_title"]').value = data.template.st_name;
|
|
}
|
|
if (data.template.st_description) {
|
|
document.querySelector('textarea[name="sv_description"]').value = data.template.st_description;
|
|
}
|
|
|
|
alert('템플릿이 적용되었습니다. 질문 설정 탭에서 확인해보세요.');
|
|
} else {
|
|
alert('템플릿 로드 실패: ' + data.message);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('템플릿 로드 중 오류가 발생했습니다.');
|
|
});
|
|
}
|
|
|
|
// 템플릿 질문 추가 함수
|
|
function addTemplateQuestion(questionData, questionNumber) {
|
|
questionCount = questionNumber;
|
|
|
|
const optionsHtml = ['radio', 'checkbox', 'select'].includes(questionData.stq_type) && questionData.stq_options.length > 0
|
|
? `<div class="options-container" style="display: block;">
|
|
<label class="form-label">선택지</label>
|
|
<div class="options-list">
|
|
${questionData.stq_options.map((option, index) => `
|
|
<div class="option-item">
|
|
<input type="text" name="questions[${questionNumber}][options][]" class="option-input" value="${option}" placeholder="선택지 ${index + 1}">
|
|
<button type="button" class="btn-sm btn-danger" onclick="removeOption(this)">삭제</button>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
<button type="button" class="add-option-btn" onclick="addOption(this)">선택지 추가</button>
|
|
</div>`
|
|
: `<div class="options-container" style="display: none;">
|
|
<label class="form-label">선택지</label>
|
|
<div class="options-list">
|
|
<div class="option-item">
|
|
<input type="text" name="questions[${questionNumber}][options][]" class="option-input" placeholder="선택지 1">
|
|
<button type="button" class="btn-sm btn-danger" onclick="removeOption(this)">삭제</button>
|
|
</div>
|
|
<div class="option-item">
|
|
<input type="text" name="questions[${questionNumber}][options][]" class="option-input" placeholder="선택지 2">
|
|
<button type="button" class="btn-sm btn-danger" onclick="removeOption(this)">삭제</button>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="add-option-btn" onclick="addOption(this)">선택지 추가</button>
|
|
</div>`;
|
|
|
|
const questionHtml = `
|
|
<div class="question-item" data-question-index="${questionNumber}">
|
|
<div class="question-header">
|
|
<div style="display: flex; align-items: center;">
|
|
<div class="question-number">${questionNumber}</div>
|
|
<div style="flex: 1;">
|
|
<select name="questions[${questionNumber}][type]" class="question-type-select form-select" onchange="updateQuestionType(this)">
|
|
<option value="text" ${questionData.stq_type === 'text' ? 'selected' : ''}>단답형</option>
|
|
<option value="textarea" ${questionData.stq_type === 'textarea' ? 'selected' : ''}>장문형</option>
|
|
<option value="radio" ${questionData.stq_type === 'radio' ? 'selected' : ''}>단일선택</option>
|
|
<option value="checkbox" ${questionData.stq_type === 'checkbox' ? 'selected' : ''}>다중선택</option>
|
|
<option value="select" ${questionData.stq_type === 'select' ? 'selected' : ''}>드롭다운</option>
|
|
<option value="rating" ${questionData.stq_type === 'rating' ? 'selected' : ''}>평점</option>
|
|
<option value="date" ${questionData.stq_type === 'date' ? 'selected' : ''}>날짜</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="question-controls">
|
|
<button type="button" class="btn-sm btn-secondary" onclick="moveQuestion(this, 'up')">↑</button>
|
|
<button type="button" class="btn-sm btn-secondary" onclick="moveQuestion(this, 'down')">↓</button>
|
|
<button type="button" class="btn-sm btn-danger" onclick="removeQuestion(this)">삭제</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">질문 제목</label>
|
|
<input type="text" name="questions[${questionNumber}][title]" class="form-input"
|
|
value="${questionData.stq_title}" placeholder="질문을 입력하세요" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">질문 설명 (선택사항)</label>
|
|
<textarea name="questions[${questionNumber}][description]" class="form-textarea"
|
|
placeholder="질문에 대한 추가 설명">${questionData.stq_description || ''}</textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" name="questions[${questionNumber}][required]" value="1" ${questionData.stq_required ? 'checked' : ''}>
|
|
<label>필수 질문</label>
|
|
</div>
|
|
</div>
|
|
|
|
${optionsHtml}
|
|
</div>
|
|
`;
|
|
|
|
document.getElementById('questionsList').insertAdjacentHTML('beforeend', questionHtml);
|
|
}
|
|
|
|
// 질문 추가
|
|
function addQuestion() {
|
|
questionCount++;
|
|
const questionHtml = `
|
|
<div class="question-item" data-question-index="${questionCount}">
|
|
<div class="question-header">
|
|
<div style="display: flex; align-items: center;">
|
|
<div class="question-number">${questionCount}</div>
|
|
<div style="flex: 1;">
|
|
<select name="questions[${questionCount}][type]" class="question-type-select form-select" onchange="updateQuestionType(this)">
|
|
<option value="text">단답형</option>
|
|
<option value="textarea">장문형</option>
|
|
<option value="radio">단일선택</option>
|
|
<option value="checkbox">다중선택</option>
|
|
<option value="select">드롭다운</option>
|
|
<option value="rating">평점</option>
|
|
<option value="date">날짜</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="question-controls">
|
|
<button type="button" class="btn-sm btn-secondary" onclick="moveQuestion(this, 'up')">↑</button>
|
|
<button type="button" class="btn-sm btn-secondary" onclick="moveQuestion(this, 'down')">↓</button>
|
|
<button type="button" class="btn-sm btn-danger" onclick="removeQuestion(this)">삭제</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">질문 제목</label>
|
|
<input type="text" name="questions[${questionCount}][title]" class="form-input" placeholder="질문을 입력하세요" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">질문 설명 (선택사항)</label>
|
|
<textarea name="questions[${questionCount}][description]" class="form-textarea" placeholder="질문에 대한 추가 설명"></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" name="questions[${questionCount}][required]" value="1">
|
|
<label>필수 질문</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="options-container" style="display: none;">
|
|
<label class="form-label">선택지</label>
|
|
<div class="options-list">
|
|
<div class="option-item">
|
|
<input type="text" name="questions[${questionCount}][options][]" class="option-input" placeholder="선택지 1">
|
|
<button type="button" class="btn-sm btn-danger" onclick="removeOption(this)">삭제</button>
|
|
</div>
|
|
<div class="option-item">
|
|
<input type="text" name="questions[${questionCount}][options][]" class="option-input" placeholder="선택지 2">
|
|
<button type="button" class="btn-sm btn-danger" onclick="removeOption(this)">삭제</button>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="add-option-btn" onclick="addOption(this)">선택지 추가</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
document.getElementById('questionsList').insertAdjacentHTML('beforeend', questionHtml);
|
|
updateQuestionNumbers();
|
|
}
|
|
|
|
// 질문 타입 변경
|
|
function updateQuestionType(select) {
|
|
const questionItem = select.closest('.question-item');
|
|
const optionsContainer = questionItem.querySelector('.options-container');
|
|
const questionType = select.value;
|
|
|
|
if (['radio', 'checkbox', 'select'].includes(questionType)) {
|
|
optionsContainer.style.display = 'block';
|
|
} else {
|
|
optionsContainer.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// 질문 삭제
|
|
function removeQuestion(button) {
|
|
if (confirm('이 질문을 삭제하시겠습니까?')) {
|
|
button.closest('.question-item').remove();
|
|
updateQuestionNumbers();
|
|
}
|
|
}
|
|
|
|
// 질문 순서 변경
|
|
function moveQuestion(button, direction) {
|
|
const questionItem = button.closest('.question-item');
|
|
const sibling = direction === 'up' ? questionItem.previousElementSibling : questionItem.nextElementSibling;
|
|
|
|
if (sibling) {
|
|
if (direction === 'up') {
|
|
questionItem.parentNode.insertBefore(questionItem, sibling);
|
|
} else {
|
|
questionItem.parentNode.insertBefore(sibling, questionItem);
|
|
}
|
|
updateQuestionNumbers();
|
|
}
|
|
}
|
|
|
|
// 선택지 추가
|
|
function addOption(button) {
|
|
const optionsList = button.previousElementSibling;
|
|
const questionIndex = button.closest('.question-item').dataset.questionIndex;
|
|
const optionCount = optionsList.children.length + 1;
|
|
|
|
const optionHtml = `
|
|
<div class="option-item">
|
|
<input type="text" name="questions[${questionIndex}][options][]" class="option-input" placeholder="선택지 ${optionCount}">
|
|
<button type="button" class="btn-sm btn-danger" onclick="removeOption(this)">삭제</button>
|
|
</div>
|
|
`;
|
|
|
|
optionsList.insertAdjacentHTML('beforeend', optionHtml);
|
|
}
|
|
|
|
// 선택지 삭제
|
|
function removeOption(button) {
|
|
const optionsList = button.closest('.options-list');
|
|
if (optionsList.children.length > 2) {
|
|
button.closest('.option-item').remove();
|
|
} else {
|
|
alert('최소 2개의 선택지가 필요합니다.');
|
|
}
|
|
}
|
|
|
|
// 질문 번호 업데이트
|
|
function updateQuestionNumbers() {
|
|
const questions = document.querySelectorAll('.question-item');
|
|
questions.forEach((question, index) => {
|
|
const number = index + 1;
|
|
question.querySelector('.question-number').textContent = number;
|
|
question.dataset.questionIndex = number;
|
|
|
|
// input name 속성 업데이트
|
|
const inputs = question.querySelectorAll('input, textarea, select');
|
|
inputs.forEach(input => {
|
|
if (input.name && input.name.includes('questions[')) {
|
|
input.name = input.name.replace(/questions\[\d+\]/, `questions[${number}]`);
|
|
}
|
|
});
|
|
});
|
|
|
|
questionCount = questions.length;
|
|
}
|
|
|
|
// 폼 제출 전 검증
|
|
document.getElementById('surveyForm').addEventListener('submit', function(e) {
|
|
const title = document.querySelector('input[name="sv_title"]').value.trim();
|
|
const startDate = new Date(document.querySelector('input[name="sv_start_date"]').value);
|
|
const endDate = new Date(document.querySelector('input[name="sv_end_date"]').value);
|
|
|
|
if (!title) {
|
|
alert('설문 제목을 입력해주세요.');
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
|
|
if (startDate >= endDate) {
|
|
alert('종료일시는 시작일시보다 늦어야 합니다.');
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
|
|
const questions = document.querySelectorAll('.question-item');
|
|
if (questions.length === 0) {
|
|
alert('최소 1개의 질문을 추가해주세요.');
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
|
|
// 질문 제목 검증
|
|
let hasEmptyQuestion = false;
|
|
questions.forEach(question => {
|
|
const titleInput = question.querySelector('input[name*="[title]"]');
|
|
if (!titleInput.value.trim()) {
|
|
hasEmptyQuestion = true;
|
|
}
|
|
});
|
|
|
|
if (hasEmptyQuestion) {
|
|
alert('모든 질문의 제목을 입력해주세요.');
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
});
|
|
|
|
// 페이지 로드 시 기존 질문들의 타입에 따라 옵션 표시
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.querySelectorAll('.question-type-select').forEach(select => {
|
|
updateQuestionType(select);
|
|
});
|
|
|
|
// URL에서 template_id가 있으면 해당 템플릿 자동 선택
|
|
const templateId = document.getElementById('templateId').value;
|
|
if (templateId > 0) {
|
|
const templateCard = document.querySelector(`[data-template="${templateId}"]`);
|
|
if (templateCard) {
|
|
templateCard.click(); // 템플릿 카드 클릭하여 자동 선택
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<?php
|
|
include_once(G5_ADMIN_PATH.'/admin.tail.php');
|
|
?>
|