feat: 문의사항(Q&A) 게시판 구현 및 대시보드 활성도 분석 로직 개선
- [server.py] 문의사항 API(목록, 상세, 답변 저장/삭제) 및 라우트 추가 - [templates/inquiries.html] 문의사항 게시판 HTML 구조 구현 (Sticky 헤더, 아코디언 상세) - [js/inquiries.js] 비동기 데이터 로드, 아코디언 토글, 답변 편집 로직 구현 - [style/inquiries.css] 와이드 레이아웃, Sticky 헤더, 아코디언 및 상태 배지 스타일 적용 - [server.py, js/dashboard.js] '폴더 자동 삭제' 로그 발생 시 14일 경과 여부와 관계없이 '방치'로 분류하도록 로직 수정 - [templates/dashboard.html] 대시보드 내 문의사항 탭 활성화 및 링크 연동
This commit is contained in:
@@ -70,7 +70,7 @@ async function loadActivityAnalysis(date = "") {
|
||||
<div class="label">주의 (14일 이내)</div><div class="count">${summary.warning}</div>
|
||||
</div>
|
||||
<div class="activity-card stale" onclick="showActivityDetails('stale')">
|
||||
<div class="label">방치 (14일 초과)</div><div class="count">${summary.stale}</div>
|
||||
<div class="label">방치 (14일 초과 / 폴더자동삭제)</div><div class="count">${summary.stale}</div>
|
||||
</div>
|
||||
<div class="activity-card unknown" onclick="showActivityDetails('unknown')">
|
||||
<div class="label">데이터 없음 (파일 0개)</div><div class="count">${summary.unknown}</div>
|
||||
@@ -114,12 +114,20 @@ function createProjectHtml(p) {
|
||||
const recentLog = (!logRaw || logRaw === "X" || logRaw === "데이터 없음") ? "기록 없음" : logRaw;
|
||||
const logTime = recentLog !== "기록 없음" ? recentLog.split(',')[0] : "기록 없음";
|
||||
|
||||
// 파일이 0개 또는 NULL인 경우에만 에러(붉은색) 표시
|
||||
const statusClass = (files === 0 || files === null) ? "status-error" : "";
|
||||
// '폴더 자동 삭제' 여부 확인
|
||||
const isStaleLog = recentLog.replace(/\s/g, "").includes("폴더자동삭제");
|
||||
// 파일이 0개 또는 NULL인 경우에만 행 전체 에러(붉은색) 표시
|
||||
const isNoFiles = (files === 0 || files === null);
|
||||
const statusClass = isNoFiles ? "status-error" : "";
|
||||
|
||||
// 로그 텍스트 스타일 결정 (기록 없음 이거나 폴더자동삭제인 경우)
|
||||
const logStyleClass = (recentLog === '기록 없음' || isStaleLog) ? 'warning-text' : '';
|
||||
const logBoldStyle = isStaleLog ? 'font-weight: 800;' : '';
|
||||
|
||||
return `
|
||||
<div class="accordion-item ${statusClass}">
|
||||
<div class="accordion-header" onclick="toggleAccordion(this)">
|
||||
<div class="repo-title" title="${name}">${name}</div><div class="repo-dept">${dept}</div><div class="repo-admin">${admin}</div><div class="repo-files ${statusClass === 'status-error' ? 'warning-text' : ''}">${files || 0}</div><div class="repo-log ${recentLog === '기록 없음' ? 'warning-text' : ''}" title="${recentLog}">${recentLog}</div>
|
||||
<div class="repo-title" title="${name}">${name}</div><div class="repo-dept">${dept}</div><div class="repo-admin">${admin}</div><div class="repo-files ${isNoFiles ? 'warning-text' : ''}">${files || 0}</div><div class="repo-log ${logStyleClass}" style="${logBoldStyle}" title="${recentLog}">${recentLog}</div>
|
||||
</div>
|
||||
<div class="accordion-body">
|
||||
<div class="detail-grid">
|
||||
|
||||
230
js/inquiries.js
Normal file
230
js/inquiries.js
Normal file
@@ -0,0 +1,230 @@
|
||||
|
||||
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';
|
||||
});
|
||||
}
|
||||
|
||||
const pmType = document.getElementById('filterPmType').value;
|
||||
const category = document.getElementById('filterCategory').value;
|
||||
const status = document.getElementById('filterStatus').value;
|
||||
const keyword = document.getElementById('searchKeyword').value;
|
||||
|
||||
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();
|
||||
|
||||
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 title="${item.pm_type}">${item.pm_type}</td>
|
||||
<td title="${item.browser || 'Chrome'}">${item.browser || 'Chrome'}</td>
|
||||
<td title="${item.category}">${item.category}</td>
|
||||
<td title="${item.project_nm}">${item.project_nm}</td>
|
||||
<td class="content-preview" title="${item.content}">${item.content}</td>
|
||||
<td class="content-preview" title="${item.reply || ''}" style="color: #1e5149; font-weight: 500;">${item.reply || '-'}</td>
|
||||
<td title="${item.author}">${item.author}</td>
|
||||
<td title="${item.reg_date}">${item.reg_date}</td>
|
||||
<td><span class="status-badge ${getStatusClass(item.status)}">${item.status}</span></td>
|
||||
</tr>
|
||||
<tr id="detail-${item.id}" class="detail-row">
|
||||
<td colspan="10">
|
||||
<div class="detail-container">
|
||||
<button class="btn-close-accordion" onclick="toggleAccordion(${item.id})">접기</button>
|
||||
<div class="detail-content-wrapper">
|
||||
<div class="detail-meta-grid">
|
||||
<div><span class="detail-label">작성자:</span> ${item.author}</div>
|
||||
<div><span class="detail-label">등록일:</span> ${item.reg_date}</div>
|
||||
<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>
|
||||
<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">
|
||||
<textarea id="reply-text-${item.id}" disabled placeholder="답변 내용이 없습니다.">${item.reply || ''}</textarea>
|
||||
<div style="display:flex; justify-content: space-between; align-items: center;">
|
||||
<div style="display:flex; gap:15px; align-items:center;">
|
||||
<div class="filter-group" style="flex-direction:row; align-items:center; gap:8px;">
|
||||
<label style="margin:0;">처리상태:</label>
|
||||
<select id="reply-status-${item.id}" disabled style="padding:5px 10px;">
|
||||
<option value="완료" ${item.status === '완료' ? 'selected' : ''}>완료</option>
|
||||
<option value="작업 중" ${item.status === '작업 중' ? 'selected' : ''}>작업 중</option>
|
||||
<option value="확인 중" ${item.status === '확인 중' ? 'selected' : ''}>확인 중</option>
|
||||
<option value="개발예정" ${item.status === '개발예정' ? 'selected' : ''}>개발예정</option>
|
||||
<option value="미확인" ${item.status === '미확인' ? 'selected' : ''}>미확인</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-group" style="flex-direction:row; align-items:center; gap:8px;">
|
||||
<label style="margin:0;">처리자:</label>
|
||||
<input type="text" id="reply-handler-${item.id}" disabled value="${item.handler || ''}" placeholder="이름 입력" style="padding:5px 10px; width:100px;">
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex; gap:8px;">
|
||||
<button class="btn-edit sync-btn" onclick="enableEdit(${item.id})" style="background:#1e5149; color:#fff; border:none;">${item.reply ? '수정하기' : '답변작성'}</button>
|
||||
<button class="btn-save sync-btn" onclick="saveReply(${item.id})" style="background:#1e5149; color:#fff; border:none;">저장</button>
|
||||
<button class="btn-delete sync-btn" onclick="deleteReply(${item.id})" style="background:#f44336; color:#fff; border:none;">삭제</button>
|
||||
<button class="btn-cancel sync-btn" onclick="cancelEdit(${item.id})" style="background:#666; color:#fff; border:none;">취소</button>
|
||||
</div>
|
||||
</div>
|
||||
${item.handled_date ? `<div style="margin-top:10px; font-size:12px; color:#888; text-align:right;">최종 수정일: ${item.handled_date}</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function enableEdit(id) {
|
||||
const form = document.getElementById(`reply-form-${id}`);
|
||||
form.classList.remove('readonly');
|
||||
form.classList.add('editable');
|
||||
|
||||
document.getElementById(`reply-text-${id}`).disabled = false;
|
||||
document.getElementById(`reply-status-${id}`).disabled = false;
|
||||
document.getElementById(`reply-handler-${id}`).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();
|
||||
|
||||
const form = document.getElementById(`reply-form-${id}`);
|
||||
const txt = document.getElementById(`reply-text-${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');
|
||||
} catch (e) {
|
||||
console.error("취소 중 오류 발생:", e);
|
||||
loadInquiries(); // 오류 시에는 전체 새로고침으로 대응
|
||||
}
|
||||
}
|
||||
|
||||
async function saveReply(id) {
|
||||
const reply = document.getElementById(`reply-text-${id}`).value;
|
||||
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("처리자 이름을 입력해 주세요.");
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/inquiries/${id}/reply`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ reply, status, handler })
|
||||
});
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
alert("답변이 저장되었습니다.");
|
||||
loadInquiries();
|
||||
} else {
|
||||
alert("저장에 실패했습니다: " + result.error);
|
||||
}
|
||||
} catch (e) {
|
||||
alert("오류가 발생했습니다.");
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteReply(id) {
|
||||
if (!confirm("답변을 삭제하시겠습니까? (처리 상태가 '미확인'으로 초기화됩니다.)")) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/inquiries/${id}/reply`, { method: 'DELETE' });
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
alert("답변이 삭제되었습니다.");
|
||||
loadInquiries();
|
||||
} else {
|
||||
alert("삭제에 실패했습니다: " + result.error);
|
||||
}
|
||||
} catch (e) {
|
||||
alert("오류가 발생했습니다.");
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAccordion(id) {
|
||||
const detailRow = document.getElementById(`detail-${id}`);
|
||||
if (!detailRow) return;
|
||||
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');
|
||||
if (row.previousElementSibling) row.previousElementSibling.classList.remove('active-row');
|
||||
}
|
||||
});
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
||||
function getStatusClass(status) {
|
||||
if (status === '완료') return 'status-complete';
|
||||
if (status === '작업 중') return 'status-working';
|
||||
if (status === '확인 중') return 'status-checking';
|
||||
return 'status-pending';
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', loadInquiries);
|
||||
window.addEventListener('resize', loadInquiries);
|
||||
Reference in New Issue
Block a user