style: 레이아웃 비율 복구 및 타이포그래피 전역 표준화 (16px Base)
- 주요 변경 사항: 1. 레이아웃 안정화: 서버 위치도 뷰의 2:1 비율 복원 및 가변형(Adaptive) 레이아웃 적용 2. 타이포그래피 표준화: 전역 폰트 스케일 도입 및 기본 폰트 사이즈 상향 (15px -> 16px) 3. 3-Way 토글 통합: [자산 위치] [운영 현황] [자산 목록] 간의 전환 오류 수정 및 UI 통일 4. 하드코딩 제거: 인라인 스타일을 CSS 클래스 및 변수 체계로 전면 리팩토링 5. 가이드 업데이트: 변경된 디자인 정책을 design_rule.md에 반영
This commit is contained in:
@@ -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', () => {
|
||||
|
||||
Reference in New Issue
Block a user