merge: remote main updates into ux_setting with style preservation

- Resolved conflicts in state.ts, HwDashboard.ts, ListFactory.ts, and PartsMasterListView.ts
- Prioritized latest functional logic from main branch (Job Spec mapping, Matrix calculations)
- Maintained Vercel-inspired UI styling and unified CSS classes from ux_setting branch
- Synchronized PC status toggle visibility rules with latest main branch changes

src/views/List/ListFactory.ts

@@ -1,5 +1,5 @@
 import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
-import { dynamicSort, renderPageHeader, calculateAssetAge } from '../../core/utils';
+import { dynamicSort, renderPageHeader, calculateAssetAge, formatInline, isWindows11Incompatible } from '../../core/utils';
 import { setupTableSorting, SortState } from '../../core/tableHandler';
 import { renderFilterBar, applyCommonFilters } from '../../core/filterHandler';
 import { state } from '../../core/state';
@@ -176,10 +176,9 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
   }
   let currentFilters: any = (state as any).listFilters[filterKey];
   
+  // 서버 탭이 아닐 경우 '자산 현황' 뷰 진입 방지 및 강제 'asset' 모드 (PC 탭은 자산 현황 숨김)
   const isServer = config.title === '서버';
-
-  // 서버 및 PC 탭이 아닐 경우 '자산 현황' 뷰 진입 방지 및 강제 'asset' 모드
-  if (!(state as any).currentViewMode || (state as any).currentViewMode === 'system') {
+  if (!isServer) {
     (state as any).currentViewMode = 'asset';
   }
 
@@ -189,7 +188,7 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
 
   // 2. 필터 바 생성 (자산 목록에서만 사용)
   const filterBar = document.createElement('div');
-  filterBar.className = 'filter-bar';
+  filterBar.className = 'search-bar';
   
   // 자산 추가 버튼 및 목록 보기 체크박스 추가 로직
   const showPcFlowBtn = config.title === 'PC';
@@ -413,6 +412,146 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
       </div>
     `;
 
+    const updateFlowLogsSection = () => {
+      if (!isPcView) return;
+
+      // 사양 주의 장비 현황 (부족/오버스펙) 계산 및 바인딩
+      const specMismatchTbody = document.getElementById('spec-mismatch-tbody');
+      if (specMismatchTbody) {
+        // fullList 중 개인 PC 관련 장비 필터링
+        const pcs = fullList.filter((a: any) => {
+          const type = a[ASSET_SCHEMA.ASSET_TYPE.key] || '';
+          const job = a[ASSET_SCHEMA.USER_POSITION.key] || '';
+          const status = a[ASSET_SCHEMA.HW_STATUS.key] || '';
+          const user = a[ASSET_SCHEMA.CURRENT_USER.key] || '';
+          
+          // 운영 중이고 사용자가 할당되어 있으며, 직무가 재고PC가 아닌 실사용 기기 대상
+          return job !== '재고PC' && status === '운영' && user.trim() !== '';
+        });
+
+        // 직무별 평균 점수 산출
+        const jobScores: Record<string, { totalScore: number; count: number; avg: number }> = {};
+        pcs.forEach((pc: any) => {
+          const job = pc[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
+          const cpu = pc[ASSET_SCHEMA.CPU.key] || '';
+          const ram = pc[ASSET_SCHEMA.RAM.key] || '';
+          const gpu = pc[ASSET_SCHEMA.GPU.key] || '';
+          const pDate = pc[ASSET_SCHEMA.PURCHASE_DATE.key] || '';
+          const score = calculatePcScoreDeductive(cpu, ram, gpu, pDate);
+          pc['_pc_score'] = score;
+          
+          if (!jobScores[job]) jobScores[job] = { totalScore: 0, count: 0, avg: 0 };
+          jobScores[job].totalScore += score;
+          jobScores[job].count += 1;
+        });
+
+        Object.keys(jobScores).forEach(job => {
+          jobScores[job].avg = jobScores[job].count > 0 ? jobScores[job].totalScore / jobScores[job].count : 0;
+        });
+
+        // DB 기준 사양 데이터 맵핑 (state.masterData.jobSpecs 이용)
+        const jobSpecsMap: Record<string, number> = {};
+        if (state.masterData.jobSpecs) {
+          state.masterData.jobSpecs.forEach((s: any) => {
+            jobSpecsMap[s.job_name] = s.min_score;
+          });
+        }
+
+        // 기준 대비 사양 부족/오버스펙 분류
+        const criticalPcList: any[] = [];
+        pcs.forEach((pc: any) => {
+          const job = pc[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
+          const score = pc['_pc_score'];
+          const standardScore = jobSpecsMap[job] !== undefined ? jobSpecsMap[job] : (jobScores[job]?.avg || 0);
+          
+          const cpu = pc[ASSET_SCHEMA.CPU.key] || '';
+          const ram = pc[ASSET_SCHEMA.RAM.key] || '';
+          const win11Incompatible = isWindows11Incompatible(cpu, ram);
+          
+          let isUnder = false;
+          if (standardScore > 0) {
+            if (score < standardScore * 0.6) {
+              isUnder = true;
+              pc['_spec_status'] = '사양 부족';
+            } else if (score > standardScore * 1.5 && !win11Incompatible) {
+              pc['_spec_status'] = '오버스펙';
+              criticalPcList.push(pc);
+            } else if (win11Incompatible) {
+              isUnder = true;
+              pc['_spec_status'] = '사양 부족';
+            } else {
+              pc['_spec_status'] = '적정';
+            }
+          } else {
+            if (win11Incompatible) {
+              isUnder = true;
+              pc['_spec_status'] = '사양 부족';
+            } else {
+              pc['_spec_status'] = '적정';
+            }
+          }
+
+          if (isUnder) {
+            criticalPcList.push(pc);
+          }
+        });
+
+        // 정렬: 기준 점수 대비 사양 부족이 심한 순(비율이 낮은 순)으로 정렬
+        criticalPcList.sort((a: any, b: any) => {
+          const jobA = a[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
+          const jobB = b[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
+          const stdA = jobSpecsMap[jobA] !== undefined ? jobSpecsMap[jobA] : (jobScores[jobA]?.avg || 0);
+          const stdB = jobSpecsMap[jobB] !== undefined ? jobSpecsMap[jobB] : (jobScores[jobB]?.avg || 0);
+          
+          const ratioA = stdA > 0 ? a['_pc_score'] / stdA : 1;
+          const ratioB = stdB > 0 ? b['_pc_score'] / stdB : 1;
+          return ratioA - ratioB;
+        });
+
+        if (criticalPcList.length === 0) {
+          specMismatchTbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding:1.5rem; color:#94A3B8;">사양 주의 자산이 없습니다.</td></tr>';
+        } else {
+          specMismatchTbody.innerHTML = criticalPcList.map((pc: any) => {
+            const user = pc[ASSET_SCHEMA.CURRENT_USER.key] || '-';
+            const dept = pc[ASSET_SCHEMA.CURRENT_DEPT.key] || '-';
+            const job = pc[ASSET_SCHEMA.USER_POSITION.key] || '-';
+            const status = pc['_spec_status'];
+            const assetCode = pc.asset_code || '-';
+
+            const badgeColor = status === '사양 부족' 
+              ? 'background:#FFF1F2; color:#E11D48; border: 1px solid #FDA4AF;' 
+              : 'background:#F0FDF4; color:#16A34A; border: 1px solid #BBF7D0;';
+
+            return `
+              <tr style="border-bottom: 1px solid var(--border-color); cursor: pointer;" class="spec-row" data-id="${pc.id}">
+                <td style="padding: 10px 0; font-weight: 600; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${user}">${user}</td>
+                <td style="padding: 10px 0; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${dept} (${job})">${dept} (${job})</td>
+                <td style="padding: 10px 0; white-space: nowrap; text-align: center;">
+                  <span style="padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; ${badgeColor}">${status === '오버스펙' ? '오버 스펙' : status}</span>
+                </td>
+                <td style="padding: 10px 0; font-family: monospace; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${assetCode}">${assetCode}</td>
+              </tr>
+            `;
+          }).join('');
+
+          // 클릭 시 해당 자산 상세 페이지로 전환
+          specMismatchTbody.querySelectorAll('.spec-row').forEach(row => {
+            row.addEventListener('click', () => {
+              specMismatchTbody.querySelectorAll('.spec-row').forEach(r => {
+                (r as HTMLElement).style.backgroundColor = 'transparent';
+              });
+              (row as HTMLElement).style.backgroundColor = '#EBF2F1'; // 선택 하이라이트
+              const assetId = row.getAttribute('data-id');
+              const found = fullList.find(a => String(a.id) === String(assetId));
+              if (found) {
+                updateDetailPanel(found);
+              }
+            });
+          });
+        }
+      }
+    };
+
     const updateDetailPanel = (asset: any) => {
       const emptyState = document.getElementById('detail-empty-state');
       const content = document.getElementById('detail-content');
@@ -590,6 +729,7 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
         selectedDetailLocation = (e.target as HTMLSelectElement).value || null; updateTableOnly();
       });
       updateTableOnly();
+      updateFlowLogsSection();
     }, 50);
   };
 
@@ -632,7 +772,7 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
     ...config.filterOptions, 
     initialFilters: currentFilters,
     extraHTML: isServer ? `
-      <div class="filter-group">
+      <div class="search-item">
         <label class="list-view-toggle-label">
           <input type="checkbox" id="chk-list-view" ${(state as any).currentViewMode === 'asset' ? 'checked' : ''} />
           목록보기
@@ -645,7 +785,7 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
   // 3. 필터 바 내 액션 버튼 배치
   const actionContainer = filterBar.querySelector('#filter-bar-actions');
   if (actionContainer) {
-    actionContainer.className = "header-action-group flex items-center gap-2 ml-auto self-end";
+    actionContainer.className = "header-action-group";
     actionContainer.innerHTML = `
       ${showPcFlowBtn ? `
         <button id="btn-goto-parts-master" class="btn btn-outline">

src/views/List/PartsMasterListView.ts

@@ -1,66 +1,170 @@
 import { state } from '../../core/state';
 import { openPartsMasterModal } from '../../components/Modal/PartsMasterModal';
+import { openJobSpecModal } from '../../components/Modal/JobSpecModal';
 import { formatInline } from '../../core/utils';
 import { createListView } from './ListFactory';
 
+export let activePartsMasterSubTab: 'parts-master' | 'job-spec' = 'parts-master';
+
 export function renderPartsMasterList(container: HTMLElement) {
-  createListView(container, {
-    title: '부품 마스터',
-    dataSource: () => state.masterData.partsMaster || [],
-    searchKeys: ['component_name', 'category', 'score_tier'],
-    filterOptions: {
-      keywordLabel: '부품명 / 등급 검색',
-      showLoc: false,
-      showDept: false,
-      showType: false
-    },
-    onRowClick: (component) => openPartsMasterModal(component, 'view'),
-    columns: [
-      {
-        header: 'ID',
-        sortKey: 'id',
-        align: 'center',
-        width: '5%',
-        render: c => c.id.toString()
+  if (activePartsMasterSubTab === 'parts-master') {
+    createListView(container, {
+      title: '부품 마스터',
+      dataSource: () => state.masterData.partsMaster || [],
+      searchKeys: ['component_name', 'category', 'score_tier'],
+      filterOptions: {
+        keywordLabel: '부품명 / 등급 검색',
+        showLoc: false,
+        showDept: false,
+        showType: false
       },
-      {
-        header: '분류',
-        sortKey: 'category',
-        align: 'center',
-        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';
-          return `<span class="badge ${badgeClass}">${c.category}</span>`;
+      onRowClick: (component) => openPartsMasterModal(component, 'view'),
+      columns: [
+        {
+          header: 'ID',
+          sortKey: 'id',
+          align: 'center',
+          width: '5%',
+          render: c => c.id.toString()
+        },
+        {
+          header: '분류',
+          sortKey: 'category',
+          align: 'center',
+          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';
+            return `<span class="badge ${badgeClass}">${c.category}</span>`;
+          }
+        },
+        {
+          header: '부품 표준 명칭',
+          sortKey: 'component_name',
+          render: c => formatInline(c.component_name || '-')
+        },
+        {
+          header: '성능 등급',
+          sortKey: 'score_tier',
+          align: 'center',
+          width: '15%',
+          render: c => c.score_tier || '-'
+        },
+        {
+          header: '감점 점수',
+          sortKey: 'deduction',
+          align: 'center',
+          width: '15%',
+          render: c => {
+            const score = c.deduction || 0;
+            let color = '#3b82f6'; // blue
+            if (score >= 20) color = '#ef4444'; // red
+            else if (score >= 10) color = '#f59e0b'; // orange
+            return `<strong style="color: ${color}; font-size: 14px;">-${score}점</strong>`;
+          }
         }
+      ]
+    });
+  } else {
+    createListView(container, {
+      title: '직무별 기준 사양',
+      dataSource: () => state.masterData.jobSpecs || [],
+      searchKeys: ['job_name', 'cpu_standard', 'ram_standard', 'gpu_standard', 'remarks'],
+      filterOptions: {
+        keywordLabel: '직무명 / 사양 검색',
+        showLoc: false,
+        showDept: false,
+        showType: false
       },
-      {
-        header: '부품 표준 명칭',
-        sortKey: 'component_name',
-        render: c => formatInline(c.component_name || '-')
-      },
-      {
-        header: '성능 등급',
-        sortKey: 'score_tier',
-        align: 'center',
-        width: '15%',
-        render: c => c.score_tier || '-'
-      },
-      {
-        header: '감점 점수',
-        sortKey: 'deduction',
-        align: 'center',
-        width: '15%',
-        render: c => {
-          const score = c.deduction || 0;
-          let color = '#3b82f6'; // blue
-          if (score >= 20) color = '#ef4444'; // red
-          else if (score >= 10) color = '#f59e0b'; // orange
-          return `<strong style="color: ${color};">-${score}점</strong>`;
+      onRowClick: (jobSpec) => openJobSpecModal(jobSpec, 'view'),
+      columns: [
+        {
+          header: 'ID',
+          sortKey: 'id',
+          align: 'center',
+          width: '5%',
+          render: j => j.id.toString()
+        },
+        {
+          header: '직무명',
+          sortKey: 'job_name',
+          width: '15%',
+          render: j => `<strong style="color: var(--primary-color); font-size: 14px;">${formatInline(j.job_name || '-')}</strong>`
+        },
+        {
+          header: '권장 CPU 사양',
+          sortKey: 'cpu_standard',
+          render: j => formatInline(j.cpu_standard || '-')
+        },
+        {
+          header: '권장 RAM 사양',
+          sortKey: 'ram_standard',
+          width: '12%',
+          render: j => formatInline(j.ram_standard || '-')
+        },
+        {
+          header: '권장 GPU 사양',
+          sortKey: 'gpu_standard',
+          render: j => formatInline(j.gpu_standard || '-')
+        },
+        {
+          header: '기준 점수',
+          sortKey: 'min_score',
+          align: 'center',
+          width: '10%',
+          render: j => `<span style="font-weight: 700;">${j.min_score || 0}점 이상</span>`
+        },
+        {
+          header: '비고',
+          sortKey: 'remarks',
+          width: '20%',
+          render: j => formatInline(j.remarks || '-')
         }
-      }
-    ]
+      ]
+    });
+  }
+
+  renderSubTabs(container);
+}
+
+function renderSubTabs(container: HTMLElement) {
+  const header = container.querySelector('.page-header');
+  if (!header) return;
+
+  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;';
+
+  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>
+    <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>
+  `;
+
+  header.parentNode!.insertBefore(tabContainer, header.nextSibling);
+
+  const tabPartsMaster = tabContainer.querySelector('#tab-parts-master')!;
+  const tabJobSpec = tabContainer.querySelector('#tab-job-spec')!;
+
+  tabPartsMaster.addEventListener('click', () => {
+    if (activePartsMasterSubTab !== 'parts-master') {
+      activePartsMasterSubTab = 'parts-master';
+      renderPartsMasterList(container);
+    }
+  });
+
+  tabJobSpec.addEventListener('click', () => {
+    if (activePartsMasterSubTab !== 'job-spec') {
+      activePartsMasterSubTab = 'job-spec';
+      renderPartsMasterList(container);
+    }
   });
 }

src/views/List/PcListView.ts

@@ -1,18 +1,29 @@
 import { state } from '../../core/state';
 import { openHwModal } from '../../components/Modal/HWModal';
-import { sortAssets, formatInline, calculatePcScoreDeductive, getPcGrade } from '../../core/utils';
+import { sortAssets, formatInline, calculatePcScoreDeductive, getPcGrade, isWindows11Incompatible } from '../../core/utils';
 import { ASSET_SCHEMA } from '../../core/schema';
 import { createListView } from './ListFactory';
+import { SortState } from '../../core/tableHandler';
+
+let persistentSortState: SortState = { key: 'updated_at', direction: 'desc' };
 
 export function renderPcList(container: HTMLElement) {
   createListView(container, {
     title: 'PC',
+    persistentSortState,
     dataSource: () => {
       const list = (state.masterData.pc || []).filter((a: any) => a.asset_type !== '서버PC');
       list.forEach((a: any) => {
         a['_pc_score'] = calculatePcScoreDeductive(a[ASSET_SCHEMA.CPU.key], a[ASSET_SCHEMA.RAM.key], a[ASSET_SCHEMA.GPU.key], a.purchase_date);
       });
-      return sortAssets(list);
+      // 변경일시(updated_at) 내림차순 정렬 (최신 변경 항목이 맨 위로)
+      return list.sort((a: any, b: any) => {
+        const dateA = a.updated_at || a.created_at || '';
+        const dateB = b.updated_at || b.created_at || '';
+        if (dateA < dateB) return 1;
+        if (dateA > dateB) return -1;
+        return 0;
+      });
     },
     searchKeys: ['CURRENT_DEPT', 'CURRENT_USER', 'MODEL_NAME', 'MAC_ADDR', 'MANAGER_MAIN', 'ASSET_TYPE'],
     filterOptions: {
@@ -93,7 +104,8 @@ export function renderPcList(container: HTMLElement) {
         width: '8%',
         render: a => {
           const score = a._pc_score !== undefined ? a._pc_score : calculatePcScoreDeductive(a[ASSET_SCHEMA.CPU.key], a[ASSET_SCHEMA.RAM.key], a[ASSET_SCHEMA.GPU.key], a.purchase_date);
-          const grade = getPcGrade(score);
+          const isWin11Incompatible = isWindows11Incompatible(a[ASSET_SCHEMA.CPU.key], a[ASSET_SCHEMA.RAM.key]);
+          const grade = getPcGrade(score, isWin11Incompatible);
           return `<span class="badge ${grade.class}" title="성능 점수: ${score}점">${grade.name}</span>`;
         }
       }