Implement global table sorting, dashboard UI enhancements, and secret cloud access

src/views/List/DomainListView.ts

@@ -1,11 +1,15 @@
 import { state } from '../../core/state';
-import { formatPrice } from '../../core/utils';
+import { formatPrice, dynamicSort } from '../../core/utils';
 import { createIcons, Plus, Edit2, Trash2 } from 'lucide';
 import { openDomainModal } from '../../components/Modal/DomainModal';
+import { setupTableSorting, SortState } from '../../core/tableHandler';
 
 export function renderDomainList(container: HTMLElement) {
   container.innerHTML = '';
   
+  let sortState: SortState = { key: '', direction: 'asc' };
+  const fullList = state.masterData.domain;
+
   const header = document.createElement('div');
   header.className = 'list-header';
   header.innerHTML = `
@@ -17,58 +21,70 @@ export function renderDomainList(container: HTMLElement) {
 
   const tableWrapper = document.createElement('div');
   tableWrapper.className = 'table-container';
-  
   const table = document.createElement('table');
   table.innerHTML = `
     <thead>
       <tr>
         <th style="text-align:center; width:50px;">No.</th>
-        <th style="text-align:center;">유형</th>
-        <th style="text-align:center;">법인</th>
-        <th style="text-align:left;">서비스명</th>
-        <th style="text-align:left;">관리도메인</th>
-        <th style="text-align:center;">시작일</th>
-        <th style="text-align:center;">만료일</th>
-        <th style="text-align:right;">금액</th>
-        <th style="text-align:center;">담당자</th>
-        <th style="text-align:center;">담당자(부)</th>
+        <th style="text-align:center;" data-sort="type">유형</th>
+        <th style="text-align:center;" data-sort="corp">법인</th>
+        <th style="text-align:left;" data-sort="service_name">서비스명</th>
+        <th style="text-align:left;" data-sort="domain_name">관리도메인</th>
+        <th style="text-align:center;" data-sort="start_date">시작일</th>
+        <th style="text-align:center;" data-sort="expiry_date">만료일</th>
+        <th style="text-align:right;" data-sort="price">금액</th>
+        <th style="text-align:center;" data-sort="manager_main">담당자</th>
+        <th style="text-align:center;" data-sort="manager_sub">담당자(부)</th>
         <th style="text-align:left;">비고</th>
       </tr>
     </thead>
-    <tbody>
-      ${state.masterData.domain.length === 0 ? `
-        <tr>
-          <td colspan="11" style="text-align:center; padding: 3rem; color: var(--text-muted);">등록된 도메인 정보가 없습니다.</td>
-        </tr>
-      ` : state.masterData.domain.map((item, idx) => `
-        <tr class="domain-row" data-id="${item.id}" style="cursor:pointer;">
-          <td style="text-align:center;">${idx + 1}</td>
-          <td style="text-align:center;"><span class="badge badge-${item.type}">${item.type}</span></td>
-          <td style="text-align:center;">${item.corp || ''}</td>
-          <td>${item.service_name || ''}</td>
-          <td>${item.domain_name || ''}</td>
-          <td style="text-align:center;">${item.start_date || ''}</td>
-          <td style="text-align:center;">${item.expiry_date || ''}</td>
-          <td style="text-align:right;">${formatPrice(item.price)}</td>
-          <td style="text-align:center;">${item.manager_main || ''}</td>
-          <td style="text-align:center;">${item.manager_sub || ''}</td>
-          <td class="text-truncate" style="max-width:200px;">${item.remarks || ''}</td>
-        </tr>
-      `).join('')}
-    </tbody>
+    <tbody id="dynamic-tbody"></tbody>
   `;
   
   tableWrapper.appendChild(table);
   container.appendChild(tableWrapper);
+  const tbody = table.querySelector('tbody')!;
 
-  // 이벤트 바인딩
-  table.querySelectorAll('.domain-row').forEach(row => {
-    row.addEventListener('click', () => {
-      const id = row.getAttribute('data-id');
-      const item = state.masterData.domain.find(d => d.id === id);
-      if (item) openDomainModal(item);
+  const updateTable = () => {
+    let filtered = [...fullList];
+    
+    if (sortState.key) {
+      filtered = dynamicSort(filtered, sortState.key, sortState.direction);
+    }
+
+    tbody.innerHTML = '';
+    if (filtered.length === 0) {
+      tbody.innerHTML = `<tr><td colspan="11" style="text-align:center; padding: 3rem; color: var(--text-muted);">등록된 도메인 정보가 없습니다.</td></tr>`;
+      return;
+    }
+
+    filtered.forEach((item, idx) => {
+      const tr = document.createElement('tr');
+      tr.className = 'domain-row';
+      tr.style.cursor = 'pointer';
+      tr.innerHTML = `
+        <td style="text-align:center;">${idx + 1}</td>
+        <td style="text-align:center;"><span class="badge badge-${item.type}">${item.type}</span></td>
+        <td style="text-align:center;">${item.corp || ''}</td>
+        <td>${item.service_name || ''}</td>
+        <td>${item.domain_name || ''}</td>
+        <td style="text-align:center;">${item.start_date || ''}</td>
+        <td style="text-align:center;">${item.expiry_date || ''}</td>
+        <td style="text-align:right;">${formatPrice(item.price)}</td>
+        <td style="text-align:center;">${item.manager_main || ''}</td>
+        <td style="text-align:center;">${item.manager_sub || ''}</td>
+        <td class="text-truncate" style="max-width:200px;">${item.remarks || ''}</td>
+      `;
+      tr.addEventListener('click', () => openDomainModal(item));
+      tbody.appendChild(tr);
     });
-  });
 
+    setupTableSorting(table, sortState, (key, dir) => {
+      sortState = { key, direction: dir };
+      updateTable();
+    });
+  };
+
+  updateTable();
   createIcons({ icons: { Plus, Edit2, Trash2 } });
 }