hmw1001
89 lines
4.2 KiB
JavaScript
89 lines
4.2 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
const templateSelect = document.getElementById('template_code');
|
|
const varContainer = document.getElementById('variable_fields');
|
|
|
|
if (templateSelect) {
|
|
templateSelect.addEventListener('change', function() {
|
|
const selectedCode = this.value;
|
|
varContainer.innerHTML = ''; // 기존 필드 초기화
|
|
varContainer.style.display = 'none'; // 컨테이너 숨김
|
|
|
|
if (!selectedCode) {
|
|
return;
|
|
}
|
|
|
|
// AJAX 요청으로 선택된 템플릿의 변수 가져오기
|
|
fetch(`./ajax_get_template_vars.php?code=${selectedCode}`)
|
|
.then(response => {
|
|
// [개선] 네트워크 오류 발생 시, 더 명확한 에러를 throw합니다.
|
|
if (!response.ok) {
|
|
throw new Error('네트워크 응답이 올바르지 않습니다.');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.error) {
|
|
alert(data.error);
|
|
return;
|
|
}
|
|
|
|
if (data.success && Object.keys(data.variables).length > 0) {
|
|
// [개선] 테이블 구조를 명확하게 생성합니다.
|
|
const table = document.createElement('table');
|
|
const colgroup = document.createElement('colgroup');
|
|
const col1 = document.createElement('col');
|
|
col1.className = 'grid_4';
|
|
const col2 = document.createElement('col');
|
|
colgroup.appendChild(col1);
|
|
colgroup.appendChild(col2);
|
|
table.appendChild(colgroup);
|
|
|
|
const tbody = document.createElement('tbody');
|
|
|
|
// 제목 행 추가
|
|
const caption = document.createElement('caption');
|
|
caption.textContent = '치환 변수 값 입력';
|
|
caption.className = 'sound_only'; // 스크린리더만 읽도록 처리
|
|
table.appendChild(caption);
|
|
|
|
for (const varName in data.variables) {
|
|
const defaultValue = data.variables[varName];
|
|
|
|
const tr = document.createElement('tr');
|
|
|
|
const th = document.createElement('th');
|
|
th.scope = 'row';
|
|
const label = document.createElement('label');
|
|
// [개선] label의 for 속성값에 특수문자가 없도록 varName을 사용합니다.
|
|
label.htmlFor = `variable_${varName}`;
|
|
label.textContent = `{${varName}}`;
|
|
th.appendChild(label);
|
|
|
|
const td = document.createElement('td');
|
|
const input = document.createElement('input');
|
|
input.type = 'text';
|
|
input.name = `variables[${varName}]`;
|
|
input.id = `variable_${varName}`;
|
|
input.className = 'frm_input';
|
|
input.style.width = '95%';
|
|
input.value = defaultValue;
|
|
input.placeholder = `${varName}에 치환될 값을 입력하세요`;
|
|
td.appendChild(input);
|
|
|
|
tr.appendChild(th);
|
|
tr.appendChild(td);
|
|
tbody.appendChild(tr);
|
|
}
|
|
|
|
table.appendChild(tbody);
|
|
varContainer.appendChild(table);
|
|
varContainer.style.display = 'block';
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('변수 정보를 가져오는 중 오류가 발생했습니다:', error);
|
|
alert('변수 정보를 가져오는 데 실패했습니다. 개발자 콘솔을 확인해주세요.');
|
|
});
|
|
});
|
|
}
|
|
}); |