From 2cb4b87c0acf3d79a314327f682317ad8921951d Mon Sep 17 00:00:00 2001
From: Taehoon <thlee3@samaneng.com>
Date: Wed, 17 Jun 2026 13:16:15 +0900
Subject: [PATCH] style: surgically unify Admin page UI and sub-tabs

- Standardized sub-tab rendering in PartsMasterListView to prevent duplication
- Updated badge classes to match system design guide (badge-success/warning)
- Refactored JobSpecModal to use unified .grid-form and header identity
- Preserved all functional logic and tab-switching behavior from collaborator
---
 src/components/Modal/JobSpecModal.ts  | 147 ++++++++++++++------------
 src/views/List/PartsMasterListView.ts |  16 +--
 2 files changed, 92 insertions(+), 71 deletions(-)

diff --git a/src/components/Modal/JobSpecModal.ts b/src/components/Modal/JobSpecModal.ts
index 336b384..0b9bd04 100644
--- a/src/components/Modal/JobSpecModal.ts
+++ b/src/components/Modal/JobSpecModal.ts
@@ -10,97 +10,94 @@ class JobSpecModal extends BaseModal {
   }
 
   protected renderFrameHTML(): string {
-    const sharedStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0;';
-    const inputStyle = sharedStyle;
-
     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-content narrow">
           <div class="modal-header">
-            <h2 id="job-spec-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">\${this.title}</h2>
-            <button id="btn-close-job-spec-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">&times;</button>
+            <div class="header-left">
+              <h2 id="job-spec-modal-title" class="modal-title">\${this.title}</h2>
+              <div id="job-spec-header-identity" class="header-identity"></div>
+            </div>
+            <button id="btn-close-job-spec-modal" class="btn-icon" aria-label="닫기">&times;</button>
           </div>
-          <div class="modal-body" style="padding: 24px; overflow-y: auto;">
-            <form id="job-spec-asset-form" class="grid-form" style="display: flex; flex-direction: column; gap: 16px;">
+          <div class="modal-body">
+            <form id="job-spec-asset-form" class="grid-form vertical-form">
               <input type="hidden" id="job-spec-id" name="id" />
               
-              <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="text" id="job-spec-job-name" name="job_name" placeholder="예: BIM 모델러, 개발자, 엔지니어" required style="\${inputStyle} width: 100%;" />
+              <div class="form-group">
+                <label>직무명</label>
+                <input type="text" id="job-spec-job-name" name="job_name" placeholder="예: BIM 모델러, 개발자, 엔지니어" required />
               </div>
 
-              <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="CPU 검색..." required style="\${inputStyle} width: 100%;" autocomplete="off" />
+              <div class="form-group relative">
+                <label>권장 CPU 사양</label>
+                <input type="text" id="job-spec-cpu-standard" name="cpu_standard" placeholder="CPU 검색..." required 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; 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="RAM 검색..." required style="\${inputStyle} width: 100%;" autocomplete="off" />
+              <div class="form-group relative">
+                <label>권장 RAM 사양</label>
+                <input type="text" id="job-spec-ram-standard" name="ram_standard" placeholder="RAM 검색..." required 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; 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="GPU 검색..." required style="\${inputStyle} width: 100%;" autocomplete="off" />
+              <div class="form-group relative">
+                <label>권장 GPU 사양</label>
+                <input type="text" id="job-spec-gpu-standard" name="gpu_standard" placeholder="GPU 검색..." required 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="자동 계산 대기..." required style="\${inputStyle} width: 100%;" readonly />
+              <div class="form-group">
+                <label>성능 기준 점수 (이상, 자동 계산됨)</label>
+                <input type="number" id="job-spec-min-score" name="min_score" placeholder="자동 계산 대기..." required readonly />
               </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>
-                <textarea id="job-spec-remarks" name="remarks" placeholder="기타 필요 사양 및 안내 사항" style="box-sizing: border-box !important; font-size: 13px; margin: 0; min-height: 80px; width: 100%; padding: 8px; border: 1px solid var(--border-color); border-radius: 4px; resize: vertical;"></textarea>
+              <div class="form-group">
+                <label>비고 (메모)</label>
+                <textarea id="job-spec-remarks" name="remarks" placeholder="기타 필요 사양 및 안내 사항" rows="3"></textarea>
               </div>
             </form>
           </div>
-          <div class="modal-footer" style="display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #f8fafc; border-top: 1px solid var(--border-color);">
-            <button id="btn-delete-job-spec-asset" class="btn btn-outline btn-danger" style="height: 42px;">삭제</button>
-            <div class="footer-actions" style="display: flex; gap: 8px;">
-              <button id="btn-revert-job-spec-edit" class="btn btn-outline hidden" style="height: 42px;">수정 취소</button>
-              <button id="btn-cancel-job-spec-modal" class="btn btn-outline" style="height: 42px;">닫기</button>
-              <button id="btn-save-job-spec-asset" class="btn btn-primary" style="height: 42px;">수정</button>
+          <div class="modal-footer">
+            <button id="btn-delete-job-spec-asset" class="btn btn-outline btn-danger">삭제</button>
+            <div class="footer-actions">
+              <button id="btn-revert-job-spec-edit" class="btn btn-outline hidden">수정 취소</button>
+              <button id="btn-cancel-job-spec-modal" class="btn btn-outline">닫기</button>
+              <button id="btn-save-job-spec-asset" class="btn btn-primary">수정</button>
             </div>
           </div>
         </div>
       </div>
+      <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;
+        }
+      </style>
     `;
   }
 
@@ -239,6 +236,7 @@ class JobSpecModal extends BaseModal {
     setFieldValue('job-spec-gpu-standard', asset.gpu_standard || '');
     setFieldValue('job-spec-min-score', asset.min_score !== undefined ? asset.min_score.toString() : '100');
     setFieldValue('job-spec-remarks', asset.remarks || '');
+    this.updateHeaderIdentity(asset);
   }
 
   protected onAfterOpen(asset: any, mode: string): void {
@@ -270,6 +268,25 @@ class JobSpecModal extends BaseModal {
     }
     
     this.updateMinScore();
+    this.updateHeaderIdentity(asset);
+  }
+
+  private updateHeaderIdentity(asset: any) {
+    const container = document.getElementById('job-spec-header-identity');
+    if (!container) return;
+    
+    if (this.currentMode === 'add') {
+      container.innerHTML = '<span class="badge badge-primary">신규 등록</span>';
+      return;
+    }
+
+    const jobName = asset.job_name || '';
+    const minScore = asset.min_score || 0;
+
+    container.innerHTML = `
+      <span class="asset-code-title">${jobName}</span>
+      <span class="service-type-badge">${minScore}점 기준</span>
+    `;
   }
 }
 
diff --git a/src/views/List/PartsMasterListView.ts b/src/views/List/PartsMasterListView.ts
index 54928eb..c85decb 100644
--- a/src/views/List/PartsMasterListView.ts
+++ b/src/views/List/PartsMasterListView.ts
@@ -34,9 +34,9 @@ export function renderPartsMasterList(container: HTMLElement) {
           width: '15%',
           render: c => {
             let badgeClass = 'badge-primary';
-            if (c.category === 'CPU') badgeClass = 'b-primary';
-            else if (c.category === 'GPU') badgeClass = 'b-purple';
-            else if (c.category === 'RAM') badgeClass = 'b-green';
+            if (c.category === 'CPU') badgeClass = 'badge-primary';
+            else if (c.category === 'GPU') badgeClass = 'badge-success';
+            else if (c.category === 'RAM') badgeClass = 'badge-warning';
             return `<span class="badge ${badgeClass}">${c.category}</span>`;
           }
         },
@@ -133,18 +133,22 @@ function renderSubTabs(container: HTMLElement) {
   const header = container.querySelector('.page-header');
   if (!header) return;
 
+  // 기존에 생성된 탭 바가 있다면 제거하여 중복 방지 (스타일만 수정하는 최소 침습 방식)
+  const existingTabs = container.querySelector('.sub-tab-container');
+  if (existingTabs) existingTabs.remove();
+
   const tabContainer = document.createElement('div');
   tabContainer.className = 'sub-tab-container';
-  tabContainer.style.cssText = 'display: flex; gap: 16px; margin-top: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border-color); padding-bottom: 0;';
+  tabContainer.style.cssText = 'display: flex; gap: 1rem; padding: 0 2rem; border-bottom: 1px solid var(--hairline); background: var(--canvas);';
 
   const tab1Active = activePartsMasterSubTab === 'parts-master';
   const tab2Active = activePartsMasterSubTab === 'job-spec';
 
   tabContainer.innerHTML = `
-    <button id="tab-parts-master" class="sub-tab-btn ${tab1Active ? 'active' : ''}" style="padding: 10px 16px; border: none; background: none; font-size: 14px; font-weight: 600; cursor: pointer; color: ${tab1Active ? 'var(--primary-color)' : 'var(--text-muted)'}; position: relative; border-bottom: 3px solid ${tab1Active ? 'var(--primary-color)' : 'transparent'};">
+    <button id="tab-parts-master" class="sub-tab-btn ${tab1Active ? 'active' : ''}" style="padding: 1rem 0.5rem; border: none; background: none; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; color: ${tab1Active ? 'var(--primary)' : 'var(--mute)'}; position: relative; border-bottom: 2px solid ${tab1Active ? 'var(--primary)' : 'transparent'}; margin-bottom: -1px;">
       부품 표준 등급
     </button>
-    <button id="tab-job-spec" class="sub-tab-btn ${tab2Active ? 'active' : ''}" style="padding: 10px 16px; border: none; background: none; font-size: 14px; font-weight: 600; cursor: pointer; color: ${tab2Active ? 'var(--primary-color)' : 'var(--text-muted)'}; position: relative; border-bottom: 3px solid ${tab2Active ? 'var(--primary-color)' : 'transparent'};">
+    <button id="tab-job-spec" class="sub-tab-btn ${tab2Active ? 'active' : ''}" style="padding: 1rem 0.5rem; border: none; background: none; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; color: ${tab2Active ? 'var(--primary)' : 'var(--mute)'}; position: relative; border-bottom: 2px solid ${tab2Active ? 'var(--primary)' : 'transparent'}; margin-bottom: -1px;">
       직무별 기준 사양
     </button>
   `;