From 05e23883b882015625a6d382afbe2538d709428e Mon Sep 17 00:00:00 2001
From: JooWangi <brrr0@baroncs.co.kr>
Date: Mon, 15 Jun 2026 13:29:10 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=A7=81=EB=AC=B4=EB=B3=84=20=EA=B8=B0?=
 =?UTF-8?q?=EC=A4=80=20=EC=82=AC=EC=96=91=20=EB=93=B1=EB=A1=9D=20=EC=8B=9C?=
 =?UTF-8?q?=20=EB=B6=80=ED=92=88=20=EB=A7=88=EC=8A=A4=ED=84=B0=20=EC=9E=90?=
 =?UTF-8?q?=EB=8F=99=EC=99=84=EC=84=B1=20=EA=B2=80=EC=83=89=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=84=B1=EB=8A=A5=20=EC=A0=90=EC=88=98=20=EC=8B=A4=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=84=20=EC=9E=90=EB=8F=99=20=EA=B3=84=EC=82=B0=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/JobSpecModal.ts | 128 ++++++++++++++++++++++++---
 1 file changed, 118 insertions(+), 10 deletions(-)

diff --git a/src/components/Modal/JobSpecModal.ts b/src/components/Modal/JobSpecModal.ts
index 2152177..336b384 100644
--- a/src/components/Modal/JobSpecModal.ts
+++ b/src/components/Modal/JobSpecModal.ts
@@ -2,6 +2,7 @@ import { state, saveJobSpec, deleteJobSpec } from '../../core/state';
 import { BaseModal } from './BaseModal';
 import { setFieldValue } from './ModalUtils';
 import { UI_TEXT } from '../../core/schema';
+import { calculatePcScoreDeductive } from '../../core/utils';
 
 class JobSpecModal extends BaseModal {
   constructor() {
@@ -14,6 +15,39 @@ class JobSpecModal extends BaseModal {
 
     return `
       <div id="job-spec-asset-modal" class="modal-overlay hidden">
+        <style>
+          .autocomplete-list {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            max-height: 150px;
+            overflow-y: auto;
+            background-color: white;
+            border: 1px solid var(--border-color, #E2E8F0);
+            border-top: none;
+            border-radius: 0 0 4px 4px;
+            z-index: 1000;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+          }
+          .autocomplete-item {
+            padding: 8px 12px;
+            font-size: 13px;
+            color: #334155;
+            cursor: pointer;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+          .autocomplete-item:hover {
+            background-color: #F1F5F9;
+            color: #1E5149;
+            font-weight: 600;
+          }
+          .hidden {
+            display: none !important;
+          }
+        </style>
         <div class="modal-content" style="max-width: 500px; width: 100%;">
           <div class="modal-header">
             <h2 id="job-spec-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">\${this.title}</h2>
@@ -28,24 +62,27 @@ class JobSpecModal extends BaseModal {
                 <input type="text" id="job-spec-job-name" name="job_name" placeholder="예: BIM 모델러, 개발자, 엔지니어" required style="\${inputStyle} width: 100%;" />
               </div>
 
-              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px; position: relative;">
                 <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 CPU 사양</label>
-                <input type="text" id="job-spec-cpu-standard" name="cpu_standard" placeholder="예: Intel Core i7-13700 이상" required style="\${inputStyle} width: 100%;" />
+                <input type="text" id="job-spec-cpu-standard" name="cpu_standard" placeholder="CPU 검색..." required style="\${inputStyle} width: 100%;" autocomplete="off" />
+                <div id="job-spec-cpu-autocomplete" class="autocomplete-list hidden"></div>
               </div>
 
-              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px; position: relative;">
                 <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 RAM 사양</label>
-                <input type="text" id="job-spec-ram-standard" name="ram_standard" placeholder="예: 32GB" required style="\${inputStyle} width: 100%;" />
+                <input type="text" id="job-spec-ram-standard" name="ram_standard" placeholder="RAM 검색..." required style="\${inputStyle} width: 100%;" autocomplete="off" />
+                <div id="job-spec-ram-autocomplete" class="autocomplete-list hidden"></div>
               </div>
 
-              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px; position: relative;">
                 <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 GPU 사양</label>
-                <input type="text" id="job-spec-gpu-standard" name="gpu_standard" placeholder="예: RTX 4070 이상" required style="\${inputStyle} width: 100%;" />
+                <input type="text" id="job-spec-gpu-standard" name="gpu_standard" placeholder="GPU 검색..." required style="\${inputStyle} width: 100%;" autocomplete="off" />
+                <div id="job-spec-gpu-autocomplete" class="autocomplete-list hidden"></div>
               </div>
 
               <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
-                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">성능 기준 점수 (이상)</label>
-                <input type="number" id="job-spec-min-score" name="min_score" placeholder="예: 80" required style="\${inputStyle} width: 100%;" />
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">성능 기준 점수 (이상, 자동 계산됨)</label>
+                <input type="number" id="job-spec-min-score" name="min_score" placeholder="자동 계산 대기..." required style="\${inputStyle} width: 100%;" readonly />
               </div>
 
               <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
@@ -122,6 +159,76 @@ class JobSpecModal extends BaseModal {
         onSave(); this.close(); closeModals();
       }
     });
+
+    // 자동완성 바인딩
+    this.bindAutocomplete('job-spec-cpu-standard', 'job-spec-cpu-autocomplete', 'CPU');
+    this.bindAutocomplete('job-spec-ram-standard', 'job-spec-ram-autocomplete', 'RAM');
+    this.bindAutocomplete('job-spec-gpu-standard', 'job-spec-gpu-autocomplete', 'GPU');
+
+    // 실시간 점수 계산 이벤트 바인딩
+    const inputs = ['job-spec-cpu-standard', 'job-spec-ram-standard', 'job-spec-gpu-standard'];
+    inputs.forEach(id => {
+      const el = document.getElementById(id);
+      el?.addEventListener('input', () => this.updateMinScore());
+      el?.addEventListener('change', () => this.updateMinScore());
+    });
+  }
+
+  private bindAutocomplete(inputId: string, autocompleteId: string, category: string) {
+    const input = document.getElementById(inputId) as HTMLInputElement;
+    const list = document.getElementById(autocompleteId) as HTMLDivElement;
+    if (!input || !list) return;
+
+    const showList = (filterText: string = '') => {
+      if (!this.isEditMode) return;
+      const items = (state.masterData.partsMaster || []).filter((c: any) => c.category === category);
+      const filtered = filterText 
+        ? items.filter((c: any) => c.component_name.toLowerCase().includes(filterText.toLowerCase()))
+        : items;
+
+      if (filtered.length === 0) {
+        list.innerHTML = '<div class="autocomplete-item" style="color: #94a3b8; cursor: default;">검색 결과 없음</div>';
+      } else {
+        list.innerHTML = filtered.map((c: any) => `<div class="autocomplete-item" data-val="${c.component_name}">${c.component_name}</div>`).join('');
+      }
+      list.classList.remove('hidden');
+    };
+
+    input.addEventListener('focus', () => {
+      showList(input.value);
+    });
+
+    input.addEventListener('input', () => {
+      showList(input.value);
+    });
+
+    list.addEventListener('mousedown', (e) => {
+      const item = (e.target as HTMLElement).closest('.autocomplete-item');
+      if (item && item.getAttribute('data-val')) {
+        input.value = item.getAttribute('data-val') || '';
+        list.classList.add('hidden');
+        this.updateMinScore();
+      }
+    });
+
+    document.addEventListener('mousedown', (e) => {
+      if (e.target !== input && !list.contains(e.target as Node)) {
+        list.classList.add('hidden');
+      }
+    });
+  }
+
+  private updateMinScore(): void {
+    const cpu = (document.getElementById('job-spec-cpu-standard') as HTMLInputElement)?.value || '';
+    const ram = (document.getElementById('job-spec-ram-standard') as HTMLInputElement)?.value || '';
+    const gpu = (document.getElementById('job-spec-gpu-standard') as HTMLInputElement)?.value || '';
+    
+    const score = calculatePcScoreDeductive(cpu, ram, gpu, '');
+    
+    const minScoreEl = document.getElementById('job-spec-min-score') as HTMLInputElement;
+    if (minScoreEl) {
+      minScoreEl.value = score.toString();
+    }
   }
 
   protected fillFormData(asset: any): void {
@@ -130,7 +237,7 @@ class JobSpecModal extends BaseModal {
     setFieldValue('job-spec-cpu-standard', asset.cpu_standard || '');
     setFieldValue('job-spec-ram-standard', asset.ram_standard || '');
     setFieldValue('job-spec-gpu-standard', asset.gpu_standard || '');
-    setFieldValue('job-spec-min-score', asset.min_score !== undefined ? asset.min_score.toString() : '0');
+    setFieldValue('job-spec-min-score', asset.min_score !== undefined ? asset.min_score.toString() : '100');
     setFieldValue('job-spec-remarks', asset.remarks || '');
   }
 
@@ -148,7 +255,6 @@ class JobSpecModal extends BaseModal {
     const deleteBtn = document.getElementById('btn-delete-job-spec-asset')!;
     const saveBtn = document.getElementById('btn-save-job-spec-asset')!;
     
-    // 추가 모드일 때는 삭제 버튼 숨김
     deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
 
     if (mode === 'add') {
@@ -162,6 +268,8 @@ class JobSpecModal extends BaseModal {
       saveBtn.textContent = '수정';
       saveBtn.style.display = 'block';
     }
+    
+    this.updateMinScore();
   }
 }