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

feat: 서버 탭 전환 시 뷰 모드 유지 및 대시보드/맵 에디터 스타일 표준화

Browse Source 
- 서버 탭 복귀 시 최근 선택한 뷰 모드(목록/위치) 상태 유지 및 currentViewMode 상태 일원화

- 개인PC 대시보드 및 맵 에디터의 인라인 CSS 스타일을 공통 CSS 및 변수 클래스로 분리 및 가독성 개선

- Vite 멀티페이지 빌드 설정(vite.config.ts) 추가
This commit is contained in:
이태훈
2026-06-19 14:55:25 +09:00
parent c6515c1b5d
commit 587e92a7da
8 changed files with 205 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
map_editor.html
View File

@@ -5,8 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ITAM Map Coordinate Editor v3.0</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
<link rel="stylesheet" href="/src/styles/common.css" />
<link rel="stylesheet" href="/src/styles/map-editor.css" />
</head>
<body style="margin: 0; display: flex; height: 100vh; overflow: hidden; font-family: sans-serif;">
<body class="editor-body">
<!-- Left: File Selector -->
<div class="file-sidebar" id="file-sidebar">
@@ -22,7 +24,7 @@
<!-- Right: Control Panel -->
<div class="sidebar">
<h2>Map Editor <small style="font-size: 0.6em; color: #888;">v3.0</small></h2>
<h2>Map Editor <small class="editor-version">v3.0</small></h2>
<div class="current-path" id="current-path">파일을 선택하세요</div>
<p>
드래그하여 구역을 정의하세요. 저장 버튼을 누르면 즉시 시스템에 반영됩니다.
@@ -31,8 +33,8 @@
<div class="box-list" id="box-list"></div>
<div class="actions">
<button id="btn-clear-all" class="btn btn-outline" style="height:38px;">전체 삭제</button>
<button id="btn-save-server" class="btn btn-primary" style="height:38px;">서버에 즉시 저장</button>
<button id="btn-clear-all" class="btn btn-outline">전체 삭제</button>
<button id="btn-save-server" class="btn btn-primary">서버에 즉시 저장</button>
<div id="save-status"></div>
</div>
</div>

10
src/main.ts
View File

@@ -30,19 +30,17 @@ function refreshView(tab?: string) {
return;
}
// 서버 탭이 아닐 경우 '자산현황(위치)' 뷰 진입 방지 및 강제 리스트 모드 전환
if (activeTab !== '서버' && state.viewMode === 'location') {
state.viewMode = 'list';
}
// 서버 탭이 아닐 경우에는 state.viewMode가 location이더라도 강제로 목록(list) 뷰를 그리도록 함
// (state.viewMode의 원래 상태는 보존하여, 서버 탭 복귀 시 최근 보던 모드를 유지함)
const isServerTab = activeTab === '서버';
const effectiveViewMode = isServerTab ? state.viewMode : 'list';
mainContent.innerHTML = `
<div id="view-body" class="view-container"></div>
`;
const viewBody = document.getElementById('view-body')!;
if (state.viewMode === 'location') {
if (effectiveViewMode === 'location') {
renderLocationView(viewBody);
} else {
renderSWTable(viewBody); // 리스트 형식

66
src/styles/map-editor.css
View File

@@ -12,8 +12,8 @@
.folder-item {
padding: 10px 15px;
background: var(--bg-light);
font-weight: bold;
font-size: 13px;
font-weight: 700;
font-size: var(--fs-base);
border-bottom: 1px solid var(--border-color);
color: var(--primary-color);
}
@@ -21,13 +21,13 @@
.file-item {
padding: 8px 25px;
cursor: pointer;
font-size: 12px;
font-size: var(--fs-sm);
border-bottom: 1px solid var(--bg-color);
transition: background 0.2s;
}
.file-item:hover { background: var(--bg-light); }
.file-item.active { background: var(--primary-color); color: var(--white); font-weight: bold; }
.file-item.active { background: var(--primary-color); color: var(--white); font-weight: 700; }
/* Center: Editor Area */
.editor-container {
@@ -70,10 +70,10 @@
box-shadow: -5px 0 15px rgba(0,0,0,0.05);
}
.sidebar h2 { margin-top: 0; color: var(--primary-color); font-size: 1.2rem; }
.sidebar p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 20px; }
.sidebar h2 { margin-top: 0; color: var(--primary-color); font-size: var(--fs-lg); font-weight: 600; }
.sidebar p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.4; margin-bottom: 20px; }
.current-path { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; word-break: break-all; font-family: monospace; }
.current-path { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 10px; word-break: break-all; font-family: monospace; }
.box-list {
flex: 1;
@@ -87,7 +87,7 @@
.box-item {
font-family: monospace;
font-size: 11px;
font-size: var(--fs-xs);
padding: 10px 6px;
border-bottom: 1px solid var(--border-color);
display: flex;
@@ -102,7 +102,7 @@
}
.box-index {
font-weight: bold;
font-weight: 700;
color: var(--primary-color);
}
@@ -128,7 +128,7 @@
padding: 2px 4px;
border: 1px solid var(--border-color);
border-radius: 2px;
font-size: 10px;
font-size: var(--fs-xs);
outline: none;
}
@@ -137,7 +137,7 @@
}
.box-item:hover { background: var(--white); }
.btn-del { cursor: pointer; color: var(--danger); border: none; background: none; font-size: 16px; padding: 0 5px; }
.btn-del { cursor: pointer; color: var(--danger); border: none; background: none; font-size: var(--fs-md); padding: 0 5px; }
.actions { display: flex; flex-direction: column; gap: 8px; }
@@ -174,8 +174,8 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 10px;
font-weight: bold;
font-size: var(--fs-xs);
font-weight: 700;
color: var(--primary-color);
pointer-events: none;
white-space: nowrap;
@@ -192,9 +192,45 @@
#save-status {
margin-top: 8px;
font-size: 11px;
font-size: var(--fs-xs);
color: var(--success);
text-align: center;
font-weight: bold;
font-weight: 700;
height: 14px;
}
/* Editor Body & Layout Overrides */
.editor-body {
margin: 0;
display: flex;
height: 100vh;
overflow: hidden;
}
.editor-version {
font-size: var(--fs-xs);
color: var(--text-muted);
}
.actions .btn {
height: 38px;
}
/* Box Item Dropdown Inputs */
.box-inputs.margin-bottom {
margin-bottom: 8px;
}
.box-inputs select {
width: 100%;
padding: 4px;
border: 1px solid var(--border-color);
border-radius: 4px;
font-size: var(--fs-xs);
background-color: var(--canvas);
color: var(--text-main);
outline: none;
}
.box-inputs select:focus {
border-color: var(--primary-color);
}

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

@@ -66,19 +66,15 @@ export function renderHwDashboard(container: HTMLElement) {
// 2. 1페이지 매거진 리포트(제목바 제거, '| 제목' 미니멀리즘 스타일) HTML 빌드
container.innerHTML = `
<div class="view-container" style="overflow: hidden; padding: 0; background-color: #ffffff; height: calc(100vh - var(--header-height) - 48px); box-sizing: border-box; display: flex; flex-direction: column; gap: 0; font-family: 'Pretendard', sans-serif; color: #1E293B;">
<div class="view-container" style="overflow: hidden; padding: 0; background-color: var(--canvas); height: calc(100vh - var(--header-height) - 48px); box-sizing: border-box; display: flex; flex-direction: column; gap: 0; color: var(--text-main);">
<!-- 대시보드 타이틀 및 사용조직 필터 -->
<div style="display: flex; justify-content: space-between; align-items: flex-end; flex-shrink: 0; padding-bottom: 0.4rem;">
<div style="border-left: 4px solid #1E5149; padding-left: 8px;">
<h2 style="font-size: 1.65rem; font-weight: 850; color: #1E5149; margin: 0; letter-spacing: -0.5px; display: flex; align-items: center; gap: 0.6rem;">
개인 PC 자산 대시보드
</h2>
<div>
</div>
<!-- 사용조직 필터 (브랜드 그린 매칭 칩 디자인) -->
<div class="flex items-center gap-3">
<span class="detail-label-sm font-bold">조직 필터:</span>
<div id="dashboard-dept-buttons" class="flex gap-1 p-1 bg-canvas-soft border border-hairline rounded-lg">
<button class="dept-filter-btn active" data-dept="">전체</button>
<button class="dept-filter-btn" data-dept="한맥">한맥</button>
@@ -98,37 +94,35 @@ export function renderHwDashboard(container: HTMLElement) {
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0; height: 100%;">
<!-- 1. 보유 자산 수량 -->
<div id="metric-card-total" style="background: #ffffff; padding: 1.5rem; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; position: relative; overflow: hidden; transition: background-color 0.15s ease;"
onmouseover="this.style.backgroundColor='#F8FAFC';"
onmouseout="this.style.backgroundColor='#ffffff';">
<div style="display: flex; align-items: center; z-index: 1; border-left: 4px solid #1E5149; padding-left: 8px; height: 1.4rem;">
<span style="font-size: 1.1rem; font-weight: 850; color: #1E293B; letter-spacing: -0.3px;">보유 자산 수량</span>
<div id="metric-card-total" class="stat-card">
<div style="display: flex; align-items: center; z-index: 1; height: 1.4rem;">
<span class="stat-card-label">보유 자산 수량</span>
</div>
<div id="metric-total-pcs" style="font-size: 2.1rem; font-weight: 900; color: #1E5149; line-height: 1.1; z-index: 1; margin-right: 2rem; margin-top: 1.8rem;">0대</div>
<div id="metric-total-pcs" class="stat-card-value">0대</div>
</div>
<!-- 2. 사양 부족 -->
<div id="card-under-spec" style="background: #ffffff; padding: 1.5rem; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; position: relative; overflow: hidden; cursor: pointer; transition: background-color 0.15s ease;">
<div style="display: flex; align-items: center; z-index: 1; border-left: 4px solid #EF4444; padding-left: 8px; height: 1.4rem;">
<span style="font-size: 1.1rem; font-weight: 850; color: #1E293B; letter-spacing: -0.3px;">사양 부족</span>
<div id="card-under-spec" class="stat-card">
<div style="display: flex; align-items: center; z-index: 1; height: 1.4rem;">
<span class="stat-card-label">사양 부족</span>
</div>
<div id="metric-under-spec" style="font-size: 2.1rem; font-weight: 900; color: #EF4444; line-height: 1.1; z-index: 1; margin-right: 2rem; margin-top: 1.8rem;">0대</div>
<div id="metric-under-spec" class="stat-card-value">0대</div>
</div>
<!-- 3. 오버 스펙 -->
<div id="card-over-spec" style="background: #ffffff; padding: 1.5rem; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; position: relative; overflow: hidden; cursor: pointer; transition: background-color 0.15s ease;">
<div style="display: flex; align-items: center; z-index: 1; border-left: 4px solid #F59E0B; padding-left: 8px; height: 1.4rem;">
<span style="font-size: 1.1rem; font-weight: 850; color: #1E293B; letter-spacing: -0.3px;">오버 스펙</span>
<div id="card-over-spec" class="stat-card">
<div style="display: flex; align-items: center; z-index: 1; height: 1.4rem;">
<span class="stat-card-label">오버 스펙</span>
</div>
<div id="metric-over-spec" style="font-size: 2.1rem; font-weight: 900; color: #F59E0B; line-height: 1.1; z-index: 1; margin-right: 2rem; margin-top: 1.8rem;">0대</div>
<div id="metric-over-spec" class="stat-card-value">0대</div>
</div>
<!-- 4. 윈도우 11 불가 PC -->
<div id="card-win11-incompatible" style="background: #ffffff; padding: 1.5rem; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; position: relative; overflow: hidden; cursor: pointer; transition: background-color 0.15s ease;">
<div style="display: flex; align-items: center; z-index: 1; border-left: 4px solid #7928ca; padding-left: 8px; height: 1.4rem;">
<span style="font-size: 1.1rem; font-weight: 850; color: #1E293B; letter-spacing: -0.3px;">윈도우 11 불가</span>
<div id="card-win11-incompatible" class="stat-card">
<div style="display: flex; align-items: center; z-index: 1; height: 1.4rem;">
<span class="stat-card-label">윈도우 11 불가</span>
</div>
<div id="metric-win11-incompatible" style="font-size: 2.1rem; font-weight: 900; color: #7928ca; line-height: 1.1; z-index: 1; margin-right: 2rem; margin-top: 1.8rem;">0대</div>
<div id="metric-win11-incompatible" class="stat-card-value">0대</div>
</div>
</div>
@@ -137,10 +131,10 @@ export function renderHwDashboard(container: HTMLElement) {
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 0; height: 100%;">
<!-- 1열: 조직별 사용 비율 도넛 영역 -->
<div style="background: #ffffff; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.3rem; min-height: 0; height: 100%;">
<div style="background: var(--canvas); padding: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.3rem; min-height: 0; height: 100%;">
<!-- 서브 제목 -->
<div style="width: 100%; border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.15rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0; height: 1.4rem;">
<span style="font-size: 1.1rem; font-weight: 850; color: #1E293B;">조직별 사용 비율</span>
<div style="width: 100%; margin-bottom: 0.15rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0; height: 1.4rem;">
<span class="dashboard-subtitle">조직별 사용 비율</span>
</div>
<!-- 도넛 그래프 -->
@@ -149,7 +143,7 @@ export function renderHwDashboard(container: HTMLElement) {
<canvas id="chart-overall-donut"></canvas>
</div>
<!-- 커스텀 범례 -->
<div style="display: flex; flex-wrap: wrap; gap: 0.15rem 0.35rem; justify-content: center; align-items: center; margin-top: 6px; font-size: 0.8rem; font-weight: 800; color: #64748B; width: 100%;">
<div style="display: flex; flex-wrap: wrap; gap: 0.15rem 0.35rem; justify-content: center; align-items: center; margin-top: 6px; font-size: var(--fs-xs); font-weight: 800; color: var(--text-muted); width: 100%;">
<div style="display: flex; align-items: center; gap: 3px;">
<span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #D02121;"></span>
<span>한맥</span>
@@ -183,16 +177,16 @@ export function renderHwDashboard(container: HTMLElement) {
</div>
<!-- 2열: PC 노후도 영역 (표 잘림 방지를 위해 아래 패딩을 줄이고 overflow auto 설정) -->
<div style="background: #ffffff; padding: 1.5rem 1.5rem 0.5rem 1.5rem; display: flex; flex-direction: column; min-height: 0; height: 100%;">
<div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.35rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0; height: 1.4rem;">
<span style="font-size: 1.1rem; font-weight: 850; color: #1E293B; white-space: nowrap;">PC 노후도</span>
<div style="background: var(--canvas); padding: 1.5rem 1.5rem 0.5rem 1.5rem; display: flex; flex-direction: column; min-height: 0; height: 100%;">
<div style="margin-bottom: 0.35rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0; height: 1.4rem;">
<span class="dashboard-subtitle" style="white-space: nowrap;">PC 노후도</span>
</div>
<div style="flex: 1; overflow-y: auto; min-height: 0; padding-right: 0.1rem;">
<table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 1.05rem;">
<thead style="position: sticky; top: 0; background: white; z-index: 5;">
<tr style="border-bottom: 2px solid #1E5149; color: #475569; font-weight: 850;">
<th style="padding: 6px 8px; width: 70%; font-size: 1.02rem; background: white;">구분 (연한)</th>
<th style="padding: 6px 8px; text-align: center; width: 30%; font-size: 1.02rem; background: white;">보유</th>
<table style="width: 100%; border-collapse: collapse; text-align: left; font-size: var(--fs-base);">
<thead style="position: sticky; top: 0; background: var(--canvas); z-index: 5;">
<tr class="table-header-row" style="background: var(--canvas);">
<th style="padding: 6px 8px; width: 70%; font-size: var(--fs-base); background: var(--canvas);">구분 (연한)</th>
<th style="padding: 6px 8px; text-align: center; width: 30%; font-size: var(--fs-base); background: var(--canvas);">보유</th>
</tr>
</thead>
<tbody id="pc-aging-tbody">
@@ -207,24 +201,24 @@ export function renderHwDashboard(container: HTMLElement) {
</div>
<!-- 하단 섹션 (등급별 자산 종합 현황 및 사양 적정성 분석 영역 - 높이 비율 65%로 확대) -->
<div style="background: #ffffff; padding: 1.5rem 0; display: flex; flex-direction: column; height: 65%; min-height: 0;">
<div style="background: var(--canvas); padding: 1.5rem 0; display: flex; flex-direction: column; height: 65%; min-height: 0;">
<div style="display: flex; flex-direction: column; gap: 0.6rem; justify-content: flex-start; height: 100%;">
<!-- 메인 제목 -->
<div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.1rem; display: flex; align-items: center; line-height: 1; height: 1.6rem; flex-shrink: 0;">
<span style="font-size: 1.25rem; font-weight: 850; color: #1E293B;">등급별 자산 종합현황</span>
<div style="margin-bottom: 0.1rem; display: flex; align-items: center; line-height: 1; height: 1.6rem; flex-shrink: 0;">
<span class="dashboard-subtitle">등급별 자산 종합현황</span>
</div>
<!-- 종합 매트릭스 테이블 -->
<div style="width: 100%; overflow-y: hidden; flex: 1; border-radius: 0;">
<table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 1.05rem;">
<thead style="position: sticky; top: 0; background: #F8FAFC; z-index: 10;">
<tr style="border-bottom: 2px solid #E2E8F0; color: #475569; font-weight: 850;">
<th style="padding: 16px 10px; width: 18%; font-size: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">구분 (등급)</th>
<th style="padding: 16px 10px; text-align: center; width: 8%; font-size: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">보유량</th>
<th style="padding: 16px 10px; text-align: center; width: 8%; font-size: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">운영중</th>
<th style="padding: 16px 10px; text-align: center; width: 8%; font-size: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">재고</th>
<th style="padding: 16px 10px; text-align: center; width: 8%; color: #EF4444; font-size: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">부족분</th>
<th style="padding: 16px 10px; text-align: center; width: 50%; font-size: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">사양 적정성</th>
<table style="width: 100%; border-collapse: collapse; text-align: left; font-size: var(--fs-base);">
<thead style="position: sticky; top: 0; background: var(--canvas-soft); z-index: 10;">
<tr class="table-header-row" style="background: var(--canvas-soft);">
<th style="padding: 16px 10px; width: 18%; font-size: var(--fs-base); background: var(--canvas-soft); border-bottom: 2px solid var(--border-color);">구분 (등급)</th>
<th style="padding: 16px 10px; text-align: center; width: 8%; font-size: var(--fs-base); background: var(--canvas-soft); border-bottom: 2px solid var(--border-color);">보유량</th>
<th style="padding: 16px 10px; text-align: center; width: 8%; font-size: var(--fs-base); background: var(--canvas-soft); border-bottom: 2px solid var(--border-color);">운영중</th>
<th style="padding: 16px 10px; text-align: center; width: 8%; font-size: var(--fs-base); background: var(--canvas-soft); border-bottom: 2px solid var(--border-color);">재고</th>
<th style="padding: 16px 10px; text-align: center; width: 8%; color: var(--danger); font-size: var(--fs-base); background: var(--canvas-soft); border-bottom: 2px solid var(--border-color);">부족분</th>
<th style="padding: 16px 10px; text-align: center; width: 50%; font-size: var(--fs-base); background: var(--canvas-soft); border-bottom: 2px solid var(--border-color);">사양 적정성</th>
</tr>
</thead>
<tbody id="pc-grade-matrix-tbody">
@@ -237,10 +231,33 @@ export function renderHwDashboard(container: HTMLElement) {
</div>
<style>
.dept-filter-btn { padding: 6px 14px; font-size: 0.85rem; font-weight: 700; border-radius: 6px; border: none; background: transparent; color: var(--mute); cursor: pointer; transition: all 0.2s; }
.dept-filter-btn { padding: 6px 14px; font-size: var(--fs-sm); font-weight: 700; border-radius: 6px; border: none; background: transparent; color: var(--mute); cursor: pointer; transition: all 0.2s; }
.dept-filter-btn.active { background: var(--primary); color: var(--on-primary); }
.aging-row:hover { background: var(--canvas-soft); }
.donut-text-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -46%); font-size: 1.25rem; font-weight: 900; color: var(--primary); pointer-events: none; white-space: nowrap; }
.donut-text-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -46%); font-size: var(--fs-md); font-weight: 700; color: var(--primary); pointer-events: none; white-space: nowrap; }
.stat-card { background: var(--canvas); padding: 1.5rem; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; position: relative; overflow: hidden; transition: background-color 0.15s ease; cursor: pointer; }
#metric-card-total { cursor: default; }
#metric-card-total:hover { background-color: var(--canvas-soft); }
#card-under-spec:hover { background-color: #FEF2F2; }
#card-over-spec:hover { background-color: #FFFBEB; }
#card-win11-incompatible:hover { background-color: #F5F3FF; }
.stat-card-label { font-size: var(--fs-md); font-weight: 600; color: var(--text-main); letter-spacing: -0.3px; }
.stat-card-value { font-size: var(--fs-xl); font-weight: 700; line-height: 1.1; z-index: 1; margin-right: 2rem; margin-top: 1.8rem; }
#metric-total-pcs { color: var(--primary); }
#metric-under-spec { color: var(--danger); }
#metric-over-spec { color: var(--color-orange); }
#metric-win11-incompatible { color: var(--color-violet); }
.dashboard-subtitle { font-size: var(--fs-md); font-weight: 600; color: var(--text-main); }
.table-header-row { border-bottom: 2px solid var(--border-color); color: var(--text-muted); font-weight: 600; }
.matrix-cell { transition: background-color 0.2s; cursor: pointer; }
.matrix-cell:hover { background-color: var(--canvas-soft-2); }
.aging-row { transition: background-color 0.2s; cursor: pointer; }
.aging-row:hover { background-color: var(--canvas-soft); }
.mini-modal-row { transition: background-color 0.2s; cursor: pointer; }
.mini-modal-row:hover { background-color: var(--canvas-soft); }
#btn-close-mini-modal { transition: background-color 0.2s, color 0.2s; }
#btn-close-mini-modal:hover { background-color: var(--canvas-soft); color: var(--primary); }
#btn-confirm-mini-modal { transition: opacity 0.2s; }
#btn-confirm-mini-modal:hover { opacity: 0.9; }
</style>
`;
@@ -259,7 +276,7 @@ export function renderHwDashboard(container: HTMLElement) {
const button = b as HTMLButtonElement;
button.classList.remove('active');
button.style.background = 'transparent';
button.style.color = '#475569';
button.style.color = 'var(--text-muted)';
});
btn.classList.add('active');
@@ -483,8 +500,7 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
const data = matrix[gradeKey];
const totalRate = filtered.length > 0 ? Math.round((data.total / filtered.length) * 100) : 0;
const cellStyle = `padding: 22px 8px; text-align: center; font-weight: 700; cursor: pointer; transition: background 0.2s; font-size: 1.05rem;`;
const hoverEvents = `onmouseover="this.style.background='#F1F5F9'" onmouseout="this.style.background='none'"`;
const cellStyle = `padding: 22px 8px; text-align: center; font-weight: 700; font-size: var(--fs-base);`;
// 사양 적정성 분석 데이터 계산 (운영중인 자산만)
const { win11, under, normal, over } = getSpecStatusCounts(data.activePcs);
@@ -503,31 +519,31 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
barGraphHtml = `
<div style="position: relative; display: inline-block; width: 100%; max-width: 100%; text-align: left;" class="spec-bar-container">
<!-- 게이지 바 (보유량 비례) -->
<div class="spec-bar-wrapper" style="display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: #EEF2F6; width: ${barWidthPct}%; min-width: 15px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.06); cursor: pointer;">
${win11 > 0 ? `<div style="width: ${win11Pct}%; background: #7928ca; border-right: 2px solid #ffffff; cursor: pointer; transition: opacity 0.15s;" title="윈도우 11 불가: ${win11}대" class="spec-segment-btn" data-grade="${gradeKey}" data-spec-status="윈도우 11 불가" onmouseover="showSpecTooltip(event, this, 'win11', ${win11}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); this.style.opacity='1';"></div>` : ''}
${under > 0 ? `<div style="width: ${underPct}%; background: #EF4444; border-right: 2px solid #ffffff; cursor: pointer; transition: opacity 0.15s;" title="사양 부족: ${under}대" class="spec-segment-btn" data-grade="${gradeKey}" data-spec-status="사양 부족" onmouseover="showSpecTooltip(event, this, 'under', ${under}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); this.style.opacity='1';"></div>` : ''}
${normal > 0 ? `<div style="width: ${normalPct}%; background: #1E5149; border-right: 2px solid #ffffff; cursor: pointer; transition: opacity 0.15s;" title="적정 사양: ${normal}대" class="spec-segment-btn" data-grade="${gradeKey}" data-spec-status="적정" onmouseover="showSpecTooltip(event, this, 'normal', ${normal}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); this.style.opacity='1';"></div>` : ''}
${over > 0 ? `<div style="width: ${overPct}%; background: #F59E0B; cursor: pointer; transition: opacity 0.15s;" title="오버 스펙: ${over}대" class="spec-segment-btn" data-grade="${gradeKey}" data-spec-status="오버스펙" onmouseover="showSpecTooltip(event, this, 'over', ${over}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); this.style.opacity='1';"></div>` : ''}
<div class="spec-bar-wrapper" style="display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: var(--canvas-soft-2); width: ${barWidthPct}%; min-width: 15px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.06); cursor: pointer;">
${win11 > 0 ? `<div style="width: ${win11Pct}%; background: var(--color-violet); border-right: 2px solid var(--canvas); cursor: pointer; transition: opacity 0.15s;" title="윈도우 11 불가: ${win11}대" class="spec-segment-btn" data-grade="${gradeKey}" data-spec-status="윈도우 11 불가" onmouseover="showSpecTooltip(event, this, 'win11', ${win11}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); this.style.opacity='1';"></div>` : ''}
${under > 0 ? `<div style="width: ${underPct}%; background: var(--danger); border-right: 2px solid var(--canvas); cursor: pointer; transition: opacity 0.15s;" title="사양 부족: ${under}대" class="spec-segment-btn" data-grade="${gradeKey}" data-spec-status="사양 부족" onmouseover="showSpecTooltip(event, this, 'under', ${under}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); this.style.opacity='1';"></div>` : ''}
${normal > 0 ? `<div style="width: ${normalPct}%; background: var(--primary); border-right: 2px solid var(--canvas); cursor: pointer; transition: opacity 0.15s;" title="적정 사양: ${normal}대" class="spec-segment-btn" data-grade="${gradeKey}" data-spec-status="적정" onmouseover="showSpecTooltip(event, this, 'normal', ${normal}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); this.style.opacity='1';"></div>` : ''}
${over > 0 ? `<div style="width: ${overPct}%; background: var(--color-orange); cursor: pointer; transition: opacity 0.15s;" title="오버 스펙: ${over}대" class="spec-segment-btn" data-grade="${gradeKey}" data-spec-status="오버스펙" onmouseover="showSpecTooltip(event, this, 'over', ${over}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); this.style.opacity='1';"></div>` : ''}
</div>
<!-- 마우스 오버 시 나타날 커스텀 말풍선 툴팁 -->
<div class="spec-tooltip" style="position: fixed; transform: translate(-50%, -100%); margin-top: -10px; background: #1E293B; color: #ffffff; padding: 6px 10px; border-radius: 6px; font-size: 11px; white-space: nowrap; box-shadow: 0 4px 6px rgba(0,0,0,0.15); opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 9999; display: flex; gap: 8px; align-items: center;">
<div class="spec-tooltip" style="position: fixed; transform: translate(-50%, -100%); margin-top: -10px; background: var(--primary); color: var(--on-primary); padding: 6px 10px; border-radius: 6px; font-size: 11px; white-space: nowrap; box-shadow: 0 4px 6px rgba(0,0,0,0.15); opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 9999; display: flex; gap: 8px; align-items: center;">
<span class="tooltip-text"></span>
<div style="position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1E293B;"></div>
<div style="position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--primary);"></div>
</div>
</div>
`;
} else {
barGraphHtml = `<span style="font-size: 0.88rem; color: #94A3B8; font-weight: 550;">운영중 자산 없음</span>`;
barGraphHtml = `<span style="font-size: var(--fs-xs); color: var(--mute); font-weight: 550;">운영중 자산 없음</span>`;
}
return `
<tr style="border-bottom: 1px solid #E2E8F0;">
<td style="padding: 22px 10px; font-weight: 800; color: ${color}; font-size: 1.05rem;">${label}</td>
<td class="matrix-cell" data-grade="${gradeKey}" data-type="total" style="${cellStyle}" ${hoverEvents}>${data.total}대 <span style="font-size:0.88rem; color:#64748B; font-weight:500;">(${totalRate}%)</span></td>
<td class="matrix-cell" data-grade="${gradeKey}" data-type="active" style="${cellStyle}" ${hoverEvents}>${data.active}대</td>
<td class="matrix-cell" data-grade="${gradeKey}" data-type="stock" style="${cellStyle}" ${hoverEvents}>${data.stock}대</td>
<td class="matrix-cell" data-grade="${gradeKey}" data-type="under" style="${cellStyle} color: #EF4444;" ${hoverEvents}>${shortage}대</td>
<td style="padding: 22px 8px; text-align: center; font-weight: 700; font-size: 1.05rem; vertical-align: middle;">
<tr style="border-bottom: 1px solid var(--border-color);">
<td style="padding: 22px 10px; font-weight: 600; color: ${color}; font-size: var(--fs-base);">${label}</td>
<td class="matrix-cell" data-grade="${gradeKey}" data-type="total" style="${cellStyle}">${data.total}대 <span style="font-size:var(--fs-xs); color:var(--text-muted); font-weight:500;">(${totalRate}%)</span></td>
<td class="matrix-cell" data-grade="${gradeKey}" data-type="active" style="${cellStyle}">${data.active}대</td>
<td class="matrix-cell" data-grade="${gradeKey}" data-type="stock" style="${cellStyle}">${data.stock}대</td>
<td class="matrix-cell" data-grade="${gradeKey}" data-type="under" style="${cellStyle} color: var(--danger);">${shortage}대</td>
<td style="padding: 22px 8px; text-align: center; font-weight: 700; font-size: var(--fs-base); vertical-align: middle;">
${barGraphHtml}
</td>
</tr>
@@ -561,31 +577,28 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
totBarGraphHtml = `
<div style="position: relative; display: inline-block; width: 100%; max-width: 100%; text-align: left;" class="spec-bar-container">
<!-- 게이지 바 (합계는 100% 너비) -->
<div class="spec-bar-wrapper" style="display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: #EEF2F6; width: 100%; box-shadow: inset 0 1px 2px rgba(0,0,0,0.06); cursor: pointer;">
${totUnder > 0 ? `<div style="width: ${totUnderPct}%; background: #EF4444; border-right: 2px solid #ffffff; cursor: pointer; transition: opacity 0.15s;" title="사양 부족: ${totUnder}대" class="spec-segment-btn" data-grade="all" data-spec-status="사양 부족" onmouseover="showSpecTooltip(event, this, 'under', ${totUnder}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); this.style.opacity='1';"></div>` : ''}
${totNormal > 0 ? `<div style="width: ${totNormalPct}%; background: #1E5149; border-right: 2px solid #ffffff; cursor: pointer; transition: opacity 0.15s;" title="적정 사양: ${totNormal}대" class="spec-segment-btn" data-grade="all" data-spec-status="적정" onmouseover="showSpecTooltip(event, this, 'normal', ${totNormal}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); this.style.opacity='1';"></div>` : ''}
${totOver > 0 ? `<div style="width: ${totOverPct}%; background: #F59E0B; cursor: pointer; transition: opacity 0.15s;" title="오버 스펙: ${totOver}대" class="spec-segment-btn" data-grade="all" data-spec-status="오버스펙" onmouseover="showSpecTooltip(event, this, 'over', ${totOver}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); this.style.opacity='1';"></div>` : ''}
<div class="spec-bar-wrapper" style="display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: var(--canvas-soft-2); width: 100%; box-shadow: inset 0 1px 2px rgba(0,0,0,0.06); cursor: pointer;">
${totUnder > 0 ? `<div style="width: ${totUnderPct}%; background: var(--danger); border-right: 2px solid var(--canvas); cursor: pointer; transition: opacity 0.15s;" title="사양 부족: ${totUnder}대" class="spec-segment-btn" data-grade="all" data-spec-status="사양 부족" onmouseover="showSpecTooltip(event, this, 'under', ${totUnder}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); this.style.opacity='1';"></div>` : ''}
${totNormal > 0 ? `<div style="width: ${totNormalPct}%; background: var(--primary); border-right: 2px solid var(--canvas); cursor: pointer; transition: opacity 0.15s;" title="적정 사양: ${totNormal}대" class="spec-segment-btn" data-grade="all" data-spec-status="적정" onmouseover="showSpecTooltip(event, this, 'normal', ${totNormal}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); this.style.opacity='1';"></div>` : ''}
${totOver > 0 ? `<div style="width: ${totOverPct}%; background: var(--color-orange); cursor: pointer; transition: opacity 0.15s;" title="오버 스펙: ${totOver}대" class="spec-segment-btn" data-grade="all" data-spec-status="오버스펙" onmouseover="showSpecTooltip(event, this, 'over', ${totOver}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); this.style.opacity='1';"></div>` : ''}
</div>
<!-- 마우스 오버 시 나타날 커스텀 말풍선 툴팁 -->
<div class="spec-tooltip" style="position: fixed; transform: translate(-50%, -100%); margin-top: -10px; background: #1E293B; color: #ffffff; padding: 6px 10px; border-radius: 6px; font-size: 11px; white-space: nowrap; box-shadow: 0 4px 6px rgba(0,0,0,0.15); opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 9999; display: flex; gap: 8px; align-items: center;">
<div class="spec-tooltip" style="position: fixed; transform: translate(-50%, -100%); margin-top: -10px; background: var(--primary); color: var(--on-primary); padding: 6px 10px; border-radius: 6px; font-size: 11px; white-space: nowrap; box-shadow: 0 4px 6px rgba(0,0,0,0.15); opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 9999; display: flex; gap: 8px; align-items: center;">
<span class="tooltip-text"></span>
<div style="position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1E293B;"></div>
<div style="position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--primary);"></div>
</div>
</div>
`;
} else {
totBarGraphHtml = `<span style="font-size: 0.88rem; color: #94A3B8; font-weight: 550;">운영중 자산 없음</span>`;
totBarGraphHtml = `<span style="font-size: var(--fs-xs); color: var(--text-sub); font-weight: 500;">운영중 자산 없음</span>`;
}
const cellStyleHeader = `padding: 12px 10px; text-align: center; font-weight: 800; cursor: pointer; transition: background 0.2s; background: #F8FAFC; font-size: 1.05rem;`;
const hoverEventsHeader = `onmouseover="this.style.background='#EEF2F6'" onmouseout="this.style.background='#F8FAFC'"`;
matrixTbody.innerHTML = `
${renderMatrixRow('premium', '최상급 PC (85점 이상)', '#11302B', premiumShortage)}
${renderMatrixRow('high', '상급 PC (70점 ~ 85점)', '#1E8E7C', highShortage)}
${renderMatrixRow('normal', '중급 PC (40점 ~ 70점)', '#10B981', normalShortage)}
${renderMatrixRow('entry', '보급 PC (20점 ~ 40점)', '#F59E0B', entryShortage)}
${renderMatrixRow('replace', '교체 대상 PC (20점 미만)', '#EF4444', replaceShortage)}
${renderMatrixRow('entry', '보급 PC (20점 ~ 40점)', 'var(--color-orange)', entryShortage)}
${renderMatrixRow('replace', '교체 대상 PC (20점 미만)', 'var(--danger)', replaceShortage)}
`;
// 셀별 동적 클릭 리스너 바인딩
@@ -709,9 +722,9 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
const renderAgingRow = (label: string, list: any[], ageGroupKey: string) => {
return `
<tr style="border-bottom:1px solid #F1F5F9; cursor:pointer; transition: background 0.2s;" class="aging-row" data-group="${ageGroupKey}" onmouseover="this.style.background='#F8FAFC'" onmouseout="this.style.background='none'">
<td style="padding:5px 8px; font-weight:700; color:#334155; font-size: 1.05rem;">${label}</td>
<td style="padding:5px 8px; text-align:center; font-weight:700; color:#334155; font-size: 1.05rem;">${list.length}대</td>
<tr style="border-bottom:1px solid var(--border-color);" class="aging-row" data-group="${ageGroupKey}">
<td style="padding:5px 8px; font-weight:700; color:var(--text-main); font-size: var(--fs-base);">${label}</td>
<td style="padding:5px 8px; text-align:center; font-weight:700; color:var(--text-main); font-size: var(--fs-base);">${list.length}대</td>
</tr>
`;
};
@@ -738,14 +751,9 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
});
// 8. 요약 지표 카드 클릭 리스너 설정
const bindCardClick = (id: string, gradeTitle: string, filterFn: (p: any) => boolean, hoverBgColor: string) => {
const bindCardClick = (id: string, gradeTitle: string, filterFn: (p: any) => boolean) => {
const card = document.getElementById(id)!;
if (!card) return;
card.style.cursor = 'pointer';
card.style.transition = 'background-color 0.15s ease';
card.onmouseover = () => { card.style.backgroundColor = hoverBgColor; };
card.onmouseout = () => { card.style.backgroundColor = '#ffffff'; };
card.onclick = () => {
const pcsInGrade = filtered.filter(filterFn);
@@ -754,9 +762,9 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
};
// 사양 부족 / 오버 스펙 / 윈도우 11 불가 클릭 리스너 설정
bindCardClick('card-under-spec', '사양 부족 대상', p => p._spec_status === '사양 부족', '#FEF2F2');
bindCardClick('card-over-spec', '오버 스펙 대상', p => p._spec_status === '오버스펙', '#FFFBEB');
bindCardClick('card-win11-incompatible', '윈도우 11 업그레이드 불가 PC', p => isWindows11Incompatible(p.cpu, p.ram), '#F5F3FF');
bindCardClick('card-under-spec', '사양 부족 대상', p => p._spec_status === '사양 부족');
bindCardClick('card-over-spec', '오버 스펙 대상', p => p._spec_status === '오버스펙');
bindCardClick('card-win11-incompatible', '윈도우 11 업그레이드 불가 PC', p => isWindows11Incompatible(p.cpu, p.ram));
// 9. 조직별 사용 비율 집계 (전체 개인용 PC 기준)
const deptCounts: Record<string, number> = {
@@ -822,36 +830,35 @@ function showMiniListModal(title: string, list: any[]) {
display: flex;
align-items: center;
justify-content: center;
font-family: 'Pretendard', sans-serif;
color: #1E293B;
color: var(--text-main);
`;
modal.innerHTML = `
<div style="background: white; border-radius: 12px; width: 800px; max-width: 95%; max-height: 80%; display: flex; flex-direction: column; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); overflow: hidden; border: 1px solid #E2E8F0; animation: modalFadeIn 0.2s ease-out; color: #1E293B;">
<div style="padding: 1.25rem 1.75rem; border-bottom: 1px solid #F1F5F9; display: flex; justify-content: space-between; align-items: center; background: #F8FAFC;">
<h3 style="margin: 0; font-size: 1.26rem; font-weight: 850; color: #1E5149; display: flex; align-items: center; gap: 0.5rem;">
<span style="display:inline-block; width:8px; height:8px; border-radius:50%; background:#1E5149;"></span>
<div style="background: var(--canvas); border-radius: 12px; width: 800px; max-width: 95%; max-height: 80%; display: flex; flex-direction: column; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); overflow: hidden; border: 1px solid var(--border-color); animation: modalFadeIn 0.2s ease-out; color: var(--text-main);">
<div style="padding: 1.25rem 1.75rem; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; background: var(--canvas-soft);">
<h3 style="margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 0.5rem;">
<span style="display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--primary);"></span>
${title} 자산 목록
<span style="font-size: 0.96rem; font-weight: 700; color: white; background: #1E5149; padding: 2px 8px; border-radius: 9999px; margin-left: 0.25rem;">${list.length}대</span>
<span style="font-size: var(--fs-xs); font-weight: 700; color: white; background: var(--primary); padding: 2px 8px; border-radius: 9999px; margin-left: 0.25rem;">${list.length}대</span>
</h3>
<button id="btn-close-mini-modal" style="background: none; border: none; font-size: 1.25rem; color: #94A3B8; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; transition: background 0.2s;" onmouseover="this.style.background='#EEF2F6'; this.style.color='#1E5149';" onmouseout="this.style.background='none'; this.style.color='#94A3B8';">
<button id="btn-close-mini-modal" style="background: none; border: none; font-size: 1.25rem; color: var(--text-sub); cursor: pointer; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px;">
&times;
</button>
</div>
<div style="padding: 0 1.75rem 1rem 1.75rem; overflow-y: auto; flex: 1;">
<table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 1.01rem; table-layout: fixed;">
<thead style="position: sticky; top: 0; background: white; z-index: 10;">
<tr style="border-bottom: 2px solid #E2E8F0; color: #64748B; font-weight: 800; background: white;">
<th style="padding: 10px 4px; width: 14%; background: white;">사용자</th>
<th style="padding: 10px 4px; width: 25%; background: white;">조직 (직무)</th>
<th style="padding: 10px 4px; width: 28%; background: white;">주요 사양</th>
<th style="padding: 10px 4px; width: 18%; text-align: center; background: white;">등급 (점수)</th>
<th style="padding: 10px 4px; text-align: center; background: white;">자산코드</th>
<table style="width: 100%; border-collapse: collapse; text-align: left; font-size: var(--fs-base); table-layout: fixed;">
<thead style="position: sticky; top: 0; background: var(--canvas); z-index: 10;">
<tr class="table-header-row" style="background: var(--canvas);">
<th style="padding: 10px 4px; width: 14%; background: var(--canvas);">사용자</th>
<th style="padding: 10px 4px; width: 25%; background: var(--canvas);">조직 (직무)</th>
<th style="padding: 10px 4px; width: 28%; background: var(--canvas);">주요 사양</th>
<th style="padding: 10px 4px; width: 18%; text-align: center; background: var(--canvas);">등급 (점수)</th>
<th style="padding: 10px 4px; text-align: center; background: var(--canvas);">자산코드</th>
</tr>
</thead>
<tbody>
${list.length === 0
? `<tr><td colspan="5" style="text-align:center; padding:3rem; color:#94A3B8; font-weight:500;">해당 등급의 자산이 없습니다.</td></tr>`
? `<tr><td colspan="5" style="text-align:center; padding:3rem; color:var(--mute); font-weight:500;">해당 등급의 자산이 없습니다.</td></tr>`
: list.map(pc => {
const spec = `${pc.cpu || ''} / ${pc.ram || ''} / ${pc.gpu || '-'}`;
const user = pc.user_current || '(재고)';
@@ -862,12 +869,12 @@ function showMiniListModal(title: string, list: any[]) {
const scoreHTML = `<strong style="color: ${grade.color}; font-size: 13px; margin-left: 4px;">${score}점</strong>`;
return `
<tr style="border-bottom: 1px solid #F1F5F9; cursor: pointer; transition: background 0.2s;" class="mini-modal-row" data-id="${pc.id}" onmouseover="this.style.background='#F8FAFC'" onmouseout="this.style.background='none'">
<td style="padding: 12px 4px; font-weight: 700; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${user}">${user}</td>
<td style="padding: 12px 4px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${pc.current_dept || '-'} (${pc._resolved_position || pc.user_position || '-'})">${pc.current_dept || '-'} (${pc._resolved_position || pc.user_position || '-'})</td>
<td style="padding: 12px 4px; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${spec}">${spec}</td>
<tr style="border-bottom: 1px solid var(--border-color);" class="mini-modal-row" data-id="${pc.id}">
<td style="padding: 12px 4px; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${user}">${user}</td>
<td style="padding: 12px 4px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${pc.current_dept || '-'} (${pc._resolved_position || pc.user_position || '-'})">${pc.current_dept || '-'} (${pc._resolved_position || pc.user_position || '-'})</td>
<td style="padding: 12px 4px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${spec}">${spec}</td>
<td style="padding: 12px 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${badgeHTML}${scoreHTML}</td>
<td style="padding: 12px 4px; font-family: monospace; color: #475569; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${pc.asset_code || '-'}">${pc.asset_code || '-'}</td>
<td style="padding: 12px 4px; font-family: monospace; color: var(--text-muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${pc.asset_code || '-'}">${pc.asset_code || '-'}</td>
</tr>
`;
}).join('')
@@ -875,8 +882,8 @@ function showMiniListModal(title: string, list: any[]) {
</tbody>
</table>
</div>
<div style="padding: 1rem 1.75rem; border-top: 1px solid #F1F5F9; display: flex; justify-content: flex-end; background: #F8FAFC;">
<button id="btn-confirm-mini-modal" style="padding: 6px 20px; font-size: 1.01rem; font-weight: 700; background: #1E5149; color: white; border: none; border-radius: 6px; cursor: pointer; transition: opacity 0.2s;" onmouseover="this.style.opacity='0.9'" onmouseout="this.style.opacity='1'">
<div style="padding: 1rem 1.75rem; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; background: var(--canvas-soft);">
<button id="btn-confirm-mini-modal" style="padding: 6px 20px; font-size: var(--fs-base); font-weight: 700; background: var(--primary); color: white; border: none; border-radius: 6px; cursor: pointer;">
확인
</button>
</div>
@@ -970,10 +977,9 @@ function renderDonutChart(deptData: { label: string; count: number; color: strin
top: 50%;
left: 50%;
transform: translate(-50%, -46%);
font-size: 1.65rem;
font-size: var(--fs-lg);
font-weight: 900;
color: #1E5149;
font-family: 'Pretendard', sans-serif;
color: var(--primary);
pointer-events: none;
white-space: nowrap;
`;

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

@@ -177,11 +177,7 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
}
let currentFilters: any = (state as any).listFilters[filterKey];
// 서버 탭이 아닐 경우 '자산 현황' 뷰 진입 방지 및 강제 'asset' 모드 (PC 탭은 자산 현황 숨김)
const isServer = config.title === '서버';
if (!isServer) {
(state as any).currentViewMode = 'asset';
}
// 1. 컨텐츠 영역 생성 (먼저 생성하여 참조 가능하게 함)
const contentWrapper = document.createElement('div');
@@ -817,7 +813,8 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
const switchView = () => {
contentWrapper.innerHTML = '';
if ((state as any).currentViewMode === 'asset') {
const isAssetMode = !isServer || state.viewMode === 'list';
if (isAssetMode) {
filterBar.style.display = 'flex'; contentWrapper.style.overflowY = 'hidden';
contentWrapper.appendChild(tableWrapper); updateTable();
} else {
@@ -834,7 +831,7 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
extraHTML: isServer ? `
<div class="search-item">
<label class="list-view-toggle-label">
<input type="checkbox" id="chk-list-view" ${(state as any).currentViewMode === 'asset' ? 'checked' : ''} />
<input type="checkbox" id="chk-list-view" ${state.viewMode === 'list' ? 'checked' : ''} />
목록보기
</label>
</div>
@@ -878,13 +875,11 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
const chkBox = filterBar.querySelector('#chk-list-view') as HTMLInputElement;
const handleToggle = () => {
const isListMode = (state as any).currentViewMode === 'asset';
const isListMode = chkBox.checked;
if (isListMode) {
state.viewMode = 'location';
(state as any).currentViewMode = 'location';
} else {
state.viewMode = 'list';
(state as any).currentViewMode = 'asset';
} else {
state.viewMode = 'location';
}
window.dispatchEvent(new Event('refresh-view'));
};

4
src/views/LocationView.ts
View File

@@ -163,15 +163,13 @@ export async function renderLocationView(container: HTMLElement) {
const chkBox = container.querySelector('#chk-list-view-loc') as HTMLInputElement;
if (chkBox) {
chkBox.checked = (state as any).currentViewMode === 'asset';
chkBox.checked = state.viewMode === 'list';
const handleToggle = () => {
const isListMode = chkBox.checked;
if (isListMode) {
state.viewMode = 'list';
(state as any).currentViewMode = 'asset';
} else {
state.viewMode = 'location';
(state as any).currentViewMode = 'location';
}
window.dispatchEvent(new Event('refresh-view'));
};

4
src/views/MapEditor.ts
View File

@@ -250,8 +250,8 @@ export class MapEditor {
<span class="box-index">#${i+1}</span>
<button class="btn-del" onclick="removeBox(${i})">×</button>
</div>
<div class="box-inputs" style="margin-bottom: 8px;">
<select data-index="${i}" data-prop="asset_id" style="width: 100%; padding: 4px;">
<div class="box-inputs margin-bottom">
<select data-index="${i}" data-prop="asset_id">
${optionsHtml}
</select>
</div>

9
vite.config.ts
View File

@@ -1,4 +1,5 @@
import { defineConfig } from 'vite';
import { resolve } from 'path';
export default defineConfig({
server: {
@@ -15,4 +16,12 @@ export default defineConfig({
}
}
},
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
map_editor: resolve(__dirname, 'map_editor.html'),
}
}
}
});