From 164568843bbed933c677df70f59ff40312632d6b Mon Sep 17 00:00:00 2001 From: Taehoon Date: Thu, 11 Jun 2026 09:47:57 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20LocationView=20=EA=B3=A0=EB=8F=84?= =?UTF-8?q?=ED=99=94=20-=20=EC=A7=80=EB=8F=84=20=ED=81=B4=EB=A6=AD=20?= =?UTF-8?q?=EC=8B=9C=20=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20=EC=83=81?= =?UTF-8?q?=EC=84=B8=20=EC=A0=95=EB=B3=B4=20=ED=91=9C=EC=8B=9C=20=EB=B0=8F?= =?UTF-8?q?=20=EA=B5=AC=EC=97=AD=20=ED=95=84=ED=84=B0=EB=A7=81=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/core/state.ts | 2 + src/core/utils.ts | 2 +- src/main.ts | 36 +++-- src/styles/dashboard.css | 270 ++++++++++++++++++++++++++++++++++++++ src/views/LocationView.ts | 232 ++++++++++++++++++++++++++++++++ vite.config.ts | 10 ++ 6 files changed, 543 insertions(+), 9 deletions(-) create mode 100644 src/views/LocationView.ts diff --git a/src/core/state.ts b/src/core/state.ts index d7189bb..e5ccb5b 100644 --- a/src/core/state.ts +++ b/src/core/state.ts @@ -36,6 +36,7 @@ export interface MasterAssetData { export interface AppState { activeCategory: 'dashboard' | 'hw' | 'sw' | 'ops' | 'vip' | 'fac' | 'users' | 'etc'; activeSubTab: string; + viewMode: 'location' | 'legacy' | 'list'; masterData: MasterAssetData; activeCharts: any[]; currentUserRole: 'admin' | 'user'; @@ -45,6 +46,7 @@ export interface AppState { export const state: AppState = { activeCategory: 'hw', activeSubTab: '서버', // 대시보드 제거됨에 따라 기본값 변경 + viewMode: 'location', activeCharts: [], currentUserRole: 'user', masterData: { diff --git a/src/core/utils.ts b/src/core/utils.ts index 030b2d1..469fce2 100644 --- a/src/core/utils.ts +++ b/src/core/utils.ts @@ -1,6 +1,6 @@ import { PAGE_DESCRIPTIONS } from './schema'; -export const API_BASE_URL = `http://${location.hostname}:3000`; +export const API_BASE_URL = ''; /** * ITAM 공통 유틸리티 함수 diff --git a/src/main.ts b/src/main.ts index 53f549b..a7e52c3 100644 --- a/src/main.ts +++ b/src/main.ts @@ -2,6 +2,7 @@ import { state, loadMasterDataFromDB, saveAsset } from './core/state'; import { renderNavigation } from './components/Navigation'; import { renderDashboard } from './views/DashboardView'; import { renderSWTable } from './views/SW_Table'; +import { renderLocationView } from './views/LocationView'; import { initBaseModal } from './components/Modal/BaseModal'; import { initHwModal, openHwModal } from './components/Modal/HWModal'; import { initSwModal, openSwModal } from './components/Modal/SWModal'; @@ -47,10 +48,33 @@ function refreshView() { const mainContent = document.getElementById('main-content')!; if (!mainContent) return; - if (state.activeSubTab === '대시보드') { - renderDashboard(mainContent); + mainContent.innerHTML = ` +
+
+ + + +
+
+
+ `; + + // 이벤트 바인딩 + mainContent.querySelectorAll('.mode-toggle-btn').forEach(btn => { + btn.addEventListener('click', () => { + const mode = (btn as HTMLElement).getAttribute('data-mode') as any; + state.viewMode = mode; + refreshView(); + }); + }); + + const viewBody = document.getElementById('view-body')!; + if (state.viewMode === 'location') { + renderLocationView(viewBody); + } else if (state.viewMode === 'legacy') { + renderDashboard(viewBody); // 통계/차트 } else { - renderSWTable(mainContent); + renderSWTable(viewBody); // 리스트 형식 } } @@ -74,11 +98,7 @@ function initApp() { try { renderNavigation((tab) => { - if (tab === '대시보드') { - renderDashboard(mainContent); - } else { - renderSWTable(mainContent); - } + refreshView(); }); initHwModal(() => saveAllDataToDB(), closeAllModals); diff --git a/src/styles/dashboard.css b/src/styles/dashboard.css index 44ddd6d..5c1bbaf 100644 --- a/src/styles/dashboard.css +++ b/src/styles/dashboard.css @@ -57,3 +57,273 @@ width: 100% !important; max-height: 280px; } + +/* --- Location View Styles --- */ +.location-layout { + display: grid; + grid-template-columns: 1.2fr 1fr; + gap: 2rem; + height: calc(100vh - 180px); +} + +.map-section, .asset-section { + display: flex; + flex-direction: column; +} + +.section-title { + font-size: 1.125rem; + font-weight: 700; + margin-bottom: 1rem; + color: var(--text-main); + display: flex; + align-items: center; +} + +.map-wrapper { + flex: 1; + background: #f8fafc; + box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); +} + +.location-box { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + user-select: none; +} + +.location-box:hover { + background: rgba(30, 81, 73, 0.2) !important; + transform: scale(1.02); + z-index: 10; +} + +.location-box:active { + transform: scale(0.98); +} + +.asset-section .table-container { + flex: 1; + overflow-y: auto; +} + +.status-tag { + display: inline-block; + padding: 0.25rem 0.625rem; + border-radius: 9999px; + font-size: 0.75rem; + font-weight: 600; + background: #ecfdf5; + color: #059669; + border: 1px solid #d1fae5; +} + +.view-toggle-btn:hover { + border-color: var(--primary-color) !important; + color: var(--primary-color) !important; +} + +.view-toggle-btn.active:hover { + color: white !important; +} + +/* --- View Toggle Header --- */ +.view-header { + padding: 0.5rem 1.5rem; + background: var(--white); + border-bottom: 1px solid var(--border-color); + display: flex; + align-items: center; + justify-content: flex-start; + gap: 1rem; +} + +.view-toggle-container { + display: flex; + background: #f1f5f9; + padding: 0.25rem; + border-radius: 8px; + gap: 0.25rem; +} + +.mode-toggle-btn { + padding: 0.5rem 1rem; + border: none; + background: transparent; + border-radius: 6px; + font-size: 0.8125rem; + font-weight: 600; + color: var(--text-muted); + cursor: pointer; + transition: all 0.2s ease; +} + +.mode-toggle-btn:hover { + color: var(--text-main); +} + +.mode-toggle-btn.active { + background: var(--white); + color: var(--primary-color); + box-shadow: 0 1px 3px rgba(0,0,0,0.1); +} + +/* --- Enhanced Location View --- */ +.location-view-wrapper { + display: flex; + flex-direction: column; + height: calc(100vh - 120px); +} + +.location-filter-bar { + padding: 1rem 1.5rem; + background: var(--white); + border-bottom: 1px solid var(--border-color); + display: flex; + align-items: center; + gap: 2rem; +} + +.filter-group { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.filter-group label { + font-size: 0.8125rem; + font-weight: 700; + color: var(--text-main); +} + +.filter-group select { + padding: 0.4rem 0.75rem; + border: 1px solid var(--border-color); + border-radius: 6px; + font-size: 0.8125rem; + color: var(--text-main); + background: var(--white); + min-width: 140px; +} + +.map-pagination { + margin-left: auto; + display: flex; + align-items: center; + gap: 1rem; +} + +.page-info { + font-size: 0.75rem; + color: var(--text-muted); + font-weight: 600; +} + +.page-btns button { + padding: 0.3rem 0.75rem; + border: 1px solid var(--border-color); + background: var(--white); + border-radius: 4px; + font-size: 0.75rem; + cursor: pointer; +} + +.page-btns button:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.location-main-content { + flex: 1; + display: grid; + grid-template-columns: 1.4fr 1fr; + gap: 1.5rem; + padding: 1.5rem; + overflow: hidden; +} + +.map-container-section { + display: flex; + flex-direction: column; + overflow: auto; +} + +.location-box-point { + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s ease; +} + +.box-label-text { + font-size: 0.65rem; + font-weight: 800; + color: var(--primary-color); + pointer-events: none; + text-shadow: 0 0 2px white; +} + +.asset-list-section { + background: var(--white); + border-radius: 12px; + border: 1px solid var(--border-color); + display: flex; + flex-direction: column; + overflow: hidden; +} + +.asset-list-section .section-header { + padding: 1rem 1.25rem; + border-bottom: 1px solid var(--border-color); + background: #f8fafc; +} + +.asset-list-section h4 { + margin: 0; + font-size: 0.9375rem; + color: var(--text-main); +} + +.mini-table-wrapper { + flex: 1; + overflow-y: auto; +} + +.compact-table { + width: 100%; + border-collapse: collapse; +} + +.compact-table th { + position: sticky; + top: 0; + background: var(--white); + padding: 0.75rem 1rem; + text-align: left; + font-size: 0.75rem; + font-weight: 700; + color: var(--text-muted); + border-bottom: 1px solid var(--border-color); +} + +.compact-table td { + padding: 0.75rem 1rem; + font-size: 0.8125rem; + border-bottom: 1px solid #f1f5f9; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 150px; +} + +.compact-table tr.clickable-row:hover { + background: #f1f5f9; + cursor: pointer; +} + +.empty-state { + padding: 4rem 2rem; + text-align: center; + color: var(--text-muted); + font-size: 0.8125rem; +} diff --git a/src/views/LocationView.ts b/src/views/LocationView.ts new file mode 100644 index 0000000..33d919d --- /dev/null +++ b/src/views/LocationView.ts @@ -0,0 +1,232 @@ +import { state } from '../core/state'; +import { openHwModal } from '../components/Modal/HWModal'; +import { ASSET_SCHEMA } from '../core/schema'; +import { LOCATION_DATA, IMAGE_LOCATIONS } from '../components/Modal/SharedData'; + +/** + * 위치 중심 자산 현황 뷰 (Refined) + */ +export async function renderLocationView(container: HTMLElement) { + if (!container) return; + + // 로컬 상태 (UI 제어용) + let currentLoc = '기술개발센터'; + let currentDetail = '서버실'; + let currentPage = 0; + let mapConfig: any = {}; + + try { + const res = await fetch('/api/maps'); + mapConfig = await res.json(); + } catch (err) { console.error('Failed to load map config', err); } + + const render = () => { + const locImages = (IMAGE_LOCATIONS[currentLoc] && IMAGE_LOCATIONS[currentLoc][currentDetail]) + ? IMAGE_LOCATIONS[currentLoc][currentDetail] + : []; + const mapPath = locImages[currentPage] || ''; + + // 자산이 등록된(좌표가 일치하는) 구역만 필터링하여 표시 + const allBoxes = mapConfig[mapPath] || []; + const boxes = allBoxes.filter((box: any) => + state.masterData.hw.some(a => + a.location === currentLoc && + a.location_detail === currentDetail && + String(a.loc_x) === String(box.x) && + String(a.loc_y) === String(box.y) + ) + ); + + container.innerHTML = ` +
+ +
+
+ + +
+
+ + +
+ + ${locImages.length > 1 ? ` +
+ 사진: ${currentPage + 1} / ${locImages.length} +
+ + +
+
+ ` : ''} +
+ +
+ +
+
+ ${mapPath ? ` + +
+ ${boxes.map((box: any, idx: number) => { + const name = box.name || `#${idx+1}`; + return ` +
+
+ `}).join('')} +
+ ` : '
해당 위치의 도면이 등록되지 않았습니다.
'} +
+

* 지도 위의 구역을 클릭하면 자산 상세 정보가 표시됩니다.

+
+ + +
+
+

📍 구역을 선택하세요

+
+
+
지도에서 자산 위치를 클릭하세요.
+
+
+
+
+ `; + + // 이미지 로드 후 오버레이 크기 재조정 (좌표 밀림 방지) + const img = container.querySelector('#main-map-img') as HTMLImageElement; + if (img) { + img.onload = () => { + const overlay = container.querySelector('#box-overlay') as HTMLElement; + if (overlay) { + overlay.style.height = img.offsetHeight + 'px'; + } + }; + } + + // 이벤트 바인딩 + const selMain = container.querySelector('#sel-loc-main') as HTMLSelectElement; + selMain?.addEventListener('change', () => { + currentLoc = selMain.value; + currentDetail = LOCATION_DATA[currentLoc][0]; + currentPage = 0; + render(); + }); + + const selDetail = container.querySelector('#sel-loc-detail') as HTMLSelectElement; + selDetail?.addEventListener('change', () => { + currentDetail = selDetail.value; + currentPage = 0; + render(); + }); + + container.querySelector('#btn-prev-page')?.addEventListener('click', () => { currentPage--; render(); }); + container.querySelector('#btn-next-page')?.addEventListener('click', () => { currentPage++; render(); }); + + container.querySelectorAll('.location-box-point').forEach(box => { + box.addEventListener('click', () => { + const x = box.getAttribute('data-x'); + const y = box.getAttribute('data-y'); + + // 좌표 및 위치 정보를 기반으로 정확한 자산 1개 찾기 + const targetAsset = state.masterData.hw.find(a => + a.location === currentLoc && + a.location_detail === currentDetail && + String(a.loc_x) === String(x) && + String(a.loc_y) === String(y) + ); + + if (targetAsset) { + renderAssetDetail(targetAsset); + } + + container.querySelectorAll('.location-box-point').forEach(b => (b as HTMLElement).style.background = 'rgba(30, 81, 81, 0.1)'); + (box as HTMLElement).style.background = 'rgba(30, 81, 73, 0.4)'; + }); + }); + }; + + const renderAssetDetail = (asset: any) => { + const title = container.querySelector('#loc-list-title')!; + const tableContainer = container.querySelector('#loc-asset-table-container')!; + title.innerHTML = ` +
+ + 📍 자산 상세 정보 + +
+ `; + + // 섹션별 렌더링 함수 + const renderSection = (title: string, fields: { label: string; value: any }[]) => ` +
+
${title}
+
+ ${fields.map(f => ` +
${f.label}
+
${f.value || '-'}
+ `).join('')} +
+
+ `; + + // 하드웨어 정보 구성 + 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 } + ]), + renderSection('네트워크 정보', [ + { label: ASSET_SCHEMA.IP_ADDR.ui, value: asset.ip_address }, + { label: ASSET_SCHEMA.MAC_ADDR.ui, value: asset.mac_address }, + { 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 } + ]) + ].join(''); + + tableContainer.innerHTML = ` +
+ ${sectionsHTML} +
+ `; + + // 뒤로가기 버튼: 목록 대신 초기 상태로 리셋 + container.querySelector('#btn-back-to-list')?.addEventListener('click', () => { + title.textContent = `📍 구역을 선택하세요`; + tableContainer.innerHTML = `
지도에서 자산 위치를 클릭하세요.
`; + }); + + // 수정 버튼 (기존 모달 활용) + container.querySelector('#btn-edit-from-loc')?.addEventListener('click', () => { + openHwModal(asset, 'edit'); + }); + }; + + // showAssets 함수 제거 (목록 표시 불필요) + + + render(); +} diff --git a/vite.config.ts b/vite.config.ts index 3d35e2a..56b1c1c 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -4,5 +4,15 @@ export default defineConfig({ server: { port: 8080, host: true, // Listen on all local IPs + proxy: { + '/api': { + target: 'http://localhost:3000', + changeOrigin: true, + }, + '/uploads': { + target: 'http://localhost:3000', + changeOrigin: true, + } + } }, }); From 207acbdecb9985064012dcb4e47fcefe3b7f3166 Mon Sep 17 00:00:00 2001 From: Taehoon Date: Thu, 11 Jun 2026 10:08:43 +0900 Subject: [PATCH 2/5] =?UTF-8?q?fix:=20LocationView=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=95=88=EC=A0=95=ED=99=94=20=EB=B0=8F=20?= =?UTF-8?q?UI=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 페이지네이션 버튼을 상세위치 옆으로 이동\n- 지도 이미지 밀림 현상 방지를 위한 정렬 방식 수정 및 동기화 로직 보강\n- 상단 메뉴에서 구버전 현황 버튼 제거 --- src/main.ts | 7 +-- src/views/LocationView.ts | 101 +++++++++++++++++++++----------------- 2 files changed, 58 insertions(+), 50 deletions(-) diff --git a/src/main.ts b/src/main.ts index a7e52c3..a8d3667 100644 --- a/src/main.ts +++ b/src/main.ts @@ -52,7 +52,6 @@ function refreshView() {
-
@@ -60,7 +59,7 @@ function refreshView() { `; // 이벤트 바인딩 - mainContent.querySelectorAll('.mode-toggle-btn').forEach(btn => { + mainContent.querySelectorAll('.mode-toggle-btn').forEach(btn => { btn.addEventListener('click', () => { const mode = (btn as HTMLElement).getAttribute('data-mode') as any; state.viewMode = mode; @@ -71,12 +70,10 @@ function refreshView() { const viewBody = document.getElementById('view-body')!; if (state.viewMode === 'location') { renderLocationView(viewBody); - } else if (state.viewMode === 'legacy') { - renderDashboard(viewBody); // 통계/차트 } else { renderSWTable(viewBody); // 리스트 형식 } -} + } // 통합 저장 및 갱신 async function saveAllDataToDB() { diff --git a/src/views/LocationView.ts b/src/views/LocationView.ts index 33d919d..5bb81ff 100644 --- a/src/views/LocationView.ts +++ b/src/views/LocationView.ts @@ -49,29 +49,32 @@ export async function renderLocationView(container: HTMLElement) {
- -
- - ${locImages.length > 1 ? ` -
- 사진: ${currentPage + 1} / ${locImages.length} -
- - +
+ + + + ${locImages.length > 1 ? ` +
+
+ + +
+ (${currentPage + 1} / ${locImages.length}) +
+ ` : ''}
- ` : ''}
-
- -
-
+
+ +
+
${mapPath ? ` - -
+ +
${boxes.map((box: any, idx: number) => { const name = box.name || `#${idx+1}`; return ` @@ -86,32 +89,48 @@ export async function renderLocationView(container: HTMLElement) {
` : '
해당 위치의 도면이 등록되지 않았습니다.
'}
-

* 지도 위의 구역을 클릭하면 자산 상세 정보가 표시됩니다.

- -
-
-

📍 구역을 선택하세요

+ +
+
+

📍 구역을 선택하세요

-
-
지도에서 자산 위치를 클릭하세요.
+
+
지도에서 자산 위치를 클릭하세요.
+
+

* 지도 위의 구역을 클릭하면 자산 상세 정보가 표시됩니다.

+
`; - // 이미지 로드 후 오버레이 크기 재조정 (좌표 밀림 방지) + // 이미지 로드 및 윈도우 리사이즈 시 오버레이 크기와 위치를 이미지에 정확히 맞춤 + 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; if (img) { - img.onload = () => { - const overlay = container.querySelector('#box-overlay') as HTMLElement; - if (overlay) { - overlay.style.height = img.offsetHeight + 'px'; - } - }; + if (img.complete) { + syncOverlaySize(); + setTimeout(syncOverlaySize, 50); // 레이아웃 안정화 대기 + } else { + img.onload = syncOverlaySize; + } } + + window.removeEventListener('resize', syncOverlaySize); + window.addEventListener('resize', syncOverlaySize); // 이벤트 바인딩 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 y = box.getAttribute('data-y'); - // 좌표 및 위치 정보를 기반으로 정확한 자산 1개 찾기 const targetAsset = state.masterData.hw.find(a => a.location === currentLoc && a.location_detail === currentDetail && @@ -149,7 +167,7 @@ export async function renderLocationView(container: HTMLElement) { 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)'; }); }); @@ -166,20 +184,18 @@ export async function renderLocationView(container: HTMLElement) {
`; - // 섹션별 렌더링 함수 const renderSection = (title: string, fields: { label: string; value: any }[]) => ` -
+
${title}
${fields.map(f => `
${f.label}
-
${f.value || '-'}
+
${f.value || '-'}
`).join('')}
`; - // 하드웨어 정보 구성 const sectionsHTML = [ renderSection('기본 관리 정보', [ { label: ASSET_SCHEMA.ASSET_CODE.ui, value: asset.asset_code }, @@ -208,25 +224,20 @@ export async function renderLocationView(container: HTMLElement) { ].join(''); tableContainer.innerHTML = ` -
+
${sectionsHTML}
`; - // 뒤로가기 버튼: 목록 대신 초기 상태로 리셋 container.querySelector('#btn-back-to-list')?.addEventListener('click', () => { title.textContent = `📍 구역을 선택하세요`; - tableContainer.innerHTML = `
지도에서 자산 위치를 클릭하세요.
`; + tableContainer.innerHTML = `
지도에서 자산 위치를 클릭하세요.
`; }); - // 수정 버튼 (기존 모달 활용) container.querySelector('#btn-edit-from-loc')?.addEventListener('click', () => { openHwModal(asset, 'edit'); }); }; - // showAssets 함수 제거 (목록 표시 불필요) - - render(); } From 95fbd3f606cf72b82ac2444747da92049e42540b Mon Sep 17 00:00:00 2001 From: Taehoon Date: Thu, 11 Jun 2026 10:37:33 +0900 Subject: [PATCH 3/5] =?UTF-8?q?fix:=20=EC=9E=90=EC=82=B0=20=EC=83=81?= =?UTF-8?q?=EC=84=B8=20=EC=A0=95=EB=B3=B4=20=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EC=B5=9C=EC=A0=81=ED=99=94=20=EB=B0=8F=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=ED=91=9C=EC=A4=80=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 상세 정보 섹션을 2열 그리드로 변경하여 정보 밀도 향상\n- 항목 제목(12px) 및 내용(14px) 폰트 크기 조정\n- 인라인 스타일을 dashboard.css로 이전 및 중앙 집중화\n- 불필요한 아이콘 제거 및 UI 정돈 --- src/styles/dashboard.css | 61 +++++++++++++++++++++++++++++++++++---- src/views/LocationView.ts | 17 ++++++----- 2 files changed, 65 insertions(+), 13 deletions(-) diff --git a/src/styles/dashboard.css b/src/styles/dashboard.css index 5c1bbaf..85801c4 100644 --- a/src/styles/dashboard.css +++ b/src/styles/dashboard.css @@ -321,9 +321,60 @@ cursor: pointer; } -.empty-state { - padding: 4rem 2rem; - text-align: center; - color: var(--text-muted); - font-size: 0.8125rem; +/* --- Asset Detail Sidebar (LocationView) --- */ +.asset-detail-sidebar { + padding-top: 1rem; + background: var(--white); + 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; } diff --git a/src/views/LocationView.ts b/src/views/LocationView.ts index 5bb81ff..9ade3c6 100644 --- a/src/views/LocationView.ts +++ b/src/views/LocationView.ts @@ -176,21 +176,22 @@ export async function renderLocationView(container: HTMLElement) { const renderAssetDetail = (asset: any) => { const title = container.querySelector('#loc-list-title')!; const tableContainer = container.querySelector('#loc-asset-table-container')!; + title.innerHTML = ` -
+
- 📍 자산 상세 정보 + 자산 상세 정보
`; const renderSection = (title: string, fields: { label: string; value: any }[]) => ` -
-
${title}
-
+
+
${title}
+
${fields.map(f => ` -
${f.label}
-
${f.value || '-'}
+
${f.label}
+
${f.value || '-'}
`).join('')}
@@ -224,7 +225,7 @@ export async function renderLocationView(container: HTMLElement) { ].join(''); tableContainer.innerHTML = ` -
+
${sectionsHTML}
`; From 10479aad7ed146fa4f5f07fd9c67420367404f41 Mon Sep 17 00:00:00 2001 From: Taehoon Date: Thu, 11 Jun 2026 11:14:00 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20HWModal=20=EB=84=A4=ED=8A=B8?= =?UTF-8?q?=EC=9B=8C=ED=81=AC=20=EB=B0=8F=20=EC=9B=90=EA=B2=A9=20=EC=A0=91?= =?UTF-8?q?=EC=86=8D=20=EC=A0=95=EB=B3=B4=20=EB=8F=99=EC=A0=81=20=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=20=EA=B8=B0=EB=8A=A5=20=ED=86=B5=ED=95=A9=20=EB=B0=8F?= =?UTF-8?q?=20UI=20=EC=B5=9C=EC=A0=81=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Modal/HWModal.ts | 231 ++++++++++++++++++++++---------- 1 file changed, 157 insertions(+), 74 deletions(-) diff --git a/src/components/Modal/HWModal.ts b/src/components/Modal/HWModal.ts index 9cd7916..efb5521 100644 --- a/src/components/Modal/HWModal.ts +++ b/src/components/Modal/HWModal.ts @@ -35,8 +35,9 @@ class HwAssetModal extends BaseModal {
+ - +
기본 관리 정보
@@ -101,8 +102,8 @@ class HwAssetModal extends BaseModal {
- -
시스템 사양 및 네트워크
+ +
시스템 사양 정보
@@ -135,58 +136,33 @@ class HwAssetModal extends BaseModal {
+
+ + +
- + +
디스크(용량) 정보
- - + +
-
- - -
-
- - -
-
- - -
-
- - -
-
- - + +
네트워크 및 원격 접속 정보
+
+
+ + +
+
- -
원격 접속 정보
-
- - -
-
- - -
-
- - -
-
- - -
- - +
설치 위치
@@ -202,7 +178,7 @@ class HwAssetModal extends BaseModal {
- +
구매 및 증빙 정보
@@ -331,9 +307,9 @@ class HwAssetModal extends BaseModal { this.toggleEditOnlyBtns(false); }); - // 동적 볼륨 추가 기능 연결 - const btnAddVolume = document.getElementById('btn-add-volume')!; - btnAddVolume.addEventListener('click', () => this.addVolumeRow()); + // 동적 기능 이벤트 연결 + document.getElementById('btn-add-volume')?.addEventListener('click', () => this.addVolumeRow()); + document.getElementById('btn-add-remote-info')?.addEventListener('click', () => this.addRemoteInfoRow()); const fileInput = document.getElementById('hw-approval_document_file') as HTMLInputElement; const fileNameDisplay = document.getElementById('hw-file-name-display'); @@ -374,7 +350,7 @@ class HwAssetModal extends BaseModal { return; } - // 동적 볼륨 데이터 수집 및 배열 생성 + // 동적 볼륨 데이터 수집 const vols: any[] = []; document.querySelectorAll('#hw-volume-container .volume-row').forEach((row, idx) => { const type = (row.querySelector('.vol-type') as HTMLSelectElement).value; @@ -384,6 +360,24 @@ class HwAssetModal extends BaseModal { }); setFieldValue('hw-volumes-data', JSON.stringify(vols)); + // 동적 네트워크/원격 데이터 수집 + const nets: any[] = []; + document.querySelectorAll('#hw-remote-info-container .remote-info-row').forEach(row => { + const type = (row.querySelector('.ri-type') as HTMLSelectElement).value; + const val1 = (row.querySelector('.ri-val1') as HTMLInputElement).value; + + if (type === 'IP' && val1) { + const tool = (row.querySelector('.ri-tool') as HTMLSelectElement)?.value || ''; + const id = (row.querySelector('.ri-id') as HTMLInputElement)?.value || ''; + const pw = (row.querySelector('.ri-pw') as HTMLInputElement)?.value || ''; + const val2Str = (id || pw) ? JSON.stringify({ id, pw }) : ''; + nets.push({ type: 'IP', name: tool, val1: val1, val2: val2Str }); + } else if (type === 'MAC' && val1) { + nets.push({ type: 'MAC', name: 'MAC 주소', val1: val1, val2: '' }); + } + }); + setFieldValue('hw-remotes-data', JSON.stringify(nets)); + const formData = new FormData(this.formEl!); const updated = { ...this.currentAsset }; formData.forEach((value, key) => { if (key !== 'id') updated[key] = value; }); @@ -426,12 +420,94 @@ class HwAssetModal extends BaseModal { container.appendChild(row); } + private addRemoteInfoRow(info: any = { type: 'IP', name: '원격접속', val1: '', val2: '' }) { + const container = document.getElementById('hw-remote-info-container'); + if (!container) return; + + // Parse val2 (which contains JSON with id and pw if type is IP) + let parsedId = ''; + let parsedPw = ''; + if (info.type === 'IP' && info.val2) { + try { + const parsed = typeof info.val2 === 'string' ? JSON.parse(info.val2) : info.val2; + parsedId = parsed.id || ''; + parsedPw = parsed.pw || ''; + } catch (e) { + // Legacy fallback if val2 was just a simple string + parsedId = info.val2; + } + } + + const row = document.createElement('div'); + row.className = 'remote-info-row'; + + // First Line: Type & Address + const line1 = document.createElement('div'); + line1.className = 'ri-line'; + line1.innerHTML = ` + + + + `; + + // Second Line: Tool & Credentials (Only for IP) + const line2 = document.createElement('div'); + line2.className = 'ri-line ri-cred-line'; + line2.style.display = info.type === 'IP' ? 'flex' : 'none'; + line2.innerHTML = ` +
+ + + +
+ `; + + row.appendChild(line1); + row.appendChild(line2); + + // Toggle logic + const typeSelect = row.querySelector('.ri-type') as HTMLSelectElement; + typeSelect.addEventListener('change', (e) => { + const isIP = (e.target as HTMLSelectElement).value === 'IP'; + line2.style.display = isIP ? 'flex' : 'none'; + if (!isIP) { + (row.querySelector('.ri-id') as HTMLInputElement).value = ''; + (row.querySelector('.ri-pw') as HTMLInputElement).value = ''; + } + }); + + row.querySelector('.btn-remove-row')?.addEventListener('click', () => row.remove()); + container.appendChild(row); + } + private toggleEditOnlyBtns(isEdit: boolean) { - const addBtn = document.getElementById('btn-add-volume'); - if (addBtn) addBtn.style.display = isEdit ? 'inline-flex' : 'none'; + ['btn-add-volume', 'btn-add-remote-info'].forEach(id => { + const btn = document.getElementById(id); + if (btn) btn.style.display = isEdit ? 'inline-flex' : 'none'; + }); document.querySelectorAll('.edit-only-btn').forEach(btn => { (btn as HTMLElement).style.display = isEdit ? 'inline-flex' : 'none'; }); + + // 동적 생성된 필드들 (볼륨/원격정보)의 상태 일괄 토글 + const containers = ['#hw-volume-container', '#hw-remote-info-container']; + containers.forEach(selector => { + document.querySelectorAll(`${selector} input`).forEach(input => { + if (isEdit) input.removeAttribute('readonly'); + else input.setAttribute('readonly', 'true'); + }); + document.querySelectorAll(`${selector} select`).forEach(select => { + if (isEdit) select.removeAttribute('disabled'); + else select.setAttribute('disabled', 'true'); + }); + }); } protected fillFormData(asset: any): void { @@ -469,12 +545,33 @@ class HwAssetModal extends BaseModal { vols.forEach((v: any) => this.addVolumeRow(v)); } - setFieldValue('hw-ip_address', asset.ip_address || ''); - setFieldValue('hw-ip_address_2', asset.ip_address_2 || ''); - setFieldValue('hw-mac_address', asset.mac_address || ''); - setFieldValue('hw-remote_tool', asset.remote_tool || ''); - setFieldValue('hw-remote_id', asset.remote_id || ''); - setFieldValue('hw-remote_pw', asset.remote_pw || ''); + // 통합 원격 접속 정보 렌더링 초기화 및 생성 + const remoteInfoContainer = document.getElementById('hw-remote-info-container'); + if (remoteInfoContainer) { + remoteInfoContainer.innerHTML = ''; + let nets = []; + try { + nets = asset.remotes ? (typeof asset.remotes === 'string' ? JSON.parse(asset.remotes) : asset.remotes) : []; + } catch(e) {} + + // Fallback: 서버에서 배열을 안 줬지만 기존 평탄화 데이터가 있는 경우 + if (nets.length === 0 && (asset.ip_address || asset.mac_address || asset.remote_tool || asset.remote_id)) { + if (asset.ip_address) { + const tool = asset.remote_tool || '원격접속'; + const creds = (asset.remote_id || asset.remote_pw) ? JSON.stringify({ id: asset.remote_id || '', pw: asset.remote_pw || '' }) : ''; + nets.push({ type: 'IP', name: tool, val1: asset.ip_address, val2: creds }); + } + if (asset.mac_address) { + nets.push({ type: 'MAC', name: 'MAC 주소', val1: asset.mac_address, val2: '' }); + } + if (!asset.ip_address && (asset.remote_tool || asset.remote_id)) { + const creds = JSON.stringify({ id: asset.remote_id || '', pw: asset.remote_pw || '' }); + nets.push({ type: 'IP', name: asset.remote_tool || '기타', val1: '', val2: creds }); + } + } + nets.forEach((n: any) => this.addRemoteInfoRow(n)); + } + setFieldValue('hw-monitoring', asset.monitoring || '비대상'); setFieldValue('hw-serial_num', asset.serial_num || ''); setFieldValue('hw-monitor_inch', asset.monitor_inch || ''); @@ -520,32 +617,18 @@ class HwAssetModal extends BaseModal { const category = (document.getElementById('hw-category') as HTMLSelectElement)?.value || ''; const type = (document.getElementById('hw-asset_type') as HTMLSelectElement)?.value || ''; - // 인프라 장비 (서버, 저장매체, 네트워크, 보안장비, 공간정보장비, 서버PC) const infraCategories = ['서버', '저장매체', '네트워크', '보안장비', '공간정보장비']; const isInfra = infraCategories.includes(category) || type.includes('서버') || type.includes('저장시스템'); - - // 개인 장비 (PC, 노트북, 모바일, 태블릿) - '서버PC'는 제외 const personalCategories = ['PC', '노트북', '모바일', '태블릿']; const isPersonal = (personalCategories.includes(category) || type.includes('개인PC') || type.includes('노트북')) && !type.includes('서버PC'); - - // 시스템 사양 (PC, 서버 등) const specCategories = ['PC', '서버', '노트북', '스토리지', '워크스테이션']; const hasSpec = specCategories.includes(category) || type.includes('서버PC'); - - // 네트워크 정보 (IP/MAC) const noNetCategories = ['저장매체', '네트워크', '공간정보장비', 'PC부품', '사무가구']; const showNet = (isInfra || isPersonal) && !noNetCategories.includes(category); - - // 시리얼 번호 const hasSN = !['사무가구', 'PC부품'].includes(category); - - // 수량/용량 전용 (부품) const isParts = ['PC부품', '사무가구'].includes(category); - - // 원격 접속 (서버 전용) const showRemote = category === '서버' || type.includes('서버'); - // JS에서 display: block 강제 대신 빈 문자열 할당하여 네이티브 CSS flex 활용 document.querySelectorAll('.remote-section, .remote-field, .monitoring-field').forEach(el => (el as HTMLElement).style.display = showRemote ? '' : 'none'); document.querySelectorAll('.net-only').forEach(el => (el as HTMLElement).style.display = showNet ? '' : 'none'); document.querySelectorAll('.spec-only').forEach(el => (el as HTMLElement).style.display = hasSpec ? '' : 'none'); @@ -658,9 +741,9 @@ class HwAssetModal extends BaseModal { private renderHistory(assetId: string) { const container = document.getElementById('hw-history-list'); if (!container) return; - const logs = (state.masterData.logs || []).filter(l => l.assetId === assetId); + const logs = (state.masterData.logs || []).filter(l => l.asset_id === assetId); if (logs.length === 0) { container.innerHTML = '
이력이 없습니다.
'; return; } - container.innerHTML = logs.map(l => `
${l.date}
${l.user}
${l.details}
`).join(''); + container.innerHTML = logs.map(l => `
${l.log_date}
${l.log_user}
${l.details}
`).join(''); } private getCategoryKey(asset: any): string { From f5a84a77ef79fc7ab58d8728d0fff635139ebb82 Mon Sep 17 00:00:00 2001 From: Taehoon Date: Thu, 11 Jun 2026 11:20:28 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20PC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EA=B0=9C=EB=B0=9C=20=EB=8C=80=EA=B8=B0=20=EC=83=81=ED=83=9C=20?= =?UTF-8?q?=EC=A0=84=ED=99=98=20=EB=B0=8F=20=EC=9E=90=EC=82=B0=ED=98=84?= =?UTF-8?q?=ED=99=A9=20=EB=B7=B0=20=EB=85=B8=EC=B6=9C=20=EB=B2=94=EC=9C=84?= =?UTF-8?q?=20=EC=A0=9C=ED=95=9C=20(=EC=84=9C=EB=B2=84=20=ED=83=AD=20?= =?UTF-8?q?=EC=A0=84=EC=9A=A9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.ts | 11 +++++++-- src/views/List/ListFactory.ts | 11 ++++++--- src/views/List/PcListView.ts | 45 +++++------------------------------ 3 files changed, 23 insertions(+), 44 deletions(-) diff --git a/src/main.ts b/src/main.ts index a8d3667..088f5ea 100644 --- a/src/main.ts +++ b/src/main.ts @@ -47,10 +47,17 @@ const saveUsersToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/u function refreshView() { const mainContent = document.getElementById('main-content')!; if (!mainContent) return; + + // 서버 탭이 아닐 경우 '자산현황(위치)' 뷰 진입 방지 및 강제 리스트 모드 전환 + if (state.activeSubTab !== '서버' && state.viewMode === 'location') { + state.viewMode = 'list'; + } + + const isServerTab = state.activeSubTab === '서버'; mainContent.innerHTML = `
-
+
@@ -73,7 +80,7 @@ function refreshView() { } else { renderSWTable(viewBody); // 리스트 형식 } - } +} // 통합 저장 및 갱신 async function saveAllDataToDB() { diff --git a/src/views/List/ListFactory.ts b/src/views/List/ListFactory.ts index fa6abef..52e25bb 100644 --- a/src/views/List/ListFactory.ts +++ b/src/views/List/ListFactory.ts @@ -41,15 +41,20 @@ export function createListView(container: HTMLElement, config: ListViewConfig) { let sortState: SortState = config.persistentSortState || { key: '', direction: 'asc' }; let currentFilters: any = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '' }; - // 강제로 기본 뷰 모드를 'system' (자산 현황)으로 설정 - (state as any).currentViewMode = 'system'; + // 서버 탭이 아닐 경우 '자산 현황(대시보드)' 뷰 진입 방지 및 강제 'asset' 모드 + const isServer = config.title === '서버'; + if (!isServer) { + (state as any).currentViewMode = 'asset'; + } else if (!(state as any).currentViewMode) { + (state as any).currentViewMode = 'system'; + } // 2. 뷰 전환 토글 버튼 생성 (명칭 변경) const toggleWrapper = document.createElement('div'); toggleWrapper.className = 'view-toggle-container'; toggleWrapper.innerHTML = `
-
+
diff --git a/src/views/List/PcListView.ts b/src/views/List/PcListView.ts index 83c6fa0..e51d260 100644 --- a/src/views/List/PcListView.ts +++ b/src/views/List/PcListView.ts @@ -5,43 +5,10 @@ import { ASSET_SCHEMA } from '../../core/schema'; import { createListView } from './ListFactory'; export function renderPcList(container: HTMLElement) { - createListView(container, { - title: 'PC', - dataSource: () => sortAssets((state.masterData.pc || []).filter((a: any) => a.asset_type !== '서버PC')), - searchKeys: ['CURRENT_DEPT', 'CURRENT_USER', 'MODEL_NAME', 'MAC_ADDR', 'MANAGER_MAIN', 'ASSET_TYPE'], - filterOptions: { - keywordLabel: `통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui}/${ASSET_SCHEMA.MANAGER_MAIN.ui}/${ASSET_SCHEMA.CURRENT_USER.ui})`, - showLoc: true, - showDept: true, - showType: true - }, - onRowClick: (asset) => openHwModal(asset, 'view'), - columns: [ - { header: ASSET_SCHEMA.CURRENT_USER.ui, sortKey: ASSET_SCHEMA.CURRENT_USER.key, align: 'center', render: a => a[ASSET_SCHEMA.CURRENT_USER.key] || '-' }, - { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' }, - { header: ASSET_SCHEMA.CPU.ui, sortKey: ASSET_SCHEMA.CPU.key, align: 'center', render: a => a[ASSET_SCHEMA.CPU.key] || '' }, - { header: ASSET_SCHEMA.MAINBOARD.ui, sortKey: ASSET_SCHEMA.MAINBOARD.key, align: 'center', render: a => a[ASSET_SCHEMA.MAINBOARD.key] || '-' }, - { header: ASSET_SCHEMA.RAM.ui, sortKey: ASSET_SCHEMA.RAM.key, align: 'center', render: a => a[ASSET_SCHEMA.RAM.key] || '' }, - { header: ASSET_SCHEMA.GPU.ui, sortKey: ASSET_SCHEMA.GPU.key, align: 'center', render: a => a[ASSET_SCHEMA.GPU.key] || '-' }, - { - header: 'SSD', - align: 'center', - width: '8%', - render: a => [a[ASSET_SCHEMA.SSD1.key], a[ASSET_SCHEMA.SSD2.key]].filter(Boolean).join(' / ') || '-' - }, - { - header: 'HDD', - align: 'center', - width: '12%', - render: a => [a[ASSET_SCHEMA.HDD1.key], a[ASSET_SCHEMA.HDD2.key], a[ASSET_SCHEMA.HDD3.key], a[ASSET_SCHEMA.HDD4.key]].filter(Boolean).join(' / ') || '-' - }, - { - header: ASSET_SCHEMA.MAC_ADDR.ui, - sortKey: ASSET_SCHEMA.MAC_ADDR.key, - align: 'center', - render: a => `${a[ASSET_SCHEMA.MAC_ADDR.key] || '-'}` - }, - { header: ASSET_SCHEMA.MEMO.ui, sortKey: ASSET_SCHEMA.MEMO.key, className: 'col-memo', width: '30%', render: a => formatInline(a[ASSET_SCHEMA.MEMO.key] || '-') } - ] - }); + container.innerHTML = ` +
+
PC 관리
+

해당 페이지는 다른 작업자에 의해 개발 중입니다.

+
+ `; }