feat: 소프트웨어 자산 관리 기능 고도화 및 대시보드 누적 비용 분석 기능 추가

src/components/Modal/SWUserModal.ts

@@ -1,12 +1,12 @@
 import { state } from '../../core/state';
 import { SoftwareAsset, SWUser } from '../../core/excelHandler';
 import { openModal } from './BaseModal';
-import { createIcons, Edit2, X, Paperclip } from 'lucide';
+import { createIcons, Edit2, X, Paperclip, Calendar } from 'lucide';
 import { CORP_LIST, ORG_LIST } from './SharedData';
-import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
+import { generateOptionsHTML, setFieldValue, getFieldValue, applyDateMask } from './ModalUtils';
 
 let currentSwUserAsset: SoftwareAsset | null = null;
-let tempSwUsers: SWUser[] = [];
+let tempSwUsers: any[] = [];
 
 const SW_USER_MODAL_HTML = `
   <div id="sw-user-modal" class="modal-overlay hidden">
@@ -28,6 +28,7 @@ const SW_USER_MODAL_HTML = `
             <thead>
               <tr>
                 <th>조직</th>
+                <th>부서</th>
                 <th>직위</th>
                 <th>이름</th>
                 <th>사용기간</th>
@@ -58,7 +59,11 @@ const SW_USER_MODAL_HTML = `
           <input type="hidden" id="edit-user-index" value="-1" />
           <div class="form-group">
             <label>조직</label>
-            <select id="new-user-부서">${generateOptionsHTML(ORG_LIST)}</select>
+            <select id="new-user-조직">${generateOptionsHTML(ORG_LIST)}</select>
+          </div>
+          <div class="form-group">
+            <label>부서</label>
+            <input type="text" id="new-user-부서" />
           </div>
           <div class="form-group">
             <label>직위</label>
@@ -69,8 +74,24 @@ const SW_USER_MODAL_HTML = `
             <input type="text" id="new-user-이름" required />
           </div>
           <div class="form-group">
-            <label>사용기간</label>
-            <input type="text" id="new-user-사용기간" placeholder="ex) 2024-01-01 ~ 2024-12-31" />
+            <label>사용 시작일</label>
+            <div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
+              <input type="text" id="new-user-시작일" style="flex:1;" />
+              <button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-시작일-picker'); p.value = document.getElementById('new-user-시작일').value; p.showPicker();" style="padding:0.25rem;">
+                <i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
+              </button>
+              <input type="date" id="new-user-시작일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('new-user-시작일').value = this.value" tabindex="-1" />
+            </div>
+          </div>
+          <div class="form-group">
+            <label>사용 종료일</label>
+            <div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
+              <input type="text" id="new-user-종료일" style="flex:1;" />
+              <button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-종료일-picker'); p.value = document.getElementById('new-user-종료일').value; p.showPicker();" style="padding:0.25rem;">
+                <i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
+              </button>
+              <input type="date" id="new-user-종료일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('new-user-종료일').value = this.value" tabindex="-1" />
+            </div>
           </div>
           <div class="form-group">
             <label>신청서 (증빙)</label>
@@ -93,14 +114,16 @@ export function openSwUserModal(asset: SoftwareAsset) {
   const swInfo = document.getElementById('sw-user-sw-info')!;
   swInfo.innerHTML = `
     <div style="background:var(--bg-light); padding:1rem; border-radius:6px; margin-bottom:1.5rem;">
-      <div style="font-size:0.8rem; color:var(--text-muted); margin-bottom:0.25rem;">${asset.법인} | ${asset.자산번호}</div>
+      <div style="font-size:0.8rem; color:var(--text-muted); margin-bottom:0.25rem;">${asset.법인}</div>
       <div style="font-size:1.1rem; font-weight:700; color:var(--primary-color);">${asset.제품명}</div>
     </div>
   `;
 
   // 기존 사용자 데이터 복사 (원본 보호를 위해 temp 사용)
   const existingMapping = state.masterData.swUsers.find(u => u.sw_id === asset.id);
-  tempSwUsers = existingMapping ? JSON.parse(JSON.stringify(existingMapping.userData || [])) : [];
+  tempSwUsers = existingMapping ? (existingMapping.userData || []).map((u: any) => ({
+    조직: u[0], 부서: u[1], 직위: u[2], 이름: u[3], 사용기간: u[4], 신청서명: u[5]
+  })) : [];
   
   renderUserList();
   modal.classList.remove('hidden');
@@ -119,7 +142,7 @@ function renderUserList() {
   tempSwUsers.forEach((user, idx) => {
     const tr = document.createElement('tr');
     tr.innerHTML = `
-
+      <td>${user.조직 || ''}</td>
       <td>${user.부서 || ''}</td>
       <td>${user.직위 || ''}</td>
       <td>${user.이름 || ''}</td>
@@ -164,10 +187,20 @@ function openUserEditSubModal(idx: number = -1) {
   
   if (idx > -1) {
     const user = tempSwUsers[idx];
+    setFieldValue('new-user-조직', user.조직);
     setFieldValue('new-user-부서', user.부서);
     setFieldValue('new-user-직위', user.직위);
     setFieldValue('new-user-이름', user.이름);
-    setFieldValue('new-user-사용기간', user.사용기간);
+    
+    // 사용기간 파싱 (yyyy-mm-dd ~ yyyy-mm-dd)
+    if (user.사용기간 && user.사용기간.includes('~')) {
+      const parts = user.사용기간.split('~');
+      setFieldValue('new-user-시작일', parts[0].trim());
+      setFieldValue('new-user-종료일', parts[1].trim());
+    } else {
+      setFieldValue('new-user-시작일', '');
+      setFieldValue('new-user-종료일', '');
+    }
   }
 
   subModal.classList.remove('hidden');
@@ -182,6 +215,12 @@ export function initSwUserModal(onSave: () => void, closeModals: () => void) {
   const addUserBtn = document.getElementById('btn-open-add-user')!;
   const confirmUserBtn = document.getElementById('btn-confirm-user-edit')!;
 
+  ['new-user-시작일', 'new-user-종료일'].forEach(id => {
+    applyDateMask(document.getElementById(id) as HTMLInputElement);
+  });
+
+  createIcons({ icons: { Calendar } });
+
   addUserBtn.addEventListener('click', () => openUserEditSubModal());
 
   confirmUserBtn.addEventListener('click', () => {
@@ -195,7 +234,7 @@ export function initSwUserModal(onSave: () => void, closeModals: () => void) {
     const existingIdx = state.masterData.swUsers.findIndex(u => u.sw_id === currentSwUserAsset!.id);
     const newMapping = {
       sw_id: currentSwUserAsset!.id,
-      userData: tempSwUsers.map(u => ['', u.부서, u.직위, u.이름, u.사용기간, u.신청서명])
+      userData: tempSwUsers.map(u => [u.조직, u.부서, u.직위, u.이름, u.사용기간, u.신청서명])
     };
 
     if (existingIdx > -1) state.masterData.swUsers[existingIdx] = newMapping as any;
@@ -225,11 +264,11 @@ function saveUserDataToList() {
   const 신청서명 = 신청서Input.files && 신청서Input.files.length > 0 ? 신청서Input.files[0].name : (idx > -1 ? tempSwUsers[idx].신청서명 : '');
 
   const userData: any = {
-
+    조직: getFieldValue('new-user-조직'),
     부서: getFieldValue('new-user-부서'),
     직위: getFieldValue('new-user-직위'),
     이름: getFieldValue('new-user-이름'),
-    사용기간: getFieldValue('new-user-사용기간'),
+    사용기간: `${getFieldValue('new-user-시작일')} ~ ${getFieldValue('new-user-종료일')}`,
     신청서명
   };