feat: S/W 테이블 분야/부서 스키마 확장 및 UI 개선

변경 파일 세부사항: - index.html: S/W 자산 폼에 분야(select), 부서(input) 요소 추가 - src/components/Modal/SWModal.ts: 모달 오픈/저장 시 분야, 부서 데이터 Get/Set 바인딩 적용 - src/dummyDataGenerator.ts: S/W 더미 데이터 생성 시 임의의 분야 및 부서 값 할당 추가 - src/excelHandler.ts: 엑셀 파일 내 분야/부서 컬럼 정의, JSON 매핑 및 Export 로직 추가 - src/style.css: S/W 데이터 테이블(.sw-table td, th) 가운데 정렬 CSS 적용 - src/views/AssetTableView.ts: S/W 테이블 헤더 전면 개편 및 관리(아이콘) 스타일 개선
2026-04-14 11:46:46 +09:00
parent 77563994e9
commit 7860edd8d0
6 changed files with 43 additions and 9 deletions
--- a/index.html
+++ b/index.html
@@ -394,6 +394,16 @@
            <input type="hidden" id="sw-asset-id" />
            <input type="hidden" id="sw-asset-type" />

+            <div class="form-group">
+              <label for="sw-분야">분야</label>
+              <select id="sw-분야" required style="width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px; font-family: inherit; font-size: 0.875rem;">
+                <option value="업무공통">업무공통</option>
+                <option value="개발S/W">개발S/W</option>
+                <option value="디자인">디자인</option>
+                <option value="설계S/W">설계S/W</option>
+              </select>
+            </div>
+
            <div class="form-group">
              <label for="sw-법인">법인</label>
              <select id="sw-법인" required style="width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px; font-family: inherit; font-size: 0.875rem;">
@@ -403,6 +413,11 @@
              </select>
            </div>
            
+            <div class="form-group">
+              <label for="sw-부서">부서</label>
+              <input type="text" id="sw-부서" placeholder="ex) 경영지원팀" required />
+            </div>
+
            <div class="form-group">
              <label for="sw-제품명">제품명</label>
              <input type="text" id="sw-제품명" required />
--- a/src/components/Modal/SWModal.ts
+++ b/src/components/Modal/SWModal.ts
@@ -19,7 +19,9 @@ export function initSWModal(renderContent: () => void, closeModals: () => void)
    const newAsset: SoftwareAsset = {
      id: id || Math.random().toString(36).substring(2, 9),
      type: (document.getElementById('sw-asset-type') as HTMLInputElement).value,
+      분야: (document.getElementById('sw-분야') as HTMLSelectElement).value,
      법인: (document.getElementById('sw-법인') as HTMLSelectElement).value,
+      부서: (document.getElementById('sw-부서') as HTMLInputElement).value,
      제품명: (document.getElementById('sw-제품명') as HTMLInputElement).value,
      구매일: (document.getElementById('sw-구매일') as HTMLInputElement).value,
      구독일: (document.getElementById('sw-구독일') as HTMLInputElement).value,
@@ -82,7 +84,9 @@ export function openSwModal(asset?: SoftwareAsset) {
    
    (document.getElementById('sw-asset-id') as HTMLInputElement).value = asset.id;
    (document.getElementById('sw-asset-type') as HTMLInputElement).value = asset.type;
+    (document.getElementById('sw-분야') as HTMLSelectElement).value = asset.분야 || '업무공통';
    (document.getElementById('sw-법인') as HTMLSelectElement).value = asset.법인;
+    (document.getElementById('sw-부서') as HTMLInputElement).value = asset.부서 || '';
    (document.getElementById('sw-제품명') as HTMLInputElement).value = asset.제품명;
    (document.getElementById('sw-구매일') as HTMLInputElement).value = asset.구매일 || '';
    (document.getElementById('sw-구독일') as HTMLInputElement).value = asset.구독일 || '';
@@ -97,6 +101,8 @@ export function openSwModal(asset?: SoftwareAsset) {
    deleteBtn.style.display = 'none';
    (document.getElementById('sw-asset-id') as HTMLInputElement).value = '';
    (document.getElementById('sw-asset-type') as HTMLInputElement).value = state.activeSubTab;
+    (document.getElementById('sw-분야') as HTMLSelectElement).value = '업무공통';
    (document.getElementById('sw-법인') as HTMLSelectElement).value = '한맥';
+    (document.getElementById('sw-부서') as HTMLInputElement).value = '';
  }
 }
--- a/src/dummyDataGenerator.ts
+++ b/src/dummyDataGenerator.ts
@@ -140,7 +140,9 @@ export function generateDummyData(): MasterAssetData {
    sw.push({
      id: swId,
      type: '구독SW',
+      분야: rand(['업무공통', '개발S/W', '디자인', '설계S/W']),
      법인: rand(corps),
+      부서: rand(depts),
      제품명: rand(['Adobe CC All Apps', 'Microsoft 365', 'Slack Pro', 'Notion Team']),
      구매일: '2024-01-01',
      구독일: `2024.01.01 ~ ${endStr}`,
@@ -182,7 +184,9 @@ export function generateDummyData(): MasterAssetData {
    sw.push({
      id: swId,
      type: '영구SW',
+      분야: rand(['업무공통', '개발S/W', '디자인', '설계S/W']),
      법인: rand(corps),
+      부서: rand(depts),
      제품명: rand(['AutoCAD 2024', 'Windows 10 Pro', '한컴오피스 2022', 'Visual Studio 2022']),
      구매일: '2020-05-15',
      유지보수여부: true,
--- a/src/excelHandler.ts
+++ b/src/excelHandler.ts
@@ -35,7 +35,9 @@ export interface HardwareAsset {
 export interface SoftwareAsset {
  id: string;
  type: string; // '구독SW', '영구SW'
+  분야?: string;
  법인: string;
+  부서?: string;
  제품명: string;
  구매일: string;
  구독일?: string;
@@ -71,8 +73,8 @@ const SW_TABS = ['구독SW', '영구SW'];
 const HW_HEADERS = ['법인', '자산코드', '명칭', '위치', '관리자', 'IP주소', 'MACaddress', 'HW사양', 'OS', '구매일', '금액', '납품업체', '품의서명'];
 const PC_HEADERS = ['법인', '자산코드', '사용자', '위치', 'CPU', 'GPU', 'RAM', 'SSD1', 'SSD2', 'HDD1', 'HDD2', '구매일', '금액', '납품업체', '품의서명'];
 const STORAGE_HEADERS = ['법인', '유형', '자산코드', '명칭', '위치', '모델명', '용량', '담당자(정)', '담당자(부)', 'IP주소', 'MAC주소', '구매일', '금액', '납품업체', '품의서명'];
-const SUB_SW_HEADERS = ['ID', '법인', '제품명', '구매일', '구독일', '금액', '수량', '계정명', '납품업체', '비고'];
-const PERM_SW_HEADERS = ['ID', '법인', '제품명', '구매일', '유지보수여부', '금액', '수량', '계정명', '납품업체', '비고'];
+const SUB_SW_HEADERS = ['ID', '분야', '법인', '부서', '제품명', '구매일', '구독일', '금액', '수량', '계정명', '납품업체', '비고'];
+const PERM_SW_HEADERS = ['ID', '분야', '법인', '부서', '제품명', '구매일', '유지보수여부', '금액', '수량', '계정명', '납품업체', '비고'];
 const SW_USER_HEADERS = ['id', 'swId', '법인', '부서', '팀', '직위', '이름', '사용기간', '신청서명'];

 /**
@@ -102,7 +104,7 @@ export function downloadTemplate() {
  SW_TABS.forEach(tab => {
    let hd = tab === '구독SW' ? SUB_SW_HEADERS : PERM_SW_HEADERS;
    const ws = XLSX.utils.aoa_to_sheet([hd]);
-    ws['!cols'] = [{wch:15}, {wch:15}, {wch:30}, {wch:15}, {wch:20}, {wch:15}, {wch:10}, {wch:20}, {wch:20}, {wch:30}];
+    ws['!cols'] = [{wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:30}, {wch:15}, {wch:20}, {wch:15}, {wch:10}, {wch:20}, {wch:20}, {wch:30}];
    XLSX.utils.book_append_sheet(wb, ws, tab);
  });

@@ -157,16 +159,16 @@ export function exportToExcel(masterData: MasterAssetData) {
    if (tab === '구독SW') {
      wsData = [
        SUB_SW_HEADERS,
-        ...targetAssets.map(a => [a.id, a.법인, a.제품명, a.구매일, a.구독일, a.금액, a.수량, a.계정명, a.납품업체, a.비고])
+        ...targetAssets.map(a => [a.id, a.분야||'', a.법인, a.부서||'', a.제품명, a.구매일, a.구독일, a.금액, a.수량, a.계정명, a.납품업체, a.비고])
      ];
    } else {
      wsData = [
        PERM_SW_HEADERS,
-        ...targetAssets.map(a => [a.id, a.법인, a.제품명, a.구매일, a.유지보수여부 ? 'Y' : 'N', a.금액, a.수량, a.계정명, a.납품업체, a.비고])
+        ...targetAssets.map(a => [a.id, a.분야||'', a.법인, a.부서||'', a.제품명, a.구매일, a.유지보수여부 ? 'Y' : 'N', a.금액, a.수량, a.계정명, a.납품업체, a.비고])
      ];
    }
    const ws = XLSX.utils.aoa_to_sheet(wsData);
-    ws['!cols'] = [{wch:15}, {wch:15}, {wch:30}, {wch:15}, {wch:20}, {wch:15}, {wch:10}, {wch:20}, {wch:20}, {wch:30}];
+    ws['!cols'] = [{wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:30}, {wch:15}, {wch:20}, {wch:15}, {wch:10}, {wch:20}, {wch:20}, {wch:30}];
    XLSX.utils.book_append_sheet(wb, ws, tab);
  });

@@ -281,7 +283,9 @@ export async function parseExcel(file: File): Promise<MasterAssetData> {
              swAssets.push({
                id: row['ID'] ? String(row['ID']) : Math.random().toString(36).substring(2, 9),
                type: sheetName,
+                분야: row['분야'] || '',
                법인: row['법인'] || '',
+                부서: row['부서'] || '',
                제품명: row['제품명'] || '',
                구매일: row['구매일'] || '',
                구독일: row['구독일'] || '',
--- a/src/style.css
+++ b/src/style.css
@@ -300,6 +300,10 @@ tbody tr:last-child td { border-bottom: none; }
 tbody tr:hover { background-color: var(--bg-color); }
 .empty-row td { text-align: center; padding: 3rem; color: var(--text-muted); }

+.sw-table td {
+  text-align: center;
+}
+
 /* Modal */
 .modal-overlay {
  position: fixed;
--- a/src/views/AssetTableView.ts
+++ b/src/views/AssetTableView.ts
@@ -78,18 +78,19 @@ function renderSwTable(table: HTMLTableElement, container: HTMLElement, mainCont
  const list = state.masterData.sw.filter(a => a.type === state.activeSubTab);
  const isSub = state.activeSubTab === '구독SW';
  
-  table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>제품명</th><th>구매일</th>${isSub ? '<th>구독일</th>' : ''}<th>수량</th><th>사용가능</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
+  table.classList.add('sw-table');
+  table.innerHTML = `<thead><tr><th style="text-align:center;">No.</th><th style="text-align:center;">분야</th><th style="text-align:center;">법인</th><th style="text-align:center;">부서</th><th style="text-align:center;">제품명</th><th style="text-align:center;">구매일</th>${isSub ? '<th style="text-align:center;">구독일</th>' : ''}<th style="text-align:center;">수량</th><th style="text-align:center;">사용가능</th><th style="text-align:center;">관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
  container.appendChild(table);
  mainContent.appendChild(container);
  const tbody = document.getElementById('dynamic-tbody')!;
-  if (list.length === 0) { tbody.innerHTML = `<tr><td colspan="${isSub ? 8 : 7}">정보가 없습니다.</td></tr>`; return; }
+  if (list.length === 0) { tbody.innerHTML = `<tr><td colspan="${isSub ? 10 : 9}" style="text-align:center;">정보가 없습니다.</td></tr>`; return; }
  
  list.forEach((asset, idx) => {
    const assigned = state.masterData.swUsers.filter(u => u.swId === asset.id).length;
    const avail = (typeof asset.수량 === 'number' ? asset.수량 : parseInt(asset.수량||'0', 10)) - assigned;
    const tr = document.createElement('tr');
    tr.style.cursor = 'pointer';
-    tr.innerHTML = `<td>${idx+1}</td><td>${asset.법인}</td><td>${asset.제품명}</td><td>${asset.구매일||''}</td>${isSub ? `<td>${asset.구독일||''}</td>` : ''}<td>${asset.수량}</td><td><strong style="color: ${avail > 0 ? 'var(--primary)' : 'var(--danger)'}">${avail}</strong></td><td style="display:flex; gap:0.25rem;"><button class="btn-outline btn-edit">수정</button><button class="btn-outline btn-users"><i data-lucide="users" style="width:14px; height:14px;"></i></button></td>`;
+    tr.innerHTML = `<td>${idx+1}</td><td>${asset.분야||''}</td><td>${asset.법인}</td><td>${asset.부서||''}</td><td>${asset.제품명}</td><td>${asset.구매일||''}</td>${isSub ? `<td>${asset.구독일||''}</td>` : ''}<td>${asset.수량}</td><td><strong style="color: ${avail > 0 ? 'var(--primary-color)' : 'var(--danger)'}">${avail}</strong></td><td style="display:flex; justify-content:center; align-items:center; gap:0.5rem;"><button type="button" class="btn-icon btn-edit" title="수정" style="color: var(--text-muted);"><i data-lucide="edit-2" style="width:18px; height:18px;"></i></button><button type="button" class="btn-icon btn-users" title="사용자 관리" style="color: var(--primary-color);"><i data-lucide="users" style="width:18px; height:18px;"></i></button></td>`;
    tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openSwModal(asset); });
    tr.querySelector('.btn-edit')?.addEventListener('click', () => openSwModal(asset));
    tr.querySelector('.btn-users')?.addEventListener('click', () => openSwUserModal(asset));