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

feat: 프로젝트 활성도 분석 시스템 및 크롤링 인증/중단 기능 구현 - DB 연결 최적화, 활성도 위젯 및 내비게이션, 관리자 인증 모달, 중단 기능, UI 레이아웃 최적화, 코드 리팩토링 및 파일 정리

Browse Source
This commit is contained in:
이태훈
2026-03-11 14:03:26 +09:00
parent 4a995c11f4
commit 9f06857bea
26 changed files with 587 additions and 1323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

437
js/dashboard.js
View File

@@ -1,295 +1,220 @@
/**
* Project Master Overseas Dashboard JS
* 기능: 데이터 로드, 활성도 분석, 인증 모달 제어, 크롤링 동기화 및 중단
*/
// --- 글로벌 상태 관리 ---
let rawData = [];
let projectActivityDetails = [];
let isCrawling = false;
const continentMap = {
"라오스": "아시아", "미얀마": "아시아", "베트남": "아시아", "사우디아라비아": "아시아",
"우즈베키스탄": "아시아", "이라크": "아시아", "캄보디아": "아시아",
"키르기스스탄": "아시아", "파키스탄": "아시아", "필리핀": "아시아",
"아르헨티나": "아메리카", "온두라스": "아메리카", "볼리비아": "아메리카", "콜롬비아": "아메리카",
"파라과이": "아메리카", "페루": "아메리카", "엘살바도르": "아메리카",
"가나": "아프리카", "기니": "아프리카", "우간다": "아프리카", "에티오피아": "아프리카", "탄자니아": "아프리카"
};
const continentOrder = {
"아시아": 1,
"아프리카": 2,
"아메리카": 3,
"지사": 4
};
const CONTINENT_ORDER = { "아시아": 1, "아프리카": 2, "아메리카": 3, "지사": 4 };
// --- 초기화 ---
async function init() {
console.log("Dashboard Initializing...");
const container = document.getElementById('projectAccordion');
const baseDateStrong = document.getElementById('baseDate');
if (!container) return;
if (!container) return;
// 1. 가용한 날짜 목록 가져오기 및 셀렉트 박스 생성
await loadAvailableDates();
await loadDataByDate();
}
// --- 데이터 통신 및 로드 ---
async function loadAvailableDates() {
try {
const datesRes = await fetch('/available-dates');
const dates = await datesRes.json();
if (dates && dates.length > 0) {
let selectHtml = `<select id="dateSelector" onchange="loadDataByDate(this.value)" style="margin-left:10px; border:none; background:none; font-weight:700; cursor:pointer;">`;
dates.forEach(d => {
selectHtml += `<option value="${d}">${d}</option>`;
});
selectHtml += `</select>`;
// 기준날짜 텍스트 영역을 셀렉트 박스로 교체
const baseDateInfo = document.querySelector('.base-date-info');
if (baseDateInfo) {
baseDateInfo.innerHTML = `기준날짜: ${selectHtml}`;
}
const response = await fetch('/available-dates');
const dates = await response.json();
if (dates?.length > 0) {
const selectHtml = `
<select id="dateSelector" onchange="loadDataByDate(this.value)"
style="margin-left:10px; border:none; background:none; font-weight:700; cursor:pointer; font-family:inherit; color:inherit;">
${dates.map(d => `<option value="${d}">${d}</option>`).join('')}
</select>`;
const baseDateStrong = document.getElementById('baseDate');
if (baseDateStrong) baseDateStrong.innerHTML = selectHtml;
}
} catch (e) {
console.error("날짜 목록 로드 실패:", e);
}
// 2. 기본 데이터 로드 (최신 날짜)
loadDataByDate();
} catch (e) { console.error("날짜 로드 실패:", e); }
}
async function loadDataByDate(selectedDate = "") {
const container = document.getElementById('projectAccordion');
try {
const url = selectedDate ? `/project-data?date=${selectedDate}` : `/project-data?t=${new Date().getTime()}`;
await loadActivityAnalysis(selectedDate);
const url = selectedDate ? `/project-data?date=${selectedDate}` : `/project-data?t=${Date.now()}`;
const response = await fetch(url);
const data = await response.json();
if (data.error) throw new Error(data.error);
rawData = data.projects || [];
renderDashboard(rawData);
} catch (e) {
console.error("데이터 로드 실패:", e);
alert("데이터를 가져오는 데 실패했습니다.");
}
}
async function loadActivityAnalysis(date = "") {
const dashboard = document.getElementById('activityDashboard');
if (!dashboard) return;
try {
const url = date ? `/project-activity?date=${date}` : `/project-activity`;
const response = await fetch(url);
const data = await response.json();
if (data.error) return;
const { summary, details } = data;
projectActivityDetails = details;
dashboard.innerHTML = `
<div class="activity-card active" onclick="showActivityDetails('active')">
<div class="label">정상 (7일 이내)</div><div class="count">${summary.active}</div>
</div>
<div class="activity-card warning" onclick="showActivityDetails('warning')">
<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>
<div class="activity-card unknown" onclick="showActivityDetails('unknown')">
<div class="label">데이터 없음 (파일 0개 등)</div><div class="count">${summary.unknown}</div>
</div>`;
} catch (e) { console.error("분석 로드 실패:", e); }
}
// --- 렌더링 엔진 ---
function renderDashboard(data) {
const container = document.getElementById('projectAccordion');
container.innerHTML = ''; // 초기화
const groupedData = {};
data.forEach((item, index) => {
let continent = item[5] || "기기타";
let country = item[6] || "미분류";
if (!groupedData[continent]) groupedData[continent] = {};
if (!groupedData[continent][country]) groupedData[continent][country] = [];
groupedData[continent][country].push({ item, index });
});
const sortedContinents = Object.keys(groupedData).sort((a, b) => (continentOrder[a] || 99) - (continentOrder[b] || 99));
sortedContinents.forEach(continent => {
const continentGroup = document.createElement('div');
continentGroup.className = 'continent-group';
let continentHtml = `
<div class="continent-header" onclick="toggleGroup(this)">
<span>${continent}</span>
<span class="toggle-icon">▼</span>
</div>
<div class="continent-body">
`;
const sortedCountries = Object.keys(groupedData[continent]).sort((a, b) => a.localeCompare(b));
sortedCountries.forEach(country => {
continentHtml += `
<div class="country-group">
<div class="country-header" onclick="toggleGroup(this)">
<span>${country}</span>
<span class="toggle-icon">▼</span>
</div>
<div class="country-body">
<div class="accordion-container">
<div class="accordion-list-header">
<div>프로젝트명</div>
<div>담당부서</div>
<div>담당자</div>
<div style="text-align:center;">파일수</div>
<div>최근로그</div>
</div>
`;
const sortedProjects = groupedData[continent][country].sort((a, b) => a.item[0].localeCompare(b.item[0]));
sortedProjects.forEach(({ item, index }) => {
const projectName = item[0];
const dept = item[1];
const admin = item[2];
const recentLogRaw = item[3];
const fileCount = item[4];
const recentLog = recentLogRaw === "X" ? "기록 없음" : recentLogRaw;
const logTime = recentLog !== "기록 없음" ? recentLog.split(',')[0] : "기록 없음";
let statusClass = "";
if (fileCount === 0) statusClass = "status-error";
else if (recentLog === "기록 없음") statusClass = "status-warning";
continentHtml += `
<div class="accordion-item ${statusClass}">
<div class="accordion-header" onclick="toggleAccordion(this)">
<div class="repo-title" title="${projectName}">${projectName}</div>
<div class="repo-dept">${dept}</div>
<div class="repo-admin">${admin}</div>
<div class="repo-files ${fileCount === 0 ? 'warning-text' : ''}">${fileCount}</div>
<div class="repo-log ${recentLog === '기록 없음' ? 'warning-text' : ''}" title="${recentLog}">${recentLog}</div>
</div>
<div class="accordion-body">
<div class="detail-grid">
<div class="detail-section">
<h4>참여 인원 상세</h4>
<table class="data-table">
<thead><tr><th>이름</th><th>소속</th><th>사용자권한</th></tr></thead>
<tbody>
<tr><td>${admin}</td><td>${dept}</td><td>관리자</td></tr>
<tr><td>김철수</td><td>${dept}</td><td>부관리자</td></tr>
<tr><td>박지민</td><td>${dept}</td><td>일반참여자</td></tr>
<tr><td>최유리</td><td>${dept}</td><td>참관자</td></tr>
</tbody>
</table>
</div>
<div class="detail-section">
<h4>최근 문의사항 및 파일 변경 로그</h4>
<table class="data-table">
<thead><tr><th>유형</th><th>내용</th><th>일시</th></tr></thead>
<tbody>
<tr><td><span class="badge">로그</span></td><td>데이터 동기화 완료</td><td>${logTime}</td></tr>
<tr><td><span class="badge" style="background:var(--hover-bg); border: 1px solid var(--border-color); color:var(--primary-color);">문의</span></td><td>프로젝트 접근 권한 요청</td><td>2026-02-23</td></tr>
<tr><td><span class="badge" style="background:var(--primary-color); color:white;">파일</span></td><td>설계도면 v2.pdf 업로드</td><td>2026-02-22</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
`;
});
continentHtml += `
</div>
</div>
</div>
`;
container.innerHTML = '';
const grouped = groupData(data);
Object.keys(grouped).sort((a,b) => (CONTINENT_ORDER[a]||99) - (CONTINENT_ORDER[b]||99)).forEach(continent => {
const continentDiv = document.createElement('div');
continentDiv.className = 'continent-group active';
let html = `<div class="continent-header" onclick="toggleGroup(this)"><span>${continent}</span><span class="toggle-icon">▼</span></div><div class="continent-body">`;
Object.keys(grouped[continent]).sort().forEach(country => {
html += `<div class="country-group active"><div class="country-header" onclick="toggleGroup(this)"><span>${country}</span><span class="toggle-icon">▼</span></div><div class="country-body"><div class="accordion-container">
<div class="accordion-list-header"><div>프로젝트명</div><div>담당부서</div><div>담당자</div><div style="text-align:center;">파일수</div><div>최근로그</div></div>
${grouped[continent][country].sort((a,b)=>a[0].localeCompare(b[0])).map(p => createProjectHtml(p)).join('')}</div></div></div>`;
});
html += `</div>`;
continentDiv.innerHTML = html;
container.appendChild(continentDiv);
});
}
continentHtml += `
function groupData(data) {
const res = {};
data.forEach(item => {
const c1 = item[5] || "기타", c2 = item[6] || "미분류";
if (!res[c1]) res[c1] = {};
if (!res[c1][c2]) res[c1][c2] = [];
res[c1][c2].push(item);
});
return res;
}
function createProjectHtml(p) {
const [name, dept, admin, logRaw, files] = p;
const recentLog = (!logRaw || logRaw === "X" || logRaw === "데이터 없음") ? "기록 없음" : logRaw;
const logTime = recentLog !== "기록 없음" ? recentLog.split(',')[0] : "기록 없음";
const statusClass = (files === 0 || files === null) ? "status-error" : (recentLog === "기록 없음") ? "status-warning" : "";
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>
`;
continentGroup.innerHTML = continentHtml;
container.appendChild(continentGroup);
});
const allContinents = container.querySelectorAll('.continent-group');
allContinents.forEach(continent => {
continent.classList.add('active');
});
const allCountries = container.querySelectorAll('.country-group');
allCountries.forEach(country => {
country.classList.add('active');
});
<div class="accordion-body">
<div class="detail-grid">
<div class="detail-section"><h4>참여 인원 상세</h4><table class="data-table"><thead><tr><th>이름</th><th>소속</th><th>권한</th></tr></thead><tbody><tr><td>${admin}</td><td>${dept}</td><td>관리자</td></tr></tbody></table></div>
<div class="detail-section"><h4>최근 활동</h4><table class="data-table"><thead><tr><th>유형</th><th>내용</th><th>일시</th></tr></thead><tbody><tr><td><span class="badge">로그</span></td><td>동기화 완료</td><td>${logTime}</td></tr></tbody></table></div>
</div>
</div>
</div>`;
}
function toggleGroup(header) {
const group = header.parentElement;
group.classList.toggle('active');
}
function toggleAccordion(header) {
const item = header.parentElement;
const container = item.parentElement;
const allItems = container.querySelectorAll('.accordion-item');
allItems.forEach(el => {
if (el !== item) el.classList.remove('active');
});
// --- 이벤트 핸들러 ---
function toggleGroup(h) { h.parentElement.classList.toggle('active'); }
function toggleAccordion(h) {
const item = h.parentElement;
item.parentElement.querySelectorAll('.accordion-item').forEach(el => { if(el!==item) el.classList.remove('active'); });
item.classList.toggle('active');
}
async function syncData() {
const btn = document.getElementById('syncBtn');
const logConsole = document.getElementById('logConsole');
const logBody = document.getElementById('logBody');
function showActivityDetails(status) {
const modal = document.getElementById('activityDetailModal'), tbody = document.getElementById('modalTableBody'), title = document.getElementById('modalTitle');
const names = { active:'정상', warning:'주의', stale:'방치', unknown:'데이터 없음' };
const filtered = (projectActivityDetails || []).filter(d => d.status === status);
title.innerText = `${names[status]} 목록 (${filtered.length}개)`;
tbody.innerHTML = filtered.map(p => {
const o = rawData.find(r => r[0] === p.name);
return `<tr class="modal-row" onclick="scrollToProject('${p.name}')"><td><strong>${p.name}</strong></td><td>${o?o[1]:"-"}</td><td>${o?o[2]:"-"}</td></tr>`;
}).join('');
modal.style.display = 'flex';
}
btn.classList.add('loading');
btn.innerHTML = `<span class="spinner"></span> 동기화 중 (진행 상황 확인 중...)`;
btn.disabled = true;
function closeActivityModal() { document.getElementById('activityDetailModal').style.display = 'none'; }
logConsole.style.display = 'block';
logBody.innerHTML = '';
function addLog(msg) {
const logItem = document.createElement('div');
logItem.innerText = `[${new Date().toLocaleTimeString()}] ${msg}`;
logBody.appendChild(logItem);
logConsole.scrollTop = logConsole.scrollHeight;
}
try {
console.log("Attempting to connect to /sync...");
const response = await fetch(`/sync`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const reader = response.body.getReader();
const decoder = new TextDecoder();
while (true) {
const { done, value } = await reader.read();
if (done) break;
const chunk = decoder.decode(value);
const lines = chunk.split('\n');
for (const line of lines) {
if (line.startsWith('data: ')) {
const payload = JSON.parse(line.substring(6));
if (payload.type === 'log') {
addLog(payload.message);
} else if (payload.type === 'done') {
const newData = payload.data;
newData.forEach(scrapedItem => {
const target = rawData.find(item =>
item[0].replace(/\s/g, '').includes(scrapedItem.projectName.replace(/\s/g, '')) ||
scrapedItem.projectName.replace(/\s/g, '').includes(item[0].replace(/\s/g, ''))
);
if (target) {
if (scrapedItem.recentLog !== "기존데이터유지") {
target[3] = scrapedItem.recentLog;
}
target[4] = scrapedItem.fileCount;
}
});
document.getElementById('projectAccordion').innerHTML = '';
init();
addLog(">>> 모든 동기화 작업이 완료되었습니다!");
alert(`총 ${newData.length}개 프로젝트 동기화 완료!`);
logConsole.style.display = 'none';
}
}
}
}
} catch (e) {
addLog(`오류 발생: ${e.message}`);
alert("서버 연결 실패. 백엔드 서버가 실행 중인지 확인하세요.");
console.error(e);
} finally {
btn.classList.remove('loading');
btn.innerHTML = `<span class="spinner"></span> 데이터 동기화 (크롤링)`;
btn.disabled = false;
function scrollToProject(name) {
closeActivityModal();
const target = Array.from(document.querySelectorAll('.repo-title')).find(t => t.innerText.trim() === name.trim())?.closest('.accordion-header');
if (target) {
let p = target.parentElement;
while (p && p !== document.body) { if (p.classList.contains('continent-group') || p.classList.contains('country-group')) p.classList.add('active'); p = p.parentElement; }
target.parentElement.classList.add('active');
const pos = target.getBoundingClientRect().top + window.pageYOffset - 220;
window.scrollTo({ top: pos, behavior: 'smooth' });
target.style.backgroundColor = 'var(--primary-lv-1)';
setTimeout(() => target.style.backgroundColor = '', 2000);
}
}
// --- 크롤링 및 인증 제어 ---
async function syncData() {
if (isCrawling) {
if (confirm("크롤링을 중단하시겠습니까?")) {
const res = await fetch('/stop-sync');
if ((await res.json()).success) document.getElementById('syncBtn').innerText = "중단 요청 중...";
}
return;
}
const modal = document.getElementById('authModal');
if (modal) {
document.getElementById('authId').value = ''; document.getElementById('authPw').value = '';
document.getElementById('authErrorMessage').style.display = 'none';
modal.style.display = 'flex'; document.getElementById('authId').focus();
}
}
function closeAuthModal() { document.getElementById('authModal').style.display = 'none'; }
async function submitAuth() {
const id = document.getElementById('authId').value, pw = document.getElementById('authPw').value, err = document.getElementById('authErrorMessage');
try {
const res = await fetch('/auth/crawl', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({user_id:id, password:pw}) });
const data = await res.json();
if (data.success) { closeAuthModal(); startCrawlProcess(); }
else { err.innerText = "크롤링을 할 수 없습니다."; err.style.display = 'block'; }
} catch { err.innerText = "서버 연결 실패"; err.style.display = 'block'; }
}
async function startCrawlProcess() {
isCrawling = true;
const btn = document.getElementById('syncBtn'), logC = document.getElementById('logConsole'), logB = document.getElementById('logBody');
btn.classList.add('loading'); btn.style.backgroundColor = 'var(--error-color)'; btn.innerHTML = `<span class="spinner"></span> 크롤링 중단`;
logC.style.display = 'block'; logB.innerHTML = '<div style="color:#aaa; margin-bottom:10px;">>>> 엔진 초기화 중...</div>';
try {
const res = await fetch(`/sync`);
const reader = res.body.getReader(), decoder = new TextDecoder();
while (true) {
const { done, value } = await reader.read(); if (done) break;
decoder.decode(value).split('\n').forEach(line => {
if (line.startsWith('data: ')) {
const p = JSON.parse(line.substring(6));
if (p.type === 'log') {
const div = document.createElement('div'); div.innerText = `[${new Date().toLocaleTimeString()}] ${p.message}`;
logB.appendChild(div); logC.scrollTop = logC.scrollHeight;
} else if (p.type === 'done') { init(); alert(`동기화 종료`); logC.style.display = 'none'; }
}
});
}
} catch { alert("스트림 끊김"); }
finally { isCrawling = false; btn.classList.remove('loading'); btn.style.backgroundColor = ''; btn.innerHTML = `<span class="spinner"></span> 데이터 동기화 (크롤링)`; }
}
document.addEventListener('DOMContentLoaded', init);