first commit 2

adm/mail_manage/assets/js/send_test_form.js

@@ -0,0 +1,89 @@
+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('변수 정보를 가져오는 데 실패했습니다. 개발자 콘솔을 확인해주세요.');
+                });
+        });
+    }
+});