feat: 하드웨어 자동 변경 이력 생성 및 자산 관리 프로세스 고도화

src/components/Modal/ModalUtils.ts

@@ -103,13 +103,15 @@ export function setEditLock(
   options: { 
     saveBtnId: string, 
     revertBtnId: string, 
-    generateBtnId?: string 
+    generateBtnId?: string,
+    addLogBtnId?: string
   }
 ) {
   const form = document.getElementById(formId) as HTMLFormElement;
   const saveBtn = document.getElementById(options.saveBtnId);
   const revertBtn = document.getElementById(options.revertBtnId);
   const generateBtn = options.generateBtnId ? document.getElementById(options.generateBtnId) : null;
+  const addLogBtn = options.addLogBtnId ? document.getElementById(options.addLogBtnId) : null;
 
   if (!form || !saveBtn || !revertBtn) return;
 
@@ -118,10 +120,14 @@ export function setEditLock(
     form.classList.remove('is-view-mode');
     form.classList.add('is-edit-mode');
     saveBtn.textContent = '저장';
-    revertBtn.classList.toggle('hidden', mode === 'add'); // 신규 추가 시에는 취소 버튼 숨김 (닫기가 대신함)
+    revertBtn.classList.toggle('hidden', mode === 'add'); // 신규 추가 시에는 취소 버튼 숨김
     
-    // 번호 생성 버튼은 '추가' 시에만 노출
-    if (generateBtn) generateBtn.classList.toggle('hidden', mode !== 'add');
+    // 번호 생성 버튼은 '추가(add)' 시에만 노출
+    if (generateBtn) {
+      generateBtn.style.display = mode === 'add' ? 'flex' : 'none';
+    }
+    // 내역 추가 버튼 노출
+    if (addLogBtn) addLogBtn.style.display = 'flex';
   } else {
     // 조회 모드 (잠금)
     form.classList.remove('is-edit-mode');
@@ -129,7 +135,79 @@ export function setEditLock(
     saveBtn.textContent = '수정';
     revertBtn.classList.add('hidden');
     
-    // 조회 모드에서는 번호 생성 버튼 무조건 숨김
-    if (generateBtn) generateBtn.classList.add('hidden');
+    // 조회 모드에서는 버튼들 숨김
+    if (generateBtn) generateBtn.style.display = 'none';
+    if (addLogBtn) addLogBtn.style.display = 'none';
   }
 }
+
+/**
+ * 8. 공통 모달 프레임 템플릿 생성
+ * @param idPrefix 필드 ID의 접두사 (예: 'hw', 'sw', 'pc')
+ * @param title 모달 제목
+ * @param formContent 각 모달마다 다른 폼 본문 HTML
+ * @param options 설정 (이력 영역 제목 등)
+ */
+export function createModalFrameHTML(
+  idPrefix: string, 
+  title: string, 
+  formContent: string, 
+  options: { historyTitle: string, addLogBtnId: string }
+): string {
+  return `
+    <div id="${idPrefix}-asset-modal" class="modal-overlay hidden">
+      <div class="modal-content wide">
+        <div class="modal-header">
+          <h2 id="${idPrefix}-modal-title">${title}</h2>
+          <button id="btn-close-${idPrefix}-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
+        </div>
+        <div class="modal-body">
+          <div class="modal-body-split">
+            <div class="modal-form-area">
+              <form id="${idPrefix}-asset-form" class="grid-form">
+                <input type="hidden" id="${idPrefix}-asset-id" />
+                <input type="hidden" id="${idPrefix}-asset-type" />
+                ${formContent}
+              </form>
+            </div>
+            <div class="modal-history-area">
+              <div class="history-header">
+                <h3><i data-lucide="history" style="width:16px; height:16px;"></i> ${options.historyTitle}</h3>
+                <button type="button" id="${options.addLogBtnId}" class="btn btn-outline btn-sm">
+                  내역 추가 <i data-lucide="plus" style="width:14px; height:14px;"></i>
+                </button>
+              </div>
+              <div id="${idPrefix}-history-list" class="history-timeline"></div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button id="btn-delete-${idPrefix}-asset" class="btn btn-outline btn-danger">삭제</button>
+          <div class="footer-actions">
+            <button id="btn-revert-${idPrefix}-edit" class="btn btn-outline hidden">수정 취소</button>
+            <button id="btn-cancel-${idPrefix}-modal" class="btn btn-outline">닫기</button>
+            <button id="btn-save-${idPrefix}-asset" class="btn btn-primary">수정</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * 9. 데이터 ↔ 폼 자동 매핑 (유지보수 핵심)
+ */
+export function autoFillForm(idPrefix: string, data: any, fieldMap: Record<string, string>) {
+  Object.entries(fieldMap).forEach(([fieldId, dataKey]) => {
+    setFieldValue(`${idPrefix}-${fieldId}`, data[dataKey]);
+  });
+}
+
+export function autoExtractForm(idPrefix: string, fieldMap: Record<string, string>): any {
+  const result: any = {};
+  Object.entries(fieldMap).forEach(([fieldId, dataKey]) => {
+    result[dataKey] = getFieldValue(`${idPrefix}-${fieldId}`);
+  });
+  return result;
+}
+