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

style: 레이아웃 비율 복구 및 타이포그래피 전역 표준화 (16px Base)

Browse Source 
- 주요 변경 사항:
  1. 레이아웃 안정화: 서버 위치도 뷰의 2:1 비율 복원 및 가변형(Adaptive) 레이아웃 적용
  2. 타이포그래피 표준화: 전역 폰트 스케일 도입 및 기본 폰트 사이즈 상향 (15px -> 16px)
  3. 3-Way 토글 통합: [자산 위치] [운영 현황] [자산 목록] 간의 전환 오류 수정 및 UI 통일
  4. 하드코딩 제거: 인라인 스타일을 CSS 클래스 및 변수 체계로 전면 리팩토링
  5. 가이드 업데이트: 변경된 디자인 정책을 design_rule.md에 반영
This commit is contained in:
이태훈
2026-06-15 14:21:54 +09:00
parent b169176d57
commit 119c799d1d
9 changed files with 1196 additions and 1052 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/Dashboard/HwDashboard.ts
View File

@@ -18,7 +18,7 @@ export function renderHwDashboard(container: HTMLElement) {
// 2. 1페이지 매거진 리포트(제목바 제거, '| 제목' 미니멀리즘 스타일) HTML 빌드
container.innerHTML = `
<div class="view-container" style="overflow: hidden; padding: 1.5rem 2rem; background-color: #F8FAFC; height: calc(100vh - var(--header-height) - 28px); box-sizing: border-box; display: flex; flex-direction: column; gap: 1.25rem; font-family: 'Pretendard', sans-serif; color: #1E293B;">
<div class="view-container" style="overflow-y: auto; padding: 1.5rem 2rem; background-color: #F8FAFC; min-height: calc(100vh - 129px); box-sizing: border-box; display: flex; flex-direction: column; gap: 1.25rem; font-family: 'Pretendard', sans-serif; color: #1E293B;">
<!-- 대시보드 타이틀 및 사용조직 필터 -->
<div style="display: flex; justify-content: space-between; align-items: flex-end; flex-shrink: 0; padding-bottom: 0.75rem;">

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

@@ -161,9 +161,11 @@ export interface ListViewConfig {
}
export function createListView(container: HTMLElement, config: ListViewConfig) {
// 1. 컨테이너 초기화 및 헤더 렌더링
// 1. 컨테이너 초기화 및 헤더 렌더링 (서버 탭은 상단 공간 확보를 위해 헤더 생략)
container.innerHTML = '';
renderPageHeader(container, config.title);
if (config.title !== '서버') {
renderPageHeader(container, config.title);
}
const fullList = config.dataSource();
let sortState: SortState = config.persistentSortState || { key: '', direction: 'asc' };
@@ -185,30 +187,29 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
(state as any).currentViewMode = 'system';
}
// 2. 뷰 전환 토글 버튼 생성
// 2. 뷰 전환 토글 바 생성 (Unified Header Style)
const toggleWrapper = document.createElement('div');
toggleWrapper.className = 'view-toggle-container';
toggleWrapper.className = 'location-filter-bar'; // Use unified class for the bar
const showPcFlowBtn = config.title === 'PC';
toggleWrapper.innerHTML = `
<div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
<div class="view-toggle" style="display: ${isServerOrPc ? 'flex' : 'none'}; gap: 0;">
<button class="toggle-btn ${(state as any).currentViewMode === 'system' ? 'active' : ''}" data-mode="system">자산 현황</button>
<button class="toggle-btn ${(state as any).currentViewMode === 'asset' ? 'active' : ''}" data-mode="asset">자산 목록</button>
</div>
<div style="display: flex; gap: 8px;">
${showPcFlowBtn ? `
<button id="btn-goto-parts-master" style="padding: 6px 14px !important; font-size: 12px !important; font-weight: 700 !important; background: white !important; color: var(--primary-color) !important; border: 1px solid var(--primary-color) !important; border-radius: 4px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: fit-content !important; min-width: 0 !important; white-space: nowrap !important;">
<i data-lucide="settings" style="width: 14px; height: 14px;"></i> 부품 마스터
</button>
<button id="btn-pc-flow" style="padding: 6px 14px; font-size: 12px; font-weight: 700; background: white; color: var(--primary-color); border: 1px solid var(--primary-color); border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 6px;">
PC 이동/반납
</button>
` : ''}
<button id="btn-add-asset" style="padding: 6px 14px; font-size: 12px; font-weight: 700; background: #1E5149; color: white; border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 4px;">
<span style="font-size: 16px; line-height: 1;">+</span> 자산 추가
<div class="view-toggle" style="display: ${isServerOrPc ? 'inline-flex' : 'none'};">
${config.title === '서버' ? `<button class="toggle-btn ${state.viewMode === 'location' ? 'active' : ''}" data-mode="location">자산 위치</button>` : ''}
<button class="toggle-btn ${(state as any).currentViewMode === 'system' && state.viewMode === 'list' ? 'active' : ''}" data-mode="system">${config.title === '서버' ? '운영 현황' : '자산 현황'}</button>
<button class="toggle-btn ${(state as any).currentViewMode === 'asset' && state.viewMode === 'list' ? 'active' : ''}" data-mode="asset">자산 목록</button>
</div>
<div class="header-action-group" style="display: flex; gap: 8px;">
${showPcFlowBtn ? `
<button id="btn-goto-parts-master" class="btn btn-outline btn-sm">
<i data-lucide="settings" style="width: 14px; height: 14px;"></i> 부품 마스터
</button>
</div>
<button id="btn-pc-flow" class="btn btn-outline btn-sm">
PC 이동/반납
</button>
` : ''}
<button id="btn-add-asset" class="btn btn-primary btn-sm">
<span style="font-size: 16px; line-height: 1;">+</span> 자산 추가
</button>
</div>
`;
container.appendChild(toggleWrapper);
@@ -486,10 +487,8 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
const htmlMap = document.getElementById('detail-html-map') as HTMLIFrameElement;
const isHtmlMap = imgPath?.toLowerCase().endsWith('.html');
// 좌표가 없으면 사진이 있어도 '정보 없음' 상태로 유도 (사용자 요청)
if (imgPath && hasCoords) {
if (isHtmlMap) {
// HTML 지도 처리
photo.style.display = 'none';
if (marker) marker.style.display = 'none';
if (overlayLayer) overlayLayer.innerHTML = '';
@@ -498,7 +497,6 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
htmlMap.style.display = 'block';
}
} else {
// 일반 이미지 지도 처리
if (htmlMap) {
htmlMap.src = '';
htmlMap.style.display = 'none';
@@ -568,7 +566,6 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
if (noPhoto) { noPhoto.classList.remove('hidden'); noPhoto.style.display = 'flex'; }
}
// 이력 보기 버튼 클릭 이벤트
const flowLogsBtn = document.getElementById('btn-view-flow-logs');
if (flowLogsBtn) {
flowLogsBtn.onclick = () => {
@@ -597,15 +594,10 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
const currentYearMonth = `${currentYear}-${String(currentMonthNum).padStart(2, '0')}`;
if (isPcView) {
// PC 뷰일 때: 해당월의 PC 유동 이력을 렌더링하고, 클릭 시 해당 자산 상세를 띄움
const recentTbody = document.getElementById('system-status-tbody');
if (!recentTbody) return;
const titleEl = document.getElementById('list-section-title');
if (titleEl) {
titleEl.textContent = `🔄 PC 유동 이력 (${currentMonthNum}월)`;
}
if (titleEl) titleEl.textContent = `🔄 PC 유동 이력 (${currentMonthNum}월)`;
const logs = state.masterData.logs || [];
const flowLogs = logs.filter((log: any) => {
const details = log.details || '';
@@ -617,338 +609,88 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
}
return details.includes('[불출]') || details.includes('[반납]') || details.includes('[입고]') || details.includes('[이동]') || details.includes('[이관]');
});
// 해당월(currentYearMonth)에 발생한 로그만 필터링
const monthlyFlowLogs = flowLogs.filter((log: any) => {
const logDate = log.log_date || '';
return logDate.startsWith(currentYearMonth);
});
const monthlyFlowLogs = flowLogs.filter((log: any) => (log.log_date || '').startsWith(currentYearMonth));
if (monthlyFlowLogs.length === 0) {
recentTbody.innerHTML = `<tr><td colspan="7" style="text-align:center; padding:1.5rem; color:#94A3B8;">${currentMonthNum}월 유동 이력이 없습니다.</td></tr>`;
} else {
recentTbody.innerHTML = monthlyFlowLogs.map((log: any) => {
const details = log.details || '';
let typeDisplay = '-';
let userDisplay = '-';
let targetUserDisplay = '-';
let assetCodeDisplay = '-';
let memoDisplay = '-';
let typeDisplay = '-'; let userDisplay = '-'; let targetUserDisplay = '-'; let assetCodeDisplay = '-'; let memoDisplay = '-';
try {
const info = JSON.parse(details);
if (info.type === 'checkout') typeDisplay = 'checkout';
else if (info.type === 'return') typeDisplay = 'return';
else if (info.type === 'move') typeDisplay = 'move';
userDisplay = info.user || '-';
targetUserDisplay = info.targetUser || '-';
assetCodeDisplay = info.assetCode || '-';
memoDisplay = info.memo || '-';
typeDisplay = info.type; userDisplay = info.user || '-'; targetUserDisplay = info.targetUser || '-'; assetCodeDisplay = info.assetCode || '-'; memoDisplay = info.memo || '-';
} catch (e) {
// 하위 호환 파싱 (기존 텍스트형 로그)
if (details.includes('[불출]')) typeDisplay = 'checkout';
else if (details.includes('[반납]') || details.includes('[입고]')) typeDisplay = 'return';
else if (details.includes('[이동]') || details.includes('[이관]')) typeDisplay = 'move';
const codeMatch = details.match(/PC-\d{6}-\d{4}|HW-PC-\d+/i);
if (codeMatch) assetCodeDisplay = codeMatch[0];
if (details.includes('[불출]')) {
const match1 = details.match(/\[불출\]\s*([^\s\(]+)\s*사원/);
if (match1) userDisplay = match1[1];
else {
const match2 = details.match(/\[불출\]\s*([a-zA-Z가-힣]+)/);
userDisplay = match2 ? match2[1] : '-';
}
} else if (details.includes('[반납]') || details.includes('[입고]')) {
const match1 = details.match(/\[(?:반납|입고)\]\s*([^\s\(]+)\s*사원/);
if (match1) userDisplay = match1[1];
else {
const match2 = details.match(/\[(?:반납|입고)\]\s*([a-zA-Z가-힣]+)/);
userDisplay = match2 ? match2[1] : '-';
}
} else if (details.includes('[이동]') || details.includes('[이관]')) {
const prefixWord = details.includes('[이동]') ? '\\[이동\\]' : '\\[이관\\]';
const parts = details.split('➡️');
if (parts.length === 2) {
const fromMatch = parts[0].match(new RegExp(`${prefixWord}\\s*([a-zA-Z가-힣]+)`));
const toMatch = parts[1].match(/\s*([a-zA-Z가-힣]+)/);
if (fromMatch && toMatch) {
userDisplay = fromMatch[1];
targetUserDisplay = toMatch[1];
}
}
if (userDisplay === '-') {
const match1 = details.match(new RegExp(`${prefixWord}\\s*([^\s\(]+)\\s*사원`));
if (match1) {
userDisplay = match1[1];
} else {
const match2 = details.match(new RegExp(`${prefixWord}\\s*([a-zA-Z가-힣0-9_]+)`));
userDisplay = match2 ? match2[1] : '-';
}
}
}
const cleanDetails = details.replace(/^\[(불출|반납|입고|이동|이관)\]\s*/, '');
const memoParts = cleanDetails.split(' - ');
if (memoParts.length >= 2) {
memoDisplay = memoParts[memoParts.length - 1];
} else {
if (cleanDetails.includes('지급') || cleanDetails.includes('반납') || cleanDetails.includes('이관')) {
memoDisplay = '-';
} else {
memoDisplay = cleanDetails || '-';
}
}
const codeMatch = details.match(/PC-\d{6}-\d{4}|HW-PC-\d+/i); if (codeMatch) assetCodeDisplay = codeMatch[0];
}
// 구분 뱃지 생성
let badgeHtml = '';
if (typeDisplay === 'checkout') {
badgeHtml = '<span style="background:#E0F2FE;color:#0369A1;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:700;">불출</span>';
} else if (typeDisplay === 'return') {
badgeHtml = '<span style="background:#DCFCE7;color:#15803D;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:700;">입고</span>';
} else if (typeDisplay === 'move') {
badgeHtml = '<span style="background:#FEF3C7;color:#B45309;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:700;">이동</span>';
} else {
badgeHtml = '<span style="background:#F1F5F9;color:#475569;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:700;">기타</span>';
}
if (typeDisplay === 'checkout') badgeHtml = '<span style="background:#E0F2FE;color:#0369A1;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:700;">불출</span>';
else if (typeDisplay === 'return') badgeHtml = '<span style="background:#DCFCE7;color:#15803D;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:700;">입고</span>';
else if (typeDisplay === 'move') badgeHtml = '<span style="background:#FEF3C7;color:#B45309;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:700;">이동</span>';
else badgeHtml = '<span style="background:#F1F5F9;color:#475569;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:700;">기타</span>';
return `
<tr style="border-bottom: 1px solid var(--border-color);">
<td style="padding: 10px 8px; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px;">${log.log_date || '-'}</td>
<td style="padding: 10px 8px; font-weight: 500; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; text-align: center;" title="${log.log_user || '시스템'}">${log.log_user || '시스템'}</td>
<td style="padding: 10px 8px; font-weight: 500; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; text-align: center;">${log.log_user || '시스템'}</td>
<td style="padding: 10px 8px; white-space: nowrap; text-align: center;">${badgeHtml}</td>
<td style="padding: 10px 8px; font-weight: 600; color: #1E293B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; text-align: center;" title="${userDisplay}">${userDisplay}</td>
<td style="padding: 10px 8px; font-weight: 600; color: #1E293B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; text-align: center;" title="${targetUserDisplay}">${targetUserDisplay}</td>
<td style="padding: 10px 8px; font-family: monospace; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; text-align: center;" title="${assetCodeDisplay}">${assetCodeDisplay}</td>
<td style="padding: 10px 8px; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px;" title="${memoDisplay}">${memoDisplay}</td>
</tr>
`;
<td style="padding: 10px 8px; font-weight: 600; color: #1E293B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; text-align: center;">${userDisplay}</td>
<td style="padding: 10px 8px; font-weight: 600; color: #1E293B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; text-align: center;">${targetUserDisplay}</td>
<td style="padding: 10px 8px; font-family: monospace; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; text-align: center;">${assetCodeDisplay}</td>
<td style="padding: 10px 8px; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px;">${memoDisplay}</td>
</tr>`;
}).join('');
}
} else {
// 기존의 자산 현황 목록 갱신
let filtered = selectedLocation
? fullList.filter(a => (a[ASSET_SCHEMA.LOCATION.key] || '미지정') === selectedLocation)
: fullList;
let filtered = selectedLocation ? fullList.filter(a => (a[ASSET_SCHEMA.LOCATION.key] || '미지정') === selectedLocation) : fullList;
const currentDetailLocs = Array.from(new Set(filtered.map(a => a[ASSET_SCHEMA.LOC_DETAIL.key] || '미지정'))).sort();
if (selectedDetailLocation) filtered = filtered.filter(a => (a[ASSET_SCHEMA.LOC_DETAIL.key] || '미지정') === selectedDetailLocation);
const finalDisplayList = (!selectedLocation && !selectedDetailLocation) ? filtered.slice(0, 10) : filtered;
const titleEl = document.getElementById('list-section-title');
if (titleEl) titleEl.textContent = selectedLocation ? `${selectedLocation} 자산 현황 (${finalDisplayList.length}대)` : '위치별 자산등록현황 (최근 등록)';
const selectEl = document.getElementById('select-detail-loc') as HTMLSelectElement;
if (selectEl && !selectedDetailLocation) {
selectEl.innerHTML = `<option value="">전체보기</option>` + currentDetailLocs.map(dl => `<option value="${dl}">${dl}</option>`).join('');
}
const tbody = document.getElementById('system-status-tbody');
if (tbody) {
tbody.innerHTML = finalDisplayList.length === 0
? `<tr><td colspan="5" style="padding: 3rem; text-align: center; color: var(--text-muted);">조회된 자산이 없습니다.</td></tr>`
tbody.innerHTML = finalDisplayList.length === 0 ? `<tr><td colspan="5" style="padding: 3rem; text-align: center; color: var(--text-muted);">조회된 자산이 없습니다.</td></tr>`
: finalDisplayList.map(asset => {
const purpose = asset[ASSET_SCHEMA.ASSET_PURPOSE.key] || '';
const serviceTypeKey = (ASSET_SCHEMA as any).SERVICE_TYPE?.key || 'service_type';
const serviceType = asset[serviceTypeKey] || '외부';
const serviceType = asset.service_type || '외부';
const type = asset[ASSET_SCHEMA.ASSET_TYPE.key] || '';
const loc = asset[ASSET_SCHEMA.LOCATION.key] || '';
const labelColor = serviceType === '내부' ? '#94A3B8' : '#35635C';
const managerMain = asset[ASSET_SCHEMA.MANAGER_MAIN.key] || '-';
const managerSub = asset[ASSET_SCHEMA.MANAGER_SUB.key] || '-';
// [경고 로직] 외부 운영인데 서버PC이거나 IDC가 아닌 경우
const isLocWarning = serviceType === '외부SW' && loc !== 'IDC';
const isTypeWarning = serviceType === '외부SW' && type.toLowerCase().replace(/\s/g, '').includes('서버pc');
const isWarning = isLocWarning || isTypeWarning;
const warningStyle = isWarning ? 'background-color: #FFF1F2; border-left: 3px solid #E11D48;' : '';
let warningReason = '';
if (isLocWarning && isTypeWarning) warningReason = '위치/형식 부적절';
else if (isLocWarning) warningReason = '위치 부적절';
else if (isTypeWarning) warningReason = '형식 부적절';
const isWarning = serviceType === '외부SW' && (loc !== 'IDC' || type.toLowerCase().includes('서버pc'));
return `
<tr style="border-bottom: 1px solid var(--border-color); cursor: pointer; ${warningStyle}" class="mini-row" data-id="${asset.id}">
<td style="padding: 10px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align:center;">
<div style="display:flex; flex-direction:column; align-items:center; gap:2px;">
<span style="color: ${isWarning ? '#E11D48' : labelColor}; font-weight: 800; font-size: 12px;">${serviceType}</span>
${isWarning ? `<span style="color: #E11D48; font-size: 9px; font-weight: 700; white-space: nowrap;">${warningReason}</span>` : ''}
</div>
</td>
<td style="padding: 10px 0; font-weight: 600; color: ${isWarning ? '#991B1B' : 'var(--text-main)'}; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${purpose}">${purpose || '-'}</td>
<td style="padding: 10px 0; text-align: center; color: var(--text-main); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${managerMain}</td>
<td style="padding: 10px 0; text-align: center; color: var(--text-main); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${managerSub}</td>
<td style="padding: 10px 0; text-align: center; color: var(--text-main); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${asset[ASSET_SCHEMA.LOC_DETAIL.key] || '-'}</td>
<tr style="border-bottom: 1px solid var(--border-color); cursor: pointer; ${isWarning ? 'background-color:#FFF1F2; border-left:3px solid #E11D48;' : ''}" class="mini-row" data-id="${asset.id}">
<td style="padding: 10px 0; text-align:center;"><span style="font-weight:800; font-size:12px; color:${isWarning ? '#E11D48' : '#35635C'}">${serviceType}</span></td>
<td style="padding: 10px 0; font-weight: 600; font-size: 13px;">${purpose || '-'}</td>
<td style="padding: 10px 0; text-align: center; font-size: 12px;">${asset[ASSET_SCHEMA.MANAGER_MAIN.key] || '-'}</td>
<td style="padding: 10px 0; text-align: center; font-size: 12px;">${asset[ASSET_SCHEMA.MANAGER_SUB.key] || '-'}</td>
<td style="padding: 10px 0; text-align: center; font-size: 12px;">${asset[ASSET_SCHEMA.LOC_DETAIL.key] || '-'}</td>
</tr>`;
}).join('');
tbody.querySelectorAll('.mini-row').forEach(row => {
row.addEventListener('click', () => {
tbody.querySelectorAll('.mini-row').forEach(r => {
const rIsWarning = (r as HTMLElement).style.borderLeftColor === 'rgb(225, 29, 72)'; // E11D48
(r as HTMLElement).style.backgroundColor = rIsWarning ? '#FFF1F2' : 'transparent';
});
(row as HTMLElement).style.backgroundColor = '#EBF2F1'; // 선택 하이라이트
const id = (row as HTMLElement).getAttribute('data-id');
const asset = fullList.find(a => a.id === id);
tbody.querySelectorAll('.mini-row').forEach(r => (r as HTMLElement).style.backgroundColor = (r as HTMLElement).style.borderLeftColor === 'rgb(225, 29, 72)' ? '#FFF1F2' : 'transparent');
(row as HTMLElement).style.backgroundColor = '#EBF2F1';
const asset = fullList.find(a => a.id === (row as HTMLElement).getAttribute('data-id'));
if (asset) updateDetailPanel(asset);
});
row.addEventListener('mouseenter', () => {
if ((row as HTMLElement).style.backgroundColor !== 'rgb(235, 242, 241)') {
(row as HTMLElement).style.backgroundColor = '#F8FAFA';
}
});
row.addEventListener('mouseleave', () => {
const isWarning = (row as HTMLElement).style.borderLeftColor === 'rgb(225, 29, 72)';
if ((row as HTMLElement).style.backgroundColor !== 'rgb(235, 242, 241)') {
(row as HTMLElement).style.backgroundColor = isWarning ? '#FFF1F2' : 'transparent';
}
});
});
}
}
};
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;
});
// 기준 대비 사양 부족/오버스펙 분류
const criticalPcList: any[] = [];
pcs.forEach((pc: any) => {
const job = pc[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
const score = pc['_pc_score'];
const avg = jobScores[job].avg;
if (avg > 0) {
if (score < avg * 0.6) {
pc['_spec_status'] = '사양 부족';
criticalPcList.push(pc);
} else if (score > avg * 1.5) {
pc['_spec_status'] = '오버스펙';
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 ratioA = jobScores[jobA].avg > 0 ? a['_pc_score'] / jobScores[jobA].avg : 1;
const ratioB = jobScores[jobB].avg > 0 ? b['_pc_score'] / jobScores[jobB].avg : 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}</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 id = (row as HTMLElement).getAttribute('data-id');
const asset = fullList.find(a => String(a.id) === String(id));
if (asset) {
updateDetailPanel(asset);
}
});
row.addEventListener('mouseenter', () => {
if ((row as HTMLElement).style.backgroundColor !== 'rgb(235, 242, 241)') {
(row as HTMLElement).style.backgroundColor = '#F8FAFA';
}
});
row.addEventListener('mouseleave', () => {
if ((row as HTMLElement).style.backgroundColor !== 'rgb(235, 242, 241)') {
(row as HTMLElement).style.backgroundColor = 'transparent';
}
});
});
}
}
};
setTimeout(() => {
const selectLoc = document.getElementById('select-loc') as HTMLSelectElement;
const selectDetailLoc = document.getElementById('select-detail-loc') as HTMLSelectElement;
selectLoc?.addEventListener('change', (e) => {
selectedLocation = (e.target as HTMLSelectElement).value || null;
selectedDetailLocation = null;
updateTableOnly();
updateFlowLogsSection();
document.getElementById('select-loc')?.addEventListener('change', (e) => {
selectedLocation = (e.target as HTMLSelectElement).value || null; selectedDetailLocation = null; updateTableOnly();
});
selectDetailLoc?.addEventListener('change', (e) => {
selectedDetailLocation = (e.target as HTMLSelectElement).value || null;
updateTableOnly();
updateFlowLogsSection();
document.getElementById('select-detail-loc')?.addEventListener('change', (e) => {
selectedDetailLocation = (e.target as HTMLSelectElement).value || null; updateTableOnly();
});
updateTableOnly();
updateFlowLogsSection();
}, 50);
};
@@ -957,17 +699,14 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
const table = document.createElement('table');
const thead = document.createElement('thead');
const tbody = document.createElement('tbody');
table.appendChild(thead); table.appendChild(tbody);
tableWrapper.appendChild(table);
table.appendChild(thead); table.appendChild(tbody); tableWrapper.appendChild(table);
const updateTable = () => {
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};` : ''}" class="${col.align ? `text-${col.align}` : ''}">${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 => `<td class="${col.align ? `text-${col.align}` : ''}">${col.render(asset)}</td>`).join('')}</tr>`).join('');
tbody.querySelectorAll('.asset-row').forEach((tr, idx) => { tr.addEventListener('click', () => config.onRowClick && config.onRowClick(filtered[idx])); });
setupTableSorting(table, sortState, (key, dir) => { sortState = { key, direction: dir }; updateTable(); });
};
@@ -986,35 +725,24 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
toggleWrapper.addEventListener('click', (e) => {
const btn = (e.target as HTMLElement).closest('.toggle-btn') as HTMLButtonElement;
if (!btn) return;
toggleWrapper.querySelectorAll('.toggle-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
(state as any).currentViewMode = btn.getAttribute('data-mode') as 'asset' | 'system';
switchView();
const mode = btn.getAttribute('data-mode');
if (mode === 'location') state.viewMode = 'location';
else { state.viewMode = 'list'; (state as any).currentViewMode = mode; }
window.dispatchEvent(new Event('refresh-view'));
});
// 필터 바 초기화
renderFilterBar(filterBar, {
...config.filterOptions,
initialFilters: currentFilters,
onFilterChange: (filters) => {
Object.assign(currentFilters, filters);
updateTable();
}
...config.filterOptions, initialFilters: currentFilters,
onFilterChange: (filters) => { Object.assign(currentFilters, filters); updateTable(); }
});
// 셀렉트 박스 채우기
const populateSelect = (selector: string, dataKey: string, initialValue?: string) => {
const select = container.querySelector(selector) as HTMLSelectElement;
if (select) {
const getVal = (a: any) => dataKey === ASSET_SCHEMA.CURRENT_DEPT.key ? (a[dataKey] || a['현사용부서'] || a['현사용조직']) : a[dataKey];
const uniqueValues = Array.from(new Set(fullList.map(getVal))).filter(Boolean).sort();
const uniqueValues = Array.from(new Set(fullList.map(a => a[dataKey]))).filter(Boolean).sort();
uniqueValues.forEach(val => {
const opt = document.createElement('option');
opt.value = String(val);
opt.textContent = String(val);
if (initialValue && String(val) === initialValue) {
opt.selected = true;
}
const opt = document.createElement('option'); opt.value = String(val); opt.textContent = String(val);
if (initialValue && String(val) === initialValue) opt.selected = true;
select.appendChild(opt);
});
}
@@ -1026,6 +754,5 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
if (config.filterOptions.showType) populateSelect('#filter-type', ASSET_SCHEMA.ASSET_TYPE.key, currentFilters.type);
if (config.filterOptions.showStatus) populateSelect('#filter-status', ASSET_SCHEMA.HW_STATUS.key, currentFilters.status);
// 초기 실행
switchView();
}

152
src/views/LocationView.ts
View File

@@ -39,38 +39,48 @@ export async function renderLocationView(container: HTMLElement) {
container.innerHTML = `
<div class="location-view-wrapper">
<!-- 2단계 필터 바 -->
<div class="location-filter-bar">
<div class="filter-group">
<label>건물/위치</label>
<select id="sel-loc-main">
${Object.keys(LOCATION_DATA).map(loc => `<option value="${loc}" ${loc === currentLoc ? 'selected' : ''}>${loc}</option>`).join('')}
</select>
<!-- 상단 통합 바 (토글 + 필터) -->
<div class="location-filter-bar" style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1.5rem; border-bottom: 1px solid var(--border-color); background: white;">
<!-- 좌측: 3-way 토글 -->
<div class="view-toggle">
<button class="toggle-btn active" data-mode="location">자산 위치</button>
<button class="toggle-btn" data-mode="system">운영 현황</button>
<button class="toggle-btn" data-mode="asset">자산 목록</button>
</div>
<div class="filter-group">
<label>상세 위치</label>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<select id="sel-loc-detail">
${(LOCATION_DATA[currentLoc] || []).map(det => `<option value="${det}" ${det === currentDetail ? 'selected' : ''}>${det}</option>`).join('')}
</select>
<!-- 페이지네이션을 상세 위치 바로 옆으로 이동 -->
${locImages.length > 1 ? `
<div class="map-pagination" style="margin-left: 0; padding-left: 0.5rem; border-left: 1px solid var(--border-color); display: flex; align-items: center; gap: 0.5rem;">
<div class="page-btns">
<button id="btn-prev-page" class="btn btn-outline btn-sm" style="height: 28px; padding: 0 8px;" ${currentPage === 0 ? 'disabled' : ''}>이전</button>
<button id="btn-next-page" class="btn btn-outline btn-sm" style="height: 28px; padding: 0 8px;" ${currentPage === locImages.length - 1 ? 'disabled' : ''}>다음</button>
<!-- 우측: 위치 필터 -->
<div style="display: flex; align-items: center; gap: 1.5rem;">
<div class="filter-group" style="display: flex; align-items: center; gap: 0.75rem;">
<label style="font-size: 13px; font-weight: 700; color: var(--text-muted);">건물/위치</label>
<select id="sel-loc-main" style="padding: 4px 8px; border: 1px solid var(--border-color); font-family: inherit; font-size: 13px; outline: none; background: #fff; cursor: pointer; border-radius: 4px;">
${Object.keys(LOCATION_DATA).map(loc => `<option value="${loc}" ${loc === currentLoc ? 'selected' : ''}>${loc}</option>`).join('')}
</select>
</div>
<div class="filter-group" style="display: flex; align-items: center; gap: 0.75rem;">
<label style="font-size: 13px; font-weight: 700; color: var(--text-muted);">상세 위치</label>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<select id="sel-loc-detail" style="padding: 4px 8px; border: 1px solid var(--border-color); font-family: inherit; font-size: 13px; outline: none; background: #fff; cursor: pointer; border-radius: 4px;">
${(LOCATION_DATA[currentLoc] || []).map(det => `<option value="${det}" ${det === currentDetail ? 'selected' : ''}>${det}</option>`).join('')}
</select>
<!-- 페이지네이션 -->
${locImages.length > 1 ? `
<div class="map-pagination" style="margin-left: 0; padding-left: 0.5rem; border-left: 1px solid var(--border-color); display: flex; align-items: center; gap: 0.5rem;">
<div class="page-btns" style="display: flex; gap: 4px;">
<button id="btn-prev-page" style="background: none; border: 1px solid var(--border-color); padding: 2px 8px; cursor: pointer; font-size: 12px; border-radius: 4px;" ${currentPage === 0 ? 'disabled' : ''}>이전</button>
<button id="btn-next-page" style="background: none; border: 1px solid var(--border-color); padding: 2px 8px; cursor: pointer; font-size: 12px; border-radius: 4px;" ${currentPage === locImages.length - 1 ? 'disabled' : ''}>다음</button>
</div>
<span class="page-info" style="font-size: 12px; color: var(--text-muted);">(${currentPage + 1} / ${locImages.length})</span>
</div>
<span class="page-info">(${currentPage + 1} / ${locImages.length})</span>
` : ''}
</div>
` : ''}
</div>
</div>
</div>
<div class="location-main-content" style="height: calc(100vh - 180px); align-items: stretch; gap: 1rem; padding: 1rem; overflow: hidden; display: grid; grid-template-columns: 1.4fr 1fr;">
<!-- 지도 섹션: 상단 고정 정렬로 밀림 방지 -->
<div class="map-container-section" style="position: relative; overflow: hidden; border-radius: 8px; border: 1px solid var(--border-color); background: #f1f5f9; display: flex; align-items: flex-start; justify-content: center;">
<div class="location-main-content">
<!-- 지도 섹션: Border-only -->
<div class="map-container-section">
<div class="map-frame-wrapper" style="position: relative; width: 100%; height: 100%; display: flex; align-items: flex-start; justify-content: center;">
${mapPath ? `
<img src="${mapPath}" id="main-map-img" style="max-width: 100%; max-height: 100%; object-fit: contain; display: block;">
@@ -91,27 +101,41 @@ export async function renderLocationView(container: HTMLElement) {
</div>
</div>
<!-- 상세 정보 섹션: 내부 스크롤만 허용 -->
<div class="asset-list-section" style="display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff; border-radius: 8px; border: 1px solid var(--border-color);">
<!-- 상세 정보 섹션: Border-only -->
<div class="asset-list-section" style="display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff;">
<div class="section-header" style="flex-shrink: 0; background: #f8fafc; border-bottom: 1px solid var(--border-color); padding: 1rem;">
<h4 id="loc-list-title" style="margin:0; font-size: 0.95rem; font-weight: 700;">📍 구역을 선택하세요</h4>
<h4 id="loc-list-title" style="margin:0; font-size: 0.95rem; font-weight: 800; color: var(--primary-color);">📍 구역을 선택하세요</h4>
</div>
<div id="loc-asset-table-container" class="mini-table-wrapper" style="flex: 1; overflow-y: auto; padding: 0;">
<div class="empty-state" style="padding: 3rem 1rem;">지도에서 자산 위치를 클릭하세요.</div>
<div class="empty-state" style="padding: 3rem 1rem; color: var(--text-muted); text-align: center;">지도에서 자산 위치를 클릭하세요.</div>
</div>
</div>
</div>
<div style="padding: 0 1.5rem 0.5rem; flex-shrink: 0;">
<p style="font-size:0.75rem; color:var(--text-muted); margin: 0;">* 지도 위의 구역을 클릭하면 자산 상세 정보가 표시됩니다.</p>
</div>
</div>
`;
// 이미지 로드 및 윈도우 리사이즈 시 오버레이 크기와 위치를 이미지에 정확히 맞춤
const syncOverlaySize = () => {
const img = container.querySelector('#main-map-img') as HTMLImageElement;
const overlay = container.querySelector('#box-overlay') as HTMLElement;
const mainContent = container.querySelector('.location-main-content') as HTMLElement;
if (img && overlay && img.complete) {
// 1. 이미지 실제 크기와 가로세로 비율 계산
const naturalRatio = img.naturalWidth / img.naturalHeight;
// 2. 비율에 따른 동적 레이아웃 조정 (Adaptive Layout)
if (naturalRatio < 0.85) {
// 세로로 긴 사진: 상세정보를 대폭 넓힘
mainContent.style.gridTemplateColumns = '0.9fr 1.1fr';
} else if (naturalRatio < 1.25) {
// 정사각형에 가까운 사진: 균형 배치
mainContent.style.gridTemplateColumns = '1.2fr 1fr';
} else {
// 가로로 넓은 사진: 지도 중심 (예전 2:1 비율)
mainContent.style.gridTemplateColumns = '2fr 1fr';
}
// 3. 오버레이 크기와 위치 동기화
overlay.style.width = img.clientWidth + 'px';
overlay.style.height = img.clientHeight + 'px';
overlay.style.left = img.offsetLeft + 'px';
@@ -123,7 +147,7 @@ export async function renderLocationView(container: HTMLElement) {
if (img) {
if (img.complete) {
syncOverlaySize();
setTimeout(syncOverlaySize, 50); // 레이아웃 안정화 대기
setTimeout(syncOverlaySize, 50);
} else {
img.onload = syncOverlaySize;
}
@@ -151,6 +175,20 @@ export async function renderLocationView(container: HTMLElement) {
container.querySelector('#btn-prev-page')?.addEventListener('click', () => { currentPage--; render(); });
container.querySelector('#btn-next-page')?.addEventListener('click', () => { currentPage++; render(); });
// 뷰 모드 전환 이벤트 바인딩 (Unified Logic)
container.querySelectorAll('.toggle-btn').forEach(btn => {
btn.addEventListener('click', () => {
const mode = btn.getAttribute('data-mode');
if (mode === 'location') {
state.viewMode = 'location';
} else {
state.viewMode = 'list';
(state as any).currentViewMode = mode;
}
window.dispatchEvent(new Event('refresh-view'));
});
});
container.querySelectorAll('.location-box-point').forEach(box => {
box.addEventListener('click', () => {
const x = box.getAttribute('data-x');
@@ -177,50 +215,49 @@ export async function renderLocationView(container: HTMLElement) {
const title = container.querySelector('#loc-list-title')!;
const tableContainer = container.querySelector('#loc-asset-table-container')!;
// 헤더: 자산상세정보 대신 자산번호 + 구분/유형 배치 (CSS Class 사용)
title.innerHTML = `
<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>
<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>
<div class="header-identity">
<span class="asset-code-title">${asset.asset_code || '미부여'}</span>
<span class="service-type-badge">${asset.service_type || '운영'}</span>
<span class="asset-type-label">${asset.asset_type || 'PC'}</span>
</div>
<button id="btn-edit-from-loc" class="btn btn-primary btn-sm">수정</button>
</div>
`;
const renderSection = (title: string, fields: { label: string; value: any }[]) => `
// 섹션 렌더러: 2열 구성 및 폰트 대비 강화 (CSS Class 사용)
const renderSection = (title: string, fields: { label: string; value: any; fullWidth?: boolean }[]) => `
<div class="detail-section">
<div class="detail-section-title">${title}</div>
<div class="detail-grid">
<div class="detail-grid-2col">
${fields.map(f => `
<div class="detail-label">${f.label}</div>
<div class="detail-value">${f.value || '-'}</div>
<div class="detail-item ${f.fullWidth ? 'full-width' : ''}">
<div class="detail-label-sm">${f.label}</div>
<div class="detail-value-lg">${f.value || '-'}</div>
</div>
`).join('')}
</div>
</div>
`;
const sectionsHTML = [
renderSection('기본 관리 정보', [
{ label: ASSET_SCHEMA.ASSET_CODE.ui, value: asset.asset_code },
{ label: ASSET_SCHEMA.PURCHASE_CORP.ui, value: asset.purchase_corp },
{ label: ASSET_SCHEMA.CATEGORY.ui, value: asset.category },
{ label: ASSET_SCHEMA.ASSET_TYPE.ui, value: asset.asset_type },
{ label: ASSET_SCHEMA.HW_STATUS.ui, value: asset.hw_status }
]),
renderSection('시스템 사양', [
{ label: ASSET_SCHEMA.MODEL_NAME.ui, value: asset.model_name },
{ label: ASSET_SCHEMA.OS.ui, value: asset.os },
{ label: ASSET_SCHEMA.CPU.ui, value: asset.cpu },
{ label: ASSET_SCHEMA.RAM.ui, value: asset.ram },
{ label: ASSET_SCHEMA.GPU.ui, value: asset.gpu }
{ label: ASSET_SCHEMA.GPU.ui, value: asset.gpu, fullWidth: true }
]),
renderSection('네트워크 정보', [
renderSection('네트워크 및 상태', [
{ label: ASSET_SCHEMA.IP_ADDR.ui, value: asset.ip_address },
{ label: ASSET_SCHEMA.MAC_ADDR.ui, value: asset.mac_address },
{ label: ASSET_SCHEMA.HW_STATUS.ui, value: asset.hw_status },
{ label: ASSET_SCHEMA.REMOTE_TOOL.ui, value: asset.remote_tool }
]),
renderSection('구매 및 기타', [
{ label: ASSET_SCHEMA.PURCHASE_DATE.ui, value: asset.purchase_date },
{ label: ASSET_SCHEMA.PURCHASE_AMOUNT.ui, value: asset.purchase_amount ? `${Number(asset.purchase_amount).toLocaleString()}원` : '-' },
{ label: ASSET_SCHEMA.MEMO.ui, value: asset.memo }
renderSection('상세 메모리', [
{ label: ASSET_SCHEMA.MEMO.ui, value: asset.memo, fullWidth: true }
])
].join('');
@@ -231,8 +268,13 @@ export async function renderLocationView(container: HTMLElement) {
`;
container.querySelector('#btn-back-to-list')?.addEventListener('click', () => {
title.textContent = `📍 구역을 선택하세요`;
tableContainer.innerHTML = `<div class="empty-state" style="padding: 3rem 1rem;">지도에서 자산 위치를 클릭하세요.</div>`;
title.innerHTML = `<h4 id="loc-list-title" class="sidebar-title">📍 구역을 선택하세요</h4>`;
tableContainer.innerHTML = `<div class="empty-state">지도에서 자산 위치를 클릭하세요.</div>`;
});
container.querySelector('#btn-back-to-list')?.addEventListener('click', () => {
title.innerHTML = `<h4 id="loc-list-title" style="margin:0; font-size: 0.95rem; font-weight: 800; color: var(--primary-color);">📍 구역을 선택하세요</h4>`;
tableContainer.innerHTML = `<div class="empty-state" style="padding: 3rem 1rem; color: var(--text-muted); text-align: center;">지도에서 자산 위치를 클릭하세요.</div>`;
});
container.querySelector('#btn-edit-from-loc')?.addEventListener('click', () => {