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

389
js/mail.js
View File

@@ -82,6 +82,7 @@ const MAIL_SAMPLES = {
let currentMailTab = 'inbound';
let filteredMails = [];
// --- 첨부파일 데이터 로드 및 렌더링 ---
async function loadAttachments() {
try {
const res = await fetch('/attachments');
@@ -116,16 +117,16 @@ function renderFiles() {
}
item.innerHTML = `
<div class="attachment-item" onclick="showPreview(${index}, event)">
<span class="file-icon">📄</span>
<div class="file-details">
<div class="attachment-item" onclick="showPreview(${index}, event)" style="position:relative;">
<span class="file-icon" style="pointer-events:none;">📄</span>
<div class="file-details" style="pointer-events:none;">
<div class="file-name" title="${file.name}">${file.name}</div>
<div class="file-size">${file.size}</div>
</div>
<div class="btn-group">
<div class="btn-group" onclick="event.stopPropagation()" style="position:relative; z-index:2;">
<span id="recommend-${index}" class="ai-recommend path-display ${modeClass}" onclick="openPathModal(${index}, event)">${pathText}</span>
${isAiActive ? `<button class="btn-upload btn-ai" onclick="startAnalysis(${index}, event)">AI 분석</button>` : ''}
<button class="btn-upload btn-normal" onclick="confirmUpload(${index}, event)">파일 업로드</button>
<button class="btn-upload btn-normal" onclick="confirmUpload(${index}, event)">파일업로드</button>
</div>
</div>
<div id="log-area-${index}" class="file-log-area">
@@ -136,18 +137,71 @@ function renderFiles() {
});
}
// --- 미리보기 제어 ---
function togglePreviewAuto() {
const area = document.getElementById('mailPreviewArea');
const icon = document.getElementById('previewToggleIcon');
if (!area) return;
const isActive = area.classList.toggle('active');
if (icon) icon.innerText = isActive ? '▶' : '◀';
}
function showPreview(index, event) {
// 버튼 클릭 시 미리보기 방지
if (event && (event.target.closest('.btn-group') || event.target.closest('.path-display'))) return;
const file = currentFiles[index];
if (!file) return;
const previewContainer = document.getElementById('previewContainer');
const fullViewBtn = document.getElementById('fullViewBtn');
const previewArea = document.getElementById('mailPreviewArea');
const toggleIcon = document.getElementById('previewToggleIcon');
// UI 활성화
if (previewArea) {
previewArea.classList.add('active');
if (toggleIcon) toggleIcon.innerText = '▶';
}
// 파일 경로 및 유형 처리
const isPdf = file.name.toLowerCase().endsWith('.pdf');
const fileUrl = `/sample_files/${encodeURIComponent(file.name)}`;
if (fullViewBtn) {
fullViewBtn.style.display = 'block';
fullViewBtn.onclick = () => window.open(fileUrl, 'PMFullView', 'width=1000,height=800');
}
if (isPdf) {
previewContainer.innerHTML = `<iframe src="${fileUrl}#page=1" style="width:100%; height:100%; border:none;"></iframe>`;
} else {
previewContainer.innerHTML = `
<div style="width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; text-align:center;">
<img src="/sample.png" style="max-width:80%; max-height:60%; margin-bottom:20px;">
<div style="font-weight:700; color:var(--primary-color);">${file.name}</div>
</div>`;
}
// 아이템 활성화 스타일
document.querySelectorAll('.attachment-item').forEach(item => item.classList.remove('active'));
if (event && event.currentTarget) event.currentTarget.classList.add('active');
}
// --- 메일 리스트 관리 ---
function renderMailList(tabType, mailsToShow = null) {
currentMailTab = tabType;
const container = document.querySelector('.mail-items-container');
if (!container) return;
const mails = mailsToShow || MAIL_SAMPLES[tabType] || [];
filteredMails = mails; // 현재 보여지는 리스트 저장
filteredMails = mails;
updateBulkActionBar();
container.innerHTML = mails.map((mail, idx) => `
<div class="mail-item ${mail.active ? 'active' : ''}" onclick="selectMailItem(this, ${idx})">
<input type="checkbox" class="mail-item-checkbox" onclick="handleCheckboxClick(event)" onchange="updateBulkActionBar()">
<input type="checkbox" class="mail-item-checkbox" onclick="event.stopPropagation()" onchange="updateBulkActionBar()">
<div class="mail-item-content">
<div class="flex-between" style="margin-bottom:6px;">
<span style="font-weight:700; font-size:14px; color:${mail.active ? 'var(--primary-color)' : 'var(--text-main)'};">
@@ -166,23 +220,73 @@ function renderMailList(tabType, mailsToShow = null) {
</div>
`).join('');
// 초기 로드 시 active가 있다면 본문도 업데이트
const activeIdx = mails.findIndex(m => m.active);
if (activeIdx !== -1) {
updateMailContent(mails[activeIdx]);
}
if (activeIdx !== -1) updateMailContent(mails[activeIdx]);
}
function handleCheckboxClick(event) {
event.stopPropagation();
function selectMailItem(el, index) {
document.querySelectorAll('.mail-item').forEach(item => {
item.classList.remove('active');
const nameSpan = item.querySelector('.mail-item-content span:first-child');
if (nameSpan) nameSpan.style.color = 'var(--text-main)';
});
el.classList.add('active');
const currentNameSpan = el.querySelector('.mail-item-content span:first-child');
if (currentNameSpan) currentNameSpan.style.color = 'var(--primary-color)';
const mail = filteredMails[index];
if (mail) updateMailContent(mail);
}
function updateMailContent(mail) {
const headerTitle = document.querySelector('.mail-content-header h2');
const senderInfo = document.querySelectorAll('.mail-content-header div')[0];
const dateInfo = document.querySelectorAll('.mail-content-header div')[1];
const bodyInfo = document.querySelector('.mail-body');
if (headerTitle) headerTitle.innerText = mail.title;
if (senderInfo) senderInfo.innerHTML = `<strong>${currentMailTab === 'outbound' ? '받는사람' : '보낸사람'}</strong> ${mail.email} (${mail.person})`;
if (dateInfo) dateInfo.innerHTML = `<strong>날짜</strong> ${mail.time}`;
if (bodyInfo) bodyInfo.innerHTML = mail.summary.replace(/\n/g, '<br>') + "<br><br>본 내용은 샘플 데이터입니다.";
}
function switchMailTab(el, tabType) {
document.querySelectorAll('.mail-tab').forEach(tab => tab.classList.remove('active'));
el.classList.add('active');
MAIL_SAMPLES[tabType].forEach((m, idx) => m.active = (idx === 0));
renderMailList(tabType);
}
// --- 검색 및 필터 ---
function searchMails() {
const query = document.querySelector('.search-bar input[type="text"]').value.toLowerCase();
const startDate = document.getElementById('startDate').value;
const endDate = document.getElementById('endDate').value;
const results = (MAIL_SAMPLES[currentMailTab] || []).filter(mail => {
const matchQuery = mail.title.toLowerCase().includes(query) ||
mail.person.toLowerCase().includes(query) ||
mail.summary.toLowerCase().includes(query);
let matchDate = true;
if (startDate) matchDate = matchDate && (mail.time >= startDate);
if (endDate) matchDate = matchDate && (mail.time <= endDate);
return matchQuery && matchDate;
});
renderMailList(currentMailTab, results);
}
function resetSearch() {
document.querySelector('.search-bar input[type="text"]').value = '';
document.getElementById('startDate').value = '';
document.getElementById('endDate').value = '';
renderMailList(currentMailTab);
}
// --- 액션바 관리 ---
function updateBulkActionBar() {
const checkboxes = document.querySelectorAll('.mail-item-checkbox:checked');
const actionBar = document.getElementById('mailBulkActions');
const selectedCountSpan = document.getElementById('selectedCount');
const selectAllCheckbox = document.getElementById('selectAllMails');
if (!actionBar || !selectedCountSpan) return;
if (checkboxes.length > 0) {
@@ -190,13 +294,13 @@ function updateBulkActionBar() {
selectedCountSpan.innerText = `${checkboxes.length}개 선택됨`;
} else {
actionBar.classList.remove('active');
if (selectAllCheckbox) selectAllCheckbox.checked = false;
const selectAll = document.getElementById('selectAllMails');
if (selectAll) selectAll.checked = false;
}
}
function toggleSelectAll(el) {
const checkboxes = document.querySelectorAll('.mail-item-checkbox');
checkboxes.forEach(cb => cb.checked = el.checked);
document.querySelectorAll('.mail-item-checkbox').forEach(cb => cb.checked = el.checked);
updateBulkActionBar();
}
@@ -222,145 +326,41 @@ function deleteSelectedMails() {
renderMailList(currentMailTab);
}
function selectMailItem(el, index) {
// UI 업데이트
document.querySelectorAll('.mail-item').forEach(item => {
item.classList.remove('active');
const nameSpan = item.querySelector('.mail-item-content span:first-child');
if (nameSpan) nameSpan.style.color = 'var(--text-main)';
});
el.classList.add('active');
const currentNameSpan = el.querySelector('.mail-item-content span:first-child');
if (currentNameSpan) currentNameSpan.style.color = 'var(--primary-color)';
// 본문 업데이트
const mail = filteredMails[index];
if (mail) {
updateMailContent(mail);
}
}
function updateMailContent(mail) {
const headerTitle = document.querySelector('.mail-content-header h2');
const senderInfo = document.querySelectorAll('.mail-content-header div')[0];
const dateInfo = document.querySelectorAll('.mail-content-header div')[1];
const bodyInfo = document.querySelector('.mail-body');
if (headerTitle) headerTitle.innerText = mail.title;
if (senderInfo) senderInfo.innerHTML = `<strong>${currentMailTab === 'outbound' ? '받는사람' : '보낸사람'}</strong> ${mail.email} (${mail.person})`;
if (dateInfo) dateInfo.innerHTML = `<strong>날짜</strong> ${mail.time}`;
if (bodyInfo) bodyInfo.innerHTML = mail.summary.replace(/\n/g, '<br>') + "<br><br>" + "본 내용은 샘플 데이터입니다.";
}
function switchMailTab(el, tabType) {
document.querySelectorAll('.mail-tab').forEach(tab => tab.classList.remove('active'));
el.classList.add('active');
// 탭 이동 시 active 상태 초기화 (첫 번째 메일만 active 하거나 전부 해제)
MAIL_SAMPLES[tabType].forEach((m, idx) => m.active = (idx === 0));
renderMailList(tabType);
}
// --- 검색 기능 ---
function searchMails() {
const query = document.querySelector('.search-bar input[type="text"]').value.toLowerCase();
const startDate = document.getElementById('startDate').value;
const endDate = document.getElementById('endDate').value;
const mails = MAIL_SAMPLES[currentMailTab];
const results = mails.filter(mail => {
const matchQuery = mail.title.toLowerCase().includes(query) ||
mail.person.toLowerCase().includes(query) ||
mail.summary.toLowerCase().includes(query);
let matchDate = true;
if (startDate) matchDate = matchDate && (mail.time >= startDate);
if (endDate) matchDate = matchDate && (mail.time <= endDate);
return matchQuery && matchDate;
});
renderMailList(currentMailTab, results);
}
function resetSearch() {
document.querySelector('.search-bar input[type="text"]').value = '';
document.getElementById('startDate').value = '';
document.getElementById('endDate').value = '';
document.querySelector('.search-bar select').selectedIndex = 0;
renderMailList(currentMailTab);
}
// --- 모달 및 기타 유틸리티 ---
function togglePreview(show) {
const previewArea = document.getElementById('mailPreviewArea');
if (show) previewArea.classList.add('active');
else previewArea.classList.remove('active');
}
function showPreview(index, event) {
if (event.target.closest('.btn-group') || event.target.closest('.path-display')) return;
const file = currentFiles[index];
const previewContainer = document.getElementById('previewContainer');
const fullViewBtn = document.getElementById('fullViewBtn');
document.querySelectorAll('.attachment-item').forEach(item => item.classList.remove('active'));
event.currentTarget.classList.add('active');
togglePreview(true);
const isPdf = file.name.toLowerCase().endsWith('.pdf');
const fileUrl = `/sample_files/${encodeURIComponent(file.name)}`;
if (fullViewBtn) {
fullViewBtn.style.display = 'block';
fullViewBtn.onclick = () => window.open(fileUrl, 'PMFullView', 'width=1000,height=800');
}
if (isPdf) {
previewContainer.innerHTML = `<iframe src="${fileUrl}#page=1" style="width:100%; height:100%; border:none;"></iframe>`;
} else {
previewContainer.innerHTML = `<div style="width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; text-align:center;"><img src="/sample.png" class="preview-image"><div style="margin-top:20px; font-weight:700; color:var(--primary-color);">${file.name}</div></div>`;
}
}
// --- 경로 선택 모달 ---
function openPathModal(index, event) {
if (event) event.stopPropagation();
editingIndex = index;
const modal = document.getElementById('pathModal');
const tabSelect = document.getElementById('tabSelect');
if (!tabSelect) return;
if (!modal || !tabSelect) return;
tabSelect.innerHTML = Object.keys(HIERARCHY).map(tab => `<option value="${tab}">${tab}</option>`).join('');
updateCategories();
modal.style.display = 'flex';
}
function updateCategories() {
const tabSelect = document.getElementById('tabSelect');
const tab = document.getElementById('tabSelect').value;
const catSelect = document.getElementById('categorySelect');
if (!tabSelect || !catSelect) return;
const tab = tabSelect.value;
const cats = Object.keys(HIERARCHY[tab]);
catSelect.innerHTML = cats.map(cat => `<option value="${cat}">${cat}</option>`).join('');
if (!catSelect) return;
catSelect.innerHTML = Object.keys(HIERARCHY[tab]).map(cat => `<option value="${cat}">${cat}</option>`).join('');
updateSubs();
}
function updateSubs() {
const tabSelect = document.getElementById('tabSelect');
const catSelect = document.getElementById('categorySelect');
const tab = document.getElementById('tabSelect').value;
const cat = document.getElementById('categorySelect').value;
const subSelect = document.getElementById('subSelect');
if (!tabSelect || !catSelect || !subSelect) return;
const tab = tabSelect.value;
const cat = catSelect.value;
const subs = HIERARCHY[tab][cat];
subSelect.innerHTML = subs.map(sub => `<option value="${sub}">${sub}</option>`).join('');
if (!subSelect) return;
subSelect.innerHTML = HIERARCHY[tab][cat].map(sub => `<option value="${sub}">${sub}</option>`).join('');
}
function applyPathSelection() {
const tabSelect = document.getElementById('tabSelect');
const catSelect = document.getElementById('categorySelect');
const subSelect = document.getElementById('subSelect');
const tab = tabSelect.value;
const cat = catSelect.value;
const sub = subSelect.value;
const tab = document.getElementById('tabSelect').value;
const cat = document.getElementById('categorySelect').value;
const sub = document.getElementById('subSelect').value;
const fullPath = `${tab} > ${cat} > ${sub}`;
if (!currentFiles[editingIndex].analysis) currentFiles[editingIndex].analysis = {};
currentFiles[editingIndex].analysis.suggested_path = fullPath;
currentFiles[editingIndex].analysis.isManual = true;
@@ -373,6 +373,7 @@ function closeModal() {
if (modal) modal.style.display = 'none';
}
// --- AI 분석 및 업로드 ---
async function startAnalysis(index, event) {
if (event) event.stopPropagation();
const file = currentFiles[index];
@@ -380,20 +381,21 @@ async function startAnalysis(index, event) {
const logContent = document.getElementById(`log-content-${index}`);
const recLabel = document.getElementById(`recommend-${index}`);
if (!logArea || !logContent || !recLabel) return;
logArea.classList.add('active');
logContent.innerHTML = '<div class="log-line log-info">>>> 3중 레이어 AI 분석 엔진 가동...</div>';
logContent.innerHTML = '<div class="log-line log-info">>>> AI 분석 엔진 가동 중...</div>';
recLabel.innerText = '분석 중...';
try {
const res = await fetch(`/analyze-file?filename=${encodeURIComponent(file.name)}`);
const analysis = await res.json();
const result = analysis.final_result;
const steps = [`1. 파일 포맷 분석: ${file.name.split('.').pop().toUpperCase()} 감지`, `2. 페이지 스캔: 총 ${analysis.total_pages}페이지 분석 완료`, `3. 문맥 추론: ${result.reason}`];
steps.forEach(step => {
const line = document.createElement('div');
line.className = 'log-line';
line.innerText = " " + step;
logContent.appendChild(line);
});
logContent.innerHTML = `
<div class="log-line">1. 파일 포맷 분석: ${file.name.split('.').pop().toUpperCase()} 감지</div>
<div class="log-line">2. 페이지 스캔: 총 ${analysis.total_pages}페이지 분석 완료</div>
<div class="log-line">3. 문맥 추론: ${result.reason}</div>
`;
currentFiles[index].analysis = { suggested_path: result.suggested_path, isManual: false };
renderFiles();
} catch (e) {
@@ -406,15 +408,13 @@ function confirmUpload(index, event) {
if (event) event.stopPropagation();
const file = currentFiles[index];
if (!file.analysis || !file.analysis.suggested_path) { alert("경로를 설정해주세요."); return; }
if (confirm(`정해진 위치로 업로드하시겠습니까?\n\n위치: ${file.analysis.suggested_path}`)) alert("업로드가 완료되었습니다.");
if (confirm(`업로드하시겠습니까?\n위치: ${file.analysis.suggested_path}`)) alert("완료되었습니다.");
}
// --- 주소록 기능 ---
// --- 주소록 ---
let addressBookData = [
{ name: "이태훈", dept: "PM Overseas / 선임연구원", email: "th.lee@projectmaster.com", phone: "010-1234-5678" },
{ name: "Pany S.", dept: "라오스 농림부 / 국장", email: "pany.s@lao.gov.la", phone: "+856-20-1234-5678" },
{ name: "김철수", dept: "현대건설 / 현장소장", email: "cs.kim@hdec.co.kr", phone: "010-9876-5432" },
{ name: "Nguyen Van A", dept: "베트남 전력청 / 팀장", email: "nva@evn.com.vn", phone: "+84-90-1234-5678" }
{ name: "Pany S.", dept: "라오스 농림부 / 국장", email: "pany.s@lao.gov.la", phone: "+856-20-1234-5678" }
];
let contactEditingIndex = -1;
@@ -425,33 +425,60 @@ function openAddressBook() {
function closeAddressBook() {
const modal = document.getElementById('addressBookModal');
if (modal) { modal.style.display = 'none'; document.getElementById('addContactForm').style.display = 'none'; contactEditingIndex = -1; }
if (modal) { modal.style.display = 'none'; document.getElementById('addContactForm').style.display = 'none'; }
}
function toggleAddContactForm() {
const form = document.getElementById('addContactForm');
if (!form) return;
if (form.style.display === 'none') {
form.style.display = 'block';
} else {
form.style.display = 'none';
contactEditingIndex = -1;
// 폼 초기화
document.getElementById('newContactName').value = '';
document.getElementById('newContactDept').value = '';
document.getElementById('newContactEmail').value = '';
document.getElementById('newContactPhone').value = '';
}
}
function editContact(index) {
const contact = addressBookData[index];
if (!contact) return;
contactEditingIndex = index;
document.getElementById('newContactName').value = contact.name;
document.getElementById('newContactDept').value = contact.dept;
document.getElementById('newContactEmail').value = contact.email;
document.getElementById('newContactPhone').value = contact.phone;
document.getElementById('addContactForm').style.display = 'block';
}
function deleteContact(index) {
if (!addressBookData[index]) return;
if (confirm(`'${addressBookData[index].name}'님을 주소록에서 삭제하시겠습니까?`)) {
addressBookData.splice(index, 1);
renderAddressBook();
}
}
function renderAddressBook() {
const body = document.getElementById('addressBookBody');
if (!body) return;
body.innerHTML = addressBookData.map((c, idx) => `<tr><td><strong>${c.name}</strong></td><td>${c.dept}</td><td>${c.email}</td><td>${c.phone}</td><td style="text-align:right;"><button class="_button-xsmall" onclick="editContact(${idx})">수정</button><button class="_button-xsmall" onclick="deleteContact(${idx})">삭제</button></td></tr>`).join('');
}
function toggleAddContactForm() {
const form = document.getElementById('addContactForm');
if (form.style.display === 'none') form.style.display = 'block';
else { form.style.display = 'none'; contactEditingIndex = -1; }
}
function editContact(index) {
const contact = addressBookData[index];
contactEditingIndex = index;
document.getElementById('newContactName').value = contact.name;
document.getElementById('newContactDept').value = contact.dept;
document.getElementById('newContactEmail').value = contact.email;
document.getElementById('newContactPhone').value = contact.phone;
document.getElementById('addContactForm').style.display = 'block';
}
function deleteContact(index) {
if (confirm(`'${addressBookData[index].name}'님을 주소록에서 삭제하시겠습니까?`)) { addressBookData.splice(index, 1); renderAddressBook(); }
body.innerHTML = addressBookData.map((c, idx) => `
<tr>
<td><strong>${c.name}</strong></td>
<td>${c.dept}</td>
<td>${c.email}</td>
<td>${c.phone}</td>
<td style="text-align:right;">
<button class="_button-xsmall" onclick="editContact(${idx})">수정</button>
<button class="_button-xsmall" style="color:var(--error-color); border-color:#feb2b2; background:#fff5f5;" onclick="deleteContact(${idx})">삭제</button>
</td>
</tr>`).join('');
}
function addContact() {
@@ -459,21 +486,17 @@ function addContact() {
const dept = document.getElementById('newContactDept').value;
const email = document.getElementById('newContactEmail').value;
const phone = document.getElementById('newContactPhone').value;
if (!name) { alert("이름을 입력해주세요."); return; }
const newData = { name, dept, email, phone };
if (contactEditingIndex > -1) { addressBookData[contactEditingIndex] = newData; contactEditingIndex = -1; }
else addressBookData.push(newData);
if (!name) return alert("이름을 입력해주세요.");
if (contactEditingIndex > -1) addressBookData[contactEditingIndex] = { name, dept, email, phone };
else addressBookData.push({ name, dept, email, phone });
renderAddressBook();
toggleAddContactForm();
}
function togglePreviewAuto() {
const area = document.getElementById('mailPreviewArea');
const icon = document.getElementById('previewToggleIcon');
const isActive = area.classList.toggle('active');
if (icon) icon.innerText = isActive ? '▶' : '◀';
document.getElementById('addContactForm').style.display = 'none';
contactEditingIndex = -1;
}
// 초기화
document.addEventListener('DOMContentLoaded', () => {
loadAttachments();
renderMailList('inbound');