fix: 자산 상세 정보 레이아웃 최적화 및 스타일 표준화

- 상세 정보 섹션을 2열 그리드로 변경하여 정보 밀도 향상\n- 항목 제목(12px) 및 내용(14px) 폰트 크기 조정\n- 인라인 스타일을 dashboard.css로 이전 및 중앙 집중화\n- 불필요한 아이콘 제거 및 UI 정돈
This commit is contained in:
2026-06-11 10:37:33 +09:00
parent 207acbdecb
commit 95fbd3f606
2 changed files with 65 additions and 13 deletions

View File

@@ -321,9 +321,60 @@
cursor: pointer; cursor: pointer;
} }
.empty-state { /* --- Asset Detail Sidebar (LocationView) --- */
padding: 4rem 2rem; .asset-detail-sidebar {
text-align: center; padding-top: 1rem;
color: var(--text-muted); background: var(--white);
font-size: 0.8125rem; height: 100%;
overflow-y: auto;
}
.detail-section {
margin-bottom: 20px;
padding: 0 1.25rem;
}
.detail-section-title {
font-size: 13px;
font-weight: 700;
color: var(--primary-color);
border-bottom: 1px solid var(--border-color);
padding-bottom: 6px;
margin-bottom: 12px;
}
.detail-grid {
display: grid;
grid-template-columns: repeat(2, minmax(80px, auto) 1fr);
gap: 8px 16px;
}
.detail-label {
font-size: 12px;
color: var(--text-muted);
font-weight: 600;
display: flex;
align-items: center;
}
.detail-value {
font-size: 14px;
color: var(--text-main);
font-weight: 500;
word-break: break-all;
display: flex;
align-items: center;
}
.detail-header-actions {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.detail-header-title {
flex: 1;
font-size: 0.95rem;
font-weight: 700;
} }

View File

@@ -176,21 +176,22 @@ export async function renderLocationView(container: HTMLElement) {
const renderAssetDetail = (asset: any) => { const renderAssetDetail = (asset: any) => {
const title = container.querySelector('#loc-list-title')!; const title = container.querySelector('#loc-list-title')!;
const tableContainer = container.querySelector('#loc-asset-table-container')!; const tableContainer = container.querySelector('#loc-asset-table-container')!;
title.innerHTML = ` title.innerHTML = `
<div style="display: flex; align-items: center; gap: 8px; width: 100%;"> <div class="detail-header-actions">
<button id="btn-back-to-list" class="btn-icon" style="background: none; border: none; cursor: pointer; color: var(--primary-color); font-size: 1.2rem; padding: 0 4px;">←</button> <button id="btn-back-to-list" class="btn-icon" style="background: none; border: none; cursor: pointer; color: var(--primary-color); font-size: 1.2rem; padding: 0 4px;">←</button>
<span style="flex: 1;">📍 자산 상세 정보</span> <span class="detail-header-title">자산 상세 정보</span>
<button id="btn-edit-from-loc" class="btn btn-primary btn-sm" style="font-size: 11px; height: 28px;">수정</button> <button id="btn-edit-from-loc" class="btn btn-primary btn-sm" style="font-size: 11px; height: 28px;">수정</button>
</div> </div>
`; `;
const renderSection = (title: string, fields: { label: string; value: any }[]) => ` const renderSection = (title: string, fields: { label: string; value: any }[]) => `
<div class="detail-section" style="margin-bottom: 20px; padding: 0 1rem;"> <div class="detail-section">
<div style="font-size: 12px; font-weight: 700; color: var(--primary-color); border-bottom: 1px solid var(--border-color); padding-bottom: 6px; margin-bottom: 10px;">${title}</div> <div class="detail-section-title">${title}</div>
<div style="display: grid; grid-template-columns: 100px 1fr; gap: 8px 12px;"> <div class="detail-grid">
${fields.map(f => ` ${fields.map(f => `
<div style="font-size: 12px; color: var(--text-muted);">${f.label}</div> <div class="detail-label">${f.label}</div>
<div style="font-size: 12px; color: var(--text-main); font-weight: 500; word-break: break-all;">${f.value || '-'}</div> <div class="detail-value">${f.value || '-'}</div>
`).join('')} `).join('')}
</div> </div>
</div> </div>
@@ -224,7 +225,7 @@ export async function renderLocationView(container: HTMLElement) {
].join(''); ].join('');
tableContainer.innerHTML = ` tableContainer.innerHTML = `
<div class="asset-detail-sidebar" style="padding-top: 1rem; background: #fff; max-height: 100%; overflow-y: auto;"> <div class="asset-detail-sidebar">
${sectionsHTML} ${sectionsHTML}
</div> </div>
`; `;