hyungi/TK-FB-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(frontend): 프로젝트 분석 페이지 성능 최적화

Browse Source 
- 백엔드 집계 API(/api/analysis)를 연동하여 프론트엔드 데이터 처리 로직 제거
- 불필요해진 project-analysis-data.js 파일 삭제
- 페이지 로딩 및 데이터 분석 속도를 획기적으로 개선
This commit is contained in:
hyungi
2025-07-28 15:21:19 +09:00
parent 7c6940307e
commit a1b7d3c5df
4 changed files with 49 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
web-ui/js/project-analysis-ui.js
View File

@@ -68,20 +68,20 @@ export function setUIState(state) {
/**
* 필터링된 데이터에서 고유한 값을 추출하여 필터 옵션을 채웁니다.
* @param {Array} data - 가공된 전체 데이터
* 마스터 데이터를 기반으로 필터 옵션을 채웁니다.
* @param {{workers: Array, projects: Array, tasks: Array}} masterData - 마스터 데이터
*/
export function updateFilterOptions(data) {
const createOptions = (items) => {
export function updateFilterOptions(masterData) {
const createOptions = (items, key, value) => {
let html = '<option value="">전체</option>';
[...new Set(items)].sort().forEach(item => {
html += `<option value="${item}">${item}</option>`;
items.forEach(item => {
html += `<option value="${item[key]}">${item[value]}</option>`;
});
return html;
};
DOM.projectFilter.innerHTML = createOptions(data.map(d => d.project_name));
DOM.workerFilter.innerHTML = createOptions(data.map(d => d.worker_name));
DOM.taskFilter.innerHTML = createOptions(data.map(d => d.task_category));
DOM.projectFilter.innerHTML = createOptions(masterData.projects, 'project_id', 'project_name');
DOM.workerFilter.innerHTML = createOptions(masterData.workers, 'worker_id', 'worker_name');
DOM.taskFilter.innerHTML = createOptions(masterData.tasks, 'task_id', 'category');
}
/**
@@ -90,10 +90,10 @@ export function updateFilterOptions(data) {
*/
export function renderSummary(summary) {
DOM.summaryCards.innerHTML = `
<div class="summary-card"><h4>총 투입 시간</h4><div class="value">${summary.totalHours.toFixed(1)}h</div></div>
<div class="summary-card"><h4>참여 프로젝트</h4><div class="value">${summary.totalProjects}개</div></div>
<div class="summary-card"><h4>참여 인원</h4><div class="value">${summary.totalWorkers}명</div></div>
<div class="summary-card"><h4>작업 분류</h4><div class="value">${summary.totalTasks}개</div></div>
<div class="summary-card"><h4>총 투입 시간</h4><div class="value">${(summary.totalHours || 0).toFixed(1)}h</div></div>
<div class="summary-card"><h4>참여 프로젝트</h4><div class="value">${summary.totalProjects || 0}개</div></div>
<div class="summary-card"><h4>참여 인원</h4><div class="value">${summary.totalWorkers || 0}명</div></div>
<div class="summary-card"><h4>작업 분류</h4><div class="value">${summary.totalTasks || 0}개</div></div>
`;
}
@@ -104,12 +104,11 @@ export function renderSummary(summary) {
* @param {function} rowRenderer - 각 행을 렌더링하는 함수
*/
function renderTable(tableBodyEl, data, rowRenderer) {
if (data.length === 0) {
if (!data || data.length === 0) {
tableBodyEl.innerHTML = '<tr><td colspan="5" class="no-data">데이터가 없습니다</td></tr>';
return;
}
const totalHours = data.reduce((sum, item) => sum + item.hours, 0);
tableBodyEl.innerHTML = data.map((item, index) => rowRenderer(item, index, totalHours)).join('');
tableBodyEl.innerHTML = data.map(rowRenderer).join('');
}
/**
@@ -117,17 +116,17 @@ function renderTable(tableBodyEl, data, rowRenderer) {
* @param {object} analysis - 프로젝트/작업자/작업별 집계 데이터
*/
export function renderAnalysisTables(analysis) {
renderTable(DOM.projectTableBody, analysis.byProject, (p, i, total) => `
<tr><td>${i + 1}</td><td class="project-col" title="${p.name}">${p.name}</td><td class="hours-col">${p.hours.toFixed(1)}h</td>
<td>${(p.hours / total * 100).toFixed(1)}%</td><td>${p.participants.size}명</td></tr>`);
renderTable(DOM.projectTableBody, analysis.byProject, (p, i) => `
<tr><td>${i + 1}</td><td class="project-col" title="${p.name}">${p.name}</td><td class="hours-col">${p.hours}h</td>
<td>${p.percentage}%</td><td>${p.participants}명</td></tr>`);
renderTable(DOM.workerTableBody, analysis.byWorker, (w, i, total) => `
<tr><td>${i + 1}</td><td class="worker-col">${w.name}</td><td class="hours-col">${w.hours.toFixed(1)}h</td>
<td>${(w.hours / total * 100).toFixed(1)}%</td><td>${w.participants.size}개</td></tr>`);
renderTable(DOM.workerTableBody, analysis.byWorker, (w, i) => `
<tr><td>${i + 1}</td><td class="worker-col">${w.name}</td><td class="hours-col">${w.hours}h</td>
<td>${w.percentage}%</td><td>${w.participants}개</td></tr>`);
renderTable(DOM.taskTableBody, analysis.byTask, (t, i, total) => `
<tr><td>${i + 1}</td><td class="task-col" title="${t.name}">${t.name}</td><td class="hours-col">${t.hours.toFixed(1)}h</td>
<td>${(t.hours / total * 100).toFixed(1)}%</td><td>${t.participants.size}명</td></tr>`);
renderTable(DOM.taskTableBody, analysis.byTask, (t, i) => `
<tr><td>${i + 1}</td><td class="task-col" title="${t.name}">${t.name}</td><td class="hours-col">${t.hours}h</td>
<td>${t.percentage}%</td><td>${t.participants}명</td></tr>`);
}
/**
@@ -135,17 +134,16 @@ export function renderAnalysisTables(analysis) {
* @param {Array} detailData - 필터링된 상세 데이터
*/
export function renderDetailTable(detailData) {
if (detailData.length === 0) {
if (!detailData || detailData.length === 0) {
DOM.detailTableBody.innerHTML = '<tr><td colspan="8" class="no-data">데이터가 없습니다</td></tr>';
return;
}
const sorted = [...detailData].sort((a, b) => new Date(b.date) - new Date(a.date));
DOM.detailTableBody.innerHTML = sorted.map((item, index) => `
DOM.detailTableBody.innerHTML = detailData.map((item, index) => `
<tr><td>${index + 1}</td><td>${formatDate(new Date(item.date))}</td>
<td class="project-col" title="${item.project_name}">${item.project_name}</td>
<td class="worker-col">${item.worker_name}</td><td class="task-col" title="${item.task_category}">${item.task_category}</td>
<td>${item.work_details || '정상근무'}</td>
<td class="hours-col">${(item.work_hours || 0).toFixed(1)}h</td>
<td class="hours-col">${item.work_hours}h</td>
<td title="${item.memo || '-'}">${(item.memo || '-').substring(0, 20)}</td></tr>`
).join('');
}