feat: 메일 관리 시스템 UX 개선 및 기능 고도화

- UI/UX: 메일 리스트 영역 너비 확장(400px), 검색 및 날짜 선택 영역 여백 조정
- 기능: 탭별 샘플 데이터 동적 렌더링, 메일 검색 및 초기화 기능 구현
- 기능: 메일 선택 시 본문 내용 동적 업데이트 연동
- 기능: 메일 개별 삭제(텍스트 버튼) 및 체크박스를 이용한 다중 삭제 기능 추가
- UI: 메일 쓰기 및 주소록 버튼 하단 고정 레이아웃 적용

templates/mailTest.html

@@ -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;">