411 lines
20 KiB
HTML
411 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Project Mail Manager</title>
|
|
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
|
|
<link rel="stylesheet" href="style/style.css">
|
|
<style>
|
|
/* 모달 스타일 */
|
|
.modal-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0; left: 0; width: 100%; height: 100%;
|
|
background: rgba(0,0,0,0.6);
|
|
z-index: 1000;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.modal-content {
|
|
background: white;
|
|
padding: 24px;
|
|
border-radius: 12px;
|
|
width: 90%;
|
|
max-width: 500px;
|
|
box-shadow: var(--box-shadow);
|
|
}
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding-bottom: 12px;
|
|
}
|
|
.select-group {
|
|
margin-bottom: 16px;
|
|
}
|
|
.select-group label {
|
|
display: block;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: var(--text-sub);
|
|
margin-bottom: 6px;
|
|
}
|
|
.modal-select {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
}
|
|
.btn-confirm {
|
|
width: 100%;
|
|
padding: 12px;
|
|
background: var(--primary-color);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* AI 추천 스타일 (Smart Mode) */
|
|
.ai-recommend.smart-mode {
|
|
display: inline-block;
|
|
background: linear-gradient(135deg, #f6f8ff 0%, #f0f4ff 100%);
|
|
color: #4a69bd;
|
|
border: 1px solid #d1d9ff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 수동 선택 스타일 (Manual Mode) */
|
|
.ai-recommend.manual-mode {
|
|
display: inline-block;
|
|
background: var(--hover-bg);
|
|
color: var(--text-sub);
|
|
border: 1px dashed var(--border-color);
|
|
font-weight: 400;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.path-display {
|
|
cursor: pointer;
|
|
padding: 4px 10px;
|
|
border-radius: 6px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.path-display:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 경로 선택 모달 -->
|
|
<div id="pathModal" class="modal-overlay">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 style="margin:0; font-size:16px;">파일 보관 경로 선택</h3>
|
|
<span style="cursor:pointer; font-size:20px;" onclick="closeModal()">×</span>
|
|
</div>
|
|
<div class="select-group">
|
|
<label>1단계: 탭 (Tab)</label>
|
|
<select id="tabSelect" class="modal-select" onchange="updateCategories()"></select>
|
|
</div>
|
|
<div class="select-group">
|
|
<label>2단계: 카테고리 (Category)</label>
|
|
<select id="categorySelect" class="modal-select" onchange="updateSubs()"></select>
|
|
</div>
|
|
<div class="select-group">
|
|
<label>3단계: 서브카테고리 (Sub-Category)</label>
|
|
<select id="subSelect" class="modal-select"></select>
|
|
</div>
|
|
<button class="btn-confirm" onclick="applyPathSelection()">경로 확정하기</button>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="topbar">
|
|
<div class="topbar-header">
|
|
<a href="/"><h2>Project Master Test</h2></a>
|
|
</div>
|
|
<ul class="nav-list">
|
|
<li class="nav-item" onclick="location.href='/dashboard'">대시보드</li>
|
|
<li class="nav-item active" onclick="location.href='/mailTest'">메일관리</li>
|
|
<li class="nav-item">로그관리</li>
|
|
<li class="nav-item">파일관리</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="mail-wrapper">
|
|
<aside class="mail-sidebar">
|
|
<select class="project-select">
|
|
<option>라오스 ITTC 관개 교육센터</option>
|
|
<option>베트남 푸옥호아 발전소</option>
|
|
</select>
|
|
<ul class="folder-list">
|
|
<li class="folder-item active" style="list-style:none;"><span>📥 수신함</span><span>12</span></li>
|
|
<li class="folder-item" style="list-style:none;"><span>📤 발신함</span></li>
|
|
<li class="folder-item" style="list-style:none;"><span>📁 중요메일</span></li>
|
|
</ul>
|
|
</aside>
|
|
|
|
<section class="mail-list-area">
|
|
<div class="search-bar">
|
|
<input type="text" placeholder="제목, 내용, 기관 검색...">
|
|
<div style="display:flex; gap:4px;">
|
|
<select style="flex:1; padding:4px; font-size:11px;"><option>모든 상대기관</option></select>
|
|
<select style="flex:1; padding:4px; font-size:11px;"><option>전체 기간</option></select>
|
|
</div>
|
|
</div>
|
|
<div class="mail-items-container">
|
|
<div class="mail-item active">
|
|
<div style="display:flex; justify-content:space-between; margin-bottom:4px;">
|
|
<span style="font-weight:700; color:var(--primary-color);">라오스 농림부</span>
|
|
<span style="font-size:11px; color:var(--text-sub);">오후 2:30</span>
|
|
</div>
|
|
<div style="font-weight:600; font-size:12px; margin-bottom:4px;">ITTC 교육센터 착공식 일정 협의</div>
|
|
<div style="font-size:11px; color:var(--text-sub); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;">안녕하세요. 착공식 관련하여 첨부 드리는 공문을...</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="mail-content-area">
|
|
<div class="mail-content-header">
|
|
<h2 style="font-size:18px; color:var(--primary-color); margin-bottom:8px;">ITTC 교육센터 착공식 일정 협의 요청</h2>
|
|
<div style="font-size:12px; color:var(--text-sub);"><strong>보낸사람</strong> pany.s@lao.gov.la (라오스 농림부)</div>
|
|
<div style="font-size:12px; color:var(--text-sub);"><strong>날짜</strong> 2026년 2월 26일 14:30</div>
|
|
</div>
|
|
<div class="mail-body">
|
|
안녕하세요. 이태훈 선임연구원님.<br><br>
|
|
라오스 ITTC 관개 교육센터 착공식과 관련하여 정부 측 인사의 일정을 반영한 최종 공문을 송부합니다.<br>
|
|
첨부파일의 세부 계획안을 검토하신 후, 프로젝트 대시보드의 '과업계획' 탭에 업로드 및 공유 부탁드립니다.
|
|
</div>
|
|
|
|
<div class="attachment-area">
|
|
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
|
|
<div style="font-weight:700; font-size:13px;">첨부파일 리스트</div>
|
|
<div class="ai-toggle-wrap">
|
|
<span class="ai-label">AI 판단</span>
|
|
<label class="switch">
|
|
<input type="checkbox" id="aiToggle" onchange="renderFiles()">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div id="attachmentList"></div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script>
|
|
let currentFiles = [];
|
|
let editingIndex = -1;
|
|
|
|
const HIERARCHY = {
|
|
"행정": {
|
|
"계약": ["계약관리", "기성관리", "업무지시서", "인원관리"],
|
|
"업무관리": ["업무일지(2025)", "업무일지(2025년 이전)", "발주처 정기보고", "본사업무보고", "공사감독일지", "양식서류"]
|
|
},
|
|
"설계성과품": {
|
|
"시방서": ["공사시방서", "장비 반입허가 검토서"],
|
|
"설계도면": ["공통", "토공", "비탈면안전공", "배수공", "교량공", "포장공", "교통안전시설공", "부대공", "용지공 & 기타공"],
|
|
"수량산출서": ["토공", "비탈면안전공", "배수공", "교량공", "포장공", "교통안전시설공", "부대공", "용지공 & 기타공"],
|
|
"내역서": ["단가산출서"],
|
|
"보고서": ["실시설계보고서", "지반조사보고서", "구조계산서", "수리 및 전기계산서", "기타보고서", "기술자문 및 심의"],
|
|
"측량계산부": ["측량계산부"],
|
|
"설계단계 수행협의": ["회의·협의"]
|
|
},
|
|
"시공성과품": {
|
|
"설계도면": ["공통", "토공", "비탈면안전공", "배수공", "교량공", "포장공", "교통안전시설공", "부대공", "용지공 & 기타공"]
|
|
},
|
|
"시공검측": {
|
|
"토공": ["검측 (깨기)", "검측 (연약지반)", "검측 (발파)", "검측 (노체)", "검측 (노상)", "검측 (토취장)"],
|
|
"배수공": ["검측 (V형측구)", "검측 (산마루측구)", "검측 (U형측구)", "검측 (U형측구)(안)", "검측 (L형측구, J형측구)", "검측 (도수로)", "검측 (도수로)(안)", "검측 (횡배수관)", "검측 (종배수관)", "검측 (맹암거)", "검측 (통로암거)", "검측 (수로암거)", "검측 (호안공)", "검측 (옹벽공)", "검측 (용수개거)"],
|
|
"구조물공": ["검측 (평목교-거더, 부대공)", "검측 (평목교)(안)", "검측 (개착터널, 생태통로)"],
|
|
"포장공": ["검측 (기층, 보조기층)"],
|
|
"부대공": ["검측 (환경)", "검측 (지장가옥,건물 철거)", "검측 (방음벽 등)"],
|
|
"비탈면안전공": ["검측 (식생보호공)", "검측 (구조물보호공)"],
|
|
"교통안전시설공": ["검측 (낙석방지책)"],
|
|
"검측 양식서류": ["검측 양식서류"]
|
|
},
|
|
"설계변경": {
|
|
"실정보고(어천~공주)": ["토공", "배수공", "교량공(평목교)", "구조물공", "포장공", "교통안전공", "부대공", "전기공사", "미확정공", "안전관리", "환경관리", "품질관리", "자재관리", "지장물", "기타"],
|
|
"실정보고(대술~정안)": ["토공", "배수공", "비탈면안전공", "포장공", "부대공", "안전관리", "환경관리", "자재관리", "기타"],
|
|
"기술지원 검토": ["토공", "배수공", "교량공(평목교)", "구조물&부대공", "기타"],
|
|
"시공계획(어천~공주)": ["토공", "배수공", "교량공(평목교)", "구조물&부대&포장&교통안전공", "환경 및 품질관리"]
|
|
},
|
|
"공사관리": {
|
|
"공정·일정": ["공정표", "월간 공정보고", "작업일보"],
|
|
"품질 관리": ["품질시험계획서", "품질시험 실적보고", "콘크리트 타설현황[어천~공주(4차)]", "품질관리비 사용내역", "균열관리", "품질관리 양식서류"],
|
|
"안전 관리": ["안전관리계획서", "안전관리 실적보고", "위험성 평가", "사전작업허가서", "안전관리비 사용내역", "안전관리수준평가", "안전관리 양식서류"],
|
|
"환경 관리": ["환경영향평가", "사전재해영향성검토", "유지관리 및 보수점검", "환경보전비 사용내역", "건설폐기물 관리"],
|
|
"자재 관리 (관급)": ["자재구매요청 (레미콘, 철근)", "자재구매요청 (그 외)", "납품기한", "계약 변경", "자재 반입·수불 관리", "자재관리 양식서류"],
|
|
"자재 관리 (사급)": ["자재공급원 승인", "자재 반입·수불 관리", "자재 검수·확인"],
|
|
"점검 (정리중)": ["내부점검", "외부점검"],
|
|
"공문": ["접수(수신)", "발송(발신)", "하도급", "인력", "방침"]
|
|
},
|
|
"민원관리": {
|
|
"민원(어천~공주)": ["처리대장", "보상", "공사일반", "환경분쟁"],
|
|
"실정보고(어천~공주)": ["민원"],
|
|
"실정보고(대술~정안)": ["민원"]
|
|
}
|
|
};
|
|
|
|
async function loadAttachments() {
|
|
try {
|
|
const res = await fetch('/attachments');
|
|
currentFiles = await res.json();
|
|
renderFiles();
|
|
} catch (e) {
|
|
console.error("Failed to load attachments:", e);
|
|
}
|
|
}
|
|
|
|
function renderFiles() {
|
|
const isAiActive = document.getElementById('aiToggle').checked;
|
|
const container = document.getElementById('attachmentList');
|
|
container.innerHTML = '';
|
|
|
|
currentFiles.forEach((file, index) => {
|
|
const item = document.createElement('div');
|
|
item.className = 'attachment-item-wrap';
|
|
item.style.marginBottom = "8px";
|
|
|
|
let pathText = "경로를 선택해주세요";
|
|
let modeClass = "manual-mode";
|
|
|
|
if (file.analysis) {
|
|
const prefix = file.analysis.isManual ? "선택 경로: " : "추천: ";
|
|
pathText = `${prefix}${file.analysis.suggested_path}`;
|
|
modeClass = file.analysis.isManual ? "manual-mode" : "smart-mode";
|
|
} else if (isAiActive) {
|
|
pathText = "AI 분석 대기 중...";
|
|
modeClass = "smart-mode";
|
|
}
|
|
|
|
item.innerHTML = `
|
|
<div class="attachment-item">
|
|
<div class="file-info">
|
|
<span style="font-size:20px;">📄</span>
|
|
<div>
|
|
<div style="font-size:12px; font-weight:700;">${file.name}</div>
|
|
<div style="font-size:10px; color:var(--text-sub);">${file.size}</div>
|
|
</div>
|
|
<span id="recommend-${index}" class="ai-recommend path-display ${modeClass}" onclick="openPathModal(${index})">${pathText}</span>
|
|
</div>
|
|
<div class="btn-group">
|
|
${isAiActive ? `<button class="btn-upload btn-ai" onclick="startAnalysis(${index})">AI 분석</button>` : ''}
|
|
<button class="btn-upload btn-normal" onclick="confirmUpload(${index})">파일 업로드</button>
|
|
</div>
|
|
</div>
|
|
<div id="log-area-${index}" class="file-log-area">
|
|
<div id="log-content-${index}"></div>
|
|
</div>
|
|
`;
|
|
container.appendChild(item);
|
|
});
|
|
}
|
|
|
|
function openPathModal(index) {
|
|
editingIndex = index;
|
|
const modal = document.getElementById('pathModal');
|
|
const tabSelect = document.getElementById('tabSelect');
|
|
tabSelect.innerHTML = Object.keys(HIERARCHY).map(tab => `<option value="${tab}">${tab}</option>`).join('');
|
|
updateCategories();
|
|
modal.style.display = 'flex';
|
|
}
|
|
|
|
function updateCategories() {
|
|
const tab = document.getElementById('tabSelect').value;
|
|
const catSelect = document.getElementById('categorySelect');
|
|
const cats = Object.keys(HIERARCHY[tab]);
|
|
catSelect.innerHTML = cats.map(cat => `<option value="${cat}">${cat}</option>`).join('');
|
|
updateSubs();
|
|
}
|
|
|
|
function updateSubs() {
|
|
const tab = document.getElementById('tabSelect').value;
|
|
const cat = document.getElementById('categorySelect').value;
|
|
const subSelect = document.getElementById('subSelect');
|
|
const subs = HIERARCHY[tab][cat];
|
|
subSelect.innerHTML = subs.map(sub => `<option value="${sub}">${sub}</option>`).join('');
|
|
}
|
|
|
|
function applyPathSelection() {
|
|
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;
|
|
|
|
renderFiles();
|
|
closeModal();
|
|
}
|
|
|
|
function closeModal() {
|
|
document.getElementById('pathModal').style.display = 'none';
|
|
}
|
|
|
|
async function startAnalysis(index) {
|
|
const file = currentFiles[index];
|
|
const logArea = document.getElementById(`log-area-${index}`);
|
|
const logContent = document.getElementById(`log-content-${index}`);
|
|
const recLabel = document.getElementById(`recommend-${index}`);
|
|
|
|
logArea.classList.add('active');
|
|
logContent.innerHTML = '<div class="log-line log-info">>>> 3중 레이어 AI 분석 엔진 가동...</div>';
|
|
recLabel.innerText = '분석 중...';
|
|
|
|
try {
|
|
const res = await fetch(`/analyze-file?filename=${encodeURIComponent(file.name)}`);
|
|
const analysis = await res.json();
|
|
if (analysis.error) throw new Error(analysis.error);
|
|
|
|
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);
|
|
});
|
|
|
|
const resultLine = document.createElement('div');
|
|
resultLine.className = 'log-line log-success';
|
|
resultLine.style.marginTop = "8px";
|
|
resultLine.innerHTML = `[최종 결과] ${result.suggested_path}<br>└ 신뢰도: 100%`;
|
|
logContent.appendChild(resultLine);
|
|
|
|
const snippetArea = document.createElement('div');
|
|
snippetArea.style.cssText = "margin-top:10px; padding:10px; background:#1a202c; color:#a0aec0; font-size:11px; border-radius:4px; border-left:3px solid #63b3ed; max-height:100px; overflow-y:auto;";
|
|
snippetArea.innerHTML = `<strong>[AI가 읽은 핵심 내용]</strong><br>${result.snippet || "텍스트 추출 불가"}`;
|
|
logContent.appendChild(snippetArea);
|
|
|
|
currentFiles[index].analysis = {
|
|
suggested_path: result.suggested_path,
|
|
isManual: false
|
|
};
|
|
renderFiles();
|
|
|
|
} catch (e) {
|
|
logContent.innerHTML += `<div class="log-line" style="color:red;">ERR: ${e.message}</div>`;
|
|
recLabel.innerText = '분석 실패';
|
|
}
|
|
}
|
|
|
|
function confirmUpload(index) {
|
|
const file = currentFiles[index];
|
|
const path = file.analysis ? file.analysis.suggested_path : "선택한 탭";
|
|
let message = `[${file.name}] 파일을 업로드하시겠습니까?`;
|
|
if(file.analysis) message = `정해진 위치로 업로드하시겠습니까?\n\n위치: ${path}`;
|
|
if (confirm(message)) alert("업로드가 완료되었습니다.");
|
|
}
|
|
|
|
loadAttachments();
|
|
</script>
|
|
</body>
|
|
</html>
|