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

style: 개인 PC 대시보드 및 관리자 모드(Map Editor) 가독성 향상 스타일 가이드라인 적용

Browse Source
This commit is contained in:
이태훈
2026-06-19 14:22:30 +09:00
parent c6515c1b5d
commit de3e05db8d
3 changed files with 37 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
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 style="margin: 0; display: flex; height: 100vh; overflow: hidden;">
<!-- Left: File Selector -->
<div class="file-sidebar" id="file-sidebar">

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

@@ -71,7 +71,7 @@ export function renderHwDashboard(container: HTMLElement) {
<!-- 대시보드 타이틀 및 사용조직 필터 -->
<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;">
<h2 style="font-size: var(--fs-lg); font-weight: 850; color: #1E5149; margin: 0; letter-spacing: -0.5px; display: flex; align-items: center; gap: 0.6rem;">
개인 PC 자산 대시보드
</h2>
</div>
@@ -102,33 +102,33 @@ export function renderHwDashboard(container: HTMLElement) {
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>
<span style="font-size: var(--fs-md); font-weight: 850; color: #1E293B; letter-spacing: -0.3px;">보유 자산 수량</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" style="font-size: var(--fs-xl); font-weight: 900; color: #1E5149; line-height: 1.1; z-index: 1; margin-right: 2rem; margin-top: 1.8rem;">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>
<span style="font-size: var(--fs-md); font-weight: 850; color: #1E293B; letter-spacing: -0.3px;">사양 부족</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" style="font-size: var(--fs-xl); font-weight: 900; color: #EF4444; line-height: 1.1; z-index: 1; margin-right: 2rem; margin-top: 1.8rem;">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>
<span style="font-size: var(--fs-md); font-weight: 850; color: #1E293B; letter-spacing: -0.3px;">오버 스펙</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" style="font-size: var(--fs-xl); font-weight: 900; color: #F59E0B; line-height: 1.1; z-index: 1; margin-right: 2rem; margin-top: 1.8rem;">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>
<span style="font-size: var(--fs-md); font-weight: 850; color: #1E293B; letter-spacing: -0.3px;">윈도우 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" style="font-size: var(--fs-xl); font-weight: 900; color: #7928ca; line-height: 1.1; z-index: 1; margin-right: 2rem; margin-top: 1.8rem;">0대</div>
</div>
</div>
@@ -140,7 +140,7 @@ export function renderHwDashboard(container: HTMLElement) {
<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="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>
<span style="font-size: var(--fs-md); font-weight: 850; color: #1E293B;">조직별 사용 비율</span>
</div>
<!-- 도넛 그래프 -->
@@ -483,7 +483,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 cellStyle = `padding: 22px 8px; text-align: center; font-weight: 700; cursor: pointer; transition: background 0.2s; font-size: var(--fs-base);`;
const hoverEvents = `onmouseover="this.style.background='#F1F5F9'" onmouseout="this.style.background='none'"`;
// 사양 적정성 분석 데이터 계산 (운영중인 자산만)
@@ -522,12 +522,12 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
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 style="padding: 22px 10px; font-weight: 800; 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:var(--fs-xs); 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;">
<td style="padding: 22px 8px; text-align: center; font-weight: 700; font-size: var(--fs-base); vertical-align: middle;">
${barGraphHtml}
</td>
</tr>
@@ -577,7 +577,7 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
totBarGraphHtml = `<span style="font-size: 0.88rem; color: #94A3B8; font-weight: 550;">운영중 자산 없음</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 cellStyleHeader = `padding: 12px 10px; text-align: center; font-weight: 800; cursor: pointer; transition: background 0.2s; background: #F8FAFC; font-size: var(--fs-base);`;
const hoverEventsHeader = `onmouseover="this.style.background='#EEF2F6'" onmouseout="this.style.background='#F8FAFC'"`;
matrixTbody.innerHTML = `
@@ -710,8 +710,8 @@ 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>
<td style="padding:5px 8px; font-weight:700; color:#334155; font-size: var(--fs-base);">${label}</td>
<td style="padding:5px 8px; text-align:center; font-weight:700; color:#334155; font-size: var(--fs-base);">${list.length}대</td>
</tr>
`;
};
@@ -829,17 +829,17 @@ function showMiniListModal(title: string, list: any[]) {
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;">
<h3 style="margin: 0; font-size: var(--fs-md); 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>
${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-sm); font-weight: 700; color: white; background: #1E5149; 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: var(--fs-md); 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';">
&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;">
<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;">
<tr style="border-bottom: 2px solid #E2E8F0; color: #64748B; font-weight: 800; background: white;">
<th style="padding: 10px 4px; width: 14%; background: white;">사용자</th>
@@ -858,8 +858,8 @@ function showMiniListModal(title: string, list: any[]) {
const score = pc._pc_score !== undefined ? pc._pc_score : calculatePcScoreDeductive(pc.cpu, pc.ram, pc.gpu, pc.purchase_date);
const win11Incompatible = isWindows11Incompatible(pc.cpu, pc.ram);
const grade = getPcGrade(score, win11Incompatible);
const badgeHTML = `<span class="badge ${grade.class}" style="font-size: 11px; padding: 2px 6px;">${grade.name}</span>`;
const scoreHTML = `<strong style="color: ${grade.color}; font-size: 13px; margin-left: 4px;">${score}점</strong>`;
const badgeHTML = `<span class="badge ${grade.class}" style="font-size: var(--fs-xs); padding: 2px 6px;">${grade.name}</span>`;
const scoreHTML = `<strong style="color: ${grade.color}; font-size: var(--fs-base); 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'">
@@ -876,7 +876,7 @@ function showMiniListModal(title: string, list: any[]) {
</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'">
<button id="btn-confirm-mini-modal" style="padding: 6px 20px; font-size: var(--fs-base); 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>
</div>
@@ -970,7 +970,7 @@ 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;

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'),
}
}
}
});