Files
dnssash/adm/survey_manage/template_form_old.php
2026-06-11 18:47:38 +09:00

720 lines
26 KiB
PHP

<?php
$sub_menu = '710300';
include_once('./_common.php');
auth_check_menu($auth, $sub_menu, "w");
$st_id = isset($_GET['st_id']) ? (int)$_GET['st_id'] : 0;
$is_edit = $st_id > 0;
$template = array(
'st_name' => '',
'st_description' => '',
'st_category' => '고객서비스',
'st_is_public' => 1
);
$questions = array();
if ($is_edit) {
$template = sql_fetch("SELECT * FROM survey_templates WHERE st_id = '$st_id'");
if (!$template) {
alert('존재하지 않는 템플릿입니다.', 'template_list.php');
}
// 템플릿 질문들 가져오기
$question_sql = "SELECT * FROM survey_template_questions WHERE st_id = '$st_id' ORDER BY stq_order ASC";
$question_result = sql_query($question_sql);
while ($question = sql_fetch_array($question_result)) {
$questions[] = $question;
}
$g5['title'] = '템플릿 수정';
} else {
$g5['title'] = '새 템플릿 만들기';
}
include_once(G5_ADMIN_PATH.'/admin.head.php');
?>
<style>
.template-form-container {
max-width: 1000px;
margin: 0 auto;
}
.form-header {
background: linear-gradient(135deg, #AA20FF 0%, #8A1ACC 100%);
color: white;
padding: 30px;
border-radius: 8px 8px 0 0;
text-align: center;
}
.form-content {
background: white;
padding: 30px;
border-radius: 0 0 8px 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.form-section {
margin-bottom: 40px;
padding-bottom: 30px;
border-bottom: 1px solid #e9ecef;
}
.form-section:last-child {
border-bottom: none;
margin-bottom: 0;
}
.section-title {
font-size: 1.3em;
font-weight: 600;
color: #333;
margin-bottom: 20px;
display: flex;
align-items: center;
}
.section-title i {
margin-right: 10px;
color: #AA20FF;
}
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
font-weight: 600;
color: #333;
margin-bottom: 8px;
}
.form-label.required::after {
content: ' *';
color: #dc3545;
}
.form-control {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 1em;
transition: border-color 0.3s;
}
.form-control:focus {
outline: none;
border-color: #AA20FF;
box-shadow: 0 0 0 3px rgba(170, 32, 255, 0.1);
}
.form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
background-position: right 12px center;
background-repeat: no-repeat;
background-size: 16px 12px;
padding-right: 40px;
height: 43px !important;
line-height: 41px !important;
}
.questions-container {
border: 2px dashed #ddd;
border-radius: 8px;
padding: 20px;
min-height: 200px;
}
.question-item {
background: #fff;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
position: relative;
}
.question-header {
display: flex;
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: 600;
margin-right: 15px;
font-size: 0.9em;
}
.question-actions {
margin-left: auto;
display: flex;
gap: 10px;
}
.btn-sm {
padding: 6px 12px;
font-size: 0.85em;
border-radius: 4px;
border: none;
cursor: pointer;
transition: all 0.3s;
}
.btn-danger {
background: #dc3545;
color: white;
}
.btn-danger:hover {
background: #c82333;
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn-secondary:hover {
background: #545b62;
}
.form-row {
display: flex;
gap: 15px;
align-items: end;
}
.form-row .form-group {
flex: 1;
margin-bottom: 0;
}
.options-container {
margin-top: 15px;
}
.option-item {
display: flex;
align-items: center;
margin-bottom: 10px;
gap: 10px;
}
.option-input {
flex: 1;
}
.btn-add-option {
background: #28a745;
color: white;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
font-size: 0.9em;
}
.btn-add-option:hover {
background: #218838;
}
.btn-add-question {
width: 100%;
padding: 15px;
background: #AA20FF;
color: white;
border: none;
border-radius: 6px;
font-size: 1em;
font-weight: 500;
cursor: pointer;
transition: background 0.3s;
}
.btn-add-question:hover {
background: #8A1ACC;
}
.form-actions {
text-align: center;
padding-top: 30px;
border-top: 1px solid #e9ecef;
margin-top: 30px;
}
.btn-primary {
background: #AA20FF;
color: white;
padding: 12px 30px;
border: none;
border-radius: 6px;
font-size: 1em;
font-weight: 500;
cursor: pointer;
margin: 0 10px;
transition: background 0.3s;
}
.btn-primary:hover {
background: #8A1ACC;
}
.btn-outline {
background: transparent;
color: #6c757d;
border: 1px solid #6c757d;
}
.btn-outline:hover {
background: #6c757d;
color: white;
}
.empty-questions {
text-align: center;
color: #666;
padding: 40px 20px;
}
.empty-questions i {
font-size: 3em;
margin-bottom: 15px;
opacity: 0.3;
}
/* 반응형 */
@media (max-width: 768px) {
.template-form-container {
margin: 10px;
}
.form-content {
padding: 20px;
}
.form-row {
flex-direction: column;
gap: 0;
}
.form-row .form-group {
margin-bottom: 15px;
}
.question-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.question-actions {
margin-left: 0;
}
}
</style>
<div class="template-form-container">
<div class="form-header">
<h1><i class="fa fa-magic"></i> <?php echo $is_edit ? '템플릿 수정' : '새 템플릿 만들기'; ?></h1>
<p>설문 템플릿을 만들어 다른 사용자들과 공유하세요</p>
</div>
<div class="form-content">
<form name="templateForm" method="post" action="template_form_update.php">
<?php if ($is_edit): ?>
<input type="hidden" name="st_id" value="<?php echo $st_id; ?>">
<input type="hidden" name="mode" value="update">
<?php else: ?>
<input type="hidden" name="mode" value="insert">
<?php endif; ?>
<div class="form-section">
<h2 class="section-title">
<i class="fa fa-info-circle"></i> 기본 정보
</h2>
<div class="form-group">
<label class="form-label required">템플릿 이름</label>
<input type="text" name="st_name" class="form-control"
value="<?php echo htmlspecialchars($template['st_name']); ?>"
placeholder="템플릿 이름을 입력하세요" required>
</div>
<div class="form-group">
<label class="form-label">템플릿 설명</label>
<textarea name="st_description" class="form-control" rows="3"
placeholder="템플릿에 대한 설명을 입력하세요"><?php echo htmlspecialchars($template['st_description']); ?></textarea>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label required">카테고리</label>
<select name="st_category" class="form-control form-select" required>
<option value="고객서비스"<?php echo $template['st_category'] == '고객서비스' ? ' selected' : ''; ?>>고객서비스</option>
<option value="마케팅"<?php echo $template['st_category'] == '마케팅' ? ' selected' : ''; ?>>마케팅</option>
<option value="제품개발"<?php echo $template['st_category'] == '제품개발' ? ' selected' : ''; ?>>제품개발</option>
<option value="인사관리"<?php echo $template['st_category'] == '인사관리' ? ' selected' : ''; ?>>인사관리</option>
<option value="기타"<?php echo $template['st_category'] == '기타' ? ' selected' : ''; ?>>기타</option>
</select>
</div>
<div class="form-group">
<label class="form-label">공개 설정</label>
<select name="st_is_public" class="form-control form-select">
<option value="1"<?php echo $template['st_is_public'] == 1 ? ' selected' : ''; ?>>공개</option>
<option value="0"<?php echo $template['st_is_public'] == 0 ? ' selected' : ''; ?>>비공개</option>
</select>
</div>
</div>
</div>
<div class="form-section">
<h2 class="section-title">
<i class="fa fa-question-circle"></i> 질문 구성
</h2>
<div class="questions-container" id="questionsContainer">
<?php if (count($questions) > 0): ?>
<?php foreach ($questions as $index => $question): ?>
<div class="question-item" data-index="<?php echo $index; ?>">
<div class="question-header">
<div class="question-number"><?php echo $index + 1; ?></div>
<div style="flex: 1;">질문 <?php echo $index + 1; ?></div>
<div class="question-actions">
<button type="button" class="btn-sm btn-secondary" onclick="moveQuestion(<?php echo $index; ?>, 'up')">
<i class="fa fa-arrow-up"></i>
</button>
<button type="button" class="btn-sm btn-secondary" onclick="moveQuestion(<?php echo $index; ?>, 'down')">
<i class="fa fa-arrow-down"></i>
</button>
<button type="button" class="btn-sm btn-danger" onclick="removeQuestion(<?php echo $index; ?>)">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
<input type="hidden" name="questions[<?php echo $index; ?>][stq_id]" value="<?php echo $question['stq_id']; ?>">
<div class="form-row">
<div class="form-group">
<label class="form-label">질문 제목</label>
<input type="text" name="questions[<?php echo $index; ?>][stq_title]" class="form-control"
value="<?php echo htmlspecialchars($question['stq_title']); ?>"
placeholder="질문을 입력하세요" required>
</div>
<div class="form-group" style="min-width: 150px;">
<label class="form-label">질문 유형</label>
<select name="questions[<?php echo $index; ?>][stq_type]" class="form-control form-select question-type-select"
onchange="toggleOptions(<?php echo $index; ?>)">
<option value="text"<?php echo $question['stq_type'] == 'text' ? ' selected' : ''; ?>>단답형</option>
<option value="textarea"<?php echo $question['stq_type'] == 'textarea' ? ' selected' : ''; ?>>장문형</option>
<option value="radio"<?php echo $question['stq_type'] == 'radio' ? ' selected' : ''; ?>>객관식(단일)</option>
<option value="checkbox"<?php echo $question['stq_type'] == 'checkbox' ? ' selected' : ''; ?>>객관식(다중)</option>
<option value="select"<?php echo $question['stq_type'] == 'select' ? ' selected' : ''; ?>>드롭다운</option>
<option value="rating"<?php echo $question['stq_type'] == 'rating' ? ' selected' : ''; ?>>평점</option>
<option value="date"<?php echo $question['stq_type'] == 'date' ? ' selected' : ''; ?>>날짜</option>
<option value="email"<?php echo $question['stq_type'] == 'email' ? ' selected' : ''; ?>>이메일</option>
<option value="number"<?php echo $question['stq_type'] == 'number' ? ' selected' : ''; ?>>숫자</option>
</select>
</div>
</div>
<div class="form-group">
<label class="form-label">질문 설명 (선택사항)</label>
<textarea name="questions[<?php echo $index; ?>][stq_description]" class="form-control" rows="2"
placeholder="질문에 대한 추가 설명"><?php echo htmlspecialchars($question['stq_description']); ?></textarea>
</div>
<div class="form-row">
<div class="form-group">
<label>
<input type="checkbox" name="questions[<?php echo $index; ?>][stq_required]" value="1"
<?php echo $question['stq_required'] ? 'checked' : ''; ?>>
필수 질문
</label>
</div>
</div>
<?php if (in_array($question['stq_type'], ['radio', 'checkbox', 'select'])): ?>
<div class="options-container" id="optionsContainer<?php echo $index; ?>">
<label class="form-label">선택 옵션</label>
<?php
$options = json_decode($question['stq_options'], true);
if (is_array($options)):
foreach ($options as $opt_index => $option):
?>
<div class="option-item">
<input type="text" name="questions[<?php echo $index; ?>][options][]"
class="form-control option-input"
value="<?php echo htmlspecialchars($option); ?>"
placeholder="옵션을 입력하세요">
<button type="button" class="btn-sm btn-danger" onclick="removeOption(this)">
<i class="fa fa-times"></i>
</button>
</div>
<?php
endforeach;
endif;
?>
<button type="button" class="btn-add-option" onclick="addOption(<?php echo $index; ?>)">
<i class="fa fa-plus"></i> 옵션 추가
</button>
</div>
<?php endif; ?>
</div>
<?php endforeach; ?>
<?php else: ?>
<div class="empty-questions" id="emptyQuestions">
<i class="fa fa-question-circle"></i>
<h3>질문을 추가해주세요</h3>
<p>아래 버튼을 클릭하여 첫 번째 질문을 만들어보세요.</p>
</div>
<?php endif; ?>
</div>
<button type="button" class="btn-add-question" onclick="addQuestion()">
<i class="fa fa-plus"></i> 질문 추가
</button>
</div>
<div class="form-actions">
<button type="submit" class="btn-primary">
<i class="fa fa-save"></i> <?php echo $is_edit ? '템플릿 수정' : '템플릿 저장'; ?>
</button>
<a href="template_list.php" class="btn-primary btn-outline">
<i class="fa fa-times"></i> 취소
</a>
</div>
</form>
</div>
</div>
<script>
let questionIndex = <?php echo count($questions); ?>;
function addQuestion() {
const container = document.getElementById('questionsContainer');
const emptyState = document.getElementById('emptyQuestions');
if (emptyState) {
emptyState.remove();
}
const questionHtml = `
<div class="question-item" data-index="${questionIndex}">
<div class="question-header">
<div class="question-number">${questionIndex + 1}</div>
<div style="flex: 1;">질문 ${questionIndex + 1}</div>
<div class="question-actions">
<button type="button" class="btn-sm btn-secondary" onclick="moveQuestion(${questionIndex}, 'up')">
<i class="fa fa-arrow-up"></i>
</button>
<button type="button" class="btn-sm btn-secondary" onclick="moveQuestion(${questionIndex}, 'down')">
<i class="fa fa-arrow-down"></i>
</button>
<button type="button" class="btn-sm btn-danger" onclick="removeQuestion(${questionIndex})">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">질문 제목</label>
<input type="text" name="questions[${questionIndex}][stq_title]" class="form-control"
placeholder="질문을 입력하세요" required>
</div>
<div class="form-group" style="min-width: 150px;">
<label class="form-label">질문 유형</label>
<select name="questions[${questionIndex}][stq_type]" class="form-control form-select question-type-select"
onchange="toggleOptions(${questionIndex})">
<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>
<option value="email">이메일</option>
<option value="number">숫자</option>
</select>
</div>
</div>
<div class="form-group">
<label class="form-label">질문 설명 (선택사항)</label>
<textarea name="questions[${questionIndex}][stq_description]" class="form-control" rows="2"
placeholder="질문에 대한 추가 설명"></textarea>
</div>
<div class="form-row">
<div class="form-group">
<label>
<input type="checkbox" name="questions[${questionIndex}][stq_required]" value="1">
필수 질문
</label>
</div>
</div>
</div>
`;
container.insertAdjacentHTML('beforeend', questionHtml);
questionIndex++;
updateQuestionNumbers();
}
function removeQuestion(index) {
if (confirm('이 질문을 삭제하시겠습니까?')) {
const questionItem = document.querySelector(`[data-index="${index}"]`);
questionItem.remove();
const remainingQuestions = document.querySelectorAll('.question-item');
if (remainingQuestions.length === 0) {
const container = document.getElementById('questionsContainer');
container.innerHTML = `
<div class="empty-questions" id="emptyQuestions">
<i class="fa fa-question-circle"></i>
<h3>질문을 추가해주세요</h3>
<p>아래 버튼을 클릭하여 첫 번째 질문을 만들어보세요.</p>
</div>
`;
} else {
updateQuestionNumbers();
}
}
}
function moveQuestion(index, direction) {
const questionItem = document.querySelector(`[data-index="${index}"]`);
const container = document.getElementById('questionsContainer');
if (direction === 'up' && questionItem.previousElementSibling) {
container.insertBefore(questionItem, questionItem.previousElementSibling);
} else if (direction === 'down' && questionItem.nextElementSibling) {
container.insertBefore(questionItem.nextElementSibling, questionItem);
}
updateQuestionNumbers();
}
function updateQuestionNumbers() {
const questions = document.querySelectorAll('.question-item');
questions.forEach((question, index) => {
const numberElement = question.querySelector('.question-number');
const titleElement = question.querySelector('.question-header > div:nth-child(2)');
numberElement.textContent = index + 1;
titleElement.textContent = `질문 ${index + 1}`;
});
}
function toggleOptions(index) {
const questionItem = document.querySelector(`[data-index="${index}"]`);
const typeSelect = questionItem.querySelector('.question-type-select');
const selectedType = typeSelect.value;
// 기존 옵션 컨테이너 제거
const existingOptions = questionItem.querySelector('.options-container');
if (existingOptions) {
existingOptions.remove();
}
// 객관식 질문인 경우 옵션 컨테이너 추가
if (['radio', 'checkbox', 'select'].includes(selectedType)) {
const optionsHtml = `
<div class="options-container" id="optionsContainer${index}">
<label class="form-label">선택 옵션</label>
<div class="option-item">
<input type="text" name="questions[${index}][options][]"
class="form-control option-input"
placeholder="옵션을 입력하세요">
<button type="button" class="btn-sm btn-danger" onclick="removeOption(this)">
<i class="fa fa-times"></i>
</button>
</div>
<button type="button" class="btn-add-option" onclick="addOption(${index})">
<i class="fa fa-plus"></i> 옵션 추가
</button>
</div>
`;
questionItem.insertAdjacentHTML('beforeend', optionsHtml);
}
}
function addOption(questionIndex) {
const container = document.getElementById(`optionsContainer${questionIndex}`);
const addButton = container.querySelector('.btn-add-option');
const optionHtml = `
<div class="option-item">
<input type="text" name="questions[${questionIndex}][options][]"
class="form-control option-input"
placeholder="옵션을 입력하세요">
<button type="button" class="btn-sm btn-danger" onclick="removeOption(this)">
<i class="fa fa-times"></i>
</button>
</div>
`;
addButton.insertAdjacentHTML('beforebegin', optionHtml);
}
function removeOption(button) {
button.parentElement.remove();
}
// 폼 제출 전 검증
document.querySelector('form[name="templateForm"]').addEventListener('submit', function(e) {
const templateName = document.querySelector('input[name="st_name"]').value.trim();
if (!templateName) {
alert('템플릿 이름을 입력해주세요.');
e.preventDefault();
return;
}
const questions = document.querySelectorAll('.question-item');
if (questions.length === 0) {
alert('최소 1개 이상의 질문을 추가해주세요.');
e.preventDefault();
return;
}
// 각 질문의 제목 검증
let hasEmptyTitle = false;
questions.forEach((question, index) => {
const titleInput = question.querySelector('input[name*="[stq_title]"]');
if (!titleInput.value.trim()) {
alert(`질문 ${index + 1}의 제목을 입력해주세요.`);
hasEmptyTitle = true;
return;
}
});
if (hasEmptyTitle) {
e.preventDefault();
return;
}
});
</script>
<?php
include_once(G5_ADMIN_PATH.'/admin.tail.php');
?>