diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..c8a273e
Binary files /dev/null and b/.gitignore differ
diff --git a/js/mail.js b/js/mail.js
index 4f90140..f4e5d18 100644
--- a/js/mail.js
+++ b/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) => `
+
+
+
+
+
+ ${mail.person}
+
+
+ ${mail.time}
+ ${tabType !== 'deleted' ? `` : ''}
+
+
+
${mail.title}
+
+ ${mail.summary}
+
+
+
+ `).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 = `${currentMailTab === 'outbound' ? '받는사람' : '보낸사람'} ${mail.email} (${mail.person})`;
+ if (dateInfo) dateInfo.innerHTML = `날짜 ${mail.time}`;
+ if (bodyInfo) bodyInfo.innerHTML = mail.summary.replace(/\n/g, '
') + "
" + "본 내용은 샘플 데이터입니다.";
+}
+
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 = `
-
- `;
+ previewContainer.innerHTML = ``;
} else {
- previewContainer.innerHTML = `
-
-

-
${file.name}
-
본 화면은 미리보기 예시입니다.
-
- `;
+ previewContainer.innerHTML = `
${file.name}
`;
}
}
@@ -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 = '>>> 3중 레이어 AI 분석 엔진 가동...
';
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}
└ 신뢰도: 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 = `[AI가 읽은 핵심 내용]
${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 += `ERR: ${e.message}
`;
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) => `
-
- | ${c.name} |
- ${c.dept} |
- ${c.email} |
- ${c.phone} |
-
-
-
- |
-
- `).join('');
+ body.innerHTML = addressBookData.map((c, idx) => `| ${c.name} | ${c.dept} | ${c.email} | ${c.phone} | |
`).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');
+});
diff --git a/style/mail.css b/style/mail.css
index 47d1fa2..6c90462 100644
--- a/style/mail.css
+++ b/style/mail.css
@@ -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;
diff --git a/templates/mailTest.html b/templates/mailTest.html
index ed533cf..e37b3ef 100644
--- a/templates/mailTest.html
+++ b/templates/mailTest.html
@@ -47,25 +47,30 @@
-
~
-
+
+
+
+
+
-
-
-
- 라오스 농림부
- 오후 2:30
-
-
ITTC 교육센터 착공식 일정 협의
-
- 안녕하세요. 착공식 관련하여 첨부 드리는 공문을...
+
+
+
+
+