Compare commits
3 Commits
c6515c1b5d
...
ux_setting
| Author | SHA1 | Date | |
|---|---|---|---|
| af578a63bc | |||
| e8bc42e5de | |||
| 587e92a7da |
@@ -1,429 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="ko">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>PC 사양 적정성 분석 기획서 (GPU 반영)</title>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<style>
|
|
||||||
:root {
|
|
||||||
--primary: #4F46E5;
|
|
||||||
--primary-light: #EEF2FF;
|
|
||||||
--secondary: #10B981;
|
|
||||||
--secondary-light: #D1FAE5;
|
|
||||||
--danger: #EF4444;
|
|
||||||
--danger-light: #FEE2E2;
|
|
||||||
--warning: #F59E0B;
|
|
||||||
--warning-light: #FEF3C7;
|
|
||||||
--purple: #7C3AED;
|
|
||||||
--purple-light: #EDE9FE;
|
|
||||||
--text-dark: #0F172A;
|
|
||||||
--text-body: #334155;
|
|
||||||
--text-muted: #64748B;
|
|
||||||
--border: #E2E8F0;
|
|
||||||
--bg-light: #F8FAFC;
|
|
||||||
}
|
|
||||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
||||||
body {
|
|
||||||
font-family: 'Outfit', 'Noto Sans KR', sans-serif;
|
|
||||||
color: var(--text-body);
|
|
||||||
background: #fff;
|
|
||||||
letter-spacing: -0.02em;
|
|
||||||
line-height: 1.7;
|
|
||||||
}
|
|
||||||
.page { max-width: 980px; margin: 0 auto; padding: 3rem 2rem; }
|
|
||||||
|
|
||||||
/* ─ Header ─ */
|
|
||||||
.doc-header { border-bottom: 3px solid var(--text-dark); padding-bottom: 1.75rem; margin-bottom: 3rem; }
|
|
||||||
.doc-label {
|
|
||||||
display: inline-block; font-size: 0.75rem; font-weight: 700; color: var(--primary);
|
|
||||||
background: var(--primary-light); padding: 0.25rem 0.75rem; border-radius: 99px;
|
|
||||||
text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem;
|
|
||||||
}
|
|
||||||
.version-badge {
|
|
||||||
display: inline-block; font-size: 0.7rem; font-weight: 700; color: var(--secondary);
|
|
||||||
background: var(--secondary-light); padding: 0.2rem 0.6rem; border-radius: 99px;
|
|
||||||
margin-left: 0.5rem; vertical-align: middle;
|
|
||||||
}
|
|
||||||
.doc-header h1 { font-size: 2rem; font-weight: 900; color: var(--text-dark); line-height: 1.25; margin-bottom: 1rem; }
|
|
||||||
.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; margin-top: 1rem; }
|
|
||||||
.meta-item { background: var(--bg-light); border-radius: 8px; padding: 0.65rem 1rem; font-size: 0.83rem; }
|
|
||||||
.meta-item .label { color: var(--text-muted); display: block; font-size: 0.75rem; }
|
|
||||||
.meta-item .val { font-weight: 700; color: var(--text-dark); font-size: 0.9rem; }
|
|
||||||
|
|
||||||
/* ─ Sections ─ */
|
|
||||||
section { margin-bottom: 3.5rem; }
|
|
||||||
h2 {
|
|
||||||
font-size: 1.3rem; font-weight: 800; color: var(--text-dark);
|
|
||||||
padding-bottom: 0.5rem; border-bottom: 2px solid var(--border);
|
|
||||||
margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.6rem;
|
|
||||||
}
|
|
||||||
h2 .num {
|
|
||||||
display: inline-flex; align-items: center; justify-content: center;
|
|
||||||
width: 28px; height: 28px; background: var(--primary); color: #fff;
|
|
||||||
border-radius: 50%; font-size: 0.75rem; font-weight: 800; flex-shrink: 0;
|
|
||||||
}
|
|
||||||
h3 { font-size: 1.05rem; font-weight: 700; color: var(--text-dark); margin: 1.75rem 0 0.75rem; }
|
|
||||||
p { margin-bottom: 1rem; color: var(--text-body); font-size: 0.97rem; }
|
|
||||||
|
|
||||||
/* ─ Boxes ─ */
|
|
||||||
.box { border-radius: 10px; padding: 1.25rem 1.5rem; margin: 1.25rem 0; font-size: 0.93rem; }
|
|
||||||
.box-blue { background: var(--primary-light); border-left: 4px solid var(--primary); }
|
|
||||||
.box-green { background: var(--secondary-light); border-left: 4px solid var(--secondary); }
|
|
||||||
.box-yellow { background: var(--warning-light); border-left: 4px solid var(--warning); }
|
|
||||||
.box-red { background: var(--danger-light); border-left: 4px solid var(--danger); }
|
|
||||||
.box-purple { background: var(--purple-light); border-left: 4px solid var(--purple); }
|
|
||||||
.box-title { font-weight: 700; color: var(--text-dark); margin-bottom: 0.5rem; font-size: 0.95rem; }
|
|
||||||
|
|
||||||
/* ─ Score formula block ─ */
|
|
||||||
.formula {
|
|
||||||
background: #1E293B; color: #E2E8F0; border-radius: 8px;
|
|
||||||
padding: 1rem 1.25rem; font-family: 'Courier New', monospace;
|
|
||||||
font-size: 0.87rem; margin: 1rem 0; overflow-x: auto; line-height: 2;
|
|
||||||
}
|
|
||||||
.formula .comment { color: #64748B; }
|
|
||||||
.formula .key { color: #93C5FD; }
|
|
||||||
.formula .val { color: #6EE7B7; }
|
|
||||||
.formula .warn { color: #FCD34D; }
|
|
||||||
|
|
||||||
/* ─ Three-col score grid ─ */
|
|
||||||
.score-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin: 1.5rem 0; }
|
|
||||||
@media(max-width: 700px) { .score-grid-3 { grid-template-columns: 1fr; } }
|
|
||||||
.score-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
|
|
||||||
.score-card-header {
|
|
||||||
background: var(--bg-light); padding: 0.65rem 1rem;
|
|
||||||
font-weight: 700; font-size: 0.88rem; color: var(--text-dark);
|
|
||||||
border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.5rem;
|
|
||||||
}
|
|
||||||
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
|
|
||||||
.dot-green { background: var(--secondary); }
|
|
||||||
.dot-purple { background: var(--purple); }
|
|
||||||
|
|
||||||
/* ─ Tables ─ */
|
|
||||||
.tbl-wrap { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 1.25rem 0; }
|
|
||||||
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
|
|
||||||
th { background: var(--bg-light); padding: 0.65rem 1rem; font-weight: 700; color: var(--text-dark); border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
|
|
||||||
td { padding: 0.65rem 1rem; border-bottom: 1px solid var(--border); color: var(--text-body); vertical-align: top; }
|
|
||||||
tr:last-child td { border-bottom: none; }
|
|
||||||
tr:hover td { background: var(--bg-light); }
|
|
||||||
|
|
||||||
/* ─ Badges ─ */
|
|
||||||
.badge { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
|
|
||||||
.b-primary { color: var(--primary); background: var(--primary-light); }
|
|
||||||
.b-green { color: #065F46; background: var(--secondary-light); }
|
|
||||||
.b-red { color: #991B1B; background: var(--danger-light); }
|
|
||||||
.b-yellow { color: #92400E; background: var(--warning-light); }
|
|
||||||
.b-purple { color: #5B21B6; background: var(--purple-light); }
|
|
||||||
|
|
||||||
/* ─ Flow ─ */
|
|
||||||
.flow { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin: 1.5rem 0; }
|
|
||||||
.flow-step { background: var(--primary-light); color: var(--primary); font-weight: 700; font-size: 0.83rem; padding: 0.55rem 0.9rem; border-radius: 8px; text-align: center; }
|
|
||||||
.flow-step.gpu { background: var(--purple-light); color: var(--purple); }
|
|
||||||
.flow-arrow { font-size: 1.1rem; color: var(--text-muted); padding: 0 0.4rem; }
|
|
||||||
|
|
||||||
/* ─ GPU tier table highlight ─ */
|
|
||||||
.tier-S td:first-child { font-weight: 800; color: #DC2626; }
|
|
||||||
.tier-A td:first-child { font-weight: 700; color: var(--primary); }
|
|
||||||
.tier-B td:first-child { font-weight: 700; color: var(--secondary); }
|
|
||||||
.tier-C td:first-child { color: var(--warning); font-weight: 600; }
|
|
||||||
.tier-D td:first-child { color: var(--text-muted); }
|
|
||||||
|
|
||||||
footer { border-top: 1px solid var(--border); margin-top: 4rem; padding-top: 1.5rem; text-align: center; font-size: 0.8rem; color: var(--text-muted); }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="page">
|
|
||||||
|
|
||||||
<!-- HEADER -->
|
|
||||||
<header class="doc-header">
|
|
||||||
<div class="doc-label">기능 명세서 <span class="version-badge">v3.0 — 100점 감점제 반영</span></div>
|
|
||||||
<h1>PC 사양 적정성 분석 기획서<br>
|
|
||||||
<span style="font-size:1.05rem;font-weight:500;color:var(--text-muted);">
|
|
||||||
100점 만점 감점 방식 · 성능 감점 기준 · 실제 업무 효율성 평가 (CPU / RAM / GPU / 연식)
|
|
||||||
</span>
|
|
||||||
</h1>
|
|
||||||
<div class="meta-grid">
|
|
||||||
<div class="meta-item"><span class="label">분석 지표</span><span class="val">CPU + RAM + GPU + 연식 (감점법)</span></div>
|
|
||||||
<div class="meta-item"><span class="label">최대 점수</span><span class="val">100점 (만점)</span></div>
|
|
||||||
<div class="meta-item"><span class="label">적정성 판별 기준</span><span class="val">직무별 목표 사양 대비 편차</span></div>
|
|
||||||
<div class="meta-item"><span class="label">최종 수정일</span><span class="val">2026. 05. 31</span></div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- 1. 개요 -->
|
|
||||||
<section>
|
|
||||||
<h2><span class="num">1</span>개요 — 100점 만점 감점형 성능 점수 체계</h2>
|
|
||||||
<p>
|
|
||||||
v3.0부터 PC 사양 점수는 <strong>100점 만점 기준 감점제</strong>로 산출됩니다.
|
|
||||||
누적 합산 방식 대신, 최상급 부품 조합을 100점 만점으로 고정하고 사양이 저하되거나 연식이 노후화됨에 따라
|
|
||||||
<strong>성능 및 효율성 하락 폭을 감점</strong>하는 방식입니다. 이는 실제 업무 환경에서 PC 노후도에 따른
|
|
||||||
체감 생산성 저하를 훨씬 직관적이고 현실적으로 드러냅니다.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flow">
|
|
||||||
<div class="flow-step">① 기본 100점 만점</div>
|
|
||||||
<div class="flow-arrow">→</div>
|
|
||||||
<div class="flow-step">② CPU 등급/세대 감점</div>
|
|
||||||
<div class="flow-arrow">→</div>
|
|
||||||
<div class="flow-step">③ RAM 용량 감점</div>
|
|
||||||
<div class="flow-arrow">→</div>
|
|
||||||
<div class="flow-step gpu">④ GPU 등급 감점</div>
|
|
||||||
<div class="flow-arrow">→</div>
|
|
||||||
<div class="flow-step">⑤ 연식 노후 감점</div>
|
|
||||||
<div class="flow-arrow">→</div>
|
|
||||||
<div class="flow-step">⑥ 최종 실질 성능 점수</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="formula">
|
|
||||||
<span class="comment">// ─── 최종 PC 사양 점수 (100점 만점, 최소 10점 보존) ───</span>
|
|
||||||
<span class="key">totalScore</span> = max(10, 100 - (<span class="val">cpuDeduction</span> + <span class="val">genDeduction</span> + <span class="val">ramDeduction</span> + <span class="val">gpuDeduction</span> + <span class="val">ageDeduction</span>))
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 2. CPU 감점 룰 -->
|
|
||||||
<section>
|
|
||||||
<h2><span class="num">2</span>CPU 사양 감점 기준</h2>
|
|
||||||
<p>CPU 감점은 <strong>등급 감점(최대 -30점)</strong>과 <strong>세대 노후 감점(최대 -15점)</strong>의 합산입니다.</p>
|
|
||||||
|
|
||||||
<div class="formula">
|
|
||||||
<span class="comment">// [CPU 등급 감점]</span>
|
|
||||||
i9 / Ryzen 9 → <span class="val">0점 감점</span>
|
|
||||||
i7 / Ryzen 7 → <span class="val">-5점 감점</span>
|
|
||||||
i5 / Ryzen 5 → <span class="val">-15점 감점</span>
|
|
||||||
i3 / Ryzen 3 → <span class="val">-25점 감점</span>
|
|
||||||
기타 → <span class="val">-30점 감점</span>
|
|
||||||
|
|
||||||
<span class="comment">// [CPU 세대 노후 감점]</span>
|
|
||||||
최신 세대 (Intel 12~14세대, Ryzen 5000~7000시리즈 이상) → <span class="val">0점 감점</span>
|
|
||||||
과도기 세대 (Intel 10~11세대, Ryzen 3000시리즈) → <span class="val">-5점 감점</span>
|
|
||||||
구형 세대 (Intel 8~9세대, Ryzen 1000~2000시리즈) → <span class="val">-10점 감점</span>
|
|
||||||
노후 세대 (Intel 7세대 이하, 구형 AMD) → <span class="val">-15점 감점</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>CPU 조합별 감점 예시</h3>
|
|
||||||
<div class="tbl-wrap">
|
|
||||||
<table>
|
|
||||||
<thead><tr><th>모델</th><th>세대 구분</th><th>등급감점</th><th>세대감점</th><th>CPU 감점 합계</th></tr></thead>
|
|
||||||
<tbody>
|
|
||||||
<tr><td>i9-13900K</td><td>최신 세대</td><td>0</td><td>0</td><td><strong>0점 (감점 없음)</strong></td></tr>
|
|
||||||
<tr><td>i7-14700K</td><td>최신 세대</td><td>-5</td><td>0</td><td><strong>-5점</strong></td></tr>
|
|
||||||
<tr><td>i7-1360P</td><td>최신 세대 (노트북)</td><td>-5</td><td>0</td><td><strong>-5점</strong></td></tr>
|
|
||||||
<tr><td>i5-12400</td><td>최신 세대</td><td>-15</td><td>0</td><td><strong>-15점</strong></td></tr>
|
|
||||||
<tr><td>i7-9700</td><td>구형 세대</td><td>-5</td><td>-10</td><td><strong>-15점</strong></td></tr>
|
|
||||||
<tr><td>i5-8500</td><td>구형 세대</td><td>-15</td><td>-10</td><td><strong>-25점</strong></td></tr>
|
|
||||||
<tr><td>i7-7700</td><td>노후 세대</td><td>-5</td><td>-15</td><td><strong>-20점</strong></td></tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 3. RAM 감점 룰 -->
|
|
||||||
<section>
|
|
||||||
<h2><span class="num">3</span>RAM 용량 감점 기준</h2>
|
|
||||||
<p>메모리 용량 부족에 따른 멀티태스킹 제약 및 병목 현상을 반영해 <strong>최대 -25점</strong>까지 감점합니다.</p>
|
|
||||||
<div class="tbl-wrap">
|
|
||||||
<table>
|
|
||||||
<thead><tr><th>RAM 용량</th><th>감점 점수</th><th>영향도</th><th>평가</th></tr></thead>
|
|
||||||
<tbody>
|
|
||||||
<tr><td>32GB 이상</td><td><strong>0점 (감점 없음)</strong></td><td>대용량 3D 및 개발 작업 원활</td><td><span class="badge b-green">최적</span></td></tr>
|
|
||||||
<tr><td>16GB</td><td><strong>-10점 감점</strong></td><td>일반 사무용 및 가벼운 멀티태스킹 적합</td><td><span class="badge b-primary">보통</span></td></tr>
|
|
||||||
<tr><td>8GB</td><td><strong>-20점 감점</strong></td><td>브라우저 탭 다수 실행 시 물리 메모리 부족</td><td><span class="badge b-yellow">주의</span></td></tr>
|
|
||||||
<tr><td>8GB 미만</td><td><strong>-25점 감점</strong></td><td>기본 OS 구동 외 심각한 메모리 병목</td><td><span class="badge b-red">부족</span></td></tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 4. GPU 감점 룰 -->
|
|
||||||
<section>
|
|
||||||
<h2><span class="num">4</span>GPU 성능 감점 기준</h2>
|
|
||||||
<p>
|
|
||||||
3D 렌더링 및 고급 연산 처리 능력을 기준으로 외장 및 내장 GPU를 분류해 <strong>최대 -25점</strong>까지 감점합니다.
|
|
||||||
GPU 정보가 감지되지 않거나 없는 경우 기본적으로 내장 그래픽 수준인 -25점을 감점합니다.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="tbl-wrap">
|
|
||||||
<table>
|
|
||||||
<thead><tr><th>등급</th><th>제품군 구분</th><th>대표 모델</th><th>감점 점수</th><th>적합 작업</th></tr></thead>
|
|
||||||
<tbody>
|
|
||||||
<tr class="tier-S"><td>S</td><td>최상위 외장 GPU</td><td>RTX 4070~4090, RTX A4000~A6000</td><td><strong>0점 (감점 없음)</strong></td><td>3D 그래픽, AI 연산, VR</td></tr>
|
|
||||||
<tr class="tier-A"><td>A</td><td>메인스트림 외장 GPU</td><td>RTX 3060~3070, RTX 2060, RTX A2000</td><td><strong>-5점 감점</strong></td><td>중급 개발, CAD 설계</td></tr>
|
|
||||||
<tr class="tier-B"><td>B</td><td>엔트리 외장 GPU</td><td>GTX 1660, GTX 1060, RX 6600</td><td><strong>-15점 감점</strong></td><td>기본 CAD, 그래픽 보조</td></tr>
|
|
||||||
<tr class="tier-C"><td>C</td><td>내장 그래픽 및 기타</td><td>Intel Iris Xe, UHD Graphics, Vega, GPU 없음</td><td><strong>-25점 감점</strong></td><td>오피스 사무, 문서 작업</td></tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 5. 종합 점수 감점 사례 -->
|
|
||||||
<section>
|
|
||||||
<h2><span class="num">5</span>감점법 종합 점수 계산 실사례</h2>
|
|
||||||
<div class="tbl-wrap">
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr><th>모델명</th><th>CPU 사양 (감점)</th><th>RAM 사양 (감점)</th><th>GPU 사양 (감점)</th><th>연식 (감점)</th><th>감점 총합</th><th>최종 점수</th></tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>HP ZBook Fury 16</td><td>Ryzen 9 7900X (0)</td><td>64GB (0)</td><td>NVIDIA RTX A2000 (-5)</td><td>2년차 (-6)</td><td>-11</td><td><strong>89점</strong></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Dell Precision 5680</td><td>i9-13900K (0)</td><td>64GB (0)</td><td>NVIDIA RTX 4070 (0)</td><td>2년차 (-6)</td><td>-6</td><td><strong>94점</strong></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>LG Gram 17 Pro</td><td>i7-14700K (-5)</td><td>32GB (0)</td><td>NVIDIA RTX 4060 (-5)</td><td>1년차 (-3)</td><td>-13</td><td><strong>87점</strong></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>LG Gram 16</td><td>i7-1360P (-5)</td><td>16GB (-10)</td><td>Intel Iris Xe (-25)</td><td>3년차 (-9)</td><td>-49</td><td><strong>51점</strong></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Samsung Galaxy Book 3</td><td>i5-1340P (-15)</td><td>16GB (-10)</td><td>Intel Iris Xe (-25)</td><td>3년차 (-9)</td><td>-59</td><td><strong>41점</strong></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>HP EliteBook 840</td><td>Ryzen 5 5600X (-15)</td><td>16GB (-10)</td><td>AMD Radeon Vega (-25)</td><td>4년차 (-12)</td><td>-62</td><td><strong>38점</strong></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>HP ProDesk 400 G5</td><td>i3-8100 (-35)</td><td>8GB (-20)</td><td>Intel UHD 630 (-25)</td><td>5년 이상 (-15)</td><td>-95</td><td><strong>10점(보존)</strong></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 6. 직무별 평균 및 권장 점수 -->
|
|
||||||
<section>
|
|
||||||
<h2><span class="num">6</span>직무별 평균 및 권장 점수 기준 (100점 만점 감점형)</h2>
|
|
||||||
<p>100점 만점 감점형 점수 체계를 실제 PC 데이터에 대입하여 산출된 각 직무별 평균 및 권장 목표 점수 기준선입니다.</p>
|
|
||||||
<div class="tbl-wrap">
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr><th>정렬</th><th>직무</th><th>실제 데이터 평균 (감점 반영)</th><th>기본 권장 점수 (목표)</th><th>규칙</th></tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr><td>1</td><td><strong>AI 개발자</strong></td><td>88.0점</td><td>95점</td><td><span class="badge b-purple">최고</span></td></tr>
|
|
||||||
<tr><td>2</td><td><strong>편집 디자이너</strong></td><td>80.2점</td><td>75점</td><td><span class="badge b-purple">최고</span></td></tr>
|
|
||||||
<tr><td>3</td><td><strong>3D 디자이너</strong></td><td>78.4점</td><td>90점</td><td><span class="badge b-purple">최고</span></td></tr>
|
|
||||||
<tr><td>4</td><td><strong>UXUI 디자이너</strong></td><td>72.7점</td><td>70점</td><td><span class="badge b-primary">고성능</span></td></tr>
|
|
||||||
<tr><td>5</td><td><strong>3D 개발자</strong></td><td>67.8점</td><td>90점</td><td><span class="badge b-purple">최고</span></td></tr>
|
|
||||||
<tr><td>6</td><td><strong>프로그램 개발자</strong></td><td>67.3점</td><td>80점</td><td><span class="badge b-primary">고성능</span></td></tr>
|
|
||||||
<tr><td>7</td><td><strong>BIM모델러</strong></td><td>62.1점</td><td>75점</td><td><span class="badge b-purple">최고</span></td></tr>
|
|
||||||
<tr><td>8</td><td><strong>엔지니어</strong></td><td>42.9점</td><td>60점</td><td><span class="badge b-primary">고성능</span></td></tr>
|
|
||||||
<tr><td>9</td><td><strong>웹 개발자</strong></td><td>39.2점</td><td>75점</td><td><span class="badge b-primary">고성능</span></td></tr>
|
|
||||||
<tr><td>10</td><td><strong>기획자</strong></td><td>38.6점</td><td>50점</td><td><span class="badge b-green">중간</span></td></tr>
|
|
||||||
<tr><td>11</td><td><strong>감리원</strong></td><td>-</td><td>40점</td><td><span class="badge b-yellow">기본</span></td></tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<div class="box box-blue">
|
|
||||||
<div class="box-title">📌 대소 관계 조건 충족 확인</div>
|
|
||||||
AI 개발자(88.0) > 편집 디자이너(80.2) > 3D 디자이너(78.4) > UXUI 디자이너(72.7) > 3D 개발자(67.8) > 프로그램 개발자(67.3) > BIM모델러(62.1) > 엔지니어(42.9) > 웹 개발자(39.2) > 기획자(38.6) ✅
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 7. 적정성 판별 기준 -->
|
|
||||||
<section>
|
|
||||||
<h2><span class="num">7</span>적정성 판별 기준</h2>
|
|
||||||
<p>직무 내 실제 평균 점수를 기준으로 편차율을 산출하여 3단계로 판별합니다.</p>
|
|
||||||
<div class="formula">
|
|
||||||
<span class="key">avgScore</span> = <span class="val">해당 직무 소속 PC 점수들의 산술 평균</span>
|
|
||||||
|
|
||||||
IF <span class="val">개인 실질 점수 < avgScore × 0.80</span> → <span class="key">"사양 부족"</span> (직무 평균 20% 이상 미달)
|
|
||||||
IF <span class="val">개인 실질 점수 > avgScore × 1.30</span> → <span class="key">"오버스펙"</span> (직무 평균 30% 이상 초과)
|
|
||||||
ELSE → <span class="key">"적정"</span>
|
|
||||||
</div>
|
|
||||||
<div class="tbl-wrap">
|
|
||||||
<table>
|
|
||||||
<thead><tr><th>판별 결과</th><th>조건</th><th>권장 조치</th></tr></thead>
|
|
||||||
<tbody>
|
|
||||||
<tr><td><span class="badge b-red">사양 부족</span></td><td>실질 점수 < 직무 평균 × 0.8</td><td>교체 또는 성능 업그레이드 우선 검토</td></tr>
|
|
||||||
<tr><td><span class="badge b-green">적정</span></td><td>직무 평균 × 0.8 ≤ 실질 점수 ≤ 직무 평균 × 1.3</td><td>현행 업무 효율 유지</td></tr>
|
|
||||||
<tr><td><span class="badge b-yellow">오버스펙</span></td><td>실질 점수 > 직무 평균 × 1.3</td><td>과스펙 장비 회수 또는 필요 부서 재배치</td></tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 8. 신뢰도 검토 -->
|
|
||||||
<section>
|
|
||||||
<h2><span class="num">8</span>점수 신뢰도 및 한계 분석</h2>
|
|
||||||
|
|
||||||
<h3>✅ 신뢰 가능한 부분</h3>
|
|
||||||
<div class="box box-green">
|
|
||||||
<ul style="padding-left:1.25rem;margin:0;line-height:2.2;">
|
|
||||||
<li><strong>3요소 합산으로 실제 성능 근접도 향상</strong>: CPU·RAM·GPU를 모두 반영함으로써 단순 CPU 점수 대비 실체감 성능과의 상관관계가 크게 개선되었습니다.</li>
|
|
||||||
<li><strong>GPU 티어 방향성 일치</strong>: RTX 4090 > 4080 > 4070 … 순의 점수 순서는 실제 벤치마크(3DMark, PassMark GPU)와 일치합니다.</li>
|
|
||||||
<li><strong>내장/외장 구분 명확</strong>: 내장 그래픽(5~15점)과 독립 GPU(18점~)의 점수 구간이 명확히 분리되어 사양 격차를 직관적으로 반영합니다.</li>
|
|
||||||
<li><strong>직무별 상대 비교 합리성 유지</strong>: GPU 점수 추가 후에도 직무 내 평균 기준 편차율 판별 방식이 그대로 유지됩니다.</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>⚠️ 여전히 남아있는 한계점</h3>
|
|
||||||
<div class="tbl-wrap">
|
|
||||||
<table>
|
|
||||||
<thead><tr><th>한계 항목</th><th>내용</th><th>영향도</th></tr></thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td><strong>노트북 TDP 미반영</strong></td>
|
|
||||||
<td>i7-1360P (노트북 28W)와 i7-13700K (데스크탑 125W)는 같은 세대지만 실제 성능 차이가 큽니다. 현재는 동일 점수가 부여됩니다.</td>
|
|
||||||
<td><span class="badge b-yellow">중간</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>SSD 유형 미반영</strong></td>
|
|
||||||
<td>NVMe SSD와 HDD의 체감 속도 차이는 크지만 점수에 포함되지 않습니다.</td>
|
|
||||||
<td><span class="badge b-yellow">중간</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>GPU 세부 파생 모델 한계</strong></td>
|
|
||||||
<td>RTX 4060 Laptop과 RTX 4060 Desktop은 성능 차이가 있으나 동일 점수(50점)를 받습니다.</td>
|
|
||||||
<td><span class="badge b-yellow">중간</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>GPU 세대 보정 미적용</strong></td>
|
|
||||||
<td>CPU와 달리 GPU는 세대 보정 없이 모델명 매핑 방식만 사용됩니다. 향후 세대별 보정을 검토할 수 있습니다.</td>
|
|
||||||
<td><span class="badge b-primary">낮음</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>실측 벤치마크 미연동</strong></td>
|
|
||||||
<td>3DMark / PassMark GPU 실측값이 아닌 모델명 파싱 추정치입니다.</td>
|
|
||||||
<td><span class="badge b-yellow">중간</span></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="box box-blue">
|
|
||||||
<div class="box-title">💡 종합 신뢰도 평가</div>
|
|
||||||
GPU 점수 반영 후 <strong>특히 디자이너·개발자와 같은 그래픽 집약적 직무의 적정성 판별 정확도가 대폭 향상</strong>되었습니다.
|
|
||||||
다만 노트북 TDP, SSD 유형 등 추가 변수를 향후 보완하면 신뢰도를 더 끌어올릴 수 있습니다.
|
|
||||||
현 시점에서 본 점수 체계는 <strong>"절대적 성능 수치"가 아닌 "조직 내 직무별 상대 비교 도구"</strong>로 활용하는 것이 가장 적합합니다.
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 9. 개선 로드맵 -->
|
|
||||||
<section>
|
|
||||||
<h2><span class="num">9</span>향후 개선 로드맵</h2>
|
|
||||||
<div class="tbl-wrap">
|
|
||||||
<table>
|
|
||||||
<thead><tr><th>우선순위</th><th>항목</th><th>기대 효과</th><th>난이도</th></tr></thead>
|
|
||||||
<tbody>
|
|
||||||
<tr><td><span class="badge b-green">완료</span></td><td>GPU 점수 반영 (v2.0)</td><td>그래픽 직무 신뢰도 대폭 향상</td><td>중</td></tr>
|
|
||||||
<tr><td><span class="badge b-yellow">권장</span></td><td>SSD 유형별 점수 추가 (NVMe/SATA/HDD)</td><td>실체감 체감 속도 반영</td><td>하</td></tr>
|
|
||||||
<tr><td><span class="badge b-yellow">권장</span></td><td>노트북/데스크탑 TDP 보정</td><td>모바일 CPU 과대평가 방지</td><td>중</td></tr>
|
|
||||||
<tr><td><span class="badge b-primary">선택</span></td><td>PassMark / 3DMark 실측 DB 내장 연동</td><td>추정치 → 실측값 전환</td><td>상</td></tr>
|
|
||||||
<tr><td><span class="badge b-primary">선택</span></td><td>직무별 항목 가중치 커스터마이징</td><td>조직 특성 맞춤 정밀 점수화</td><td>중</td></tr>
|
|
||||||
<tr><td><span class="badge b-primary">선택</span></td><td>RMM 에이전트 실시간 자원 점유율 연동</td><td>실사용 기반 교체 우선순위 추천</td><td>상</td></tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<p>HM ITAM — PC 사양 적정성 분석 기획서 v2.0 (GPU 반영) · 2026. 05. 28</p>
|
|
||||||
<p style="margin-top:0.25rem;">내부 검토용 문서입니다. 무단 외부 배포를 금합니다.</p>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -8,12 +8,6 @@
|
|||||||
<title>한맥가족 자산관리시스템</title>
|
<title>한맥가족 자산관리시스템</title>
|
||||||
<link rel="stylesheet"
|
<link rel="stylesheet"
|
||||||
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
|
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/login.css" />
|
|
||||||
<link rel="stylesheet" href="/src/styles/guide.css" />
|
|
||||||
<link rel="stylesheet" href="/src/styles/modal.css" />
|
|
||||||
<link rel="stylesheet" href="/src/styles/dashboard.css" />
|
|
||||||
<link rel="stylesheet" href="/src/styles/table.css" />
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
<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" />
|
||||||
</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 +22,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 +31,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>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 2.9 MiB After Width: | Height: | Size: 2.9 MiB |
|
Before Width: | Height: | Size: 10 MiB After Width: | Height: | Size: 10 MiB |
|
Before Width: | Height: | Size: 6.3 MiB After Width: | Height: | Size: 6.3 MiB |
|
Before Width: | Height: | Size: 7.9 MiB After Width: | Height: | Size: 7.9 MiB |
|
Before Width: | Height: | Size: 4.7 MiB After Width: | Height: | Size: 4.7 MiB |
|
Before Width: | Height: | Size: 2.9 MiB After Width: | Height: | Size: 2.9 MiB |
|
Before Width: | Height: | Size: 3.9 MiB After Width: | Height: | Size: 3.9 MiB |
|
Before Width: | Height: | Size: 11 MiB After Width: | Height: | Size: 11 MiB |
|
Before Width: | Height: | Size: 6.1 MiB After Width: | Height: | Size: 6.1 MiB |
|
Before Width: | Height: | Size: 388 KiB After Width: | Height: | Size: 388 KiB |
|
Before Width: | Height: | Size: 196 KiB After Width: | Height: | Size: 196 KiB |
|
Before Width: | Height: | Size: 276 KiB After Width: | Height: | Size: 276 KiB |
|
Before Width: | Height: | Size: 225 KiB After Width: | Height: | Size: 225 KiB |
|
Before Width: | Height: | Size: 228 KiB After Width: | Height: | Size: 228 KiB |
|
Before Width: | Height: | Size: 242 KiB After Width: | Height: | Size: 242 KiB |
|
Before Width: | Height: | Size: 259 KiB After Width: | Height: | Size: 259 KiB |
|
Before Width: | Height: | Size: 213 KiB After Width: | Height: | Size: 213 KiB |
|
Before Width: | Height: | Size: 9.5 MiB After Width: | Height: | Size: 9.5 MiB |
|
Before Width: | Height: | Size: 9.8 MiB After Width: | Height: | Size: 9.8 MiB |
|
Before Width: | Height: | Size: 8.1 MiB After Width: | Height: | Size: 8.1 MiB |
|
Before Width: | Height: | Size: 5.8 MiB After Width: | Height: | Size: 5.8 MiB |
@@ -1,5 +1,6 @@
|
|||||||
import { createIcons, BookOpen, X, ChevronDown, ChevronRight, RefreshCw } from 'lucide';
|
import { createIcons, BookOpen, X, ChevronDown, ChevronRight, RefreshCw } from 'lucide';
|
||||||
import { state } from '../core/state';
|
import { state } from '../core/state';
|
||||||
|
import './guide.css';
|
||||||
|
|
||||||
// ─── 자산별 가이드 콘텐츠 정의 (SW_Table 브랜치 전체 복구) ───
|
// ─── 자산별 가이드 콘텐츠 정의 (SW_Table 브랜치 전체 복구) ───
|
||||||
interface GuideTabConfig {
|
interface GuideTabConfig {
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { createIcons, X } from 'lucide';
|
import { createIcons, X } from 'lucide';
|
||||||
import { setEditLock } from './ModalUtils';
|
import { setEditLock } from './ModalUtils';
|
||||||
|
import './modal.css';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 모든 모달의 공통 기능을 관리하는 베이스 추상 클래스입니다.
|
* 모든 모달의 공통 기능을 관리하는 베이스 추상 클래스입니다.
|
||||||
|
|||||||
10695
src/core/dummyData.ts
10695
src/core/dummyData.ts
File diff suppressed because it is too large
Load Diff
@@ -1,167 +1,7 @@
|
|||||||
import * as XLSX from 'xlsx';
|
|
||||||
import { ASSET_SCHEMA } from './schema';
|
|
||||||
import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog, MasterAssetData } from './types';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ITAM 엑셀 핸들러 (Database Synchronized Edition)
|
* ITAM 엑셀 핸들러 (지정 날짜 포맷팅 유틸리티)
|
||||||
* 데이터베이스 실제 스키마 컬럼과 엑셀 헤더를 1:1로 일치시킵니다.
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/**
|
|
||||||
* DB 컬럼 순서 및 구성 정의 (실제 DB 스키마 dump 기준)
|
|
||||||
*/
|
|
||||||
const DB_MAPPING: Record<string, (keyof typeof ASSET_SCHEMA)[]> = {
|
|
||||||
pc: [
|
|
||||||
'ASSET_TYPE', 'HW_STATUS', 'CURRENT_DEPT', 'PREV_DEPT', 'USER_POSITION',
|
|
||||||
'EMP_NO', 'CURRENT_USER',
|
|
||||||
'CPU', 'RAM', 'GPU', 'SSD1', 'SSD2', 'HDD1', 'HDD2', 'HDD3', 'HDD4', 'MAC_ADDR',
|
|
||||||
'MANAGER_MAIN', 'MANAGER_SUB', 'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT',
|
|
||||||
'PURCHASE_VENDOR', 'MEMO', 'MAINBOARD'
|
|
||||||
],
|
|
||||||
server: [
|
|
||||||
'ASSET_TYPE', 'MODEL_NAME', 'ASSET_PURPOSE', 'HW_STATUS',
|
|
||||||
'CURRENT_DEPT', 'CPU', 'RAM', 'GPU', 'SSD1', 'SSD2', 'HDD1', 'HDD2', 'IP_ADDR',
|
|
||||||
'REMOTE_TOOL', 'REMOTE_ID', 'REMOTE_PW', 'LOCATION', 'LOC_DETAIL', 'MANAGER_MAIN',
|
|
||||||
'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'PURCHASE_VENDOR',
|
|
||||||
'MEMO', 'PREV_DEPT', 'MANAGER_SUB', 'IP_ADDR2', 'MONITORING', 'HDD3', 'HDD4', 'EMP_NO'
|
|
||||||
],
|
|
||||||
storage: [
|
|
||||||
'ASSET_TYPE', 'HW_STATUS', 'VOLUME', 'MODEL_NAME',
|
|
||||||
'EMP_NO', 'CURRENT_USER',
|
|
||||||
'SERIAL_NUM', 'LOCATION', 'LOC_DETAIL', 'MANAGER_MAIN', 'MANAGER_SUB',
|
|
||||||
'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'PURCHASE_VENDOR',
|
|
||||||
'MEMO', 'CURRENT_DEPT', 'PREV_DEPT'
|
|
||||||
],
|
|
||||||
network: [
|
|
||||||
'PURCHASE_CORP', 'HW_STATUS', 'CURRENT_DEPT', 'PREV_DEPT',
|
|
||||||
'EMP_NO', 'CURRENT_USER',
|
|
||||||
'ASSET_TYPE', 'ASSET_MFR', 'MODEL_NAME', 'LOCATION', 'LOC_DETAIL', 'MANAGER_MAIN',
|
|
||||||
'MANAGER_SUB', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'PURCHASE_VENDOR', 'MEMO'
|
|
||||||
],
|
|
||||||
survey: [ // asset_survey (공간정보장비)
|
|
||||||
'HW_STATUS', 'ASSET_NAME', 'LOCATION', 'LOC_DETAIL',
|
|
||||||
'EMP_NO', 'CURRENT_USER',
|
|
||||||
'MANAGER_MAIN', 'MANAGER_SUB', 'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT',
|
|
||||||
'PURCHASE_VENDOR', 'MEMO'
|
|
||||||
],
|
|
||||||
pcParts: [
|
|
||||||
'HW_STATUS', 'ASSET_TYPE', 'ASSET_MFR', 'MODEL_NAME', 'VOLUME',
|
|
||||||
'EMP_NO', 'CURRENT_USER',
|
|
||||||
'MONITOR_INCH', 'LOCATION', 'LOC_DETAIL', 'PURCHASE_CORP', 'PURCHASE_DATE',
|
|
||||||
'PURCHASE_AMOUNT', 'PURCHASE_VENDOR', 'MEMO'
|
|
||||||
],
|
|
||||||
equipment: [
|
|
||||||
'HW_STATUS', 'ASSET_STATUS', 'ASSET_TYPE', 'ASSET_MFR',
|
|
||||||
'EMP_NO', 'CURRENT_USER',
|
|
||||||
'MODEL_NAME', 'LOCATION', 'LOC_DETAIL', 'MANAGER_MAIN', 'MANAGER_SUB',
|
|
||||||
'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'PURCHASE_VENDOR',
|
|
||||||
'MEMO'
|
|
||||||
],
|
|
||||||
officeSupplies: [ // asset_office_supplies (시설자산)
|
|
||||||
'HW_STATUS', 'ASSET_TYPE', 'ASSET_MFR', 'MODEL_NAME',
|
|
||||||
'EMP_NO', 'CURRENT_USER',
|
|
||||||
'ASSET_COUNT', 'LOCATION', 'LOC_DETAIL', 'MANAGER_MAIN', 'MANAGER_SUB',
|
|
||||||
'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'PURCHASE_VENDOR',
|
|
||||||
'MEMO'
|
|
||||||
],
|
|
||||||
swInternal: [
|
|
||||||
'SW_FIELD', 'DEV_OBJ', 'SW_STATUS', 'SW_TYPE', 'MANAGER_MAIN',
|
|
||||||
'DEV_MGR', 'PLANNING_MGR', 'SALES_MGR', 'PURCHASE_CORP', 'MEMO'
|
|
||||||
],
|
|
||||||
swExternal: [
|
|
||||||
'PRODUCT_NAME', 'SW_TYPE', 'SW_STATUS', 'SW_FIELD', 'CURRENT_DEPT',
|
|
||||||
'PREV_DEPT', 'MANAGER_MAIN', 'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT',
|
|
||||||
'PURCHASE_VENDOR', 'EMAIL_ACCOUNT', 'MEMO', 'EMP_NO', 'CURRENT_USER'
|
|
||||||
],
|
|
||||||
cloud: [
|
|
||||||
'ASSET_PURPOSE', 'PURCHASE_METHOD', 'PURCHASE_VENDOR', 'PURCHASE_CORP',
|
|
||||||
'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'MANAGER_MAIN', 'MANAGER_SUB',
|
|
||||||
'MEMO', 'SW_ID', 'SW_PW'
|
|
||||||
],
|
|
||||||
domain: [
|
|
||||||
'DOMAIN_ADDR', 'ASSET_PURPOSE', 'PURCHASE_VENDOR', 'ASSET_TYPE',
|
|
||||||
'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'MANAGER_MAIN', 'MANAGER_SUB',
|
|
||||||
'MEMO'
|
|
||||||
],
|
|
||||||
cost: [
|
|
||||||
'ASSET_TYPE', 'ASSET_PURPOSE', 'LOCATION', 'LOC_DETAIL', 'MANAGER_MAIN',
|
|
||||||
'MANAGER_SUB', 'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'PURCHASE_VENDOR',
|
|
||||||
'EMAIL_ACCOUNT', 'EMAIL_PW', 'MEMO', 'EMP_NO', 'CURRENT_USER'
|
|
||||||
],
|
|
||||||
vip: [ // asset_vip (선물)
|
|
||||||
'ASSET_NAME', 'MODEL_NAME', 'LOCATION', 'LOC_DETAIL',
|
|
||||||
'PURCHASE_CORP', 'PURCHASE_DATE', 'EXPIRED_DATE', 'PURCHASE_VENDOR', 'MEMO'
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
export function downloadTemplate() {
|
|
||||||
const wb = XLSX.utils.book_new();
|
|
||||||
|
|
||||||
const tabConfigs = [
|
|
||||||
{ name: 'PC', key: 'pc' },
|
|
||||||
{ name: '서버', key: 'server' },
|
|
||||||
{ name: '스토리지', key: 'storage' },
|
|
||||||
{ name: '공간정보장비', key: 'survey' },
|
|
||||||
{ name: 'PC부품', key: 'pcParts' },
|
|
||||||
{ name: '네트워크', key: 'network' },
|
|
||||||
{ name: '업무지원장비', key: 'equipment' },
|
|
||||||
{ name: '내부SW', key: 'swInternal' },
|
|
||||||
{ name: '외부SW', key: 'swExternal' },
|
|
||||||
{ name: '클라우드', key: 'cloud' },
|
|
||||||
{ name: '도메인', key: 'domain' },
|
|
||||||
{ name: '비용관리', key: 'cost' },
|
|
||||||
{ name: '선물', key: 'vip' },
|
|
||||||
{ name: '시설자산', key: 'officeSupplies' }
|
|
||||||
];
|
|
||||||
|
|
||||||
tabConfigs.forEach(config => {
|
|
||||||
const keys = DB_MAPPING[config.key];
|
|
||||||
const headers = keys.map(k => ASSET_SCHEMA[k].ui);
|
|
||||||
const ws = XLSX.utils.aoa_to_sheet([headers]);
|
|
||||||
ws['!cols'] = Array(headers.length).fill({ wch: 20 });
|
|
||||||
XLSX.utils.book_append_sheet(wb, ws, config.name);
|
|
||||||
});
|
|
||||||
|
|
||||||
XLSX.writeFile(wb, 'itam_template_db_aligned.xlsx');
|
|
||||||
}
|
|
||||||
|
|
||||||
export function exportToExcel(masterData: MasterAssetData) {
|
|
||||||
const wb = XLSX.utils.book_new();
|
|
||||||
|
|
||||||
const exportConfigs = [
|
|
||||||
{ name: 'PC', list: masterData.pc, key: 'pc' },
|
|
||||||
{ name: '서버', list: masterData.server, key: 'server' },
|
|
||||||
{ name: '스토리지', list: masterData.storage, key: 'storage' },
|
|
||||||
{ name: '공간정보장비', list: masterData.survey || [], key: 'survey' },
|
|
||||||
{ name: 'PC부품', list: masterData.pcParts || [], key: 'pcParts' },
|
|
||||||
{ name: '네트워크', list: masterData.network || [], key: 'network' },
|
|
||||||
{ name: '업무지원장비', list: masterData.equipment || [], key: 'equipment' },
|
|
||||||
{ name: '내부SW', list: masterData.swInternal, key: 'swInternal' },
|
|
||||||
{ name: '외부SW', list: masterData.swExternal, key: 'swExternal' },
|
|
||||||
{ name: '클라우드', list: masterData.cloud || [], key: 'cloud' },
|
|
||||||
{ name: '도메인', list: masterData.domain || [], key: 'domain' },
|
|
||||||
{ name: '비용관리', list: masterData.cost || [], key: 'cost' },
|
|
||||||
{ name: '선물', list: masterData.vip || [], key: 'vip' },
|
|
||||||
{ name: '시설자산', list: masterData.officeSupplies || [], key: 'officeSupplies' }
|
|
||||||
];
|
|
||||||
|
|
||||||
exportConfigs.forEach(config => {
|
|
||||||
const schemaKeys = DB_MAPPING[config.key];
|
|
||||||
const headers = schemaKeys.map(k => ASSET_SCHEMA[k].ui);
|
|
||||||
const rows = config.list.map(asset =>
|
|
||||||
schemaKeys.map(k => {
|
|
||||||
const dbField = ASSET_SCHEMA[k].db;
|
|
||||||
return asset[dbField] || asset[ASSET_SCHEMA[k].key] || '';
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
const ws = XLSX.utils.aoa_to_sheet([headers, ...rows]);
|
|
||||||
XLSX.utils.book_append_sheet(wb, ws, config.name);
|
|
||||||
});
|
|
||||||
|
|
||||||
XLSX.writeFile(wb, `itam_export_${new Date().toISOString().split('T')[0]}.xlsx`);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function formatExcelDate(val: any): string {
|
export function formatExcelDate(val: any): string {
|
||||||
if (!val) return '';
|
if (!val) return '';
|
||||||
if (typeof val === 'number') {
|
if (typeof val === 'number') {
|
||||||
@@ -173,54 +13,3 @@ export function formatExcelDate(val: any): string {
|
|||||||
}
|
}
|
||||||
return String(val);
|
return String(val);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function parseExcel(file: File): Promise<any> {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onload = (e) => {
|
|
||||||
try {
|
|
||||||
const workbook = XLSX.read(e.target?.result, { type: 'array' });
|
|
||||||
const parsedData: any = {};
|
|
||||||
|
|
||||||
workbook.SheetNames.forEach(sheetName => {
|
|
||||||
const ws = workbook.Sheets[sheetName];
|
|
||||||
const rows = XLSX.utils.sheet_to_json(ws, { defval: "" }) as any[];
|
|
||||||
const list: any[] = [];
|
|
||||||
|
|
||||||
rows.forEach(r => {
|
|
||||||
const data: any = { id: Math.random().toString(36).substring(2, 9) };
|
|
||||||
|
|
||||||
// Set default category based on sheet name
|
|
||||||
data['category'] = sheetName;
|
|
||||||
|
|
||||||
Object.keys(r).forEach(label => {
|
|
||||||
const schemaEntry = Object.values(ASSET_SCHEMA).find(s => s.ui === label);
|
|
||||||
const key = schemaEntry ? schemaEntry.db : label;
|
|
||||||
let val = r[label];
|
|
||||||
|
|
||||||
if (label.includes('일자') || label.includes('연월') || label.includes('만료일') || label.includes('시작일')) {
|
|
||||||
val = formatExcelDate(val);
|
|
||||||
}
|
|
||||||
data[key] = val;
|
|
||||||
});
|
|
||||||
|
|
||||||
list.push(data);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Sheet Name Mapping back to state keys
|
|
||||||
const nameMap: Record<string, string> = {
|
|
||||||
'PC': 'pc', '서버': 'server', '스토리지': 'storage', '공간정보장비': 'survey',
|
|
||||||
'PC부품': 'pcParts', '네트워크': 'network', '업무지원장비': 'equipment',
|
|
||||||
'내부SW': 'swInternal', '외부SW': 'swExternal', '클라우드': 'cloud',
|
|
||||||
'도메인': 'domain', '비용관리': 'cost', '선물': 'vip', '시설자산': 'officeSupplies'
|
|
||||||
};
|
|
||||||
|
|
||||||
const stateKey = nameMap[sheetName] || sheetName;
|
|
||||||
if (list.length > 0) parsedData[stateKey] = list;
|
|
||||||
});
|
|
||||||
resolve(parsedData);
|
|
||||||
} catch (err) { reject(err); }
|
|
||||||
};
|
|
||||||
reader.readAsArrayBuffer(file);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,5 @@
|
|||||||
import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog, MasterAssetData, SystemUser } from './types';
|
import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog, MasterAssetData, SystemUser } from './types';
|
||||||
import { API_BASE_URL } from './utils';
|
import { API_BASE_URL } from './utils';
|
||||||
import { dummyPCs, dummyServers, dummyStorages, dummyEquips, dummySubSw, dummyPermSw, dummyCloud, dummyDomain, dummySwUsers, dummyLogs } from './dummyData';
|
|
||||||
|
|
||||||
// --- State Definitions ---
|
// --- State Definitions ---
|
||||||
export interface AppState {
|
export interface AppState {
|
||||||
|
|||||||
12
src/main.ts
12
src/main.ts
@@ -1,3 +1,5 @@
|
|||||||
|
import './styles/common.css';
|
||||||
|
import './styles/login.css';
|
||||||
import { state, loadMasterDataFromDB, saveAsset } from './core/state';
|
import { state, loadMasterDataFromDB, saveAsset } from './core/state';
|
||||||
import { renderNavigation } from './components/Navigation';
|
import { renderNavigation } from './components/Navigation';
|
||||||
import { renderDashboard } from './views/DashboardView';
|
import { renderDashboard } from './views/DashboardView';
|
||||||
@@ -30,19 +32,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); // 리스트 형식
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import './styles/common.css';
|
import './styles/common.css';
|
||||||
import './styles/map-editor.css';
|
import './views/map-editor.css';
|
||||||
import { MapEditor } from './views/MapEditor';
|
import { MapEditor } from './views/MapEditor';
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
|||||||
@@ -1,13 +0,0 @@
|
|||||||
[
|
|
||||||
{
|
|
||||||
"법인": "(주)회사1",
|
|
||||||
"자산코드": "ASSET-100",
|
|
||||||
"명칭": "서버 모델A",
|
|
||||||
"위치": "본사 1층",
|
|
||||||
"관리자": "관리자A",
|
|
||||||
"IP주소": "192.168.0.1",
|
|
||||||
"MACaddress": "00:00:00:00:00:01",
|
|
||||||
"HW사양": "Core i7, 16GB RAM",
|
|
||||||
"OS": "Windows 10"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
@@ -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;">
|
||||||
×
|
×
|
||||||
</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;
|
||||||
`;
|
`;
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import { state } from '../core/state';
|
import { state } from '../core/state';
|
||||||
import { renderHwDashboard } from './Dashboard/HwDashboard';
|
import { renderHwDashboard } from './Dashboard/HwDashboard';
|
||||||
import { renderSwDashboard } from './Dashboard/SwDashboard';
|
import { renderSwDashboard } from './Dashboard/SwDashboard';
|
||||||
|
import './Dashboard/dashboard.css';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 대시보드 렌더링 통합 허브 (Vercel Style Normalized)
|
* 대시보드 렌더링 통합 허브 (Vercel Style Normalized)
|
||||||
|
|||||||
@@ -1,137 +1,14 @@
|
|||||||
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
||||||
import { dynamicSort, renderPageHeader, calculateAssetAge, formatInline, isWindows11Incompatible } from '../../core/utils';
|
import { dynamicSort, renderPageHeader, calculateAssetAge, formatInline, isWindows11Incompatible, calculatePcScoreDeductive } from '../../core/utils';
|
||||||
import { setupTableSorting, SortState } from '../../core/tableHandler';
|
import { setupTableSorting, SortState } from '../../core/tableHandler';
|
||||||
import { renderFilterBar, applyCommonFilters } from '../../core/filterHandler';
|
import { renderFilterBar, applyCommonFilters } from '../../core/filterHandler';
|
||||||
import { state } from '../../core/state';
|
import { state } from '../../core/state';
|
||||||
import { IMAGE_LOCATIONS } from '../../components/Modal/SharedData';
|
import { IMAGE_LOCATIONS } from '../../components/Modal/SharedData';
|
||||||
|
import './table.css';
|
||||||
|
|
||||||
declare var Chart: any;
|
declare var Chart: any;
|
||||||
let pcFlowChartInstance: any = null;
|
let pcFlowChartInstance: any = null;
|
||||||
|
|
||||||
// ─── 100점 만점 감점형 성능 점수 계산 (CPU + RAM + GPU + 연식) ───
|
|
||||||
function calculatePcScoreDeductive(cpu: string, ram: string, gpu: string, purchaseDate: string): number {
|
|
||||||
let score = 100;
|
|
||||||
if (!cpu) cpu = '';
|
|
||||||
if (!ram) ram = '';
|
|
||||||
if (!gpu) gpu = '';
|
|
||||||
|
|
||||||
const cpuUpper = cpu.toUpperCase();
|
|
||||||
const ramUpper = ram.toUpperCase();
|
|
||||||
const gpuUpper = gpu.toUpperCase();
|
|
||||||
|
|
||||||
// 1. CPU 등급 감점 (최대 -30점)
|
|
||||||
let cpuDeduction = 0;
|
|
||||||
if (cpuUpper.includes('I9') || cpuUpper.includes('RYZEN 9') || cpuUpper.includes('RYZEN9')) {
|
|
||||||
cpuDeduction = 0;
|
|
||||||
} else if (cpuUpper.includes('I7') || cpuUpper.includes('RYZEN 7') || cpuUpper.includes('RYZEN7')) {
|
|
||||||
cpuDeduction = 5;
|
|
||||||
} else if (cpuUpper.includes('I5') || cpuUpper.includes('RYZEN 5') || cpuUpper.includes('RYZEN5')) {
|
|
||||||
cpuDeduction = 15;
|
|
||||||
} else if (cpuUpper.includes('I3') || cpuUpper.includes('RYZEN 3') || cpuUpper.includes('RYZEN3')) {
|
|
||||||
cpuDeduction = 25;
|
|
||||||
} else {
|
|
||||||
cpuDeduction = 30;
|
|
||||||
}
|
|
||||||
score -= cpuDeduction;
|
|
||||||
|
|
||||||
// 2. CPU 세대 노후 감점 (최대 -15점)
|
|
||||||
let genDeduction = 0;
|
|
||||||
const intelMatch = cpuUpper.match(/I\d-?(\d+)/);
|
|
||||||
let gen = 0;
|
|
||||||
if (intelMatch && intelMatch[1]) {
|
|
||||||
const numStr = intelMatch[1];
|
|
||||||
if (numStr.length === 5) gen = parseInt(numStr.substring(0, 2), 10);
|
|
||||||
else if (numStr.length === 4) gen = parseInt(numStr.substring(0, 1), 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
const amdMatch = cpuUpper.match(/RYZEN\s?\d\s?-?(\d+)/);
|
|
||||||
let amdGen = 0;
|
|
||||||
if (amdMatch && amdMatch[1] && !intelMatch) {
|
|
||||||
const numStr = amdMatch[1];
|
|
||||||
if (numStr.length === 4) amdGen = parseInt(numStr.substring(0, 1), 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (intelMatch) {
|
|
||||||
if (gen >= 12) genDeduction = 0;
|
|
||||||
else if (gen >= 10) genDeduction = 5;
|
|
||||||
else if (gen >= 8) genDeduction = 10;
|
|
||||||
else genDeduction = 15;
|
|
||||||
} else if (amdMatch) {
|
|
||||||
if (amdGen >= 5) genDeduction = 0;
|
|
||||||
else if (amdGen >= 3) genDeduction = 5;
|
|
||||||
else genDeduction = 10;
|
|
||||||
} else {
|
|
||||||
genDeduction = 15;
|
|
||||||
}
|
|
||||||
score -= genDeduction;
|
|
||||||
|
|
||||||
// 3. RAM 용량 감점 (최대 -25점)
|
|
||||||
const ramMatch = ramUpper.match(/(\d+)\s*GB/);
|
|
||||||
let ramDeduction = 25;
|
|
||||||
if (ramMatch && ramMatch[1]) {
|
|
||||||
const ramVal = parseInt(ramMatch[1], 10);
|
|
||||||
if (ramVal >= 32) ramDeduction = 0;
|
|
||||||
else if (ramVal >= 16) ramDeduction = 10;
|
|
||||||
else if (ramVal >= 8) ramDeduction = 20;
|
|
||||||
else ramDeduction = 25;
|
|
||||||
}
|
|
||||||
score -= ramDeduction;
|
|
||||||
|
|
||||||
// 4. GPU 성능 감점 (최대 -25점)
|
|
||||||
let gpuDeduction = 25;
|
|
||||||
if (!gpuUpper || gpuUpper === '-' || gpuUpper.trim() === '') {
|
|
||||||
gpuDeduction = 25;
|
|
||||||
} else if (
|
|
||||||
gpuUpper.includes('RTX 4090') || gpuUpper.includes('RTX 4080') || gpuUpper.includes('RTX 4070') ||
|
|
||||||
gpuUpper.includes('RTX 3090') || gpuUpper.includes('RTX 3080') ||
|
|
||||||
gpuUpper.includes('RTX A5000') || gpuUpper.includes('RTX A6000') || gpuUpper.includes('RTX A4000')
|
|
||||||
) {
|
|
||||||
gpuDeduction = 0;
|
|
||||||
} else if (
|
|
||||||
gpuUpper.includes('RTX 3070') || gpuUpper.includes('RTX 3060') || gpuUpper.includes('RTX 2060') ||
|
|
||||||
gpuUpper.includes('RTX A2000') || gpuUpper.includes('RTX A3000') || gpuUpper.includes('QUADRO')
|
|
||||||
) {
|
|
||||||
gpuDeduction = 5;
|
|
||||||
} else if (
|
|
||||||
gpuUpper.includes('GTX 1660') || gpuUpper.includes('GTX 1080') || gpuUpper.includes('GTX 1070') ||
|
|
||||||
gpuUpper.includes('GTX 1060') || gpuUpper.includes('RX 6700') || gpuUpper.includes('RX 6600')
|
|
||||||
) {
|
|
||||||
gpuDeduction = 15;
|
|
||||||
} else {
|
|
||||||
gpuDeduction = 25;
|
|
||||||
}
|
|
||||||
score -= gpuDeduction;
|
|
||||||
|
|
||||||
// 5. 연식(노후도) 감점 (최대 -15점)
|
|
||||||
let age = 0;
|
|
||||||
if (purchaseDate && purchaseDate !== '-') {
|
|
||||||
let normalized = purchaseDate.replace(/\./g, '-').trim();
|
|
||||||
if (/^\d{6}$/.test(normalized)) {
|
|
||||||
normalized = `${normalized.substring(0, 4)}-${normalized.substring(4, 6)}`;
|
|
||||||
}
|
|
||||||
const purchase = new Date(normalized);
|
|
||||||
if (!isNaN(purchase.getTime())) {
|
|
||||||
// 2026년 5월 31일 기준 경과연수 계산
|
|
||||||
const mockToday = new Date('2026-05-31');
|
|
||||||
const diffMs = mockToday.getTime() - purchase.getTime();
|
|
||||||
age = diffMs / (1000 * 60 * 60 * 24 * 365.25);
|
|
||||||
age = Math.max(0, parseFloat(age.toFixed(1)));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let ageDeduction = 0;
|
|
||||||
if (age < 1) ageDeduction = 0;
|
|
||||||
else if (age < 2) ageDeduction = 3;
|
|
||||||
else if (age < 3) ageDeduction = 6;
|
|
||||||
else if (age < 4) ageDeduction = 9;
|
|
||||||
else if (age < 5) ageDeduction = 12;
|
|
||||||
else ageDeduction = 15;
|
|
||||||
|
|
||||||
score -= ageDeduction;
|
|
||||||
|
|
||||||
return Math.max(10, score);
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ColumnDef {
|
export interface ColumnDef {
|
||||||
header: string;
|
header: string;
|
||||||
sortKey?: string;
|
sortKey?: string;
|
||||||
@@ -177,11 +54,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 +690,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 +708,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 +752,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'));
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -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'));
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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);
|
||||||
|
}
|
||||||
@@ -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'),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user