Taehoon
d246b08799
- UI/UX: 메일 관리 레이아웃 고도화 및 미리보기 토글 핸들 도입 - 기능: 주소록 CRUD 기능 추가 및 모달 인터페이스 개선 - 구조: CSS 파일 기능별 분리 및 Jinja2 템플릿 엔진 도입 - 백엔드: OCR 비동기 처리 및 CSV 파싱(BOM) 안정화 - 데이터: 2026.03.04 기준 최신 프로젝트 현황 업데이트
140 lines
6.9 KiB
HTML
140 lines
6.9 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/common.css">
|
|
<link rel="stylesheet" href="style/mail.css">
|
|
</head>
|
|
|
|
<body>
|
|
{% include 'modals/path_selector.html' %}
|
|
|
|
<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">
|
|
<!-- 메일 리스트 영역 (사이드바 삭제됨) -->
|
|
<section class="mail-list-area">
|
|
<div class="mail-tabs">
|
|
<div class="mail-tab active" onclick="switchMailTab(this, 'inbound')">📥 수신</div>
|
|
<div class="mail-tab" onclick="switchMailTab(this, 'outbound')">📤 발신</div>
|
|
<div class="mail-tab" onclick="switchMailTab(this, 'drafts')">📝 임시</div>
|
|
<div class="mail-tab" onclick="switchMailTab(this, 'deleted')">🗑️ 휴지통</div>
|
|
</div>
|
|
<div class="search-bar" style="display:flex; flex-direction:column; gap:8px;">
|
|
<input type="text" style="height: 32px; width:100%;" placeholder="제목, 내용, 기관 검색...">
|
|
|
|
<select style="height: 32px; width:100%; padding:4px; font-size:12px;">
|
|
<option>모든 상대기관</option>
|
|
<option>라오스 농림부</option>
|
|
<option>베트남 전력청</option>
|
|
</select>
|
|
|
|
<div class="flex-center" style="gap:4px; width:100%;">
|
|
<input type="date"
|
|
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"
|
|
style="flex:1; height:32px; padding:4px; font-size:11px; border:1px solid var(--border-color); border-radius:4px;">
|
|
</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>
|
|
</div>
|
|
<!-- 메일쓰기 및 주소록 버튼 하단 고정 -->
|
|
<div class="address-book-footer flex-center" style="gap:8px;">
|
|
<button class="btn-confirm"
|
|
style="background:var(--primary-color); color:#fff; font-size:12px; padding:8px; flex:1;"
|
|
onclick="alert('메일 쓰기 창을 엽니다.')">✍️ 메일쓰기</button>
|
|
<button class="btn-confirm"
|
|
style="background:#fff; color:var(--primary-color); border:1px solid var(--primary-color); font-size:12px; padding:8px; flex:1;"
|
|
onclick="openAddressBook()">📘 주소록</button>
|
|
</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 class="flex-between" style="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>
|
|
|
|
<!-- 우측 미리보기 영역 -->
|
|
<aside class="mail-preview-area" id="mailPreviewArea">
|
|
<!-- 토글 핸들 버튼 -->
|
|
<div class="preview-toggle-handle" onclick="togglePreviewAuto()">
|
|
<span id="previewToggleIcon">▶</span>
|
|
</div>
|
|
|
|
<div class="preview-header">
|
|
<div class="flex-center" style="gap:8px;">
|
|
<h3>미리보기</h3>
|
|
<span style="font-size:10px; color:var(--text-sub); font-weight:400;">최대 10페이지까지만 표시됩니다.</span>
|
|
</div>
|
|
<div class="flex-center" style="gap:12px;">
|
|
<button id="fullViewBtn" class="_button-xsmall"
|
|
style="background:var(--primary-lv-0); color:#111111; border:none; padding:4px 12px; height:24px; cursor:pointer; display:none;">전체보기</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="a4-container" id="previewContainer">
|
|
<div class="preview-placeholder">파일을 클릭하면<br>미리보기가 표시됩니다.</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
{% include 'modals/address_book.html' %}
|
|
|
|
<script src="js/common.js"></script>
|
|
<script src="js/mail.js"></script>
|
|
</body>
|
|
|
|
</html> |