Taehoon
d246b08799
- UI/UX: 메일 관리 레이아웃 고도화 및 미리보기 토글 핸들 도입 - 기능: 주소록 CRUD 기능 추가 및 모달 인터페이스 개선 - 구조: CSS 파일 기능별 분리 및 Jinja2 템플릿 엔진 도입 - 백엔드: OCR 비동기 처리 및 CSV 파싱(BOM) 안정화 - 데이터: 2026.03.04 기준 최신 프로젝트 현황 업데이트
55 lines
2.9 KiB
HTML
55 lines
2.9 KiB
HTML
<!-- 주소록 모달 -->
|
|
<div id="addressBookModal" class="modal-overlay">
|
|
<div class="modal-content" style="max-width: 850px;">
|
|
<div class="modal-header">
|
|
<h3>공사 관계자 주소록</h3>
|
|
<div class="flex-center" style="gap:10px;">
|
|
<button class="_button-small" style="border:none;" onclick="toggleAddContactForm()">+ 추가하기</button>
|
|
<span class="modal-close" onclick="closeAddressBook()">×</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 주소록 추가 폼 (기본 숨김) -->
|
|
<div id="addContactForm"
|
|
style="display:none; background:var(--bg-muted); padding:15px; border-radius:8px; margin-bottom:15px; border:1px solid var(--border-color);">
|
|
<div style="display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-bottom:10px;">
|
|
<input type="text" id="newContactName" placeholder="성명"
|
|
style="padding:8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
|
|
<input type="text" id="newContactDept" placeholder="소속/직위"
|
|
style="padding:8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
|
|
<input type="text" id="newContactEmail" placeholder="이메일"
|
|
style="padding:8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
|
|
<input type="text" id="newContactPhone" placeholder="연락처"
|
|
style="padding:8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
|
|
</div>
|
|
<div class="flex-center" style="gap:8px;">
|
|
<button class="_button-medium" style="flex:1; background:var(--primary-color); color:#fff;"
|
|
onclick="addContact()">저장</button>
|
|
<button class="_button-medium" style="flex:1; background:#718096; color:#fff;"
|
|
onclick="toggleAddContactForm()">취소</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="search-bar" style="background:#fff; padding:0 0 15px 0;">
|
|
<input type="text" placeholder="이름, 부서, 연락처 검색..." style="margin-bottom:8px; height: 32px;">
|
|
</div>
|
|
<div style="max-height: 400px; overflow-y: auto;">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>성명</th>
|
|
<th>소속/직위</th>
|
|
<th>이메일</th>
|
|
<th>연락처</th>
|
|
<th style="text-align:right;">관리</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="addressBookBody">
|
|
<!-- 동적으로 렌더링됨 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<button class="btn-confirm" style="margin-top:20px;" onclick="closeAddressBook()">닫기</button>
|
|
</div>
|
|
</div>
|