Taehoon/test-mcp
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: SQL 쿼리 관리 모듈화 및 메일 관리 UI/UX 고도화

Browse Source
This commit is contained in:
이태훈
2026-03-17 14:27:25 +09:00
parent 74f11d3bd4
commit d0b33edea8
22 changed files with 851 additions and 1324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
js/inquiries.js
View File

@@ -1,15 +1,6 @@
async function loadInquiries() {
// Adjust sticky thead position based on header height
const header = document.getElementById('stickyHeader');
const thead = document.querySelector('.inquiry-table thead');
if (header && thead) {
const headerHeight = header.offsetHeight;
const totalOffset = 36 + headerHeight; // topbar(36) + sticky header height
document.querySelectorAll('.inquiry-table thead th').forEach(th => {
th.style.top = totalOffset + 'px';
});
}
initStickyHeader();
const pmType = document.getElementById('filterPmType').value;
const category = document.getElementById('filterCategory').value;
@@ -19,16 +10,42 @@ async function loadInquiries() {
const params = new URLSearchParams({
pm_type: pmType,
category: category,
status: status,
keyword: keyword
});
const response = await fetch(`/api/inquiries?${params}`);
const data = await response.json();
try {
const response = await fetch(`/api/inquiries?${params}`);
const data = await response.json();
updateStats(data);
const filteredData = status ? data.filter(item => item.status === status) : data;
renderInquiryList(filteredData);
} catch (e) {
console.error("데이터 로딩 중 오류 발생:", e);
}
}
function initStickyHeader() {
const header = document.getElementById('stickyHeader');
const thead = document.querySelector('.inquiry-table thead');
if (header && thead) {
const headerHeight = header.offsetHeight;
const totalOffset = 36 + headerHeight;
document.querySelectorAll('.inquiry-table thead th').forEach(th => {
th.style.top = totalOffset + 'px';
});
}
}
function renderInquiryList(data) {
const tbody = document.getElementById('inquiryList');
tbody.innerHTML = data.map(item => `
<tr class="inquiry-row" onclick="toggleAccordion(${item.id})">
<td title="${item.no}">${item.no}</td>
<td style="text-align:center;">
${item.image_url ? `<img src="${item.image_url}" class="img-thumbnail" alt="thumbnail">` : '<span class="no-img">없음</span>'}
</td>
<td title="${item.pm_type}">${item.pm_type}</td>
<td title="${item.browser || 'Chrome'}">${item.browser || 'Chrome'}</td>
<td title="${item.category}">${item.category}</td>
@@ -40,7 +57,7 @@ async function loadInquiries() {
<td><span class="status-badge ${getStatusClass(item.status)}">${item.status}</span></td>
</tr>
<tr id="detail-${item.id}" class="detail-row">
<td colspan="10">
<td colspan="11">
<div class="detail-container">
<button class="btn-close-accordion" onclick="toggleAccordion(${item.id})">접기</button>
<div class="detail-content-wrapper">
@@ -50,10 +67,27 @@ async function loadInquiries() {
<div><span class="detail-label">시스템:</span> ${item.pm_type}</div>
<div><span class="detail-label">환경:</span> ${item.browser || 'Chrome'} / ${item.device || 'PC'}</div>
</div>
<div class="detail-q-section">
<h4 style="margin-top:0; margin-bottom:10px; color:#1e5149;">[질문 내용]</h4>
<div style="line-height:1.6; white-space: pre-wrap;">${item.content}</div>
</div>
${item.image_url ? `
<div class="detail-image-section" id="img-section-${item.id}">
<div class="image-section-header" onclick="toggleImageSection(${item.id})">
<h4>
<span>🖼️</span> [첨부 이미지]
<span style="font-size:11px; color:#888; font-weight:normal;">(클릭 시 크게 보기)</span>
</h4>
<span class="toggle-icon">▼</span>
</div>
<div class="image-section-content collapsed" id="img-content-${item.id}">
<img src="${item.image_url}" class="preview-img" alt="Inquiry Image" style="cursor: pointer;" onclick="event.stopPropagation(); openImageModal(this.src)">
</div>
</div>
` : ''}
<div class="detail-a-section">
<h4 style="margin-top:0; margin-bottom:10px; color:#1e5149;">[조치 및 답변]</h4>
<div id="reply-form-${item.id}" class="reply-edit-form readonly">
@@ -94,18 +128,15 @@ async function loadInquiries() {
function enableEdit(id) {
const form = document.getElementById(`reply-form-${id}`);
form.classList.remove('readonly');
form.classList.add('editable');
form.classList.replace('readonly', 'editable');
document.getElementById(`reply-text-${id}`).disabled = false;
document.getElementById(`reply-status-${id}`).disabled = false;
document.getElementById(`reply-handler-${id}`).disabled = false;
const elements = [`reply-text-${id}`, `reply-status-${id}`, `reply-handler-${id}`];
elements.forEach(elId => document.getElementById(elId).disabled = false);
document.getElementById(`reply-text-${id}`).focus();
}
async function cancelEdit(id) {
try {
// 서버에서 해당 항목의 원래 데이터를 다시 가져옴
const response = await fetch(`/api/inquiries/${id}`);
const item = await response.json();
@@ -114,21 +145,14 @@ async function cancelEdit(id) {
const status = document.getElementById(`reply-status-${id}`);
const handler = document.getElementById(`reply-handler-${id}`);
// 데이터 원복
txt.value = item.reply || '';
status.value = item.status;
handler.value = item.handler || '';
// UI 상태 원복 (비활성화 및 클래스 변경)
txt.disabled = true;
status.disabled = true;
handler.disabled = true;
form.classList.remove('editable');
form.classList.add('readonly');
[txt, status, handler].forEach(el => el.disabled = true);
form.classList.replace('editable', 'readonly');
} catch (e) {
console.error("취소 중 오류 발생:", e);
loadInquiries(); // 오류 시에는 전체 새로고침으로 대응
loadInquiries();
}
}
@@ -137,8 +161,7 @@ async function saveReply(id) {
const status = document.getElementById(`reply-status-${id}`).value;
const handler = document.getElementById(`reply-handler-${id}`).value;
if (!reply.trim()) return alert("답변 내용을 입력해 주세요.");
if (!handler.trim()) return alert("처리자 이름을 입력해 주세요.");
if (!reply.trim() || !handler.trim()) return alert("내용과 처리자를 모두 입력해 주세요.");
try {
const response = await fetch(`/api/inquiries/${id}/reply`, {
@@ -148,30 +171,26 @@ async function saveReply(id) {
});
const result = await response.json();
if (result.success) {
alert("답변이 저장되었습니다.");
alert("저장되었습니다.");
loadInquiries();
} else {
alert("저장에 실패했습니다: " + result.error);
}
} catch (e) {
alert("오류가 발생했습니다.");
alert("저장 중 오류가 발생했습니다.");
}
}
async function deleteReply(id) {
if (!confirm("답변을 삭제하시겠습니까? (처리 상태가 '미확인'으로 초기화됩니다.)")) return;
if (!confirm("답변을 삭제하시겠습니까?")) return;
try {
const response = await fetch(`/api/inquiries/${id}/reply`, { method: 'DELETE' });
const result = await response.json();
if (result.success) {
alert("답변이 삭제되었습니다.");
alert("삭제되었습니다.");
loadInquiries();
} else {
alert("삭제에 실패했습니다: " + result.error);
}
} catch (e) {
alert("오류가 발생했습니다.");
alert("삭제 중 오류가 발생했습니다.");
}
}
@@ -181,7 +200,6 @@ function toggleAccordion(id) {
const inquiryRow = detailRow.previousElementSibling;
const isActive = detailRow.classList.contains('active');
// Close all other active details and remove their row highlights
document.querySelectorAll('.detail-row.active').forEach(row => {
if (row.id !== `detail-${id}`) {
row.classList.remove('active');
@@ -189,42 +207,72 @@ function toggleAccordion(id) {
}
});
// Toggle current
if (isActive) {
detailRow.classList.remove('active');
inquiryRow.classList.remove('active-row');
} else {
detailRow.classList.add('active');
inquiryRow.classList.add('active-row');
// [추가] 펼쳐진 항목이 보기 편하도록 스크롤 위치 조정
setTimeout(() => {
const stickyHeader = document.getElementById('stickyHeader');
const thead = document.querySelector('.inquiry-table thead');
const topbarHeight = 36;
const stickyHeaderHeight = stickyHeader ? stickyHeader.offsetHeight : 0;
const theadHeight = thead ? thead.offsetHeight : 0;
// 모든 고정 영역의 합 (Topbar + 필터영역 + 표 헤더)
const totalOffset = topbarHeight + stickyHeaderHeight + theadHeight;
const rowPosition = inquiryRow.getBoundingClientRect().top + window.pageYOffset;
const offsetPosition = rowPosition - totalOffset;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
}, 100);
scrollToRow(inquiryRow);
}
}
function getStatusClass(status) {
if (status === '완료') return 'status-complete';
if (status === '작업 중') return 'status-working';
if (status === '확인 중') return 'status-checking';
return 'status-pending';
function scrollToRow(row) {
setTimeout(() => {
const headerHeight = document.getElementById('stickyHeader').offsetHeight;
const totalOffset = 36 + headerHeight + 40;
const offsetPosition = (row.getBoundingClientRect().top + window.pageYOffset) - totalOffset;
window.scrollTo({ top: offsetPosition, behavior: 'smooth' });
}, 100);
}
function getStatusClass(status) {
const map = { '완료': 'status-complete', '작업 중': 'status-working', '확인 중': 'status-checking' };
return map[status] || 'status-pending';
}
function updateStats(data) {
const counts = {
Total: data.length,
Complete: data.filter(i => i.status === '완료').length,
Working: data.filter(i => i.status === '작업 중').length,
Checking: data.filter(i => i.status === '확인 중').length,
Pending: data.filter(i => i.status === '개발예정').length,
Unconfirmed: data.filter(i => i.status === '미확인').length
};
Object.keys(counts).forEach(k => {
const el = document.getElementById(`count${k}`);
if (el) el.textContent = counts[k].toLocaleString();
});
}
function openImageModal(src) {
const modal = document.getElementById('imageModal');
if (modal) {
document.getElementById('modalImage').src = src;
modal.style.display = 'flex';
}
}
function closeImageModal() {
const modal = document.getElementById('imageModal');
if (modal) modal.style.display = 'none';
}
function toggleImageSection(id) {
const section = document.getElementById(`img-section-${id}`);
const content = document.getElementById(`img-content-${id}`);
const icon = section.querySelector('.toggle-icon');
const isCollapsed = content.classList.toggle('collapsed');
section.classList.toggle('active', !isCollapsed);
icon.textContent = isCollapsed ? '▼' : '▲';
}
// Global Initialization
document.addEventListener('DOMContentLoaded', loadInquiries);
window.addEventListener('resize', loadInquiries);
window.addEventListener('resize', initStickyHeader);
// Global Key Events (ESC)
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeImageModal();
});