Taehoon/ITAM
2
0
Fork 0
Code Issues 25 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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ITAM Map Coordinate Editor v3.0</title> <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="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> </head>
<body style="margin: 0; display: flex; height: 100vh; overflow: hidden; font-family: sans-serif;"> <body class="editor-body">
<!-- Left: File Selector --> <!-- Left: File Selector -->
<div class="file-sidebar" id="file-sidebar"> <div class="file-sidebar" id="file-sidebar">
@@ -22,7 +24,7 @@
<!-- Right: Control Panel --> <!-- Right: Control Panel -->
<div class="sidebar"> <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> <div class="current-path" id="current-path">파일을 선택하세요</div>
<p> <p>
드래그하여 구역을 정의하세요. 저장 버튼을 누르면 즉시 시스템에 반영됩니다. 드래그하여 구역을 정의하세요. 저장 버튼을 누르면 즉시 시스템에 반영됩니다.
@@ -31,8 +33,8 @@
<div class="box-list" id="box-list"></div> <div class="box-list" id="box-list"></div>
<div class="actions"> <div class="actions">
<button id="btn-clear-all" class="btn btn-outline" style="height:38px;">전체 삭제</button> <button id="btn-clear-all" class="btn btn-outline">전체 삭제</button>
<button id="btn-save-server" class="btn btn-primary" style="height:38px;">서버에 즉시 저장</button> <button id="btn-save-server" class="btn btn-primary">서버에 즉시 저장</button>
<div id="save-status"></div> <div id="save-status"></div>
</div> </div>
</div> </div>

10
src/main.ts
View File

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

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

@@ -12,8 +12,8 @@
.folder-item { .folder-item {
padding: 10px 15px; padding: 10px 15px;
background: var(--bg-light); background: var(--bg-light);
font-weight: bold; font-weight: 700;
font-size: 13px; font-size: var(--fs-base);
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
color: var(--primary-color); color: var(--primary-color);
} }
@@ -21,13 +21,13 @@
.file-item { .file-item {
padding: 8px 25px; padding: 8px 25px;
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: var(--fs-sm);
border-bottom: 1px solid var(--bg-color); border-bottom: 1px solid var(--bg-color);
transition: background 0.2s; transition: background 0.2s;
} }
.file-item:hover { background: var(--bg-light); } .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 */ /* Center: Editor Area */
.editor-container { .editor-container {
@@ -70,10 +70,10 @@
box-shadow: -5px 0 15px rgba(0,0,0,0.05); 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 h2 { margin-top: 0; color: var(--primary-color); font-size: var(--fs-lg); font-weight: 600; }
.sidebar p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 20px; } .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 { .box-list {
flex: 1; flex: 1;
@@ -87,7 +87,7 @@
.box-item { .box-item {
font-family: monospace; font-family: monospace;
font-size: 11px; font-size: var(--fs-xs);
padding: 10px 6px; padding: 10px 6px;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
display: flex; display: flex;
@@ -102,7 +102,7 @@
} }
.box-index { .box-index {
font-weight: bold; font-weight: 700;
color: var(--primary-color); color: var(--primary-color);
} }
@@ -128,7 +128,7 @@
padding: 2px 4px; padding: 2px 4px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 2px; border-radius: 2px;
font-size: 10px; font-size: var(--fs-xs);
outline: none; outline: none;
} }
@@ -137,7 +137,7 @@
} }
.box-item:hover { background: var(--white); } .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; } .actions { display: flex; flex-direction: column; gap: 8px; }
@@ -174,8 +174,8 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 10px; font-size: var(--fs-xs);
font-weight: bold; font-weight: 700;
color: var(--primary-color); color: var(--primary-color);
pointer-events: none; pointer-events: none;
white-space: nowrap; white-space: nowrap;
@@ -192,9 +192,45 @@
#save-status { #save-status {
margin-top: 8px; margin-top: 8px;
font-size: 11px; font-size: var(--fs-xs);
color: var(--success); color: var(--success);
text-align: center; text-align: center;
font-weight: bold; font-weight: 700;
height: 14px; 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 빌드 // 2. 1페이지 매거진 리포트(제목바 제거, '| 제목' 미니멀리즘 스타일) HTML 빌드
container.innerHTML = ` 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="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;"> <div>
<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"> <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"> <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 active" data-dept="">전체</button>
<button class="dept-filter-btn" 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%;"> <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0; height: 100%;">
<!-- 1. 보유 자산 수량 --> <!-- 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;" <div id="metric-card-total" class="stat-card">
onmouseover="this.style.backgroundColor='#F8FAFC';" <div style="display: flex; align-items: center; z-index: 1; height: 1.4rem;">
onmouseout="this.style.backgroundColor='#ffffff';"> <span class="stat-card-label">보유 자산 수량</span>
<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> </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> </div>
<!-- 2. 사양 부족 --> <!-- 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 id="card-under-spec" class="stat-card">
<div style="display: flex; align-items: center; z-index: 1; border-left: 4px solid #EF4444; padding-left: 8px; height: 1.4rem;"> <div style="display: flex; align-items: center; z-index: 1; height: 1.4rem;">
<span style="font-size: 1.1rem; font-weight: 850; color: #1E293B; letter-spacing: -0.3px;">사양 부족</span> <span class="stat-card-label">사양 부족</span>
</div> </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> </div>
<!-- 3. 오버 스펙 --> <!-- 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 id="card-over-spec" class="stat-card">
<div style="display: flex; align-items: center; z-index: 1; border-left: 4px solid #F59E0B; padding-left: 8px; height: 1.4rem;"> <div style="display: flex; align-items: center; z-index: 1; height: 1.4rem;">
<span style="font-size: 1.1rem; font-weight: 850; color: #1E293B; letter-spacing: -0.3px;">오버 스펙</span> <span class="stat-card-label">오버 스펙</span>
</div> </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> </div>
<!-- 4. 윈도우 11 불가 PC --> <!-- 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 id="card-win11-incompatible" class="stat-card">
<div style="display: flex; align-items: center; z-index: 1; border-left: 4px solid #7928ca; padding-left: 8px; height: 1.4rem;"> <div style="display: flex; align-items: center; z-index: 1; height: 1.4rem;">
<span style="font-size: 1.1rem; font-weight: 850; color: #1E293B; letter-spacing: -0.3px;">윈도우 11 불가</span> <span class="stat-card-label">윈도우 11 불가</span>
</div> </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>
</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%;"> <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 0; height: 100%;">
<!-- 1열: 조직별 사용 비율 도넛 영역 --> <!-- 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;"> <div style="width: 100%; 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> <span class="dashboard-subtitle">조직별 사용 비율</span>
</div> </div>
<!-- 도넛 그래프 --> <!-- 도넛 그래프 -->
@@ -149,7 +143,7 @@ export function renderHwDashboard(container: HTMLElement) {
<canvas id="chart-overall-donut"></canvas> <canvas id="chart-overall-donut"></canvas>
</div> </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;"> <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 style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #D02121;"></span>
<span>한맥</span> <span>한맥</span>
@@ -183,16 +177,16 @@ export function renderHwDashboard(container: HTMLElement) {
</div> </div>
<!-- 2열: PC 노후도 영역 (표 잘림 방지를 위해 아래 패딩을 줄이고 overflow auto 설정) --> <!-- 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="background: var(--canvas); 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;"> <div style="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> <span class="dashboard-subtitle" style="white-space: nowrap;">PC 노후도</span>
</div> </div>
<div style="flex: 1; overflow-y: auto; min-height: 0; padding-right: 0.1rem;"> <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;"> <table style="width: 100%; border-collapse: collapse; text-align: left; font-size: var(--fs-base);">
<thead style="position: sticky; top: 0; background: white; z-index: 5;"> <thead style="position: sticky; top: 0; background: var(--canvas); z-index: 5;">
<tr style="border-bottom: 2px solid #1E5149; color: #475569; font-weight: 850;"> <tr class="table-header-row" style="background: var(--canvas);">
<th style="padding: 6px 8px; width: 70%; font-size: 1.02rem; background: white;">구분 (연한)</th> <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: 1.02rem; background: white;">보유</th> <th style="padding: 6px 8px; text-align: center; width: 30%; font-size: var(--fs-base); background: var(--canvas);">보유</th>
</tr> </tr>
</thead> </thead>
<tbody id="pc-aging-tbody"> <tbody id="pc-aging-tbody">
@@ -207,24 +201,24 @@ export function renderHwDashboard(container: HTMLElement) {
</div> </div>
<!-- 하단 섹션 (등급별 자산 종합 현황 및 사양 적정성 분석 영역 - 높이 비율 65%로 확대) --> <!-- 하단 섹션 (등급별 자산 종합 현황 및 사양 적정성 분석 영역 - 높이 비율 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="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;"> <div style="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> <span class="dashboard-subtitle">등급별 자산 종합현황</span>
</div> </div>
<!-- 종합 매트릭스 테이블 --> <!-- 종합 매트릭스 테이블 -->
<div style="width: 100%; overflow-y: hidden; flex: 1; border-radius: 0;"> <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;"> <table style="width: 100%; border-collapse: collapse; text-align: left; font-size: var(--fs-base);">
<thead style="position: sticky; top: 0; background: #F8FAFC; z-index: 10;"> <thead style="position: sticky; top: 0; background: var(--canvas-soft); z-index: 10;">
<tr style="border-bottom: 2px solid #E2E8F0; color: #475569; font-weight: 850;"> <tr class="table-header-row" style="background: var(--canvas-soft);">
<th style="padding: 16px 10px; width: 18%; font-size: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">구분 (등급)</th> <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: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">보유량</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: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">운영중</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: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">재고</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: #EF4444; font-size: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">부족분</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: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">사양 적정성</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> </tr>
</thead> </thead>
<tbody id="pc-grade-matrix-tbody"> <tbody id="pc-grade-matrix-tbody">
@@ -237,10 +231,33 @@ export function renderHwDashboard(container: HTMLElement) {
</div> </div>
<style> <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); } .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: var(--fs-md); font-weight: 700; color: var(--primary); pointer-events: none; white-space: nowrap; }
.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; } .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> </style>
`; `;
@@ -259,7 +276,7 @@ export function renderHwDashboard(container: HTMLElement) {
const button = b as HTMLButtonElement; const button = b as HTMLButtonElement;
button.classList.remove('active'); button.classList.remove('active');
button.style.background = 'transparent'; button.style.background = 'transparent';
button.style.color = '#475569'; button.style.color = 'var(--text-muted)';
}); });
btn.classList.add('active'); btn.classList.add('active');
@@ -483,8 +500,7 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
const data = matrix[gradeKey]; const data = matrix[gradeKey];
const totalRate = filtered.length > 0 ? Math.round((data.total / filtered.length) * 100) : 0; 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 cellStyle = `padding: 22px 8px; text-align: center; font-weight: 700; font-size: var(--fs-base);`;
const hoverEvents = `onmouseover="this.style.background='#F1F5F9'" onmouseout="this.style.background='none'"`;
// 사양 적정성 분석 데이터 계산 (운영중인 자산만) // 사양 적정성 분석 데이터 계산 (운영중인 자산만)
const { win11, under, normal, over } = getSpecStatusCounts(data.activePcs); const { win11, under, normal, over } = getSpecStatusCounts(data.activePcs);
@@ -503,31 +519,31 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
barGraphHtml = ` barGraphHtml = `
<div style="position: relative; display: inline-block; width: 100%; max-width: 100%; text-align: left;" class="spec-bar-container"> <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;"> <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: #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>` : ''} ${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: #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>` : ''} ${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: #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>` : ''} ${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: #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>` : ''} ${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>
<!-- 마우스 오버 시 나타날 커스텀 말풍선 툴팁 --> <!-- 마우스 오버 시 나타날 커스텀 말풍선 툴팁 -->
<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> <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>
</div> </div>
`; `;
} else { } 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 ` return `
<tr style="border-bottom: 1px solid #E2E8F0;"> <tr style="border-bottom: 1px solid var(--border-color);">
<td style="padding: 22px 10px; font-weight: 800; color: ${color}; font-size: 1.05rem;">${label}</td> <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}" ${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="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}" ${hoverEvents}>${data.active}대</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}" ${hoverEvents}>${data.stock}대</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: #EF4444;" ${hoverEvents}>${shortage}대</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: 1.05rem; vertical-align: middle;"> <td style="padding: 22px 8px; text-align: center; font-weight: 700; font-size: var(--fs-base); vertical-align: middle;">
${barGraphHtml} ${barGraphHtml}
</td> </td>
</tr> </tr>
@@ -561,31 +577,28 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
totBarGraphHtml = ` totBarGraphHtml = `
<div style="position: relative; display: inline-block; width: 100%; max-width: 100%; text-align: left;" class="spec-bar-container"> <div style="position: relative; display: inline-block; width: 100%; max-width: 100%; text-align: left;" class="spec-bar-container">
<!-- 게이지 바 (합계는 100% 너비) --> <!-- 게이지 바 (합계는 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;"> <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: #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>` : ''} ${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: #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>` : ''} ${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: #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>` : ''} ${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>
<!-- 마우스 오버 시 나타날 커스텀 말풍선 툴팁 --> <!-- 마우스 오버 시 나타날 커스텀 말풍선 툴팁 -->
<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> <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>
</div> </div>
`; `;
} else { } 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 = ` matrixTbody.innerHTML = `
${renderMatrixRow('premium', '최상급 PC (85점 이상)', '#11302B', premiumShortage)} ${renderMatrixRow('premium', '최상급 PC (85점 이상)', '#11302B', premiumShortage)}
${renderMatrixRow('high', '상급 PC (70점 ~ 85점)', '#1E8E7C', highShortage)} ${renderMatrixRow('high', '상급 PC (70점 ~ 85점)', '#1E8E7C', highShortage)}
${renderMatrixRow('normal', '중급 PC (40점 ~ 70점)', '#10B981', normalShortage)} ${renderMatrixRow('normal', '중급 PC (40점 ~ 70점)', '#10B981', normalShortage)}
${renderMatrixRow('entry', '보급 PC (20점 ~ 40점)', '#F59E0B', entryShortage)} ${renderMatrixRow('entry', '보급 PC (20점 ~ 40점)', 'var(--color-orange)', entryShortage)}
${renderMatrixRow('replace', '교체 대상 PC (20점 미만)', '#EF4444', replaceShortage)} ${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) => { const renderAgingRow = (label: string, list: any[], ageGroupKey: string) => {
return ` 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'"> <tr style="border-bottom:1px solid var(--border-color);" class="aging-row" data-group="${ageGroupKey}">
<td style="padding:5px 8px; font-weight:700; color:#334155; font-size: 1.05rem;">${label}</td> <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:#334155; font-size: 1.05rem;">${list.length}대</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> </tr>
`; `;
}; };
@@ -738,14 +751,9 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
}); });
// 8. 요약 지표 카드 클릭 리스너 설정 // 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)!; const card = document.getElementById(id)!;
if (!card) return; 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 = () => { card.onclick = () => {
const pcsInGrade = filtered.filter(filterFn); const pcsInGrade = filtered.filter(filterFn);
@@ -754,9 +762,9 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
}; };
// 사양 부족 / 오버 스펙 / 윈도우 11 불가 클릭 리스너 설정 // 사양 부족 / 오버 스펙 / 윈도우 11 불가 클릭 리스너 설정
bindCardClick('card-under-spec', '사양 부족 대상', p => p._spec_status === '사양 부족', '#FEF2F2'); bindCardClick('card-under-spec', '사양 부족 대상', p => p._spec_status === '사양 부족');
bindCardClick('card-over-spec', '오버 스펙 대상', p => p._spec_status === '오버스펙', '#FFFBEB'); bindCardClick('card-over-spec', '오버 스펙 대상', p => p._spec_status === '오버스펙');
bindCardClick('card-win11-incompatible', '윈도우 11 업그레이드 불가 PC', p => isWindows11Incompatible(p.cpu, p.ram), '#F5F3FF'); bindCardClick('card-win11-incompatible', '윈도우 11 업그레이드 불가 PC', p => isWindows11Incompatible(p.cpu, p.ram));
// 9. 조직별 사용 비율 집계 (전체 개인용 PC 기준) // 9. 조직별 사용 비율 집계 (전체 개인용 PC 기준)
const deptCounts: Record<string, number> = { const deptCounts: Record<string, number> = {
@@ -822,36 +830,35 @@ function showMiniListModal(title: string, list: any[]) {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-family: 'Pretendard', sans-serif; color: var(--text-main);
color: #1E293B;
`; `;
modal.innerHTML = ` 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="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 #F1F5F9; display: flex; justify-content: space-between; align-items: center; background: #F8FAFC;"> <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: 1.26rem; font-weight: 850; color: #1E5149; display: flex; align-items: center; gap: 0.5rem;"> <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:#1E5149;"></span> <span style="display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--primary);"></span>
${title} 자산 목록 ${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> </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; &times;
</button> </button>
</div> </div>
<div style="padding: 0 1.75rem 1rem 1.75rem; overflow-y: auto; flex: 1;"> <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;"> <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: white; z-index: 10;"> <thead style="position: sticky; top: 0; background: var(--canvas); z-index: 10;">
<tr style="border-bottom: 2px solid #E2E8F0; color: #64748B; font-weight: 800; background: white;"> <tr class="table-header-row" style="background: var(--canvas);">
<th style="padding: 10px 4px; width: 14%; background: white;">사용자</th> <th style="padding: 10px 4px; width: 14%; background: var(--canvas);">사용자</th>
<th style="padding: 10px 4px; width: 25%; background: white;">조직 (직무)</th> <th style="padding: 10px 4px; width: 25%; background: var(--canvas);">조직 (직무)</th>
<th style="padding: 10px 4px; width: 28%; background: white;">주요 사양</th> <th style="padding: 10px 4px; width: 28%; background: var(--canvas);">주요 사양</th>
<th style="padding: 10px 4px; width: 18%; text-align: center; background: white;">등급 (점수)</th> <th style="padding: 10px 4px; width: 18%; text-align: center; background: var(--canvas);">등급 (점수)</th>
<th style="padding: 10px 4px; text-align: center; background: white;">자산코드</th> <th style="padding: 10px 4px; text-align: center; background: var(--canvas);">자산코드</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
${list.length === 0 ${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 => { : list.map(pc => {
const spec = `${pc.cpu || ''} / ${pc.ram || ''} / ${pc.gpu || '-'}`; const spec = `${pc.cpu || ''} / ${pc.ram || ''} / ${pc.gpu || '-'}`;
const user = pc.user_current || '(재고)'; 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>`; const scoreHTML = `<strong style="color: ${grade.color}; font-size: 13px; margin-left: 4px;">${score}점</strong>`;
return ` 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'"> <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: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${user}">${user}</td> <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: #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: 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: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${spec}">${spec}</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; 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> </tr>
`; `;
}).join('') }).join('')
@@ -875,8 +882,8 @@ function showMiniListModal(title: string, list: any[]) {
</tbody> </tbody>
</table> </table>
</div> </div>
<div style="padding: 1rem 1.75rem; border-top: 1px solid #F1F5F9; display: flex; justify-content: flex-end; background: #F8FAFC;"> <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: 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'"> <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> </button>
</div> </div>
@@ -970,10 +977,9 @@ function renderDonutChart(deptData: { label: string; count: number; color: strin
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -46%); transform: translate(-50%, -46%);
font-size: 1.65rem; font-size: var(--fs-lg);
font-weight: 900; font-weight: 900;
color: #1E5149; color: var(--primary);
font-family: 'Pretendard', sans-serif;
pointer-events: none; pointer-events: none;
white-space: nowrap; 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]; let currentFilters: any = (state as any).listFilters[filterKey];
// 서버 탭이 아닐 경우 '자산 현황' 뷰 진입 방지 및 강제 'asset' 모드 (PC 탭은 자산 현황 숨김)
const isServer = config.title === '서버'; const isServer = config.title === '서버';
if (!isServer) {
(state as any).currentViewMode = 'asset';
}
// 1. 컨텐츠 영역 생성 (먼저 생성하여 참조 가능하게 함) // 1. 컨텐츠 영역 생성 (먼저 생성하여 참조 가능하게 함)
const contentWrapper = document.createElement('div'); const contentWrapper = document.createElement('div');
@@ -817,7 +813,8 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
const switchView = () => { const switchView = () => {
contentWrapper.innerHTML = ''; contentWrapper.innerHTML = '';
if ((state as any).currentViewMode === 'asset') { const isAssetMode = !isServer || state.viewMode === 'list';
if (isAssetMode) {
filterBar.style.display = 'flex'; contentWrapper.style.overflowY = 'hidden'; filterBar.style.display = 'flex'; contentWrapper.style.overflowY = 'hidden';
contentWrapper.appendChild(tableWrapper); updateTable(); contentWrapper.appendChild(tableWrapper); updateTable();
} else { } else {
@@ -834,7 +831,7 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
extraHTML: isServer ? ` extraHTML: isServer ? `
<div class="search-item"> <div class="search-item">
<label class="list-view-toggle-label"> <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> </label>
</div> </div>
@@ -878,13 +875,11 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
const chkBox = filterBar.querySelector('#chk-list-view') as HTMLInputElement; const chkBox = filterBar.querySelector('#chk-list-view') as HTMLInputElement;
const handleToggle = () => { const handleToggle = () => {
const isListMode = (state as any).currentViewMode === 'asset'; const isListMode = chkBox.checked;
if (isListMode) { if (isListMode) {
state.viewMode = 'location';
(state as any).currentViewMode = 'location';
} else {
state.viewMode = 'list'; state.viewMode = 'list';
(state as any).currentViewMode = 'asset'; } else {
state.viewMode = 'location';
} }
window.dispatchEvent(new Event('refresh-view')); 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; const chkBox = container.querySelector('#chk-list-view-loc') as HTMLInputElement;
if (chkBox) { if (chkBox) {
chkBox.checked = (state as any).currentViewMode === 'asset'; chkBox.checked = state.viewMode === 'list';
const handleToggle = () => { const handleToggle = () => {
const isListMode = chkBox.checked; const isListMode = chkBox.checked;
if (isListMode) { if (isListMode) {
state.viewMode = 'list'; state.viewMode = 'list';
(state as any).currentViewMode = 'asset';
} else { } else {
state.viewMode = 'location'; state.viewMode = 'location';
(state as any).currentViewMode = 'location';
} }
window.dispatchEvent(new Event('refresh-view')); 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> <span class="box-index">#${i+1}</span>
<button class="btn-del" onclick="removeBox(${i})">×</button> <button class="btn-del" onclick="removeBox(${i})">×</button>
</div> </div>
<div class="box-inputs" style="margin-bottom: 8px;"> <div class="box-inputs margin-bottom">
<select data-index="${i}" data-prop="asset_id" style="width: 100%; padding: 4px;"> <select data-index="${i}" data-prop="asset_id">
${optionsHtml} ${optionsHtml}
</select> </select>
</div> </div>

9
vite.config.ts
View File

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