b24014/ITAM-test
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: LocationView 레이아웃 안정화 및 UI 개선

Browse Source 
- 페이지네이션 버튼을 상세위치 옆으로 이동\n- 지도 이미지 밀림 현상 방지를 위한 정렬 방식 수정 및 동기화 로직 보강\n- 상단 메뉴에서 구버전 현황 버튼 제거
This commit is contained in:
이태훈
2026-06-11 10:08:43 +09:00
parent 164568843b
commit 207acbdecb
2 changed files with 58 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/main.ts
View File

@@ -52,7 +52,6 @@ function refreshView() {
<div class="view-header"> <div class="view-header">
<div class="view-toggle-container"> <div class="view-toggle-container">
<button class="mode-toggle-btn ${state.viewMode === 'location' ? 'active' : ''}" data-mode="location">자산현황(위치)</button> <button class="mode-toggle-btn ${state.viewMode === 'location' ? 'active' : ''}" data-mode="location">자산현황(위치)</button>
<button class="mode-toggle-btn ${state.viewMode === 'legacy' ? 'active' : ''}" data-mode="legacy">자산현황(구버전)</button>
<button class="mode-toggle-btn ${state.viewMode === 'list' ? 'active' : ''}" data-mode="list">자산목록</button> <button class="mode-toggle-btn ${state.viewMode === 'list' ? 'active' : ''}" data-mode="list">자산목록</button>
</div> </div>
</div> </div>
@@ -60,7 +59,7 @@ function refreshView() {
`; `;
// 이벤트 바인딩 // 이벤트 바인딩
mainContent.querySelectorAll('.mode-toggle-btn').forEach(btn => { mainContent.querySelectorAll('.mode-toggle-btn').forEach(btn => {
btn.addEventListener('click', () => { btn.addEventListener('click', () => {
const mode = (btn as HTMLElement).getAttribute('data-mode') as any; const mode = (btn as HTMLElement).getAttribute('data-mode') as any;
state.viewMode = mode; state.viewMode = mode;
@@ -71,12 +70,10 @@ function refreshView() {
const viewBody = document.getElementById('view-body')!; const viewBody = document.getElementById('view-body')!;
if (state.viewMode === 'location') { if (state.viewMode === 'location') {
renderLocationView(viewBody); renderLocationView(viewBody);
} else if (state.viewMode === 'legacy') {
renderDashboard(viewBody); // 통계/차트
} else { } else {
renderSWTable(viewBody); // 리스트 형식 renderSWTable(viewBody); // 리스트 형식
} }
} }
// 통합 저장 및 갱신 // 통합 저장 및 갱신
async function saveAllDataToDB() { async function saveAllDataToDB() {

101
src/views/LocationView.ts
View File

@@ -49,29 +49,32 @@ export async function renderLocationView(container: HTMLElement) {
</div> </div>
<div class="filter-group"> <div class="filter-group">
<label>상세 위치</label> <label>상세 위치</label>
<select id="sel-loc-detail"> <div style="display: flex; align-items: center; gap: 0.5rem;">
${(LOCATION_DATA[currentLoc] || []).map(det => `<option value="${det}" ${det === currentDetail ? 'selected' : ''}>${det}</option>`).join('')} <select id="sel-loc-detail">
</select> ${(LOCATION_DATA[currentLoc] || []).map(det => `<option value="${det}" ${det === currentDetail ? 'selected' : ''}>${det}</option>`).join('')}
</div> </select>
${locImages.length > 1 ? ` <!-- 페이지네이션을 상세 위치 바로 옆으로 이동 -->
<div class="map-pagination"> ${locImages.length > 1 ? `
<span class="page-info">사진: ${currentPage + 1} / ${locImages.length}</span> <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"> <div class="page-btns">
<button id="btn-prev-page" ${currentPage === 0 ? 'disabled' : ''}>이전</button> <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" ${currentPage === locImages.length - 1 ? '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>
<span class="page-info">(${currentPage + 1} / ${locImages.length})</span>
</div>
` : ''}
</div> </div>
</div> </div>
` : ''}
</div> </div>
<div class="location-main-content" style="grid-template-columns: 1.2fr 1fr; gap: 1rem; padding: 1rem;"> <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"> <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="map-frame-wrapper" style="position: relative; display: inline-block; width: 100%; background: #f1f5f9; border-radius: 8px; border: 1px solid var(--border-color); overflow: hidden;"> <div class="map-frame-wrapper" style="position: relative; width: 100%; height: 100%; display: flex; align-items: flex-start; justify-content: center;">
${mapPath ? ` ${mapPath ? `
<img src="${mapPath}" id="main-map-img" style="width: 100%; display: block; height: auto;"> <img src="${mapPath}" id="main-map-img" style="max-width: 100%; max-height: 100%; object-fit: contain; display: block;">
<div id="box-overlay" style="position: absolute; top:0; left:0; width:100%; height:100%; pointer-events: none;"> <div id="box-overlay" style="position: absolute; pointer-events: none; transition: none;">
${boxes.map((box: any, idx: number) => { ${boxes.map((box: any, idx: number) => {
const name = box.name || `#${idx+1}`; const name = box.name || `#${idx+1}`;
return ` return `
@@ -86,32 +89,48 @@ export async function renderLocationView(container: HTMLElement) {
</div> </div>
` : '<div style="padding: 5rem; text-align:center; color: #999;">해당 위치의 도면이 등록되지 않았습니다.</div>'} ` : '<div style="padding: 5rem; text-align:center; color: #999;">해당 위치의 도면이 등록되지 않았습니다.</div>'}
</div> </div>
<p style="margin-top:0.5rem; font-size:0.75rem; color:var(--text-muted);">* 지도 위의 구역을 클릭하면 자산 상세 정보가 표시됩니다.</p>
</div> </div>
<!-- 리스트(상세) 섹션 --> <!-- 상세 정보 섹션: 내부 스크롤만 허용 -->
<div class="asset-list-section"> <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);">
<div class="section-header"> <div class="section-header" style="flex-shrink: 0; background: #f8fafc; border-bottom: 1px solid var(--border-color); padding: 1rem;">
<h4 id="loc-list-title">📍 구역을 선택하세요</h4> <h4 id="loc-list-title" style="margin:0; font-size: 0.95rem; font-weight: 700;">📍 구역을 선택하세요</h4>
</div> </div>
<div id="loc-asset-table-container" class="mini-table-wrapper"> <div id="loc-asset-table-container" class="mini-table-wrapper" style="flex: 1; overflow-y: auto; padding: 0;">
<div class="empty-state">지도에서 자산 위치를 클릭하세요.</div> <div class="empty-state" style="padding: 3rem 1rem;">지도에서 자산 위치를 클릭하세요.</div>
</div> </div>
</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> </div>
`; `;
// 이미지 로드 후 오버레이 크기 재조정 (좌표 밀림 방지) // 이미지 로드 및 윈도우 리사이즈 시 오버레이 크기와 위치를 이미지에 정확히 맞춤
const syncOverlaySize = () => {
const img = container.querySelector('#main-map-img') as HTMLImageElement;
const overlay = container.querySelector('#box-overlay') as HTMLElement;
if (img && overlay && img.complete) {
overlay.style.width = img.clientWidth + 'px';
overlay.style.height = img.clientHeight + 'px';
overlay.style.left = img.offsetLeft + 'px';
overlay.style.top = img.offsetTop + 'px';
}
};
const img = container.querySelector('#main-map-img') as HTMLImageElement; const img = container.querySelector('#main-map-img') as HTMLImageElement;
if (img) { if (img) {
img.onload = () => { if (img.complete) {
const overlay = container.querySelector('#box-overlay') as HTMLElement; syncOverlaySize();
if (overlay) { setTimeout(syncOverlaySize, 50); // 레이아웃 안정화 대기
overlay.style.height = img.offsetHeight + 'px'; } else {
} img.onload = syncOverlaySize;
}; }
} }
window.removeEventListener('resize', syncOverlaySize);
window.addEventListener('resize', syncOverlaySize);
// 이벤트 바인딩 // 이벤트 바인딩
const selMain = container.querySelector('#sel-loc-main') as HTMLSelectElement; const selMain = container.querySelector('#sel-loc-main') as HTMLSelectElement;
@@ -137,7 +156,6 @@ export async function renderLocationView(container: HTMLElement) {
const x = box.getAttribute('data-x'); const x = box.getAttribute('data-x');
const y = box.getAttribute('data-y'); const y = box.getAttribute('data-y');
// 좌표 및 위치 정보를 기반으로 정확한 자산 1개 찾기
const targetAsset = state.masterData.hw.find(a => const targetAsset = state.masterData.hw.find(a =>
a.location === currentLoc && a.location === currentLoc &&
a.location_detail === currentDetail && a.location_detail === currentDetail &&
@@ -149,7 +167,7 @@ export async function renderLocationView(container: HTMLElement) {
renderAssetDetail(targetAsset); renderAssetDetail(targetAsset);
} }
container.querySelectorAll('.location-box-point').forEach(b => (b as HTMLElement).style.background = 'rgba(30, 81, 81, 0.1)'); container.querySelectorAll('.location-box-point').forEach(b => (b as HTMLElement).style.background = 'rgba(30, 81, 73, 0.1)');
(box as HTMLElement).style.background = 'rgba(30, 81, 73, 0.4)'; (box as HTMLElement).style.background = 'rgba(30, 81, 73, 0.4)';
}); });
}); });
@@ -166,20 +184,18 @@ export async function renderLocationView(container: HTMLElement) {
</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;"> <div class="detail-section" style="margin-bottom: 20px; padding: 0 1rem;">
<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 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 style="display: grid; grid-template-columns: 100px 1fr; gap: 8px 12px;"> <div style="display: grid; grid-template-columns: 100px 1fr; gap: 8px 12px;">
${fields.map(f => ` ${fields.map(f => `
<div style="font-size: 12px; color: var(--text-muted);">${f.label}</div> <div style="font-size: 12px; color: var(--text-muted);">${f.label}</div>
<div style="font-size: 12px; color: var(--text-main); font-weight: 500;">${f.value || '-'}</div> <div style="font-size: 12px; color: var(--text-main); font-weight: 500; word-break: break-all;">${f.value || '-'}</div>
`).join('')} `).join('')}
</div> </div>
</div> </div>
`; `;
// 하드웨어 정보 구성
const sectionsHTML = [ const sectionsHTML = [
renderSection('기본 관리 정보', [ renderSection('기본 관리 정보', [
{ label: ASSET_SCHEMA.ASSET_CODE.ui, value: asset.asset_code }, { label: ASSET_SCHEMA.ASSET_CODE.ui, value: asset.asset_code },
@@ -208,25 +224,20 @@ export async function renderLocationView(container: HTMLElement) {
].join(''); ].join('');
tableContainer.innerHTML = ` tableContainer.innerHTML = `
<div class="asset-detail-sidebar" style="padding: 1rem; background: #fff; border-radius: 4px; border: 1px solid var(--border-color); max-height: 600px; overflow-y: auto;"> <div class="asset-detail-sidebar" style="padding-top: 1rem; background: #fff; max-height: 100%; overflow-y: auto;">
${sectionsHTML} ${sectionsHTML}
</div> </div>
`; `;
// 뒤로가기 버튼: 목록 대신 초기 상태로 리셋
container.querySelector('#btn-back-to-list')?.addEventListener('click', () => { container.querySelector('#btn-back-to-list')?.addEventListener('click', () => {
title.textContent = `📍 구역을 선택하세요`; title.textContent = `📍 구역을 선택하세요`;
tableContainer.innerHTML = `<div class="empty-state">지도에서 자산 위치를 클릭하세요.</div>`; tableContainer.innerHTML = `<div class="empty-state" style="padding: 3rem 1rem;">지도에서 자산 위치를 클릭하세요.</div>`;
}); });
// 수정 버튼 (기존 모달 활용)
container.querySelector('#btn-edit-from-loc')?.addEventListener('click', () => { container.querySelector('#btn-edit-from-loc')?.addEventListener('click', () => {
openHwModal(asset, 'edit'); openHwModal(asset, 'edit');
}); });
}; };
// showAssets 함수 제거 (목록 표시 불필요)
render(); render();
} }