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

style: UI 가독성 개선 및 LocationView 타입 오류 수정

Browse Source 
1. common.css의 --mute 변수 색상 대비값 강화 (#71717a) 및 누락된 자산 상태/성능 등급 배지 CSS 클래스 정의
2. ListFactory.ts에서 테이블 헤더(th) 정렬을 데이터 셀(td)과 일치시키고 장문 생략 시 툴팁(title) 추가
3. common.css에서 타이포그래피 스케일 계산식을 clamp에서 max로 변경하여 상한선 제한 해제 (와이드 화면 대응)
4. LocationView.ts 내 HardwareAsset 타입에 정의되지 않은 asset_purpose를 any로 타입 캐스팅하여 TS2339 빌드 에러 해결
5. 프로젝트 폴더 내 일회성 점검/이관 스크립트 및 Playwright 임시 캡처 로그/이미지 파일 정리
This commit is contained in:
이태훈
2026-06-19 13:18:55 +09:00
parent c0ef52deac
commit e128634e05
184 changed files with 33 additions and 12666 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/views/List/ListFactory.ts
View File

@@ -744,14 +744,21 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
let filtered = applyCommonFilters(fullList, currentFilters, config.searchKeys as any[]);
if (sortState.key) filtered = dynamicSort(filtered, sortState.key, sortState.direction);
thead.innerHTML = `<tr>${config.columns.map(col => `<th ${col.sortKey ? `data-sort="${col.sortKey}"` : ''} style="${col.width ? `width:${col.width};` : ''}">${col.header}</th>`).join('')}</tr>`;
thead.innerHTML = `<tr>${config.columns.map(col => {
const isDateCol = col.header.includes('일') || col.header.includes('날짜') || col.header.includes('연월');
const alignmentClass = col.align ? `text-${col.align}` : (isDateCol ? 'text-center' : '');
return `<th class="${alignmentClass}" ${col.sortKey ? `data-sort="${col.sortKey}"` : ''} style="${col.width ? `width:${col.width};` : ''}">${col.header}</th>`;
}).join('')}</tr>`;
tbody.innerHTML = filtered.length === 0 ? `<tr><td colspan="${config.columns.length}" class="text-center empty-cell">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`
: filtered.map(asset => `<tr class="asset-row clickable" data-id="${asset.id}">${config.columns.map(col => {
const isDateCol = col.header.includes('일') || col.header.includes('날짜') || col.header.includes('연월');
const alignmentClass = col.align ? `text-${col.align}` : (isDateCol ? 'text-center' : '');
const customClass = col.className || '';
return `<td class="${alignmentClass} ${customClass}" style="${col.width ? `width:${col.width};` : ''}">${col.render(asset)}</td>`;
const rendered = col.render(asset);
const rawText = rendered.replace(/<[^>]*>/g, '').trim();
const titleAttr = rawText && rawText !== '-' ? `title="${rawText.replace(/"/g, '&quot;')}"` : '';
return `<td class="${alignmentClass} ${customClass}" style="${col.width ? `width:${col.width};` : ''}" ${titleAttr}>${rendered}</td>`;
}).join('')}</tr>`).join('');
tbody.querySelectorAll('.asset-row').forEach((tr, idx) => { tr.addEventListener('click', () => config.onRowClick && config.onRowClick(filtered[idx])); });

2
src/views/LocationView.ts
View File

@@ -87,7 +87,7 @@ export async function renderLocationView(container: HTMLElement) {
<div id="box-overlay" class="map-overlay">
${boxes.map((box: any, idx: number) => {
const asset = allHwAssets.find(a => a.id === box.asset_id);
const name = asset ? (asset.asset_purpose || asset.asset_code) : (box.name || `#${idx+1}`);
const name = asset ? ((asset as any).asset_purpose || asset.asset_code) : (box.name || `#${idx+1}`);
// w, h가 없거나 너무 작으면 최소 크기(3%) 보장하여 영역으로 표시
const width = Math.max(parseFloat(box.w || '3'), 3);
const height = Math.max(parseFloat(box.h || '3'), 3);