feat: 메일 관리 시스템 UX 개선 및 기능 고도화
- UI/UX: 메일 리스트 영역 너비 확장(400px), 검색 및 날짜 선택 영역 여백 조정 - 기능: 탭별 샘플 데이터 동적 렌더링, 메일 검색 및 초기화 기능 구현 - 기능: 메일 선택 시 본문 내용 동적 업데이트 연동 - 기능: 메일 개별 삭제(텍스트 버튼) 및 체크박스를 이용한 다중 삭제 기능 추가 - UI: 메일 쓰기 및 주소록 버튼 하단 고정 레이아웃 적용
This commit is contained in:
BIN
.gitignore
vendored
Normal file
BIN
.gitignore
vendored
Normal file
Binary file not shown.
341
js/mail.js
341
js/mail.js
@@ -51,6 +51,37 @@ const HIERARCHY = {
|
||||
}
|
||||
};
|
||||
|
||||
const MAIL_SAMPLES = {
|
||||
inbound: [
|
||||
{ person: "라오스 농림부", email: "pany.s@lao.gov.la", time: "2026-03-05", title: "ITTC 교육센터 착공식 일정 협의", summary: "안녕하세요. 착공식 관련하여 정부 측 인사의 일정을 반영한 최종 공문을 송부합니다. 원활한 진행을 위해 협조 부탁드립니다.", active: true },
|
||||
{ person: "베트남 전력청 (EVN)", email: "contact@evn.com.vn", time: "2026-03-05", title: "송전망 확충사업 기술자문 검토 요청", summary: "제8차 전력개발계획에 따른 북부 지역 계통 안정화 방안에 대한 귀사의 의견을 요청드립니다. 전문가의 식견이 필요합니다.", active: false },
|
||||
{ person: "현대건설 (김철수 소장)", email: "cs.kim@hdec.co.kr", time: "2026-03-04", title: "[긴급] 어천-공주(4차) 하도급 변경계약 통보", summary: "철거공사 물량 변동에 따른 계약 금액 조정 건입니다. 검토 후 승인 부탁드립니다. 기한이 촉박합니다.", active: false },
|
||||
{ person: "한국도로공사", email: "safety@ex.co.kr", time: "2026-02-24", title: "설 연휴 대비 현장 안전점검 실시 안내", summary: "전 현장을 대상으로 동절기 및 연휴 기간 화재 예방 및 비상연락망 점검을 실시할 예정입니다. 준비에 만전을 기해 주십시오.", active: false },
|
||||
{ person: "정안-대술 현장사무소", email: "office@jeongan.site", time: "2026-02-23", title: "지반조사보고서 및 구조계산서 송부", summary: "STA. 15+200 구간 암반 노출에 따른 설계 변경 기초 자료를 보내드립니다. 구조적 안전성 검토가 완료되었습니다.", active: false }
|
||||
],
|
||||
outbound: [
|
||||
{ person: "Pany S. (라오스 농림부)", email: "pany.s@lao.gov.la", time: "2026-03-05", title: "Re: ITTC 교육센터 착공식 일정 확인", summary: "네, 보내주신 공문 확인하였습니다. 내부 검토 후 회신 드리겠습니다. 긍정적인 방향으로 검토 중입니다.", active: false },
|
||||
{ person: "김철수 소장 (현대건설)", email: "cs.kim@hdec.co.kr", time: "2026-03-05", title: "하도급 변경계약 검토 의견 회신", summary: "요청하신 물량 변동 내역 중 일부 항목에 대해 보완이 필요합니다. 상세 내역을 다시 정리해서 보내주세요.", active: false },
|
||||
{ person: "베트남 전력청 담당자", email: "admin@evn.com.vn", time: "2026-03-05", title: "[자료제공] 송전망 기술 규격서", summary: "요청하신 한국 내 송전망 설계 가이드라인 및 규격서를 송부합니다. 업무에 참고하시기 바랍니다.", active: false },
|
||||
{ person: "공사관리부 (본사)", email: "hq_pm@projectmaster.com", time: "2026-03-04", title: "어천-공주 2월 월간 공정보고서 제출", summary: "2월 한 달간의 주요 공정 및 예산 집행 현황 보고서입니다. 목표 대비 진척률은 95%입니다.", active: false },
|
||||
{ person: "안전관리팀", email: "safety_team@projectmaster.com", time: "2026-03-04", title: "현장 안전 점검 조치 결과 보고", summary: "지난 점검 시 지적된 5개 항목에 대한 시정 조치를 완료하였습니다. 증빙 사진을 첨부합니다.", active: false },
|
||||
{ person: "라오스 관개국", email: "irrigation@lao.gov.la", time: "2026-03-03", title: "교육생 명단 및 비자 발급 서류 요청", summary: "국내 초청 연수를 위한 교육생 여권 사본 및 비자 서류를 요청드립니다. 빠른 회신 부탁드립니다.", active: false },
|
||||
{ person: "동아지질 현장팀", email: "donga@site.com", time: "2026-03-02", title: "지반 개량 공법 검토안 발송", summary: "연약지반 구간에 대한 DCM 공법 적용 검토 자료입니다. 시공 효율성 향상이 기대됩니다.", active: false },
|
||||
{ person: "품질관리실", email: "quality@projectmaster.com", time: "2026-02-28", title: "레미콘 공급원 승인 서류 제출", summary: "어천 현장용 레미콘 공급업체(동양) 승인 요청 건입니다. 시험 성적서를 첨부하였습니다.", active: false },
|
||||
{ person: "민원인 (정안면)", email: "citizen@jeongan.net", time: "2026-02-27", title: "소음 분진 대책 수립 답변", summary: "민원 제기하신 구간에 대해 방진벽 추가 설치 및 살수차 증차를 결정하였습니다. 불편을 드려 죄송합니다.", active: false },
|
||||
{ person: "한국엔지니어링", email: "design@k-eng.com", time: "2026-02-26", title: "설계 도면 수정 사항 반영 요청", summary: "STA. 250~300 구간 옹벽 높이 변경 사항 반영 부탁드립니다. 배수 계획과 연동되어야 합니다.", active: false }
|
||||
],
|
||||
drafts: [
|
||||
{ person: "(임시저장)", email: "unknown@draft.com", time: "2026-03-05", title: "기술 지원 검토 의견서 작성 중", summary: "검토 의견: 1. 교량 상부 공법 변경에 따른 구조 검토가 선행되어야 함. 2. 공기 단축 가능성 분석 중...", active: false }
|
||||
],
|
||||
deleted: [
|
||||
{ person: "스팸메일", email: "spam@ads.com", time: "2026-02-20", title: "[광고] 건설 장비 렌탈 특가", summary: "본 메일은 관련 법규에 의거하여 발송되었습니다. 무선 굴착기 및 지게차 렌탈 할인 혜택을 확인하세요.", active: false }
|
||||
]
|
||||
};
|
||||
|
||||
let currentMailTab = 'inbound';
|
||||
let filteredMails = [];
|
||||
|
||||
async function loadAttachments() {
|
||||
try {
|
||||
const res = await fetch('/attachments');
|
||||
@@ -105,62 +136,188 @@ function renderFiles() {
|
||||
});
|
||||
}
|
||||
|
||||
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; // 현재 보여지는 리스트 저장
|
||||
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()">
|
||||
<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)'};">
|
||||
${mail.person}
|
||||
</span>
|
||||
<div class="mail-item-info">
|
||||
<span class="mail-date">${mail.time}</span>
|
||||
${tabType !== 'deleted' ? `<button class="btn-mail-delete" onclick="deleteSingleMail(event, '${tabType}', ${idx})">삭제</button>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-weight:600; font-size:12px; margin-bottom:4px; color:#2d3748;">${mail.title}</div>
|
||||
<div style="font-size:11px; color:var(--text-sub); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.4;">
|
||||
${mail.summary}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
// 초기 로드 시 active가 있다면 본문도 업데이트
|
||||
const activeIdx = mails.findIndex(m => m.active);
|
||||
if (activeIdx !== -1) {
|
||||
updateMailContent(mails[activeIdx]);
|
||||
}
|
||||
}
|
||||
|
||||
function handleCheckboxClick(event) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
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) {
|
||||
actionBar.classList.add('active');
|
||||
selectedCountSpan.innerText = `${checkboxes.length}개 선택됨`;
|
||||
} else {
|
||||
actionBar.classList.remove('active');
|
||||
if (selectAllCheckbox) selectAllCheckbox.checked = false;
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSelectAll(el) {
|
||||
const checkboxes = document.querySelectorAll('.mail-item-checkbox');
|
||||
checkboxes.forEach(cb => cb.checked = el.checked);
|
||||
updateBulkActionBar();
|
||||
}
|
||||
|
||||
function deleteSingleMail(event, tabType, index) {
|
||||
if (event) event.stopPropagation();
|
||||
if (!confirm("이 메일을 삭제하시겠습니까?")) return;
|
||||
const mail = MAIL_SAMPLES[tabType].splice(index, 1)[0];
|
||||
MAIL_SAMPLES.deleted.unshift(mail);
|
||||
renderMailList(tabType);
|
||||
}
|
||||
|
||||
function deleteSelectedMails() {
|
||||
const checkboxes = document.querySelectorAll('.mail-item-checkbox');
|
||||
const selectedIndices = [];
|
||||
checkboxes.forEach((cb, idx) => { if (cb.checked) selectedIndices.push(idx); });
|
||||
if (selectedIndices.length === 0) return;
|
||||
if (!confirm(`${selectedIndices.length}개의 메일을 삭제하시겠습니까?`)) return;
|
||||
const tabMails = MAIL_SAMPLES[currentMailTab];
|
||||
selectedIndices.sort((a, b) => b - a).forEach(idx => {
|
||||
const mail = tabMails.splice(idx, 1)[0];
|
||||
MAIL_SAMPLES.deleted.unshift(mail);
|
||||
});
|
||||
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');
|
||||
console.log(`Switched to ${tabType}`);
|
||||
// 실제 데이터 필터링 로직이 있다면 여기에 추가
|
||||
|
||||
// 탭 이동 시 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');
|
||||
}
|
||||
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');
|
||||
|
||||
// 이전에 active 상태인 아이템 해제
|
||||
document.querySelectorAll('.attachment-item').forEach(item => item.classList.remove('active'));
|
||||
// 현재 클릭한 아이템 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,scrollbars=yes');
|
||||
};
|
||||
fullViewBtn.onclick = () => window.open(fileUrl, 'PMFullView', 'width=1000,height=800');
|
||||
}
|
||||
|
||||
if (isPdf) {
|
||||
// PDF의 경우 #page=1 옵션을 사용하여 첫 페이지부터 노출 (10페이지 제한은 UI 문구로 처리)
|
||||
// 실제 브라우저 뷰어 사양에 따라 다르지만 보통 전체가 로드되므로, 안내 문구와 함께 제공
|
||||
previewContainer.innerHTML = `
|
||||
<iframe src="${fileUrl}#page=1" style="width:100%; height:100%; border:none;"></iframe>
|
||||
`;
|
||||
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" onerror="this.src='https://via.placeholder.com/400x560?text=File+Preview'">
|
||||
<div style="margin-top:20px; font-weight:700; color:var(--primary-color);">${file.name}</div>
|
||||
<div style="font-size:12px; color:var(--text-sub); margin-top:8px;">본 화면은 미리보기 예시입니다.</div>
|
||||
</div>
|
||||
`;
|
||||
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>`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -200,18 +357,13 @@ function applyPathSelection() {
|
||||
const tabSelect = document.getElementById('tabSelect');
|
||||
const catSelect = document.getElementById('categorySelect');
|
||||
const subSelect = document.getElementById('subSelect');
|
||||
if (!tabSelect || !catSelect || !subSelect) return;
|
||||
const tab = tabSelect.value;
|
||||
const cat = catSelect.value;
|
||||
const sub = subSelect.value;
|
||||
const fullPath = `${tab} > ${cat} > ${sub}`;
|
||||
|
||||
if (!currentFiles[editingIndex].analysis) {
|
||||
currentFiles[editingIndex].analysis = {};
|
||||
}
|
||||
if (!currentFiles[editingIndex].analysis) currentFiles[editingIndex].analysis = {};
|
||||
currentFiles[editingIndex].analysis.suggested_path = fullPath;
|
||||
currentFiles[editingIndex].analysis.isManual = true;
|
||||
|
||||
renderFiles();
|
||||
closeModal();
|
||||
}
|
||||
@@ -227,49 +379,23 @@ async function startAnalysis(index, event) {
|
||||
const logArea = document.getElementById(`log-area-${index}`);
|
||||
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>';
|
||||
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}`
|
||||
];
|
||||
|
||||
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
|
||||
};
|
||||
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 = '분석 실패';
|
||||
@@ -279,17 +405,11 @@ async function startAnalysis(index, event) {
|
||||
function confirmUpload(index, event) {
|
||||
if (event) event.stopPropagation();
|
||||
const file = currentFiles[index];
|
||||
|
||||
if (!file.analysis || !file.analysis.suggested_path) {
|
||||
alert("경로를 설정해주세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
const path = file.analysis.suggested_path;
|
||||
const message = `정해진 위치로 업로드하시겠습니까?\n\n위치: ${path}`;
|
||||
if (confirm(message)) alert("업로드가 완료되었습니다.");
|
||||
if (!file.analysis || !file.analysis.suggested_path) { alert("경로를 설정해주세요."); return; }
|
||||
if (confirm(`정해진 위치로 업로드하시겠습니까?\n\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" },
|
||||
@@ -300,70 +420,38 @@ let contactEditingIndex = -1;
|
||||
|
||||
function openAddressBook() {
|
||||
const modal = document.getElementById('addressBookModal');
|
||||
if (modal) {
|
||||
renderAddressBook();
|
||||
modal.style.display = 'flex';
|
||||
}
|
||||
if (modal) { renderAddressBook(); modal.style.display = 'flex'; }
|
||||
}
|
||||
|
||||
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'; contactEditingIndex = -1; }
|
||||
}
|
||||
|
||||
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; white-space:nowrap;">
|
||||
<button class="_button-xsmall" style="background:#edf2f7; color:var(--text-main); margin-right:4px;" onclick="editContact(${idx})">수정</button>
|
||||
<button class="_button-xsmall" style="background:#fee2e2; color:#e53e3e;" onclick="deleteContact(${idx})">삭제</button>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
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;
|
||||
// 필드 초기화
|
||||
document.getElementById('newContactName').value = '';
|
||||
document.getElementById('newContactDept').value = '';
|
||||
document.getElementById('newContactEmail').value = '';
|
||||
document.getElementById('newContactPhone').value = '';
|
||||
}
|
||||
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();
|
||||
}
|
||||
if (confirm(`'${addressBookData[index].name}'님을 주소록에서 삭제하시겠습니까?`)) { addressBookData.splice(index, 1); renderAddressBook(); }
|
||||
}
|
||||
|
||||
function addContact() {
|
||||
@@ -371,21 +459,10 @@ function addContact() {
|
||||
const dept = document.getElementById('newContactDept').value;
|
||||
const email = document.getElementById('newContactEmail').value;
|
||||
const phone = document.getElementById('newContactPhone').value;
|
||||
|
||||
if (!name) {
|
||||
alert("이름을 입력해주세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!name) { alert("이름을 입력해주세요."); return; }
|
||||
const newData = { name, dept, email, phone };
|
||||
|
||||
if (contactEditingIndex > -1) {
|
||||
addressBookData[contactEditingIndex] = newData;
|
||||
contactEditingIndex = -1;
|
||||
} else {
|
||||
addressBookData.push(newData);
|
||||
}
|
||||
|
||||
if (contactEditingIndex > -1) { addressBookData[contactEditingIndex] = newData; contactEditingIndex = -1; }
|
||||
else addressBookData.push(newData);
|
||||
renderAddressBook();
|
||||
toggleAddContactForm();
|
||||
}
|
||||
@@ -394,10 +471,10 @@ function togglePreviewAuto() {
|
||||
const area = document.getElementById('mailPreviewArea');
|
||||
const icon = document.getElementById('previewToggleIcon');
|
||||
const isActive = area.classList.toggle('active');
|
||||
|
||||
if (icon) {
|
||||
icon.innerText = isActive ? '▶' : '◀';
|
||||
}
|
||||
if (icon) icon.innerText = isActive ? '▶' : '◀';
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', loadAttachments);
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadAttachments();
|
||||
renderMailList('inbound');
|
||||
});
|
||||
|
||||
@@ -12,14 +12,16 @@
|
||||
}
|
||||
|
||||
.mail-list-area {
|
||||
width: 320px;
|
||||
width: 400px;
|
||||
border-right: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 탭 가로 배치 복구 */
|
||||
.mail-tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
@@ -39,10 +41,9 @@
|
||||
transition: all 0.2s ease;
|
||||
border-bottom: 2px solid transparent;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.mail-tab:hover {
|
||||
@@ -56,24 +57,45 @@
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* 검색창 여백 및 간격 조정 */
|
||||
.search-bar {
|
||||
padding: var(--space-md);
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
background: #fff;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 8px; /* 하단 리스트와 간격 추가 */
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 상단 선택 액션바 */
|
||||
.mail-bulk-actions {
|
||||
display: none;
|
||||
padding: 8px 16px;
|
||||
background: #f7fafc;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mail-bulk-actions.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* 메일리스트 컨테이너 */
|
||||
.mail-items-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 60px; /* 하단 고정 버튼 공간 확보 */
|
||||
}
|
||||
|
||||
/* 메일 아이템 스타일 */
|
||||
.mail-item {
|
||||
padding: var(--space-md);
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.mail-item:hover {
|
||||
@@ -85,11 +107,63 @@
|
||||
border-left: 4px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.mail-item-checkbox {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
margin-right: 12px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.mail-item-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mail-item-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.mail-date {
|
||||
font-size: 11px;
|
||||
color: var(--text-sub);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 텍스트형 삭제 버튼 스타일 */
|
||||
.btn-mail-delete {
|
||||
background: #f7fafc;
|
||||
border: 1px solid var(--border-color);
|
||||
color: #718096;
|
||||
cursor: pointer;
|
||||
font-size: 10px;
|
||||
padding: 2px 8px;
|
||||
transition: all 0.2s;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-mail-delete:hover {
|
||||
color: #e53e3e;
|
||||
background: #fff5f5;
|
||||
border-color: #feb2b2;
|
||||
}
|
||||
|
||||
/* 하단 버튼 고정 */
|
||||
.address-book-footer {
|
||||
padding: 12px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
background: #fff;
|
||||
flex-shrink: 0;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.mail-content-area {
|
||||
@@ -117,7 +191,6 @@
|
||||
border-left: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* 닫혔을 때 내부 내용이 비치는 것 방지 */
|
||||
.mail-preview-area > *:not(.preview-toggle-handle) {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
@@ -47,25 +47,30 @@
|
||||
</select>
|
||||
|
||||
<div class="flex-center" style="gap:4px; width:100%;">
|
||||
<input type="date"
|
||||
<input type="date" id="startDate"
|
||||
style="flex:1; height:32px; padding:4px; font-size:11px; border:1px solid var(--border-color); border-radius:4px;">
|
||||
<span style="font-size:12px; color:var(--text-sub);">~</span>
|
||||
<input type="date"
|
||||
<input type="date" id="endDate"
|
||||
style="flex:1; height:32px; padding:4px; font-size:11px; border:1px solid var(--border-color); border-radius:4px;">
|
||||
</div>
|
||||
|
||||
<div class="flex-center" style="gap:8px; margin-top:4px;">
|
||||
<button class="btn-confirm" style="flex:1; height:32px; font-size:12px; background:var(--primary-color); color:#fff; display:flex; align-items:center; justify-content:center;" onclick="searchMails()">검색</button>
|
||||
<button class="btn-confirm" style="flex:1; height:32px; font-size:12px; background:#fff; color:var(--text-sub); border:1px solid var(--border-color); display:flex; align-items:center; justify-content:center;" onclick="resetSearch()">초기화</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mail-items-container">
|
||||
<div class="mail-item active">
|
||||
<div class="flex-between" style="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 id="mailBulkActions" class="mail-bulk-actions">
|
||||
<div class="flex-center" style="gap:8px;">
|
||||
<input type="checkbox" id="selectAllMails" onclick="toggleSelectAll(this)">
|
||||
<span id="selectedCount">0개 선택됨</span>
|
||||
</div>
|
||||
<button class="_button-xsmall" style="background:#fff5f5; color:#e53e3e; border:1px solid #feb2b2;" onclick="deleteSelectedMails()">선택 삭제</button>
|
||||
</div>
|
||||
|
||||
<div class="mail-items-container">
|
||||
<!-- JavaScript (renderMailList)에서 렌더링됨 -->
|
||||
</div>
|
||||
<!-- 메일쓰기 및 주소록 버튼 하단 고정 -->
|
||||
<div class="address-book-footer flex-center" style="gap:8px;">
|
||||
|
||||
Reference in New Issue
Block a user