63 lines
3.8 KiB
HTML
63 lines
3.8 KiB
HTML
<!-- 주소록 모달 (공통 규격 적용) -->
|
|
<div id="addressBookModal" class="modal-overlay" onclick="closeAddressBook()">
|
|
<div class="modal-content" style="max-width: 850px;" onclick="event.stopPropagation()">
|
|
<div class="modal-header">
|
|
<h3>공사 관계자 주소록</h3>
|
|
<div class="flex-center" style="gap:10px;">
|
|
<button class="btn btn-primary" onclick="toggleAddContactForm()">+ 추가하기</button>
|
|
<span class="modal-close" onclick="closeAddressBook()">×</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 주소록 추가 폼 (기본 숨김) -->
|
|
<div id="addContactForm"
|
|
style="display:none; background:var(--bg-muted); padding:20px; border-radius:12px; margin-bottom:20px; border:1px solid var(--border-color);">
|
|
<div style="display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-bottom:15px;">
|
|
<div class="input-group">
|
|
<label style="font-size:11px; margin-bottom:4px; display:block;">성명</label>
|
|
<input type="text" id="newContactName" placeholder="성명 입력" style="height:36px; padding:0 12px; border:1px solid #ddd; border-radius:6px; width:100%; font-size:13px;">
|
|
</div>
|
|
<div class="input-group">
|
|
<label style="font-size:11px; margin-bottom:4px; display:block;">소속/직위</label>
|
|
<input type="text" id="newContactDept" placeholder="소속/직위 입력" style="height:36px; padding:0 12px; border:1px solid #ddd; border-radius:6px; width:100%; font-size:13px;">
|
|
</div>
|
|
<div class="input-group">
|
|
<label style="font-size:11px; margin-bottom:4px; display:block;">이메일</label>
|
|
<input type="text" id="newContactEmail" placeholder="이메일 입력" style="height:36px; padding:0 12px; border:1px solid #ddd; border-radius:6px; width:100%; font-size:13px;">
|
|
</div>
|
|
<div class="input-group">
|
|
<label style="font-size:11px; margin-bottom:4px; display:block;">연락처</label>
|
|
<input type="text" id="newContactPhone" placeholder="연락처 입력" style="height:36px; padding:0 12px; border:1px solid #ddd; border-radius:6px; width:100%; font-size:13px;">
|
|
</div>
|
|
</div>
|
|
<div class="flex-center" style="gap:10px;">
|
|
<button class="btn btn-primary" style="flex:1;" onclick="addContact()">저장</button>
|
|
<button class="btn btn-secondary" style="flex:1;" onclick="toggleAddContactForm()">취소</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="search-bar" style="background:#fff; padding:0 0 15px 0;">
|
|
<input type="text" placeholder="이름, 부서, 연락처 검색..." style="width:100%; height: 36px; padding:0 12px; border:1px solid var(--border-color); border-radius:6px;">
|
|
</div>
|
|
<div style="max-height: 400px; overflow-y: auto; border:1px solid var(--border-color); border-radius:8px;">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>성명</th>
|
|
<th>소속/직위</th>
|
|
<th>이메일</th>
|
|
<th>연락처</th>
|
|
<th style="text-align:right; padding-right:15px;">관리</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="addressBookBody">
|
|
<!-- 동적으로 렌더링됨 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div style="margin-top:20px; text-align:right;">
|
|
<button class="btn btn-secondary" style="padding: 8px 32px;" onclick="closeAddressBook()">닫기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|