Taehoon/ITAM
2
0
Fork 0
Code Issues 25 Pull Requests Actions Packages Projects Releases Wiki Activity

style: surgically unify Admin page UI and sub-tabs

Browse Source 
- 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
This commit is contained in:
이태훈
2026-06-17 13:16:15 +09:00
parent 6ed2faee2d
commit 2cb4b87c0a
2 changed files with 92 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/List/PartsMasterListView.ts
View File

@@ -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>
`;