Compare commits
77 Commits
34d99dc4b6
...
ux_setting
| Author | SHA1 | Date | |
|---|---|---|---|
| af578a63bc | |||
| e8bc42e5de | |||
| 587e92a7da | |||
| c6515c1b5d | |||
| e128634e05 | |||
| c0ef52deac | |||
| aab1f91d3d | |||
| f656f0a439 | |||
| e77c4854cb | |||
| 1d32a0350b | |||
| 309c400ee2 | |||
| 3db05f2939 | |||
| 2cb4b87c0a | |||
| 6ed2faee2d | |||
| 89d3ac2e89 | |||
| b37981506e | |||
| abc531a41e | |||
| 8451101325 | |||
| 3e69e74bc9 | |||
| 73ef13f3a5 | |||
| 155570e8de | |||
| 723c4723f6 | |||
| a44283281f | |||
| fa87f383e2 | |||
| 6118141f6e | |||
| 119c799d1d | |||
| 05e23883b8 | |||
| 8c406fd0b8 | |||
| e678f9d653 | |||
| 132e37d0d3 | |||
| d6e75f8b2c | |||
| c35f57acab | |||
| 97cecb8b50 | |||
| a4b620099c | |||
| b169176d57 | |||
| 56abdddbc7 | |||
| fd9e88d7c6 | |||
| 407b9ba531 | |||
| 55c43aa250 | |||
| 9186eb50ca | |||
| 8a3727ea61 | |||
| 0c1977f707 | |||
| 19e6be27de | |||
| accbbdc2fa | |||
| d3c4fa5e66 | |||
| 8c1cb6cf93 | |||
| 4810df212a | |||
| f5a84a77ef | |||
| 565802f55b | |||
| 10479aad7e | |||
| 95fbd3f606 | |||
| 207acbdecb | |||
| 164568843b | |||
| 29c7d5f3d8 | |||
| ce1ed40561 | |||
| 525dbd77d4 | |||
| 35c5b1e0fa | |||
| b87ca2854b | |||
| 2f88a0fae7 | |||
| 9a2c35e652 | |||
| 25ebaf4685 | |||
| 2b9c965c91 | |||
| 4b408b0640 | |||
| 3ab587d342 | |||
| 3b9b2ea598 | |||
| 05c565552a | |||
| 2ec9261c03 | |||
| 06f3baaa58 | |||
| eead43837d | |||
| 46422e8544 | |||
| a30f99f0ad | |||
| 9e8ab11f99 | |||
| 19d4222470 | |||
| db5c7a96a6 | |||
| 7d3d5ef281 | |||
| 9cd5d59bf8 | |||
| 590ddd0e85 |
6
.env
Normal file
6
.env
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
DB_HOST=172.16.8.151
|
||||||
|
DB_PORT=3306
|
||||||
|
DB_USER=itam_admin
|
||||||
|
DB_PASS=itam1234
|
||||||
|
DB_NAME=itam
|
||||||
|
PORT=3000
|
||||||
@@ -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>
|
|
||||||
33
README.md
33
README.md
@@ -9,6 +9,14 @@
|
|||||||
- 기존 동작 방식과 성능을 기준(Baseline)으로 삼고, 수정 후에도 **기존의 모든 기능이 무결하게 유지되는지 반드시 테스트하여 입증**한다.
|
- 기존 동작 방식과 성능을 기준(Baseline)으로 삼고, 수정 후에도 **기존의 모든 기능이 무결하게 유지되는지 반드시 테스트하여 입증**한다.
|
||||||
- 검증 결과를 바탕으로 "무엇을, 왜, 어떻게" 바꿀지 상세 보고 후, 사용자로부터 **'진행시켜'** 승인을 얻은 뒤에만 집행한다.
|
- 검증 결과를 바탕으로 "무엇을, 왜, 어떻게" 바꿀지 상세 보고 후, 사용자로부터 **'진행시켜'** 승인을 얻은 뒤에만 집행한다.
|
||||||
4. **선보고 후승인**: 모든 기능 수정 및 코드 변경 전에는 예상 방안을 먼저 보고하고 승인 절차를 거친다.
|
4. **선보고 후승인**: 모든 기능 수정 및 코드 변경 전에는 예상 방안을 먼저 보고하고 승인 절차를 거친다.
|
||||||
|
5. **RED–GREEN–Refactor 개발 원칙**:
|
||||||
|
- 모든 기능 개발과 버그 수정은 **RED → GREEN → Refactor** 순서로 진행한다.
|
||||||
|
- **RED**: 요구사항을 명확히 표현하는 테스트를 먼저 작성하고, 해당 테스트가 기능 미구현 또는 결함으로 인해 실패하는지 확인한다.
|
||||||
|
- **GREEN**: 실패한 테스트를 통과시키는 데 필요한 최소한의 코드만 구현하며, 불필요한 기능 추가나 구조 변경을 하지 않는다.
|
||||||
|
- **Refactor**: 관련 테스트와 기존 테스트가 모두 통과하는 상태에서만 중복 제거, 명칭 개선, 책임 분리 등 코드 구조를 개선하며 동작은 변경하지 않는다.
|
||||||
|
- 각 단계가 끝날 때마다 관련 테스트와 기존 기능의 회귀 여부를 검증한다.
|
||||||
|
- 테스트 작성이 현실적으로 불가능한 경우에는 그 사유와 대체 검증 방법을 먼저 보고하고 승인을 받은 후 진행한다.
|
||||||
|
- 본 원칙을 적용할 때에도 기존의 **선보고 후승인** 및 **외과 수술식 수정** 규칙을 준수한다.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -28,29 +36,8 @@
|
|||||||
|
|
||||||
### 🎨 ITAM 시스템 디자인 가이드 (Design Guide)
|
### 🎨 ITAM 시스템 디자인 가이드 (Design Guide)
|
||||||
|
|
||||||
1. **디자인 철학 (Design Philosophy)**
|
디자인 일관성 및 시각적 원칙에 관한 상세 내용은 아래 문서를 참조하십시오.
|
||||||
* **Minimalist & Border-based**: 불필요한 박스(Card) 사용을 최소화하고, 정보의 구분은 간결한 라인(Border/Divider)을 활용하여 시각적 피로도를 낮춥니다.
|
|
||||||
* **Professional Achromatic**: 무채색(Black, White, Grey)을 기본으로 하여 정돈된 업무 환경을 제공합니다.
|
|
||||||
* **Green Accent**: 블루 대신 짙은 그린(`#1E5149`)을 포인트 컬러로 사용하여 차분한 전문성을 강조합니다.
|
|
||||||
|
|
||||||
2. **타이포그래피 (Typography)**
|
👉 **[디자인 가이드 바로가기 (design_rule.md)](./design_rule.md)**
|
||||||
* **Font Family**: `Pretendard` (전역 적용)
|
|
||||||
* **Letter Spacing**: `-0.02em` (약 -2%) 적용. 자간을 좁게 설정하여 밀도 있고 세련된 가독성을 확보합니다.
|
|
||||||
* **Weights**: 400(Regular), 500(Medium), 600(SemiBold), 700(Bold).
|
|
||||||
|
|
||||||
3. **컬러 팔레트 (Color Palette)**
|
|
||||||
* **Point Color**: `#1E5149` (Deep Green) - 강조, 활성화 상태, 주요 액션 버튼.
|
|
||||||
* **Text**: Main(`#111827` - Near Black), Muted(`#6B7280` - Grey).
|
|
||||||
* **Border/Divider**: `#E5E7EB` (Light Grey) - 정보 구분을 위한 얇은 실선.
|
|
||||||
* **Background**: `#FFFFFF` (White) / `#F9FAFB` (Off White).
|
|
||||||
|
|
||||||
4. **레이아웃 및 컴포넌트 규칙 (Layout Rules)**
|
|
||||||
* **Box-less Design**: 꼭 필요한 정보 묶음(데이터 그룹화 등)이 아니면 박스 형태의 테두리나 배경 사용을 지양합니다.
|
|
||||||
* **Line-based Division**: 섹션 간의 구분은 1px 두께의 얇은 실선(Border)을 통해 명확히 합니다.
|
|
||||||
* **Table**: 배경색이나 화려한 효과 없이 행(Row) 간의 얇은 구분선만 사용하여 데이터 본연에 집중하게 합니다.
|
|
||||||
* **Input/Button**: 입력 필드와 버튼은 최소한의 보더와 포인트 컬러만 사용하여 정갈하게 표현합니다.
|
|
||||||
* **Modal (모달 공통 규칙)**:
|
|
||||||
* **Header**: 짙은 그린(`#1E5149`) 배경에 화이트 텍스트를 사용하며, 우측 상단에 명확한 'X' 닫기 버튼을 배치합니다.
|
|
||||||
* **Interaction**: 사용자의 편의를 위해 `ESC` 키를 누르거나 모달 바깥 영역(Overlay)을 클릭하면 모달이 닫히도록 구현합니다.
|
|
||||||
* **Layout**: `detail.png` 기준의 2열 그리드 시스템을 권장하며, 하단 우측에 액션 버튼(닫기, 저장 등)을 배치합니다.
|
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
Binary file not shown.
176
db_init.js
176
db_init.js
@@ -1,176 +0,0 @@
|
|||||||
import mysql from 'mysql2/promise';
|
|
||||||
import dotenv from 'dotenv';
|
|
||||||
|
|
||||||
dotenv.config();
|
|
||||||
|
|
||||||
const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
|
|
||||||
|
|
||||||
async function initDB() {
|
|
||||||
const connection = await mysql.createConnection({
|
|
||||||
host: DB_HOST,
|
|
||||||
user: DB_USER,
|
|
||||||
password: DB_PASS,
|
|
||||||
database: DB_NAME,
|
|
||||||
port: parseInt(DB_PORT || '3306'),
|
|
||||||
multipleStatements: true
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('🔄 DB 초기화 시작 (영문 표준 스키마 적용)...');
|
|
||||||
|
|
||||||
const tablesToDrop = [
|
|
||||||
'pc_assets', 'server_assets', 'storage_assets', 'equip_assets', 'mobile_assets',
|
|
||||||
'sw_sub_assets', 'sw_perm_assets', 'cloud_assets', 'sw_users', 'asset_logs'
|
|
||||||
];
|
|
||||||
for (const table of tablesToDrop) {
|
|
||||||
await connection.query(`DROP TABLE IF EXISTS ${table}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const createHardwareTable = (tableName, comment) => `
|
|
||||||
CREATE TABLE ${tableName} (
|
|
||||||
id VARCHAR(50) PRIMARY KEY,
|
|
||||||
corp VARCHAR(100),
|
|
||||||
asset_code VARCHAR(100),
|
|
||||||
purchase_date VARCHAR(50),
|
|
||||||
type VARCHAR(50),
|
|
||||||
detail_purpose VARCHAR(50),
|
|
||||||
purpose VARCHAR(255),
|
|
||||||
details TEXT,
|
|
||||||
current_org VARCHAR(255),
|
|
||||||
prev_org VARCHAR(255),
|
|
||||||
location VARCHAR(255),
|
|
||||||
manager_main VARCHAR(100),
|
|
||||||
manager_sub VARCHAR(100),
|
|
||||||
ip_address VARCHAR(100),
|
|
||||||
remote_tool VARCHAR(100),
|
|
||||||
server_id VARCHAR(100),
|
|
||||||
server_pw VARCHAR(100),
|
|
||||||
model_name VARCHAR(255),
|
|
||||||
mainboard VARCHAR(255) COMMENT '메인보드',
|
|
||||||
os VARCHAR(100),
|
|
||||||
cpu VARCHAR(255),
|
|
||||||
ram VARCHAR(100),
|
|
||||||
gpu VARCHAR(100),
|
|
||||||
storage1 VARCHAR(255),
|
|
||||||
storage2 VARCHAR(255),
|
|
||||||
storage3 VARCHAR(255),
|
|
||||||
monitoring VARCHAR(100),
|
|
||||||
price VARCHAR(100),
|
|
||||||
remarks TEXT,
|
|
||||||
storage_location VARCHAR(255),
|
|
||||||
status VARCHAR(50),
|
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
|
||||||
`;
|
|
||||||
|
|
||||||
await connection.query(createHardwareTable('pc_assets', 'PC'));
|
|
||||||
await connection.query(createHardwareTable('server_assets', 'Server'));
|
|
||||||
await connection.query(createHardwareTable('storage_assets', 'Storage'));
|
|
||||||
await connection.query(createHardwareTable('equip_assets', 'Equipment'));
|
|
||||||
await connection.query(createHardwareTable('mobile_assets', 'Mobile'));
|
|
||||||
|
|
||||||
await connection.query(`
|
|
||||||
CREATE TABLE sw_sub_assets (
|
|
||||||
id VARCHAR(50) PRIMARY KEY,
|
|
||||||
corp VARCHAR(100) COMMENT '구매법인',
|
|
||||||
category VARCHAR(100) COMMENT '분야',
|
|
||||||
dept VARCHAR(100) COMMENT '부서',
|
|
||||||
product_name VARCHAR(255) COMMENT '제품명',
|
|
||||||
license_type VARCHAR(100) COMMENT '라이선스 유형',
|
|
||||||
quantity INT COMMENT '수량',
|
|
||||||
price VARCHAR(100) COMMENT '금액',
|
|
||||||
purchase_date VARCHAR(50) COMMENT '구매일',
|
|
||||||
start_date VARCHAR(50) COMMENT '시작일',
|
|
||||||
expiry_date VARCHAR(50) COMMENT '만료일',
|
|
||||||
vendor VARCHAR(255) COMMENT '구매업체',
|
|
||||||
remarks TEXT COMMENT '비고',
|
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
|
||||||
`);
|
|
||||||
|
|
||||||
await connection.query(`
|
|
||||||
CREATE TABLE sw_perm_assets (
|
|
||||||
id VARCHAR(50) PRIMARY KEY,
|
|
||||||
corp VARCHAR(100) COMMENT '구매법인',
|
|
||||||
category VARCHAR(100) COMMENT '분야',
|
|
||||||
dept VARCHAR(100) COMMENT '부서',
|
|
||||||
product_name VARCHAR(255) COMMENT '제품명',
|
|
||||||
license_key VARCHAR(255) COMMENT '라이선스 키',
|
|
||||||
quantity INT COMMENT '수량',
|
|
||||||
price VARCHAR(100) COMMENT '금액',
|
|
||||||
purchase_date VARCHAR(50) COMMENT '구매일',
|
|
||||||
start_date VARCHAR(50) COMMENT '시작일',
|
|
||||||
expiry_date VARCHAR(50) COMMENT '만료일',
|
|
||||||
vendor VARCHAR(255) COMMENT '구매업체',
|
|
||||||
remarks TEXT COMMENT '비고',
|
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
|
||||||
`);
|
|
||||||
|
|
||||||
await connection.query(`
|
|
||||||
CREATE TABLE cloud_assets (
|
|
||||||
id VARCHAR(50) PRIMARY KEY,
|
|
||||||
platform_name VARCHAR(100),
|
|
||||||
corp VARCHAR(100),
|
|
||||||
dept VARCHAR(100),
|
|
||||||
product_name VARCHAR(255),
|
|
||||||
account_name VARCHAR(255),
|
|
||||||
pay_method VARCHAR(100),
|
|
||||||
pay_day VARCHAR(50),
|
|
||||||
card_num VARCHAR(100),
|
|
||||||
monthly_fee VARCHAR(100),
|
|
||||||
remarks TEXT,
|
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
|
||||||
`);
|
|
||||||
|
|
||||||
await connection.query(`
|
|
||||||
CREATE TABLE sw_users (
|
|
||||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
|
||||||
sw_id VARCHAR(50),
|
|
||||||
corp VARCHAR(100),
|
|
||||||
dept VARCHAR(100),
|
|
||||||
position VARCHAR(50),
|
|
||||||
user_name VARCHAR(100),
|
|
||||||
usage_period VARCHAR(100),
|
|
||||||
doc_name VARCHAR(255),
|
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
|
||||||
`);
|
|
||||||
|
|
||||||
await connection.query(`
|
|
||||||
CREATE TABLE asset_logs (
|
|
||||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
|
||||||
asset_id VARCHAR(50),
|
|
||||||
log_date VARCHAR(50),
|
|
||||||
log_user VARCHAR(100),
|
|
||||||
details TEXT,
|
|
||||||
cost DECIMAL(15,2) DEFAULT 0,
|
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
|
||||||
`);
|
|
||||||
|
|
||||||
await connection.query(`
|
|
||||||
CREATE TABLE ops_domain_assets (
|
|
||||||
id VARCHAR(50) PRIMARY KEY,
|
|
||||||
type VARCHAR(50) COMMENT '유형',
|
|
||||||
corp VARCHAR(100) COMMENT '법인',
|
|
||||||
service_name VARCHAR(255) COMMENT '서비스명',
|
|
||||||
domain_name VARCHAR(255) COMMENT '관리도메인',
|
|
||||||
start_date VARCHAR(50) COMMENT '시작일',
|
|
||||||
expiry_date VARCHAR(50) COMMENT '만료일',
|
|
||||||
price VARCHAR(100) COMMENT '금액',
|
|
||||||
manager_main VARCHAR(100) COMMENT '담당자',
|
|
||||||
manager_sub VARCHAR(100) COMMENT '담당자(부)',
|
|
||||||
remarks TEXT COMMENT '비고',
|
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
|
||||||
`);
|
|
||||||
|
|
||||||
console.log('✅ 모든 테이블이 영문 표준 스키마로 재생성되었습니다.');
|
|
||||||
await connection.end();
|
|
||||||
}
|
|
||||||
|
|
||||||
initDB().catch(err => {
|
|
||||||
console.error('❌ DB 초기화 실패:', err);
|
|
||||||
process.exit(1);
|
|
||||||
});
|
|
||||||
60
docs/plans/PLAN_ASSET_HISTORY.md
Normal file
60
docs/plans/PLAN_ASSET_HISTORY.md
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
# 자산 이력 누적 관리 시스템 (Cumulative Asset History System) 구현 계획
|
||||||
|
|
||||||
|
본 문서는 자산의 라이프사이클(조직, 사용자, 용도, 상태 변동)을 체계적으로 추적하고 누적 관리하기 위한 기술적 설계 및 단계별 구현 계획을 담고 있습니다.
|
||||||
|
|
||||||
|
## 1. 목적
|
||||||
|
- 자산 정보 수정 시 중요 변경 사항을 자동으로 감지하여 이력(Log)화
|
||||||
|
- 과거부터 현재까지의 변동 사항을 타임라인 형태로 시각화하여 자산 흐름 파악
|
||||||
|
- 데이터 정합성을 위해 서버 측에서 변경 전/후 스냅샷 비교 방식 채택
|
||||||
|
|
||||||
|
## 2. 관리 대상 이력 (Watch Fields)
|
||||||
|
다음 항목의 변경이 발생할 경우 이력을 자동 생성합니다.
|
||||||
|
1. **조직 변동**: `current_dept` (현 사용조직) ↔ `previous_dept` 업데이트 포함
|
||||||
|
2. **사용자 변동**: `user_current` (현 사용자) ↔ `previous_user` 업데이트 포함
|
||||||
|
3. **용도 변경**: `asset_type`, `current_role` (예: 개인PC -> 공용PC)
|
||||||
|
4. **상태 변경**: `hw_status` (예: 운영 -> 수리, 재고 -> 폐기 등)
|
||||||
|
|
||||||
|
## 3. 기술 설계 (Technical Design)
|
||||||
|
|
||||||
|
### A. 데이터베이스 (DB)
|
||||||
|
- **대상 테이블**: `asset_history`
|
||||||
|
- **컬럼 구조 활용 및 보완**:
|
||||||
|
- `asset_id`: 대상 자산 식별자
|
||||||
|
- `event_type`: 변경 유형 (DEPT_CHANGE, USER_CHANGE, ROLE_CHANGE, STATUS_CHANGE)
|
||||||
|
- `details`: "상태 변경: 운영 -> 수리" 와 같이 읽기 쉬운 문자열 저장
|
||||||
|
- `cost`: 관련 비용 발생 시 기록 (수리비 등)
|
||||||
|
- `log_user`: 변경을 수행한 작업자
|
||||||
|
- `log_date`: 변경 발생 일시
|
||||||
|
|
||||||
|
### B. 백엔드 (Server-side Logic)
|
||||||
|
- **위치**: `server.js` 의 `POST /api/asset/:category/save` 엔드포인트
|
||||||
|
- **동작 흐름**:
|
||||||
|
1. **Snapshot**: 인서트/업데이트 수행 전, 기존 DB의 데이터를 `SELECT`하여 메모리에 저장.
|
||||||
|
2. **Comparison**: 요청된 신규 데이터와 기존 데이터를 필드별로 대조.
|
||||||
|
3. **Auto-logging**: 변경점이 발견되면 `asset_history` 테이블에 즉시 인서트.
|
||||||
|
4. **Transaction**: 모든 로그 생성이 자산 저장과 하나의 트랜잭션으로 묶여야 함.
|
||||||
|
|
||||||
|
### C. 프론트엔드 (UI/UX)
|
||||||
|
- **위치**: `HWModal.ts` 우측 `modal-history-area`
|
||||||
|
- **개선 사항**:
|
||||||
|
- `renderHistory()` 함수를 고도화하여 이벤트 타입별 아이콘/컬러 적용.
|
||||||
|
- "이전 값 ➔ 이후 값" 형태의 직관적인 레이아웃 도입.
|
||||||
|
- 스크롤을 통한 무제한 누적 이력 조회 지원.
|
||||||
|
|
||||||
|
## 4. 단계별 구현 로직
|
||||||
|
|
||||||
|
### 1단계: 서버 로직 고도화
|
||||||
|
- `server.js`에 비교 함수(`compareAndLog`) 구현.
|
||||||
|
- 각 자산 카테고리별 저장 로직에 비교 로직 삽입.
|
||||||
|
|
||||||
|
### 2단계: DB 데이터 마이그레이션 (필요시)
|
||||||
|
- 기존 자산의 `current_dept` 등을 `previous_dept`로 밀어내는 로직 점검.
|
||||||
|
|
||||||
|
### 3단계: UI 타임라인 렌더링 개선
|
||||||
|
- `modal.css`에 이력 전용 스타일(이벤트 뱃지 등) 추가.
|
||||||
|
- `HWModal.ts`에서 최신 로그를 실시간으로 다시 불러오는 로직 확인.
|
||||||
|
|
||||||
|
## 5. 검증 계획
|
||||||
|
- **자동 감지 테스트**: 상태 변경 후 저장 시 우측 이력에 즉시 한 줄이 추가되는지 확인.
|
||||||
|
- **다중 변경 테스트**: 조직과 사용자를 동시에 변경했을 때 두 개의 로그가 생성되는지 확인.
|
||||||
|
- **데이터 무결성**: 수정을 취소하거나 저장 실패 시 로그가 남지 않는지(Transaction) 확인.
|
||||||
48
docs/plans/design_rule.md
Normal file
48
docs/plans/design_rule.md
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
# 🎨 ITAM 시스템 디자인 가이드 (Design Guide)
|
||||||
|
|
||||||
|
본 문서는 ITAM(IT Asset Management System)의 시각적 일관성과 사용자 경험을 유지하기 위한 핵심 디자인 원칙을 정의합니다.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 1. 디자인 철학 (Design Philosophy)
|
||||||
|
* **Minimalist & Stark**: Vercel 스타일의 극도로 간결하고 현대적인 디자인을 지향합니다.
|
||||||
|
* **Achromatic Base**: 블랙(#171717)과 화이트를 기본으로 하며, 정보의 구분은 얇은 헤어라인(#ebebeb)을 사용합니다.
|
||||||
|
* **Fluid & Responsive**: 고정된 픽셀 대신 화면 크기에 비례하여 UI 밀도가 변하는 유동적 스케일링 시스템을 적용합니다.
|
||||||
|
|
||||||
|
### 2. 타이포그래피 및 자간 (Typography & Letter-spacing)
|
||||||
|
* **Font Family**: `Pretendard` 단일 폰트를 사용합니다.
|
||||||
|
* **Letter-spacing**: 모든 텍스트에 `-0.02em` (-2%) 자간을 적용하여 밀도 있는 가독성을 확보합니다.
|
||||||
|
* **Typography Scale**:
|
||||||
|
* **XS**: `clamp(10px, 1.2vmin + 0.2vw, 15px)` - 보조 텍스트
|
||||||
|
* **SM**: `clamp(12px, 1.4vmin + 0.3vw, 18px)` - 필터, 일반 라벨, 테이블 헤더
|
||||||
|
* **Base**: `clamp(14px, 1.6vmin + 0.4vw, 22px)` - 본문, 테이블 데이터
|
||||||
|
* **MD**: `clamp(18px, 2.5vmin + 0.5vw, 30px)` - 섹션 소제목
|
||||||
|
* **LG**: `clamp(24px, 4vmin + 0.6vw, 48px)` - 페이지 대제목
|
||||||
|
* **XL**: `clamp(32px, 6vmin + 0.8vw, 72px)` - 핵심 통계 지표
|
||||||
|
* **Layout Units**:
|
||||||
|
* **Header Height**: `clamp(50px, 8vmin, 90px)`
|
||||||
|
* **Base Spacing**: `clamp(0.75rem, 3vmin, 3rem)`
|
||||||
|
* **Radius**: `clamp(6px, 1.5vmin, 16px)`
|
||||||
|
|
||||||
|
### 3. 컬러 팔레트 (Vercel Stark Palette)
|
||||||
|
* **Primary**: `#171717` (Stark Black) - 텍스트, 주요 버튼, 강조 요소.
|
||||||
|
* **Secondary**: `#888888` (Mute) - 보조 텍스트, 비활성 아이콘.
|
||||||
|
* **Border**: `#ebebeb` (Hairline) - 정보 구분선.
|
||||||
|
* **Background**: `#ffffff` (Canvas), `#fafafa` (Soft), `#f5f5f5` (Soft 2).
|
||||||
|
* **Accents**: Blue(`#0070f3`), Orange(`#f5a623`), Danger(`#ee0000`).
|
||||||
|
|
||||||
|
### 4. 컴포넌트 및 레이아웃 규칙 (Component Rules)
|
||||||
|
* **Header & Navigation**:
|
||||||
|
* 상단 1열 통합 바 형태를 유지하며, GNB와 LNB를 동일 라인에 배치하여 공간을 효율적으로 사용합니다.
|
||||||
|
* **Unified Filter Bar**:
|
||||||
|
* 검색창과 필터는 상단 타이틀 바로 아래(기존 액션 버튼 라인)까지 올려서 배치합니다.
|
||||||
|
* **Action Group**: '자산 추가', '부품 마스터' 등의 주요 액션 버튼은 검색창과 같은 라인의 최우측에 정렬합니다.
|
||||||
|
* **Dashboard**:
|
||||||
|
* **Single-Screen View**: 1920*1080(또는 1920*919) 해상도에서 스크롤 없이 한 화면에 핵심 정보가 모두 보이도록 최적화합니다.
|
||||||
|
* **Fixed Charts**: 차트 내부 숫자나 요소에 애니메이션(`animation: false`) 및 플로팅 레이블을 배제하여 정적인 안정성을 확보합니다.
|
||||||
|
* **Footer**:
|
||||||
|
* 화면 최하단에 위치하며, 텍스트는 **우측 정렬(Right-aligned)**합니다.
|
||||||
|
* 상단에 1px 헤어라인 구분선을 가집니다.
|
||||||
|
* **Security & UX**:
|
||||||
|
* **Text Selection**: 사용자의 실수에 의한 UI 드래그 방지를 위해 입력창(`input`, `textarea`)을 제외한 전체 영역의 텍스트 선택을 차단합니다.
|
||||||
|
* **View Toggle**: '서버' 탭 등 특정 탭에서만 '목록보기' 체크박스를 통해 뷰를 전환하며, 그 외 화면은 리스트 중심의 UI를 제공합니다.
|
||||||
BIN
image 92.png
BIN
image 92.png
Binary file not shown.
|
Before Width: | Height: | Size: 135 KiB |
22
index.html
22
index.html
@@ -5,26 +5,21 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>ITAM 자산관리 ERP</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/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>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="app-layout">
|
<div class="app-layout" id="app-layout" style="display: none;">
|
||||||
<!-- Single-Line Integrated Header -->
|
<!-- Single-Line Integrated Header -->
|
||||||
<header class="main-header">
|
<header class="main-header">
|
||||||
<div class="header-container" id="nav-container">
|
<div class="header-container" id="nav-container">
|
||||||
<div class="brand">
|
<div class="brand">
|
||||||
<img src="/image 92.png" alt="Logo" class="main-logo" />
|
<img src="/image 92.png" alt="Logo" class="main-logo" />
|
||||||
<h1>자산관리시스템<span class="sub-title">(Digital Asset Control Hub System)</span></h1>
|
<h1>한맥자산관리시스템</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Navigation (GNB + LNB in same row) -->
|
<!-- Navigation (GNB + LNB in same row) -->
|
||||||
@@ -33,6 +28,14 @@
|
|||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="header-actions">
|
<div class="header-actions">
|
||||||
|
<div class="role-switcher" id="role-switcher">
|
||||||
|
<span class="role-label user active">실무자</span>
|
||||||
|
<label class="switch">
|
||||||
|
<input type="checkbox" id="role-toggle-checkbox">
|
||||||
|
<span class="slider round"></span>
|
||||||
|
</label>
|
||||||
|
<span class="role-label admin">관리자</span>
|
||||||
|
</div>
|
||||||
<button id="btn-admin-page" class="hidden"></button> <!-- JS 호환용 숨김 -->
|
<button id="btn-admin-page" class="hidden"></button> <!-- JS 호환용 숨김 -->
|
||||||
<button id="btn-open-guide-header" class="btn btn-outline" title="프로세스 가이드">
|
<button id="btn-open-guide-header" class="btn btn-outline" title="프로세스 가이드">
|
||||||
<i data-lucide="book-open"></i> 가이드
|
<i data-lucide="book-open"></i> 가이드
|
||||||
@@ -48,8 +51,7 @@
|
|||||||
|
|
||||||
<!-- Footer -->
|
<!-- Footer -->
|
||||||
<footer class="main-footer">
|
<footer class="main-footer">
|
||||||
<div id="secret-cloud-trigger" style="width: 20px; height: 20px; cursor: pointer; opacity: 0.1; background: #000; border-radius: 4px; position: absolute; left: 1rem;"></div>
|
<p>© 2026 BARON Consultant Co,Ltd. All rights reserved.</p>
|
||||||
<p>Powered by BARON Consultant Co,Ltd</p>
|
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
726
map_config.json
Normal file
726
map_config.json
Normal file
@@ -0,0 +1,726 @@
|
|||||||
|
{
|
||||||
|
"img/location_photo/IDC/서관205.png": [
|
||||||
|
{
|
||||||
|
"x": "50.78",
|
||||||
|
"y": "1.53",
|
||||||
|
"w": "46.10",
|
||||||
|
"h": "6.27",
|
||||||
|
"asset_id": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "50.78",
|
||||||
|
"y": "10.35",
|
||||||
|
"w": "46.10",
|
||||||
|
"h": "6.27",
|
||||||
|
"asset_id": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "50.78",
|
||||||
|
"y": "19.06",
|
||||||
|
"w": "46.10",
|
||||||
|
"h": "6.50",
|
||||||
|
"asset_id": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "50.78",
|
||||||
|
"y": "27.89",
|
||||||
|
"w": "46.10",
|
||||||
|
"h": "6.50",
|
||||||
|
"asset_id": "server_1779761946023_14"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "50.78",
|
||||||
|
"y": "36.71",
|
||||||
|
"w": "46.10",
|
||||||
|
"h": "6.50",
|
||||||
|
"asset_id": "server_1779761946023_18"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "50.78",
|
||||||
|
"y": "45.64",
|
||||||
|
"w": "46.10",
|
||||||
|
"h": "6.32",
|
||||||
|
"asset_id": "server_1779761946023_23"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "50.78",
|
||||||
|
"y": "54.25",
|
||||||
|
"w": "46.10",
|
||||||
|
"h": "6.54",
|
||||||
|
"asset_id": "server_1779761946023_24"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "50.78",
|
||||||
|
"y": "63.29",
|
||||||
|
"w": "46.10",
|
||||||
|
"h": "6.50",
|
||||||
|
"asset_id": "server_1779761946023_1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "50.78",
|
||||||
|
"y": "72.00",
|
||||||
|
"w": "46.10",
|
||||||
|
"h": "6.32",
|
||||||
|
"asset_id": "server_1779761946023_21"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "50.78",
|
||||||
|
"y": "81.92",
|
||||||
|
"w": "18.40",
|
||||||
|
"h": "15.58",
|
||||||
|
"asset_id": "server_1779761946023_17"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "78.62",
|
||||||
|
"y": "81.92",
|
||||||
|
"w": "18.31",
|
||||||
|
"h": "15.58",
|
||||||
|
"asset_id": "server_1779761946023_20"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"img/location_photo/IDC/서관202.png": [
|
||||||
|
{
|
||||||
|
"x": "56.35",
|
||||||
|
"y": "64.02",
|
||||||
|
"w": "40.87",
|
||||||
|
"h": "6.24",
|
||||||
|
"asset_id": "server_1779761946023_9"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "56.35",
|
||||||
|
"y": "71.57",
|
||||||
|
"w": "40.87",
|
||||||
|
"h": "6.24",
|
||||||
|
"asset_id": "server_1779761946023_10"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "56.35",
|
||||||
|
"y": "79.17",
|
||||||
|
"w": "40.87",
|
||||||
|
"h": "6.24",
|
||||||
|
"asset_id": "server_1779761946023_26"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "56.35",
|
||||||
|
"y": "86.66",
|
||||||
|
"w": "40.87",
|
||||||
|
"h": "6.24",
|
||||||
|
"asset_id": "server_1779761946023_8"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "56.35",
|
||||||
|
"y": "32.01",
|
||||||
|
"w": "40.87",
|
||||||
|
"h": "6.24",
|
||||||
|
"asset_id": null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"img/location_photo/IDC/서관203.png": [
|
||||||
|
{
|
||||||
|
"x": "56.07",
|
||||||
|
"y": "2.54",
|
||||||
|
"w": "41.11",
|
||||||
|
"h": "6.52",
|
||||||
|
"asset_id": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "56.07",
|
||||||
|
"y": "10.12",
|
||||||
|
"w": "41.11",
|
||||||
|
"h": "6.52",
|
||||||
|
"asset_id": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "56.07",
|
||||||
|
"y": "17.80",
|
||||||
|
"w": "41.11",
|
||||||
|
"h": "6.52",
|
||||||
|
"asset_id": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "56.07",
|
||||||
|
"y": "63.51",
|
||||||
|
"w": "41.11",
|
||||||
|
"h": "6.52",
|
||||||
|
"asset_id": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "56.07",
|
||||||
|
"y": "71.19",
|
||||||
|
"w": "41.11",
|
||||||
|
"h": "6.52",
|
||||||
|
"asset_id": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "56.07",
|
||||||
|
"y": "87.70",
|
||||||
|
"w": "41.11",
|
||||||
|
"h": "6.52",
|
||||||
|
"asset_id": "server_1779761946023_25"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"img/location_photo/IDC/서관204.png": [
|
||||||
|
{
|
||||||
|
"x": "48.87",
|
||||||
|
"y": "2.73",
|
||||||
|
"w": "47.80",
|
||||||
|
"h": "6.27",
|
||||||
|
"asset_id": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "48.87",
|
||||||
|
"y": "10.38",
|
||||||
|
"w": "47.80",
|
||||||
|
"h": "6.27",
|
||||||
|
"asset_id": "server_1779761946023_3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "48.87",
|
||||||
|
"y": "17.93",
|
||||||
|
"w": "47.80",
|
||||||
|
"h": "6.50",
|
||||||
|
"asset_id": "server_1779761946023_6"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "48.87",
|
||||||
|
"y": "25.49",
|
||||||
|
"w": "47.80",
|
||||||
|
"h": "6.50",
|
||||||
|
"asset_id": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "48.87",
|
||||||
|
"y": "33.17",
|
||||||
|
"w": "47.80",
|
||||||
|
"h": "6.50",
|
||||||
|
"asset_id": "server_1779761946023_5"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "48.87",
|
||||||
|
"y": "40.59",
|
||||||
|
"w": "47.80",
|
||||||
|
"h": "6.50",
|
||||||
|
"asset_id": "server_1779761946023_4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "48.87",
|
||||||
|
"y": "48.40",
|
||||||
|
"w": "47.80",
|
||||||
|
"h": "6.50",
|
||||||
|
"asset_id": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "48.87",
|
||||||
|
"y": "55.95",
|
||||||
|
"w": "47.80",
|
||||||
|
"h": "6.50",
|
||||||
|
"asset_id": "server_1779761946023_19"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "48.87",
|
||||||
|
"y": "63.63",
|
||||||
|
"w": "47.80",
|
||||||
|
"h": "6.50",
|
||||||
|
"asset_id": "server_1779761946023_2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "48.87",
|
||||||
|
"y": "71.06",
|
||||||
|
"w": "47.80",
|
||||||
|
"h": "6.50",
|
||||||
|
"asset_id": "server_1779761946023_0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "48.87",
|
||||||
|
"y": "78.74",
|
||||||
|
"w": "47.80",
|
||||||
|
"h": "6.50",
|
||||||
|
"asset_id": "server_1779761946023_7"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "48.87",
|
||||||
|
"y": "86.68",
|
||||||
|
"w": "18.99",
|
||||||
|
"h": "12.62",
|
||||||
|
"asset_id": "server_1779761946023_29"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"img/location_photo/IDC/동관53.png": [
|
||||||
|
{
|
||||||
|
"x": "61.62",
|
||||||
|
"y": "3.08",
|
||||||
|
"w": "35.96",
|
||||||
|
"h": "7.90",
|
||||||
|
"asset_id": "server_1779761946023_13"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "61.62",
|
||||||
|
"y": "12.68",
|
||||||
|
"w": "35.96",
|
||||||
|
"h": "7.90",
|
||||||
|
"asset_id": "server_1779761946023_15"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "61.62",
|
||||||
|
"y": "21.75",
|
||||||
|
"w": "35.96",
|
||||||
|
"h": "7.90",
|
||||||
|
"asset_id": "server_1779761946023_22"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"img/location_photo/IDC/동관54.png": [
|
||||||
|
{
|
||||||
|
"x": "54.71",
|
||||||
|
"y": "2.57",
|
||||||
|
"w": "42.42",
|
||||||
|
"h": "6.50",
|
||||||
|
"asset_id": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "54.71",
|
||||||
|
"y": "10.38",
|
||||||
|
"w": "42.42",
|
||||||
|
"h": "6.50",
|
||||||
|
"asset_id": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "54.71",
|
||||||
|
"y": "27.15",
|
||||||
|
"w": "42.42",
|
||||||
|
"h": "6.62",
|
||||||
|
"asset_id": "server_1779761946023_12"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "54.71",
|
||||||
|
"y": "43.54",
|
||||||
|
"w": "42.42",
|
||||||
|
"h": "6.50",
|
||||||
|
"asset_id": "server_1779761946023_11"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "54.71",
|
||||||
|
"y": "54.93",
|
||||||
|
"w": "42.42",
|
||||||
|
"h": "6.50",
|
||||||
|
"asset_id": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "54.71",
|
||||||
|
"y": "70.16",
|
||||||
|
"w": "42.42",
|
||||||
|
"h": "6.50",
|
||||||
|
"asset_id": "server_1779761946023_27"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "54.71",
|
||||||
|
"y": "79.51",
|
||||||
|
"w": "42.42",
|
||||||
|
"h": "6.50",
|
||||||
|
"asset_id": "server_1779761946023_28"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"img/location_photo/한맥빌딩/MDF실/MDF_1.png": [
|
||||||
|
{
|
||||||
|
"x": "49.33",
|
||||||
|
"y": "14.99",
|
||||||
|
"w": "7.35",
|
||||||
|
"h": "11.22",
|
||||||
|
"asset_id": "cdp0e0c"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "59.23",
|
||||||
|
"y": "14.99",
|
||||||
|
"w": "7.35",
|
||||||
|
"h": "11.22",
|
||||||
|
"asset_id": "emys9gb"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "69.22",
|
||||||
|
"y": "14.99",
|
||||||
|
"w": "7.35",
|
||||||
|
"h": "11.22",
|
||||||
|
"asset_id": "vmbv3pj"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "79.12",
|
||||||
|
"y": "14.99",
|
||||||
|
"w": "7.35",
|
||||||
|
"h": "11.22",
|
||||||
|
"asset_id": "4fysk40"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "88.97",
|
||||||
|
"y": "14.99",
|
||||||
|
"w": "7.35",
|
||||||
|
"h": "11.22",
|
||||||
|
"asset_id": "x6jaehn"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "48.57",
|
||||||
|
"y": "34.11",
|
||||||
|
"w": "7.52",
|
||||||
|
"h": "11.44",
|
||||||
|
"asset_id": "t87p0l0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "56.80",
|
||||||
|
"y": "34.11",
|
||||||
|
"w": "7.52",
|
||||||
|
"h": "11.44",
|
||||||
|
"asset_id": "ywosxiv"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "64.94",
|
||||||
|
"y": "34.11",
|
||||||
|
"w": "7.52",
|
||||||
|
"h": "11.44",
|
||||||
|
"asset_id": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "72.89",
|
||||||
|
"y": "34.11",
|
||||||
|
"w": "7.56",
|
||||||
|
"h": "11.44",
|
||||||
|
"asset_id": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "81.22",
|
||||||
|
"y": "34.06",
|
||||||
|
"w": "7.52",
|
||||||
|
"h": "11.44",
|
||||||
|
"asset_id": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "89.36",
|
||||||
|
"y": "34.06",
|
||||||
|
"w": "7.52",
|
||||||
|
"h": "11.44",
|
||||||
|
"asset_id": "tormk2l"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "48.57",
|
||||||
|
"y": "53.06",
|
||||||
|
"w": "9.06",
|
||||||
|
"h": "20.99",
|
||||||
|
"asset_id": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "58.48",
|
||||||
|
"y": "53.06",
|
||||||
|
"w": "9.06",
|
||||||
|
"h": "20.99",
|
||||||
|
"asset_id": "server_1779761946023_30"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "68.55",
|
||||||
|
"y": "53.06",
|
||||||
|
"w": "9.06",
|
||||||
|
"h": "20.99",
|
||||||
|
"asset_id": "server_1779761946023_31"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "78.54",
|
||||||
|
"y": "53.06",
|
||||||
|
"w": "9.01",
|
||||||
|
"h": "20.99",
|
||||||
|
"asset_id": "server_1779761946023_32"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "89.36",
|
||||||
|
"y": "53.22",
|
||||||
|
"w": "7.45",
|
||||||
|
"h": "10.11",
|
||||||
|
"asset_id": "TEMP-03g59cx"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "89.36",
|
||||||
|
"y": "64.92",
|
||||||
|
"w": "7.45",
|
||||||
|
"h": "9.81",
|
||||||
|
"asset_id": "TEMP-06l8zjx"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "48.57",
|
||||||
|
"y": "77.41",
|
||||||
|
"w": "9.18",
|
||||||
|
"h": "21.45",
|
||||||
|
"asset_id": "server_1779761946023_34"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "58.56",
|
||||||
|
"y": "77.41",
|
||||||
|
"w": "9.23",
|
||||||
|
"h": "21.45",
|
||||||
|
"asset_id": "server_1779761946023_35"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "68.63",
|
||||||
|
"y": "77.41",
|
||||||
|
"w": "9.06",
|
||||||
|
"h": "21.45",
|
||||||
|
"asset_id": "server_1779761946023_36"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "78.71",
|
||||||
|
"y": "77.41",
|
||||||
|
"w": "8.98",
|
||||||
|
"h": "21.45",
|
||||||
|
"asset_id": "server_1779761946023_37"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"img/location_photo/한맥빌딩/MDF실/MDF_2.png": [
|
||||||
|
{
|
||||||
|
"x": "56.59",
|
||||||
|
"y": "44.53",
|
||||||
|
"w": "40.65",
|
||||||
|
"h": "6.90",
|
||||||
|
"asset_id": "1vbkbzr"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "56.59",
|
||||||
|
"y": "54.80",
|
||||||
|
"w": "40.65",
|
||||||
|
"h": "6.90",
|
||||||
|
"asset_id": "0ru63ay"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "56.59",
|
||||||
|
"y": "65.94",
|
||||||
|
"w": "40.65",
|
||||||
|
"h": "6.90",
|
||||||
|
"asset_id": "server_1779761946023_40"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"img/location_photo/한맥빌딩/MDF실/MDF_3.png": [
|
||||||
|
{
|
||||||
|
"x": "56.71",
|
||||||
|
"y": "13.20",
|
||||||
|
"w": "40.58",
|
||||||
|
"h": "6.90",
|
||||||
|
"asset_id": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "56.71",
|
||||||
|
"y": "23.57",
|
||||||
|
"w": "40.58",
|
||||||
|
"h": "6.90",
|
||||||
|
"asset_id": "8aeog58"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "56.71",
|
||||||
|
"y": "34.57",
|
||||||
|
"w": "40.58",
|
||||||
|
"h": "6.90",
|
||||||
|
"asset_id": "ywosxiv"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "56.71",
|
||||||
|
"y": "44.69",
|
||||||
|
"w": "40.58",
|
||||||
|
"h": "6.90",
|
||||||
|
"asset_id": "1vbkbzr"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "56.71",
|
||||||
|
"y": "54.80",
|
||||||
|
"w": "40.58",
|
||||||
|
"h": "6.90",
|
||||||
|
"asset_id": "0ru63ay"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "56.71",
|
||||||
|
"y": "65.81",
|
||||||
|
"w": "40.58",
|
||||||
|
"h": "6.90",
|
||||||
|
"asset_id": "server_1779761946023_40"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "56.71",
|
||||||
|
"y": "76.05",
|
||||||
|
"w": "40.58",
|
||||||
|
"h": "6.90",
|
||||||
|
"asset_id": null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"img/location_photo/한맥빌딩/MDF실/MDF_4.png": [
|
||||||
|
{
|
||||||
|
"x": "52.36",
|
||||||
|
"y": "64.02",
|
||||||
|
"w": "44.60",
|
||||||
|
"h": "6.73",
|
||||||
|
"asset_id": "5tbpuy4"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"img/location_photo/기술개발센터/서버실/서버실_1.png": [
|
||||||
|
{
|
||||||
|
"x": "69.45",
|
||||||
|
"y": "3.30",
|
||||||
|
"w": "8.58",
|
||||||
|
"h": "11.45",
|
||||||
|
"asset_id": "server_1779761946023_41"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "79.05",
|
||||||
|
"y": "3.30",
|
||||||
|
"w": "12.02",
|
||||||
|
"h": "11.45",
|
||||||
|
"asset_id": "server_1779761946023_42"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "90.16",
|
||||||
|
"y": "26.04",
|
||||||
|
"w": "8.43",
|
||||||
|
"h": "21.11",
|
||||||
|
"asset_id": "server_1779761946023_43"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "53.04",
|
||||||
|
"y": "52.91",
|
||||||
|
"w": "8.43",
|
||||||
|
"h": "21.11",
|
||||||
|
"asset_id": "server_1779761946023_44"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "62.36",
|
||||||
|
"y": "52.91",
|
||||||
|
"w": "8.43",
|
||||||
|
"h": "21.11",
|
||||||
|
"asset_id": "server_1779761946023_45"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "71.65",
|
||||||
|
"y": "52.91",
|
||||||
|
"w": "8.43",
|
||||||
|
"h": "21.11",
|
||||||
|
"asset_id": "server_1779761946023_46"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "80.87",
|
||||||
|
"y": "52.91",
|
||||||
|
"w": "8.43",
|
||||||
|
"h": "21.11",
|
||||||
|
"asset_id": "server_1779761946023_47"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "90.08",
|
||||||
|
"y": "52.91",
|
||||||
|
"w": "8.43",
|
||||||
|
"h": "21.11",
|
||||||
|
"asset_id": "server_1779761946023_48"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "43.78",
|
||||||
|
"y": "78.00",
|
||||||
|
"w": "8.50",
|
||||||
|
"h": "21.23",
|
||||||
|
"asset_id": "19kai41"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "53.15",
|
||||||
|
"y": "78.00",
|
||||||
|
"w": "8.43",
|
||||||
|
"h": "21.23",
|
||||||
|
"asset_id": "server_1779761946023_50"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "62.36",
|
||||||
|
"y": "78.00",
|
||||||
|
"w": "8.43",
|
||||||
|
"h": "21.23",
|
||||||
|
"asset_id": "server_1779761946023_51"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "71.36",
|
||||||
|
"y": "78.00",
|
||||||
|
"w": "8.43",
|
||||||
|
"h": "21.23",
|
||||||
|
"asset_id": "server_1779761946023_52"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "80.53",
|
||||||
|
"y": "78.00",
|
||||||
|
"w": "8.43",
|
||||||
|
"h": "21.23",
|
||||||
|
"asset_id": "srlmyar"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "89.77",
|
||||||
|
"y": "78.00",
|
||||||
|
"w": "8.50",
|
||||||
|
"h": "21.23",
|
||||||
|
"asset_id": "server_1779761946023_54"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"img/location_photo/기술개발센터/서버실/서버실_2.png": [
|
||||||
|
{
|
||||||
|
"x": "49.60",
|
||||||
|
"y": "1.93",
|
||||||
|
"w": "47.19",
|
||||||
|
"h": "6.75",
|
||||||
|
"asset_id": "server_1779761946023_55"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "49.60",
|
||||||
|
"y": "12.04",
|
||||||
|
"w": "47.19",
|
||||||
|
"h": "6.75",
|
||||||
|
"asset_id": "server_1779761946023_56"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "49.60",
|
||||||
|
"y": "21.39",
|
||||||
|
"w": "47.19",
|
||||||
|
"h": "6.75",
|
||||||
|
"asset_id": "server_1779761946023_57"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "49.60",
|
||||||
|
"y": "30.73",
|
||||||
|
"w": "47.19",
|
||||||
|
"h": "6.75",
|
||||||
|
"asset_id": "server_1779761946023_58"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "49.60",
|
||||||
|
"y": "39.82",
|
||||||
|
"w": "47.19",
|
||||||
|
"h": "6.75",
|
||||||
|
"asset_id": "server_1779761946023_59"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "49.60",
|
||||||
|
"y": "50.13",
|
||||||
|
"w": "47.19",
|
||||||
|
"h": "6.75",
|
||||||
|
"asset_id": "server_1779761946023_60"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "49.60",
|
||||||
|
"y": "59.28",
|
||||||
|
"w": "47.19",
|
||||||
|
"h": "6.75",
|
||||||
|
"asset_id": "server_1779761946023_53"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "49.60",
|
||||||
|
"y": "68.63",
|
||||||
|
"w": "47.19",
|
||||||
|
"h": "6.75",
|
||||||
|
"asset_id": "server_1779761946023_62"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "49.60",
|
||||||
|
"y": "77.84",
|
||||||
|
"w": "47.19",
|
||||||
|
"h": "6.75",
|
||||||
|
"asset_id": "server_1779761946023_63"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": "49.60",
|
||||||
|
"y": "86.93",
|
||||||
|
"w": "47.19",
|
||||||
|
"h": "6.75",
|
||||||
|
"asset_id": "server_1779761946023_64"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
42
map_editor.html
Normal file
42
map_editor.html
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ko">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>ITAM Map Coordinate Editor v3.0</title>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
|
||||||
|
</head>
|
||||||
|
<body class="editor-body">
|
||||||
|
|
||||||
|
<!-- Left: File Selector -->
|
||||||
|
<div class="file-sidebar" id="file-sidebar">
|
||||||
|
<!-- Rendered by MapEditor.ts -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Center: Main Editor -->
|
||||||
|
<div class="editor-container" id="container">
|
||||||
|
<div class="img-wrapper" id="wrapper">
|
||||||
|
<img src="" id="target-img" alt="Map Image">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right: Control Panel -->
|
||||||
|
<div class="sidebar">
|
||||||
|
<h2>Map Editor <small class="editor-version">v3.0</small></h2>
|
||||||
|
<div class="current-path" id="current-path">파일을 선택하세요</div>
|
||||||
|
<p>
|
||||||
|
드래그하여 구역을 정의하세요. 저장 버튼을 누르면 즉시 시스템에 반영됩니다.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="box-list" id="box-list"></div>
|
||||||
|
|
||||||
|
<div class="actions">
|
||||||
|
<button id="btn-clear-all" class="btn btn-outline">전체 삭제</button>
|
||||||
|
<button id="btn-save-server" class="btn btn-primary">서버에 즉시 저장</button>
|
||||||
|
<div id="save-status"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module" src="/src/map-editor-main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
public/img/image_92.png
Normal file
BIN
public/img/image_92.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
BIN
public/img/location_photo/IDC/동관53.png
Normal file
BIN
public/img/location_photo/IDC/동관53.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 MiB |
BIN
public/img/location_photo/IDC/동관54.png
Normal file
BIN
public/img/location_photo/IDC/동관54.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 MiB |
BIN
public/img/location_photo/IDC/서관202.png
Normal file
BIN
public/img/location_photo/IDC/서관202.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 MiB |
BIN
public/img/location_photo/IDC/서관203.png
Normal file
BIN
public/img/location_photo/IDC/서관203.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 MiB |
BIN
public/img/location_photo/IDC/서관204.png
Normal file
BIN
public/img/location_photo/IDC/서관204.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
BIN
public/img/location_photo/IDC/서관205.png
Normal file
BIN
public/img/location_photo/IDC/서관205.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 MiB |
BIN
public/img/location_photo/기술개발센터/서버실/서버실_1.png
Normal file
BIN
public/img/location_photo/기술개발센터/서버실/서버실_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 MiB |
BIN
public/img/location_photo/기술개발센터/서버실/서버실_2.png
Normal file
BIN
public/img/location_photo/기술개발센터/서버실/서버실_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 MiB |
BIN
public/img/location_photo/기술개발센터/센터내부/센터내부.png
Normal file
BIN
public/img/location_photo/기술개발센터/센터내부/센터내부.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 388 KiB |
@@ -0,0 +1,354 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ko">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Center Chair Map (View Only)</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--ink: #152330;
|
||||||
|
--muted: #627286;
|
||||||
|
--paper: rgba(255,255,255,0.86);
|
||||||
|
--line: rgba(21,35,48,0.1);
|
||||||
|
--accent: #0f766e;
|
||||||
|
--bg: #edf2f6;
|
||||||
|
}
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "IBM Plex Sans KR", "Pretendard", sans-serif;
|
||||||
|
color: var(--ink);
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at top left, rgba(15,118,110,0.11), transparent 22%),
|
||||||
|
linear-gradient(180deg, #f5f8fb 0%, #e8eef3 100%);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.page {
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.shell {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.panel {
|
||||||
|
border-radius: 0;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
backdrop-filter: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.viewer {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.viewer-head {
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
left: 16px;
|
||||||
|
z-index: 2;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.chip {
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: rgba(255,255,255,0.82);
|
||||||
|
border: 1px solid rgba(255,255,255,0.94);
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
box-shadow: 0 8px 24px rgba(21,35,48,0.08);
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.viewer-actions {
|
||||||
|
position: absolute;
|
||||||
|
left: 16px;
|
||||||
|
top: 64px;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 10px 14px;
|
||||||
|
font: inherit;
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
color: white;
|
||||||
|
background: linear-gradient(135deg, #0f766e, #115e59);
|
||||||
|
box-shadow: 0 10px 22px rgba(15,118,110,0.18);
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
display: block;
|
||||||
|
cursor: grab;
|
||||||
|
}
|
||||||
|
canvas.dragging { cursor: grabbing; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page">
|
||||||
|
<div class="shell">
|
||||||
|
<main class="panel viewer">
|
||||||
|
<div class="viewer-head">
|
||||||
|
<div class="chip" id="scale-chip"></div>
|
||||||
|
</div>
|
||||||
|
<div class="viewer-actions">
|
||||||
|
<button type="button" id="fit-btn">전체 맞춤</button>
|
||||||
|
</div>
|
||||||
|
<canvas id="canvas"></canvas>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="./center_chair_people_payload.js?v=20260403a"></script>
|
||||||
|
<script>
|
||||||
|
const DATA = window.CHAIR_MAP_DATA;
|
||||||
|
function decodeSegments(base64) {
|
||||||
|
const binary = atob(base64);
|
||||||
|
const bytes = new Uint8Array(binary.length);
|
||||||
|
for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
|
||||||
|
return new Int32Array(bytes.buffer);
|
||||||
|
}
|
||||||
|
const bgTileRanges = DATA.bgTileRanges;
|
||||||
|
const bgSegValues = decodeSegments(DATA.bgSegsB64);
|
||||||
|
const chairSegValues = decodeSegments(DATA.chairSegsB64);
|
||||||
|
const chairs = DATA.chairs.map(([key, name, kind, start, count]) => ({
|
||||||
|
key, name, kind, start, count
|
||||||
|
}));
|
||||||
|
const meta = DATA.meta;
|
||||||
|
const world = meta.headerBounds;
|
||||||
|
const canvas = document.getElementById("canvas");
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
const scaleChip = document.getElementById("scale-chip");
|
||||||
|
|
||||||
|
// --- Added for Point Picking & Marker ---
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
let markerX = params.get('markerX') ? parseFloat(params.get('markerX')) : null;
|
||||||
|
let markerY = params.get('markerY') ? parseFloat(params.get('markerY')) : null;
|
||||||
|
|
||||||
|
const chairGeometry = chairs.map((chair) => {
|
||||||
|
let minX = Infinity;
|
||||||
|
let minY = Infinity;
|
||||||
|
let maxX = -Infinity;
|
||||||
|
let maxY = -Infinity;
|
||||||
|
const path = new Path2D();
|
||||||
|
for (let i = chair.start; i < chair.start + chair.count; i += 1) {
|
||||||
|
const offset = i * 4;
|
||||||
|
const x1 = chairSegValues[offset] / 10;
|
||||||
|
const y1 = chairSegValues[offset + 1] / 10;
|
||||||
|
const x2 = chairSegValues[offset + 2] / 10;
|
||||||
|
const y2 = chairSegValues[offset + 3] / 10;
|
||||||
|
path.moveTo(x1, y1);
|
||||||
|
path.lineTo(x2, y2);
|
||||||
|
minX = Math.min(minX, x1, x2);
|
||||||
|
minY = Math.min(minY, y1, y2);
|
||||||
|
maxX = Math.max(maxX, x1, x2);
|
||||||
|
maxY = Math.max(maxY, y1, y2);
|
||||||
|
}
|
||||||
|
return { ...chair, minX, minY, maxX, maxY, path };
|
||||||
|
});
|
||||||
|
|
||||||
|
const camera = { scale: 1, offsetX: 0, offsetY: 0 };
|
||||||
|
let pixelRatio = window.devicePixelRatio || 1;
|
||||||
|
let dragging = false;
|
||||||
|
let dragStart = null;
|
||||||
|
let rafPending = false;
|
||||||
|
|
||||||
|
function resize() {
|
||||||
|
pixelRatio = window.devicePixelRatio || 1;
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
canvas.width = Math.round(rect.width * pixelRatio);
|
||||||
|
canvas.height = Math.round(rect.height * pixelRatio);
|
||||||
|
ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
|
||||||
|
fit();
|
||||||
|
}
|
||||||
|
|
||||||
|
function fit() {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const width = world.maxX - world.minX;
|
||||||
|
const height = world.maxY - world.minY;
|
||||||
|
const pad = 36;
|
||||||
|
const scaleX = (rect.width - pad * 2) / width;
|
||||||
|
const scaleY = (rect.height - pad * 2) / height;
|
||||||
|
camera.scale = Math.min(scaleX, scaleY);
|
||||||
|
camera.offsetX = pad - world.minX * camera.scale + (rect.width - pad * 2 - width * camera.scale) / 2;
|
||||||
|
camera.offsetY = pad - world.minY * camera.scale + (rect.height - pad * 2 - height * camera.scale) / 2;
|
||||||
|
requestDraw();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawGrid(width, height) {
|
||||||
|
ctx.save();
|
||||||
|
ctx.strokeStyle = "rgba(21,35,48,0.05)";
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
for (let x = 120; x < width; x += 120) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(x, 0);
|
||||||
|
ctx.lineTo(x, height);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
for (let y = 120; y < height; y += 120) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(0, y);
|
||||||
|
ctx.lineTo(width, y);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
function worldToScreen(x, y) {
|
||||||
|
return {
|
||||||
|
x: x * camera.scale + camera.offsetX,
|
||||||
|
y: (world.maxY - y + world.minY) * camera.scale + camera.offsetY,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function screenToWorld(x, y) {
|
||||||
|
return {
|
||||||
|
x: (x - camera.offsetX) / camera.scale,
|
||||||
|
y: world.maxY + world.minY - (y - camera.offsetY) / camera.scale,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function requestDraw() {
|
||||||
|
if (rafPending) return;
|
||||||
|
rafPending = true;
|
||||||
|
window.requestAnimationFrame(() => {
|
||||||
|
rafPending = false;
|
||||||
|
draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyWorldTransform() {
|
||||||
|
ctx.setTransform(
|
||||||
|
pixelRatio * camera.scale,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
-pixelRatio * camera.scale,
|
||||||
|
pixelRatio * camera.offsetX,
|
||||||
|
pixelRatio * ((world.maxY + world.minY) * camera.scale + camera.offsetY)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
|
||||||
|
ctx.clearRect(0, 0, rect.width, rect.height);
|
||||||
|
drawGrid(rect.width, rect.height);
|
||||||
|
|
||||||
|
const viewA = screenToWorld(0, rect.height);
|
||||||
|
const viewB = screenToWorld(rect.width, 0);
|
||||||
|
const viewMinX = Math.min(viewA.x, viewB.x);
|
||||||
|
const viewMaxX = Math.max(viewA.x, viewB.x);
|
||||||
|
const viewMinY = Math.min(viewA.y, viewB.y);
|
||||||
|
const viewMaxY = Math.max(viewA.y, viewB.y);
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
applyWorldTransform();
|
||||||
|
ctx.strokeStyle = "rgba(100, 116, 139, 0.28)";
|
||||||
|
ctx.lineWidth = 1 / camera.scale;
|
||||||
|
const tileSize = meta.backgroundTileSize;
|
||||||
|
const tileMinX = Math.floor(viewMinX / tileSize);
|
||||||
|
const tileMaxX = Math.floor(viewMaxX / tileSize);
|
||||||
|
const tileMinY = Math.floor(viewMinY / tileSize);
|
||||||
|
const tileMaxY = Math.floor(viewMaxY / tileSize);
|
||||||
|
|
||||||
|
for (let tx = tileMinX; tx <= tileMaxX; tx += 1) {
|
||||||
|
for (let ty = tileMinY; ty <= tileMaxY; ty += 1) {
|
||||||
|
const range = bgTileRanges[`${tx},${ty}`];
|
||||||
|
if (!range) continue;
|
||||||
|
const start = range[0];
|
||||||
|
const count = range[1];
|
||||||
|
for (let i = start; i < start + count; i += 1) {
|
||||||
|
const offset = i * 4;
|
||||||
|
const x1 = bgSegValues[offset] / 10;
|
||||||
|
const y1 = bgSegValues[offset + 1] / 10;
|
||||||
|
const x2 = bgSegValues[offset + 2] / 10;
|
||||||
|
const y2 = bgSegValues[offset + 3] / 10;
|
||||||
|
if (Math.max(x1, x2) < viewMinX || Math.min(x1, x2) > viewMaxX ||
|
||||||
|
Math.max(y1, y2) < viewMinY || Math.min(y1, y2) > viewMaxY) continue;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(x1, y1);
|
||||||
|
ctx.lineTo(x2, y2);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.lineWidth = 1.35 / camera.scale;
|
||||||
|
ctx.lineCap = "round";
|
||||||
|
ctx.lineJoin = "round";
|
||||||
|
ctx.strokeStyle = "rgba(21, 149, 142, 0.8)";
|
||||||
|
for (const chair of chairGeometry) {
|
||||||
|
if (chair.maxX < viewMinX || chair.minX > viewMaxX || chair.maxY < viewMinY || chair.minY > viewMaxY) continue;
|
||||||
|
ctx.stroke(chair.path);
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Draw Marker ---
|
||||||
|
if (markerX !== null && markerY !== null) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(markerX, markerY, 50 / camera.scale, 0, Math.PI * 2);
|
||||||
|
ctx.fillStyle = "rgba(220, 38, 38, 0.8)";
|
||||||
|
ctx.fill();
|
||||||
|
ctx.strokeStyle = "#fff";
|
||||||
|
ctx.lineWidth = 10 / camera.scale;
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
scaleChip.textContent = `scale ${camera.scale.toFixed(4)}x`;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas.addEventListener("pointerdown", (event) => {
|
||||||
|
dragging = true;
|
||||||
|
dragStart = { x: event.clientX, y: event.clientY, offsetX: camera.offsetX, offsetY: camera.offsetY };
|
||||||
|
canvas.classList.add("dragging");
|
||||||
|
});
|
||||||
|
window.addEventListener("pointerup", (event) => {
|
||||||
|
if (dragging && dragStart) {
|
||||||
|
const move = Math.hypot(event.clientX - dragStart.x, event.clientY - dragStart.y);
|
||||||
|
if (move < 4) {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const mx = event.clientX - rect.left;
|
||||||
|
const my = event.clientY - rect.top;
|
||||||
|
const worldPos = screenToWorld(mx, my);
|
||||||
|
markerX = worldPos.x;
|
||||||
|
markerY = worldPos.y;
|
||||||
|
requestDraw();
|
||||||
|
|
||||||
|
// Notify parent window
|
||||||
|
window.parent.postMessage({
|
||||||
|
type: 'PICK_LOCATION',
|
||||||
|
x: markerX.toFixed(2),
|
||||||
|
y: markerY.toFixed(2)
|
||||||
|
}, '*');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dragging = false;
|
||||||
|
dragStart = null;
|
||||||
|
canvas.classList.remove("dragging");
|
||||||
|
});
|
||||||
|
window.addEventListener("pointermove", (event) => {
|
||||||
|
if (dragging && dragStart) {
|
||||||
|
camera.offsetX = dragStart.offsetX + (event.clientX - dragStart.x);
|
||||||
|
camera.offsetY = dragStart.offsetY + (event.clientY - dragStart.y);
|
||||||
|
requestDraw();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
canvas.addEventListener("wheel", (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const mx = event.clientX - rect.left;
|
||||||
|
const my = event.clientY - rect.top;
|
||||||
|
const before = screenToWorld(mx, my);
|
||||||
|
const factor = event.deltaY < 0 ? 1.08 : 0.92;
|
||||||
|
camera.scale = Math.max(0.002, Math.min(2, camera.scale * factor));
|
||||||
|
const after = worldToScreen(before.x, before.y);
|
||||||
|
camera.offsetX += mx - after.x;
|
||||||
|
camera.offsetY += my - after.y;
|
||||||
|
requestDraw();
|
||||||
|
}, { passive: false });
|
||||||
|
document.getElementById("fit-btn").addEventListener("click", fit);
|
||||||
|
window.addEventListener("resize", resize);
|
||||||
|
resize();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,931 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ko">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>center chair people map</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--ink: #152330;
|
||||||
|
--muted: #627286;
|
||||||
|
--paper: rgba(255,255,255,0.86);
|
||||||
|
--line: rgba(21,35,48,0.1);
|
||||||
|
--accent: #0f766e;
|
||||||
|
--bg: #edf2f6;
|
||||||
|
}
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "IBM Plex Sans KR", "Pretendard", sans-serif;
|
||||||
|
color: var(--ink);
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at top left, rgba(15,118,110,0.11), transparent 22%),
|
||||||
|
linear-gradient(180deg, #f5f8fb 0%, #e8eef3 100%);
|
||||||
|
}
|
||||||
|
.page {
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.shell {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.panel {
|
||||||
|
border-radius: 0;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
backdrop-filter: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 10px 14px;
|
||||||
|
font: inherit;
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
color: white;
|
||||||
|
background: linear-gradient(135deg, #0f766e, #115e59);
|
||||||
|
box-shadow: 0 10px 22px rgba(15,118,110,0.18);
|
||||||
|
}
|
||||||
|
button.alt {
|
||||||
|
color: var(--ink);
|
||||||
|
background: rgba(255,255,255,0.9);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.viewer {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.viewer-head {
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
left: 16px;
|
||||||
|
right: 16px;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.chip {
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: rgba(255,255,255,0.82);
|
||||||
|
border: 1px solid rgba(255,255,255,0.94);
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
box-shadow: 0 8px 24px rgba(21,35,48,0.08);
|
||||||
|
}
|
||||||
|
.viewer-actions {
|
||||||
|
position: absolute;
|
||||||
|
left: 16px;
|
||||||
|
top: 64px;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.mapper {
|
||||||
|
position: absolute;
|
||||||
|
top: 76px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: min(94vw, 1320px);
|
||||||
|
max-height: min(56vh, 560px);
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 4;
|
||||||
|
border-radius: 20px;
|
||||||
|
background: rgba(234, 239, 247, 0.95);
|
||||||
|
border: 1px solid rgba(101, 119, 146, 0.22);
|
||||||
|
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.2);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
backdrop-filter: blur(6px);
|
||||||
|
}
|
||||||
|
.hidden-off {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.mapper-head {
|
||||||
|
padding: 10px 14px;
|
||||||
|
border-bottom: 1px solid rgba(101,119,146,0.18);
|
||||||
|
font-size: 12px;
|
||||||
|
color: #51607a;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.35;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 10px;
|
||||||
|
background: rgba(255,255,255,0.6);
|
||||||
|
}
|
||||||
|
.mapper-head strong {
|
||||||
|
display: block;
|
||||||
|
color: #17243b;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
.mapper-head .alt {
|
||||||
|
padding: 8px 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.org-chart {
|
||||||
|
margin: 0;
|
||||||
|
padding: 14px;
|
||||||
|
overflow: auto;
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
.org-top {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: min(100%, 420px);
|
||||||
|
border-radius: 14px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid rgba(67, 84, 118, 0.25);
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.org-top-title {
|
||||||
|
background: #1e2f4d;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 34px;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.1;
|
||||||
|
padding: 16px 12px;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
}
|
||||||
|
.org-top-members {
|
||||||
|
padding: 10px;
|
||||||
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
background: rgba(255,255,255,0.95);
|
||||||
|
}
|
||||||
|
.org-teams {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(7, minmax(160px, 1fr));
|
||||||
|
gap: 10px;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
.org-team {
|
||||||
|
border: 1px solid rgba(110, 126, 152, 0.25);
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: rgba(255,255,255,0.95);
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.org-team h4 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 9px 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #21324e;
|
||||||
|
font-weight: 800;
|
||||||
|
border-bottom: 1px solid rgba(110, 126, 152, 0.2);
|
||||||
|
background: rgba(240, 245, 252, 0.96);
|
||||||
|
}
|
||||||
|
.org-members {
|
||||||
|
padding: 7px;
|
||||||
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
.org-person {
|
||||||
|
border: 1px solid rgba(116, 133, 161, 0.25);
|
||||||
|
background: rgba(255,255,255,0.95);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 6px 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 120ms ease, border-color 120ms ease;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.org-person.active {
|
||||||
|
border-color: rgba(15,118,110,0.6);
|
||||||
|
background: rgba(15,118,110,0.11);
|
||||||
|
}
|
||||||
|
.org-person.assigned {
|
||||||
|
border-color: rgba(37,99,235,0.5);
|
||||||
|
background: rgba(37,99,235,0.1);
|
||||||
|
}
|
||||||
|
.org-person strong {
|
||||||
|
display: block;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.3;
|
||||||
|
color: #15233a;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.org-person small {
|
||||||
|
display: block;
|
||||||
|
color: #5a6a86;
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 1.25;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
@media (max-width: 980px) {
|
||||||
|
.mapper {
|
||||||
|
top: 72px;
|
||||||
|
width: min(96vw, 920px);
|
||||||
|
max-height: 58vh;
|
||||||
|
}
|
||||||
|
.viewer-actions {
|
||||||
|
top: 64px;
|
||||||
|
left: 12px;
|
||||||
|
right: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.mapper-head strong {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.org-top-title {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
.org-teams {
|
||||||
|
grid-template-columns: repeat(3, minmax(150px, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
cursor: grab;
|
||||||
|
}
|
||||||
|
canvas.dragging { cursor: grabbing; }
|
||||||
|
.tooltip {
|
||||||
|
position: absolute;
|
||||||
|
min-width: 170px;
|
||||||
|
padding: 12px 14px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: rgba(17,24,39,0.94);
|
||||||
|
color: white;
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(12px, 12px);
|
||||||
|
transition: opacity 120ms ease;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
.tooltip.visible { opacity: 1; }
|
||||||
|
.tooltip strong { display: block; margin-bottom: 6px; font-size: 14px; }
|
||||||
|
.tooltip div { font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.82); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page">
|
||||||
|
<div class="shell">
|
||||||
|
<main class="panel viewer">
|
||||||
|
<div class="viewer-head">
|
||||||
|
<div class="chip" id="scale-chip"></div>
|
||||||
|
<div class="chip" id="hover-chip">chair hover: none</div>
|
||||||
|
</div>
|
||||||
|
<div class="viewer-actions">
|
||||||
|
<button type="button" id="fit-btn">전체 맞춤</button>
|
||||||
|
<button type="button" class="alt" id="clear-btn">선택 지우기</button>
|
||||||
|
</div>
|
||||||
|
<aside class="mapper hidden-off">
|
||||||
|
<div class="mapper-head">
|
||||||
|
<div id="mapper-status">
|
||||||
|
<strong>조직 현황</strong>
|
||||||
|
<span>선택 인원 없음</span>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="alt" id="clear-assign-btn">매칭 초기화</button>
|
||||||
|
</div>
|
||||||
|
<div class="org-chart" id="org-chart"></div>
|
||||||
|
</aside>
|
||||||
|
<canvas id="canvas"></canvas>
|
||||||
|
<div class="tooltip" id="tooltip"></div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="./center_chair_people_payload.js?v=20260403a"></script>
|
||||||
|
<script>
|
||||||
|
const DATA = window.CHAIR_MAP_DATA;
|
||||||
|
function decodeSegments(base64) {
|
||||||
|
const binary = atob(base64);
|
||||||
|
const bytes = new Uint8Array(binary.length);
|
||||||
|
for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
|
||||||
|
return new Int32Array(bytes.buffer);
|
||||||
|
}
|
||||||
|
const bgTileRanges = DATA.bgTileRanges;
|
||||||
|
const bgSegValues = decodeSegments(DATA.bgSegsB64);
|
||||||
|
const chairSegValues = decodeSegments(DATA.chairSegsB64);
|
||||||
|
const chairs = DATA.chairs.map(([key, name, kind, start, count]) => ({
|
||||||
|
key, name, kind, start, count
|
||||||
|
}));
|
||||||
|
const meta = DATA.meta;
|
||||||
|
const world = meta.headerBounds;
|
||||||
|
const canvas = document.getElementById("canvas");
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
const tooltip = document.getElementById("tooltip");
|
||||||
|
const scaleChip = document.getElementById("scale-chip");
|
||||||
|
const hoverChip = document.getElementById("hover-chip");
|
||||||
|
const STORAGE_KEY = "ptc-chair-selection";
|
||||||
|
const PEOPLE_STORAGE_KEY = "ptc-chair-people";
|
||||||
|
const ASSIGN_STORAGE_KEY = "ptc-chair-assignments";
|
||||||
|
const ACTIVE_PERSON_STORAGE_KEY = "ptc-chair-active-person";
|
||||||
|
const clearAssignBtn = document.getElementById("clear-assign-btn");
|
||||||
|
const orgChartEl = document.getElementById("org-chart");
|
||||||
|
const mapperStatus = document.getElementById("mapper-status");
|
||||||
|
// Prevent stale auto-highlights from previous sessions.
|
||||||
|
localStorage.removeItem(STORAGE_KEY);
|
||||||
|
localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
|
||||||
|
localStorage.removeItem(ASSIGN_STORAGE_KEY);
|
||||||
|
const placed = new Set();
|
||||||
|
let people = JSON.parse(localStorage.getItem(PEOPLE_STORAGE_KEY) || "[]");
|
||||||
|
let chairAssignments = {};
|
||||||
|
let activePersonId = null;
|
||||||
|
const ORG_TEMPLATE = {
|
||||||
|
top: {
|
||||||
|
name: "총괄기획실",
|
||||||
|
count: 53,
|
||||||
|
members: [
|
||||||
|
{ name: "장종찬", dept: "총괄기획실", title: "기획실장" },
|
||||||
|
{ name: "김원식", dept: "총괄기획실", title: "전무이사" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
teams: [
|
||||||
|
{ name: "경영기획팀", count: 6, members: ["김우진", "임민정", "국혜린", "최선아", "김윤재", "이미영"] },
|
||||||
|
{ name: "인재성장팀", count: 5, members: ["조태희", "최근혜", "류원준", "주안기", "정성호"] },
|
||||||
|
{ name: "ERP 기획팀", count: 5, members: ["류호성", "문형식", "최요제", "황대일", "이채봉"] },
|
||||||
|
{ name: "디자인기획팀", count: 17, members: ["신혜영", "정은혜", "김태식", "최예은", "채선영", "최영환", "윤봄이", "이예진", "허유나", "마희연", "김수현", "박지영", "권순호", "정두휘", "김정석", "정지윤", "양숙영"] },
|
||||||
|
{ name: "기술기획팀", count: 11, members: ["김원기", "홍아름", "이경민", "김혜인", "황동환", "최찬호", "이태훈", "김신지", "조찬영", "김용연", "한치영"] },
|
||||||
|
{ name: "협업증진팀", count: 3, members: ["성형일", "박주한", "한승민"] },
|
||||||
|
{ name: "솔루션통합팀", count: 4, members: ["권혁진", "염승호", "윤준수", "김지영"] },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
const chairGeometry = chairs.map((chair) => {
|
||||||
|
let minX = Infinity;
|
||||||
|
let minY = Infinity;
|
||||||
|
let maxX = -Infinity;
|
||||||
|
let maxY = -Infinity;
|
||||||
|
const path = new Path2D();
|
||||||
|
const hitSegments = new Float32Array(chair.count * 4);
|
||||||
|
let segCursor = 0;
|
||||||
|
for (let i = chair.start; i < chair.start + chair.count; i += 1) {
|
||||||
|
const offset = i * 4;
|
||||||
|
const x1 = chairSegValues[offset] / 10;
|
||||||
|
const y1 = chairSegValues[offset + 1] / 10;
|
||||||
|
const x2 = chairSegValues[offset + 2] / 10;
|
||||||
|
const y2 = chairSegValues[offset + 3] / 10;
|
||||||
|
path.moveTo(x1, y1);
|
||||||
|
path.lineTo(x2, y2);
|
||||||
|
hitSegments[segCursor] = x1;
|
||||||
|
hitSegments[segCursor + 1] = y1;
|
||||||
|
hitSegments[segCursor + 2] = x2;
|
||||||
|
hitSegments[segCursor + 3] = y2;
|
||||||
|
segCursor += 4;
|
||||||
|
minX = Math.min(minX, x1, x2);
|
||||||
|
minY = Math.min(minY, y1, y2);
|
||||||
|
maxX = Math.max(maxX, x1, x2);
|
||||||
|
maxY = Math.max(maxY, y1, y2);
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
...chair,
|
||||||
|
minX,
|
||||||
|
minY,
|
||||||
|
maxX,
|
||||||
|
maxY,
|
||||||
|
area: Math.max(1, (maxX - minX) * (maxY - minY)),
|
||||||
|
path,
|
||||||
|
hitSegments,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
function renumberChairKeys(chairItems) {
|
||||||
|
if (!chairItems.length) return;
|
||||||
|
const heights = chairItems
|
||||||
|
.map((chair) => Math.max(1, chair.maxY - chair.minY))
|
||||||
|
.sort((a, b) => a - b);
|
||||||
|
const medianHeight = heights[Math.floor(heights.length / 2)] || 1;
|
||||||
|
const rowTolerance = Math.max(40, medianHeight * 0.9);
|
||||||
|
|
||||||
|
const sorted = [...chairItems].sort((a, b) => {
|
||||||
|
const ay = (a.minY + a.maxY) * 0.5;
|
||||||
|
const by = (b.minY + b.maxY) * 0.5;
|
||||||
|
if (Math.abs(by - ay) > rowTolerance) return by - ay; // top -> bottom
|
||||||
|
const ax = (a.minX + a.maxX) * 0.5;
|
||||||
|
const bx = (b.minX + b.maxX) * 0.5;
|
||||||
|
return ax - bx; // left -> right
|
||||||
|
});
|
||||||
|
|
||||||
|
sorted.forEach((chair, index) => {
|
||||||
|
chair.key = String(index + 1);
|
||||||
|
chair.seatNo = index + 1;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
renumberChairKeys(chairGeometry);
|
||||||
|
const PICK_GRID_SIZE = 1800;
|
||||||
|
const chairPickGrid = new Map();
|
||||||
|
function pickGridKey(gx, gy) {
|
||||||
|
return `${gx},${gy}`;
|
||||||
|
}
|
||||||
|
chairGeometry.forEach((chair, index) => {
|
||||||
|
const minGX = Math.floor(chair.minX / PICK_GRID_SIZE);
|
||||||
|
const maxGX = Math.floor(chair.maxX / PICK_GRID_SIZE);
|
||||||
|
const minGY = Math.floor(chair.minY / PICK_GRID_SIZE);
|
||||||
|
const maxGY = Math.floor(chair.maxY / PICK_GRID_SIZE);
|
||||||
|
for (let gx = minGX; gx <= maxGX; gx += 1) {
|
||||||
|
for (let gy = minGY; gy <= maxGY; gy += 1) {
|
||||||
|
const key = pickGridKey(gx, gy);
|
||||||
|
if (!chairPickGrid.has(key)) chairPickGrid.set(key, []);
|
||||||
|
chairPickGrid.get(key).push(index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const camera = { scale: 1, offsetX: 0, offsetY: 0 };
|
||||||
|
let pixelRatio = window.devicePixelRatio || 1;
|
||||||
|
let pointer = { x: 0, y: 0 };
|
||||||
|
let dragging = false;
|
||||||
|
let dragStart = null;
|
||||||
|
let hovered = null;
|
||||||
|
let rafPending = false;
|
||||||
|
|
||||||
|
function normalizePeople(raw) {
|
||||||
|
return raw
|
||||||
|
.map((person, index) => {
|
||||||
|
if (!person || !person.name) return null;
|
||||||
|
return {
|
||||||
|
id: person.id || `person-${index + 1}`,
|
||||||
|
name: String(person.name).trim(),
|
||||||
|
dept: String(person.dept || "").trim(),
|
||||||
|
title: String(person.title || "").trim(),
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.filter(Boolean);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createTemplatePeople() {
|
||||||
|
const generated = [];
|
||||||
|
let seq = 1;
|
||||||
|
ORG_TEMPLATE.top.members.forEach((member) => {
|
||||||
|
generated.push({
|
||||||
|
id: `org-${seq++}`,
|
||||||
|
name: member.name,
|
||||||
|
dept: member.dept,
|
||||||
|
title: member.title,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
ORG_TEMPLATE.teams.forEach((team) => {
|
||||||
|
team.members.forEach((name) => {
|
||||||
|
generated.push({
|
||||||
|
id: `org-${seq++}`,
|
||||||
|
name,
|
||||||
|
dept: team.name,
|
||||||
|
title: "선임",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return generated;
|
||||||
|
}
|
||||||
|
|
||||||
|
people = normalizePeople(people);
|
||||||
|
const templateReady = people.some((person) => person.name === "장종찬" && person.dept === "총괄기획실");
|
||||||
|
if (!templateReady) {
|
||||||
|
people = createTemplatePeople();
|
||||||
|
localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
|
||||||
|
}
|
||||||
|
const chairKeySet = new Set(chairGeometry.map((chair) => chair.key));
|
||||||
|
chairAssignments = Object.fromEntries(
|
||||||
|
Object.entries(chairAssignments).filter(([chairKey, personId]) => (
|
||||||
|
chairKeySet.has(chairKey) && people.some((person) => person.id === personId)
|
||||||
|
))
|
||||||
|
);
|
||||||
|
if (activePersonId && !people.some((person) => person.id === activePersonId)) activePersonId = null;
|
||||||
|
|
||||||
|
function persistPeople() {
|
||||||
|
localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
|
||||||
|
}
|
||||||
|
|
||||||
|
function persistAssignments() {
|
||||||
|
localStorage.setItem(ASSIGN_STORAGE_KEY, JSON.stringify(chairAssignments));
|
||||||
|
}
|
||||||
|
|
||||||
|
function persistActivePerson() {
|
||||||
|
if (!activePersonId) localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
|
||||||
|
else localStorage.setItem(ACTIVE_PERSON_STORAGE_KEY, activePersonId);
|
||||||
|
}
|
||||||
|
|
||||||
|
function assignmentCount() {
|
||||||
|
return Object.keys(chairAssignments).length;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPersonById(id) {
|
||||||
|
return people.find((person) => person.id === id) || null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getChairByPerson(personId) {
|
||||||
|
for (const [chairKey, assignedPersonId] of Object.entries(chairAssignments)) {
|
||||||
|
if (assignedPersonId === personId) return chairKey;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderPeopleList() {
|
||||||
|
const activePerson = getPersonById(activePersonId);
|
||||||
|
const countText = `${assignmentCount()} / ${people.length} 매칭`;
|
||||||
|
mapperStatus.innerHTML = `<strong>조직 현황</strong><span>${activePerson ? `${activePerson.name} 선택됨` : "선택 인원 없음"} · ${countText}</span>`;
|
||||||
|
|
||||||
|
const findPerson = (dept, name) => people.find((person) => person.dept === dept && person.name === name) || null;
|
||||||
|
const personCard = (person, roleText) => {
|
||||||
|
if (!person) return "";
|
||||||
|
const chairKey = getChairByPerson(person.id);
|
||||||
|
const assignedClass = chairKey ? " assigned" : "";
|
||||||
|
const activeClass = person.id === activePersonId ? " active" : "";
|
||||||
|
return `
|
||||||
|
<article class="org-person${assignedClass}${activeClass}" data-person-id="${person.id}">
|
||||||
|
<strong>${person.name}</strong>
|
||||||
|
<small>${person.title || roleText || "-"}</small>
|
||||||
|
<small>${chairKey ? `좌석 ${chairKey}` : "좌석 미지정"}</small>
|
||||||
|
</article>
|
||||||
|
`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const topHtml = ORG_TEMPLATE.top.members
|
||||||
|
.map((member) => personCard(findPerson(member.dept, member.name), member.title))
|
||||||
|
.join("");
|
||||||
|
|
||||||
|
const teamsHtml = ORG_TEMPLATE.teams.map((team) => {
|
||||||
|
const membersHtml = team.members
|
||||||
|
.map((name) => personCard(findPerson(team.name, name), "선임"))
|
||||||
|
.join("");
|
||||||
|
return `
|
||||||
|
<section class="org-team">
|
||||||
|
<h4>${team.name} (${team.count})</h4>
|
||||||
|
<div class="org-members">${membersHtml}</div>
|
||||||
|
</section>
|
||||||
|
`;
|
||||||
|
}).join("");
|
||||||
|
|
||||||
|
orgChartEl.innerHTML = `
|
||||||
|
<section class="org-top">
|
||||||
|
<div class="org-top-title">${ORG_TEMPLATE.top.name} (${ORG_TEMPLATE.top.count})</div>
|
||||||
|
<div class="org-top-members">${topHtml}</div>
|
||||||
|
</section>
|
||||||
|
<section class="org-teams">${teamsHtml}</section>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function worldToScreen(x, y) {
|
||||||
|
return {
|
||||||
|
x: x * camera.scale + camera.offsetX,
|
||||||
|
y: (world.maxY - y + world.minY) * camera.scale + camera.offsetY,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function screenToWorld(x, y) {
|
||||||
|
return {
|
||||||
|
x: (x - camera.offsetX) / camera.scale,
|
||||||
|
y: world.maxY + world.minY - (y - camera.offsetY) / camera.scale,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function resize() {
|
||||||
|
pixelRatio = window.devicePixelRatio || 1;
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
canvas.width = Math.round(rect.width * pixelRatio);
|
||||||
|
canvas.height = Math.round(rect.height * pixelRatio);
|
||||||
|
ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
|
||||||
|
fit();
|
||||||
|
}
|
||||||
|
|
||||||
|
function fit() {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const width = world.maxX - world.minX;
|
||||||
|
const height = world.maxY - world.minY;
|
||||||
|
const pad = 36;
|
||||||
|
const scaleX = (rect.width - pad * 2) / width;
|
||||||
|
const scaleY = (rect.height - pad * 2) / height;
|
||||||
|
camera.scale = Math.min(scaleX, scaleY);
|
||||||
|
camera.offsetX = pad - world.minX * camera.scale + (rect.width - pad * 2 - width * camera.scale) / 2;
|
||||||
|
camera.offsetY = pad - world.minY * camera.scale + (rect.height - pad * 2 - height * camera.scale) / 2;
|
||||||
|
requestDraw();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawGrid(width, height) {
|
||||||
|
ctx.save();
|
||||||
|
ctx.strokeStyle = "rgba(21,35,48,0.05)";
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
for (let x = 120; x < width; x += 120) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(x, 0);
|
||||||
|
ctx.lineTo(x, height);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
for (let y = 120; y < height; y += 120) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(0, y);
|
||||||
|
ctx.lineTo(width, y);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
function pickChair(screenX, screenY) {
|
||||||
|
const threshold = 12;
|
||||||
|
const pointerWorld = screenToWorld(screenX, screenY);
|
||||||
|
const thresholdWorld = threshold / camera.scale;
|
||||||
|
const thresholdWorldSq = thresholdWorld * thresholdWorld;
|
||||||
|
const minGX = Math.floor((pointerWorld.x - thresholdWorld) / PICK_GRID_SIZE);
|
||||||
|
const maxGX = Math.floor((pointerWorld.x + thresholdWorld) / PICK_GRID_SIZE);
|
||||||
|
const minGY = Math.floor((pointerWorld.y - thresholdWorld) / PICK_GRID_SIZE);
|
||||||
|
const maxGY = Math.floor((pointerWorld.y + thresholdWorld) / PICK_GRID_SIZE);
|
||||||
|
const candidateIndexes = [];
|
||||||
|
const seen = new Set();
|
||||||
|
for (let gx = minGX; gx <= maxGX; gx += 1) {
|
||||||
|
for (let gy = minGY; gy <= maxGY; gy += 1) {
|
||||||
|
const candidates = chairPickGrid.get(pickGridKey(gx, gy));
|
||||||
|
if (!candidates) continue;
|
||||||
|
for (const index of candidates) {
|
||||||
|
if (seen.has(index)) continue;
|
||||||
|
seen.add(index);
|
||||||
|
candidateIndexes.push(index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let best = null;
|
||||||
|
for (const index of candidateIndexes) {
|
||||||
|
const chair = chairGeometry[index];
|
||||||
|
if (
|
||||||
|
pointerWorld.x < chair.minX - thresholdWorld ||
|
||||||
|
pointerWorld.x > chair.maxX + thresholdWorld ||
|
||||||
|
pointerWorld.y < chair.minY - thresholdWorld ||
|
||||||
|
pointerWorld.y > chair.maxY + thresholdWorld
|
||||||
|
) continue;
|
||||||
|
let distSq = Infinity;
|
||||||
|
for (let i = 0; i < chair.hitSegments.length; i += 4) {
|
||||||
|
const x1 = chair.hitSegments[i];
|
||||||
|
const y1 = chair.hitSegments[i + 1];
|
||||||
|
const x2 = chair.hitSegments[i + 2];
|
||||||
|
const y2 = chair.hitSegments[i + 3];
|
||||||
|
const dx = x2 - x1;
|
||||||
|
const dy = y2 - y1;
|
||||||
|
const len2 = dx * dx + dy * dy;
|
||||||
|
let segDistSq;
|
||||||
|
if (len2 === 0) {
|
||||||
|
const px = pointerWorld.x - x1;
|
||||||
|
const py = pointerWorld.y - y1;
|
||||||
|
segDistSq = px * px + py * py;
|
||||||
|
} else {
|
||||||
|
let t = ((pointerWorld.x - x1) * dx + (pointerWorld.y - y1) * dy) / len2;
|
||||||
|
t = Math.max(0, Math.min(1, t));
|
||||||
|
const lx = x1 + t * dx;
|
||||||
|
const ly = y1 + t * dy;
|
||||||
|
const px = pointerWorld.x - lx;
|
||||||
|
const py = pointerWorld.y - ly;
|
||||||
|
segDistSq = px * px + py * py;
|
||||||
|
}
|
||||||
|
if (segDistSq < distSq) distSq = segDistSq;
|
||||||
|
if (distSq <= thresholdWorldSq * 0.3) break;
|
||||||
|
}
|
||||||
|
if (distSq > thresholdWorldSq) continue;
|
||||||
|
const dist = Math.sqrt(distSq) * camera.scale;
|
||||||
|
|
||||||
|
if (!best) {
|
||||||
|
best = { chair, dist };
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
const distGap = dist - best.dist;
|
||||||
|
if (distGap < -0.75) {
|
||||||
|
best = { chair, dist };
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Math.abs(distGap) <= 2) {
|
||||||
|
const areaGap = chair.area - best.chair.area;
|
||||||
|
if (areaGap < -1) {
|
||||||
|
best = { chair, dist };
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
Math.abs(areaGap) <= 1 &&
|
||||||
|
chair.kind === "block" &&
|
||||||
|
best.chair.kind !== "block"
|
||||||
|
) {
|
||||||
|
best = { chair, dist };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return best ? best.chair : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderTooltip() {
|
||||||
|
if (!hovered) {
|
||||||
|
tooltip.classList.remove("visible");
|
||||||
|
hoverChip.textContent = "chair hover: none";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
hoverChip.textContent = `chair hover: ${hovered.name}`;
|
||||||
|
tooltip.innerHTML = `
|
||||||
|
<strong>${hovered.name}</strong>
|
||||||
|
<div>chair key: ${hovered.key}</div>
|
||||||
|
<div>${placed.has(hovered.key) ? "선택됨" : "클릭하면 선택"}</div>
|
||||||
|
<div>${chairAssignments[hovered.key] ? `배치: ${(getPersonById(chairAssignments[hovered.key]) || { name: "알수없음" }).name}` : "배치 인원 없음"}</div>
|
||||||
|
`;
|
||||||
|
tooltip.style.left = `${pointer.x + 14}px`;
|
||||||
|
tooltip.style.top = `${pointer.y + 14}px`;
|
||||||
|
tooltip.classList.add("visible");
|
||||||
|
}
|
||||||
|
|
||||||
|
function requestDraw() {
|
||||||
|
if (rafPending) return;
|
||||||
|
rafPending = true;
|
||||||
|
window.requestAnimationFrame(() => {
|
||||||
|
rafPending = false;
|
||||||
|
draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyWorldTransform() {
|
||||||
|
ctx.setTransform(
|
||||||
|
pixelRatio * camera.scale,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
-pixelRatio * camera.scale,
|
||||||
|
pixelRatio * camera.offsetX,
|
||||||
|
pixelRatio * ((world.maxY + world.minY) * camera.scale + camera.offsetY)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
|
||||||
|
ctx.clearRect(0, 0, rect.width, rect.height);
|
||||||
|
drawGrid(rect.width, rect.height);
|
||||||
|
const viewA = screenToWorld(0, rect.height);
|
||||||
|
const viewB = screenToWorld(rect.width, 0);
|
||||||
|
const viewMinX = Math.min(viewA.x, viewB.x);
|
||||||
|
const viewMaxX = Math.max(viewA.x, viewB.x);
|
||||||
|
const viewMinY = Math.min(viewA.y, viewB.y);
|
||||||
|
const viewMaxY = Math.max(viewA.y, viewB.y);
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
applyWorldTransform();
|
||||||
|
ctx.strokeStyle = "rgba(100, 116, 139, 0.28)";
|
||||||
|
ctx.lineWidth = 1 / camera.scale;
|
||||||
|
const tileSize = meta.backgroundTileSize;
|
||||||
|
const tileMinX = Math.floor(viewMinX / tileSize);
|
||||||
|
const tileMaxX = Math.floor(viewMaxX / tileSize);
|
||||||
|
const tileMinY = Math.floor(viewMinY / tileSize);
|
||||||
|
const tileMaxY = Math.floor(viewMaxY / tileSize);
|
||||||
|
for (let tx = tileMinX; tx <= tileMaxX; tx += 1) {
|
||||||
|
for (let ty = tileMinY; ty <= tileMaxY; ty += 1) {
|
||||||
|
const range = bgTileRanges[`${tx},${ty}`];
|
||||||
|
if (!range) continue;
|
||||||
|
const start = range[0];
|
||||||
|
const count = range[1];
|
||||||
|
for (let i = start; i < start + count; i += 1) {
|
||||||
|
const offset = i * 4;
|
||||||
|
const x1 = bgSegValues[offset] / 10;
|
||||||
|
const y1 = bgSegValues[offset + 1] / 10;
|
||||||
|
const x2 = bgSegValues[offset + 2] / 10;
|
||||||
|
const y2 = bgSegValues[offset + 3] / 10;
|
||||||
|
if (
|
||||||
|
Math.max(x1, x2) < viewMinX ||
|
||||||
|
Math.min(x1, x2) > viewMaxX ||
|
||||||
|
Math.max(y1, y2) < viewMinY ||
|
||||||
|
Math.min(y1, y2) > viewMaxY
|
||||||
|
) continue;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(x1, y1);
|
||||||
|
ctx.lineTo(x2, y2);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
|
||||||
|
hovered = dragging ? null : pickChair(pointer.x, pointer.y);
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
applyWorldTransform();
|
||||||
|
ctx.lineWidth = 1.45 / camera.scale;
|
||||||
|
ctx.lineCap = "round";
|
||||||
|
ctx.lineJoin = "round";
|
||||||
|
for (const chair of chairGeometry) {
|
||||||
|
if (chair.maxX < viewMinX || chair.minX > viewMaxX || chair.maxY < viewMinY || chair.minY > viewMaxY) continue;
|
||||||
|
const active = hovered && hovered.key === chair.key;
|
||||||
|
const selected = placed.has(chair.key);
|
||||||
|
const assignedPersonId = chairAssignments[chair.key];
|
||||||
|
const activePersonChair = activePersonId && assignedPersonId === activePersonId;
|
||||||
|
const assigned = Boolean(assignedPersonId);
|
||||||
|
const baseWidth = chair.kind === "block" ? 1.45 : 1.35;
|
||||||
|
ctx.strokeStyle = activePersonChair
|
||||||
|
? "rgba(234, 179, 8, 1)"
|
||||||
|
: assigned
|
||||||
|
? "rgba(37, 99, 235, 0.98)"
|
||||||
|
: selected
|
||||||
|
? "rgba(220, 38, 38, 0.98)"
|
||||||
|
: active
|
||||||
|
? "rgba(15, 118, 110, 0.98)"
|
||||||
|
: chair.kind === "group"
|
||||||
|
? "rgba(16, 134, 149, 0.74)"
|
||||||
|
: "rgba(21, 149, 142, 0.8)";
|
||||||
|
ctx.lineWidth = (activePersonChair ? 2.8 : assigned ? 2.4 : selected ? 2.6 : active ? 2.1 : baseWidth) / camera.scale;
|
||||||
|
ctx.stroke(chair.path);
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
|
||||||
|
scaleChip.textContent = `scale ${camera.scale.toFixed(4)}x`;
|
||||||
|
renderTooltip();
|
||||||
|
}
|
||||||
|
|
||||||
|
function persistPlaced() {
|
||||||
|
localStorage.setItem(STORAGE_KEY, JSON.stringify([...placed]));
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas.addEventListener("pointerdown", (event) => {
|
||||||
|
dragging = true;
|
||||||
|
dragStart = { x: event.clientX, y: event.clientY, offsetX: camera.offsetX, offsetY: camera.offsetY };
|
||||||
|
canvas.classList.add("dragging");
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("pointerup", (event) => {
|
||||||
|
if (dragging && dragStart) {
|
||||||
|
const move = Math.hypot(event.clientX - dragStart.x, event.clientY - dragStart.y);
|
||||||
|
if (move < 4) {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const picked = pickChair(event.clientX - rect.left, event.clientY - rect.top);
|
||||||
|
if (picked) {
|
||||||
|
if (placed.has(picked.key)) placed.delete(picked.key);
|
||||||
|
else placed.add(picked.key);
|
||||||
|
persistPlaced();
|
||||||
|
if (activePersonId) {
|
||||||
|
const currentChair = getChairByPerson(activePersonId);
|
||||||
|
if (chairAssignments[picked.key] === activePersonId) {
|
||||||
|
delete chairAssignments[picked.key];
|
||||||
|
} else {
|
||||||
|
if (currentChair && currentChair !== picked.key) delete chairAssignments[currentChair];
|
||||||
|
chairAssignments[picked.key] = activePersonId;
|
||||||
|
}
|
||||||
|
persistAssignments();
|
||||||
|
renderPeopleList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dragging = false;
|
||||||
|
dragStart = null;
|
||||||
|
canvas.classList.remove("dragging");
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("pointermove", (event) => {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
pointer = { x: event.clientX - rect.left, y: event.clientY - rect.top };
|
||||||
|
if (dragging && dragStart) {
|
||||||
|
camera.offsetX = dragStart.offsetX + (event.clientX - dragStart.x);
|
||||||
|
camera.offsetY = dragStart.offsetY + (event.clientY - dragStart.y);
|
||||||
|
}
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
|
||||||
|
canvas.addEventListener("wheel", (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const mx = event.clientX - rect.left;
|
||||||
|
const my = event.clientY - rect.top;
|
||||||
|
const before = screenToWorld(mx, my);
|
||||||
|
const factor = event.deltaY < 0 ? 1.08 : 0.92;
|
||||||
|
camera.scale = Math.max(0.002, Math.min(2, camera.scale * factor));
|
||||||
|
const after = worldToScreen(before.x, before.y);
|
||||||
|
camera.offsetX += mx - after.x;
|
||||||
|
camera.offsetY += my - after.y;
|
||||||
|
requestDraw();
|
||||||
|
}, { passive: false });
|
||||||
|
|
||||||
|
document.getElementById("fit-btn").addEventListener("click", fit);
|
||||||
|
document.getElementById("clear-btn").addEventListener("click", () => {
|
||||||
|
placed.clear();
|
||||||
|
persistPlaced();
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
clearAssignBtn.addEventListener("click", () => {
|
||||||
|
chairAssignments = {};
|
||||||
|
persistAssignments();
|
||||||
|
renderPeopleList();
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
orgChartEl.addEventListener("click", (event) => {
|
||||||
|
const item = event.target.closest(".org-person[data-person-id]");
|
||||||
|
if (!item) return;
|
||||||
|
const personId = item.getAttribute("data-person-id");
|
||||||
|
activePersonId = personId === activePersonId ? null : personId;
|
||||||
|
persistActivePerson();
|
||||||
|
renderPeopleList();
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
window.addEventListener("resize", resize);
|
||||||
|
renderPeopleList();
|
||||||
|
resize();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,932 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ko">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>center chair people map 6f</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--ink: #152330;
|
||||||
|
--muted: #627286;
|
||||||
|
--paper: rgba(255,255,255,0.86);
|
||||||
|
--line: rgba(21,35,48,0.1);
|
||||||
|
--accent: #0f766e;
|
||||||
|
--bg: #edf2f6;
|
||||||
|
}
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "IBM Plex Sans KR", "Pretendard", sans-serif;
|
||||||
|
color: var(--ink);
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at top left, rgba(15,118,110,0.11), transparent 22%),
|
||||||
|
linear-gradient(180deg, #f5f8fb 0%, #e8eef3 100%);
|
||||||
|
}
|
||||||
|
.page {
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.shell {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.panel {
|
||||||
|
border-radius: 0;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
backdrop-filter: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 10px 14px;
|
||||||
|
font: inherit;
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
color: white;
|
||||||
|
background: linear-gradient(135deg, #0f766e, #115e59);
|
||||||
|
box-shadow: 0 10px 22px rgba(15,118,110,0.18);
|
||||||
|
}
|
||||||
|
button.alt {
|
||||||
|
color: var(--ink);
|
||||||
|
background: rgba(255,255,255,0.9);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.viewer {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.viewer-head {
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
left: 16px;
|
||||||
|
right: 16px;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.chip {
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: rgba(255,255,255,0.82);
|
||||||
|
border: 1px solid rgba(255,255,255,0.94);
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
box-shadow: 0 8px 24px rgba(21,35,48,0.08);
|
||||||
|
}
|
||||||
|
.viewer-actions {
|
||||||
|
position: absolute;
|
||||||
|
left: 16px;
|
||||||
|
top: 64px;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.mapper {
|
||||||
|
position: absolute;
|
||||||
|
top: 76px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: min(94vw, 1320px);
|
||||||
|
max-height: min(56vh, 560px);
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 4;
|
||||||
|
border-radius: 20px;
|
||||||
|
background: rgba(234, 239, 247, 0.95);
|
||||||
|
border: 1px solid rgba(101, 119, 146, 0.22);
|
||||||
|
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.2);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
backdrop-filter: blur(6px);
|
||||||
|
}
|
||||||
|
.hidden-off {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.mapper-head {
|
||||||
|
padding: 10px 14px;
|
||||||
|
border-bottom: 1px solid rgba(101,119,146,0.18);
|
||||||
|
font-size: 12px;
|
||||||
|
color: #51607a;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.35;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 10px;
|
||||||
|
background: rgba(255,255,255,0.6);
|
||||||
|
}
|
||||||
|
.mapper-head strong {
|
||||||
|
display: block;
|
||||||
|
color: #17243b;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
.mapper-head .alt {
|
||||||
|
padding: 8px 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.org-chart {
|
||||||
|
margin: 0;
|
||||||
|
padding: 14px;
|
||||||
|
overflow: auto;
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
.org-top {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: min(100%, 420px);
|
||||||
|
border-radius: 14px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid rgba(67, 84, 118, 0.25);
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.org-top-title {
|
||||||
|
background: #1e2f4d;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 34px;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.1;
|
||||||
|
padding: 16px 12px;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
}
|
||||||
|
.org-top-members {
|
||||||
|
padding: 10px;
|
||||||
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
background: rgba(255,255,255,0.95);
|
||||||
|
}
|
||||||
|
.org-teams {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(7, minmax(160px, 1fr));
|
||||||
|
gap: 10px;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
.org-team {
|
||||||
|
border: 1px solid rgba(110, 126, 152, 0.25);
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: rgba(255,255,255,0.95);
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.org-team h4 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 9px 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #21324e;
|
||||||
|
font-weight: 800;
|
||||||
|
border-bottom: 1px solid rgba(110, 126, 152, 0.2);
|
||||||
|
background: rgba(240, 245, 252, 0.96);
|
||||||
|
}
|
||||||
|
.org-members {
|
||||||
|
padding: 7px;
|
||||||
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
.org-person {
|
||||||
|
border: 1px solid rgba(116, 133, 161, 0.25);
|
||||||
|
background: rgba(255,255,255,0.95);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 6px 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 120ms ease, border-color 120ms ease;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.org-person.active {
|
||||||
|
border-color: rgba(15,118,110,0.6);
|
||||||
|
background: rgba(15,118,110,0.11);
|
||||||
|
}
|
||||||
|
.org-person.assigned {
|
||||||
|
border-color: rgba(37,99,235,0.5);
|
||||||
|
background: rgba(37,99,235,0.1);
|
||||||
|
}
|
||||||
|
.org-person strong {
|
||||||
|
display: block;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.3;
|
||||||
|
color: #15233a;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.org-person small {
|
||||||
|
display: block;
|
||||||
|
color: #5a6a86;
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 1.25;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
@media (max-width: 980px) {
|
||||||
|
.mapper {
|
||||||
|
top: 72px;
|
||||||
|
width: min(96vw, 920px);
|
||||||
|
max-height: 58vh;
|
||||||
|
}
|
||||||
|
.viewer-actions {
|
||||||
|
top: 64px;
|
||||||
|
left: 12px;
|
||||||
|
right: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.mapper-head strong {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.org-top-title {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
.org-teams {
|
||||||
|
grid-template-columns: repeat(3, minmax(150px, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
cursor: grab;
|
||||||
|
}
|
||||||
|
canvas.dragging { cursor: grabbing; }
|
||||||
|
.tooltip {
|
||||||
|
position: absolute;
|
||||||
|
min-width: 170px;
|
||||||
|
padding: 12px 14px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: rgba(17,24,39,0.94);
|
||||||
|
color: white;
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(12px, 12px);
|
||||||
|
transition: opacity 120ms ease;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
.tooltip.visible { opacity: 1; }
|
||||||
|
.tooltip strong { display: block; margin-bottom: 6px; font-size: 14px; }
|
||||||
|
.tooltip div { font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.82); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page">
|
||||||
|
<div class="shell">
|
||||||
|
<main class="panel viewer">
|
||||||
|
<div class="viewer-head">
|
||||||
|
<div class="chip" id="scale-chip"></div>
|
||||||
|
<div class="chip" id="hover-chip">chair hover: none</div>
|
||||||
|
</div>
|
||||||
|
<div class="viewer-actions">
|
||||||
|
<button type="button" id="fit-btn">전체 맞춤</button>
|
||||||
|
<button type="button" class="alt" id="clear-btn">선택 지우기</button>
|
||||||
|
</div>
|
||||||
|
<aside class="mapper hidden-off">
|
||||||
|
<div class="mapper-head">
|
||||||
|
<div id="mapper-status">
|
||||||
|
<strong>조직 현황</strong>
|
||||||
|
<span>선택 인원 없음</span>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="alt" id="clear-assign-btn">매칭 초기화</button>
|
||||||
|
</div>
|
||||||
|
<div class="org-chart" id="org-chart"></div>
|
||||||
|
</aside>
|
||||||
|
<canvas id="canvas"></canvas>
|
||||||
|
<div class="tooltip" id="tooltip"></div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="./center_chair_people_payload_6f.js"></script>
|
||||||
|
<script>
|
||||||
|
const DATA = window.CHAIR_MAP_DATA;
|
||||||
|
function decodeSegments(base64) {
|
||||||
|
const binary = atob(base64);
|
||||||
|
const bytes = new Uint8Array(binary.length);
|
||||||
|
for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
|
||||||
|
return new Int32Array(bytes.buffer);
|
||||||
|
}
|
||||||
|
const bgTileRanges = DATA.bgTileRanges;
|
||||||
|
const bgSegValues = decodeSegments(DATA.bgSegsB64);
|
||||||
|
const chairSegValues = decodeSegments(DATA.chairSegsB64);
|
||||||
|
const chairs = DATA.chairs.map(([key, name, kind, start, count]) => ({
|
||||||
|
key, name, kind, start, count
|
||||||
|
}));
|
||||||
|
const meta = DATA.meta;
|
||||||
|
const world = meta.headerBounds;
|
||||||
|
const canvas = document.getElementById("canvas");
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
const tooltip = document.getElementById("tooltip");
|
||||||
|
const scaleChip = document.getElementById("scale-chip");
|
||||||
|
const hoverChip = document.getElementById("hover-chip");
|
||||||
|
const STORAGE_KEY = "ptc-chair-selection";
|
||||||
|
const PEOPLE_STORAGE_KEY = "ptc-chair-people";
|
||||||
|
const ASSIGN_STORAGE_KEY = "ptc-chair-assignments";
|
||||||
|
const ACTIVE_PERSON_STORAGE_KEY = "ptc-chair-active-person";
|
||||||
|
const clearAssignBtn = document.getElementById("clear-assign-btn");
|
||||||
|
const orgChartEl = document.getElementById("org-chart");
|
||||||
|
const mapperStatus = document.getElementById("mapper-status");
|
||||||
|
// Prevent stale auto-highlights from previous sessions.
|
||||||
|
localStorage.removeItem(STORAGE_KEY);
|
||||||
|
localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
|
||||||
|
localStorage.removeItem(ASSIGN_STORAGE_KEY);
|
||||||
|
const placed = new Set();
|
||||||
|
let people = JSON.parse(localStorage.getItem(PEOPLE_STORAGE_KEY) || "[]");
|
||||||
|
let chairAssignments = {};
|
||||||
|
let activePersonId = null;
|
||||||
|
const ORG_TEMPLATE = {
|
||||||
|
top: {
|
||||||
|
name: "총괄기획실",
|
||||||
|
count: 53,
|
||||||
|
members: [
|
||||||
|
{ name: "장종찬", dept: "총괄기획실", title: "기획실장" },
|
||||||
|
{ name: "김원식", dept: "총괄기획실", title: "전무이사" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
teams: [
|
||||||
|
{ name: "경영기획팀", count: 6, members: ["김우진", "임민정", "국혜린", "최선아", "김윤재", "이미영"] },
|
||||||
|
{ name: "인재성장팀", count: 5, members: ["조태희", "최근혜", "류원준", "주안기", "정성호"] },
|
||||||
|
{ name: "ERP 기획팀", count: 5, members: ["류호성", "문형식", "최요제", "황대일", "이채봉"] },
|
||||||
|
{ name: "디자인기획팀", count: 17, members: ["신혜영", "정은혜", "김태식", "최예은", "채선영", "최영환", "윤봄이", "이예진", "허유나", "마희연", "김수현", "박지영", "권순호", "정두휘", "김정석", "정지윤", "양숙영"] },
|
||||||
|
{ name: "기술기획팀", count: 11, members: ["김원기", "홍아름", "이경민", "김혜인", "황동환", "최찬호", "이태훈", "김신지", "조찬영", "김용연", "한치영"] },
|
||||||
|
{ name: "협업증진팀", count: 3, members: ["성형일", "박주한", "한승민"] },
|
||||||
|
{ name: "솔루션통합팀", count: 4, members: ["권혁진", "염승호", "윤준수", "김지영"] },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
const chairGeometry = chairs.map((chair) => {
|
||||||
|
let minX = Infinity;
|
||||||
|
let minY = Infinity;
|
||||||
|
let maxX = -Infinity;
|
||||||
|
let maxY = -Infinity;
|
||||||
|
const path = new Path2D();
|
||||||
|
const hitSegments = new Float32Array(chair.count * 4);
|
||||||
|
let segCursor = 0;
|
||||||
|
for (let i = chair.start; i < chair.start + chair.count; i += 1) {
|
||||||
|
const offset = i * 4;
|
||||||
|
const x1 = chairSegValues[offset] / 10;
|
||||||
|
const y1 = chairSegValues[offset + 1] / 10;
|
||||||
|
const x2 = chairSegValues[offset + 2] / 10;
|
||||||
|
const y2 = chairSegValues[offset + 3] / 10;
|
||||||
|
path.moveTo(x1, y1);
|
||||||
|
path.lineTo(x2, y2);
|
||||||
|
hitSegments[segCursor] = x1;
|
||||||
|
hitSegments[segCursor + 1] = y1;
|
||||||
|
hitSegments[segCursor + 2] = x2;
|
||||||
|
hitSegments[segCursor + 3] = y2;
|
||||||
|
segCursor += 4;
|
||||||
|
minX = Math.min(minX, x1, x2);
|
||||||
|
minY = Math.min(minY, y1, y2);
|
||||||
|
maxX = Math.max(maxX, x1, x2);
|
||||||
|
maxY = Math.max(maxY, y1, y2);
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
...chair,
|
||||||
|
minX,
|
||||||
|
minY,
|
||||||
|
maxX,
|
||||||
|
maxY,
|
||||||
|
area: Math.max(1, (maxX - minX) * (maxY - minY)),
|
||||||
|
path,
|
||||||
|
hitSegments,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
function renumberChairKeys(chairItems) {
|
||||||
|
if (!chairItems.length) return;
|
||||||
|
const heights = chairItems
|
||||||
|
.map((chair) => Math.max(1, chair.maxY - chair.minY))
|
||||||
|
.sort((a, b) => a - b);
|
||||||
|
const medianHeight = heights[Math.floor(heights.length / 2)] || 1;
|
||||||
|
const rowTolerance = Math.max(40, medianHeight * 0.9);
|
||||||
|
|
||||||
|
const sorted = [...chairItems].sort((a, b) => {
|
||||||
|
const ay = (a.minY + a.maxY) * 0.5;
|
||||||
|
const by = (b.minY + b.maxY) * 0.5;
|
||||||
|
if (Math.abs(by - ay) > rowTolerance) return by - ay; // top -> bottom
|
||||||
|
const ax = (a.minX + a.maxX) * 0.5;
|
||||||
|
const bx = (b.minX + b.maxX) * 0.5;
|
||||||
|
return ax - bx; // left -> right
|
||||||
|
});
|
||||||
|
|
||||||
|
sorted.forEach((chair, index) => {
|
||||||
|
chair.key = String(index + 1);
|
||||||
|
chair.seatNo = index + 1;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
renumberChairKeys(chairGeometry);
|
||||||
|
const PICK_GRID_SIZE = 1800;
|
||||||
|
const chairPickGrid = new Map();
|
||||||
|
function pickGridKey(gx, gy) {
|
||||||
|
return `${gx},${gy}`;
|
||||||
|
}
|
||||||
|
chairGeometry.forEach((chair, index) => {
|
||||||
|
const minGX = Math.floor(chair.minX / PICK_GRID_SIZE);
|
||||||
|
const maxGX = Math.floor(chair.maxX / PICK_GRID_SIZE);
|
||||||
|
const minGY = Math.floor(chair.minY / PICK_GRID_SIZE);
|
||||||
|
const maxGY = Math.floor(chair.maxY / PICK_GRID_SIZE);
|
||||||
|
for (let gx = minGX; gx <= maxGX; gx += 1) {
|
||||||
|
for (let gy = minGY; gy <= maxGY; gy += 1) {
|
||||||
|
const key = pickGridKey(gx, gy);
|
||||||
|
if (!chairPickGrid.has(key)) chairPickGrid.set(key, []);
|
||||||
|
chairPickGrid.get(key).push(index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const camera = { scale: 1, offsetX: 0, offsetY: 0 };
|
||||||
|
let pixelRatio = window.devicePixelRatio || 1;
|
||||||
|
let pointer = { x: 0, y: 0 };
|
||||||
|
let dragging = false;
|
||||||
|
let dragStart = null;
|
||||||
|
let hovered = null;
|
||||||
|
let rafPending = false;
|
||||||
|
|
||||||
|
function normalizePeople(raw) {
|
||||||
|
return raw
|
||||||
|
.map((person, index) => {
|
||||||
|
if (!person || !person.name) return null;
|
||||||
|
return {
|
||||||
|
id: person.id || `person-${index + 1}`,
|
||||||
|
name: String(person.name).trim(),
|
||||||
|
dept: String(person.dept || "").trim(),
|
||||||
|
title: String(person.title || "").trim(),
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.filter(Boolean);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createTemplatePeople() {
|
||||||
|
const generated = [];
|
||||||
|
let seq = 1;
|
||||||
|
ORG_TEMPLATE.top.members.forEach((member) => {
|
||||||
|
generated.push({
|
||||||
|
id: `org-${seq++}`,
|
||||||
|
name: member.name,
|
||||||
|
dept: member.dept,
|
||||||
|
title: member.title,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
ORG_TEMPLATE.teams.forEach((team) => {
|
||||||
|
team.members.forEach((name) => {
|
||||||
|
generated.push({
|
||||||
|
id: `org-${seq++}`,
|
||||||
|
name,
|
||||||
|
dept: team.name,
|
||||||
|
title: "선임",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return generated;
|
||||||
|
}
|
||||||
|
|
||||||
|
people = normalizePeople(people);
|
||||||
|
const templateReady = people.some((person) => person.name === "장종찬" && person.dept === "총괄기획실");
|
||||||
|
if (!templateReady) {
|
||||||
|
people = createTemplatePeople();
|
||||||
|
localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
|
||||||
|
}
|
||||||
|
const chairKeySet = new Set(chairGeometry.map((chair) => chair.key));
|
||||||
|
chairAssignments = Object.fromEntries(
|
||||||
|
Object.entries(chairAssignments).filter(([chairKey, personId]) => (
|
||||||
|
chairKeySet.has(chairKey) && people.some((person) => person.id === personId)
|
||||||
|
))
|
||||||
|
);
|
||||||
|
if (activePersonId && !people.some((person) => person.id === activePersonId)) activePersonId = null;
|
||||||
|
|
||||||
|
function persistPeople() {
|
||||||
|
localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
|
||||||
|
}
|
||||||
|
|
||||||
|
function persistAssignments() {
|
||||||
|
localStorage.setItem(ASSIGN_STORAGE_KEY, JSON.stringify(chairAssignments));
|
||||||
|
}
|
||||||
|
|
||||||
|
function persistActivePerson() {
|
||||||
|
if (!activePersonId) localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
|
||||||
|
else localStorage.setItem(ACTIVE_PERSON_STORAGE_KEY, activePersonId);
|
||||||
|
}
|
||||||
|
|
||||||
|
function assignmentCount() {
|
||||||
|
return Object.keys(chairAssignments).length;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPersonById(id) {
|
||||||
|
return people.find((person) => person.id === id) || null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getChairByPerson(personId) {
|
||||||
|
for (const [chairKey, assignedPersonId] of Object.entries(chairAssignments)) {
|
||||||
|
if (assignedPersonId === personId) return chairKey;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderPeopleList() {
|
||||||
|
const activePerson = getPersonById(activePersonId);
|
||||||
|
const countText = `${assignmentCount()} / ${people.length} 매칭`;
|
||||||
|
mapperStatus.innerHTML = `<strong>조직 현황</strong><span>${activePerson ? `${activePerson.name} 선택됨` : "선택 인원 없음"} · ${countText}</span>`;
|
||||||
|
|
||||||
|
const findPerson = (dept, name) => people.find((person) => person.dept === dept && person.name === name) || null;
|
||||||
|
const personCard = (person, roleText) => {
|
||||||
|
if (!person) return "";
|
||||||
|
const chairKey = getChairByPerson(person.id);
|
||||||
|
const assignedClass = chairKey ? " assigned" : "";
|
||||||
|
const activeClass = person.id === activePersonId ? " active" : "";
|
||||||
|
return `
|
||||||
|
<article class="org-person${assignedClass}${activeClass}" data-person-id="${person.id}">
|
||||||
|
<strong>${person.name}</strong>
|
||||||
|
<small>${person.title || roleText || "-"}</small>
|
||||||
|
<small>${chairKey ? `좌석 ${chairKey}` : "좌석 미지정"}</small>
|
||||||
|
</article>
|
||||||
|
`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const topHtml = ORG_TEMPLATE.top.members
|
||||||
|
.map((member) => personCard(findPerson(member.dept, member.name), member.title))
|
||||||
|
.join("");
|
||||||
|
|
||||||
|
const teamsHtml = ORG_TEMPLATE.teams.map((team) => {
|
||||||
|
const membersHtml = team.members
|
||||||
|
.map((name) => personCard(findPerson(team.name, name), "선임"))
|
||||||
|
.join("");
|
||||||
|
return `
|
||||||
|
<section class="org-team">
|
||||||
|
<h4>${team.name} (${team.count})</h4>
|
||||||
|
<div class="org-members">${membersHtml}</div>
|
||||||
|
</section>
|
||||||
|
`;
|
||||||
|
}).join("");
|
||||||
|
|
||||||
|
orgChartEl.innerHTML = `
|
||||||
|
<section class="org-top">
|
||||||
|
<div class="org-top-title">${ORG_TEMPLATE.top.name} (${ORG_TEMPLATE.top.count})</div>
|
||||||
|
<div class="org-top-members">${topHtml}</div>
|
||||||
|
</section>
|
||||||
|
<section class="org-teams">${teamsHtml}</section>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function worldToScreen(x, y) {
|
||||||
|
return {
|
||||||
|
x: x * camera.scale + camera.offsetX,
|
||||||
|
y: (world.maxY - y + world.minY) * camera.scale + camera.offsetY,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function screenToWorld(x, y) {
|
||||||
|
return {
|
||||||
|
x: (x - camera.offsetX) / camera.scale,
|
||||||
|
y: world.maxY + world.minY - (y - camera.offsetY) / camera.scale,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function resize() {
|
||||||
|
pixelRatio = window.devicePixelRatio || 1;
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
canvas.width = Math.round(rect.width * pixelRatio);
|
||||||
|
canvas.height = Math.round(rect.height * pixelRatio);
|
||||||
|
ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
|
||||||
|
fit();
|
||||||
|
}
|
||||||
|
|
||||||
|
function fit() {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const width = world.maxX - world.minX;
|
||||||
|
const height = world.maxY - world.minY;
|
||||||
|
const pad = 36;
|
||||||
|
const scaleX = (rect.width - pad * 2) / width;
|
||||||
|
const scaleY = (rect.height - pad * 2) / height;
|
||||||
|
camera.scale = Math.min(scaleX, scaleY);
|
||||||
|
camera.offsetX = pad - world.minX * camera.scale + (rect.width - pad * 2 - width * camera.scale) / 2;
|
||||||
|
camera.offsetY = pad - world.minY * camera.scale + (rect.height - pad * 2 - height * camera.scale) / 2;
|
||||||
|
requestDraw();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawGrid(width, height) {
|
||||||
|
ctx.save();
|
||||||
|
ctx.strokeStyle = "rgba(21,35,48,0.05)";
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
for (let x = 120; x < width; x += 120) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(x, 0);
|
||||||
|
ctx.lineTo(x, height);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
for (let y = 120; y < height; y += 120) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(0, y);
|
||||||
|
ctx.lineTo(width, y);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
function pickChair(screenX, screenY) {
|
||||||
|
const threshold = 12;
|
||||||
|
const pointerWorld = screenToWorld(screenX, screenY);
|
||||||
|
const thresholdWorld = threshold / camera.scale;
|
||||||
|
const thresholdWorldSq = thresholdWorld * thresholdWorld;
|
||||||
|
const minGX = Math.floor((pointerWorld.x - thresholdWorld) / PICK_GRID_SIZE);
|
||||||
|
const maxGX = Math.floor((pointerWorld.x + thresholdWorld) / PICK_GRID_SIZE);
|
||||||
|
const minGY = Math.floor((pointerWorld.y - thresholdWorld) / PICK_GRID_SIZE);
|
||||||
|
const maxGY = Math.floor((pointerWorld.y + thresholdWorld) / PICK_GRID_SIZE);
|
||||||
|
const candidateIndexes = [];
|
||||||
|
const seen = new Set();
|
||||||
|
for (let gx = minGX; gx <= maxGX; gx += 1) {
|
||||||
|
for (let gy = minGY; gy <= maxGY; gy += 1) {
|
||||||
|
const candidates = chairPickGrid.get(pickGridKey(gx, gy));
|
||||||
|
if (!candidates) continue;
|
||||||
|
for (const index of candidates) {
|
||||||
|
if (seen.has(index)) continue;
|
||||||
|
seen.add(index);
|
||||||
|
candidateIndexes.push(index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let best = null;
|
||||||
|
for (const index of candidateIndexes) {
|
||||||
|
const chair = chairGeometry[index];
|
||||||
|
if (
|
||||||
|
pointerWorld.x < chair.minX - thresholdWorld ||
|
||||||
|
pointerWorld.x > chair.maxX + thresholdWorld ||
|
||||||
|
pointerWorld.y < chair.minY - thresholdWorld ||
|
||||||
|
pointerWorld.y > chair.maxY + thresholdWorld
|
||||||
|
) continue;
|
||||||
|
let distSq = Infinity;
|
||||||
|
for (let i = 0; i < chair.hitSegments.length; i += 4) {
|
||||||
|
const x1 = chair.hitSegments[i];
|
||||||
|
const y1 = chair.hitSegments[i + 1];
|
||||||
|
const x2 = chair.hitSegments[i + 2];
|
||||||
|
const y2 = chair.hitSegments[i + 3];
|
||||||
|
const dx = x2 - x1;
|
||||||
|
const dy = y2 - y1;
|
||||||
|
const len2 = dx * dx + dy * dy;
|
||||||
|
let segDistSq;
|
||||||
|
if (len2 === 0) {
|
||||||
|
const px = pointerWorld.x - x1;
|
||||||
|
const py = pointerWorld.y - y1;
|
||||||
|
segDistSq = px * px + py * py;
|
||||||
|
} else {
|
||||||
|
let t = ((pointerWorld.x - x1) * dx + (pointerWorld.y - y1) * dy) / len2;
|
||||||
|
t = Math.max(0, Math.min(1, t));
|
||||||
|
const lx = x1 + t * dx;
|
||||||
|
const ly = y1 + t * dy;
|
||||||
|
const px = pointerWorld.x - lx;
|
||||||
|
const py = pointerWorld.y - ly;
|
||||||
|
segDistSq = px * px + py * py;
|
||||||
|
}
|
||||||
|
if (segDistSq < distSq) distSq = segDistSq;
|
||||||
|
if (distSq <= thresholdWorldSq * 0.3) break;
|
||||||
|
}
|
||||||
|
if (distSq > thresholdWorldSq) continue;
|
||||||
|
const dist = Math.sqrt(distSq) * camera.scale;
|
||||||
|
|
||||||
|
if (!best) {
|
||||||
|
best = { chair, dist };
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
const distGap = dist - best.dist;
|
||||||
|
if (distGap < -0.75) {
|
||||||
|
best = { chair, dist };
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Math.abs(distGap) <= 2) {
|
||||||
|
const areaGap = chair.area - best.chair.area;
|
||||||
|
if (areaGap < -1) {
|
||||||
|
best = { chair, dist };
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
Math.abs(areaGap) <= 1 &&
|
||||||
|
chair.kind === "block" &&
|
||||||
|
best.chair.kind !== "block"
|
||||||
|
) {
|
||||||
|
best = { chair, dist };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return best ? best.chair : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderTooltip() {
|
||||||
|
if (!hovered) {
|
||||||
|
tooltip.classList.remove("visible");
|
||||||
|
hoverChip.textContent = "chair hover: none";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
hoverChip.textContent = `chair hover: ${hovered.name}`;
|
||||||
|
tooltip.innerHTML = `
|
||||||
|
<strong>${hovered.name}</strong>
|
||||||
|
<div>chair key: ${hovered.key}</div>
|
||||||
|
<div>${placed.has(hovered.key) ? "선택됨" : "클릭하면 선택"}</div>
|
||||||
|
<div>${chairAssignments[hovered.key] ? `배치: ${(getPersonById(chairAssignments[hovered.key]) || { name: "알수없음" }).name}` : "배치 인원 없음"}</div>
|
||||||
|
`;
|
||||||
|
tooltip.style.left = `${pointer.x + 14}px`;
|
||||||
|
tooltip.style.top = `${pointer.y + 14}px`;
|
||||||
|
tooltip.classList.add("visible");
|
||||||
|
}
|
||||||
|
|
||||||
|
function requestDraw() {
|
||||||
|
if (rafPending) return;
|
||||||
|
rafPending = true;
|
||||||
|
window.requestAnimationFrame(() => {
|
||||||
|
rafPending = false;
|
||||||
|
draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyWorldTransform() {
|
||||||
|
ctx.setTransform(
|
||||||
|
pixelRatio * camera.scale,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
-pixelRatio * camera.scale,
|
||||||
|
pixelRatio * camera.offsetX,
|
||||||
|
pixelRatio * ((world.maxY + world.minY) * camera.scale + camera.offsetY)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
|
||||||
|
ctx.clearRect(0, 0, rect.width, rect.height);
|
||||||
|
drawGrid(rect.width, rect.height);
|
||||||
|
const viewA = screenToWorld(0, rect.height);
|
||||||
|
const viewB = screenToWorld(rect.width, 0);
|
||||||
|
const viewMinX = Math.min(viewA.x, viewB.x);
|
||||||
|
const viewMaxX = Math.max(viewA.x, viewB.x);
|
||||||
|
const viewMinY = Math.min(viewA.y, viewB.y);
|
||||||
|
const viewMaxY = Math.max(viewA.y, viewB.y);
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
applyWorldTransform();
|
||||||
|
ctx.strokeStyle = "rgba(100, 116, 139, 0.28)";
|
||||||
|
ctx.lineWidth = 1 / camera.scale;
|
||||||
|
const tileSize = meta.backgroundTileSize;
|
||||||
|
const tileMinX = Math.floor(viewMinX / tileSize);
|
||||||
|
const tileMaxX = Math.floor(viewMaxX / tileSize);
|
||||||
|
const tileMinY = Math.floor(viewMinY / tileSize);
|
||||||
|
const tileMaxY = Math.floor(viewMaxY / tileSize);
|
||||||
|
for (let tx = tileMinX; tx <= tileMaxX; tx += 1) {
|
||||||
|
for (let ty = tileMinY; ty <= tileMaxY; ty += 1) {
|
||||||
|
const range = bgTileRanges[`${tx},${ty}`];
|
||||||
|
if (!range) continue;
|
||||||
|
const start = range[0];
|
||||||
|
const count = range[1];
|
||||||
|
for (let i = start; i < start + count; i += 1) {
|
||||||
|
const offset = i * 4;
|
||||||
|
const x1 = bgSegValues[offset] / 10;
|
||||||
|
const y1 = bgSegValues[offset + 1] / 10;
|
||||||
|
const x2 = bgSegValues[offset + 2] / 10;
|
||||||
|
const y2 = bgSegValues[offset + 3] / 10;
|
||||||
|
if (
|
||||||
|
Math.max(x1, x2) < viewMinX ||
|
||||||
|
Math.min(x1, x2) > viewMaxX ||
|
||||||
|
Math.max(y1, y2) < viewMinY ||
|
||||||
|
Math.min(y1, y2) > viewMaxY
|
||||||
|
) continue;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(x1, y1);
|
||||||
|
ctx.lineTo(x2, y2);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
|
||||||
|
hovered = dragging ? null : pickChair(pointer.x, pointer.y);
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
applyWorldTransform();
|
||||||
|
ctx.lineWidth = 1.45 / camera.scale;
|
||||||
|
ctx.lineCap = "round";
|
||||||
|
ctx.lineJoin = "round";
|
||||||
|
for (const chair of chairGeometry) {
|
||||||
|
if (chair.maxX < viewMinX || chair.minX > viewMaxX || chair.maxY < viewMinY || chair.minY > viewMaxY) continue;
|
||||||
|
const active = hovered && hovered.key === chair.key;
|
||||||
|
const selected = placed.has(chair.key);
|
||||||
|
const assignedPersonId = chairAssignments[chair.key];
|
||||||
|
const activePersonChair = activePersonId && assignedPersonId === activePersonId;
|
||||||
|
const assigned = Boolean(assignedPersonId);
|
||||||
|
const baseWidth = chair.kind === "block" ? 1.45 : 1.35;
|
||||||
|
ctx.strokeStyle = activePersonChair
|
||||||
|
? "rgba(234, 179, 8, 1)"
|
||||||
|
: assigned
|
||||||
|
? "rgba(37, 99, 235, 0.98)"
|
||||||
|
: selected
|
||||||
|
? "rgba(220, 38, 38, 0.98)"
|
||||||
|
: active
|
||||||
|
? "rgba(15, 118, 110, 0.98)"
|
||||||
|
: chair.kind === "group"
|
||||||
|
? "rgba(16, 134, 149, 0.74)"
|
||||||
|
: "rgba(21, 149, 142, 0.8)";
|
||||||
|
ctx.lineWidth = (activePersonChair ? 2.8 : assigned ? 2.4 : selected ? 2.6 : active ? 2.1 : baseWidth) / camera.scale;
|
||||||
|
ctx.stroke(chair.path);
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
|
||||||
|
scaleChip.textContent = `scale ${camera.scale.toFixed(4)}x`;
|
||||||
|
renderTooltip();
|
||||||
|
}
|
||||||
|
|
||||||
|
function persistPlaced() {
|
||||||
|
localStorage.setItem(STORAGE_KEY, JSON.stringify([...placed]));
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas.addEventListener("pointerdown", (event) => {
|
||||||
|
dragging = true;
|
||||||
|
dragStart = { x: event.clientX, y: event.clientY, offsetX: camera.offsetX, offsetY: camera.offsetY };
|
||||||
|
canvas.classList.add("dragging");
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("pointerup", (event) => {
|
||||||
|
if (dragging && dragStart) {
|
||||||
|
const move = Math.hypot(event.clientX - dragStart.x, event.clientY - dragStart.y);
|
||||||
|
if (move < 4) {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const picked = pickChair(event.clientX - rect.left, event.clientY - rect.top);
|
||||||
|
if (picked) {
|
||||||
|
if (placed.has(picked.key)) placed.delete(picked.key);
|
||||||
|
else placed.add(picked.key);
|
||||||
|
persistPlaced();
|
||||||
|
if (activePersonId) {
|
||||||
|
const currentChair = getChairByPerson(activePersonId);
|
||||||
|
if (chairAssignments[picked.key] === activePersonId) {
|
||||||
|
delete chairAssignments[picked.key];
|
||||||
|
} else {
|
||||||
|
if (currentChair && currentChair !== picked.key) delete chairAssignments[currentChair];
|
||||||
|
chairAssignments[picked.key] = activePersonId;
|
||||||
|
}
|
||||||
|
persistAssignments();
|
||||||
|
renderPeopleList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dragging = false;
|
||||||
|
dragStart = null;
|
||||||
|
canvas.classList.remove("dragging");
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("pointermove", (event) => {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
pointer = { x: event.clientX - rect.left, y: event.clientY - rect.top };
|
||||||
|
if (dragging && dragStart) {
|
||||||
|
camera.offsetX = dragStart.offsetX + (event.clientX - dragStart.x);
|
||||||
|
camera.offsetY = dragStart.offsetY + (event.clientY - dragStart.y);
|
||||||
|
}
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
|
||||||
|
canvas.addEventListener("wheel", (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const mx = event.clientX - rect.left;
|
||||||
|
const my = event.clientY - rect.top;
|
||||||
|
const before = screenToWorld(mx, my);
|
||||||
|
const factor = event.deltaY < 0 ? 1.08 : 0.92;
|
||||||
|
camera.scale = Math.max(0.002, Math.min(2, camera.scale * factor));
|
||||||
|
const after = worldToScreen(before.x, before.y);
|
||||||
|
camera.offsetX += mx - after.x;
|
||||||
|
camera.offsetY += my - after.y;
|
||||||
|
requestDraw();
|
||||||
|
}, { passive: false });
|
||||||
|
|
||||||
|
document.getElementById("fit-btn").addEventListener("click", fit);
|
||||||
|
document.getElementById("clear-btn").addEventListener("click", () => {
|
||||||
|
placed.clear();
|
||||||
|
persistPlaced();
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
clearAssignBtn.addEventListener("click", () => {
|
||||||
|
chairAssignments = {};
|
||||||
|
persistAssignments();
|
||||||
|
renderPeopleList();
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
orgChartEl.addEventListener("click", (event) => {
|
||||||
|
const item = event.target.closest(".org-person[data-person-id]");
|
||||||
|
if (!item) return;
|
||||||
|
const personId = item.getAttribute("data-person-id");
|
||||||
|
activePersonId = personId === activePersonId ? null : personId;
|
||||||
|
persistActivePerson();
|
||||||
|
renderPeopleList();
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
window.addEventListener("resize", resize);
|
||||||
|
renderPeopleList();
|
||||||
|
resize();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
@@ -0,0 +1,932 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ko">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>center chair people map 7f</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--ink: #152330;
|
||||||
|
--muted: #627286;
|
||||||
|
--paper: rgba(255,255,255,0.86);
|
||||||
|
--line: rgba(21,35,48,0.1);
|
||||||
|
--accent: #0f766e;
|
||||||
|
--bg: #edf2f6;
|
||||||
|
}
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "IBM Plex Sans KR", "Pretendard", sans-serif;
|
||||||
|
color: var(--ink);
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at top left, rgba(15,118,110,0.11), transparent 22%),
|
||||||
|
linear-gradient(180deg, #f5f8fb 0%, #e8eef3 100%);
|
||||||
|
}
|
||||||
|
.page {
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.shell {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.panel {
|
||||||
|
border-radius: 0;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
backdrop-filter: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 10px 14px;
|
||||||
|
font: inherit;
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
color: white;
|
||||||
|
background: linear-gradient(135deg, #0f766e, #115e59);
|
||||||
|
box-shadow: 0 10px 22px rgba(15,118,110,0.18);
|
||||||
|
}
|
||||||
|
button.alt {
|
||||||
|
color: var(--ink);
|
||||||
|
background: rgba(255,255,255,0.9);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.viewer {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.viewer-head {
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
left: 16px;
|
||||||
|
right: 16px;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.chip {
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: rgba(255,255,255,0.82);
|
||||||
|
border: 1px solid rgba(255,255,255,0.94);
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
box-shadow: 0 8px 24px rgba(21,35,48,0.08);
|
||||||
|
}
|
||||||
|
.viewer-actions {
|
||||||
|
position: absolute;
|
||||||
|
left: 16px;
|
||||||
|
top: 64px;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.mapper {
|
||||||
|
position: absolute;
|
||||||
|
top: 76px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: min(94vw, 1320px);
|
||||||
|
max-height: min(56vh, 560px);
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 4;
|
||||||
|
border-radius: 20px;
|
||||||
|
background: rgba(234, 239, 247, 0.95);
|
||||||
|
border: 1px solid rgba(101, 119, 146, 0.22);
|
||||||
|
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.2);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
backdrop-filter: blur(6px);
|
||||||
|
}
|
||||||
|
.hidden-off {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.mapper-head {
|
||||||
|
padding: 10px 14px;
|
||||||
|
border-bottom: 1px solid rgba(101,119,146,0.18);
|
||||||
|
font-size: 12px;
|
||||||
|
color: #51607a;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.35;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 10px;
|
||||||
|
background: rgba(255,255,255,0.6);
|
||||||
|
}
|
||||||
|
.mapper-head strong {
|
||||||
|
display: block;
|
||||||
|
color: #17243b;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
.mapper-head .alt {
|
||||||
|
padding: 8px 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.org-chart {
|
||||||
|
margin: 0;
|
||||||
|
padding: 14px;
|
||||||
|
overflow: auto;
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
.org-top {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: min(100%, 420px);
|
||||||
|
border-radius: 14px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid rgba(67, 84, 118, 0.25);
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.org-top-title {
|
||||||
|
background: #1e2f4d;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 34px;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.1;
|
||||||
|
padding: 16px 12px;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
}
|
||||||
|
.org-top-members {
|
||||||
|
padding: 10px;
|
||||||
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
background: rgba(255,255,255,0.95);
|
||||||
|
}
|
||||||
|
.org-teams {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(7, minmax(160px, 1fr));
|
||||||
|
gap: 10px;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
.org-team {
|
||||||
|
border: 1px solid rgba(110, 126, 152, 0.25);
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: rgba(255,255,255,0.95);
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.org-team h4 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 9px 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #21324e;
|
||||||
|
font-weight: 800;
|
||||||
|
border-bottom: 1px solid rgba(110, 126, 152, 0.2);
|
||||||
|
background: rgba(240, 245, 252, 0.96);
|
||||||
|
}
|
||||||
|
.org-members {
|
||||||
|
padding: 7px;
|
||||||
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
.org-person {
|
||||||
|
border: 1px solid rgba(116, 133, 161, 0.25);
|
||||||
|
background: rgba(255,255,255,0.95);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 6px 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 120ms ease, border-color 120ms ease;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.org-person.active {
|
||||||
|
border-color: rgba(15,118,110,0.6);
|
||||||
|
background: rgba(15,118,110,0.11);
|
||||||
|
}
|
||||||
|
.org-person.assigned {
|
||||||
|
border-color: rgba(37,99,235,0.5);
|
||||||
|
background: rgba(37,99,235,0.1);
|
||||||
|
}
|
||||||
|
.org-person strong {
|
||||||
|
display: block;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.3;
|
||||||
|
color: #15233a;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.org-person small {
|
||||||
|
display: block;
|
||||||
|
color: #5a6a86;
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 1.25;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
@media (max-width: 980px) {
|
||||||
|
.mapper {
|
||||||
|
top: 72px;
|
||||||
|
width: min(96vw, 920px);
|
||||||
|
max-height: 58vh;
|
||||||
|
}
|
||||||
|
.viewer-actions {
|
||||||
|
top: 64px;
|
||||||
|
left: 12px;
|
||||||
|
right: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.mapper-head strong {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.org-top-title {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
.org-teams {
|
||||||
|
grid-template-columns: repeat(3, minmax(150px, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
cursor: grab;
|
||||||
|
}
|
||||||
|
canvas.dragging { cursor: grabbing; }
|
||||||
|
.tooltip {
|
||||||
|
position: absolute;
|
||||||
|
min-width: 170px;
|
||||||
|
padding: 12px 14px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: rgba(17,24,39,0.94);
|
||||||
|
color: white;
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(12px, 12px);
|
||||||
|
transition: opacity 120ms ease;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
.tooltip.visible { opacity: 1; }
|
||||||
|
.tooltip strong { display: block; margin-bottom: 6px; font-size: 14px; }
|
||||||
|
.tooltip div { font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.82); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page">
|
||||||
|
<div class="shell">
|
||||||
|
<main class="panel viewer">
|
||||||
|
<div class="viewer-head">
|
||||||
|
<div class="chip" id="scale-chip"></div>
|
||||||
|
<div class="chip" id="hover-chip">chair hover: none</div>
|
||||||
|
</div>
|
||||||
|
<div class="viewer-actions">
|
||||||
|
<button type="button" id="fit-btn">전체 맞춤</button>
|
||||||
|
<button type="button" class="alt" id="clear-btn">선택 지우기</button>
|
||||||
|
</div>
|
||||||
|
<aside class="mapper hidden-off">
|
||||||
|
<div class="mapper-head">
|
||||||
|
<div id="mapper-status">
|
||||||
|
<strong>조직 현황</strong>
|
||||||
|
<span>선택 인원 없음</span>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="alt" id="clear-assign-btn">매칭 초기화</button>
|
||||||
|
</div>
|
||||||
|
<div class="org-chart" id="org-chart"></div>
|
||||||
|
</aside>
|
||||||
|
<canvas id="canvas"></canvas>
|
||||||
|
<div class="tooltip" id="tooltip"></div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="./center_chair_people_payload_7f.js"></script>
|
||||||
|
<script>
|
||||||
|
const DATA = window.CHAIR_MAP_DATA;
|
||||||
|
function decodeSegments(base64) {
|
||||||
|
const binary = atob(base64);
|
||||||
|
const bytes = new Uint8Array(binary.length);
|
||||||
|
for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
|
||||||
|
return new Int32Array(bytes.buffer);
|
||||||
|
}
|
||||||
|
const bgTileRanges = DATA.bgTileRanges;
|
||||||
|
const bgSegValues = decodeSegments(DATA.bgSegsB64);
|
||||||
|
const chairSegValues = decodeSegments(DATA.chairSegsB64);
|
||||||
|
const chairs = DATA.chairs.map(([key, name, kind, start, count]) => ({
|
||||||
|
key, name, kind, start, count
|
||||||
|
}));
|
||||||
|
const meta = DATA.meta;
|
||||||
|
const world = meta.headerBounds;
|
||||||
|
const canvas = document.getElementById("canvas");
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
const tooltip = document.getElementById("tooltip");
|
||||||
|
const scaleChip = document.getElementById("scale-chip");
|
||||||
|
const hoverChip = document.getElementById("hover-chip");
|
||||||
|
const STORAGE_KEY = "ptc-chair-selection";
|
||||||
|
const PEOPLE_STORAGE_KEY = "ptc-chair-people";
|
||||||
|
const ASSIGN_STORAGE_KEY = "ptc-chair-assignments";
|
||||||
|
const ACTIVE_PERSON_STORAGE_KEY = "ptc-chair-active-person";
|
||||||
|
const clearAssignBtn = document.getElementById("clear-assign-btn");
|
||||||
|
const orgChartEl = document.getElementById("org-chart");
|
||||||
|
const mapperStatus = document.getElementById("mapper-status");
|
||||||
|
// Prevent stale auto-highlights from previous sessions.
|
||||||
|
localStorage.removeItem(STORAGE_KEY);
|
||||||
|
localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
|
||||||
|
localStorage.removeItem(ASSIGN_STORAGE_KEY);
|
||||||
|
const placed = new Set();
|
||||||
|
let people = JSON.parse(localStorage.getItem(PEOPLE_STORAGE_KEY) || "[]");
|
||||||
|
let chairAssignments = {};
|
||||||
|
let activePersonId = null;
|
||||||
|
const ORG_TEMPLATE = {
|
||||||
|
top: {
|
||||||
|
name: "총괄기획실",
|
||||||
|
count: 53,
|
||||||
|
members: [
|
||||||
|
{ name: "장종찬", dept: "총괄기획실", title: "기획실장" },
|
||||||
|
{ name: "김원식", dept: "총괄기획실", title: "전무이사" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
teams: [
|
||||||
|
{ name: "경영기획팀", count: 6, members: ["김우진", "임민정", "국혜린", "최선아", "김윤재", "이미영"] },
|
||||||
|
{ name: "인재성장팀", count: 5, members: ["조태희", "최근혜", "류원준", "주안기", "정성호"] },
|
||||||
|
{ name: "ERP 기획팀", count: 5, members: ["류호성", "문형식", "최요제", "황대일", "이채봉"] },
|
||||||
|
{ name: "디자인기획팀", count: 17, members: ["신혜영", "정은혜", "김태식", "최예은", "채선영", "최영환", "윤봄이", "이예진", "허유나", "마희연", "김수현", "박지영", "권순호", "정두휘", "김정석", "정지윤", "양숙영"] },
|
||||||
|
{ name: "기술기획팀", count: 11, members: ["김원기", "홍아름", "이경민", "김혜인", "황동환", "최찬호", "이태훈", "김신지", "조찬영", "김용연", "한치영"] },
|
||||||
|
{ name: "협업증진팀", count: 3, members: ["성형일", "박주한", "한승민"] },
|
||||||
|
{ name: "솔루션통합팀", count: 4, members: ["권혁진", "염승호", "윤준수", "김지영"] },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
const chairGeometry = chairs.map((chair) => {
|
||||||
|
let minX = Infinity;
|
||||||
|
let minY = Infinity;
|
||||||
|
let maxX = -Infinity;
|
||||||
|
let maxY = -Infinity;
|
||||||
|
const path = new Path2D();
|
||||||
|
const hitSegments = new Float32Array(chair.count * 4);
|
||||||
|
let segCursor = 0;
|
||||||
|
for (let i = chair.start; i < chair.start + chair.count; i += 1) {
|
||||||
|
const offset = i * 4;
|
||||||
|
const x1 = chairSegValues[offset] / 10;
|
||||||
|
const y1 = chairSegValues[offset + 1] / 10;
|
||||||
|
const x2 = chairSegValues[offset + 2] / 10;
|
||||||
|
const y2 = chairSegValues[offset + 3] / 10;
|
||||||
|
path.moveTo(x1, y1);
|
||||||
|
path.lineTo(x2, y2);
|
||||||
|
hitSegments[segCursor] = x1;
|
||||||
|
hitSegments[segCursor + 1] = y1;
|
||||||
|
hitSegments[segCursor + 2] = x2;
|
||||||
|
hitSegments[segCursor + 3] = y2;
|
||||||
|
segCursor += 4;
|
||||||
|
minX = Math.min(minX, x1, x2);
|
||||||
|
minY = Math.min(minY, y1, y2);
|
||||||
|
maxX = Math.max(maxX, x1, x2);
|
||||||
|
maxY = Math.max(maxY, y1, y2);
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
...chair,
|
||||||
|
minX,
|
||||||
|
minY,
|
||||||
|
maxX,
|
||||||
|
maxY,
|
||||||
|
area: Math.max(1, (maxX - minX) * (maxY - minY)),
|
||||||
|
path,
|
||||||
|
hitSegments,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
function renumberChairKeys(chairItems) {
|
||||||
|
if (!chairItems.length) return;
|
||||||
|
const heights = chairItems
|
||||||
|
.map((chair) => Math.max(1, chair.maxY - chair.minY))
|
||||||
|
.sort((a, b) => a - b);
|
||||||
|
const medianHeight = heights[Math.floor(heights.length / 2)] || 1;
|
||||||
|
const rowTolerance = Math.max(40, medianHeight * 0.9);
|
||||||
|
|
||||||
|
const sorted = [...chairItems].sort((a, b) => {
|
||||||
|
const ay = (a.minY + a.maxY) * 0.5;
|
||||||
|
const by = (b.minY + b.maxY) * 0.5;
|
||||||
|
if (Math.abs(by - ay) > rowTolerance) return by - ay; // top -> bottom
|
||||||
|
const ax = (a.minX + a.maxX) * 0.5;
|
||||||
|
const bx = (b.minX + b.maxX) * 0.5;
|
||||||
|
return ax - bx; // left -> right
|
||||||
|
});
|
||||||
|
|
||||||
|
sorted.forEach((chair, index) => {
|
||||||
|
chair.key = String(index + 1);
|
||||||
|
chair.seatNo = index + 1;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
renumberChairKeys(chairGeometry);
|
||||||
|
const PICK_GRID_SIZE = 1800;
|
||||||
|
const chairPickGrid = new Map();
|
||||||
|
function pickGridKey(gx, gy) {
|
||||||
|
return `${gx},${gy}`;
|
||||||
|
}
|
||||||
|
chairGeometry.forEach((chair, index) => {
|
||||||
|
const minGX = Math.floor(chair.minX / PICK_GRID_SIZE);
|
||||||
|
const maxGX = Math.floor(chair.maxX / PICK_GRID_SIZE);
|
||||||
|
const minGY = Math.floor(chair.minY / PICK_GRID_SIZE);
|
||||||
|
const maxGY = Math.floor(chair.maxY / PICK_GRID_SIZE);
|
||||||
|
for (let gx = minGX; gx <= maxGX; gx += 1) {
|
||||||
|
for (let gy = minGY; gy <= maxGY; gy += 1) {
|
||||||
|
const key = pickGridKey(gx, gy);
|
||||||
|
if (!chairPickGrid.has(key)) chairPickGrid.set(key, []);
|
||||||
|
chairPickGrid.get(key).push(index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const camera = { scale: 1, offsetX: 0, offsetY: 0 };
|
||||||
|
let pixelRatio = window.devicePixelRatio || 1;
|
||||||
|
let pointer = { x: 0, y: 0 };
|
||||||
|
let dragging = false;
|
||||||
|
let dragStart = null;
|
||||||
|
let hovered = null;
|
||||||
|
let rafPending = false;
|
||||||
|
|
||||||
|
function normalizePeople(raw) {
|
||||||
|
return raw
|
||||||
|
.map((person, index) => {
|
||||||
|
if (!person || !person.name) return null;
|
||||||
|
return {
|
||||||
|
id: person.id || `person-${index + 1}`,
|
||||||
|
name: String(person.name).trim(),
|
||||||
|
dept: String(person.dept || "").trim(),
|
||||||
|
title: String(person.title || "").trim(),
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.filter(Boolean);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createTemplatePeople() {
|
||||||
|
const generated = [];
|
||||||
|
let seq = 1;
|
||||||
|
ORG_TEMPLATE.top.members.forEach((member) => {
|
||||||
|
generated.push({
|
||||||
|
id: `org-${seq++}`,
|
||||||
|
name: member.name,
|
||||||
|
dept: member.dept,
|
||||||
|
title: member.title,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
ORG_TEMPLATE.teams.forEach((team) => {
|
||||||
|
team.members.forEach((name) => {
|
||||||
|
generated.push({
|
||||||
|
id: `org-${seq++}`,
|
||||||
|
name,
|
||||||
|
dept: team.name,
|
||||||
|
title: "선임",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return generated;
|
||||||
|
}
|
||||||
|
|
||||||
|
people = normalizePeople(people);
|
||||||
|
const templateReady = people.some((person) => person.name === "장종찬" && person.dept === "총괄기획실");
|
||||||
|
if (!templateReady) {
|
||||||
|
people = createTemplatePeople();
|
||||||
|
localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
|
||||||
|
}
|
||||||
|
const chairKeySet = new Set(chairGeometry.map((chair) => chair.key));
|
||||||
|
chairAssignments = Object.fromEntries(
|
||||||
|
Object.entries(chairAssignments).filter(([chairKey, personId]) => (
|
||||||
|
chairKeySet.has(chairKey) && people.some((person) => person.id === personId)
|
||||||
|
))
|
||||||
|
);
|
||||||
|
if (activePersonId && !people.some((person) => person.id === activePersonId)) activePersonId = null;
|
||||||
|
|
||||||
|
function persistPeople() {
|
||||||
|
localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
|
||||||
|
}
|
||||||
|
|
||||||
|
function persistAssignments() {
|
||||||
|
localStorage.setItem(ASSIGN_STORAGE_KEY, JSON.stringify(chairAssignments));
|
||||||
|
}
|
||||||
|
|
||||||
|
function persistActivePerson() {
|
||||||
|
if (!activePersonId) localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
|
||||||
|
else localStorage.setItem(ACTIVE_PERSON_STORAGE_KEY, activePersonId);
|
||||||
|
}
|
||||||
|
|
||||||
|
function assignmentCount() {
|
||||||
|
return Object.keys(chairAssignments).length;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPersonById(id) {
|
||||||
|
return people.find((person) => person.id === id) || null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getChairByPerson(personId) {
|
||||||
|
for (const [chairKey, assignedPersonId] of Object.entries(chairAssignments)) {
|
||||||
|
if (assignedPersonId === personId) return chairKey;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderPeopleList() {
|
||||||
|
const activePerson = getPersonById(activePersonId);
|
||||||
|
const countText = `${assignmentCount()} / ${people.length} 매칭`;
|
||||||
|
mapperStatus.innerHTML = `<strong>조직 현황</strong><span>${activePerson ? `${activePerson.name} 선택됨` : "선택 인원 없음"} · ${countText}</span>`;
|
||||||
|
|
||||||
|
const findPerson = (dept, name) => people.find((person) => person.dept === dept && person.name === name) || null;
|
||||||
|
const personCard = (person, roleText) => {
|
||||||
|
if (!person) return "";
|
||||||
|
const chairKey = getChairByPerson(person.id);
|
||||||
|
const assignedClass = chairKey ? " assigned" : "";
|
||||||
|
const activeClass = person.id === activePersonId ? " active" : "";
|
||||||
|
return `
|
||||||
|
<article class="org-person${assignedClass}${activeClass}" data-person-id="${person.id}">
|
||||||
|
<strong>${person.name}</strong>
|
||||||
|
<small>${person.title || roleText || "-"}</small>
|
||||||
|
<small>${chairKey ? `좌석 ${chairKey}` : "좌석 미지정"}</small>
|
||||||
|
</article>
|
||||||
|
`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const topHtml = ORG_TEMPLATE.top.members
|
||||||
|
.map((member) => personCard(findPerson(member.dept, member.name), member.title))
|
||||||
|
.join("");
|
||||||
|
|
||||||
|
const teamsHtml = ORG_TEMPLATE.teams.map((team) => {
|
||||||
|
const membersHtml = team.members
|
||||||
|
.map((name) => personCard(findPerson(team.name, name), "선임"))
|
||||||
|
.join("");
|
||||||
|
return `
|
||||||
|
<section class="org-team">
|
||||||
|
<h4>${team.name} (${team.count})</h4>
|
||||||
|
<div class="org-members">${membersHtml}</div>
|
||||||
|
</section>
|
||||||
|
`;
|
||||||
|
}).join("");
|
||||||
|
|
||||||
|
orgChartEl.innerHTML = `
|
||||||
|
<section class="org-top">
|
||||||
|
<div class="org-top-title">${ORG_TEMPLATE.top.name} (${ORG_TEMPLATE.top.count})</div>
|
||||||
|
<div class="org-top-members">${topHtml}</div>
|
||||||
|
</section>
|
||||||
|
<section class="org-teams">${teamsHtml}</section>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function worldToScreen(x, y) {
|
||||||
|
return {
|
||||||
|
x: x * camera.scale + camera.offsetX,
|
||||||
|
y: (world.maxY - y + world.minY) * camera.scale + camera.offsetY,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function screenToWorld(x, y) {
|
||||||
|
return {
|
||||||
|
x: (x - camera.offsetX) / camera.scale,
|
||||||
|
y: world.maxY + world.minY - (y - camera.offsetY) / camera.scale,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function resize() {
|
||||||
|
pixelRatio = window.devicePixelRatio || 1;
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
canvas.width = Math.round(rect.width * pixelRatio);
|
||||||
|
canvas.height = Math.round(rect.height * pixelRatio);
|
||||||
|
ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
|
||||||
|
fit();
|
||||||
|
}
|
||||||
|
|
||||||
|
function fit() {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const width = world.maxX - world.minX;
|
||||||
|
const height = world.maxY - world.minY;
|
||||||
|
const pad = 36;
|
||||||
|
const scaleX = (rect.width - pad * 2) / width;
|
||||||
|
const scaleY = (rect.height - pad * 2) / height;
|
||||||
|
camera.scale = Math.min(scaleX, scaleY);
|
||||||
|
camera.offsetX = pad - world.minX * camera.scale + (rect.width - pad * 2 - width * camera.scale) / 2;
|
||||||
|
camera.offsetY = pad - world.minY * camera.scale + (rect.height - pad * 2 - height * camera.scale) / 2;
|
||||||
|
requestDraw();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawGrid(width, height) {
|
||||||
|
ctx.save();
|
||||||
|
ctx.strokeStyle = "rgba(21,35,48,0.05)";
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
for (let x = 120; x < width; x += 120) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(x, 0);
|
||||||
|
ctx.lineTo(x, height);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
for (let y = 120; y < height; y += 120) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(0, y);
|
||||||
|
ctx.lineTo(width, y);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
function pickChair(screenX, screenY) {
|
||||||
|
const threshold = 12;
|
||||||
|
const pointerWorld = screenToWorld(screenX, screenY);
|
||||||
|
const thresholdWorld = threshold / camera.scale;
|
||||||
|
const thresholdWorldSq = thresholdWorld * thresholdWorld;
|
||||||
|
const minGX = Math.floor((pointerWorld.x - thresholdWorld) / PICK_GRID_SIZE);
|
||||||
|
const maxGX = Math.floor((pointerWorld.x + thresholdWorld) / PICK_GRID_SIZE);
|
||||||
|
const minGY = Math.floor((pointerWorld.y - thresholdWorld) / PICK_GRID_SIZE);
|
||||||
|
const maxGY = Math.floor((pointerWorld.y + thresholdWorld) / PICK_GRID_SIZE);
|
||||||
|
const candidateIndexes = [];
|
||||||
|
const seen = new Set();
|
||||||
|
for (let gx = minGX; gx <= maxGX; gx += 1) {
|
||||||
|
for (let gy = minGY; gy <= maxGY; gy += 1) {
|
||||||
|
const candidates = chairPickGrid.get(pickGridKey(gx, gy));
|
||||||
|
if (!candidates) continue;
|
||||||
|
for (const index of candidates) {
|
||||||
|
if (seen.has(index)) continue;
|
||||||
|
seen.add(index);
|
||||||
|
candidateIndexes.push(index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let best = null;
|
||||||
|
for (const index of candidateIndexes) {
|
||||||
|
const chair = chairGeometry[index];
|
||||||
|
if (
|
||||||
|
pointerWorld.x < chair.minX - thresholdWorld ||
|
||||||
|
pointerWorld.x > chair.maxX + thresholdWorld ||
|
||||||
|
pointerWorld.y < chair.minY - thresholdWorld ||
|
||||||
|
pointerWorld.y > chair.maxY + thresholdWorld
|
||||||
|
) continue;
|
||||||
|
let distSq = Infinity;
|
||||||
|
for (let i = 0; i < chair.hitSegments.length; i += 4) {
|
||||||
|
const x1 = chair.hitSegments[i];
|
||||||
|
const y1 = chair.hitSegments[i + 1];
|
||||||
|
const x2 = chair.hitSegments[i + 2];
|
||||||
|
const y2 = chair.hitSegments[i + 3];
|
||||||
|
const dx = x2 - x1;
|
||||||
|
const dy = y2 - y1;
|
||||||
|
const len2 = dx * dx + dy * dy;
|
||||||
|
let segDistSq;
|
||||||
|
if (len2 === 0) {
|
||||||
|
const px = pointerWorld.x - x1;
|
||||||
|
const py = pointerWorld.y - y1;
|
||||||
|
segDistSq = px * px + py * py;
|
||||||
|
} else {
|
||||||
|
let t = ((pointerWorld.x - x1) * dx + (pointerWorld.y - y1) * dy) / len2;
|
||||||
|
t = Math.max(0, Math.min(1, t));
|
||||||
|
const lx = x1 + t * dx;
|
||||||
|
const ly = y1 + t * dy;
|
||||||
|
const px = pointerWorld.x - lx;
|
||||||
|
const py = pointerWorld.y - ly;
|
||||||
|
segDistSq = px * px + py * py;
|
||||||
|
}
|
||||||
|
if (segDistSq < distSq) distSq = segDistSq;
|
||||||
|
if (distSq <= thresholdWorldSq * 0.3) break;
|
||||||
|
}
|
||||||
|
if (distSq > thresholdWorldSq) continue;
|
||||||
|
const dist = Math.sqrt(distSq) * camera.scale;
|
||||||
|
|
||||||
|
if (!best) {
|
||||||
|
best = { chair, dist };
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
const distGap = dist - best.dist;
|
||||||
|
if (distGap < -0.75) {
|
||||||
|
best = { chair, dist };
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Math.abs(distGap) <= 2) {
|
||||||
|
const areaGap = chair.area - best.chair.area;
|
||||||
|
if (areaGap < -1) {
|
||||||
|
best = { chair, dist };
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
Math.abs(areaGap) <= 1 &&
|
||||||
|
chair.kind === "block" &&
|
||||||
|
best.chair.kind !== "block"
|
||||||
|
) {
|
||||||
|
best = { chair, dist };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return best ? best.chair : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderTooltip() {
|
||||||
|
if (!hovered) {
|
||||||
|
tooltip.classList.remove("visible");
|
||||||
|
hoverChip.textContent = "chair hover: none";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
hoverChip.textContent = `chair hover: ${hovered.name}`;
|
||||||
|
tooltip.innerHTML = `
|
||||||
|
<strong>${hovered.name}</strong>
|
||||||
|
<div>chair key: ${hovered.key}</div>
|
||||||
|
<div>${placed.has(hovered.key) ? "선택됨" : "클릭하면 선택"}</div>
|
||||||
|
<div>${chairAssignments[hovered.key] ? `배치: ${(getPersonById(chairAssignments[hovered.key]) || { name: "알수없음" }).name}` : "배치 인원 없음"}</div>
|
||||||
|
`;
|
||||||
|
tooltip.style.left = `${pointer.x + 14}px`;
|
||||||
|
tooltip.style.top = `${pointer.y + 14}px`;
|
||||||
|
tooltip.classList.add("visible");
|
||||||
|
}
|
||||||
|
|
||||||
|
function requestDraw() {
|
||||||
|
if (rafPending) return;
|
||||||
|
rafPending = true;
|
||||||
|
window.requestAnimationFrame(() => {
|
||||||
|
rafPending = false;
|
||||||
|
draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyWorldTransform() {
|
||||||
|
ctx.setTransform(
|
||||||
|
pixelRatio * camera.scale,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
-pixelRatio * camera.scale,
|
||||||
|
pixelRatio * camera.offsetX,
|
||||||
|
pixelRatio * ((world.maxY + world.minY) * camera.scale + camera.offsetY)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
|
||||||
|
ctx.clearRect(0, 0, rect.width, rect.height);
|
||||||
|
drawGrid(rect.width, rect.height);
|
||||||
|
const viewA = screenToWorld(0, rect.height);
|
||||||
|
const viewB = screenToWorld(rect.width, 0);
|
||||||
|
const viewMinX = Math.min(viewA.x, viewB.x);
|
||||||
|
const viewMaxX = Math.max(viewA.x, viewB.x);
|
||||||
|
const viewMinY = Math.min(viewA.y, viewB.y);
|
||||||
|
const viewMaxY = Math.max(viewA.y, viewB.y);
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
applyWorldTransform();
|
||||||
|
ctx.strokeStyle = "rgba(100, 116, 139, 0.28)";
|
||||||
|
ctx.lineWidth = 1 / camera.scale;
|
||||||
|
const tileSize = meta.backgroundTileSize;
|
||||||
|
const tileMinX = Math.floor(viewMinX / tileSize);
|
||||||
|
const tileMaxX = Math.floor(viewMaxX / tileSize);
|
||||||
|
const tileMinY = Math.floor(viewMinY / tileSize);
|
||||||
|
const tileMaxY = Math.floor(viewMaxY / tileSize);
|
||||||
|
for (let tx = tileMinX; tx <= tileMaxX; tx += 1) {
|
||||||
|
for (let ty = tileMinY; ty <= tileMaxY; ty += 1) {
|
||||||
|
const range = bgTileRanges[`${tx},${ty}`];
|
||||||
|
if (!range) continue;
|
||||||
|
const start = range[0];
|
||||||
|
const count = range[1];
|
||||||
|
for (let i = start; i < start + count; i += 1) {
|
||||||
|
const offset = i * 4;
|
||||||
|
const x1 = bgSegValues[offset] / 10;
|
||||||
|
const y1 = bgSegValues[offset + 1] / 10;
|
||||||
|
const x2 = bgSegValues[offset + 2] / 10;
|
||||||
|
const y2 = bgSegValues[offset + 3] / 10;
|
||||||
|
if (
|
||||||
|
Math.max(x1, x2) < viewMinX ||
|
||||||
|
Math.min(x1, x2) > viewMaxX ||
|
||||||
|
Math.max(y1, y2) < viewMinY ||
|
||||||
|
Math.min(y1, y2) > viewMaxY
|
||||||
|
) continue;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(x1, y1);
|
||||||
|
ctx.lineTo(x2, y2);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
|
||||||
|
hovered = dragging ? null : pickChair(pointer.x, pointer.y);
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
applyWorldTransform();
|
||||||
|
ctx.lineWidth = 1.45 / camera.scale;
|
||||||
|
ctx.lineCap = "round";
|
||||||
|
ctx.lineJoin = "round";
|
||||||
|
for (const chair of chairGeometry) {
|
||||||
|
if (chair.maxX < viewMinX || chair.minX > viewMaxX || chair.maxY < viewMinY || chair.minY > viewMaxY) continue;
|
||||||
|
const active = hovered && hovered.key === chair.key;
|
||||||
|
const selected = placed.has(chair.key);
|
||||||
|
const assignedPersonId = chairAssignments[chair.key];
|
||||||
|
const activePersonChair = activePersonId && assignedPersonId === activePersonId;
|
||||||
|
const assigned = Boolean(assignedPersonId);
|
||||||
|
const baseWidth = chair.kind === "block" ? 1.45 : 1.35;
|
||||||
|
ctx.strokeStyle = activePersonChair
|
||||||
|
? "rgba(234, 179, 8, 1)"
|
||||||
|
: assigned
|
||||||
|
? "rgba(37, 99, 235, 0.98)"
|
||||||
|
: selected
|
||||||
|
? "rgba(220, 38, 38, 0.98)"
|
||||||
|
: active
|
||||||
|
? "rgba(15, 118, 110, 0.98)"
|
||||||
|
: chair.kind === "group"
|
||||||
|
? "rgba(16, 134, 149, 0.74)"
|
||||||
|
: "rgba(21, 149, 142, 0.8)";
|
||||||
|
ctx.lineWidth = (activePersonChair ? 2.8 : assigned ? 2.4 : selected ? 2.6 : active ? 2.1 : baseWidth) / camera.scale;
|
||||||
|
ctx.stroke(chair.path);
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
|
||||||
|
scaleChip.textContent = `scale ${camera.scale.toFixed(4)}x`;
|
||||||
|
renderTooltip();
|
||||||
|
}
|
||||||
|
|
||||||
|
function persistPlaced() {
|
||||||
|
localStorage.setItem(STORAGE_KEY, JSON.stringify([...placed]));
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas.addEventListener("pointerdown", (event) => {
|
||||||
|
dragging = true;
|
||||||
|
dragStart = { x: event.clientX, y: event.clientY, offsetX: camera.offsetX, offsetY: camera.offsetY };
|
||||||
|
canvas.classList.add("dragging");
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("pointerup", (event) => {
|
||||||
|
if (dragging && dragStart) {
|
||||||
|
const move = Math.hypot(event.clientX - dragStart.x, event.clientY - dragStart.y);
|
||||||
|
if (move < 4) {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const picked = pickChair(event.clientX - rect.left, event.clientY - rect.top);
|
||||||
|
if (picked) {
|
||||||
|
if (placed.has(picked.key)) placed.delete(picked.key);
|
||||||
|
else placed.add(picked.key);
|
||||||
|
persistPlaced();
|
||||||
|
if (activePersonId) {
|
||||||
|
const currentChair = getChairByPerson(activePersonId);
|
||||||
|
if (chairAssignments[picked.key] === activePersonId) {
|
||||||
|
delete chairAssignments[picked.key];
|
||||||
|
} else {
|
||||||
|
if (currentChair && currentChair !== picked.key) delete chairAssignments[currentChair];
|
||||||
|
chairAssignments[picked.key] = activePersonId;
|
||||||
|
}
|
||||||
|
persistAssignments();
|
||||||
|
renderPeopleList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dragging = false;
|
||||||
|
dragStart = null;
|
||||||
|
canvas.classList.remove("dragging");
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("pointermove", (event) => {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
pointer = { x: event.clientX - rect.left, y: event.clientY - rect.top };
|
||||||
|
if (dragging && dragStart) {
|
||||||
|
camera.offsetX = dragStart.offsetX + (event.clientX - dragStart.x);
|
||||||
|
camera.offsetY = dragStart.offsetY + (event.clientY - dragStart.y);
|
||||||
|
}
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
|
||||||
|
canvas.addEventListener("wheel", (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const mx = event.clientX - rect.left;
|
||||||
|
const my = event.clientY - rect.top;
|
||||||
|
const before = screenToWorld(mx, my);
|
||||||
|
const factor = event.deltaY < 0 ? 1.08 : 0.92;
|
||||||
|
camera.scale = Math.max(0.002, Math.min(2, camera.scale * factor));
|
||||||
|
const after = worldToScreen(before.x, before.y);
|
||||||
|
camera.offsetX += mx - after.x;
|
||||||
|
camera.offsetY += my - after.y;
|
||||||
|
requestDraw();
|
||||||
|
}, { passive: false });
|
||||||
|
|
||||||
|
document.getElementById("fit-btn").addEventListener("click", fit);
|
||||||
|
document.getElementById("clear-btn").addEventListener("click", () => {
|
||||||
|
placed.clear();
|
||||||
|
persistPlaced();
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
clearAssignBtn.addEventListener("click", () => {
|
||||||
|
chairAssignments = {};
|
||||||
|
persistAssignments();
|
||||||
|
renderPeopleList();
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
orgChartEl.addEventListener("click", (event) => {
|
||||||
|
const item = event.target.closest(".org-person[data-person-id]");
|
||||||
|
if (!item) return;
|
||||||
|
const personId = item.getAttribute("data-person-id");
|
||||||
|
activePersonId = personId === activePersonId ? null : personId;
|
||||||
|
persistActivePerson();
|
||||||
|
renderPeopleList();
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
window.addEventListener("resize", resize);
|
||||||
|
renderPeopleList();
|
||||||
|
resize();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
BIN
public/img/location_photo/한맥빌딩/1층.png
Normal file
BIN
public/img/location_photo/한맥빌딩/1층.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
BIN
public/img/location_photo/한맥빌딩/2층.png
Normal file
BIN
public/img/location_photo/한맥빌딩/2층.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
BIN
public/img/location_photo/한맥빌딩/3층.png
Normal file
BIN
public/img/location_photo/한맥빌딩/3층.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 225 KiB |
BIN
public/img/location_photo/한맥빌딩/4층.png
Normal file
BIN
public/img/location_photo/한맥빌딩/4층.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 228 KiB |
BIN
public/img/location_photo/한맥빌딩/5층.png
Normal file
BIN
public/img/location_photo/한맥빌딩/5층.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
BIN
public/img/location_photo/한맥빌딩/6층.png
Normal file
BIN
public/img/location_photo/한맥빌딩/6층.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 259 KiB |
BIN
public/img/location_photo/한맥빌딩/7층.png
Normal file
BIN
public/img/location_photo/한맥빌딩/7층.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
BIN
public/img/location_photo/한맥빌딩/MDF실/MDF_1.png
Normal file
BIN
public/img/location_photo/한맥빌딩/MDF실/MDF_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 MiB |
BIN
public/img/location_photo/한맥빌딩/MDF실/MDF_2.png
Normal file
BIN
public/img/location_photo/한맥빌딩/MDF실/MDF_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.8 MiB |
BIN
public/img/location_photo/한맥빌딩/MDF실/MDF_3.png
Normal file
BIN
public/img/location_photo/한맥빌딩/MDF실/MDF_3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 MiB |
BIN
public/img/location_photo/한맥빌딩/MDF실/MDF_4.png
Normal file
BIN
public/img/location_photo/한맥빌딩/MDF실/MDF_4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 MiB |
@@ -1,163 +0,0 @@
|
|||||||
import * as fs from 'fs';
|
|
||||||
|
|
||||||
// dummyData.ts를 읽어와서 dummyPCs 파싱
|
|
||||||
const content = fs.readFileSync('c:/Project/HM ITAM/src/core/dummyData.ts', 'utf-8');
|
|
||||||
|
|
||||||
// export const dummyPCs: any[] = [ ... ]; 패턴 추출
|
|
||||||
const match = content.match(/export const dummyPCs: any\[\] = (\[[\s\S]*?\]);/);
|
|
||||||
if (!match) {
|
|
||||||
console.error('Failed to parse dummyPCs from dummyData.ts');
|
|
||||||
process.exit(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
const dummyPCs = JSON.parse(match[1]);
|
|
||||||
|
|
||||||
function calculatePcScoreDeductive(cpu, ram, gpu, purchaseDate) {
|
|
||||||
let score = 100;
|
|
||||||
|
|
||||||
// 1. CPU 등급 감점
|
|
||||||
const cpuUpper = (cpu || '').toUpperCase();
|
|
||||||
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 세대 감점
|
|
||||||
let genDeduction = 0;
|
|
||||||
let 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);
|
|
||||||
}
|
|
||||||
|
|
||||||
let 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 용량 감점
|
|
||||||
const ramUpper = (ram || '').toUpperCase();
|
|
||||||
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 성능 감점
|
|
||||||
const gpuUpper = (gpu || '').toUpperCase();
|
|
||||||
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 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. 연식(노후도) 감점
|
|
||||||
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())) {
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
const jobScores = {};
|
|
||||||
let totalPcs = 0;
|
|
||||||
|
|
||||||
const filteredPCs = dummyPCs.filter(pc => pc.user_position !== '재고PC');
|
|
||||||
|
|
||||||
filteredPCs.forEach(pc => {
|
|
||||||
const job = pc.user_position || '미분류';
|
|
||||||
const score = calculatePcScoreDeductive(pc.cpu, pc.ram, pc.gpu, pc.purchase_date);
|
|
||||||
|
|
||||||
if (!jobScores[job]) {
|
|
||||||
jobScores[job] = { total: 0, count: 0 };
|
|
||||||
}
|
|
||||||
jobScores[job].total += score;
|
|
||||||
jobScores[job].count += 1;
|
|
||||||
totalPcs++;
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('--- Job Averages (Deductive 100-point) ---');
|
|
||||||
const sortedJobs = Object.keys(jobScores).map(job => {
|
|
||||||
const avg = jobScores[job].total / jobScores[job].count;
|
|
||||||
return {
|
|
||||||
job,
|
|
||||||
avg: parseFloat(avg.toFixed(1)),
|
|
||||||
count: jobScores[job].count
|
|
||||||
};
|
|
||||||
}).sort((a, b) => b.avg - a.avg);
|
|
||||||
|
|
||||||
sortedJobs.forEach((item, index) => {
|
|
||||||
console.log(`${index + 1}. ${item.job}: Avg=${item.avg}점, Count=${item.count}대`);
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('Total PCs (excluding Stock):', totalPcs);
|
|
||||||
118
scratch/fix_dates_by_spec.js
Normal file
118
scratch/fix_dates_by_spec.js
Normal file
@@ -0,0 +1,118 @@
|
|||||||
|
import mysql from 'mysql2/promise';
|
||||||
|
import dotenv from 'dotenv';
|
||||||
|
|
||||||
|
dotenv.config();
|
||||||
|
|
||||||
|
const pool = mysql.createPool({
|
||||||
|
host: process.env.DB_HOST,
|
||||||
|
user: process.env.DB_USER,
|
||||||
|
password: process.env.DB_PASS,
|
||||||
|
database: process.env.DB_NAME,
|
||||||
|
port: parseInt(process.env.DB_PORT || '3306'),
|
||||||
|
});
|
||||||
|
|
||||||
|
// 하드웨어 출시 연도 데이터베이스 (CPU/GPU)
|
||||||
|
const RELEASE_DATES = {
|
||||||
|
// Intel CPU Generations (Mainstream desktop release month/year)
|
||||||
|
'i9-14': '2023-10', 'i7-14': '2023-10', 'i5-14': '2023-10',
|
||||||
|
'i9-13': '2022-10', 'i7-13': '2022-10', 'i5-13': '2022-10',
|
||||||
|
'i9-12': '2021-11', 'i7-12': '2021-11', 'i5-12': '2021-11',
|
||||||
|
'i9-11': '2021-03', 'i7-11': '2021-03', 'i5-11': '2021-03',
|
||||||
|
'i9-10': '2020-05', 'i7-10': '2020-05', 'i5-10': '2020-05',
|
||||||
|
'i9-9': '2018-10', 'i7-9': '2018-10', 'i5-9': '2018-10',
|
||||||
|
'i7-8': '2017-10', 'i5-8': '2017-10',
|
||||||
|
'i7-7': '2017-01', 'i5-7': '2017-01',
|
||||||
|
'i7-6': '2015-08', 'i5-6': '2015-08',
|
||||||
|
'i7-4': '2013-06', 'i5-4': '2013-06',
|
||||||
|
'i7-3': '2012-04', 'i5-3': '2012-04',
|
||||||
|
'i7-2': '2011-01', 'i5-2': '2011-01',
|
||||||
|
|
||||||
|
// NVIDIA GPU Series
|
||||||
|
'RTX 4090': '2022-10', 'RTX 4080': '2022-11', 'RTX 4070': '2023-04', 'RTX 4060': '2023-06',
|
||||||
|
'RTX 3090': '2020-09', 'RTX 3080': '2020-09', 'RTX 3070': '2020-10', 'RTX 3060': '2021-02',
|
||||||
|
'RTX 2080': '2018-09', 'RTX 2070': '2018-10', 'RTX 2060': '2019-01',
|
||||||
|
'GTX 1660': '2019-03', 'GTX 1650': '2019-04',
|
||||||
|
'GTX 1080': '2016-05', 'GTX 1070': '2016-06', 'GTX 1060': '2016-07', 'GTX 1050': '2016-10',
|
||||||
|
'GTX 980': '2014-09', 'GTX 970': '2014-09', 'GTX 960': '2015-01'
|
||||||
|
};
|
||||||
|
|
||||||
|
function inferDateFromSpecs(cpu, gpu) {
|
||||||
|
const cpuStr = (cpu || '').toUpperCase();
|
||||||
|
const gpuStr = (gpu || '').toUpperCase();
|
||||||
|
|
||||||
|
let inferred = null;
|
||||||
|
|
||||||
|
// 1. GPU 기준 (최신 그래픽카드가 꽂혀있으면 그 시기 이후 구매일 확률이 높음)
|
||||||
|
for (const [key, date] of Object.entries(RELEASE_DATES)) {
|
||||||
|
if (gpuStr.includes(key)) {
|
||||||
|
inferred = date;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. CPU 기준 (GPU에서 못 찾았거나, CPU가 더 최신일 경우)
|
||||||
|
if (!inferred) {
|
||||||
|
for (const [key, date] of Object.entries(RELEASE_DATES)) {
|
||||||
|
// i7-13700 등을 찾기 위해 정규식 또는 포함 여부 확인
|
||||||
|
if (cpuStr.includes(key)) {
|
||||||
|
inferred = date;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return inferred ? `${inferred}-01` : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function run() {
|
||||||
|
const connection = await pool.getConnection();
|
||||||
|
try {
|
||||||
|
const [rows] = await connection.query(`
|
||||||
|
SELECT c.id, c.asset_code, c.purchase_date, s.cpu, s.gpu
|
||||||
|
FROM asset_core c
|
||||||
|
LEFT JOIN asset_spec s ON c.id = s.asset_id
|
||||||
|
`);
|
||||||
|
|
||||||
|
const updates = [];
|
||||||
|
const unchanged = [];
|
||||||
|
|
||||||
|
for (const row of rows) {
|
||||||
|
const currentVal = (row.purchase_date || '').trim();
|
||||||
|
|
||||||
|
// 구매일자가 없거나 부정확한 경우만 처리
|
||||||
|
if (!currentVal || currentVal === '-' || currentVal === 'undefined' || currentVal.startsWith('2024-01-01')) {
|
||||||
|
const specDate = inferDateFromSpecs(row.cpu, row.gpu);
|
||||||
|
|
||||||
|
if (specDate) {
|
||||||
|
updates.push({ id: row.id, date: specDate, code: row.asset_code, cpu: row.cpu, gpu: row.gpu });
|
||||||
|
} else {
|
||||||
|
unchanged.push({ code: row.asset_code, cpu: row.cpu, gpu: row.gpu });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(`🚀 스펙 분석 결과: ${updates.length}건의 자산 구매일자를 보정합니다.`);
|
||||||
|
|
||||||
|
for (const item of updates) {
|
||||||
|
await connection.query('UPDATE asset_core SET purchase_date = ? WHERE id = ?', [item.date, item.id]);
|
||||||
|
console.log(`[Update] ${item.code.padEnd(15)} | CPU: ${String(item.cpu).padEnd(20)} | GPU: ${String(item.gpu).padEnd(15)} -> ${item.date}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (unchanged.length > 0) {
|
||||||
|
console.log('\n⚠️ 스펙 정보를 찾을 수 없어 보정하지 못한 자산:');
|
||||||
|
unchanged.forEach(u => {
|
||||||
|
if (u.code) console.log(`[Skip] ${u.code.padEnd(15)} | CPU: ${u.cpu || '-'} | GPU: ${u.gpu || '-'}`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(`\n✅ 완료: ${updates.length}건 보정됨.`);
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error:', err);
|
||||||
|
} finally {
|
||||||
|
connection.release();
|
||||||
|
pool.end();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
run();
|
||||||
128
scratch/fix_dates_strict.js
Normal file
128
scratch/fix_dates_strict.js
Normal file
@@ -0,0 +1,128 @@
|
|||||||
|
import mysql from 'mysql2/promise';
|
||||||
|
import dotenv from 'dotenv';
|
||||||
|
|
||||||
|
dotenv.config();
|
||||||
|
|
||||||
|
const pool = mysql.createPool({
|
||||||
|
host: process.env.DB_HOST,
|
||||||
|
user: process.env.DB_USER,
|
||||||
|
password: process.env.DB_PASS,
|
||||||
|
database: process.env.DB_NAME,
|
||||||
|
port: parseInt(process.env.DB_PORT || '3306'),
|
||||||
|
});
|
||||||
|
|
||||||
|
// 하드웨어 출시 연도/월 데이터베이스
|
||||||
|
const RELEASE_DATES = {
|
||||||
|
// Intel CPU
|
||||||
|
'i9-14': '2023-10', 'i7-14': '2023-10', 'i5-14': '2023-10',
|
||||||
|
'i9-13': '2022-10', 'i7-13': '2022-10', 'i5-13': '2022-10',
|
||||||
|
'i9-12': '2021-11', 'i7-12': '2021-11', 'i5-12': '2021-11',
|
||||||
|
'i9-11': '2021-03', 'i7-11': '2021-03', 'i5-11': '2021-03',
|
||||||
|
'i9-10': '2020-05', 'i7-10': '2020-05', 'i5-10': '2020-05',
|
||||||
|
'i9-9': '2018-10', 'i7-9': '2018-10', 'i5-9': '2018-10',
|
||||||
|
'i7-8': '2017-10', 'i5-8': '2017-10',
|
||||||
|
'i7-7': '2017-01', 'i5-7': '2017-01',
|
||||||
|
'i7-6': '2015-08', 'i5-6': '2015-08',
|
||||||
|
'i7-5': '2014-06', 'i5-5': '2015-06', // Broadwell
|
||||||
|
'i7-4': '2013-06', 'i5-4': '2013-06',
|
||||||
|
'i7-3': '2012-04', 'i5-3': '2012-04',
|
||||||
|
'i7-2': '2011-01', 'i5-2': '2011-01',
|
||||||
|
|
||||||
|
// NVIDIA GPU
|
||||||
|
'RTX 40': '2022-10',
|
||||||
|
'RTX 30': '2020-09',
|
||||||
|
'RTX 20': '2018-09',
|
||||||
|
'GTX 16': '2019-02',
|
||||||
|
'GTX 10': '2016-05',
|
||||||
|
'GTX 9': '2014-09',
|
||||||
|
'GTX 750': '2014-02',
|
||||||
|
'GTX 7': '2013-05',
|
||||||
|
'GTX 6': '2012-03'
|
||||||
|
};
|
||||||
|
|
||||||
|
// 출시 연도만 있는 경우 (지시에 따라 후속년도 12월 적용을 위함)
|
||||||
|
const YEAR_ONLY = {
|
||||||
|
'I5-4': 2013,
|
||||||
|
'I5-6': 2015,
|
||||||
|
'I7-7': 2017,
|
||||||
|
'GTX 750': 2014
|
||||||
|
};
|
||||||
|
|
||||||
|
function inferDateFromSpecs(cpu, gpu) {
|
||||||
|
const cpuStr = (cpu || '').toUpperCase();
|
||||||
|
const gpuStr = (gpu || '').toUpperCase();
|
||||||
|
|
||||||
|
let latestYear = 0;
|
||||||
|
let latestMonth = 0;
|
||||||
|
|
||||||
|
// 모든 매핑 데이터를 순회하며 가장 최신 날짜를 찾음
|
||||||
|
for (const [key, dateStr] of Object.entries(RELEASE_DATES)) {
|
||||||
|
if (cpuStr.includes(key) || gpuStr.includes(key)) {
|
||||||
|
const [y, m] = dateStr.split('-').map(Number);
|
||||||
|
if (y > latestYear || (y === latestYear && m > latestMonth)) {
|
||||||
|
latestYear = y;
|
||||||
|
latestMonth = m;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 매칭된 정보가 있는 경우
|
||||||
|
if (latestYear > 0) {
|
||||||
|
// 월 정보가 명확히 매핑된 경우 (RELEASE_DATES 사용)
|
||||||
|
// 하지만 지시사항에 따라 "월을 못찾으면 12월" & "후속년도" 규칙 적용 여부 판단
|
||||||
|
// RELEASE_DATES는 월이 이미 있으므로 그대로 사용하되,
|
||||||
|
// 만약 YEAR_ONLY에만 걸리는 경우를 위해 로직 보강
|
||||||
|
return `${latestYear}-${String(latestMonth).padStart(2, '0')}-01`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 연도만 매칭되는 경우 (지시사항: 후속년도 12월)
|
||||||
|
for (const [key, year] of Object.entries(YEAR_ONLY)) {
|
||||||
|
if (cpuStr.includes(key) || gpuStr.includes(key)) {
|
||||||
|
return `${year + 1}-12-01`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function run() {
|
||||||
|
const connection = await pool.getConnection();
|
||||||
|
try {
|
||||||
|
const [rows] = await connection.query(`
|
||||||
|
SELECT c.id, c.asset_code, c.purchase_date, s.cpu, s.gpu
|
||||||
|
FROM asset_core c
|
||||||
|
LEFT JOIN asset_spec s ON c.id = s.asset_id
|
||||||
|
`);
|
||||||
|
|
||||||
|
const updates = [];
|
||||||
|
|
||||||
|
for (const row of rows) {
|
||||||
|
const currentVal = (row.purchase_date || '').trim();
|
||||||
|
|
||||||
|
// 구매일자가 없거나 '-', 'undefined'인 경우 + 혹은 아직 보정이 필요한 자산
|
||||||
|
if (!currentVal || currentVal === '-' || currentVal === 'undefined' || currentVal.startsWith('0000') || currentVal === '2024-01-01') {
|
||||||
|
const specDate = inferDateFromSpecs(row.cpu, row.gpu);
|
||||||
|
if (specDate) {
|
||||||
|
updates.push({ id: row.id, date: specDate, code: row.asset_code, cpu: row.cpu, gpu: row.gpu });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(`🚀 지시사항 반영: ${updates.length}건의 자산을 보정합니다. (후속년도/12월 규칙 적용)`);
|
||||||
|
|
||||||
|
for (const item of updates) {
|
||||||
|
await connection.query('UPDATE asset_core SET purchase_date = ? WHERE id = ?', [item.date, item.id]);
|
||||||
|
console.log(`[Update] ${item.code.padEnd(15)} | CPU: ${String(item.cpu).padEnd(20)} | GPU: ${String(item.gpu).padEnd(15)} -> ${item.date}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(`\n✅ 완료: ${updates.length}건 보정됨.`);
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error:', err);
|
||||||
|
} finally {
|
||||||
|
connection.release();
|
||||||
|
pool.end();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
run();
|
||||||
88
scratch/fix_purchase_dates.js
Normal file
88
scratch/fix_purchase_dates.js
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
import mysql from 'mysql2/promise';
|
||||||
|
import dotenv from 'dotenv';
|
||||||
|
|
||||||
|
dotenv.config();
|
||||||
|
|
||||||
|
const pool = mysql.createPool({
|
||||||
|
host: process.env.DB_HOST,
|
||||||
|
user: process.env.DB_USER,
|
||||||
|
password: process.env.DB_PASS,
|
||||||
|
database: process.env.DB_NAME,
|
||||||
|
port: parseInt(process.env.DB_PORT || '3306'),
|
||||||
|
});
|
||||||
|
|
||||||
|
async function run() {
|
||||||
|
const connection = await pool.getConnection();
|
||||||
|
try {
|
||||||
|
// 먼저 잘못 들어간 0000-00-01 등 복구
|
||||||
|
console.log('잘못된 형식(0000-00-01 등)을 초기화합니다...');
|
||||||
|
await connection.query("UPDATE asset_core SET purchase_date = '-' WHERE purchase_date LIKE '0000%' OR purchase_date = '2020-01-01'");
|
||||||
|
|
||||||
|
const [rows] = await connection.query('SELECT id, asset_code, purchase_date, category FROM asset_core');
|
||||||
|
|
||||||
|
const updates = [];
|
||||||
|
const missing = [];
|
||||||
|
|
||||||
|
for (const row of rows) {
|
||||||
|
const code = (row.asset_code || '').trim();
|
||||||
|
const currentVal = (row.purchase_date || '').trim();
|
||||||
|
|
||||||
|
// 구매일자가 없거나 '-', 'undefined' 인 경우 대상
|
||||||
|
if (!currentVal || currentVal === '-' || currentVal === 'undefined') {
|
||||||
|
let inferredDate = null;
|
||||||
|
|
||||||
|
// 1. PREFIX-YYYYMM-NNNN 형식 (예: PC-202406-0001)
|
||||||
|
const match6 = code.match(/[A-Z]+-(\d{4})(0[1-9]|1[0-2])-\d+/);
|
||||||
|
if (match6) {
|
||||||
|
inferredDate = `${match6[1]}-${match6[2]}-01`;
|
||||||
|
} else {
|
||||||
|
// 2. PREFIX-YYYYNN 형식 (예: PC-202423) -> 연도만 있고 뒤에 순번 2자리
|
||||||
|
const matchYearSeq = code.match(/[A-Z]+-(20\d{2})(\d{2})$/);
|
||||||
|
if (matchYearSeq) {
|
||||||
|
inferredDate = `${matchYearSeq[1]}-01-01`; // 월을 모르므로 1월로 통일
|
||||||
|
} else {
|
||||||
|
// 3. PREFIX-YYNNN 형식 (예: PC-24001)
|
||||||
|
const matchShort = code.match(/[A-Z]+-(1\d|2\d)(\d{3})/);
|
||||||
|
if (matchShort) {
|
||||||
|
inferredDate = `20${matchShort[1]}-01-01`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 0000 등의 잘못된 매칭 방지
|
||||||
|
if (inferredDate && !inferredDate.startsWith('0000')) {
|
||||||
|
updates.push({ id: row.id, date: inferredDate, code: code });
|
||||||
|
} else {
|
||||||
|
missing.push({ id: row.id, code: code, category: row.category });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(`총 ${updates.length}건의 자산을 업데이트합니다.`);
|
||||||
|
for (const item of updates) {
|
||||||
|
await connection.query('UPDATE asset_core SET purchase_date = ? WHERE id = ?', [item.date, item.id]);
|
||||||
|
console.log(`[Update] ${item.code} -> ${item.date}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('\n--- 구매일자를 추정할 수 없는 자산 목록 ---');
|
||||||
|
if (missing.length === 0) {
|
||||||
|
console.log('없음');
|
||||||
|
} else {
|
||||||
|
// 중복 제거 및 정렬하여 보고
|
||||||
|
const uniqueMissing = missing.filter(m => m.code !== '');
|
||||||
|
uniqueMissing.forEach(m => {
|
||||||
|
console.log(`[Missing] 코드: ${m.code.padEnd(20)} | 카테고리: ${m.category}`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(`\n완료: ${updates.length}건 업데이트됨, ${missing.length}건 미결정.`);
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error:', err);
|
||||||
|
} finally {
|
||||||
|
connection.release();
|
||||||
|
pool.end();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
run();
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
import pkg from 'xlsx';
|
|
||||||
const { readFile, utils } = pkg;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const workbook = readFile('c:/Project/HM ITAM/SampleData_PC.xlsx');
|
|
||||||
const sheet = workbook.Sheets[workbook.SheetNames[0]];
|
|
||||||
const rawRows = utils.sheet_to_json(sheet, { header: 1 });
|
|
||||||
|
|
||||||
const corps = new Set();
|
|
||||||
|
|
||||||
// 첫 번째 행(헤더) 제외하고 C열(인덱스 2) 데이터 추출
|
|
||||||
rawRows.slice(1).forEach(row => {
|
|
||||||
if (row[2] !== undefined && row[2] !== null) {
|
|
||||||
corps.add(String(row[2]).trim());
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const jobs = new Map();
|
|
||||||
rawRows.slice(1).forEach(row => {
|
|
||||||
const job = String(row[3] || '').trim();
|
|
||||||
jobs.set(job, (jobs.get(job) || 0) + 1);
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('--- Unique Jobs in D column ---');
|
|
||||||
Array.from(jobs.entries()).forEach(([key, val]) => {
|
|
||||||
console.log(`${key}: ${val}대`);
|
|
||||||
});
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
}
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
import pkg from 'xlsx';
|
|
||||||
const { readFile, utils } = pkg;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const workbook = readFile('c:/Project/HM ITAM/SampleData_SVR.xlsx');
|
|
||||||
|
|
||||||
for (const sheetName of workbook.SheetNames) {
|
|
||||||
console.log(`\n================= Sheet: ${sheetName} =================`);
|
|
||||||
const sheet = workbook.Sheets[sheetName];
|
|
||||||
const rawRows = utils.sheet_to_json(sheet, { header: 1 });
|
|
||||||
const validRows = rawRows.filter(row => {
|
|
||||||
return row.some(val => val !== undefined && val !== null && String(val).trim() !== '');
|
|
||||||
});
|
|
||||||
|
|
||||||
const header = validRows[0];
|
|
||||||
const assetNameIdx = header.indexOf('자산명');
|
|
||||||
const typeIdx = header.indexOf('유형');
|
|
||||||
const detailIdx = header.indexOf('상세');
|
|
||||||
const teamIdx = header.indexOf('팀명');
|
|
||||||
|
|
||||||
validRows.slice(1).forEach((row, idx) => {
|
|
||||||
console.log(`[${idx + 1}] 팀명: ${row[teamIdx]} | 자산명: ${row[assetNameIdx]} | 유형: ${row[typeIdx]} | 상세: ${row[detailIdx]}`);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
}
|
|
||||||
@@ -1,447 +0,0 @@
|
|||||||
import pkg from 'xlsx';
|
|
||||||
import * as fs from 'fs';
|
|
||||||
import * as path from 'path';
|
|
||||||
|
|
||||||
const { readFile, utils } = pkg;
|
|
||||||
|
|
||||||
// 임시 ID 생성 및 도우미 함수
|
|
||||||
const randomId = () => Math.random().toString(36).substring(2, 9);
|
|
||||||
const CORPS = ['한맥', '삼안', '장헌', '장헌산업', 'PTC', '바론', '한라'];
|
|
||||||
|
|
||||||
function cleanValue(val) {
|
|
||||||
if (val === undefined || val === null) return '-';
|
|
||||||
const str = String(val).trim();
|
|
||||||
return str === '' ? '-' : str;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const workbook = readFile('c:/Project/HM ITAM/SampleData_PC.xlsx');
|
|
||||||
const sheet = workbook.Sheets[workbook.SheetNames[0]];
|
|
||||||
|
|
||||||
// header: 1로 읽어 2차원 배열을 획득
|
|
||||||
const rawRows = utils.sheet_to_json(sheet, { header: 1 });
|
|
||||||
|
|
||||||
// 첫 번째 행은 헤더이므로 제외
|
|
||||||
const dataRows = rawRows.slice(1);
|
|
||||||
|
|
||||||
const parsedPCs = [];
|
|
||||||
let pcIndex = 0;
|
|
||||||
let designKihuckCount = 0;
|
|
||||||
|
|
||||||
for (const row of dataRows) {
|
|
||||||
// 빈 행 건너뛰기 (성명, 부서, 팀명 모두 비어있으면 데이터가 없는 행으로 판단)
|
|
||||||
if (!row[0] && !row[1] && !row[2] && !row[3] && !row[4]) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
const deptRaw = cleanValue(row[0]);
|
|
||||||
const teamRaw = cleanValue(row[1]);
|
|
||||||
const corpRaw = cleanValue(row[2]); // C열: 소속 (NEW)
|
|
||||||
const jobRaw = cleanValue(row[3]); // D열: 직무 (밀림)
|
|
||||||
const nameRaw = cleanValue(row[4]); // E열: 성명 (밀림)
|
|
||||||
|
|
||||||
// 특정 사용자 제외 필터
|
|
||||||
if (nameRaw === '한치영' || nameRaw === '공용') {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
const posRaw = cleanValue(row[5]); // F열: 직급 (밀림)
|
|
||||||
const mainboardRaw = cleanValue(row[6]); // G열: 메인보드 (밀림)
|
|
||||||
const cpuRaw = cleanValue(row[7]); // H열: CPU (밀림)
|
|
||||||
const cpuYearRaw = row[8]; // I열: CPU 출시연도 (밀림)
|
|
||||||
const gpuRaw = cleanValue(row[9]); // J열: GPU (밀림)
|
|
||||||
const gpuYearRaw = row[10]; // K열: GPU 출시연도 (밀림)
|
|
||||||
const ramRaw = cleanValue(row[11]); // L열: RAM (밀림)
|
|
||||||
const ssd1Raw = cleanValue(row[12]);// M열: SDD1 (밀림)
|
|
||||||
const ssd2Raw = cleanValue(row[13]);// N열: SDD2 (밀림)
|
|
||||||
const hdd1Raw = cleanValue(row[14]);// O열: HDD1 (밀림)
|
|
||||||
const hdd2Raw = cleanValue(row[15]);// P열: HDD2 (밀림)
|
|
||||||
const hdd3Raw = cleanValue(row[16]);// Q열: HDD3 (밀림)
|
|
||||||
const hdd4Raw = cleanValue(row[17]);// R열: HDD4 (밀림)
|
|
||||||
|
|
||||||
// W열(22번째 인덱스) -> 구매일자
|
|
||||||
const dateRaw = cleanValue(row[22]);
|
|
||||||
// X열(23번째 인덱스) -> 비고
|
|
||||||
const memoRaw = cleanValue(row[23]);
|
|
||||||
|
|
||||||
// 1. 법인 매핑 (엑셀 C열의 실제 소속 우선 사용, 없을 시 순환 지정)
|
|
||||||
const purchase_corp = corpRaw !== '-' ? corpRaw : CORPS[pcIndex % CORPS.length];
|
|
||||||
|
|
||||||
// 2. 재고PC 판단 및 상태 설정
|
|
||||||
const isStock = teamRaw === '재고PC';
|
|
||||||
const hw_status = isStock ? '창고보관' : '운영중';
|
|
||||||
|
|
||||||
// 3. 성명 정제
|
|
||||||
let user_current = nameRaw;
|
|
||||||
if (isStock) {
|
|
||||||
// 재고PC인 경우 직무 컬럼(row[3])에 성명이 들어가 있음
|
|
||||||
user_current = jobRaw !== '-' ? jobRaw : '재고장비';
|
|
||||||
}
|
|
||||||
|
|
||||||
// 4. 직무 정제
|
|
||||||
let user_position = jobRaw;
|
|
||||||
if (isStock) {
|
|
||||||
user_position = '재고PC';
|
|
||||||
} else if (user_position === '-' || user_position === 'undefined' || !user_position || ['안용주', '김민수', '심영표', '이수창A', '조병철', '윤진호', '김대영', '박정웅', '김유식'].includes(user_position)) {
|
|
||||||
// 직무가 유효하지 않거나 이름인 경우 정제
|
|
||||||
if (nameRaw === '장종찬' || posRaw === '사장') {
|
|
||||||
user_position = '기획자';
|
|
||||||
} else if (nameRaw === '노트북' || nameRaw === '공용') {
|
|
||||||
user_position = '기획자';
|
|
||||||
} else {
|
|
||||||
// 팀명/부서 기준 매핑
|
|
||||||
const combined = (deptRaw + ' ' + teamRaw).toUpperCase();
|
|
||||||
if (combined.includes('개발') || combined.includes('SOLUTION') || combined.includes('WEB') || combined.includes('ERP')) {
|
|
||||||
user_position = '개발자';
|
|
||||||
} else if (combined.includes('BIM') || combined.includes('구조') || combined.includes('설계') || combined.includes('터널') || combined.includes('상하수도') || combined.includes('수자원') || combined.includes('건설') || combined.includes('CM')) {
|
|
||||||
user_position = '엔지니어';
|
|
||||||
} else if (combined.includes('디자인') || combined.includes('GRAPHICS')) {
|
|
||||||
user_position = '디자이너';
|
|
||||||
} else {
|
|
||||||
user_position = '기획자';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 만약 직무가 'BIM모델러' 인 경우, 그대로 유지
|
|
||||||
if (jobRaw === 'BIM모델러') {
|
|
||||||
user_position = 'BIM모델러';
|
|
||||||
}
|
|
||||||
|
|
||||||
// 개발자/디자이너 세부 직무 분리 로직 적용
|
|
||||||
if (user_position === '개발자') {
|
|
||||||
const nameUpper = nameRaw.trim();
|
|
||||||
const teamUpper = teamRaw.toUpperCase();
|
|
||||||
|
|
||||||
if (nameUpper === '조찬영' || nameUpper === '김용연') {
|
|
||||||
user_position = 'AI 개발자';
|
|
||||||
} else if (
|
|
||||||
teamUpper.includes('그래픽스') ||
|
|
||||||
teamUpper.includes('MODELER') ||
|
|
||||||
teamUpper.includes('HMEG') ||
|
|
||||||
teamUpper.includes('EG-BIM') ||
|
|
||||||
teamUpper.includes('GSIM') ||
|
|
||||||
teamUpper.includes('STRANA')
|
|
||||||
) {
|
|
||||||
user_position = '3D 개발자';
|
|
||||||
} else if (
|
|
||||||
teamUpper.includes('WEB') ||
|
|
||||||
teamUpper.includes('솔루션개발') ||
|
|
||||||
teamUpper.includes('ERP') ||
|
|
||||||
teamUpper.includes('전산')
|
|
||||||
) {
|
|
||||||
user_position = '웹 개발자';
|
|
||||||
} else {
|
|
||||||
user_position = '프로그램 개발자';
|
|
||||||
}
|
|
||||||
} else if (user_position === '디자이너') {
|
|
||||||
const teamUpper = teamRaw.toUpperCase();
|
|
||||||
if (teamUpper.includes('디자인셀')) {
|
|
||||||
user_position = 'UXUI 디자이너';
|
|
||||||
} else if (teamUpper.includes('디자인기획')) {
|
|
||||||
// 디자인기획팀 소속 중 약 40%는 3D 디자이너, 60%는 편집 디자이너
|
|
||||||
if (designKihuckCount % 10 < 4) {
|
|
||||||
user_position = '3D 디자이너';
|
|
||||||
} else {
|
|
||||||
user_position = '편집 디자이너';
|
|
||||||
}
|
|
||||||
designKihuckCount++;
|
|
||||||
} else {
|
|
||||||
user_position = '편집 디자이너';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 5. 구매일자 포맷 가공 (YYYY-MM)
|
|
||||||
let purchase_date = '2022-01'; // 기본값
|
|
||||||
if (dateRaw !== '-') {
|
|
||||||
if (dateRaw.length === 6 && !isNaN(dateRaw)) {
|
|
||||||
purchase_date = `${dateRaw.substring(0, 4)}-${dateRaw.substring(4, 6)}`;
|
|
||||||
} else if (dateRaw.length === 4 && !isNaN(dateRaw)) {
|
|
||||||
purchase_date = `${dateRaw}-01`;
|
|
||||||
} else {
|
|
||||||
purchase_date = dateRaw;
|
|
||||||
}
|
|
||||||
} else if (cpuYearRaw && !isNaN(cpuYearRaw)) {
|
|
||||||
purchase_date = `${cpuYearRaw}-01`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 6. 도입 금액(purchase_amount) 책정
|
|
||||||
let purchase_amount = '1500000';
|
|
||||||
const cpuUpper = cpuRaw.toUpperCase();
|
|
||||||
const gpuUpper = gpuRaw.toUpperCase();
|
|
||||||
|
|
||||||
if (cpuUpper.includes('I9') || cpuUpper.includes('RYZEN 9') || cpuUpper.includes('RYZEN9') || gpuUpper.includes('4080') || gpuUpper.includes('4090')) {
|
|
||||||
purchase_amount = '3500000';
|
|
||||||
} else if (cpuUpper.includes('I7') || cpuUpper.includes('RYZEN 7') || cpuUpper.includes('RYZEN7') || gpuUpper.includes('3070') || gpuUpper.includes('4070') || gpuUpper.includes('A2000')) {
|
|
||||||
purchase_amount = '2200000';
|
|
||||||
} else if (cpuUpper.includes('I5') || cpuUpper.includes('RYZEN 5') || cpuUpper.includes('RYZEN5') || gpuUpper.includes('3060') || gpuUpper.includes('2060')) {
|
|
||||||
purchase_amount = '1500000';
|
|
||||||
} else if (cpuYearRaw && parseInt(cpuYearRaw) < 2020) {
|
|
||||||
purchase_amount = '800000';
|
|
||||||
} else {
|
|
||||||
purchase_amount = '950000';
|
|
||||||
}
|
|
||||||
|
|
||||||
// 7. MAC 주소 생성 (16진수 포맷)
|
|
||||||
const mac_address = `00:1A:2B:3C:4D:${pcIndex.toString(16).toUpperCase().padStart(2, '0')}`;
|
|
||||||
|
|
||||||
parsedPCs.push({
|
|
||||||
id: randomId(),
|
|
||||||
asset_type: '개인PC',
|
|
||||||
purchase_corp,
|
|
||||||
asset_code: 'PC-24' + String(pcIndex).padStart(3, '0'),
|
|
||||||
purchase_date,
|
|
||||||
user_current,
|
|
||||||
user_position,
|
|
||||||
current_dept: teamRaw !== '-' ? teamRaw : deptRaw,
|
|
||||||
previous_dept: pcIndex % 8 === 0 ? '기획팀' : '-',
|
|
||||||
location: '서울본사 7층',
|
|
||||||
manager_primary: '김IT',
|
|
||||||
manager_secondary: '이IT',
|
|
||||||
model_name: mainboardRaw !== '-' ? mainboardRaw : '사내 표준 데스크톱',
|
|
||||||
os: 'Windows 11 Pro',
|
|
||||||
cpu: cpuRaw,
|
|
||||||
gpu: gpuRaw,
|
|
||||||
ram: ramRaw,
|
|
||||||
ssd_1: ssd1Raw,
|
|
||||||
ssd_2: ssd2Raw,
|
|
||||||
ssd_3: '-',
|
|
||||||
hdd_1: hdd1Raw,
|
|
||||||
hdd_2: hdd2Raw,
|
|
||||||
hdd_3: hdd3Raw,
|
|
||||||
hdd_4: hdd4Raw,
|
|
||||||
mainboard: mainboardRaw,
|
|
||||||
ip_address: '192.168.0.' + (10 + (pcIndex % 240)),
|
|
||||||
purchase_amount,
|
|
||||||
purchase_vendor: 'LG전자/삼성전자/HP',
|
|
||||||
approval_document: '2024_상반기_PC구매_' + pcIndex,
|
|
||||||
memo: memoRaw !== '-' ? memoRaw : (isStock ? '재고 보유 분' : '임직원 지급용'),
|
|
||||||
asset_name: `개인PC ${pcIndex + 1}`,
|
|
||||||
mac_address,
|
|
||||||
hw_status
|
|
||||||
});
|
|
||||||
|
|
||||||
pcIndex++;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(`Successfully parsed ${parsedPCs.length} PCs from excel file.`);
|
|
||||||
|
|
||||||
// dummyData.ts 의 나머지 데이터(dummyServers 등)를 포함하여 전체 파일을 새로 씁니다.
|
|
||||||
const newDummyDataFileContent = `import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog } from './excelHandler';
|
|
||||||
|
|
||||||
// 유틸리티: 랜덤 문자열
|
|
||||||
const randomId = () => Math.random().toString(36).substring(2, 9);
|
|
||||||
|
|
||||||
// 유틸리티: 랜덤 년월 (YYYY-MM) (최근 10년)
|
|
||||||
const randomPurchaseYM = () => {
|
|
||||||
const currentYear = new Date().getFullYear();
|
|
||||||
const year = currentYear - Math.floor(Math.random() * 10);
|
|
||||||
const month = String(Math.floor(Math.random() * 12) + 1).padStart(2, '0');
|
|
||||||
return \`\${year}-\${month}\`;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 유틸리티: 랜덤 YYYY-MM-DD
|
|
||||||
const randomDateStr = (maxYearsAgo = 10) => {
|
|
||||||
const currentYear = new Date().getFullYear();
|
|
||||||
const year = currentYear - Math.floor(Math.random() * maxYearsAgo);
|
|
||||||
const month = String(Math.floor(Math.random() * 12) + 1).padStart(2, '0');
|
|
||||||
const day = String(Math.floor(Math.random() * 28) + 1).padStart(2, '0');
|
|
||||||
return \`\${year}-\${month}-\${day}\`;
|
|
||||||
};
|
|
||||||
|
|
||||||
const CORPS = ['한맥', '삼안', '장헌', '장헌산업', 'PTC', '바론', '한라'];
|
|
||||||
const getRandomCorp = () => CORPS[Math.floor(Math.random() * CORPS.length)];
|
|
||||||
|
|
||||||
// ────────────────────────────────────────────────────────
|
|
||||||
// 1. SampleData_PC.xlsx 에서 파싱된 PC 데이터 주입
|
|
||||||
// ────────────────────────────────────────────────────────
|
|
||||||
export const dummyPCs: any[] = ${JSON.stringify(parsedPCs, null, 2)};
|
|
||||||
|
|
||||||
// ────────────────────────────────────────────────────────
|
|
||||||
// 2. 기타 자산 더미 데이터 (서버, 스토리지, 소프트웨어 등)
|
|
||||||
// ────────────────────────────────────────────────────────
|
|
||||||
|
|
||||||
export const dummyServers: any[] = Array.from({ length: 15 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
asset_type: '서버',
|
|
||||||
type2: i % 2 === 0 ? '물리' : '가상',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
asset_code: \`SRV-24\${String(i).padStart(3, '0')}\`,
|
|
||||||
purchase_date: randomPurchaseYM(),
|
|
||||||
asset_purpose: i % 2 === 0 ? '운영 웹 서버' : '사내망 DB 서버',
|
|
||||||
current_dept: '인프라팀',
|
|
||||||
previous_dept: '-',
|
|
||||||
location: 'IDC 센터 1-A',
|
|
||||||
manager_primary: '박서버',
|
|
||||||
manager_secondary: '최백업',
|
|
||||||
ip_address: \`10.0.0.\${10 + i}\`,
|
|
||||||
ip_address_2: \`192.168.100.\${10 + i}\`,
|
|
||||||
remote_tool: 'RDP / SSH',
|
|
||||||
remote_id: \`admin_\${i}\`,
|
|
||||||
remote_pw: '********',
|
|
||||||
model_name: 'Dell PowerEdge R750',
|
|
||||||
os: 'Ubuntu 22.04 LTS',
|
|
||||||
cpu: 'Intel Xeon Gold 6330',
|
|
||||||
ram: '128GB',
|
|
||||||
gpu: i % 3 === 0 ? 'NVIDIA A100' : '-',
|
|
||||||
ssd_1: '1TB NVMe',
|
|
||||||
ssd_2: '1TB NVMe',
|
|
||||||
hdd_1: '4TB HDD',
|
|
||||||
monitoring: 'Zabbix Agent',
|
|
||||||
purchase_amount: '8500000',
|
|
||||||
purchase_vendor: '델테크놀로지스',
|
|
||||||
approval_document: \`2024_IDC_확장품의_\sign\${i}\`,
|
|
||||||
memo: '서버 랙 3번 위치',
|
|
||||||
asset_name: \`운영 서버 \${i+1}\`,
|
|
||||||
mac_address: \`00:1A:2B:3C:4E:\${String(i).padStart(2, '0')}\`,
|
|
||||||
hw_status: '운영중'
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummyStorages: any[] = Array.from({ length: 8 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
asset_type: '스토리지',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
asset_code: \`STR-24\${String(i).padStart(3, '0')}\`,
|
|
||||||
asset_name: \`공용 스토리지 \${i+1}\`,
|
|
||||||
location: 'IDC 센터 1-A',
|
|
||||||
model_name: 'Synology RS4021xs+',
|
|
||||||
volume: '100TB',
|
|
||||||
manager_primary: '박서버',
|
|
||||||
manager_secondary: '최백업',
|
|
||||||
ip_address: \`10.0.0.\${50 + i}\`,
|
|
||||||
mac_address: \`00:1A:2B:3C:4F:\${String(i).padStart(2, '0')}\`,
|
|
||||||
purchase_date: randomPurchaseYM(),
|
|
||||||
purchase_amount: '12000000',
|
|
||||||
purchase_vendor: '시놀로지코리아',
|
|
||||||
approval_document: \`2024_스토리지구매_\${i}\`,
|
|
||||||
memo: '부서별 백업본 저장용',
|
|
||||||
os: 'Synology DSM',
|
|
||||||
asset_purpose: '데이터 백업',
|
|
||||||
hw_status: '운영중'
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummyEquips: any[] = Array.from({ length: 12 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
asset_type: '전산비품',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
asset_code: \`EQ-24\${String(i).padStart(3, '0')}\`,
|
|
||||||
asset_name: \`네트워크 스위치 \${i+1}\`,
|
|
||||||
location: '전산실 랙 1',
|
|
||||||
manager_primary: '네트워크담당자',
|
|
||||||
ip_address: \`192.168.10.\${200 + i}\`,
|
|
||||||
mac_address: \`00:1A:2B:3C:51:\${String(i).padStart(2, '0')}\`,
|
|
||||||
os: 'Cisco IOS',
|
|
||||||
purchase_date: randomPurchaseYM(),
|
|
||||||
purchase_amount: '150000',
|
|
||||||
purchase_vendor: '다나와',
|
|
||||||
approval_document: \`2024_비품구매_\${i}\`,
|
|
||||||
memo: '사내망 확장용',
|
|
||||||
asset_purpose: '네트워크 분배'
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummyMobiles: any[] = Array.from({ length: 15 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
asset_type: '모바일기기',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
asset_code: \`MOB-24\${String(i).padStart(3, '0')}\`,
|
|
||||||
asset_name: \`테스트용 단말기 \${i+1}\`,
|
|
||||||
location: '개발2팀',
|
|
||||||
manager_primary: '테스터',
|
|
||||||
os: i % 2 === 0 ? 'Android 14' : 'iOS 17',
|
|
||||||
purchase_date: randomPurchaseYM(),
|
|
||||||
purchase_amount: '900000',
|
|
||||||
purchase_vendor: '삼성전자/애플',
|
|
||||||
approval_document: \`2024_모바일구매_\${i}\`,
|
|
||||||
memo: '앱 호환성 테스트 전용',
|
|
||||||
asset_purpose: 'QA 테스트',
|
|
||||||
ip_address: \`192.168.1.\${10 + i}\`,
|
|
||||||
mac_address: \`00:1A:2B:3C:50:\${String(i).padStart(2, '0')}\`
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummySubSw: any[] = Array.from({ length: 10 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
sw_type: '구독SW',
|
|
||||||
sw_field: '업무용/협업',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
current_dept: '전사',
|
|
||||||
product_name: \`Microsoft 365 E\${3 + (i%2)}\`,
|
|
||||||
purchase_date: randomDateStr(3),
|
|
||||||
start_date: randomDateStr(1),
|
|
||||||
expired_date: randomDateStr(0),
|
|
||||||
purchase_amount: '150000',
|
|
||||||
asset_count: 50 + i * 5,
|
|
||||||
email_account: \`admin\${i}@hmcorp.com\`,
|
|
||||||
purchase_vendor: '소프트웨어인라이프',
|
|
||||||
memo: '연간 계약 갱신 필요'
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummyPermSw: any[] = Array.from({ length: 5 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
sw_type: '영구SW',
|
|
||||||
sw_field: '디자인/설계',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
current_dept: '디자인팀',
|
|
||||||
product_name: \`AutoCAD 202\${i%4}\`,
|
|
||||||
purchase_date: randomDateStr(5),
|
|
||||||
start_date: randomDateStr(5),
|
|
||||||
expired_date: '2099-12-31',
|
|
||||||
purchase_amount: '3000000',
|
|
||||||
asset_count: 2,
|
|
||||||
email_account: \`design\${i}@hmcorp.com\`,
|
|
||||||
purchase_vendor: '오토데스크 파트너',
|
|
||||||
memo: 'USB 동글키 보관중'
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummyCloud: any[] = Array.from({ length: 5 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
sw_type: '클라우드',
|
|
||||||
asset_mfr: i % 2 === 0 ? 'AWS' : 'GCP',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
current_dept: '개발팀',
|
|
||||||
product_name: \`컴퓨팅 인스턴스 Type \${i}\`,
|
|
||||||
email_account: \`awsadmin\${i}@hmcorp.com\`,
|
|
||||||
purchase_method: '법인카드(신한 1234)',
|
|
||||||
purchase_amount: \`\${500000 + i * 100000}\`,
|
|
||||||
asset_count: 1,
|
|
||||||
purchase_vendor: 'AWS/GCP',
|
|
||||||
memo: '환율 변동에 따라 매월 상이함'
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummyDomain: any[] = Array.from({ length: 5 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
asset_type: '도메인',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
product_name: \`사내 운영 서비스 \${i+1}\`,
|
|
||||||
domain_address: \`service\${i+1}.hmcorp.com\`,
|
|
||||||
start_date: randomDateStr(4),
|
|
||||||
expired_date: randomDateStr(0),
|
|
||||||
purchase_amount: '22000',
|
|
||||||
manager_primary: '인프라팀장',
|
|
||||||
manager_secondary: '인프라담당자',
|
|
||||||
memo: '가비아 자동갱신 설정 완료'
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummySwUsers: any[] = Array.from({ length: 15 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
sw_id: dummySubSw[0]?.id || randomId(),
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
current_dept: '경영지원팀',
|
|
||||||
user_current: \`홍길동\${i}\`,
|
|
||||||
memo: \`SW신청서_2400\${i}\`
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummyLogs: any[] = Array.from({ length: 10 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
assetId: dummyPCs[0]?.id || randomId(),
|
|
||||||
date: randomDateStr(1),
|
|
||||||
details: i % 2 === 0 ? '메모리 추가 증설 (16GB -> 32GB)' : '디스플레이 파손 수리',
|
|
||||||
user: 'IT지원팀',
|
|
||||||
cost: i % 2 === 0 ? 80000 : 150000,
|
|
||||||
}));
|
|
||||||
`;
|
|
||||||
|
|
||||||
fs.writeFileSync('c:/Project/HM ITAM/src/core/dummyData.ts', newDummyDataFileContent, 'utf-8');
|
|
||||||
console.log('✅ dummyData.ts file updated successfully.');
|
|
||||||
} catch (e) {
|
|
||||||
console.error('❌ Failed to update dummy data:', e);
|
|
||||||
}
|
|
||||||
@@ -1,442 +0,0 @@
|
|||||||
import pkg from 'xlsx';
|
|
||||||
import * as fs from 'fs';
|
|
||||||
import * as path from 'path';
|
|
||||||
|
|
||||||
const { readFile, utils } = pkg;
|
|
||||||
|
|
||||||
const randomId = () => Math.random().toString(36).substring(2, 9);
|
|
||||||
const CORPS = ['한맥', '삼안', '장헌', '장헌산업', 'PTC', '바론', '한라'];
|
|
||||||
|
|
||||||
function cleanValue(val) {
|
|
||||||
if (val === undefined || val === null) return '-';
|
|
||||||
const str = String(val).trim();
|
|
||||||
return str === '' ? '-' : str;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
// 1. 기존 dummyPCs 로딩
|
|
||||||
const dummyDataPath = 'c:/Project/HM ITAM/src/core/dummyData.ts';
|
|
||||||
const content = fs.readFileSync(dummyDataPath, 'utf-8');
|
|
||||||
const matchPCs = content.match(/export const dummyPCs: any\[\] = (\[[\s\S]*?\]);/);
|
|
||||||
if (!matchPCs) {
|
|
||||||
console.error('Failed to parse dummyPCs from dummyData.ts');
|
|
||||||
process.exit(1);
|
|
||||||
}
|
|
||||||
const dummyPCs = JSON.parse(matchPCs[1]);
|
|
||||||
console.log(`Loaded ${dummyPCs.length} existing PCs from dummyData.ts`);
|
|
||||||
|
|
||||||
// 2. SampleData_SVR.xlsx 파싱
|
|
||||||
const workbook = readFile('c:/Project/HM ITAM/SampleData_SVR.xlsx');
|
|
||||||
|
|
||||||
const parsedServers = [];
|
|
||||||
const parsedStorages = [];
|
|
||||||
const parsedEquips = [];
|
|
||||||
|
|
||||||
let serverIndex = 0;
|
|
||||||
let storageIndex = 0;
|
|
||||||
let equipIndex = 0;
|
|
||||||
|
|
||||||
// ----------------- 시트 1: 합본데이터(공용PC) -----------------
|
|
||||||
const sheetPC = workbook.Sheets['합본데이터(공용PC)'];
|
|
||||||
const rawPC = utils.sheet_to_json(sheetPC, { header: 1 });
|
|
||||||
const rowsPC = rawPC.slice(1).filter(row => row.some(val => val !== undefined && val !== null && String(val).trim() !== ''));
|
|
||||||
|
|
||||||
for (const row of rowsPC) {
|
|
||||||
const teamRaw = cleanValue(row[0]);
|
|
||||||
const svrNoRaw = cleanValue(row[1]);
|
|
||||||
const assetNameRaw = cleanValue(row[2]);
|
|
||||||
const typeRaw = cleanValue(row[3]);
|
|
||||||
const detailRaw = cleanValue(row[4]);
|
|
||||||
const locRaw = cleanValue(row[5]);
|
|
||||||
const mgr1Raw = cleanValue(row[6]);
|
|
||||||
const mgr2Raw = cleanValue(row[7]);
|
|
||||||
const osRaw = cleanValue(row[8]);
|
|
||||||
const osVerRaw = cleanValue(row[9]);
|
|
||||||
const osBuildRaw = cleanValue(row[10]);
|
|
||||||
const modelRaw = cleanValue(row[11]);
|
|
||||||
const mainboardRaw = cleanValue(row[12]);
|
|
||||||
const cpuRaw = cleanValue(row[13]);
|
|
||||||
const ramRaw = cleanValue(row[14]);
|
|
||||||
const gpuRaw = cleanValue(row[15]);
|
|
||||||
const ssd1Raw = cleanValue(row[16]);
|
|
||||||
const ssd2Raw = cleanValue(row[17]);
|
|
||||||
const hdd1Raw = cleanValue(row[18]);
|
|
||||||
const hdd2Raw = cleanValue(row[19]);
|
|
||||||
const hdd3Raw = cleanValue(row[20]);
|
|
||||||
const hdd4Raw = cleanValue(row[21]);
|
|
||||||
|
|
||||||
const ipAddress = '172.16.10.' + (50 + (serverIndex % 150));
|
|
||||||
const randomCorp = CORPS[serverIndex % CORPS.length];
|
|
||||||
|
|
||||||
// 서비스 분류 판단
|
|
||||||
let service_type = '내부서비스';
|
|
||||||
const detailUpper = detailRaw.toUpperCase();
|
|
||||||
const assetUpper = assetNameRaw.toUpperCase();
|
|
||||||
const teamUpper = teamRaw.toUpperCase();
|
|
||||||
|
|
||||||
if (teamUpper.includes('회의실') || assetUpper.includes('회의실') || assetUpper.includes('사이니지')) {
|
|
||||||
service_type = '회의용/공용';
|
|
||||||
} else if (
|
|
||||||
detailUpper.includes('SAAS') || detailUpper.includes('웹서비스') ||
|
|
||||||
detailUpper.includes('운영') || detailUpper.includes('WAS') ||
|
|
||||||
detailUpper.includes('MYSTATION') || detailUpper.includes('CLOUD') ||
|
|
||||||
detailUpper.includes('홈페이지') || detailUpper.includes('WEB') ||
|
|
||||||
detailUpper.includes('외주') || assetUpper.includes('CLOUD') ||
|
|
||||||
assetUpper.includes('웹서비스') || assetUpper.includes('운영')
|
|
||||||
) {
|
|
||||||
service_type = '외부서비스';
|
|
||||||
}
|
|
||||||
|
|
||||||
// 방치 의심 판단
|
|
||||||
const is_inactive = (
|
|
||||||
detailUpper.includes('원격 및 로컬접근 불가') ||
|
|
||||||
detailUpper.includes('철수예정') ||
|
|
||||||
detailUpper.includes('미사용') ||
|
|
||||||
detailUpper.includes('구형 OS')
|
|
||||||
);
|
|
||||||
|
|
||||||
// 실시간 리소스 및 네트워크 가상 데이터 생성
|
|
||||||
let cpu_usage = 0;
|
|
||||||
let ram_usage = 0;
|
|
||||||
let network_traffic = '0 GB';
|
|
||||||
|
|
||||||
if (is_inactive) {
|
|
||||||
cpu_usage = 0;
|
|
||||||
ram_usage = 0;
|
|
||||||
network_traffic = '0 GB (N/A)';
|
|
||||||
} else if (service_type === '회의용/공용') {
|
|
||||||
cpu_usage = Math.floor(Math.random() * 10) + 2; // 2%~12%
|
|
||||||
ram_usage = Math.floor(Math.random() * 15) + 5; // 5%~20%
|
|
||||||
network_traffic = (Math.random() * 1.5 + 0.1).toFixed(1) + ' GB';
|
|
||||||
} else if (service_type === '외부서비스') {
|
|
||||||
// 일부 저사양 운영/SaaS 서버는 병목 현상을 시뮬레이션하기 위해 과부하 부여
|
|
||||||
const isUnderSpec = !gpuRaw.toUpperCase().includes('RTX 30') && !gpuRaw.toUpperCase().includes('RTX 40') && (cpuRaw.toUpperCase().includes('I5') || ramRaw.toUpperCase().includes('16GB') || cpuRaw === '-');
|
|
||||||
if (isUnderSpec) {
|
|
||||||
cpu_usage = Math.floor(Math.random() * 15) + 81; // 81%~95% (과부하)
|
|
||||||
ram_usage = Math.floor(Math.random() * 10) + 86; // 86%~95%
|
|
||||||
} else {
|
|
||||||
cpu_usage = Math.floor(Math.random() * 30) + 40; // 40%~70%
|
|
||||||
ram_usage = Math.floor(Math.random() * 20) + 60; // 60%~80%
|
|
||||||
}
|
|
||||||
network_traffic = (Math.random() * 1500 + 300).toFixed(0) + ' GB';
|
|
||||||
} else { // 내부서비스
|
|
||||||
// Abaqus 해석용이나 Pix4D 등 고부하 내부 인프라도 부하율 높게 부여
|
|
||||||
const isHighLoad = detailUpper.includes('ABAQUS') || detailUpper.includes('PIX4D') || detailUpper.includes('영상 렌더링') || detailUpper.includes('TERRA');
|
|
||||||
if (isHighLoad) {
|
|
||||||
cpu_usage = Math.floor(Math.random() * 20) + 70; // 70%~90%
|
|
||||||
ram_usage = Math.floor(Math.random() * 20) + 75; // 75%~95%
|
|
||||||
} else {
|
|
||||||
cpu_usage = Math.floor(Math.random() * 35) + 15; // 15%~50%
|
|
||||||
ram_usage = Math.floor(Math.random() * 30) + 20; // 20%~50%
|
|
||||||
}
|
|
||||||
network_traffic = (Math.random() * 300 + 10).toFixed(0) + ' GB';
|
|
||||||
}
|
|
||||||
|
|
||||||
const assetItem = {
|
|
||||||
id: randomId(),
|
|
||||||
asset_type: typeRaw !== '-' ? typeRaw : '공용PC',
|
|
||||||
purchase_corp: randomCorp,
|
|
||||||
asset_code: 'SVR-24' + String(serverIndex).padStart(3, '0'),
|
|
||||||
purchase_date: '2023-03',
|
|
||||||
asset_purpose: detailRaw,
|
|
||||||
current_dept: teamRaw,
|
|
||||||
previous_dept: '-',
|
|
||||||
location: locRaw,
|
|
||||||
manager_primary: mgr1Raw,
|
|
||||||
manager_secondary: mgr2Raw,
|
|
||||||
ip_address: ipAddress,
|
|
||||||
remote_tool: 'RDP / VNC',
|
|
||||||
model_name: modelRaw !== '-' ? modelRaw : (mainboardRaw !== '-' ? mainboardRaw : '사내 표준 공용PC'),
|
|
||||||
os: osRaw !== '-' ? `${osRaw} (${osVerRaw})` : 'Windows 10',
|
|
||||||
cpu: cpuRaw,
|
|
||||||
ram: ramRaw,
|
|
||||||
gpu: gpuRaw,
|
|
||||||
ssd_1: ssd1Raw,
|
|
||||||
ssd_2: ssd2Raw,
|
|
||||||
hdd_1: hdd1Raw,
|
|
||||||
hdd_2: hdd2Raw,
|
|
||||||
hdd_3: hdd3Raw,
|
|
||||||
hdd_4: hdd4Raw,
|
|
||||||
monitoring: service_type === '외부서비스' ? '대상' : '비대상',
|
|
||||||
purchase_amount: gpuRaw.toUpperCase().includes('RTX 4080') || gpuRaw.toUpperCase().includes('RTX 3090') ? '3500000' : '1500000',
|
|
||||||
purchase_vendor: '다나와',
|
|
||||||
approval_document: '2023_공용PC_도입_' + serverIndex,
|
|
||||||
memo: is_inactive ? '방치 의심 장비 (회수 필요)' : '정상 운영 장비',
|
|
||||||
asset_name: assetNameRaw,
|
|
||||||
mac_address: `00:1A:2B:3C:5E:${serverIndex.toString(16).toUpperCase().padStart(2, '0')}`,
|
|
||||||
hw_status: is_inactive ? '수리/대기' : '운영중',
|
|
||||||
service_type: service_type,
|
|
||||||
is_inactive: is_inactive,
|
|
||||||
cpu_usage: cpu_usage,
|
|
||||||
ram_usage: ram_usage,
|
|
||||||
network_traffic: network_traffic
|
|
||||||
};
|
|
||||||
|
|
||||||
// 스토리지로 보낼 자산들 (유형이 NAS/DAS이거나 자산명에 NAS가 들어가면)
|
|
||||||
if (typeRaw.toUpperCase().includes('NAS') || typeRaw.toUpperCase().includes('DAS') || assetUpper.includes('NAS') || assetUpper.includes('DAS')) {
|
|
||||||
assetItem.asset_code = 'STO-24' + String(storageIndex).padStart(3, '0');
|
|
||||||
assetItem.volume = hdd1Raw !== '-' ? hdd1Raw : '10TB';
|
|
||||||
parsedStorages.push(assetItem);
|
|
||||||
storageIndex++;
|
|
||||||
} else {
|
|
||||||
parsedServers.push(assetItem);
|
|
||||||
serverIndex++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ----------------- 시트 2: 합본데이터(NAS) -----------------
|
|
||||||
const sheetNAS = workbook.Sheets['합본데이터(NAS)'];
|
|
||||||
const rawNAS = utils.sheet_to_json(sheetNAS, { header: 1 });
|
|
||||||
const rowsNAS = rawNAS.slice(1).filter(row => row.some(val => val !== undefined && val !== null && String(val).trim() !== ''));
|
|
||||||
|
|
||||||
for (const row of rowsNAS) {
|
|
||||||
const teamRaw = cleanValue(row[0]);
|
|
||||||
const svrNoRaw = cleanValue(row[1]);
|
|
||||||
const assetNameRaw = cleanValue(row[2]);
|
|
||||||
const typeRaw = cleanValue(row[3]);
|
|
||||||
const detailRaw = cleanValue(row[4]);
|
|
||||||
const locRaw = cleanValue(row[5]);
|
|
||||||
const mgr1Raw = cleanValue(row[6]);
|
|
||||||
const mgr2Raw = cleanValue(row[7]);
|
|
||||||
const toolRaw = cleanValue(row[8]);
|
|
||||||
const ipRaw = cleanValue(row[9]);
|
|
||||||
const ip2Raw = cleanValue(row[10]);
|
|
||||||
const idRaw = cleanValue(row[11]);
|
|
||||||
const pwRaw = cleanValue(row[12]);
|
|
||||||
const osRaw = cleanValue(row[15]);
|
|
||||||
const osVerRaw = cleanValue(row[16]);
|
|
||||||
const osBuildRaw = cleanValue(row[17]);
|
|
||||||
const modelRaw = cleanValue(row[18]);
|
|
||||||
const cpuRaw = cleanValue(row[19]);
|
|
||||||
const ramRaw = cleanValue(row[20]);
|
|
||||||
const gpuRaw = cleanValue(row[21]);
|
|
||||||
const ssd1Raw = cleanValue(row[22]);
|
|
||||||
const ssd2Raw = cleanValue(row[23]);
|
|
||||||
const hdd1Raw = cleanValue(row[24]);
|
|
||||||
const hdd2Raw = cleanValue(row[25]);
|
|
||||||
const hdd3Raw = cleanValue(row[26]);
|
|
||||||
const hdd4Raw = cleanValue(row[27]);
|
|
||||||
|
|
||||||
const randomCorp = CORPS[storageIndex % CORPS.length];
|
|
||||||
|
|
||||||
// NAS는 기본적으로 내부 백업/공유용 인프라
|
|
||||||
const service_type = '내부서비스';
|
|
||||||
const is_inactive = false;
|
|
||||||
|
|
||||||
// NAS 실시간 리소스 가상 데이터
|
|
||||||
const cpu_usage = Math.floor(Math.random() * 25) + 15; // 15%~40%
|
|
||||||
const ram_usage = Math.floor(Math.random() * 35) + 30; // 30%~65%
|
|
||||||
const network_traffic = (Math.random() * 600 + 50).toFixed(0) + ' GB';
|
|
||||||
|
|
||||||
const assetItem = {
|
|
||||||
id: randomId(),
|
|
||||||
asset_type: typeRaw !== '-' ? typeRaw : '공용 NAS',
|
|
||||||
purchase_corp: randomCorp,
|
|
||||||
asset_code: 'STO-24' + String(storageIndex).padStart(3, '0'),
|
|
||||||
purchase_date: '2022-08',
|
|
||||||
asset_purpose: detailRaw,
|
|
||||||
current_dept: teamRaw !== '-' ? teamRaw : '디자인팀',
|
|
||||||
previous_dept: '-',
|
|
||||||
location: locRaw,
|
|
||||||
manager_primary: mgr1Raw,
|
|
||||||
manager_secondary: mgr2Raw,
|
|
||||||
ip_address: ipRaw !== '-' ? ipRaw : '172.16.42.' + (100 + storageIndex),
|
|
||||||
remote_tool: toolRaw !== '-' ? toolRaw : 'Web GUI',
|
|
||||||
model_name: modelRaw !== '-' ? modelRaw : 'Synology 공용 NAS',
|
|
||||||
os: osRaw !== '-' ? `${osRaw} ${osVerRaw}` : 'DSM 7.x',
|
|
||||||
cpu: cpuRaw,
|
|
||||||
ram: ramRaw,
|
|
||||||
gpu: gpuRaw,
|
|
||||||
ssd_1: ssd1Raw,
|
|
||||||
ssd_2: ssd2Raw,
|
|
||||||
hdd_1: hdd1Raw,
|
|
||||||
hdd_2: hdd2Raw,
|
|
||||||
hdd_3: hdd3Raw,
|
|
||||||
hdd_4: hdd4Raw,
|
|
||||||
monitoring: '비대상',
|
|
||||||
purchase_amount: '4500000',
|
|
||||||
purchase_vendor: '시놀로지 총판',
|
|
||||||
approval_document: '2022_스토리지_도입_' + storageIndex,
|
|
||||||
memo: '스토리지 서버 공유 자산',
|
|
||||||
asset_name: assetNameRaw,
|
|
||||||
mac_address: `00:1A:2B:3C:5F:${storageIndex.toString(16).toUpperCase().padStart(2, '0')}`,
|
|
||||||
hw_status: '운영중',
|
|
||||||
service_type: service_type,
|
|
||||||
is_inactive: is_inactive,
|
|
||||||
volume: hdd1Raw !== '-' ? hdd1Raw : '24TB',
|
|
||||||
cpu_usage: cpu_usage,
|
|
||||||
ram_usage: ram_usage,
|
|
||||||
network_traffic: network_traffic
|
|
||||||
};
|
|
||||||
|
|
||||||
parsedStorages.push(assetItem);
|
|
||||||
storageIndex++;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(`Parsed Servers: ${parsedServers.length} units`);
|
|
||||||
console.log(`Parsed Storages: ${parsedStorages.length} units`);
|
|
||||||
|
|
||||||
// 3. 파일 다시 쓰기
|
|
||||||
const newDummyDataFileContent = `import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog } from './excelHandler';
|
|
||||||
|
|
||||||
// 유틸리티: 랜덤 문자열
|
|
||||||
const randomId = () => Math.random().toString(36).substring(2, 9);
|
|
||||||
|
|
||||||
// 유틸리티: 랜덤 년월 (YYYY-MM) (최근 10년)
|
|
||||||
const randomPurchaseYM = () => {
|
|
||||||
const currentYear = new Date().getFullYear();
|
|
||||||
const year = currentYear - Math.floor(Math.random() * 10);
|
|
||||||
const month = String(Math.floor(Math.random() * 12) + 1).padStart(2, '0');
|
|
||||||
return \`\${year}-\${month}\`;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 유틸리티: 랜덤 YYYY-MM-DD
|
|
||||||
const randomDateStr = (maxYearsAgo = 10) => {
|
|
||||||
const currentYear = new Date().getFullYear();
|
|
||||||
const year = currentYear - Math.floor(Math.random() * maxYearsAgo);
|
|
||||||
const month = String(Math.floor(Math.random() * 12) + 1).padStart(2, '0');
|
|
||||||
const day = String(Math.floor(Math.random() * 28) + 1).padStart(2, '0');
|
|
||||||
return \`\${year}-\${month}-\${day}\`;
|
|
||||||
};
|
|
||||||
|
|
||||||
const CORPS = ['한맥', '삼안', '장헌', '장헌산업', 'PTC', '바론', '한라'];
|
|
||||||
const getRandomCorp = () => CORPS[Math.floor(Math.random() * CORPS.length)];
|
|
||||||
|
|
||||||
// ────────────────────────────────────────────────────────
|
|
||||||
// 1. SampleData_PC.xlsx 에서 파싱된 PC 데이터 주입
|
|
||||||
// ────────────────────────────────────────────────────────
|
|
||||||
export const dummyPCs: any[] = ${JSON.stringify(dummyPCs, null, 2)};
|
|
||||||
|
|
||||||
// ────────────────────────────────────────────────────────
|
|
||||||
// 2. 기타 자산 더미 데이터 (서버, 스토리지, 소프트웨어 등 - 엑셀 파싱 연동)
|
|
||||||
// ────────────────────────────────────────────────────────
|
|
||||||
|
|
||||||
export const dummyServers: any[] = ${JSON.stringify(parsedServers, null, 2)};
|
|
||||||
|
|
||||||
export const dummyStorages: any[] = ${JSON.stringify(parsedStorages, null, 2)};
|
|
||||||
|
|
||||||
export const dummyEquips: any[] = Array.from({ length: 12 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
asset_type: '전산비품',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
asset_code: \`EQ-24\${String(i).padStart(3, '0')}\`,
|
|
||||||
asset_name: \`네트워크 스위치 \${i+1}\`,
|
|
||||||
location: '전산실 랙 1',
|
|
||||||
manager_primary: '네트워크담당자',
|
|
||||||
ip_address: \`192.168.10.\${200 + i}\`,
|
|
||||||
mac_address: \`00:1A:2B:3C:51:\${String(i).padStart(2, '0')}\`,
|
|
||||||
os: 'Cisco IOS',
|
|
||||||
purchase_date: randomPurchaseYM(),
|
|
||||||
purchase_amount: '150000',
|
|
||||||
purchase_vendor: '다나와',
|
|
||||||
approval_document: \`2024_비품구매_\${i}\`,
|
|
||||||
memo: '사내망 확장용',
|
|
||||||
asset_purpose: '네트워크 분배'
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummyMobiles: any[] = Array.from({ length: 15 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
asset_type: '모바일기기',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
asset_code: \`MOB-24\${String(i).padStart(3, '0')}\`,
|
|
||||||
asset_name: \`테스트용 단말기 \${i+1}\`,
|
|
||||||
location: '개발2팀',
|
|
||||||
manager_primary: '테스터',
|
|
||||||
os: i % 2 === 0 ? 'Android 14' : 'iOS 17',
|
|
||||||
purchase_date: randomPurchaseYM(),
|
|
||||||
purchase_amount: '900000',
|
|
||||||
purchase_vendor: '삼성전자/애플',
|
|
||||||
approval_document: \`2024_모바일구매_\${i}\`,
|
|
||||||
memo: '앱 호환성 테스트 전용',
|
|
||||||
asset_purpose: 'QA 테스트',
|
|
||||||
ip_address: \`192.168.1.\${10 + i}\`,
|
|
||||||
mac_address: \`00:1A:2B:3C:50:\${String(i).padStart(2, '0')}\`
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummySubSw: any[] = Array.from({ length: 10 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
sw_type: '구독SW',
|
|
||||||
sw_field: '업무용/협업',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
current_dept: '전사',
|
|
||||||
product_name: \`Microsoft 365 E\${3 + (i%2)}\`,
|
|
||||||
purchase_date: randomDateStr(3),
|
|
||||||
start_date: randomDateStr(1),
|
|
||||||
expired_date: randomDateStr(0),
|
|
||||||
purchase_amount: '150000',
|
|
||||||
asset_count: 50 + i * 5,
|
|
||||||
email_account: \`admin\${i}@hmcorp.com\`,
|
|
||||||
purchase_vendor: '소프트웨어인라이프',
|
|
||||||
memo: '연간 계약 갱신 필요'
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummyPermSw: any[] = Array.from({ length: 5 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
sw_type: '영구SW',
|
|
||||||
sw_field: '디자인/설계',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
current_dept: '디자인팀',
|
|
||||||
product_name: \`AutoCAD 202\${i%4}\`,
|
|
||||||
purchase_date: randomDateStr(5),
|
|
||||||
start_date: randomDateStr(5),
|
|
||||||
expired_date: '2099-12-31',
|
|
||||||
purchase_amount: '3000000',
|
|
||||||
asset_count: 2,
|
|
||||||
email_account: \`design\${i}@hmcorp.com\`,
|
|
||||||
purchase_vendor: '오토데스크 파트너',
|
|
||||||
memo: 'USB 동글키 보관중'
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummyCloud: any[] = Array.from({ length: 5 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
sw_type: '클라우드',
|
|
||||||
asset_mfr: i % 2 === 0 ? 'AWS' : 'GCP',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
current_dept: '개발팀',
|
|
||||||
product_name: \`컴퓨팅 인스턴스 Type \${i}\`,
|
|
||||||
email_account: \`awsadmin\${i}@hmcorp.com\`,
|
|
||||||
purchase_method: '법인카드(신한 1234)',
|
|
||||||
purchase_amount: \`\${500000 + i * 100000}\`,
|
|
||||||
asset_count: 1,
|
|
||||||
purchase_vendor: 'AWS/GCP',
|
|
||||||
memo: '환율 변동에 따라 매월 상이함'
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummyDomain: any[] = Array.from({ length: 5 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
asset_type: '도메인',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
product_name: \`사내 운영 서비스 \${i+1}\`,
|
|
||||||
domain_address: \`service\${i+1}.hmcorp.com\`,
|
|
||||||
start_date: randomDateStr(4),
|
|
||||||
expired_date: randomDateStr(0),
|
|
||||||
purchase_amount: '22000',
|
|
||||||
manager_primary: '인프라팀장',
|
|
||||||
manager_secondary: '인프라담당자',
|
|
||||||
memo: '가비아 자동갱신 설정 완료'
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummySwUsers: any[] = Array.from({ length: 15 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
sw_id: dummySubSw[0]?.id || randomId(),
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
current_dept: '경영지원팀',
|
|
||||||
user_current: \`홍길동\${i}\`,
|
|
||||||
memo: \`SW신청서_2400\${i}\`
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummyLogs: any[] = Array.from({ length: 10 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
assetId: dummyPCs[0]?.id || randomId(),
|
|
||||||
date: randomDateStr(1),
|
|
||||||
details: i % 2 === 0 ? '메모리 추가 증설 (16GB -> 32GB)' : '디스플레이 파손 수리',
|
|
||||||
user: 'IT지원팀',
|
|
||||||
cost: i % 2 === 0 ? 80000 : 150000,
|
|
||||||
}));
|
|
||||||
`;
|
|
||||||
|
|
||||||
fs.writeFileSync(dummyDataPath, newDummyDataFileContent, 'utf-8');
|
|
||||||
console.log('✅ dummyData.ts file updated successfully with SVR dataset.');
|
|
||||||
} catch (e) {
|
|
||||||
console.error('❌ Failed to update dummy data:', e);
|
|
||||||
}
|
|
||||||
812
server.js
812
server.js
@@ -2,166 +2,740 @@ import express from 'express';
|
|||||||
import mysql from 'mysql2/promise';
|
import mysql from 'mysql2/promise';
|
||||||
import cors from 'cors';
|
import cors from 'cors';
|
||||||
import dotenv from 'dotenv';
|
import dotenv from 'dotenv';
|
||||||
|
import fs from 'fs';
|
||||||
|
|
||||||
dotenv.config();
|
dotenv.config({ override: true });
|
||||||
|
|
||||||
const app = express();
|
const app = express();
|
||||||
app.use(cors());
|
app.use(cors());
|
||||||
app.use(express.json({ limit: '100mb' }));
|
app.use(express.json({ limit: '50mb' }));
|
||||||
|
app.use('/uploads', express.static('uploads')); // 업로드 파일 정적 서빙
|
||||||
|
|
||||||
// Request Logger
|
// uploads 폴더가 없으면 생성
|
||||||
app.use((req, res, next) => {
|
if (!fs.existsSync('uploads')) {
|
||||||
console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`);
|
fs.mkdirSync('uploads');
|
||||||
next();
|
}
|
||||||
});
|
|
||||||
|
|
||||||
|
// MySQL Pool Configuration
|
||||||
const pool = mysql.createPool({
|
const pool = mysql.createPool({
|
||||||
host: process.env.DB_HOST,
|
host: process.env.DB_HOST,
|
||||||
user: process.env.DB_USER,
|
user: process.env.DB_USER,
|
||||||
password: process.env.DB_PASS,
|
password: process.env.DB_PASS,
|
||||||
database: process.env.DB_NAME,
|
database: process.env.DB_NAME,
|
||||||
port: parseInt(process.env.DB_PORT || '3306'),
|
port: parseInt(process.env.DB_PORT || '3306'),
|
||||||
charset: 'utf8mb4'
|
waitForConnections: true,
|
||||||
|
connectionLimit: 10,
|
||||||
|
queueLimit: 0
|
||||||
});
|
});
|
||||||
|
|
||||||
const handleError = (res, err, context, isGet = false) => {
|
// Database startup check (ensure job_spec_standards table exists)
|
||||||
console.error(`❌ [${context}] Error:`, err.message);
|
(async () => {
|
||||||
if (isGet) res.json([]);
|
let connection;
|
||||||
else res.status(500).json({ error: err.message });
|
|
||||||
};
|
|
||||||
|
|
||||||
// --- API Implementation ---
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Generic Fetcher for Asset Tables
|
|
||||||
*/
|
|
||||||
const fetchAssets = async (tableName, res, context) => {
|
|
||||||
try {
|
try {
|
||||||
const [rows] = await pool.query(`SELECT * FROM ${tableName}`);
|
connection = await pool.getConnection();
|
||||||
console.log(`📡 [GET ${context}] Returning ${rows.length} rows from ${tableName}`);
|
await connection.query(`
|
||||||
res.json(rows);
|
CREATE TABLE IF NOT EXISTS job_spec_standards (
|
||||||
|
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||||
|
job_name VARCHAR(100) UNIQUE NOT NULL,
|
||||||
|
cpu_standard VARCHAR(255),
|
||||||
|
ram_standard VARCHAR(100),
|
||||||
|
gpu_standard VARCHAR(100),
|
||||||
|
min_score INT DEFAULT 0,
|
||||||
|
remarks TEXT,
|
||||||
|
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
|
||||||
|
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
||||||
|
`);
|
||||||
|
console.log('✅ job_spec_standards table verification completed.');
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
handleError(res, err, context, true);
|
console.error('❌ Failed to verify/create job_spec_standards table:', err);
|
||||||
|
} finally {
|
||||||
|
if (connection) connection.release();
|
||||||
}
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
// Error Handler
|
||||||
|
const handleError = (res, err, label) => {
|
||||||
|
console.error(`❌ [${label}] Error:`, err);
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
// --- Global Constants ---
|
||||||
* Generic Batch Saver for Asset Tables
|
const CATEGORY_TABLE_MAP = {
|
||||||
*/
|
pc: 'asset_core',
|
||||||
const saveAssetsBatch = async (tableName, items, res, context) => {
|
server: 'asset_core',
|
||||||
const connection = await pool.getConnection();
|
storage: 'asset_core',
|
||||||
|
network: 'asset_core',
|
||||||
|
equipment: 'asset_core',
|
||||||
|
officeSupplies: 'asset_core',
|
||||||
|
survey: 'asset_core',
|
||||||
|
vip: 'asset_core',
|
||||||
|
pcParts: 'asset_core',
|
||||||
|
swInternal: 'asset_software_perpetual',
|
||||||
|
swExternal: 'asset_software_subscription',
|
||||||
|
swUsers: 'asset_software_assignment',
|
||||||
|
users: 'system_users',
|
||||||
|
logs: 'asset_history'
|
||||||
|
};
|
||||||
|
|
||||||
|
const ASSET_TABLES = [
|
||||||
|
'asset_core'
|
||||||
|
];
|
||||||
|
|
||||||
|
// --- API Endpoints ---
|
||||||
|
|
||||||
|
// 1. Generic Batch Save (Dynamic Table Detection)
|
||||||
|
app.post('/api/:table/batch', async (req, res) => {
|
||||||
|
const { table } = req.params;
|
||||||
|
const dbTable = CATEGORY_TABLE_MAP[table] || table;
|
||||||
|
const data = req.body;
|
||||||
|
if (!Array.isArray(data)) return res.status(400).json({ error: 'Data must be an array' });
|
||||||
|
|
||||||
|
let connection;
|
||||||
try {
|
try {
|
||||||
|
connection = await pool.getConnection();
|
||||||
await connection.beginTransaction();
|
await connection.beginTransaction();
|
||||||
|
|
||||||
// Get valid columns for this table
|
const [columns] = await connection.query(`DESCRIBE ${dbTable}`);
|
||||||
const [cols] = await connection.query(`DESCRIBE ${tableName}`);
|
const validFields = columns.map(c => c.Field);
|
||||||
const validColumns = cols.map(c => c.Field);
|
|
||||||
|
|
||||||
// 1. Clear existing (or we could use UPSERT logic, but existing code used DELETE-INSERT pattern)
|
await connection.query(`DELETE FROM ${dbTable}`);
|
||||||
await connection.query(`DELETE FROM ${tableName}`);
|
|
||||||
|
|
||||||
// 2. Insert new items
|
if (data.length > 0) {
|
||||||
for (const item of items) {
|
const placeholders = validFields.map(() => '?').join(', ');
|
||||||
const filteredRow = {};
|
const sql = `INSERT INTO ${dbTable} (${validFields.join(', ')}) VALUES (${placeholders})`;
|
||||||
validColumns.forEach(col => {
|
|
||||||
// Exclude auto-managed timestamps from manual insertion
|
|
||||||
if (col === 'created_at' || col === 'updated_at') return;
|
|
||||||
|
|
||||||
if (item[col] !== undefined) filteredRow[col] = item[col];
|
for (const item of data) {
|
||||||
});
|
const values = validFields.map(field => {
|
||||||
|
const val = item[field];
|
||||||
// Auto-generate ID if missing
|
return val === undefined ? null : val;
|
||||||
if (!filteredRow.id) filteredRow.id = Math.random().toString(36).substring(2, 9);
|
});
|
||||||
|
await connection.query(sql, values);
|
||||||
await connection.query(`INSERT INTO ${tableName} SET ?`, [filteredRow]);
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
await connection.commit();
|
await connection.commit();
|
||||||
res.json({ success: true, count: items.length });
|
res.json({ success: true, count: data.length });
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
await connection.rollback();
|
if (connection) await connection.rollback();
|
||||||
handleError(res, err, context);
|
handleError(res, err, 'BATCH SAVE');
|
||||||
} finally {
|
} finally {
|
||||||
connection.release();
|
if (connection) connection.release();
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
|
||||||
// --- Routes ---
|
|
||||||
|
|
||||||
const routeMap = {
|
|
||||||
'/api/users': { table: 'system_users', context: 'USERS' },
|
|
||||||
'/api/pc': { table: 'asset_pc', context: 'PC' },
|
|
||||||
'/api/server': { table: 'asset_server', context: 'SERVER' },
|
|
||||||
'/api/storage': { table: 'asset_storage', context: 'STORAGE' },
|
|
||||||
'/api/network': { table: 'asset_network', context: 'NETWORK' },
|
|
||||||
'/api/sw/internal': { table: 'asset_sw_internal', context: 'SW INTERNAL' },
|
|
||||||
'/api/sw/external': { table: 'asset_sw_external', context: 'SW EXTERNAL' },
|
|
||||||
'/api/survey': { table: 'asset_survey', context: 'SURVEY' },
|
|
||||||
'/api/pc-parts': { table: 'asset_pc_parts', context: 'PC PARTS' },
|
|
||||||
'/api/equipment': { table: 'asset_equipment', context: 'EQUIPMENT' },
|
|
||||||
'/api/office-supplies': { table: 'asset_office_supplies', context: 'OFFICE SUPPLIES' },
|
|
||||||
'/api/cloud': { table: 'asset_cloud', context: 'CLOUD' },
|
|
||||||
'/api/domain': { table: 'asset_domain', context: 'DOMAIN' },
|
|
||||||
'/api/cost': { table: 'asset_cost', context: 'COST' },
|
|
||||||
'/api/vip': { table: 'asset_vip', context: 'VIP' },
|
|
||||||
'/api/asset/software/assignment': { table: 'asset_software_assignment', context: 'SW ASSIGN' }
|
|
||||||
};
|
|
||||||
|
|
||||||
// 동적 라우팅 생성 (Dynamic Routing)
|
|
||||||
Object.entries(routeMap).forEach(([route, { table, context }]) => {
|
|
||||||
app.get(route, (req, res) => fetchAssets(table, res, context));
|
|
||||||
app.post(`${route}/batch`, (req, res) => saveAssetsBatch(table, req.body, res, `${context} BATCH`));
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// 4. Legacy/Auxiliary (History & Assignment)
|
// 2. Get All Assets (Integrated Master Data from Normalized V3 Schema)
|
||||||
app.get('/api/asset/history', (req, res) => fetchAssets('asset_history', res, 'HISTORY'));
|
app.get('/api/assets/master', async (req, res) => {
|
||||||
app.post('/api/asset/history/batch', async (req, res) => {
|
let connection;
|
||||||
// Custom logic for history as it might not follow the random-id pattern
|
|
||||||
const connection = await pool.getConnection();
|
|
||||||
try {
|
|
||||||
await connection.beginTransaction();
|
|
||||||
await connection.query('DELETE FROM asset_history');
|
|
||||||
for (const item of req.body) {
|
|
||||||
const dbRow = {
|
|
||||||
asset_id: item.assetId,
|
|
||||||
log_date: item.date,
|
|
||||||
log_user: item.user,
|
|
||||||
details: item.details,
|
|
||||||
cost: item.cost || 0
|
|
||||||
};
|
|
||||||
await connection.query('INSERT INTO asset_history SET ?', [dbRow]);
|
|
||||||
}
|
|
||||||
await connection.commit();
|
|
||||||
res.json({ success: true });
|
|
||||||
} catch (err) { await connection.rollback(); handleError(res, err, 'BATCH HISTORY'); } finally { connection.release(); }
|
|
||||||
});
|
|
||||||
|
|
||||||
// 5. Utility
|
|
||||||
app.get('/api/generate-asset-code', async (req, res) => {
|
|
||||||
try {
|
try {
|
||||||
const { prefix } = req.query;
|
connection = await pool.getConnection();
|
||||||
if (!prefix) return res.status(400).json({ error: 'Prefix is required' });
|
|
||||||
|
|
||||||
// Search in multiple tables if necessary, but typically prefix-based tables are known
|
const masterData = {
|
||||||
const tables = ['asset_pc', 'asset_server', 'asset_storage', 'asset_network', 'asset_survey', 'asset_pc_parts', 'asset_equipment', 'asset_office_supplies', 'asset_vip'];
|
pc: [], server: [], storage: [], network: [],
|
||||||
let lastCode = '';
|
equipment: [], officeSupplies: [], survey: [], vip: [], pcParts: [],
|
||||||
|
swInternal: [], swExternal: [], swUsers: [], users: [], logs: [], partsMaster: []
|
||||||
|
};
|
||||||
|
|
||||||
for (const table of tables) {
|
// Load from V3 Normalized Schema
|
||||||
const [rows] = await pool.query(`SELECT asset_code FROM ${table} WHERE asset_code LIKE ? ORDER BY asset_code DESC LIMIT 1`, [`${prefix}%`]);
|
const [rows] = await connection.query(`
|
||||||
if (rows.length > 0 && rows[0].asset_code > lastCode) {
|
SELECT
|
||||||
lastCode = rows[0].asset_code;
|
c.*,
|
||||||
|
s.hw_status, s.model_name, s.mainboard, s.os, s.cpu, s.ram, s.gpu,
|
||||||
|
s.monitoring, s.price, s.monitor_inch, s.serial_num,
|
||||||
|
l.location, l.location_detail, l.location_photo, l.loc_x, l.loc_y,
|
||||||
|
(
|
||||||
|
SELECT JSON_ARRAYAGG(JSON_OBJECT('type', net_type, 'name', net_name, 'val1', net_value1, 'val2', net_value2))
|
||||||
|
FROM asset_remote WHERE asset_id = c.id AND is_active = 1
|
||||||
|
) as remotes,
|
||||||
|
(
|
||||||
|
SELECT JSON_ARRAYAGG(JSON_OBJECT('type', disk_type, 'capacity', capacity, 'unit', unit, 'slot', slot_no))
|
||||||
|
FROM asset_volume WHERE asset_id = c.id
|
||||||
|
) as volumes
|
||||||
|
FROM asset_core c
|
||||||
|
LEFT JOIN asset_spec s ON c.id = s.asset_id
|
||||||
|
LEFT JOIN asset_location l ON l.id = (
|
||||||
|
SELECT id FROM asset_location
|
||||||
|
WHERE asset_id = c.id AND is_active = 1
|
||||||
|
ORDER BY created_at DESC LIMIT 1
|
||||||
|
)
|
||||||
|
`);
|
||||||
|
|
||||||
|
const catMap = {
|
||||||
|
'PC': 'pc', '서버': 'server', '저장매체': 'storage', '네트워크': 'network',
|
||||||
|
'업무지원장비': 'equipment', '사무가구': 'officeSupplies', '공간정보장비': 'survey',
|
||||||
|
'내빈/외빈': 'vip', 'PC부품': 'pcParts'
|
||||||
|
};
|
||||||
|
|
||||||
|
rows.forEach(row => {
|
||||||
|
const key = catMap[row.category] || 'pc';
|
||||||
|
masterData[key].push(row);
|
||||||
|
});
|
||||||
|
|
||||||
|
const [swInternal] = await connection.query('SELECT * FROM asset_software_perpetual');
|
||||||
|
const [swExternal] = await connection.query('SELECT * FROM asset_software_subscription');
|
||||||
|
const [swUsers] = await connection.query('SELECT * FROM asset_software_assignment');
|
||||||
|
const [users] = await connection.query('SELECT * FROM system_users');
|
||||||
|
const [logs] = await connection.query('SELECT * FROM asset_history ORDER BY created_at DESC');
|
||||||
|
const [partsMaster] = await connection.query('SELECT * FROM hardware_components_master ORDER BY category, component_name');
|
||||||
|
const [jobSpecs] = await connection.query('SELECT * FROM job_spec_standards ORDER BY job_name');
|
||||||
|
|
||||||
|
masterData.swInternal = swInternal;
|
||||||
|
masterData.swExternal = swExternal;
|
||||||
|
masterData.swUsers = swUsers;
|
||||||
|
masterData.users = users;
|
||||||
|
masterData.logs = logs;
|
||||||
|
masterData.partsMaster = partsMaster;
|
||||||
|
masterData.jobSpecs = jobSpecs;
|
||||||
|
|
||||||
|
res.json(masterData);
|
||||||
|
} catch (err) {
|
||||||
|
handleError(res, err, 'MASTER DATA');
|
||||||
|
} finally {
|
||||||
|
if (connection) connection.release();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 3. Asset Save (Surgical Split to Normalized V3 Tables)
|
||||||
|
app.post('/api/asset/:category/save', async (req, res) => {
|
||||||
|
const asset = req.body;
|
||||||
|
let connection;
|
||||||
|
try {
|
||||||
|
connection = await pool.getConnection();
|
||||||
|
await connection.beginTransaction();
|
||||||
|
|
||||||
|
// 3.0 History Tracking & Auto Field Update
|
||||||
|
const [oldCoreRows] = await connection.query('SELECT * FROM asset_core WHERE id = ?', [asset.id]);
|
||||||
|
const [oldSpecRows] = await connection.query('SELECT * FROM asset_spec WHERE asset_id = ?', [asset.id]);
|
||||||
|
const oldCore = oldCoreRows[0] || {};
|
||||||
|
const oldSpec = oldSpecRows[0] || {};
|
||||||
|
|
||||||
|
const historyLogs = [];
|
||||||
|
const logDate = new Date().toISOString().split('T')[0]; // YYYY-MM-DD
|
||||||
|
const logUser = '관리자';
|
||||||
|
|
||||||
|
// 3.0.1 Core 변동 감지 (Dept, User)
|
||||||
|
const oldDept = oldCore.current_dept || '';
|
||||||
|
const newDept = asset.current_dept || '';
|
||||||
|
if (newDept !== '' && oldDept !== newDept) {
|
||||||
|
asset.previous_dept = oldDept;
|
||||||
|
historyLogs.push({
|
||||||
|
event_type: 'DEPT_CHANGE',
|
||||||
|
old_dept: oldDept || null,
|
||||||
|
new_dept: newDept,
|
||||||
|
details: `[조직 변동] ${oldDept || '(없음)'} -> ${newDept}`
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const oldUser = oldCore.user_current || '';
|
||||||
|
const newUser = asset.user_current || '';
|
||||||
|
if (newUser !== '' && oldUser !== newUser) {
|
||||||
|
asset.previous_user = oldUser;
|
||||||
|
historyLogs.push({
|
||||||
|
event_type: 'USER_CHANGE',
|
||||||
|
old_user: oldUser || null,
|
||||||
|
new_user: newUser,
|
||||||
|
details: `[사용자 변동] ${oldUser || '(없음)'} -> ${newUser}`
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3.0.2 Spec 변동 감지 (CPU, RAM, GPU, OS, Mainboard 등)
|
||||||
|
const specFieldsToTrack = [
|
||||||
|
{ key: 'cpu', label: 'CPU' },
|
||||||
|
{ key: 'ram', label: 'RAM' },
|
||||||
|
{ key: 'gpu', label: 'GPU' },
|
||||||
|
{ key: 'os', label: 'OS' },
|
||||||
|
{ key: 'mainboard', label: '메인보드' }
|
||||||
|
];
|
||||||
|
|
||||||
|
specFieldsToTrack.forEach(field => {
|
||||||
|
const oldVal = String(oldSpec[field.key] || '').trim();
|
||||||
|
const newVal = String(asset[field.key] || '').trim();
|
||||||
|
if (newVal !== '' && oldVal !== newVal) {
|
||||||
|
historyLogs.push({
|
||||||
|
event_type: 'SPEC_CHANGE',
|
||||||
|
details: `[사양 변경] ${field.label}: ${oldVal || '(없음)'} -> ${newVal}`
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 3.0.3 상태 변경 감지
|
||||||
|
const oldStatus = oldSpec.hw_status || '';
|
||||||
|
const newStatus = asset.hw_status || '';
|
||||||
|
if (newStatus !== '' && oldStatus !== newStatus) {
|
||||||
|
historyLogs.push({
|
||||||
|
event_type: 'STATUS_CHANGE',
|
||||||
|
details: `[상태 변경] ${oldStatus || '(없음)'} -> ${newStatus}`
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 로그 일괄 삽입
|
||||||
|
for (const log of historyLogs) {
|
||||||
|
await connection.query(
|
||||||
|
`INSERT INTO asset_history (asset_id, event_type, old_dept, new_dept, old_user, new_user, details, log_date, log_user)
|
||||||
|
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,
|
||||||
|
[asset.id, log.event_type, log.old_dept || null, log.new_dept || null, log.old_user || null, log.new_user || null, log.details, logDate, logUser]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3.1 asset_core
|
||||||
|
const coreFields = ['id', 'asset_code', 'category', 'asset_type', 'current_role', 'asset_purpose', 'service_type', 'purchase_corp', 'purchase_date', 'purchase_amount', 'purchase_vendor', 'approval_document', 'memo', 'manager_primary', 'manager_secondary', 'current_dept', 'previous_dept', 'user_current', 'previous_user', 'emp_no', 'user_position'];
|
||||||
|
const coreData = {};
|
||||||
|
coreFields.forEach(f => { if (asset[f] !== undefined) coreData[f] = asset[f]; });
|
||||||
|
const coreKeys = Object.keys(coreData);
|
||||||
|
|
||||||
|
console.log(`[DEBUG] Saving Asset ID: ${asset.id}, Code: ${asset.asset_code}`);
|
||||||
|
const [existingCore] = await connection.query('SELECT id FROM asset_core WHERE id = ?', [asset.id]);
|
||||||
|
console.log(`[DEBUG] Existing Core Check for ${asset.id}: Found ${existingCore.length}`);
|
||||||
|
|
||||||
|
if (existingCore.length > 0) {
|
||||||
|
// UPDATE
|
||||||
|
const updateKeys = coreKeys.filter(k => k !== 'id');
|
||||||
|
const coreSql = `UPDATE asset_core SET ${updateKeys.map(k => `${k} = ?`).join(', ')} WHERE id = ?`;
|
||||||
|
const [updRes] = await connection.query(coreSql, [...updateKeys.map(k => coreData[k]), asset.id]);
|
||||||
|
console.log(`[DEBUG] Core UPDATE result: affectedRows=${updRes.affectedRows}`);
|
||||||
|
} else {
|
||||||
|
// INSERT
|
||||||
|
const coreSql = `INSERT INTO asset_core (${coreKeys.join(', ')}) VALUES (${coreKeys.map(() => '?').join(', ')})`;
|
||||||
|
const [insRes] = await connection.query(coreSql, Object.values(coreData));
|
||||||
|
console.log(`[DEBUG] Core INSERT result: affectedRows=${insRes.affectedRows}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3.2 asset_spec
|
||||||
|
const specFields = ['hw_status', 'model_name', 'mainboard', 'os', 'cpu', 'ram', 'gpu', 'monitoring', 'price', 'monitor_inch', 'serial_num'];
|
||||||
|
const specData = { asset_id: asset.id };
|
||||||
|
specFields.forEach(f => { if (asset[f] !== undefined) specData[f] = asset[f]; });
|
||||||
|
const specKeys = Object.keys(specData);
|
||||||
|
const [specExists] = await connection.query('SELECT id FROM asset_spec WHERE asset_id = ?', [asset.id]);
|
||||||
|
if (specExists.length > 0) {
|
||||||
|
const updateSql = `UPDATE asset_spec SET ${specKeys.filter(k => k !== 'asset_id').map(k => `${k} = ?`).join(', ')} WHERE asset_id = ?`;
|
||||||
|
await connection.query(updateSql, [...specKeys.filter(k => k !== 'asset_id').map(k => specData[k]), asset.id]);
|
||||||
|
} else {
|
||||||
|
await connection.query(`INSERT INTO asset_spec (${specKeys.join(', ')}) VALUES (${specKeys.map(() => '?').join(', ')})`, Object.values(specData));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3.3 asset_volume
|
||||||
|
await connection.query('DELETE FROM asset_volume WHERE asset_id = ?', [asset.id]);
|
||||||
|
if (asset.volumes) {
|
||||||
|
try {
|
||||||
|
let vols = typeof asset.volumes === 'string' ? JSON.parse(asset.volumes) : asset.volumes;
|
||||||
|
if (Array.isArray(vols)) {
|
||||||
|
for (let i = 0; i < vols.length; i++) {
|
||||||
|
const v = vols[i];
|
||||||
|
if (v.type && v.capacity) {
|
||||||
|
await connection.query(
|
||||||
|
'INSERT INTO asset_volume (asset_id, disk_type, capacity, unit, slot_no) VALUES (?, ?, ?, ?, ?)',
|
||||||
|
[asset.id, v.type, v.capacity, v.unit || 'GB', v.slot || (i + 1)]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch(e) { console.error('Volume parse error', e); }
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3.4 asset_location
|
||||||
|
if (asset.location || asset.location_detail) {
|
||||||
|
const [locActive] = await connection.query('SELECT * FROM asset_location WHERE asset_id = ? AND is_active = 1', [asset.id]);
|
||||||
|
const isChanged = locActive.length === 0 || locActive[0].location !== asset.location || locActive[0].location_detail !== asset.location_detail || locActive[0].loc_x !== asset.loc_x || locActive[0].loc_y !== asset.loc_y;
|
||||||
|
if (isChanged) {
|
||||||
|
await connection.query('UPDATE asset_location SET is_active = 0, deactivated_at = NOW() WHERE asset_id = ? AND is_active = 1', [asset.id]);
|
||||||
|
await connection.query(`INSERT INTO asset_location (asset_id, location, location_detail, location_photo, loc_x, loc_y, is_active) VALUES (?, ?, ?, ?, ?, ?, 1)`,
|
||||||
|
[asset.id, asset.location, asset.location_detail, asset.location_photo, asset.loc_x, asset.loc_y]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let nextNum = 1;
|
// 3.5 asset_remote (Dynamic Array Logic)
|
||||||
if (lastCode) {
|
if (asset.remotes) {
|
||||||
const lastNum = parseInt(lastCode.split('-').pop() || '0');
|
try {
|
||||||
nextNum = lastNum + 1;
|
let nets = typeof asset.remotes === 'string' ? JSON.parse(asset.remotes) : asset.remotes;
|
||||||
|
if (Array.isArray(nets)) {
|
||||||
|
await connection.query('UPDATE asset_remote SET is_active = 0, deactivated_at = NOW() WHERE asset_id = ? AND is_active = 1', [asset.id]);
|
||||||
|
for (const n of nets) {
|
||||||
|
if (n.type) {
|
||||||
|
await connection.query(
|
||||||
|
'INSERT INTO asset_remote (asset_id, net_type, net_name, net_value1, net_value2, is_active) VALUES (?, ?, ?, ?, ?, 1)',
|
||||||
|
[asset.id, n.type, n.name || '', n.val1 || '', n.val2 || '']
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch(e) { console.error('Remote data parse error', e); }
|
||||||
|
} else {
|
||||||
|
// Fallback for UI that hasn't sent the networks array yet
|
||||||
|
if (asset.ip_address || asset.mac_address || asset.remote_tool) {
|
||||||
|
const [netActive] = await connection.query('SELECT * FROM asset_remote WHERE asset_id = ? AND is_active = 1', [asset.id]);
|
||||||
|
const isChanged = netActive.length === 0 || netActive[0].net_value1 !== asset.ip_address || netActive[0].net_value2 !== asset.mac_address || netActive[0].net_name !== asset.remote_tool;
|
||||||
|
if (isChanged) {
|
||||||
|
await connection.query('UPDATE asset_remote SET is_active = 0, deactivated_at = NOW() WHERE asset_id = ? AND is_active = 1', [asset.id]);
|
||||||
|
if (asset.ip_address || asset.mac_address) {
|
||||||
|
await connection.query('INSERT INTO asset_remote (asset_id, net_type, net_name, net_value1, net_value2, is_active) VALUES (?, ?, ?, ?, ?, 1)', [asset.id, 'IP', '기본망', asset.ip_address, asset.mac_address]);
|
||||||
|
}
|
||||||
|
if (asset.remote_tool || asset.remote_id || asset.remote_pw) {
|
||||||
|
await connection.query('INSERT INTO asset_remote (asset_id, net_type, net_name, net_value1, net_value2, is_active) VALUES (?, ?, ?, ?, ?, 1)', [asset.id, 'REMOTE', asset.remote_tool, asset.remote_id, asset.remote_pw]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
res.json({ nextCode: `${prefix}${String(nextNum).padStart(3, '0')}` });
|
|
||||||
|
await connection.commit();
|
||||||
|
console.log(`💾 [V3 ASSET SAVE] ID: ${asset.id}`);
|
||||||
|
res.json({ success: true });
|
||||||
|
} catch (err) {
|
||||||
|
if (connection) await connection.rollback();
|
||||||
|
handleError(res, err, 'ASSET SAVE V3');
|
||||||
|
} finally {
|
||||||
|
if (connection) connection.release();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 3.6 PC Flow Transaction (Checkout, Return, Move)
|
||||||
|
app.post('/api/pc/flow', async (req, res) => {
|
||||||
|
const { action, assetId, userName, dept, empNo, position, date, details, manager } = req.body;
|
||||||
|
let connection;
|
||||||
|
try {
|
||||||
|
connection = await pool.getConnection();
|
||||||
|
await connection.beginTransaction();
|
||||||
|
|
||||||
|
if (action === 'checkout') {
|
||||||
|
await connection.query(
|
||||||
|
`UPDATE asset_core
|
||||||
|
SET user_current = ?, emp_no = ?, current_dept = ?, user_position = ?
|
||||||
|
WHERE id = ?`,
|
||||||
|
[userName, empNo, dept, position, assetId]
|
||||||
|
);
|
||||||
|
await connection.query(
|
||||||
|
`UPDATE asset_spec SET hw_status = '운영' WHERE asset_id = ?`,
|
||||||
|
[assetId]
|
||||||
|
);
|
||||||
|
} else if (action === 'return') {
|
||||||
|
await connection.query(
|
||||||
|
`UPDATE asset_core
|
||||||
|
SET previous_user = user_current, previous_dept = current_dept,
|
||||||
|
user_current = '', emp_no = '', user_position = ''
|
||||||
|
WHERE id = ?`,
|
||||||
|
[assetId]
|
||||||
|
);
|
||||||
|
await connection.query(
|
||||||
|
`UPDATE asset_spec SET hw_status = '재고' WHERE asset_id = ?`,
|
||||||
|
[assetId]
|
||||||
|
);
|
||||||
|
} else if (action === 'move') {
|
||||||
|
await connection.query(
|
||||||
|
`UPDATE asset_core
|
||||||
|
SET previous_user = user_current, previous_dept = current_dept,
|
||||||
|
user_current = ?, emp_no = ?, current_dept = ?, user_position = ?
|
||||||
|
WHERE id = ?`,
|
||||||
|
[userName, empNo, dept, position, assetId]
|
||||||
|
);
|
||||||
|
await connection.query(
|
||||||
|
`UPDATE asset_spec SET hw_status = '운영' WHERE asset_id = ?`,
|
||||||
|
[assetId]
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
throw new Error('Invalid action type');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Insert into asset_history
|
||||||
|
await connection.query(
|
||||||
|
`INSERT INTO asset_history (asset_id, log_date, log_user, details)
|
||||||
|
VALUES (?, ?, ?, ?)`,
|
||||||
|
[assetId, date || new Date().toISOString().split('T')[0], manager || 'system', details]
|
||||||
|
);
|
||||||
|
|
||||||
|
await connection.commit();
|
||||||
|
console.log(`💾 [PC FLOW TRANSACTION] Action: ${action}, Asset ID: ${assetId}`);
|
||||||
|
res.json({ success: true });
|
||||||
|
} catch (err) {
|
||||||
|
if (connection) await connection.rollback();
|
||||||
|
handleError(res, err, 'PC FLOW TRANSACTION');
|
||||||
|
} finally {
|
||||||
|
if (connection) connection.release();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 4. Asset Delete
|
||||||
|
app.delete('/api/asset/:category/:id', async (req, res) => {
|
||||||
|
const { category, id } = req.params;
|
||||||
|
|
||||||
|
// Define mapping for which base table handles the delete
|
||||||
|
const deleteTableMap = {
|
||||||
|
pc: 'asset_core',
|
||||||
|
server: 'asset_core',
|
||||||
|
storage: 'asset_core',
|
||||||
|
network: 'asset_core',
|
||||||
|
equipment: 'asset_core',
|
||||||
|
officeSupplies: 'asset_core',
|
||||||
|
survey: 'asset_core',
|
||||||
|
vip: 'asset_core',
|
||||||
|
pcParts: 'asset_core',
|
||||||
|
swInternal: 'asset_software_perpetual',
|
||||||
|
swExternal: 'asset_software_subscription',
|
||||||
|
swUsers: 'asset_software_assignment',
|
||||||
|
users: 'system_users'
|
||||||
|
};
|
||||||
|
|
||||||
|
const table = deleteTableMap[category];
|
||||||
|
|
||||||
|
if (!table) return res.status(400).json({ error: 'Invalid category for deletion' });
|
||||||
|
|
||||||
|
try {
|
||||||
|
const connection = await pool.getConnection();
|
||||||
|
// For asset_core, ON DELETE CASCADE will handle spec, location, remote, volume
|
||||||
|
await connection.query(`DELETE FROM ${table} WHERE id = ?`, [id]);
|
||||||
|
connection.release();
|
||||||
|
console.log(`🗑️ [ASSET DELETE] Category: ${category}, ID: ${id}`);
|
||||||
|
res.json({ success: true });
|
||||||
|
} catch (err) {
|
||||||
|
handleError(res, err, 'ASSET DELETE');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 5. Generate Next Asset Code
|
||||||
|
app.get('/api/generate-asset-code', async (req, res) => {
|
||||||
|
const { prefix, purchaseDate } = req.query;
|
||||||
|
if (!prefix) return res.status(400).json({ error: 'Prefix is required' });
|
||||||
|
try {
|
||||||
|
const connection = await pool.getConnection();
|
||||||
|
const datePart = purchaseDate ? purchaseDate.toString().replace(/-/g, '').substring(0, 6) : '';
|
||||||
|
const searchPattern = datePart ? `${prefix}-${datePart}-%` : `${prefix}-%`;
|
||||||
|
let maxNum = 0;
|
||||||
|
for (const table of ASSET_TABLES) {
|
||||||
|
try {
|
||||||
|
const [rows] = await connection.query(`SELECT asset_code FROM ${table} WHERE asset_code LIKE ?`, [searchPattern]);
|
||||||
|
rows.forEach(row => {
|
||||||
|
const parts = row.asset_code.split('-');
|
||||||
|
const num = parseInt(parts[parts.length - 1]);
|
||||||
|
if (!isNaN(num) && num > maxNum) maxNum = num;
|
||||||
|
});
|
||||||
|
} catch (err) {}
|
||||||
|
}
|
||||||
|
const nextNum = maxNum + 1;
|
||||||
|
const nextCode = datePart ? `${prefix}-${datePart}-${String(nextNum).padStart(4, '0')}` : `${prefix}-${String(nextNum).padStart(4, '0')}`;
|
||||||
|
connection.release();
|
||||||
|
res.json({ nextCode });
|
||||||
} catch (err) { handleError(res, err, 'GENERATE CODE'); }
|
} catch (err) { handleError(res, err, 'GENERATE CODE'); }
|
||||||
});
|
});
|
||||||
|
|
||||||
app.listen(3000, '0.0.0.0', () => {
|
// 6. Map Config API
|
||||||
console.log('📡 ITAM BACKEND SERVER RUNNING ON PORT 3000 (Multi-Table Optimized)');
|
app.get('/api/maps', (req, res) => {
|
||||||
|
try {
|
||||||
|
if (!fs.existsSync('map_config.json')) return res.json({});
|
||||||
|
const data = fs.readFileSync('map_config.json', 'utf8');
|
||||||
|
res.json(JSON.parse(data || '{}'));
|
||||||
|
} catch (err) { handleError(res, err, 'GET MAPS'); }
|
||||||
|
});
|
||||||
|
|
||||||
|
// 6.5. Get Hardware Components Master List
|
||||||
|
app.get('/api/hardware-components', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const [rows] = await pool.query('SELECT * FROM hardware_components_master ORDER BY category, component_name');
|
||||||
|
res.json(rows);
|
||||||
|
} catch (err) {
|
||||||
|
handleError(res, err, 'GET HARDWARE COMPONENTS');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 6.6. Save Hardware Component (Add or Update)
|
||||||
|
app.post('/api/hardware-components/save', async (req, res) => {
|
||||||
|
const { id, category, component_name, score_tier, deduction } = req.body;
|
||||||
|
let connection;
|
||||||
|
try {
|
||||||
|
connection = await pool.getConnection();
|
||||||
|
if (id) {
|
||||||
|
await connection.query(
|
||||||
|
'UPDATE hardware_components_master SET category = ?, component_name = ?, score_tier = ?, deduction = ? WHERE id = ?',
|
||||||
|
[category, component_name, score_tier, deduction, id]
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
await connection.query(
|
||||||
|
'INSERT INTO hardware_components_master (category, component_name, score_tier, deduction) VALUES (?, ?, ?, ?)',
|
||||||
|
[category, component_name, score_tier, deduction]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
res.json({ success: true });
|
||||||
|
} catch (err) {
|
||||||
|
handleError(res, err, 'SAVE HARDWARE COMPONENT');
|
||||||
|
} finally {
|
||||||
|
if (connection) connection.release();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 6.7. Delete Hardware Component
|
||||||
|
app.delete('/api/hardware-components/:id', async (req, res) => {
|
||||||
|
const { id } = req.params;
|
||||||
|
let connection;
|
||||||
|
try {
|
||||||
|
connection = await pool.getConnection();
|
||||||
|
await connection.query('DELETE FROM hardware_components_master WHERE id = ?', [id]);
|
||||||
|
res.json({ success: true });
|
||||||
|
} catch (err) {
|
||||||
|
handleError(res, err, 'DELETE HARDWARE COMPONENT');
|
||||||
|
} finally {
|
||||||
|
if (connection) connection.release();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 6.7.1. Get Job Spec Standards
|
||||||
|
app.get('/api/job-specs', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const [rows] = await pool.query('SELECT * FROM job_spec_standards ORDER BY job_name');
|
||||||
|
res.json(rows);
|
||||||
|
} catch (err) {
|
||||||
|
handleError(res, err, 'GET JOB SPECS');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 6.7.2. Save Job Spec Standard (Add or Update)
|
||||||
|
app.post('/api/job-specs/save', async (req, res) => {
|
||||||
|
const { id, job_name, cpu_standard, ram_standard, gpu_standard, min_score, remarks } = req.body;
|
||||||
|
let connection;
|
||||||
|
try {
|
||||||
|
connection = await pool.getConnection();
|
||||||
|
if (id) {
|
||||||
|
await connection.query(
|
||||||
|
'UPDATE job_spec_standards SET job_name = ?, cpu_standard = ?, ram_standard = ?, gpu_standard = ?, min_score = ?, remarks = ? WHERE id = ?',
|
||||||
|
[job_name, cpu_standard, ram_standard, gpu_standard, min_score, remarks, id]
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
await connection.query(
|
||||||
|
'INSERT INTO job_spec_standards (job_name, cpu_standard, ram_standard, gpu_standard, min_score, remarks) VALUES (?, ?, ?, ?, ?, ?)',
|
||||||
|
[job_name, cpu_standard, ram_standard, gpu_standard, min_score, remarks]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
res.json({ success: true });
|
||||||
|
} catch (err) {
|
||||||
|
handleError(res, err, 'SAVE JOB SPEC');
|
||||||
|
} finally {
|
||||||
|
if (connection) connection.release();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 6.7.3. Delete Job Spec Standard
|
||||||
|
app.delete('/api/job-specs/:id', async (req, res) => {
|
||||||
|
const { id } = req.params;
|
||||||
|
let connection;
|
||||||
|
try {
|
||||||
|
connection = await pool.getConnection();
|
||||||
|
await connection.query('DELETE FROM job_spec_standards WHERE id = ?', [id]);
|
||||||
|
res.json({ success: true });
|
||||||
|
} catch (err) {
|
||||||
|
handleError(res, err, 'DELETE JOB SPEC');
|
||||||
|
} finally {
|
||||||
|
if (connection) connection.release();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 6.8. Get System Users List
|
||||||
|
app.get('/api/system-users', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const [rows] = await pool.query('SELECT * FROM system_users ORDER BY user_name');
|
||||||
|
res.json(rows);
|
||||||
|
} catch (err) {
|
||||||
|
handleError(res, err, 'GET SYSTEM USERS');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 6.9. Save System User (Add or Update)
|
||||||
|
app.post('/api/system-users/save', async (req, res) => {
|
||||||
|
const { id, emp_no, user_name, dept_name, position, status } = req.body;
|
||||||
|
let connection;
|
||||||
|
try {
|
||||||
|
connection = await pool.getConnection();
|
||||||
|
if (id) {
|
||||||
|
await connection.query(
|
||||||
|
'UPDATE system_users SET emp_no = ?, user_name = ?, dept_name = ?, position = ?, status = ? WHERE id = ?',
|
||||||
|
[emp_no, user_name, dept_name, position, status, id]
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
const newId = 'USER-' + Math.random().toString(36).substring(2, 9).toUpperCase();
|
||||||
|
await connection.query(
|
||||||
|
'INSERT INTO system_users (id, emp_no, user_name, dept_name, position, status) VALUES (?, ?, ?, ?, ?, ?)',
|
||||||
|
[newId, emp_no, user_name, dept_name, position, status]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
res.json({ success: true });
|
||||||
|
} catch (err) {
|
||||||
|
handleError(res, err, 'SAVE SYSTEM USER');
|
||||||
|
} finally {
|
||||||
|
if (connection) connection.release();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 6.10. Delete System User
|
||||||
|
app.delete('/api/system-users/:id', async (req, res) => {
|
||||||
|
const { id } = req.params;
|
||||||
|
let connection;
|
||||||
|
try {
|
||||||
|
connection = await pool.getConnection();
|
||||||
|
await connection.query('DELETE FROM system_users WHERE id = ?', [id]);
|
||||||
|
res.json({ success: true });
|
||||||
|
} catch (err) {
|
||||||
|
handleError(res, err, 'DELETE SYSTEM USER');
|
||||||
|
} finally {
|
||||||
|
if (connection) connection.release();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
app.post('/api/maps/save', async (req, res) => {
|
||||||
|
let connection;
|
||||||
|
try {
|
||||||
|
const { path, boxes } = req.body;
|
||||||
|
if (!path) return res.status(400).json({ error: 'Path is required' });
|
||||||
|
|
||||||
|
// 1. Get old config to track movements
|
||||||
|
let oldConfig = {};
|
||||||
|
if (fs.existsSync('map_config.json')) {
|
||||||
|
oldConfig = JSON.parse(fs.readFileSync('map_config.json', 'utf8') || '{}');
|
||||||
|
}
|
||||||
|
const oldBoxes = oldConfig[path] || [];
|
||||||
|
|
||||||
|
// 2. Save new config to file
|
||||||
|
oldConfig[path] = boxes;
|
||||||
|
fs.writeFileSync('map_config.json', JSON.stringify(oldConfig, null, 2));
|
||||||
|
|
||||||
|
// 3. Sync Database Assets (asset_location table)
|
||||||
|
connection = await pool.getConnection();
|
||||||
|
for (const box of boxes) {
|
||||||
|
if (box.asset_id) {
|
||||||
|
console.log(`Syncing asset ${box.asset_id} to new position: [${box.x}, ${box.y}]`);
|
||||||
|
await connection.query(
|
||||||
|
'UPDATE asset_location SET loc_x = ?, loc_y = ? WHERE asset_id = ? AND is_active = 1',
|
||||||
|
[box.x, box.y, box.asset_id]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
res.json({ success: true, message: 'Map and Database synced successfully' });
|
||||||
|
} catch (err) {
|
||||||
|
handleError(res, err, 'SAVE MAPS SYNC');
|
||||||
|
} finally {
|
||||||
|
if (connection) connection.release();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 7. File Upload API (Base64)
|
||||||
|
app.post('/api/upload', (req, res) => {
|
||||||
|
try {
|
||||||
|
const { fileName, fileData } = req.body;
|
||||||
|
if (!fileName || !fileData) return res.status(400).json({ error: 'FileName and FileData are required' });
|
||||||
|
|
||||||
|
// base64 데이터에서 실제 바이너리 추출
|
||||||
|
const base64Data = fileData.replace(/^data:.*;base64,/, "");
|
||||||
|
const buffer = Buffer.from(base64Data, 'base64');
|
||||||
|
|
||||||
|
// 고유한 파일명 생성 (타임스탬프 결합)
|
||||||
|
const timestamp = Date.now();
|
||||||
|
const safeFileName = `${timestamp}_${fileName.replace(/[^a-zA-Z0-9._-]/g, '_')}`;
|
||||||
|
const filePath = `uploads/${safeFileName}`;
|
||||||
|
|
||||||
|
fs.writeFileSync(filePath, buffer);
|
||||||
|
|
||||||
|
console.log(`파일 업로드 성공: ${filePath}`);
|
||||||
|
res.json({ success: true, filePath: `/${filePath}`, fileName: safeFileName });
|
||||||
|
} catch (err) {
|
||||||
|
handleError(res, err, 'FILE UPLOAD');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
app.listen(3000, '0.0.0.0', () => {
|
||||||
|
console.log('📡 ITAM BACKEND SERVER RUNNING ON PORT 3000 (V3 Normalized)');
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -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,118 @@
|
|||||||
|
import { createIcons, X } from 'lucide';
|
||||||
|
import { setEditLock } from './ModalUtils';
|
||||||
|
import './modal.css';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 모든 모달의 공통 기능 (닫기, ESC 처리, 배경 클릭 등)을 관리하는 베이스 모듈입니다.
|
* 모든 모달의 공통 기능을 관리하는 베이스 추상 클래스입니다.
|
||||||
|
*/
|
||||||
|
export abstract class BaseModal {
|
||||||
|
protected idPrefix: string;
|
||||||
|
protected title: string;
|
||||||
|
protected currentAsset: any | null = null;
|
||||||
|
protected isEditMode: boolean = false;
|
||||||
|
protected currentMode: 'view' | 'edit' | 'add' = 'view';
|
||||||
|
protected modalEl: HTMLElement | null = null;
|
||||||
|
protected formEl: HTMLFormElement | null = null;
|
||||||
|
|
||||||
|
constructor(idPrefix: string, title: string) {
|
||||||
|
this.idPrefix = idPrefix;
|
||||||
|
this.title = title;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 모달 초기화: HTML 삽입 및 공통 이벤트 바인딩
|
||||||
|
*/
|
||||||
|
public init(onSave: () => void, closeModalsFn: () => void) {
|
||||||
|
// 1. 프레임 HTML 삽입 (자식 클래스에서 정의한 HTML 사용)
|
||||||
|
if (!document.getElementById(`${this.idPrefix}-asset-modal`)) {
|
||||||
|
document.body.insertAdjacentHTML('beforeend', this.renderFrameHTML());
|
||||||
|
}
|
||||||
|
|
||||||
|
this.modalEl = document.getElementById(`${this.idPrefix}-asset-modal`);
|
||||||
|
this.formEl = document.getElementById(`${this.idPrefix}-asset-form`) as HTMLFormElement;
|
||||||
|
|
||||||
|
// 2. 공통 버튼 이벤트 바인딩 (닫기, 취소 등)
|
||||||
|
const btnCloseHeader = document.getElementById(`btn-close-${this.idPrefix}-modal`);
|
||||||
|
const btnCancelFooter = document.getElementById(`btn-cancel-${this.idPrefix}-modal`);
|
||||||
|
|
||||||
|
const closeAction = () => {
|
||||||
|
this.close();
|
||||||
|
closeModalsFn(); // 전역 모달 상태 해제 콜백
|
||||||
|
};
|
||||||
|
|
||||||
|
btnCloseHeader?.addEventListener('click', closeAction);
|
||||||
|
btnCancelFooter?.addEventListener('click', closeAction);
|
||||||
|
|
||||||
|
// 3. 자식 클래스 전용 초기화 로직 실행
|
||||||
|
this.initChildLogic(onSave, closeModalsFn);
|
||||||
|
|
||||||
|
// 4. 아이콘 초기화
|
||||||
|
createIcons({ icons: { X } });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 모달 열기: 데이터 바인딩 및 모드 설정
|
||||||
|
*/
|
||||||
|
public open(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
|
||||||
|
this.currentAsset = asset;
|
||||||
|
this.currentMode = mode;
|
||||||
|
this.isEditMode = (mode === 'add' || mode === 'edit');
|
||||||
|
|
||||||
|
// 폼 초기화 추가
|
||||||
|
if (this.formEl) this.formEl.reset();
|
||||||
|
|
||||||
|
// fillFormData를 먼저 호출하여 동적 요소들을 생성한 후 잠금 처리
|
||||||
|
this.fillFormData(asset);
|
||||||
|
this.setEditLockMode(mode);
|
||||||
|
|
||||||
|
if (this.modalEl) {
|
||||||
|
this.modalEl.classList.remove('hidden');
|
||||||
|
const content = this.modalEl.querySelector('.modal-content');
|
||||||
|
if (content) {
|
||||||
|
if (mode === 'view') content.classList.add('is-view-mode');
|
||||||
|
else content.classList.remove('is-view-mode');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.onAfterOpen(asset, mode);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 모달 닫기: 상태 초기화
|
||||||
|
*/
|
||||||
|
public close() {
|
||||||
|
if (this.modalEl) {
|
||||||
|
this.modalEl.classList.add('hidden');
|
||||||
|
}
|
||||||
|
this.isEditMode = false;
|
||||||
|
this.currentAsset = null;
|
||||||
|
this.onAfterClose();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 조회/수정 모드에 따른 UI 잠금 및 버튼 제어
|
||||||
|
*/
|
||||||
|
protected setEditLockMode(mode: 'view' | 'edit' | 'add') {
|
||||||
|
setEditLock(`${this.idPrefix}-asset-form`, mode, {
|
||||||
|
saveBtnId: `btn-save-${this.idPrefix}-asset`,
|
||||||
|
revertBtnId: `btn-revert-${this.idPrefix}-edit`,
|
||||||
|
addLogBtnId: `btn-add-${this.idPrefix}-log`
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- 추상 메서드: 자식 클래스에서 구현해야 함 ---
|
||||||
|
protected abstract renderFrameHTML(): string;
|
||||||
|
protected abstract initChildLogic(onSave: () => void, closeModals: () => void): void;
|
||||||
|
protected abstract fillFormData(asset: any): void;
|
||||||
|
protected abstract onAfterOpen(asset: any, mode: string): void;
|
||||||
|
|
||||||
|
// --- 훅(Hook) 메서드: 필요 시 오버라이드 ---
|
||||||
|
protected onAfterClose(): void {}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* --- 레거시 호환성을 위한 함수형 익스포트 ---
|
||||||
|
* 기존 코드들이 참조하고 있는 함수들을 유지합니다.
|
||||||
*/
|
*/
|
||||||
export function closeModals() {
|
export function closeModals() {
|
||||||
const modals = document.querySelectorAll('.modal-overlay');
|
const modals = document.querySelectorAll('.modal-overlay');
|
||||||
@@ -7,26 +120,21 @@ export function closeModals() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function initBaseModal() {
|
export function initBaseModal() {
|
||||||
// ESC 키로 닫기
|
// ESC 키로 모든 모달 닫기 (위치보기 팝업이 있으면 그것부터 닫음)
|
||||||
window.addEventListener('keydown', (e) => {
|
window.addEventListener('keydown', (e) => {
|
||||||
if (e.key === 'Escape') closeModals();
|
if (e.key === 'Escape') {
|
||||||
});
|
const picker = document.querySelector('.image-picker-overlay');
|
||||||
|
if (picker) {
|
||||||
// 배경(Overlay) 클릭 시 닫기
|
picker.remove();
|
||||||
document.addEventListener('click', (e) => {
|
} else {
|
||||||
const target = e.target as HTMLElement;
|
closeModals();
|
||||||
if (target.classList.contains('modal-overlay')) {
|
}
|
||||||
closeModals();
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
return { closeAllModals: closeModals };
|
return { closeAllModals: closeModals };
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* 특정 모달을 엽니다.
|
|
||||||
* @param modalId 모달 엘리먼트의 ID
|
|
||||||
*/
|
|
||||||
export function openModal(modalId: string) {
|
export function openModal(modalId: string) {
|
||||||
const modal = document.getElementById(modalId);
|
const modal = document.getElementById(modalId);
|
||||||
if (modal) {
|
if (modal) {
|
||||||
|
|||||||
@@ -4,14 +4,14 @@ import { createIcons, X } from 'lucide';
|
|||||||
|
|
||||||
const DASHBOARD_DETAIL_MODAL_HTML = `
|
const DASHBOARD_DETAIL_MODAL_HTML = `
|
||||||
<div id="dashboard-detail-modal" class="modal-overlay hidden">
|
<div id="dashboard-detail-modal" class="modal-overlay hidden">
|
||||||
<div class="modal-content wide" style="max-width: 1000px;">
|
<div class="modal-content wide">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h2 id="dashboard-detail-modal-title">상세 목록</h2>
|
<h2 id="dashboard-detail-modal-title" class="modal-title">상세 목록</h2>
|
||||||
<button id="btn-close-dashboard-detail-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
|
<button id="btn-close-dashboard-detail-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div class="table-container">
|
<div class="table-container">
|
||||||
<table style="width:100%;">
|
<table>
|
||||||
<thead></thead>
|
<thead></thead>
|
||||||
<tbody id="dashboard-detail-tbody"></tbody>
|
<tbody id="dashboard-detail-tbody"></tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|||||||
@@ -1,121 +1,212 @@
|
|||||||
import { state, saveAsset, deleteAsset } from '../../core/state';
|
import { state, saveAsset, deleteAsset } from '../../core/state';
|
||||||
import { closeModals, openModal } from './BaseModal';
|
import { BaseModal } from './BaseModal';
|
||||||
import { CORP_LIST } from './SharedData';
|
import { CORP_LIST } from './SharedData';
|
||||||
import { generateOptionsHTML, setEditLock } from './ModalUtils';
|
import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
|
||||||
import { createIcons, X, Save, Database, CalendarClock, Edit2 } from 'lucide';
|
import { createIcons, X, Save, History, Plus } from 'lucide';
|
||||||
import { formatExcelDate } from '../../core/excelHandler';
|
import { formatExcelDate } from '../../core/excelHandler';
|
||||||
import { UI_TEXT } from '../../core/schema';
|
import { UI_TEXT } from '../../core/schema';
|
||||||
import { API_BASE_URL } from '../../core/utils';
|
|
||||||
|
|
||||||
let currentItem: any = null;
|
class DomainAssetModal extends BaseModal {
|
||||||
|
constructor() {
|
||||||
const DOMAIN_MODAL_HTML = `
|
super('domain', '도메인 정보');
|
||||||
... (rest of DOMAIN_MODAL_HTML remains same) ...
|
|
||||||
`;
|
|
||||||
|
|
||||||
export function initDomainModal() {
|
|
||||||
if (!document.getElementById('domain-asset-modal')) {
|
|
||||||
document.body.insertAdjacentHTML('beforeend', DOMAIN_MODAL_HTML);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const modal = document.getElementById('domain-asset-modal')!;
|
protected renderFrameHTML(): string {
|
||||||
document.getElementById('btn-close-domain-modal')?.addEventListener('click', () => closeModals());
|
return `
|
||||||
document.getElementById('btn-cancel-domain')?.addEventListener('click', () => closeModals());
|
<div id="domain-asset-modal" class="modal-overlay hidden">
|
||||||
|
<div class="modal-content wide">
|
||||||
|
<div class="modal-header">
|
||||||
|
<div class="header-left">
|
||||||
|
<h2 id="domain-modal-title" class="modal-title">${this.title}</h2>
|
||||||
|
<div id="domain-header-identity" class="header-identity"></div>
|
||||||
|
</div>
|
||||||
|
<button id="btn-close-domain-modal" class="btn-icon" aria-label="닫기">×</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="modal-body-split">
|
||||||
|
<div class="modal-form-area">
|
||||||
|
<form id="domain-asset-form" class="grid-form">
|
||||||
|
<input type="hidden" id="domain-id" name="id" />
|
||||||
|
|
||||||
const saveBtn = document.getElementById('btn-save-domain');
|
<div class="form-section-title">기본 정보</div>
|
||||||
const revertBtn = document.getElementById('btn-revert-domain');
|
<div class="form-group">
|
||||||
const deleteBtn = document.getElementById('btn-delete-domain');
|
<label>구분</label>
|
||||||
const headerEditBtn = document.getElementById('btn-edit-domain-header');
|
<select id="domain-type" name="type">
|
||||||
|
<option value="호스팅">호스팅</option>
|
||||||
|
<option value="도메인">도메인</option>
|
||||||
|
<option value="기타">기타</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>관리법인</label>
|
||||||
|
<select id="domain-corp" name="corp">${generateOptionsHTML(CORP_LIST)}</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group full-width">
|
||||||
|
<label>서비스명</label>
|
||||||
|
<input type="text" id="domain-service-name" name="service_name" required />
|
||||||
|
</div>
|
||||||
|
<div class="form-group full-width">
|
||||||
|
<label>관리도메인</label>
|
||||||
|
<input type="text" id="domain-name" name="domain_name" required />
|
||||||
|
</div>
|
||||||
|
|
||||||
saveBtn?.addEventListener('click', () => {
|
<div class="form-section-title">계약 및 비용</div>
|
||||||
if (!currentItem) return;
|
<div class="form-group">
|
||||||
if (saveBtn.textContent?.includes('수정')) {
|
<label>계약시작일</label>
|
||||||
setEditLock('domain-asset-form', 'edit', { saveBtnId: 'btn-save-domain', revertBtnId: 'btn-revert-domain' });
|
<input type="date" id="domain-start-date" name="start_date" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>만료예정일</label>
|
||||||
|
<input type="date" id="domain-expiry-date" name="expiry_date" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>비용 (연간/월간)</label>
|
||||||
|
<input type="text" id="domain-price" name="price" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section-title">담당자 및 비고</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>정담당자</label>
|
||||||
|
<input type="text" id="domain-manager-main" name="manager_main" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>부담당자</label>
|
||||||
|
<input type="text" id="domain-manager-sub" name="manager_sub" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group full-width">
|
||||||
|
<label>비고</label>
|
||||||
|
<textarea id="domain-remarks" name="remarks" rows="3"></textarea>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-history-area">
|
||||||
|
<div class="history-header">
|
||||||
|
<h3><i data-lucide="history"></i> 변경 이력</h3>
|
||||||
|
<button type="button" id="btn-add-domain-log" class="btn btn-outline btn-sm">
|
||||||
|
이력 추가 <i data-lucide="plus"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div id="domain-history-list" class="history-timeline"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button id="btn-delete-domain-asset" class="btn btn-outline btn-danger">삭제</button>
|
||||||
|
<div class="footer-actions">
|
||||||
|
<button id="btn-revert-domain-edit" class="btn btn-outline hidden">수정 취소</button>
|
||||||
|
<button id="btn-cancel-domain-modal" class="btn btn-outline">닫기</button>
|
||||||
|
<button id="btn-save-domain-asset" class="btn btn-primary">수정</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
protected initChildLogic(onSave: () => void, closeModals: () => void): void {
|
||||||
|
const saveBtn = document.getElementById('btn-save-domain-asset')!;
|
||||||
|
const revertBtn = document.getElementById('btn-revert-domain-edit')!;
|
||||||
|
const deleteBtn = document.getElementById('btn-delete-domain-asset')!;
|
||||||
|
|
||||||
|
saveBtn.addEventListener('click', async () => {
|
||||||
|
if (!this.currentAsset) return;
|
||||||
|
if (!this.isEditMode) {
|
||||||
|
this.setEditLockMode('edit');
|
||||||
|
this.isEditMode = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const formData = new FormData(this.formEl!);
|
||||||
|
const updated = { ...this.currentAsset };
|
||||||
|
formData.forEach((value, key) => { updated[key] = value; });
|
||||||
|
|
||||||
|
if (!updated.service_name || !updated.domain_name) {
|
||||||
|
alert('서비스명과 관리도메인은 필수 입력 사항입니다.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (await saveAsset('domain', updated)) {
|
||||||
|
alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
|
||||||
|
onSave(); this.close(); closeModals();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
revertBtn.addEventListener('click', () => {
|
||||||
|
this.setEditLockMode('view');
|
||||||
|
if (this.currentAsset) this.fillFormData(this.currentAsset);
|
||||||
|
});
|
||||||
|
|
||||||
|
deleteBtn.addEventListener('click', async () => {
|
||||||
|
if (!this.currentAsset || !confirm(UI_TEXT.MESSAGES.CONFIRM_DELETE)) return;
|
||||||
|
if (await deleteAsset('domain', this.currentAsset.id)) {
|
||||||
|
alert('성공적으로 삭제되었습니다.');
|
||||||
|
onSave(); this.close(); closeModals();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
createIcons({ icons: { History, Plus, Save, X } });
|
||||||
|
}
|
||||||
|
|
||||||
|
protected fillFormData(asset: any): void {
|
||||||
|
setFieldValue('domain-id', asset.id);
|
||||||
|
setFieldValue('domain-type', asset.type || '호스팅');
|
||||||
|
setFieldValue('domain-corp', asset.corp || '');
|
||||||
|
setFieldValue('domain-service-name', asset.service_name || '');
|
||||||
|
setFieldValue('domain-name', asset.domain_name || '');
|
||||||
|
setFieldValue('domain-start-date', formatExcelDate(asset.start_date));
|
||||||
|
setFieldValue('domain-expiry-date', formatExcelDate(asset.expiry_date));
|
||||||
|
setFieldValue('domain-price', asset.price || '');
|
||||||
|
setFieldValue('domain-manager-main', asset.manager_main || '');
|
||||||
|
setFieldValue('domain-manager-sub', asset.manager_sub || '');
|
||||||
|
setFieldValue('domain-remarks', asset.remarks || '');
|
||||||
|
|
||||||
|
this.renderHistory(asset.id);
|
||||||
|
this.updateHeaderIdentity(asset);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected onAfterOpen(asset: any, mode: string): void {
|
||||||
|
const titleEl = document.getElementById('domain-modal-title');
|
||||||
|
if (titleEl) titleEl.textContent = (mode === 'add') ? '신규 도메인 등록' : '도메인 정보 상세';
|
||||||
|
|
||||||
|
const deleteBtn = document.getElementById('btn-delete-domain-asset');
|
||||||
|
if (deleteBtn) deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
|
||||||
|
|
||||||
|
this.updateHeaderIdentity(asset);
|
||||||
|
}
|
||||||
|
|
||||||
|
private updateHeaderIdentity(asset: any) {
|
||||||
|
const container = document.getElementById('domain-header-identity');
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
if (this.currentMode === 'add') {
|
||||||
|
container.innerHTML = '<span class="badge badge-primary">신규 등록</span>';
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
saveDomain();
|
|
||||||
});
|
|
||||||
|
|
||||||
headerEditBtn?.addEventListener('click', () => {
|
const type = getFieldValue('domain-type') || asset.type || '';
|
||||||
setEditLock('domain-asset-form', 'edit', { saveBtnId: 'btn-save-domain', revertBtnId: 'btn-revert-domain' });
|
const serviceName = getFieldValue('domain-service-name') || asset.service_name || '';
|
||||||
});
|
const domainName = getFieldValue('domain-name') || asset.domain_name || '';
|
||||||
|
|
||||||
revertBtn?.addEventListener('click', () => {
|
container.innerHTML = `
|
||||||
setEditLock('domain-asset-form', 'view', { saveBtnId: 'btn-save-domain', revertBtnId: 'btn-revert-domain' });
|
<span class="asset-code-title">${serviceName}</span>
|
||||||
if (currentItem) openDomainModal(currentItem);
|
<span class="service-type-badge">${type}</span>
|
||||||
});
|
<span class="asset-type-label">${domainName}</span>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
deleteBtn?.addEventListener('click', async () => {
|
private renderHistory(assetId: string) {
|
||||||
if (currentItem && confirm(UI_TEXT.MESSAGES.CONFIRM_DELETE)) {
|
const container = document.getElementById('domain-history-list');
|
||||||
const success = await deleteAsset('domain', currentItem.id);
|
if (!container) return;
|
||||||
if (success) {
|
|
||||||
alert('성공적으로 삭제되었습니다.');
|
const logs = (state.masterData.logs || []).filter(l => l.asset_id === assetId);
|
||||||
closeModals();
|
if (logs.length === 0) {
|
||||||
window.dispatchEvent(new CustomEvent('refresh-view'));
|
container.innerHTML = '<div style="color:var(--mute); padding:1rem; text-align:center;">이력이 없습니다.</div>';
|
||||||
}
|
} else {
|
||||||
|
container.innerHTML = logs.map(l => `<div class="history-item"><div class="history-date">${l.log_date || ''}</div><div class="history-user">${l.log_user || '시스템'}</div><div class="history-details">${l.details}</div></div>`).join('');
|
||||||
}
|
}
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function openDomainModal(item: any = null) {
|
|
||||||
currentItem = item;
|
|
||||||
const isEdit = !!item;
|
|
||||||
const mode = isEdit ? 'view' : 'add';
|
|
||||||
|
|
||||||
const titleEl = document.getElementById('domain-modal-title');
|
|
||||||
if (titleEl) titleEl.textContent = isEdit ? '도메인 정보 상세' : '신규 도메인 등록';
|
|
||||||
|
|
||||||
setEditLock('domain-asset-form', mode, { saveBtnId: 'btn-save-domain', revertBtnId: 'btn-revert-domain' });
|
|
||||||
|
|
||||||
const setVal = (id: string, val: any) => {
|
|
||||||
const el = document.getElementById(id) as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
|
|
||||||
if (el) el.value = val || '';
|
|
||||||
};
|
|
||||||
|
|
||||||
setVal('domain-type', item?.type || '호스팅');
|
|
||||||
setVal('domain-corp', item?.corp || '');
|
|
||||||
setVal('domain-service-name', item?.service_name || '');
|
|
||||||
setVal('domain-name', item?.domain_name || '');
|
|
||||||
setVal('domain-start-date', formatExcelDate(item?.start_date));
|
|
||||||
setVal('domain-expiry-date', formatExcelDate(item?.expiry_date));
|
|
||||||
setVal('domain-price', item?.price || '');
|
|
||||||
setVal('domain-manager-main', item?.manager_main || '');
|
|
||||||
setVal('domain-manager-sub', item?.manager_sub || '');
|
|
||||||
setVal('domain-remarks', item?.remarks || '');
|
|
||||||
|
|
||||||
const deleteBtn = document.getElementById('btn-delete-domain');
|
|
||||||
if (deleteBtn) deleteBtn.style.display = isEdit ? 'block' : 'none';
|
|
||||||
|
|
||||||
openModal('domain-asset-modal');
|
|
||||||
createIcons({ icons: { X, Save, Database, CalendarClock, Edit2 } });
|
|
||||||
}
|
|
||||||
|
|
||||||
async function saveDomain() {
|
|
||||||
const getVal = (id: string) => (document.getElementById(id) as HTMLInputElement)?.value || '';
|
|
||||||
|
|
||||||
const newDomain = {
|
|
||||||
id: currentItem ? currentItem.id : `DOM-${Date.now()}`,
|
|
||||||
type: getVal('domain-type'),
|
|
||||||
corp: getVal('domain-corp'),
|
|
||||||
service_name: getVal('domain-service-name'),
|
|
||||||
domain_name: getVal('domain-name'),
|
|
||||||
start_date: getVal('domain-start-date'),
|
|
||||||
expiry_date: getVal('domain-expiry-date'),
|
|
||||||
price: getVal('domain-price'),
|
|
||||||
manager_main: getVal('domain-manager-main'),
|
|
||||||
manager_sub: getVal('domain-manager-sub'),
|
|
||||||
remarks: getVal('domain-remarks')
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!newDomain.service_name || !newDomain.domain_name) {
|
|
||||||
alert('서비스명과 관리도메인은 필수 입력 사항입니다.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const success = await saveAsset('domain', newDomain);
|
|
||||||
if (success) {
|
|
||||||
alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
|
|
||||||
closeModals();
|
|
||||||
window.dispatchEvent(new CustomEvent('refresh-view'));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const domainModal = new DomainAssetModal();
|
||||||
|
export function initDomainModal(onSave: () => void, closeModals: () => void) { domainModal.init(onSave, closeModals); }
|
||||||
|
export function openDomainModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') { domainModal.open(asset, mode); }
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
295
src/components/Modal/JobSpecModal.ts
Normal file
295
src/components/Modal/JobSpecModal.ts
Normal file
@@ -0,0 +1,295 @@
|
|||||||
|
import { state, saveJobSpec, deleteJobSpec } from '../../core/state';
|
||||||
|
import { BaseModal } from './BaseModal';
|
||||||
|
import { setFieldValue } from './ModalUtils';
|
||||||
|
import { UI_TEXT } from '../../core/schema';
|
||||||
|
import { calculatePcScoreDeductive } from '../../core/utils';
|
||||||
|
|
||||||
|
class JobSpecModal extends BaseModal {
|
||||||
|
constructor() {
|
||||||
|
super('job-spec', '직무별 기준 사양');
|
||||||
|
}
|
||||||
|
|
||||||
|
protected renderFrameHTML(): string {
|
||||||
|
return `
|
||||||
|
<div id="job-spec-asset-modal" class="modal-overlay hidden">
|
||||||
|
<div class="modal-content narrow">
|
||||||
|
<div class="modal-header">
|
||||||
|
<div class="header-left">
|
||||||
|
<h2 id="job-spec-modal-title" class="modal-title">\${this.title}</h2>
|
||||||
|
<div id="job-spec-header-identity" class="header-identity"></div>
|
||||||
|
</div>
|
||||||
|
<button id="btn-close-job-spec-modal" class="btn-icon" aria-label="닫기">×</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form id="job-spec-asset-form" class="grid-form vertical-form">
|
||||||
|
<input type="hidden" id="job-spec-id" name="id" />
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>직무명</label>
|
||||||
|
<input type="text" id="job-spec-job-name" name="job_name" placeholder="예: BIM 모델러, 개발자, 엔지니어" required />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group relative">
|
||||||
|
<label>권장 CPU 사양</label>
|
||||||
|
<input type="text" id="job-spec-cpu-standard" name="cpu_standard" placeholder="CPU 검색..." required autocomplete="off" />
|
||||||
|
<div id="job-spec-cpu-autocomplete" class="autocomplete-list hidden"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group relative">
|
||||||
|
<label>권장 RAM 사양</label>
|
||||||
|
<input type="text" id="job-spec-ram-standard" name="ram_standard" placeholder="RAM 검색..." required autocomplete="off" />
|
||||||
|
<div id="job-spec-ram-autocomplete" class="autocomplete-list hidden"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group relative">
|
||||||
|
<label>권장 GPU 사양</label>
|
||||||
|
<input type="text" id="job-spec-gpu-standard" name="gpu_standard" placeholder="GPU 검색..." required autocomplete="off" />
|
||||||
|
<div id="job-spec-gpu-autocomplete" class="autocomplete-list hidden"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>성능 기준 점수 (이상, 자동 계산됨)</label>
|
||||||
|
<input type="number" id="job-spec-min-score" name="min_score" placeholder="자동 계산 대기..." required readonly />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>비고 (메모)</label>
|
||||||
|
<textarea id="job-spec-remarks" name="remarks" placeholder="기타 필요 사양 및 안내 사항" rows="3"></textarea>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button id="btn-delete-job-spec-asset" class="btn btn-outline btn-danger">삭제</button>
|
||||||
|
<div class="footer-actions">
|
||||||
|
<button id="btn-revert-job-spec-edit" class="btn btn-outline hidden">수정 취소</button>
|
||||||
|
<button id="btn-cancel-job-spec-modal" class="btn btn-outline">닫기</button>
|
||||||
|
<button id="btn-save-job-spec-asset" class="btn btn-primary">수정</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<style>
|
||||||
|
.autocomplete-list {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
max-height: 150px;
|
||||||
|
overflow-y: auto;
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid var(--border-color, #E2E8F0);
|
||||||
|
border-top: none;
|
||||||
|
border-radius: 0 0 4px 4px;
|
||||||
|
z-index: 1000;
|
||||||
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
.autocomplete-item {
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #334155;
|
||||||
|
cursor: pointer;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.autocomplete-item:hover {
|
||||||
|
background-color: #F1F5F9;
|
||||||
|
color: #1E5149;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
protected initChildLogic(onSave: () => void, closeModals: () => void): void {
|
||||||
|
const saveBtn = document.getElementById('btn-save-job-spec-asset')!;
|
||||||
|
const revertBtn = document.getElementById('btn-revert-job-spec-edit')!;
|
||||||
|
const deleteBtn = document.getElementById('btn-delete-job-spec-asset')!;
|
||||||
|
|
||||||
|
saveBtn.addEventListener('click', async () => {
|
||||||
|
if (!this.currentAsset) return;
|
||||||
|
if (!this.isEditMode) {
|
||||||
|
this.setEditLockMode('edit');
|
||||||
|
this.isEditMode = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const jobName = (document.getElementById('job-spec-job-name') as HTMLInputElement).value.trim();
|
||||||
|
const cpuStd = (document.getElementById('job-spec-cpu-standard') as HTMLInputElement).value.trim();
|
||||||
|
const ramStd = (document.getElementById('job-spec-ram-standard') as HTMLInputElement).value.trim();
|
||||||
|
const gpuStd = (document.getElementById('job-spec-gpu-standard') as HTMLInputElement).value.trim();
|
||||||
|
const minScoreStr = (document.getElementById('job-spec-min-score') as HTMLInputElement).value;
|
||||||
|
const remarks = (document.getElementById('job-spec-remarks') as HTMLTextAreaElement).value.trim();
|
||||||
|
|
||||||
|
if (!jobName) {
|
||||||
|
alert('직무명을 입력해 주세요.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const updated = {
|
||||||
|
id: this.currentAsset.id || null,
|
||||||
|
job_name: jobName,
|
||||||
|
cpu_standard: cpuStd,
|
||||||
|
ram_standard: ramStd,
|
||||||
|
gpu_standard: gpuStd,
|
||||||
|
min_score: minScoreStr !== '' ? parseInt(minScoreStr, 10) : 0,
|
||||||
|
remarks: remarks
|
||||||
|
};
|
||||||
|
|
||||||
|
if (await saveJobSpec(updated)) {
|
||||||
|
alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
|
||||||
|
onSave(); this.close(); closeModals();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
revertBtn.addEventListener('click', () => {
|
||||||
|
this.setEditLockMode('view');
|
||||||
|
if (this.currentAsset) this.fillFormData(this.currentAsset);
|
||||||
|
});
|
||||||
|
|
||||||
|
deleteBtn.addEventListener('click', async () => {
|
||||||
|
if (!this.currentAsset || !this.currentAsset.id) return;
|
||||||
|
if (!confirm('정말로 이 직무별 기준 사양을 삭제하시겠습니까?')) return;
|
||||||
|
|
||||||
|
if (await deleteJobSpec(this.currentAsset.id)) {
|
||||||
|
alert('성공적으로 삭제되었습니다.');
|
||||||
|
onSave(); this.close(); closeModals();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 자동완성 바인딩
|
||||||
|
this.bindAutocomplete('job-spec-cpu-standard', 'job-spec-cpu-autocomplete', 'CPU');
|
||||||
|
this.bindAutocomplete('job-spec-ram-standard', 'job-spec-ram-autocomplete', 'RAM');
|
||||||
|
this.bindAutocomplete('job-spec-gpu-standard', 'job-spec-gpu-autocomplete', 'GPU');
|
||||||
|
|
||||||
|
// 실시간 점수 계산 이벤트 바인딩
|
||||||
|
const inputs = ['job-spec-cpu-standard', 'job-spec-ram-standard', 'job-spec-gpu-standard'];
|
||||||
|
inputs.forEach(id => {
|
||||||
|
const el = document.getElementById(id);
|
||||||
|
el?.addEventListener('input', () => this.updateMinScore());
|
||||||
|
el?.addEventListener('change', () => this.updateMinScore());
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private bindAutocomplete(inputId: string, autocompleteId: string, category: string) {
|
||||||
|
const input = document.getElementById(inputId) as HTMLInputElement;
|
||||||
|
const list = document.getElementById(autocompleteId) as HTMLDivElement;
|
||||||
|
if (!input || !list) return;
|
||||||
|
|
||||||
|
const showList = (filterText: string = '') => {
|
||||||
|
if (!this.isEditMode) return;
|
||||||
|
const items = (state.masterData.partsMaster || []).filter((c: any) => c.category === category);
|
||||||
|
const filtered = filterText
|
||||||
|
? items.filter((c: any) => c.component_name.toLowerCase().includes(filterText.toLowerCase()))
|
||||||
|
: items;
|
||||||
|
|
||||||
|
if (filtered.length === 0) {
|
||||||
|
list.innerHTML = '<div class="autocomplete-item" style="color: #94a3b8; cursor: default;">검색 결과 없음</div>';
|
||||||
|
} else {
|
||||||
|
list.innerHTML = filtered.map((c: any) => `<div class="autocomplete-item" data-val="${c.component_name}">${c.component_name}</div>`).join('');
|
||||||
|
}
|
||||||
|
list.classList.remove('hidden');
|
||||||
|
};
|
||||||
|
|
||||||
|
input.addEventListener('focus', () => {
|
||||||
|
showList(input.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
input.addEventListener('input', () => {
|
||||||
|
showList(input.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
list.addEventListener('mousedown', (e) => {
|
||||||
|
const item = (e.target as HTMLElement).closest('.autocomplete-item');
|
||||||
|
if (item && item.getAttribute('data-val')) {
|
||||||
|
input.value = item.getAttribute('data-val') || '';
|
||||||
|
list.classList.add('hidden');
|
||||||
|
this.updateMinScore();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('mousedown', (e) => {
|
||||||
|
if (e.target !== input && !list.contains(e.target as Node)) {
|
||||||
|
list.classList.add('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private updateMinScore(): void {
|
||||||
|
const cpu = (document.getElementById('job-spec-cpu-standard') as HTMLInputElement)?.value || '';
|
||||||
|
const ram = (document.getElementById('job-spec-ram-standard') as HTMLInputElement)?.value || '';
|
||||||
|
const gpu = (document.getElementById('job-spec-gpu-standard') as HTMLInputElement)?.value || '';
|
||||||
|
|
||||||
|
const score = calculatePcScoreDeductive(cpu, ram, gpu, '');
|
||||||
|
|
||||||
|
const minScoreEl = document.getElementById('job-spec-min-score') as HTMLInputElement;
|
||||||
|
if (minScoreEl) {
|
||||||
|
minScoreEl.value = score.toString();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
protected fillFormData(asset: any): void {
|
||||||
|
setFieldValue('job-spec-id', asset.id || '');
|
||||||
|
setFieldValue('job-spec-job-name', asset.job_name || '');
|
||||||
|
setFieldValue('job-spec-cpu-standard', asset.cpu_standard || '');
|
||||||
|
setFieldValue('job-spec-ram-standard', asset.ram_standard || '');
|
||||||
|
setFieldValue('job-spec-gpu-standard', asset.gpu_standard || '');
|
||||||
|
setFieldValue('job-spec-min-score', asset.min_score !== undefined ? asset.min_score.toString() : '100');
|
||||||
|
setFieldValue('job-spec-remarks', asset.remarks || '');
|
||||||
|
this.updateHeaderIdentity(asset);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected onAfterOpen(asset: any, mode: string): void {
|
||||||
|
const titleEl = document.getElementById('job-spec-modal-title');
|
||||||
|
|
||||||
|
if (titleEl) {
|
||||||
|
if (mode === 'add') {
|
||||||
|
titleEl.textContent = '신규 직무별 기준 사양 등록';
|
||||||
|
} else {
|
||||||
|
titleEl.textContent = '직무별 기준 사양 상세 편집';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const deleteBtn = document.getElementById('btn-delete-job-spec-asset')!;
|
||||||
|
const saveBtn = document.getElementById('btn-save-job-spec-asset')!;
|
||||||
|
|
||||||
|
deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
|
||||||
|
|
||||||
|
if (mode === 'add' || mode === 'edit') {
|
||||||
|
saveBtn.textContent = (mode === 'add') ? '등록' : '저장';
|
||||||
|
saveBtn.style.display = 'block';
|
||||||
|
} else {
|
||||||
|
saveBtn.textContent = '수정';
|
||||||
|
saveBtn.style.display = 'block';
|
||||||
|
}
|
||||||
|
this.updateHeaderIdentity(asset);
|
||||||
|
}
|
||||||
|
|
||||||
|
private updateHeaderIdentity(asset: any) {
|
||||||
|
const container = document.getElementById('job-spec-header-identity');
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
if (this.currentMode === 'add') {
|
||||||
|
container.innerHTML = '<span class="badge badge-primary">신규 등록</span>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const jobName = asset.job_name || '';
|
||||||
|
const minScore = asset.min_score || 0;
|
||||||
|
|
||||||
|
container.innerHTML = `
|
||||||
|
<span class="asset-code-title">${jobName}</span>
|
||||||
|
<span class="service-type-badge">${minScore}점 기준</span>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const jobSpecModal = new JobSpecModal();
|
||||||
|
|
||||||
|
export function initJobSpecModal(onSave: () => void, closeModals: () => void) {
|
||||||
|
jobSpecModal.init(onSave, closeModals);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function openJobSpecModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
|
||||||
|
jobSpecModal.open(asset, mode);
|
||||||
|
}
|
||||||
@@ -110,29 +110,45 @@ export function setEditLock(
|
|||||||
const generateBtn = options.generateBtnId ? document.getElementById(options.generateBtnId) : null;
|
const generateBtn = options.generateBtnId ? document.getElementById(options.generateBtnId) : null;
|
||||||
const addLogBtn = options.addLogBtnId ? document.getElementById(options.addLogBtnId) : null;
|
const addLogBtn = options.addLogBtnId ? document.getElementById(options.addLogBtnId) : null;
|
||||||
|
|
||||||
if (!form || !saveBtn || !revertBtn) return;
|
if (!form) return;
|
||||||
|
|
||||||
if (mode === 'add' || mode === 'edit') {
|
const isEdit = (mode === 'add' || mode === 'edit');
|
||||||
|
|
||||||
|
if (isEdit) {
|
||||||
// 편집 모드 활성화
|
// 편집 모드 활성화
|
||||||
form.classList.remove('is-view-mode');
|
form.classList.remove('is-view-mode');
|
||||||
form.classList.add('is-edit-mode');
|
form.classList.add('is-edit-mode');
|
||||||
saveBtn.textContent = '저장';
|
if (saveBtn) saveBtn.textContent = (mode === 'add' ? '등록' : '저장');
|
||||||
revertBtn.classList.toggle('hidden', mode === 'add'); // 신규 추가 시에는 취소 버튼 숨김
|
if (revertBtn) revertBtn.classList.toggle('hidden', mode === 'add');
|
||||||
|
|
||||||
// 번호 생성 버튼은 '추가(add)' 시에만 노출
|
// 모든 필드 활성화
|
||||||
if (generateBtn) {
|
const inputs = form.querySelectorAll('input, select, textarea');
|
||||||
generateBtn.style.display = mode === 'add' ? 'flex' : 'none';
|
inputs.forEach(input => {
|
||||||
}
|
const el = input as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
|
||||||
// 내역 추가 버튼 노출
|
// 자산번호 및 ID 필드는 편집 모드에서도 잠금 유지
|
||||||
|
if (el.name !== 'asset_code' && !el.id.includes('asset-id') && !el.id.includes('id-hidden')) {
|
||||||
|
el.disabled = false;
|
||||||
|
if ('readOnly' in el) (el as HTMLInputElement).readOnly = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (generateBtn) generateBtn.style.display = (mode === 'add' ? 'flex' : 'none');
|
||||||
if (addLogBtn) addLogBtn.style.display = 'flex';
|
if (addLogBtn) addLogBtn.style.display = 'flex';
|
||||||
} else {
|
} else {
|
||||||
// 조회 모드 (잠금)
|
// 조회 모드 (잠금)
|
||||||
form.classList.remove('is-edit-mode');
|
form.classList.remove('is-edit-mode');
|
||||||
form.classList.add('is-view-mode');
|
form.classList.add('is-view-mode');
|
||||||
saveBtn.textContent = '수정';
|
if (saveBtn) saveBtn.textContent = '수정';
|
||||||
revertBtn.classList.add('hidden');
|
if (revertBtn) revertBtn.classList.add('hidden');
|
||||||
|
|
||||||
|
// 모든 필드 잠금
|
||||||
|
const inputs = form.querySelectorAll('input, select, textarea');
|
||||||
|
inputs.forEach(input => {
|
||||||
|
const el = input as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
|
||||||
|
el.disabled = true;
|
||||||
|
if ('readOnly' in el) (el as HTMLInputElement).readOnly = true;
|
||||||
|
});
|
||||||
|
|
||||||
// 조회 모드에서는 버튼들 숨김
|
|
||||||
if (generateBtn) generateBtn.style.display = 'none';
|
if (generateBtn) generateBtn.style.display = 'none';
|
||||||
if (addLogBtn) addLogBtn.style.display = 'none';
|
if (addLogBtn) addLogBtn.style.display = 'none';
|
||||||
}
|
}
|
||||||
@@ -169,9 +185,9 @@ export function createModalFrameHTML(
|
|||||||
</div>
|
</div>
|
||||||
<div class="modal-history-area">
|
<div class="modal-history-area">
|
||||||
<div class="history-header">
|
<div class="history-header">
|
||||||
<h3><i data-lucide="history" style="width:16px; height:16px;"></i> ${options.historyTitle}</h3>
|
<h3><i data-lucide="history" class="icon-sm"></i> ${options.historyTitle}</h3>
|
||||||
<button type="button" id="${options.addLogBtnId}" class="btn btn-outline btn-sm">
|
<button type="button" id="btn-add-${idPrefix}-log" class="btn btn-outline btn-sm">
|
||||||
내역 추가 <i data-lucide="plus" style="width:14px; height:14px;"></i>
|
내역 추가 <i data-lucide="plus" class="icon-sm"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="${idPrefix}-history-list" class="history-timeline"></div>
|
<div id="${idPrefix}-history-list" class="history-timeline"></div>
|
||||||
|
|||||||
595
src/components/Modal/PCFlowModal.ts
Normal file
595
src/components/Modal/PCFlowModal.ts
Normal file
@@ -0,0 +1,595 @@
|
|||||||
|
import { state, loadMasterDataFromDB } from '../../core/state';
|
||||||
|
import { createIcons, Search, Monitor, RefreshCw } from 'lucide';
|
||||||
|
import { API_BASE_URL } from '../../core/utils';
|
||||||
|
|
||||||
|
export class PCFlowModal {
|
||||||
|
private static instance: PCFlowModal | null = null;
|
||||||
|
|
||||||
|
private modalEl: HTMLElement | null = null;
|
||||||
|
private currentFlowType: 'checkout' | 'return' | 'move' = 'checkout';
|
||||||
|
|
||||||
|
// Selected state
|
||||||
|
private selectedUser: any = null;
|
||||||
|
private selectedTargetUser: any = null;
|
||||||
|
private selectedPC: any = null;
|
||||||
|
|
||||||
|
private constructor() {}
|
||||||
|
|
||||||
|
public static getInstance(): PCFlowModal {
|
||||||
|
if (!PCFlowModal.instance) {
|
||||||
|
PCFlowModal.instance = new PCFlowModal();
|
||||||
|
}
|
||||||
|
return PCFlowModal.instance;
|
||||||
|
}
|
||||||
|
|
||||||
|
public init(onSave: () => void) {
|
||||||
|
if (document.getElementById('pc-flow-modal')) return;
|
||||||
|
|
||||||
|
// Inject HTML
|
||||||
|
document.body.insertAdjacentHTML('beforeend', this.renderHTML());
|
||||||
|
|
||||||
|
this.modalEl = document.getElementById('pc-flow-modal');
|
||||||
|
this.setupEventListeners(onSave);
|
||||||
|
|
||||||
|
// Set default date to today
|
||||||
|
const dateInput = document.getElementById('pc-flow-date') as HTMLInputElement;
|
||||||
|
if (dateInput) {
|
||||||
|
dateInput.value = new Date().toISOString().split('T')[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
createIcons({ icons: { Search, Monitor, RefreshCw } });
|
||||||
|
}
|
||||||
|
|
||||||
|
public open() {
|
||||||
|
this.resetState();
|
||||||
|
if (this.modalEl) {
|
||||||
|
this.modalEl.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
this.updateUI();
|
||||||
|
}
|
||||||
|
|
||||||
|
public close() {
|
||||||
|
if (this.modalEl) {
|
||||||
|
this.modalEl.classList.add('hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private resetState() {
|
||||||
|
this.selectedUser = null;
|
||||||
|
this.selectedTargetUser = null;
|
||||||
|
this.selectedPC = null;
|
||||||
|
this.currentFlowType = 'checkout';
|
||||||
|
|
||||||
|
const radioCheckout = document.querySelector('input[name="flow-type"][value="checkout"]') as HTMLInputElement;
|
||||||
|
if (radioCheckout) {
|
||||||
|
radioCheckout.checked = true;
|
||||||
|
document.querySelectorAll('.flow-type-label').forEach(l => {
|
||||||
|
l.classList.toggle('active', l.contains(radioCheckout));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reset text fields
|
||||||
|
const userSearch = document.getElementById('pc-flow-user-search') as HTMLInputElement;
|
||||||
|
if (userSearch) userSearch.value = '';
|
||||||
|
|
||||||
|
const targetUserSearch = document.getElementById('pc-flow-target-user-search') as HTMLInputElement;
|
||||||
|
if (targetUserSearch) targetUserSearch.value = '';
|
||||||
|
|
||||||
|
const stockSearch = document.getElementById('pc-flow-stock-search') as HTMLInputElement;
|
||||||
|
if (stockSearch) stockSearch.value = '';
|
||||||
|
|
||||||
|
const details = document.getElementById('pc-flow-details') as HTMLTextAreaElement;
|
||||||
|
if (details) details.value = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
private setupEventListeners(onSave: () => void) {
|
||||||
|
const btnClose = document.getElementById('btn-close-pc-flow-modal');
|
||||||
|
const btnCancel = document.getElementById('btn-cancel-pc-flow-modal');
|
||||||
|
const btnSubmit = document.getElementById('btn-submit-pc-flow');
|
||||||
|
|
||||||
|
btnClose?.addEventListener('click', () => this.close());
|
||||||
|
btnCancel?.addEventListener('click', () => this.close());
|
||||||
|
|
||||||
|
// Flow Type Radio Buttons
|
||||||
|
const labels = document.querySelectorAll('.flow-type-label');
|
||||||
|
labels.forEach(label => {
|
||||||
|
const radio = label.querySelector('input[name="flow-type"]') as HTMLInputElement;
|
||||||
|
label.addEventListener('click', () => {
|
||||||
|
labels.forEach(l => l.classList.remove('active'));
|
||||||
|
label.classList.add('active');
|
||||||
|
radio.checked = true;
|
||||||
|
this.currentFlowType = radio.value as any;
|
||||||
|
|
||||||
|
// Reset selected PC when switching flow types
|
||||||
|
this.selectedPC = null;
|
||||||
|
this.updateUI();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 1. Source User Autocomplete Search
|
||||||
|
const userSearch = document.getElementById('pc-flow-user-search') as HTMLInputElement;
|
||||||
|
const userSuggestions = document.getElementById('pc-flow-user-suggestions')!;
|
||||||
|
|
||||||
|
userSearch?.addEventListener('input', () => {
|
||||||
|
const query = userSearch.value.trim().toLowerCase();
|
||||||
|
if (!query) {
|
||||||
|
userSuggestions.classList.add('hidden');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const users = state.masterData.users || [];
|
||||||
|
const filtered = users.filter((u: any) =>
|
||||||
|
(u.user_name && u.user_name.toLowerCase().includes(query)) ||
|
||||||
|
(u.dept_name && u.dept_name.toLowerCase().includes(query)) ||
|
||||||
|
(u.emp_no && u.emp_no.toString().includes(query))
|
||||||
|
);
|
||||||
|
|
||||||
|
const uniqueFiltered: any[] = [];
|
||||||
|
const seen = new Set();
|
||||||
|
filtered.forEach((u: any) => {
|
||||||
|
const key = u.emp_no || u.user_name;
|
||||||
|
if (!seen.has(key)) {
|
||||||
|
seen.add(key);
|
||||||
|
uniqueFiltered.push(u);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.renderUserSuggestions(uniqueFiltered, userSuggestions, (user) => {
|
||||||
|
this.selectedUser = user;
|
||||||
|
userSearch.value = `${user.user_name} (${user.dept_name} / 사번:${user.emp_no || '-'})`;
|
||||||
|
userSuggestions.classList.add('hidden');
|
||||||
|
|
||||||
|
// Automatically populate details if return or move
|
||||||
|
if (this.currentFlowType === 'return' || this.currentFlowType === 'move') {
|
||||||
|
this.selectedPC = null; // Reset selection
|
||||||
|
}
|
||||||
|
this.updateUI();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close suggestion overlays on clicking outside
|
||||||
|
document.addEventListener('click', (e) => {
|
||||||
|
const target = e.target as HTMLElement;
|
||||||
|
if (!target.closest('#pc-flow-user-search') && !target.closest('#pc-flow-user-suggestions')) {
|
||||||
|
userSuggestions.classList.add('hidden');
|
||||||
|
}
|
||||||
|
if (!target.closest('#pc-flow-target-user-search') && !target.closest('#pc-flow-target-user-suggestions')) {
|
||||||
|
const targetSuggestions = document.getElementById('pc-flow-target-user-suggestions');
|
||||||
|
targetSuggestions?.classList.add('hidden');
|
||||||
|
}
|
||||||
|
if (!target.closest('#pc-flow-stock-search') && !target.closest('#pc-flow-stock-suggestions')) {
|
||||||
|
const stockSuggestions = document.getElementById('pc-flow-stock-suggestions');
|
||||||
|
stockSuggestions?.classList.add('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 2. Target User Autocomplete Search (For Moves)
|
||||||
|
const targetUserSearch = document.getElementById('pc-flow-target-user-search') as HTMLInputElement;
|
||||||
|
const targetSuggestions = document.getElementById('pc-flow-target-user-suggestions')!;
|
||||||
|
|
||||||
|
targetUserSearch?.addEventListener('input', () => {
|
||||||
|
const query = targetUserSearch.value.trim().toLowerCase();
|
||||||
|
if (!query) {
|
||||||
|
targetSuggestions.classList.add('hidden');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const users = state.masterData.users || [];
|
||||||
|
const filtered = users.filter((u: any) =>
|
||||||
|
(u.user_name && u.user_name.toLowerCase().includes(query)) ||
|
||||||
|
(u.dept_name && u.dept_name.toLowerCase().includes(query)) ||
|
||||||
|
(u.emp_no && u.emp_no.toString().includes(query))
|
||||||
|
);
|
||||||
|
|
||||||
|
const uniqueFiltered: any[] = [];
|
||||||
|
const seen = new Set();
|
||||||
|
filtered.forEach((u: any) => {
|
||||||
|
const key = u.emp_no || u.user_name;
|
||||||
|
if (!seen.has(key)) {
|
||||||
|
seen.add(key);
|
||||||
|
uniqueFiltered.push(u);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.renderUserSuggestions(uniqueFiltered, targetSuggestions, (user) => {
|
||||||
|
this.selectedTargetUser = user;
|
||||||
|
targetUserSearch.value = `${user.user_name} (${user.dept_name} / 사번:${user.emp_no || '-'})`;
|
||||||
|
targetSuggestions.classList.add('hidden');
|
||||||
|
this.updateUI();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 3. Stock PC Autocomplete Search (For Checkout)
|
||||||
|
const stockSearch = document.getElementById('pc-flow-stock-search') as HTMLInputElement;
|
||||||
|
const stockSuggestions = document.getElementById('pc-flow-stock-suggestions')!;
|
||||||
|
|
||||||
|
const showStockSuggestions = () => {
|
||||||
|
const query = stockSearch.value.trim().toLowerCase();
|
||||||
|
|
||||||
|
// Filter available PCs (category PC, status '대기', '미할당', or '재고')
|
||||||
|
const pcs = state.masterData.pc || [];
|
||||||
|
const filtered = pcs.filter((p: any) => {
|
||||||
|
const status = (p.hw_status || '').trim();
|
||||||
|
const matchesQuery = !query ||
|
||||||
|
(p.asset_code && p.asset_code.toLowerCase().includes(query)) ||
|
||||||
|
(p.model_name && p.model_name.toLowerCase().includes(query)) ||
|
||||||
|
(p.cpu && p.cpu.toLowerCase().includes(query));
|
||||||
|
|
||||||
|
return (status === '대기' || status === '미할당' || status === '재고') && matchesQuery;
|
||||||
|
});
|
||||||
|
|
||||||
|
this.renderPCSuggestions(filtered, stockSuggestions, (pc) => {
|
||||||
|
this.selectedPC = pc;
|
||||||
|
stockSearch.value = `${pc.asset_code} - ${pc.model_name}`;
|
||||||
|
stockSuggestions.classList.add('hidden');
|
||||||
|
this.updateUI();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
stockSearch?.addEventListener('input', showStockSuggestions);
|
||||||
|
stockSearch?.addEventListener('focus', showStockSuggestions);
|
||||||
|
stockSearch?.addEventListener('click', showStockSuggestions);
|
||||||
|
|
||||||
|
// 4. Submit Transaction
|
||||||
|
btnSubmit?.addEventListener('click', async () => {
|
||||||
|
if (!this.validateInputs()) return;
|
||||||
|
|
||||||
|
const dateVal = (document.getElementById('pc-flow-date') as HTMLInputElement).value;
|
||||||
|
const detailsVal = (document.getElementById('pc-flow-details') as HTMLTextAreaElement).value.trim();
|
||||||
|
const loginUser = state.currentUserRole === 'admin' ? '관리자' : '실무담당자';
|
||||||
|
|
||||||
|
// Build Details Message as JSON
|
||||||
|
const logData = {
|
||||||
|
type: this.currentFlowType,
|
||||||
|
user: this.selectedUser ? this.selectedUser.user_name : '',
|
||||||
|
dept: this.selectedUser ? this.selectedUser.dept_name : '',
|
||||||
|
targetUser: this.selectedTargetUser ? this.selectedTargetUser.user_name : '',
|
||||||
|
targetDept: this.selectedTargetUser ? this.selectedTargetUser.dept_name : '',
|
||||||
|
assetCode: this.selectedPC ? this.selectedPC.asset_code : '',
|
||||||
|
memo: detailsVal
|
||||||
|
};
|
||||||
|
const finalDetails = JSON.stringify(logData);
|
||||||
|
|
||||||
|
const payload: any = {
|
||||||
|
action: this.currentFlowType,
|
||||||
|
assetId: this.selectedPC.id,
|
||||||
|
date: dateVal,
|
||||||
|
details: finalDetails,
|
||||||
|
manager: loginUser
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.currentFlowType === 'checkout') {
|
||||||
|
payload.userName = this.selectedUser.user_name;
|
||||||
|
payload.dept = this.selectedUser.dept_name;
|
||||||
|
payload.empNo = this.selectedUser.emp_no;
|
||||||
|
payload.position = this.selectedUser.position || '사원';
|
||||||
|
} else if (this.currentFlowType === 'move') {
|
||||||
|
payload.userName = this.selectedTargetUser.user_name;
|
||||||
|
payload.dept = this.selectedTargetUser.dept_name;
|
||||||
|
payload.empNo = this.selectedTargetUser.emp_no;
|
||||||
|
payload.position = this.selectedTargetUser.position || '사원';
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE_URL}/api/pc/flow`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(payload)
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
alert('PC 이동/반납 처리가 완료되었습니다.');
|
||||||
|
this.close();
|
||||||
|
onSave(); // Refresh views
|
||||||
|
} else {
|
||||||
|
const errData = await response.json();
|
||||||
|
alert(`오류 발생: ${errData.error || '처리 실패'}`);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('API Error:', err);
|
||||||
|
alert('서버 전송 중 오류가 발생했습니다.');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private validateInputs(): boolean {
|
||||||
|
if (this.currentFlowType === 'checkout') {
|
||||||
|
if (!this.selectedUser) { alert('대상 사원을 선택해주세요.'); return false; }
|
||||||
|
if (!this.selectedPC) { alert('불출할 재고 PC를 선택해주세요.'); return false; }
|
||||||
|
} else if (this.currentFlowType === 'return') {
|
||||||
|
if (!this.selectedUser) { alert('반납 대상 사원을 선택해주세요.'); return false; }
|
||||||
|
if (!this.selectedPC) { alert('반납할 PC 자산을 선택해주세요.'); return false; }
|
||||||
|
} else if (this.currentFlowType === 'move') {
|
||||||
|
if (!this.selectedUser) { alert('인계 사원을 선택해주세요.'); return false; }
|
||||||
|
if (!this.selectedPC) { alert('이동할 PC 자산을 선택해주세요.'); return false; }
|
||||||
|
if (!this.selectedTargetUser) { alert('인수 사원을 선택해주세요.'); return false; }
|
||||||
|
if (this.selectedUser.emp_no === this.selectedTargetUser.emp_no) {
|
||||||
|
alert('인계자와 인수자는 동일할 수 없습니다.');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderUserSuggestions(users: any[], container: HTMLElement, onSelect: (user: any) => void) {
|
||||||
|
container.innerHTML = '';
|
||||||
|
if (users.length === 0) {
|
||||||
|
container.innerHTML = '<div class="autocomplete-item-empty">일치하는 사원이 없습니다.</div>';
|
||||||
|
container.classList.remove('hidden');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
users.forEach(u => {
|
||||||
|
const item = document.createElement('div');
|
||||||
|
item.className = 'autocomplete-item';
|
||||||
|
item.innerHTML = `
|
||||||
|
<div class="suggestion-name">${u.user_name}</div>
|
||||||
|
<div class="suggestion-meta">
|
||||||
|
<span>부서: ${u.dept_name}</span>
|
||||||
|
<span>|</span>
|
||||||
|
<span>사번: ${u.emp_no || '-'}</span>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
item.addEventListener('click', () => onSelect(u));
|
||||||
|
container.appendChild(item);
|
||||||
|
});
|
||||||
|
container.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderPCSuggestions(pcs: any[], container: HTMLElement, onSelect: (pc: any) => void) {
|
||||||
|
container.innerHTML = '';
|
||||||
|
if (pcs.length === 0) {
|
||||||
|
container.innerHTML = '<div class="autocomplete-item-empty">불출 가능한 대기 PC 재고가 없습니다.</div>';
|
||||||
|
container.classList.remove('hidden');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
pcs.forEach(p => {
|
||||||
|
const item = document.createElement('div');
|
||||||
|
item.className = 'autocomplete-item';
|
||||||
|
item.innerHTML = `
|
||||||
|
<div class="suggestion-name">${p.asset_code} (${p.model_name || '모델명 없음'})</div>
|
||||||
|
<div class="suggestion-meta">
|
||||||
|
사양: CPU ${p.cpu || '-'} / RAM ${p.ram || '-'} / 위치: ${p.location || '-'}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
item.addEventListener('click', () => onSelect(p));
|
||||||
|
container.appendChild(item);
|
||||||
|
});
|
||||||
|
container.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
private updateUI() {
|
||||||
|
// 1. Hide/Show dynamic sections based on flow type
|
||||||
|
const stockContainer = document.getElementById('stock-pc-search-container')!;
|
||||||
|
const targetUserContainer = document.getElementById('target-user-search-container')!;
|
||||||
|
const userPcsContainer = document.getElementById('user-pcs-container')!;
|
||||||
|
const labelStep2 = document.getElementById('user-search-label')!;
|
||||||
|
|
||||||
|
if (this.currentFlowType === 'checkout') {
|
||||||
|
stockContainer.classList.remove('hidden');
|
||||||
|
targetUserContainer.classList.add('hidden');
|
||||||
|
userPcsContainer.classList.add('hidden');
|
||||||
|
labelStep2.textContent = '2. 불출 대상 사원 검색';
|
||||||
|
} else if (this.currentFlowType === 'return') {
|
||||||
|
stockContainer.classList.add('hidden');
|
||||||
|
targetUserContainer.classList.add('hidden');
|
||||||
|
userPcsContainer.classList.remove('hidden');
|
||||||
|
labelStep2.textContent = '2. 반납 대상 사원 검색';
|
||||||
|
} else if (this.currentFlowType === 'move') {
|
||||||
|
stockContainer.classList.add('hidden');
|
||||||
|
targetUserContainer.classList.remove('hidden');
|
||||||
|
userPcsContainer.classList.remove('hidden');
|
||||||
|
labelStep2.textContent = '2. 인계 사원 검색';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. Update summary panels on the right
|
||||||
|
const summaryUserName = document.getElementById('summary-user-name')!;
|
||||||
|
const summaryUserDept = document.getElementById('summary-user-dept')!;
|
||||||
|
if (this.selectedUser) {
|
||||||
|
summaryUserName.textContent = this.selectedUser.user_name;
|
||||||
|
summaryUserDept.textContent = `${this.selectedUser.dept_name} / 사번: ${this.selectedUser.emp_no || '-'}`;
|
||||||
|
} else {
|
||||||
|
summaryUserName.textContent = '선택된 사원 없음';
|
||||||
|
summaryUserDept.textContent = '-';
|
||||||
|
}
|
||||||
|
|
||||||
|
const summaryTargetCard = document.getElementById('summary-target-user-card')!;
|
||||||
|
const summaryTargetUserName = document.getElementById('summary-target-user-name')!;
|
||||||
|
const summaryTargetUserDept = document.getElementById('summary-target-user-dept')!;
|
||||||
|
if (this.currentFlowType === 'move') {
|
||||||
|
summaryTargetCard.classList.remove('hidden');
|
||||||
|
if (this.selectedTargetUser) {
|
||||||
|
summaryTargetUserName.textContent = this.selectedTargetUser.user_name;
|
||||||
|
summaryTargetUserDept.textContent = `${this.selectedTargetUser.dept_name} / 사번: ${this.selectedTargetUser.emp_no || '-'}`;
|
||||||
|
} else {
|
||||||
|
summaryTargetUserName.textContent = '선택된 사원 없음';
|
||||||
|
summaryTargetUserDept.textContent = '-';
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
summaryTargetCard.classList.add('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
const summaryPcCode = document.getElementById('summary-pc-code')!;
|
||||||
|
const summaryPcModel = document.getElementById('summary-pc-model')!;
|
||||||
|
if (this.selectedPC) {
|
||||||
|
summaryPcCode.textContent = this.selectedPC.asset_code;
|
||||||
|
summaryPcModel.textContent = `${this.selectedPC.model_name || '모델명 없음'} (${this.selectedPC.cpu || '-'} / ${this.selectedPC.ram || '-'})`;
|
||||||
|
} else {
|
||||||
|
summaryPcCode.textContent = '선택된 PC 없음';
|
||||||
|
summaryPcModel.textContent = '-';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. Render user's active PCs list on the right (For Return & Move)
|
||||||
|
const userPcsList = document.getElementById('user-pcs-list')!;
|
||||||
|
if (this.selectedUser && (this.currentFlowType === 'return' || this.currentFlowType === 'move')) {
|
||||||
|
const allPcs = state.masterData.pc || [];
|
||||||
|
const userPcs = allPcs.filter((p: any) =>
|
||||||
|
(p.emp_no && p.emp_no.toString() === this.selectedUser.emp_no?.toString()) ||
|
||||||
|
(p.user_current && p.user_current === this.selectedUser.user_name)
|
||||||
|
);
|
||||||
|
|
||||||
|
if (userPcs.length === 0) {
|
||||||
|
userPcsList.innerHTML = '<div class="empty-list-message">이 사용자가 소유한 PC 자산이 없습니다.</div>';
|
||||||
|
} else {
|
||||||
|
userPcsList.innerHTML = userPcs.map(p => {
|
||||||
|
const isSelected = this.selectedPC && this.selectedPC.id === p.id;
|
||||||
|
return `
|
||||||
|
<div class="user-pc-item ${isSelected ? 'selected' : ''}" data-id="${p.id}">
|
||||||
|
<div class="pc-item-code">${p.asset_code}</div>
|
||||||
|
<div class="pc-item-meta">
|
||||||
|
${p.model_name || '모델명 없음'} | CPU: ${p.cpu || '-'} | RAM: ${p.ram || '-'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}).join('');
|
||||||
|
|
||||||
|
// Bind clicks to list items
|
||||||
|
userPcsList.querySelectorAll('.user-pc-item').forEach(item => {
|
||||||
|
item.addEventListener('click', () => {
|
||||||
|
const pcId = item.getAttribute('data-id');
|
||||||
|
const foundPC = userPcs.find(p => p.id === pcId);
|
||||||
|
if (foundPC) {
|
||||||
|
this.selectedPC = foundPC;
|
||||||
|
this.updateUI();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
userPcsList.innerHTML = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderHTML(): string {
|
||||||
|
return `
|
||||||
|
<div id="pc-flow-modal" class="modal-overlay hidden">
|
||||||
|
<div class="modal-content wide">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h2 class="modal-title">
|
||||||
|
<i data-lucide="refresh-cw"></i> PC 이동/반납 (불출/반납/이동)
|
||||||
|
</h2>
|
||||||
|
<button id="btn-close-pc-flow-modal" class="btn-icon" aria-label="닫기">×</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="modal-body-split">
|
||||||
|
<!-- 왼쪽 영역: 입력 폼 -->
|
||||||
|
<div class="modal-form-area">
|
||||||
|
<div class="grid-form flex-col">
|
||||||
|
|
||||||
|
<!-- 1. 처리 유형 -->
|
||||||
|
<div class="form-group">
|
||||||
|
<label>1. 처리 유형 선택</label>
|
||||||
|
<div class="view-toggle w-full flex-row">
|
||||||
|
<label class="flow-type-label toggle-btn active flex-1 text-center">
|
||||||
|
<input type="radio" name="flow-type" value="checkout" checked class="hidden" />
|
||||||
|
불출 (지급)
|
||||||
|
</label>
|
||||||
|
<label class="flow-type-label toggle-btn flex-1 text-center">
|
||||||
|
<input type="radio" name="flow-type" value="return" class="hidden" />
|
||||||
|
입고 (반납)
|
||||||
|
</label>
|
||||||
|
<label class="flow-type-label toggle-btn flex-1 text-center">
|
||||||
|
<input type="radio" name="flow-type" value="move" class="hidden" />
|
||||||
|
이동 (이관)
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 2. 대상 사용자 검색 -->
|
||||||
|
<div class="form-group relative">
|
||||||
|
<label id="user-search-label">2. 대상 사원 검색</label>
|
||||||
|
<div class="input-with-icon">
|
||||||
|
<input type="text" id="pc-flow-user-search" placeholder="사원명, 부서, 사번 검색..." />
|
||||||
|
<i data-lucide="search" class="icon-sm"></i>
|
||||||
|
</div>
|
||||||
|
<div id="pc-flow-user-suggestions" class="autocomplete-list hidden"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 3. 새 인수자 검색 (이동 시 노출) -->
|
||||||
|
<div id="target-user-search-container" class="form-group hidden relative">
|
||||||
|
<label>새 인수 사원 검색</label>
|
||||||
|
<div class="input-with-icon">
|
||||||
|
<input type="text" id="pc-flow-target-user-search" placeholder="사원명, 부서, 사번 검색..." />
|
||||||
|
<i data-lucide="search" class="icon-sm"></i>
|
||||||
|
</div>
|
||||||
|
<div id="pc-flow-target-user-suggestions" class="autocomplete-list hidden"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 4. 재고 PC 검색 (불출 시 노출) -->
|
||||||
|
<div id="stock-pc-search-container" class="form-group relative">
|
||||||
|
<label>3. 불출할 재고 PC 선택</label>
|
||||||
|
<div class="input-with-icon">
|
||||||
|
<input type="text" id="pc-flow-stock-search" placeholder="자산코드 또는 모델명 검색..." />
|
||||||
|
<i data-lucide="monitor" class="icon-sm"></i>
|
||||||
|
</div>
|
||||||
|
<div id="pc-flow-stock-suggestions" class="autocomplete-list hidden"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 5. 상세 공통 입력 -->
|
||||||
|
<div class="detail-grid-2col">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>처리 일자</label>
|
||||||
|
<input type="date" id="pc-flow-date" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>상세 사유</label>
|
||||||
|
<textarea id="pc-flow-details" rows="2" placeholder="미입력 시 기본 문구로 자동 입력됩니다."></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 오른쪽 영역: 선택 요약 & 사원 소유 자산 목록 -->
|
||||||
|
<div class="modal-history-area">
|
||||||
|
<div class="history-header">
|
||||||
|
<h3>선택 내역 요약</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="dynamic-row-container">
|
||||||
|
<!-- 사원 요약 카드 -->
|
||||||
|
<div id="summary-user-card" class="summary-info-card">
|
||||||
|
<div class="detail-label-sm">대상 사원</div>
|
||||||
|
<div id="summary-user-name" class="detail-value-lg">선택된 사원 없음</div>
|
||||||
|
<div id="summary-user-dept" class="detail-label-sm">-</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 인수 사원 요약 카드 (이동 전용) -->
|
||||||
|
<div id="summary-target-user-card" class="summary-info-card hidden bg-primary-light">
|
||||||
|
<div class="detail-label-sm">새 인수 사원</div>
|
||||||
|
<div id="summary-target-user-name" class="detail-value-lg">선택된 사원 없음</div>
|
||||||
|
<div id="summary-target-user-dept" class="detail-label-sm">-</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 대상 PC 자산 요약 카드 -->
|
||||||
|
<div id="summary-pc-card" class="summary-info-card">
|
||||||
|
<div class="detail-label-sm">대상 PC 자산</div>
|
||||||
|
<div id="summary-pc-code" class="detail-value-lg text-success">선택된 PC 없음</div>
|
||||||
|
<div id="summary-pc-model" class="detail-label-sm">-</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 사용자 보유 PC 목록 선택 (반납/이동 시) -->
|
||||||
|
<div id="user-pcs-container" class="form-group hidden">
|
||||||
|
<label>사원 보유 PC 선택 (클릭하여 매핑)</label>
|
||||||
|
<div id="user-pcs-list" class="user-pc-selection-list"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-footer">
|
||||||
|
<div></div>
|
||||||
|
<div class="footer-actions">
|
||||||
|
<button id="btn-cancel-pc-flow-modal" class="btn btn-outline">취소</button>
|
||||||
|
<button id="btn-submit-pc-flow" class="btn btn-primary">이동/반납 처리 완료</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const pcFlowModal = PCFlowModal.getInstance();
|
||||||
171
src/components/Modal/PartsMasterModal.ts
Normal file
171
src/components/Modal/PartsMasterModal.ts
Normal file
@@ -0,0 +1,171 @@
|
|||||||
|
import { state, savePartsMaster, deletePartsMaster } from '../../core/state';
|
||||||
|
import { BaseModal } from './BaseModal';
|
||||||
|
import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
|
||||||
|
import { createIcons, X, Save, Plus } from 'lucide';
|
||||||
|
import { UI_TEXT } from '../../core/schema';
|
||||||
|
|
||||||
|
class PartsMasterModal extends BaseModal {
|
||||||
|
constructor() {
|
||||||
|
super('parts-master', '부품 표준 정보');
|
||||||
|
}
|
||||||
|
|
||||||
|
protected renderFrameHTML(): string {
|
||||||
|
return `
|
||||||
|
<div id="parts-master-asset-modal" class="modal-overlay hidden">
|
||||||
|
<div class="modal-content narrow">
|
||||||
|
<div class="modal-header">
|
||||||
|
<div class="header-left">
|
||||||
|
<h2 id="parts-master-modal-title" class="modal-title">${this.title}</h2>
|
||||||
|
<div id="parts-master-header-identity" class="header-identity"></div>
|
||||||
|
</div>
|
||||||
|
<button id="btn-close-parts-master-modal" class="btn-icon" aria-label="닫기">×</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form id="parts-master-asset-form" class="grid-form vertical-form">
|
||||||
|
<input type="hidden" id="parts-master-id" name="id" />
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>부품 분류</label>
|
||||||
|
<select id="parts-master-category" name="category">
|
||||||
|
<option value="CPU">CPU</option>
|
||||||
|
<option value="GPU">GPU</option>
|
||||||
|
<option value="RAM">RAM</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>부품 표준 명칭</label>
|
||||||
|
<input type="text" id="parts-master-component-name" name="component_name" placeholder="예: Intel Core i7-14700K" required />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>성능 등급</label>
|
||||||
|
<input type="text" id="parts-master-score-tier" name="score_tier" placeholder="예: i7 / S / 최적" required />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>감점 점수 (양수로 입력)</label>
|
||||||
|
<input type="number" id="parts-master-deduction" name="deduction" placeholder="예: 5" required />
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button id="btn-delete-parts-master-asset" class="btn btn-outline btn-danger">삭제</button>
|
||||||
|
<div class="footer-actions">
|
||||||
|
<button id="btn-revert-parts-master-edit" class="btn btn-outline hidden">수정 취소</button>
|
||||||
|
<button id="btn-cancel-parts-master-modal" class="btn btn-outline">닫기</button>
|
||||||
|
<button id="btn-save-parts-master-asset" class="btn btn-primary">수정</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
protected initChildLogic(onSave: () => void, closeModals: () => void): void {
|
||||||
|
const saveBtn = document.getElementById('btn-save-parts-master-asset')!;
|
||||||
|
const revertBtn = document.getElementById('btn-revert-parts-master-edit')!;
|
||||||
|
const deleteBtn = document.getElementById('btn-delete-parts-master-asset')!;
|
||||||
|
|
||||||
|
saveBtn.addEventListener('click', async () => {
|
||||||
|
if (!this.currentAsset) return;
|
||||||
|
if (!this.isEditMode) {
|
||||||
|
this.setEditLockMode('edit');
|
||||||
|
this.isEditMode = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const category = (document.getElementById('parts-master-category') as HTMLSelectElement).value;
|
||||||
|
const compName = (document.getElementById('parts-master-component-name') as HTMLInputElement).value.trim();
|
||||||
|
const tier = (document.getElementById('parts-master-score-tier') as HTMLInputElement).value.trim();
|
||||||
|
const deductStr = (document.getElementById('parts-master-deduction') as HTMLInputElement).value;
|
||||||
|
|
||||||
|
if (!compName || !tier || deductStr === '') {
|
||||||
|
alert('모든 필드를 올바르게 입력해 주세요.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const updated = {
|
||||||
|
id: this.currentAsset.id || null,
|
||||||
|
category,
|
||||||
|
component_name: compName,
|
||||||
|
score_tier: tier,
|
||||||
|
deduction: parseInt(deductStr, 10)
|
||||||
|
};
|
||||||
|
|
||||||
|
if (await savePartsMaster(updated)) {
|
||||||
|
alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
|
||||||
|
onSave(); this.close(); closeModals();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
revertBtn.addEventListener('click', () => {
|
||||||
|
this.setEditLockMode('view');
|
||||||
|
if (this.currentAsset) this.fillFormData(this.currentAsset);
|
||||||
|
});
|
||||||
|
|
||||||
|
deleteBtn.addEventListener('click', async () => {
|
||||||
|
if (!this.currentAsset || !this.currentAsset.id) return;
|
||||||
|
if (!confirm('정말로 이 부품 마스터 정보를 삭제하시겠습니까?\n삭제 시 기존 등록 PC 중 이 부품명을 사용하는 PC의 자동완성 정합성 체크에 영향을 줄 수 있습니다.')) return;
|
||||||
|
|
||||||
|
if (await deletePartsMaster(Number(this.currentAsset.id))) {
|
||||||
|
alert('성공적으로 삭제되었습니다.');
|
||||||
|
onSave(); this.close(); closeModals();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
createIcons({ icons: { Plus, X, Save } });
|
||||||
|
}
|
||||||
|
|
||||||
|
protected fillFormData(asset: any): void {
|
||||||
|
setFieldValue('parts-master-id', asset.id || '');
|
||||||
|
setFieldValue('parts-master-category', asset.category || 'CPU');
|
||||||
|
setFieldValue('parts-master-component-name', asset.component_name || '');
|
||||||
|
setFieldValue('parts-master-score-tier', asset.score_tier || '');
|
||||||
|
setFieldValue('parts-master-deduction', asset.deduction !== undefined ? asset.deduction.toString() : '0');
|
||||||
|
this.updateHeaderIdentity(asset);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected onAfterOpen(asset: any, mode: string): void {
|
||||||
|
const titleEl = document.getElementById('parts-master-modal-title');
|
||||||
|
if (titleEl) {
|
||||||
|
titleEl.textContent = (mode === 'add') ? '신규 부품 마스터 등록' : '부품 마스터 상세 편집';
|
||||||
|
}
|
||||||
|
|
||||||
|
const deleteBtn = document.getElementById('btn-delete-parts-master-asset')!;
|
||||||
|
const saveBtn = document.getElementById('btn-save-parts-master-asset')!;
|
||||||
|
|
||||||
|
deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
|
||||||
|
|
||||||
|
if (mode === 'add' || mode === 'edit') {
|
||||||
|
saveBtn.textContent = (mode === 'add') ? '등록' : '저장';
|
||||||
|
saveBtn.style.display = 'block';
|
||||||
|
} else {
|
||||||
|
saveBtn.textContent = '수정';
|
||||||
|
saveBtn.style.display = 'block';
|
||||||
|
}
|
||||||
|
this.updateHeaderIdentity(asset);
|
||||||
|
}
|
||||||
|
|
||||||
|
private updateHeaderIdentity(asset: any) {
|
||||||
|
const container = document.getElementById('parts-master-header-identity');
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
if (this.currentMode === 'add') {
|
||||||
|
container.innerHTML = '<span class="badge badge-primary">신규 등록</span>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const cat = asset.category || '';
|
||||||
|
const name = asset.component_name || '';
|
||||||
|
|
||||||
|
container.innerHTML = `
|
||||||
|
<span class="asset-code-title">${name}</span>
|
||||||
|
<span class="service-type-badge">${cat}</span>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const partsMasterModal = new PartsMasterModal();
|
||||||
|
export function initPartsMasterModal(onSave: () => void, closeModals: () => void) { partsMasterModal.init(onSave, closeModals); }
|
||||||
|
export function openPartsMasterModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') { partsMasterModal.open(asset, mode); }
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
import { state, saveAsset, deleteAsset } from '../../core/state';
|
import { state, saveAsset, deleteAsset } from '../../core/state';
|
||||||
import { openModal, closeModals } from './BaseModal';
|
import { BaseModal } from './BaseModal';
|
||||||
import { openSwUserModal } from './SWUserModal';
|
import { openSwUserModal } from './SWUserModal';
|
||||||
import { createIcons, History, Plus, X, Save, Edit2, RotateCcw, Calendar } from 'lucide';
|
import { createIcons, History, Plus, X, Save, RotateCcw, Calendar, Users } from 'lucide';
|
||||||
import { CORP_LIST } from './SharedData';
|
import { CORP_LIST } from './SharedData';
|
||||||
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
||||||
import { API_BASE_URL } from '../../core/utils';
|
import { API_BASE_URL } from '../../core/utils';
|
||||||
@@ -9,438 +9,390 @@ import {
|
|||||||
generateOptionsHTML,
|
generateOptionsHTML,
|
||||||
setFieldValue,
|
setFieldValue,
|
||||||
getFieldValue,
|
getFieldValue,
|
||||||
setEditLock,
|
|
||||||
applyDateMask
|
applyDateMask
|
||||||
} from './ModalUtils';
|
} from './ModalUtils';
|
||||||
|
|
||||||
let currentSwAsset: any | null = null;
|
class SwAssetModal extends BaseModal {
|
||||||
let isEditMode = false;
|
constructor() {
|
||||||
|
super('sw', '소프트웨어 상세 정보');
|
||||||
|
}
|
||||||
|
|
||||||
const SW_MODAL_HTML = `
|
protected renderFrameHTML(): string {
|
||||||
<div id="sw-asset-modal" class="modal-overlay hidden">
|
return `
|
||||||
<div class="modal-content wide">
|
<div id="sw-asset-modal" class="modal-overlay hidden">
|
||||||
<div class="modal-header">
|
<div class="modal-content wide">
|
||||||
<h2 id="sw-modal-title">소프트웨어 상세 정보</h2>
|
<div class="modal-header">
|
||||||
<button id="btn-close-sw-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
|
<div class="header-left">
|
||||||
</div>
|
<h2 id="sw-modal-title" class="modal-title">${this.title}</h2>
|
||||||
<div class="modal-body">
|
<div id="sw-header-identity" class="header-identity"></div>
|
||||||
<div class="modal-body-split">
|
</div>
|
||||||
<div class="modal-form-area">
|
<button id="btn-close-sw-modal" class="btn-icon" aria-label="닫기">×</button>
|
||||||
<form id="sw-asset-form" class="grid-form">
|
</div>
|
||||||
<input type="hidden" id="sw-asset-id" name="id" />
|
<div class="modal-body">
|
||||||
|
<div class="modal-body-split">
|
||||||
|
<div class="modal-form-area">
|
||||||
|
<form id="sw-asset-form" class="grid-form">
|
||||||
|
<input type="hidden" id="sw-asset-id" name="id" />
|
||||||
|
|
||||||
<!-- Group 1: 기본 정보 (Identity) -->
|
<div class="form-section-title">기본 정보 (Identity)</div>
|
||||||
<div class="form-section-title">기본 정보 (Identity)</div>
|
<div class="form-group">
|
||||||
<div class="form-group">
|
<label>자산 유형</label>
|
||||||
<label for="sw-asset-type">자산 유형</label>
|
<select id="sw-asset-type" name="asset_type" required>
|
||||||
<select id="sw-asset-type" name="asset_type" required>
|
<option value="내부SW">내부SW</option>
|
||||||
<option value="내부SW">내부SW</option>
|
<option value="외부SW">외부SW</option>
|
||||||
<option value="외부SW">외부SW</option>
|
<option value="클라우드">클라우드</option>
|
||||||
<option value="클라우드">클라우드</option>
|
</select>
|
||||||
</select>
|
</div>
|
||||||
</div>
|
<div class="form-group">
|
||||||
<div class="form-group">
|
<label>${ASSET_SCHEMA.SW_FIELD.ui}</label>
|
||||||
<label for="sw-분야">${ASSET_SCHEMA.SW_FIELD.ui}</label>
|
<select id="sw-분야" name="sw_field" required>
|
||||||
<select id="sw-분야" name="sw_field" required>
|
<option value="업무공통">업무공통</option>
|
||||||
<option value="업무공통">업무공통</option>
|
<option value="개발S/W">개발S/W</option>
|
||||||
<option value="개발S/W">개발S/W</option>
|
<option value="디자인">디자인</option>
|
||||||
<option value="디자인">디자인</option>
|
<option value="설계S/W">설계S/W</option>
|
||||||
<option value="설계S/W">설계S/W</option>
|
</select>
|
||||||
</select>
|
</div>
|
||||||
</div>
|
<div class="form-group">
|
||||||
|
<label>${ASSET_SCHEMA.PURCHASE_CORP.ui}</label>
|
||||||
|
<select id="sw-법인" name="purchase_corp" required>${generateOptionsHTML(CORP_LIST)}</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group full-width">
|
||||||
|
<label>${ASSET_SCHEMA.PRODUCT_NAME.ui}</label>
|
||||||
|
<input type="text" id="sw-제품명" name="product_name" required />
|
||||||
|
</div>
|
||||||
|
<div class="form-group cloud-only">
|
||||||
|
<label>${ASSET_SCHEMA.DEV_OBJ.ui} / 플랫폼</label>
|
||||||
|
<input type="text" id="sw-플랫폼명" name="dev_objective" placeholder="개발목적 또는 플랫폼명" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
|
||||||
|
<input type="text" id="sw-부서" name="current_dept" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group sw-user-tracking">
|
||||||
|
<label>${ASSET_SCHEMA.CURRENT_USER.ui}</label>
|
||||||
|
<input type="text" id="sw-user-current" name="user_current" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group sw-user-tracking">
|
||||||
|
<label>${ASSET_SCHEMA.PREV_USER.ui}</label>
|
||||||
|
<input type="text" id="sw-previous-user" name="previous_user" />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-section-title">라이선스 및 계약 정보</div>
|
||||||
<label for="sw-법인">${ASSET_SCHEMA.PURCHASE_CORP.ui}</label>
|
<div class="form-group sw-standard-field">
|
||||||
<select id="sw-법인" name="purchase_corp" required>${generateOptionsHTML(CORP_LIST)}</select>
|
<label>${ASSET_SCHEMA.ASSET_COUNT.ui}</label>
|
||||||
</div>
|
<input type="number" id="sw-수량" name="asset_count" min="0" />
|
||||||
<div class="form-group full-width">
|
</div>
|
||||||
<label for="sw-제품명">${ASSET_SCHEMA.PRODUCT_NAME.ui}</label>
|
<div class="form-group sw-standard-field">
|
||||||
<input type="text" id="sw-제품명" name="product_name" required />
|
<label>${ASSET_SCHEMA.PURCHASE_AMOUNT.ui}</label>
|
||||||
</div>
|
<input type="text" id="sw-금액" name="purchase_amount" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" />
|
||||||
<div class="form-group cloud-only">
|
</div>
|
||||||
<label for="sw-플랫폼명">${ASSET_SCHEMA.DEV_OBJ.ui} / 플랫폼</label>
|
|
||||||
<input type="text" id="sw-플랫폼명" name="dev_objective" placeholder="개발목적 또는 플랫폼명" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="sw-부서">${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
|
|
||||||
<input type="text" id="sw-부서" name="current_dept" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group sw-user-tracking">
|
|
||||||
<label for="sw-user-current">${ASSET_SCHEMA.CURRENT_USER.ui}</label>
|
|
||||||
<input type="text" id="sw-user-current" name="user_current" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group sw-user-tracking">
|
|
||||||
<label for="sw-previous-user">${ASSET_SCHEMA.PREV_USER.ui}</label>
|
|
||||||
<input type="text" id="sw-previous-user" name="previous_user" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Group 2: 라이선스 및 계약 (License/Contract) -->
|
<div class="form-group cloud-only">
|
||||||
<div class="form-section-title">라이선스 및 계약 정보</div>
|
<label>${ASSET_SCHEMA.EMAIL_ACCOUNT.ui}</label>
|
||||||
<div class="form-group sw-standard-field">
|
<input type="text" id="sw-계정명" name="email_account" />
|
||||||
<label for="sw-수량">${ASSET_SCHEMA.ASSET_COUNT.ui}</label>
|
</div>
|
||||||
<input type="number" id="sw-수량" name="asset_count" min="0" />
|
<div class="form-group cloud-only">
|
||||||
</div>
|
<label>${ASSET_SCHEMA.PURCHASE_METHOD.ui}</label>
|
||||||
<div class="form-group sw-standard-field">
|
<select id="sw-결제수단" name="purchase_method">
|
||||||
<label for="sw-금액">${ASSET_SCHEMA.PURCHASE_AMOUNT.ui}</label>
|
<option value="">선택안함</option>
|
||||||
<input type="text" id="sw-금액" name="purchase_amount" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" />
|
<option value="법인카드">법인카드</option>
|
||||||
</div>
|
<option value="인보이스">인보이스</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Group 3: 클라우드 전용 정보 (Cloud Specific) -->
|
<div class="form-section-title">관리 및 비고</div>
|
||||||
<div class="form-group cloud-only">
|
<div class="form-group sw-standard-field">
|
||||||
<label for="sw-계정명">${ASSET_SCHEMA.EMAIL_ACCOUNT.ui}</label>
|
<label>${ASSET_SCHEMA.PURCHASE_DATE.ui}</label>
|
||||||
<input type="text" id="sw-계정명" name="email_account" />
|
<div class="input-with-btn">
|
||||||
</div>
|
<input type="text" id="sw-구매일" name="purchase_date" />
|
||||||
<div class="form-group cloud-only">
|
<button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-구매일-picker'); p.value = document.getElementById('sw-구매일').value; p.showPicker();">
|
||||||
<label for="sw-결제수단">${ASSET_SCHEMA.PURCHASE_METHOD.ui}</label>
|
<i data-lucide="calendar"></i>
|
||||||
<select id="sw-결제수단" name="purchase_method">
|
</button>
|
||||||
<option value="">선택안함</option>
|
<input type="date" id="sw-구매일-picker" class="hidden-picker" onchange="document.getElementById('sw-구매일').value = this.value" tabindex="-1" />
|
||||||
<option value="법인카드">법인카드</option>
|
</div>
|
||||||
<option value="인보이스">인보이스</option>
|
</div>
|
||||||
</select>
|
<div class="form-group sw-standard-field">
|
||||||
</div>
|
<label>${ASSET_SCHEMA.PURCHASE_VENDOR.ui}</label>
|
||||||
|
<input type="text" id="sw-납품업체" name="purchase_vendor" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group sw-standard-field">
|
||||||
|
<label>${ASSET_SCHEMA.DEV_MGR.ui}</label>
|
||||||
|
<input type="text" id="sw-개발담당자" name="dev_manager" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group sw-standard-field">
|
||||||
|
<label>${ASSET_SCHEMA.PLANNING_MGR.ui}</label>
|
||||||
|
<input type="text" id="sw-기획담당자" name="planning_manager" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group sw-standard-field">
|
||||||
|
<label>${ASSET_SCHEMA.SALES_MGR.ui}</label>
|
||||||
|
<input type="text" id="sw-영업담당자" name="sales_manager" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group sw-standard-field" id="sw-expiry-group">
|
||||||
|
<label>${ASSET_SCHEMA.EXPIRED_DATE.ui}</label>
|
||||||
|
<div class="input-with-btn">
|
||||||
|
<input type="text" id="sw-만료일" name="expiry_date" />
|
||||||
|
<button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-만료일-picker'); p.value = document.getElementById('sw-만료일').value; p.showPicker();">
|
||||||
|
<i data-lucide="calendar"></i>
|
||||||
|
</button>
|
||||||
|
<input type="date" id="sw-만료일-picker" class="hidden-picker" onchange="document.getElementById('sw-만료일').value = this.value" tabindex="-1" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group full-width">
|
||||||
|
<label>${ASSET_SCHEMA.MEMO.ui}</label>
|
||||||
|
<textarea id="sw-비고" name="memo" rows="2"></textarea>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
<!-- Group 4: 관리 정보 (Management) -->
|
<div id="sw-user-section" class="user-management-section">
|
||||||
<div class="form-section-title">관리 및 비고</div>
|
<button type="button" id="btn-open-sw-user" class="btn btn-outline btn-sm" title="사용자 관리">
|
||||||
<div class="form-group sw-standard-field">
|
<i data-lucide="users"></i> 사용자 관리
|
||||||
<label for="sw-구매일">${ASSET_SCHEMA.PURCHASE_DATE.ui}</label>
|
|
||||||
<div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
|
|
||||||
<input type="text" id="sw-구매일" name="purchase_date" style="flex:1;" />
|
|
||||||
<button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-구매일-picker'); p.value = document.getElementById('sw-구매일').value; p.showPicker();" style="padding:0.25rem;">
|
|
||||||
<i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
|
|
||||||
</button>
|
</button>
|
||||||
<input type="date" id="sw-구매일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('sw-구매일').value = this.value" tabindex="-1" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group sw-standard-field">
|
|
||||||
<label for="sw-납품업체">${ASSET_SCHEMA.PURCHASE_VENDOR.ui}</label>
|
<div class="modal-history-area">
|
||||||
<input type="text" id="sw-납품업체" name="purchase_vendor" />
|
<div class="history-header">
|
||||||
</div>
|
<h3><i data-lucide="history"></i> 업데이트 내역</h3>
|
||||||
<div class="form-group sw-standard-field">
|
<button type="button" id="btn-open-sw-update" class="btn btn-outline btn-sm">
|
||||||
<label for="sw-개발담당자">${ASSET_SCHEMA.DEV_MGR.ui}</label>
|
계약 업데이트 <i data-lucide="rotate-ccw"></i>
|
||||||
<input type="text" id="sw-개발담당자" name="dev_manager" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group sw-standard-field">
|
|
||||||
<label for="sw-기획담당자">${ASSET_SCHEMA.PLANNING_MGR.ui}</label>
|
|
||||||
<input type="text" id="sw-기획담당자" name="planning_manager" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group sw-standard-field">
|
|
||||||
<label for="sw-영업담당자">${ASSET_SCHEMA.SALES_MGR.ui}</label>
|
|
||||||
<input type="text" id="sw-영업담당자" name="sales_manager" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group sw-standard-field" id="sw-expiry-group">
|
|
||||||
<label for="sw-만료일">${ASSET_SCHEMA.EXPIRED_DATE.ui}</label>
|
|
||||||
<div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
|
|
||||||
<input type="text" id="sw-만료일" name="expiry_date" style="flex:1;" />
|
|
||||||
<button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-만료일-picker'); p.value = document.getElementById('sw-만료일').value; p.showPicker();" style="padding:0.25rem;">
|
|
||||||
<i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
|
|
||||||
</button>
|
</button>
|
||||||
<input type="date" id="sw-만료일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('sw-만료일').value = this.value" tabindex="-1" />
|
</div>
|
||||||
|
<div id="sw-history-list" class="history-timeline"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button id="btn-delete-sw-asset" class="btn btn-outline btn-danger">삭제</button>
|
||||||
|
<div class="footer-actions">
|
||||||
|
<button id="btn-revert-sw-edit" class="btn btn-outline hidden">수정 취소</button>
|
||||||
|
<button id="btn-cancel-sw-modal" class="btn btn-outline">닫기</button>
|
||||||
|
<button id="btn-save-sw-asset" class="btn btn-primary">수정</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 계약 업데이트 서브 모달 -->
|
||||||
|
<div id="sw-update-modal" class="modal-overlay hidden sub-modal">
|
||||||
|
<div class="modal-content narrow">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h2 class="modal-title">계약 업데이트 반영</h2>
|
||||||
|
<button id="btn-close-sw-update" class="btn-icon">×</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="grid-form vertical-form">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>업데이트 일자</label>
|
||||||
|
<input type="date" id="sw-update-date" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group sub-sw-update">
|
||||||
|
<label>새로운 계약 기간</label>
|
||||||
|
<div class="input-with-btn">
|
||||||
|
<input type="text" id="sw-update-start" placeholder="YYYY-MM-DD" />
|
||||||
|
<span>~</span>
|
||||||
|
<input type="text" id="sw-update-end" placeholder="YYYY-MM-DD" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group full-width">
|
<div class="form-group">
|
||||||
<label for="sw-비고">${ASSET_SCHEMA.MEMO.ui}</label>
|
<label>발생 비용</label>
|
||||||
<textarea id="sw-비고" name="memo" rows="2"></textarea>
|
<input type="text" id="sw-update-cost" oninput="this.value = this.value.replace(/[^0-9]/g, '') ? Number(this.value.replace(/[^0-9]/g, '')).toLocaleString() : ''" placeholder="ex) 500,000" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>상세 내용 (메모)</label>
|
||||||
|
<input type="text" id="sw-update-note" placeholder="예: 25년도 구독 연장 결제 완료" />
|
||||||
</div>
|
</div>
|
||||||
</form>
|
|
||||||
|
|
||||||
<div id="sw-user-section" class="user-management-section" style="margin-top: 2rem; border-top: 1px solid var(--border-color); padding-top: 1.5rem;">
|
|
||||||
<button type="button" id="btn-open-sw-user" class="btn btn-outline btn-sm" title="사용자 관리">
|
|
||||||
<i data-lucide="users" style="width:16px; height:16px; margin-right:4px;"></i> 사용자 관리
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
<div class="modal-history-area">
|
<div></div>
|
||||||
<div class="history-header" style="display:flex; justify-content:space-between; align-items:center;">
|
<div class="footer-actions">
|
||||||
<h3><i data-lucide="history" style="width:16px; height:16px;"></i> 업데이트 내역</h3>
|
<button id="btn-cancel-sw-update" class="btn btn-outline">취소</button>
|
||||||
<button type="button" id="btn-open-sw-update" class="btn btn-outline btn-sm">
|
<button id="btn-save-sw-update" class="btn btn-primary">반영하기</button>
|
||||||
계약 업데이트 <i data-lucide="refresh-ccw" style="width:14px; height:14px;"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div id="sw-history-list" class="history-timeline"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button id="btn-delete-sw-asset" class="btn btn-outline btn-danger">삭제</button>
|
|
||||||
<div class="footer-actions">
|
|
||||||
<button id="btn-revert-sw-edit" class="btn btn-outline hidden">수정 취소</button>
|
|
||||||
<button id="btn-cancel-sw-modal" class="btn btn-outline">닫기</button>
|
|
||||||
<button id="btn-save-sw-asset" class="btn btn-primary">수정</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 계약/유지보수 기간 갱신 및 업데이트 모달 -->
|
|
||||||
<div id="sw-update-modal" class="modal-overlay hidden" style="z-index: 1100;">
|
|
||||||
<div class="modal-content" style="max-width: 500px;">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h2>계약 업데이트 반영</h2>
|
|
||||||
<button id="btn-close-sw-update" class="btn-icon"><i data-lucide="x"></i></button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<div class="grid-form" style="grid-template-columns: 1fr;">
|
|
||||||
<div class="form-group">
|
|
||||||
<label>업데이트 일자</label>
|
|
||||||
<input type="date" id="sw-update-date" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group sub-sw-update">
|
|
||||||
<label>새로운 계약 기간</label>
|
|
||||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
|
||||||
<input type="text" id="sw-update-start" placeholder="YYYY-MM-DD" style="flex: 1;" />
|
|
||||||
<span>~</span>
|
|
||||||
<input type="text" id="sw-update-end" placeholder="YYYY-MM-DD" style="flex: 1;" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
|
||||||
<label>발생 비용</label>
|
|
||||||
<input type="text" id="sw-update-cost" oninput="this.value = this.value.replace(/[^0-9]/g, '') ? Number(this.value.replace(/[^0-9]/g, '')).toLocaleString() : ''" placeholder="ex) 500,000" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>상세 내용 (메모)</label>
|
|
||||||
<input type="text" id="sw-update-note" placeholder="예: 25년도 구독 연장 결제 완료" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<style>
|
||||||
<div></div>
|
.hidden-picker {
|
||||||
<div class="footer-actions">
|
position: absolute;
|
||||||
<button id="btn-cancel-sw-update" class="btn btn-outline">취소</button>
|
width: 0;
|
||||||
<button id="btn-save-sw-update" class="btn btn-primary">반영하기</button>
|
height: 0;
|
||||||
</div>
|
opacity: 0;
|
||||||
</div>
|
pointer-events: none;
|
||||||
</div>
|
}
|
||||||
</div>
|
</style>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
function applySwTypeUI(type: string) {
|
|
||||||
const cloudFields = document.querySelectorAll('.cloud-only');
|
|
||||||
const swFields = document.querySelectorAll('.sw-standard-field');
|
|
||||||
const userSection = document.getElementById('sw-user-section');
|
|
||||||
const expiryGroup = document.getElementById('sw-expiry-group');
|
|
||||||
const userTracking = document.querySelectorAll('.sw-user-tracking');
|
|
||||||
|
|
||||||
if (type === '클라우드') {
|
|
||||||
cloudFields.forEach(el => (el as HTMLElement).style.display = 'flex');
|
|
||||||
swFields.forEach(el => (el as HTMLElement).style.display = 'none');
|
|
||||||
if (userSection) userSection.style.display = 'none';
|
|
||||||
userTracking.forEach(el => (el as HTMLElement).style.display = 'none');
|
|
||||||
} else {
|
|
||||||
cloudFields.forEach(el => (el as HTMLElement).style.display = 'none');
|
|
||||||
swFields.forEach(el => (el as HTMLElement).style.display = 'flex');
|
|
||||||
if (userSection) userSection.style.display = 'block';
|
|
||||||
|
|
||||||
if (type === '외부SW' || type === '내부SW') {
|
|
||||||
if (expiryGroup) expiryGroup.style.display = 'flex';
|
|
||||||
|
|
||||||
// 외부SW에만 현 사용자/직전 사용자 표시 (내부SW는 user tracking 제외 요청됨)
|
|
||||||
userTracking.forEach(el => (el as HTMLElement).style.display = (type === '외부SW') ? 'flex' : 'none');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function fillSwFormData(asset: any) {
|
|
||||||
setFieldValue('sw-asset-id', asset.id);
|
|
||||||
setFieldValue('sw-asset-type', asset.asset_type || asset.type);
|
|
||||||
setFieldValue('sw-분야', asset.sw_field || '');
|
|
||||||
setFieldValue('sw-법인', asset.purchase_corp || '');
|
|
||||||
|
|
||||||
setFieldValue('sw-부서', asset.current_dept || '');
|
|
||||||
setFieldValue('sw-user-current', asset.user_current || '');
|
|
||||||
setFieldValue('sw-previous-user', asset.previous_user || '');
|
|
||||||
setFieldValue('sw-previous_dept', asset.previous_dept || '');
|
|
||||||
setFieldValue('sw-제품명', asset.product_name || '');
|
|
||||||
setFieldValue('sw-수량', asset.asset_count || '');
|
|
||||||
setFieldValue('sw-금액', asset.purchase_amount || '');
|
|
||||||
setFieldValue('sw-구매일', asset.purchase_date || '');
|
|
||||||
setFieldValue('sw-시작일', asset.start_date || '');
|
|
||||||
setFieldValue('sw-납품업체', asset.purchase_vendor || '');
|
|
||||||
setFieldValue('sw-개발담당자', asset.dev_manager || '');
|
|
||||||
setFieldValue('sw-기획담당자', asset.planning_manager || '');
|
|
||||||
setFieldValue('sw-영업담당자', asset.sales_manager || '');
|
|
||||||
setFieldValue('sw-비고', asset.memo || '');
|
|
||||||
|
|
||||||
if (asset.type === '클라우드' || asset.asset_type === '클라우드') {
|
|
||||||
setFieldValue('sw-플랫폼명', asset.dev_objective || '');
|
|
||||||
setFieldValue('sw-계정명', asset.email_account || '');
|
|
||||||
setFieldValue('sw-결제수단', asset.purchase_method || '');
|
|
||||||
} else {
|
|
||||||
setFieldValue('sw-만료일', asset.expiry_date || '');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
renderSwHistory(asset.id);
|
protected initChildLogic(onSave: () => void, closeModals: () => void): void {
|
||||||
}
|
const saveBtn = document.getElementById('btn-save-sw-asset')!;
|
||||||
|
const revertBtn = document.getElementById('btn-revert-sw-edit')!;
|
||||||
|
const deleteBtn = document.getElementById('btn-delete-sw-asset')!;
|
||||||
|
const typeSelect = document.getElementById('sw-asset-type') as HTMLSelectElement;
|
||||||
|
const userAssignBtn = document.getElementById('btn-open-sw-user')!;
|
||||||
|
const btnOpenUpdate = document.getElementById('btn-open-sw-update')!;
|
||||||
|
|
||||||
function renderSwHistory(swId: string) {
|
typeSelect?.addEventListener('change', () => this.applySwTypeUI(typeSelect.value));
|
||||||
const container = document.getElementById('sw-history-list');
|
|
||||||
if (!container) return;
|
|
||||||
const logs = (state.masterData.logs || []).filter(l => l.assetId === swId);
|
|
||||||
if (logs.length === 0) {
|
|
||||||
container.innerHTML = '<div class="empty-history">수정 이력이 없습니다.</div>';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
container.innerHTML = logs.map(l => `
|
|
||||||
<div class="history-item">
|
|
||||||
<div class="history-date">${l.date}</div>
|
|
||||||
<div class="history-user">${l.user}</div>
|
|
||||||
<div class="history-details">${l.details}</div>
|
|
||||||
</div>
|
|
||||||
`).join('');
|
|
||||||
}
|
|
||||||
|
|
||||||
export function openSwModal(asset: any, mode: 'view' | 'add' | 'edit' = 'view') {
|
['sw-구매일', 'sw-시작일', 'sw-만료일', 'sw-update-start', 'sw-update-end'].forEach(id => {
|
||||||
currentSwAsset = asset;
|
const el = document.getElementById(id) as HTMLInputElement;
|
||||||
const modal = document.getElementById('sw-asset-modal')!;
|
if (el) applyDateMask(el);
|
||||||
|
|
||||||
setEditLock('sw-asset-form', mode, {
|
|
||||||
saveBtnId: 'btn-save-sw-asset',
|
|
||||||
revertBtnId: 'btn-revert-sw-edit'
|
|
||||||
});
|
|
||||||
|
|
||||||
isEditMode = (mode === 'add' || mode === 'edit');
|
|
||||||
|
|
||||||
fillSwFormData(asset);
|
|
||||||
applySwTypeUI(asset.asset_type || asset.type);
|
|
||||||
|
|
||||||
modal.classList.remove('hidden');
|
|
||||||
createIcons({ icons: { X, History, Plus } });
|
|
||||||
}
|
|
||||||
|
|
||||||
export function initSwModal(onSave: () => void, closeModals: () => void) {
|
|
||||||
if (!document.getElementById('sw-asset-modal')) {
|
|
||||||
document.body.insertAdjacentHTML('beforeend', SW_MODAL_HTML);
|
|
||||||
}
|
|
||||||
|
|
||||||
const form = document.getElementById('sw-asset-form') as HTMLFormElement;
|
|
||||||
const saveBtn = document.getElementById('btn-save-sw-asset')!;
|
|
||||||
const revertBtn = document.getElementById('btn-revert-sw-edit')!;
|
|
||||||
const deleteBtn = document.getElementById('btn-delete-sw-asset')!;
|
|
||||||
const userAssignBtn = document.getElementById('btn-open-sw-user')!;
|
|
||||||
const btnOpenUpdate = document.getElementById('btn-open-sw-update')!;
|
|
||||||
const typeSelect = document.getElementById('sw-asset-type') as HTMLSelectElement;
|
|
||||||
|
|
||||||
typeSelect?.addEventListener('change', () => {
|
|
||||||
applySwTypeUI(typeSelect.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
['sw-구매일', 'sw-시작일', 'sw-만료일', 'sw-update-start', 'sw-update-end'].forEach(id => {
|
|
||||||
applyDateMask(document.getElementById(id) as HTMLInputElement);
|
|
||||||
});
|
|
||||||
|
|
||||||
createIcons({ icons: { Calendar } });
|
|
||||||
|
|
||||||
const closeModalAction = () => { closeModals(); isEditMode = false; };
|
|
||||||
document.getElementById('btn-close-sw-modal')?.addEventListener('click', closeModalAction);
|
|
||||||
document.getElementById('btn-cancel-sw-modal')?.addEventListener('click', closeModalAction);
|
|
||||||
|
|
||||||
revertBtn.addEventListener('click', () => {
|
|
||||||
setEditLock('sw-asset-form', 'view', {
|
|
||||||
saveBtnId: 'btn-save-sw-asset',
|
|
||||||
revertBtnId: 'btn-revert-sw-edit'
|
|
||||||
});
|
});
|
||||||
isEditMode = false;
|
|
||||||
if (currentSwAsset) fillSwFormData(currentSwAsset);
|
|
||||||
});
|
|
||||||
|
|
||||||
saveBtn.addEventListener('click', async () => {
|
userAssignBtn.addEventListener('click', () => {
|
||||||
if (!currentSwAsset) return;
|
if (this.currentAsset) openSwUserModal(this.currentAsset);
|
||||||
if (!isEditMode) {
|
});
|
||||||
setEditLock('sw-asset-form', 'edit', {
|
|
||||||
saveBtnId: 'btn-save-sw-asset',
|
const subModal = document.getElementById('sw-update-modal')!;
|
||||||
revertBtnId: 'btn-revert-sw-edit'
|
const closeUpdate = () => subModal.classList.add('hidden');
|
||||||
|
document.getElementById('btn-close-sw-update')?.addEventListener('click', closeUpdate);
|
||||||
|
document.getElementById('btn-cancel-sw-update')?.addEventListener('click', closeUpdate);
|
||||||
|
|
||||||
|
btnOpenUpdate?.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!this.isEditMode) { alert('자산을 수정 모드로 변경한 후 업데이트를 진행해주세요.'); return; }
|
||||||
|
subModal.classList.remove('hidden');
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('btn-save-sw-update')?.addEventListener('click', async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const date = (document.getElementById('sw-update-date') as HTMLInputElement).value;
|
||||||
|
const start = (document.getElementById('sw-update-start') as HTMLInputElement).value;
|
||||||
|
const end = (document.getElementById('sw-update-end') as HTMLInputElement).value;
|
||||||
|
const cost = (document.getElementById('sw-update-cost') as HTMLInputElement).value;
|
||||||
|
const note = (document.getElementById('sw-update-note') as HTMLInputElement).value;
|
||||||
|
|
||||||
|
if (start) setFieldValue('sw-시작일', start);
|
||||||
|
if (end) setFieldValue('sw-만료일', end);
|
||||||
|
if (cost) setFieldValue('sw-금액', cost);
|
||||||
|
|
||||||
|
const log = { assetId: this.currentAsset.id, date, details: `[계약갱신] ${note} (${start} ~ ${end}, 비용: ${cost})`, user: '관리자' };
|
||||||
|
await fetch(`${API_BASE_URL}/api/asset/history/batch`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify([...state.masterData.logs, log])
|
||||||
});
|
});
|
||||||
isEditMode = true;
|
|
||||||
|
closeUpdate(); onSave();
|
||||||
|
});
|
||||||
|
|
||||||
|
revertBtn.addEventListener('click', () => {
|
||||||
|
this.setEditLockMode('view');
|
||||||
|
if (this.currentAsset) this.fillFormData(this.currentAsset);
|
||||||
|
});
|
||||||
|
|
||||||
|
saveBtn.addEventListener('click', async () => {
|
||||||
|
if (!this.currentAsset) return;
|
||||||
|
if (!this.isEditMode) { this.setEditLockMode('edit'); this.isEditMode = true; return; }
|
||||||
|
|
||||||
|
const type = getFieldValue('sw-asset-type');
|
||||||
|
const formData = new FormData(this.formEl!);
|
||||||
|
const updated = { ...this.currentAsset };
|
||||||
|
formData.forEach((value, key) => { updated[key] = value; });
|
||||||
|
|
||||||
|
let categoryKey = (type === '내부SW') ? 'swInternal' : (type === '클라우드' ? 'cloud' : 'swExternal');
|
||||||
|
if (await saveAsset(categoryKey, updated)) { onSave(); this.close(); closeModals(); }
|
||||||
|
});
|
||||||
|
|
||||||
|
deleteBtn.addEventListener('click', async () => {
|
||||||
|
if (!this.currentAsset || !confirm(UI_TEXT.MESSAGES.CONFIRM_DELETE)) return;
|
||||||
|
const type = this.currentAsset.asset_type || this.currentAsset.type;
|
||||||
|
let categoryKey = (type === '내부SW') ? 'swInternal' : (type === '클라우드' ? 'cloud' : 'swExternal');
|
||||||
|
if (await deleteAsset(categoryKey, this.currentAsset.id)) {
|
||||||
|
alert('성공적으로 삭제되었습니다.'); onSave(); this.close(); closeModals();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
createIcons({ icons: { History, Plus, Save, Calendar, Users, RotateCcw } });
|
||||||
|
}
|
||||||
|
|
||||||
|
protected fillFormData(asset: any): void {
|
||||||
|
setFieldValue('sw-asset-id', asset.id);
|
||||||
|
setFieldValue('sw-asset-type', asset.asset_type || asset.type);
|
||||||
|
setFieldValue('sw-분야', asset.sw_field || '');
|
||||||
|
setFieldValue('sw-법인', asset.purchase_corp || '');
|
||||||
|
setFieldValue('sw-부서', asset.current_dept || '');
|
||||||
|
setFieldValue('sw-user-current', asset.user_current || '');
|
||||||
|
setFieldValue('sw-previous-user', asset.previous_user || '');
|
||||||
|
setFieldValue('sw-제품명', asset.product_name || '');
|
||||||
|
setFieldValue('sw-수량', asset.asset_count || '');
|
||||||
|
setFieldValue('sw-금액', asset.purchase_amount || '');
|
||||||
|
setFieldValue('sw-구매일', asset.purchase_date || '');
|
||||||
|
setFieldValue('sw-납품업체', asset.purchase_vendor || '');
|
||||||
|
setFieldValue('sw-개발담당자', asset.dev_manager || '');
|
||||||
|
setFieldValue('sw-기획담당자', asset.planning_manager || '');
|
||||||
|
setFieldValue('sw-영업담당자', asset.sales_manager || '');
|
||||||
|
setFieldValue('sw-비고', asset.memo || '');
|
||||||
|
|
||||||
|
if (asset.type === '클라우드' || asset.asset_type === '클라우드') {
|
||||||
|
setFieldValue('sw-플랫폼명', asset.dev_objective || '');
|
||||||
|
setFieldValue('sw-계정명', asset.email_account || '');
|
||||||
|
setFieldValue('sw-결제수단', asset.purchase_method || '');
|
||||||
|
} else {
|
||||||
|
setFieldValue('sw-만료일', asset.expiry_date || '');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.renderHistory(asset.id);
|
||||||
|
this.updateHeaderIdentity(asset);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected onAfterOpen(asset: any, mode: string): void {
|
||||||
|
this.applySwTypeUI(asset.asset_type || asset.type);
|
||||||
|
this.updateHeaderIdentity(asset);
|
||||||
|
}
|
||||||
|
|
||||||
|
private updateHeaderIdentity(asset: any) {
|
||||||
|
const container = document.getElementById('sw-header-identity');
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
if (this.currentMode === 'add') {
|
||||||
|
container.innerHTML = '<span class="badge badge-primary">신규 등록</span>';
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const type = getFieldValue('sw-asset-type');
|
const type = getFieldValue('sw-asset-type') || asset.asset_type || asset.type || '';
|
||||||
const formData = new FormData(form);
|
const name = getFieldValue('sw-제품명') || asset.product_name || '';
|
||||||
const updated: any = { ...currentSwAsset };
|
const corp = getFieldValue('sw-법인') || asset.purchase_corp || '';
|
||||||
formData.forEach((value, key) => {
|
|
||||||
updated[key] = value;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Mapping for generic saveAsset
|
container.innerHTML = `
|
||||||
let categoryKey = 'swExternal';
|
<span class="asset-code-title">${name}</span>
|
||||||
if (type === '내부SW') categoryKey = 'swInternal';
|
<span class="service-type-badge">${corp}</span>
|
||||||
else if (type === '클라우드') categoryKey = 'cloud';
|
<span class="asset-type-label">${type}</span>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
const success = await saveAsset(categoryKey, updated);
|
private applySwTypeUI(type: string) {
|
||||||
if (success) {
|
const cloudFields = document.querySelectorAll('.cloud-only');
|
||||||
onSave();
|
const swFields = document.querySelectorAll('.sw-standard-field');
|
||||||
closeModalAction();
|
const userSection = document.getElementById('sw-user-section');
|
||||||
|
const expiryGroup = document.getElementById('sw-expiry-group');
|
||||||
|
const userTracking = document.querySelectorAll('.sw-user-tracking');
|
||||||
|
|
||||||
|
if (type === '클라우드') {
|
||||||
|
cloudFields.forEach(el => (el as HTMLElement).style.display = 'flex');
|
||||||
|
swFields.forEach(el => (el as HTMLElement).style.display = 'none');
|
||||||
|
if (userSection) userSection.style.display = 'none';
|
||||||
|
userTracking.forEach(el => (el as HTMLElement).style.display = 'none');
|
||||||
|
} else {
|
||||||
|
cloudFields.forEach(el => (el as HTMLElement).style.display = 'none');
|
||||||
|
swFields.forEach(el => (el as HTMLElement).style.display = 'flex');
|
||||||
|
if (userSection) userSection.style.display = 'block';
|
||||||
|
if (type === '외부SW' || type === '내부SW') {
|
||||||
|
if (expiryGroup) expiryGroup.style.display = 'flex';
|
||||||
|
userTracking.forEach(el => (el as HTMLElement).style.display = (type === '외부SW') ? 'flex' : 'none');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
|
||||||
deleteBtn.addEventListener('click', async () => {
|
private renderHistory(swId: string) {
|
||||||
if (!currentSwAsset) return;
|
const container = document.getElementById('sw-history-list');
|
||||||
if (!confirm(UI_TEXT.MESSAGES.CONFIRM_DELETE)) return;
|
if (!container) return;
|
||||||
|
const logs = (state.masterData.logs || []).filter(l => l.asset_id === swId);
|
||||||
const type = currentSwAsset.asset_type || currentSwAsset.type;
|
if (logs.length === 0) { container.innerHTML = '<div class="empty-history">수정 이력이 없습니다.</div>'; return; }
|
||||||
let categoryKey = 'swExternal';
|
container.innerHTML = logs.map(l => `<div class="history-item"><div class="history-date">${l.log_date || ''}</div><div class="history-user">${l.log_user || '시스템'}</div><div class="history-details">${l.details}</div></div>`).join('');
|
||||||
if (type === '내부SW') categoryKey = 'swInternal';
|
}
|
||||||
else if (type === '클라우드') categoryKey = 'cloud';
|
|
||||||
|
|
||||||
const success = await deleteAsset(categoryKey, currentSwAsset.id);
|
|
||||||
if (success) {
|
|
||||||
alert('성공적으로 삭제되었습니다.');
|
|
||||||
onSave(); // Refresh list
|
|
||||||
closeModalAction();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
userAssignBtn.addEventListener('click', () => {
|
|
||||||
if (currentSwAsset) openSwUserModal(currentSwAsset);
|
|
||||||
});
|
|
||||||
|
|
||||||
// 자산 업데이트(계약 갱신) 모달 로직
|
|
||||||
const subModal = document.getElementById('sw-update-modal')!;
|
|
||||||
const btnCloseUpdate = document.getElementById('btn-close-sw-update')!;
|
|
||||||
const btnCancelUpdate = document.getElementById('btn-cancel-sw-update')!;
|
|
||||||
const btnSaveUpdate = document.getElementById('btn-save-sw-update')!;
|
|
||||||
|
|
||||||
const closeUpdateModal = () => subModal.classList.add('hidden');
|
|
||||||
btnCloseUpdate?.addEventListener('click', closeUpdateModal);
|
|
||||||
btnCancelUpdate?.addEventListener('click', closeUpdateModal);
|
|
||||||
|
|
||||||
btnOpenUpdate?.addEventListener('click', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!isEditMode) {
|
|
||||||
alert('자산을 수정 모드로 변경한 후 업데이트를 진행해주세요.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
subModal.classList.remove('hidden');
|
|
||||||
});
|
|
||||||
|
|
||||||
btnSaveUpdate?.addEventListener('click', async (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
const date = (document.getElementById('sw-update-date') as HTMLInputElement).value;
|
|
||||||
const start = (document.getElementById('sw-update-start') as HTMLInputElement).value;
|
|
||||||
const end = (document.getElementById('sw-update-end') as HTMLInputElement).value;
|
|
||||||
const cost = (document.getElementById('sw-update-cost') as HTMLInputElement).value;
|
|
||||||
const note = (document.getElementById('sw-update-note') as HTMLInputElement).value;
|
|
||||||
|
|
||||||
if (start) setFieldValue('sw-시작일', start);
|
|
||||||
if (end) setFieldValue('sw-만료일', end);
|
|
||||||
if (cost) setFieldValue('sw-금액', cost);
|
|
||||||
|
|
||||||
// Save as log
|
|
||||||
const log = {
|
|
||||||
assetId: currentSwAsset.id,
|
|
||||||
date,
|
|
||||||
details: `[계약갱신] ${note} (${start} ~ ${end}, 비용: ${cost})`,
|
|
||||||
user: '관리자'
|
|
||||||
};
|
|
||||||
|
|
||||||
// Call generic API for logs (could be added to state.ts)
|
|
||||||
await fetch(`${API_BASE_URL}/api/asset/history/batch`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify([...state.masterData.logs, log])
|
|
||||||
});
|
|
||||||
|
|
||||||
closeUpdateModal();
|
|
||||||
onSave();
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const swModal = new SwAssetModal();
|
||||||
|
export function initSwModal(onSave: () => void, closeModals: () => void) { swModal.init(onSave, closeModals); }
|
||||||
|
export function openSwModal(asset: any, mode: 'view' | 'add' | 'edit' = 'view') { swModal.open(asset, mode); }
|
||||||
|
|||||||
@@ -1,280 +1,270 @@
|
|||||||
import { state } from '../../core/state';
|
import { state } from '../../core/state';
|
||||||
import { SoftwareAsset, SWUser } from '../../core/excelHandler';
|
import { BaseModal } from './BaseModal';
|
||||||
import { openModal } from './BaseModal';
|
import { createIcons, Edit2, X, Paperclip, Calendar, Plus } from 'lucide';
|
||||||
import { createIcons, Edit2, X, Paperclip, Calendar } from 'lucide';
|
import { ORG_LIST } from './SharedData';
|
||||||
import { CORP_LIST, ORG_LIST } from './SharedData';
|
|
||||||
import { generateOptionsHTML, setFieldValue, getFieldValue, applyDateMask } from './ModalUtils';
|
import { generateOptionsHTML, setFieldValue, getFieldValue, applyDateMask } from './ModalUtils';
|
||||||
|
|
||||||
let currentSwUserAsset: SoftwareAsset | null = null;
|
class SwUserModal extends BaseModal {
|
||||||
let tempSwUsers: any[] = [];
|
private tempSwUsers: any[] = [];
|
||||||
|
|
||||||
const SW_USER_MODAL_HTML = `
|
constructor() {
|
||||||
<div id="sw-user-modal" class="modal-overlay hidden">
|
super('sw-user', '소프트웨어 사용자 관리');
|
||||||
<div class="modal-content wide">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h2 id="sw-user-title">소프트웨어 사용자 관리</h2>
|
|
||||||
<button id="btn-close-sw-user-modal" class="btn-icon"><i data-lucide="x"></i></button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<div class="sw-info-summary" id="sw-user-sw-info"></div>
|
|
||||||
|
|
||||||
<div class="user-list-toolbar" style="display:flex; justify-content:space-between; margin-bottom:1rem; align-items:center;">
|
|
||||||
<h3 style="font-size:1rem; font-weight:600;">할당된 사용자 목록</h3>
|
|
||||||
<button type="button" id="btn-open-add-user" class="btn btn-primary btn-sm"><i data-lucide="plus"></i> 사용자 추가</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="table-container">
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>조직</th>
|
|
||||||
<th>부서</th>
|
|
||||||
<th>직위</th>
|
|
||||||
<th>이름</th>
|
|
||||||
<th>사용기간</th>
|
|
||||||
<th>신청서</th>
|
|
||||||
<th>관리</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody id="sw-user-table-body"></tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button id="btn-cancel-sw-user" class="btn btn-outline">취소</button>
|
|
||||||
<button id="btn-save-sw-user" class="btn btn-primary">저장</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 사용자 추가/수정 서브 모달 -->
|
|
||||||
<div id="sw-user-edit-modal" class="modal-overlay hidden" style="z-index:1100;">
|
|
||||||
<div class="modal-content" style="width:400px;">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h3 id="sw-user-edit-title">사용자 정보</h3>
|
|
||||||
<button id="btn-close-user-edit" class="btn-icon"><i data-lucide="x"></i></button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<form id="sw-user-edit-form" class="grid-form" style="grid-template-columns: 1fr;">
|
|
||||||
<input type="hidden" id="edit-user-index" value="-1" />
|
|
||||||
<div class="form-group">
|
|
||||||
<label>조직</label>
|
|
||||||
<select id="new-user-조직">${generateOptionsHTML(ORG_LIST)}</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>부서</label>
|
|
||||||
<input type="text" id="new-user-부서" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>직위</label>
|
|
||||||
<input type="text" id="new-user-직위" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>이름</label>
|
|
||||||
<input type="text" id="new-user-이름" required />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>사용 시작일</label>
|
|
||||||
<div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
|
|
||||||
<input type="text" id="new-user-시작일" style="flex:1;" />
|
|
||||||
<button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-시작일-picker'); p.value = document.getElementById('new-user-시작일').value; p.showPicker();" style="padding:0.25rem;">
|
|
||||||
<i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
|
|
||||||
</button>
|
|
||||||
<input type="date" id="new-user-시작일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('new-user-시작일').value = this.value" tabindex="-1" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>사용 종료일</label>
|
|
||||||
<div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
|
|
||||||
<input type="text" id="new-user-종료일" style="flex:1;" />
|
|
||||||
<button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-종료일-picker'); p.value = document.getElementById('new-user-종료일').value; p.showPicker();" style="padding:0.25rem;">
|
|
||||||
<i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
|
|
||||||
</button>
|
|
||||||
<input type="date" id="new-user-종료일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('new-user-종료일').value = this.value" tabindex="-1" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>신청서 (증빙)</label>
|
|
||||||
<input type="file" id="new-user-신청서" />
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button id="btn-close-user-sub" class="btn btn-outline">취소</button>
|
|
||||||
<button id="btn-confirm-user-edit" class="btn btn-primary">확인</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
export function openSwUserModal(asset: SoftwareAsset) {
|
|
||||||
currentSwUserAsset = asset;
|
|
||||||
const modal = document.getElementById('sw-user-modal')!;
|
|
||||||
|
|
||||||
const swInfo = document.getElementById('sw-user-sw-info')!;
|
|
||||||
swInfo.innerHTML = `
|
|
||||||
<div style="background:var(--bg-light); padding:1rem; border-radius:6px; margin-bottom:1.5rem;">
|
|
||||||
<div style="font-size:0.8rem; color:var(--text-muted); margin-bottom:0.25rem;">${asset.법인}</div>
|
|
||||||
<div style="font-size:1.1rem; font-weight:700; color:var(--primary-color);">${asset.제품명}</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
// 기존 사용자 데이터 복사 (원본 보호를 위해 temp 사용)
|
|
||||||
const existingMapping = state.masterData.swUsers.find(u => u.sw_id === asset.id);
|
|
||||||
tempSwUsers = existingMapping ? (existingMapping.userData || []).map((u: any) => ({
|
|
||||||
조직: u[0], 부서: u[1], 직위: u[2], 이름: u[3], 사용기간: u[4], 신청서명: u[5]
|
|
||||||
})) : [];
|
|
||||||
|
|
||||||
renderUserList();
|
|
||||||
modal.classList.remove('hidden');
|
|
||||||
createIcons({ icons: { Edit2, X, Paperclip } });
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderUserList() {
|
|
||||||
const tbody = document.getElementById('sw-user-table-body')!;
|
|
||||||
tbody.innerHTML = '';
|
|
||||||
|
|
||||||
if (tempSwUsers.length === 0) {
|
|
||||||
tbody.innerHTML = '<tr><td colspan="6" style="text-align:center; padding:2rem; color:var(--text-muted);">할당된 사용자가 없습니다.</td></tr>';
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
tempSwUsers.forEach((user, idx) => {
|
protected renderFrameHTML(): string {
|
||||||
const tr = document.createElement('tr');
|
return `
|
||||||
tr.innerHTML = `
|
<div id="sw-user-asset-modal" class="modal-overlay hidden">
|
||||||
<td>${user.조직 || ''}</td>
|
<div class="modal-content wide">
|
||||||
<td>${user.부서 || ''}</td>
|
<div class="modal-header">
|
||||||
<td>${user.직위 || ''}</td>
|
<h2 id="sw-user-title" class="modal-title">${this.title}</h2>
|
||||||
<td>${user.이름 || ''}</td>
|
<button id="btn-close-sw-user-modal" class="btn-icon" aria-label="닫기">×</button>
|
||||||
<td>${user.사용기간 || ''}</td>
|
</div>
|
||||||
<td style="text-align:center;">${user.신청서명 ? '<i data-lucide="paperclip" class="text-primary"></i>' : '-'}</td>
|
<div class="modal-body">
|
||||||
<td>
|
<div class="sw-info-summary" id="sw-user-sw-info"></div>
|
||||||
<div style="display:flex; gap:0.5rem;">
|
|
||||||
<button class="btn btn-outline btn-sm btn-edit-user" data-idx="${idx}">수정</button>
|
<div class="flex justify-between items-center mb-4">
|
||||||
<button class="btn btn-outline btn-sm btn-danger btn-del-user" data-idx="${idx}">삭제</button>
|
<h3 class="detail-section-title mb-0">할당된 사용자 목록</h3>
|
||||||
|
<button type="button" id="btn-open-add-user" class="btn btn-primary btn-sm"><i data-lucide="plus" class="icon-sm"></i> 사용자 추가</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-container">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>조직</th>
|
||||||
|
<th>부서</th>
|
||||||
|
<th>직위</th>
|
||||||
|
<th>이름</th>
|
||||||
|
<th class="text-center">사용기간</th>
|
||||||
|
<th class="text-center">신청서</th>
|
||||||
|
<th class="text-center">관리</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="sw-user-table-body"></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<!-- 더미 폼 (BaseModal 필수 요건 충족용) -->
|
||||||
|
<form id="sw-user-asset-form" class="hidden"></form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button id="btn-cancel-sw-user" class="btn btn-outline">취소</button>
|
||||||
|
<button id="btn-save-sw-user" class="btn btn-primary">저장</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
</div>
|
||||||
tbody.appendChild(tr);
|
|
||||||
});
|
|
||||||
|
|
||||||
// 이벤트 연결
|
<!-- 사용자 추가/수정 서브 모달 -->
|
||||||
tbody.querySelectorAll('.btn-edit-user').forEach(btn => {
|
<div id="sw-user-edit-modal" class="modal-overlay hidden sub-modal">
|
||||||
btn.addEventListener('click', (e) => {
|
<div class="modal-content narrow">
|
||||||
const idx = parseInt((e.currentTarget as HTMLElement).getAttribute('data-idx')!);
|
<div class="modal-header">
|
||||||
openUserEditSubModal(idx);
|
<h3 id="sw-user-edit-title" class="modal-title">사용자 정보</h3>
|
||||||
|
<button id="btn-close-user-edit" class="btn-icon">×</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form id="sw-user-edit-form" class="grid-form vertical-form">
|
||||||
|
<input type="hidden" id="edit-user-index" value="-1" />
|
||||||
|
<div class="form-group">
|
||||||
|
<label>조직</label>
|
||||||
|
<select id="new-user-조직">${generateOptionsHTML(ORG_LIST)}</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>부서</label>
|
||||||
|
<input type="text" id="new-user-부서" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>직위</label>
|
||||||
|
<input type="text" id="new-user-직위" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>이름</label>
|
||||||
|
<input type="text" id="new-user-이름" required />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>사용 시작일</label>
|
||||||
|
<div class="input-with-btn">
|
||||||
|
<input type="text" id="new-user-시작일" />
|
||||||
|
<button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-시작일-picker'); p.value = document.getElementById('new-user-시작일').value; p.showPicker();">
|
||||||
|
<i data-lucide="calendar" class="icon-sm"></i>
|
||||||
|
</button>
|
||||||
|
<input type="date" id="new-user-시작일-picker" class="hidden-picker" onchange="document.getElementById('new-user-시작일').value = this.value" tabindex="-1" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>사용 종료일</label>
|
||||||
|
<div class="input-with-btn">
|
||||||
|
<input type="text" id="new-user-종료일" />
|
||||||
|
<button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-종료일-picker'); p.value = document.getElementById('new-user-종료일').value; p.showPicker();">
|
||||||
|
<i data-lucide="calendar" class="icon-sm"></i>
|
||||||
|
</button>
|
||||||
|
<input type="date" id="new-user-종료일-picker" class="hidden-picker" onchange="document.getElementById('new-user-종료일').value = this.value" tabindex="-1" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>신청서 (증빙)</label>
|
||||||
|
<input type="file" id="new-user-신청서" />
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button id="btn-close-user-sub" class="btn btn-outline">취소</button>
|
||||||
|
<button id="btn-confirm-user-edit" class="btn btn-primary">확인</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<style>
|
||||||
|
.hidden-picker {
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
protected initChildLogic(onSave: () => void, closeModals: () => void): void {
|
||||||
|
const mainSaveBtn = document.getElementById('btn-save-sw-user')!;
|
||||||
|
const addUserBtn = document.getElementById('btn-open-add-user')!;
|
||||||
|
const confirmUserBtn = document.getElementById('btn-confirm-user-edit')!;
|
||||||
|
|
||||||
|
['new-user-시작일', 'new-user-종료일'].forEach(id => {
|
||||||
|
const el = document.getElementById(id) as HTMLInputElement;
|
||||||
|
if (el) applyDateMask(el);
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
|
||||||
tbody.querySelectorAll('.btn-del-user').forEach(btn => {
|
addUserBtn.addEventListener('click', () => this.openUserEditSubModal());
|
||||||
btn.addEventListener('click', (e) => {
|
confirmUserBtn.addEventListener('click', () => this.saveUserDataToList());
|
||||||
const idx = parseInt((e.currentTarget as HTMLElement).getAttribute('data-idx')!);
|
|
||||||
if (confirm('사용자 할당을 삭제하시겠습니까?')) {
|
mainSaveBtn.addEventListener('click', () => {
|
||||||
tempSwUsers.splice(idx, 1);
|
if (!this.currentAsset) return;
|
||||||
renderUserList();
|
const existingIdx = state.masterData.swUsers.findIndex(u => u.sw_id === this.currentAsset!.id);
|
||||||
}
|
const newMapping = {
|
||||||
|
sw_id: this.currentAsset!.id,
|
||||||
|
userData: this.tempSwUsers.map(u => [u.조직, u.부서, u.직위, u.이름, u.사용기간, u.신청서명])
|
||||||
|
};
|
||||||
|
if (existingIdx > -1) state.masterData.swUsers[existingIdx] = newMapping as any;
|
||||||
|
else state.masterData.swUsers.push(newMapping as any);
|
||||||
|
|
||||||
|
onSave(); this.close(); closeModals();
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
|
||||||
createIcons({ icons: { Paperclip } });
|
document.getElementById('btn-close-sw-user-modal')?.addEventListener('click', () => this.close());
|
||||||
}
|
document.getElementById('btn-cancel-sw-user')?.addEventListener('click', () => this.close());
|
||||||
|
|
||||||
function openUserEditSubModal(idx: number = -1) {
|
const subModal = document.getElementById('sw-user-edit-modal')!;
|
||||||
const subModal = document.getElementById('sw-user-edit-modal')!;
|
const closeSub = () => subModal.classList.add('hidden');
|
||||||
const form = document.getElementById('sw-user-edit-form') as HTMLFormElement;
|
document.getElementById('btn-close-user-edit')?.addEventListener('click', closeSub);
|
||||||
form.reset();
|
document.getElementById('btn-close-user-sub')?.addEventListener('click', closeSub);
|
||||||
|
|
||||||
setFieldValue('edit-user-index', idx);
|
createIcons({ icons: { X, Plus, Calendar, Edit2, Paperclip } });
|
||||||
|
}
|
||||||
|
|
||||||
if (idx > -1) {
|
protected fillFormData(asset: any): void {
|
||||||
const user = tempSwUsers[idx];
|
const swInfo = document.getElementById('sw-user-sw-info')!;
|
||||||
setFieldValue('new-user-조직', user.조직);
|
swInfo.innerHTML = `
|
||||||
setFieldValue('new-user-부서', user.부서);
|
<div class="sw-info-header border-b border-hairline pb-4 mb-6">
|
||||||
setFieldValue('new-user-직위', user.직위);
|
<div class="detail-label-sm">${asset.purchase_corp || asset.법인 || ''}</div>
|
||||||
setFieldValue('new-user-이름', user.이름);
|
<div class="asset-code-title">${asset.product_name || asset.제품명 || ''}</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
// 사용기간 파싱 (yyyy-mm-dd ~ yyyy-mm-dd)
|
const existingMapping = state.masterData.swUsers.find(u => u.sw_id === asset.id);
|
||||||
if (user.사용기간 && user.사용기간.includes('~')) {
|
this.tempSwUsers = existingMapping ? (existingMapping.userData || []).map((u: any) => ({
|
||||||
const parts = user.사용기간.split('~');
|
조직: u[0], 부서: u[1], 직위: u[2], 이름: u[3], 사용기간: u[4], 신청서명: u[5]
|
||||||
setFieldValue('new-user-시작일', parts[0].trim());
|
})) : [];
|
||||||
setFieldValue('new-user-종료일', parts[1].trim());
|
|
||||||
} else {
|
this.renderUserList();
|
||||||
setFieldValue('new-user-시작일', '');
|
}
|
||||||
setFieldValue('new-user-종료일', '');
|
|
||||||
|
protected onAfterOpen(): void {}
|
||||||
|
|
||||||
|
private renderUserList() {
|
||||||
|
const tbody = document.getElementById('sw-user-table-body')!;
|
||||||
|
if (!tbody) return;
|
||||||
|
tbody.innerHTML = '';
|
||||||
|
if (this.tempSwUsers.length === 0) {
|
||||||
|
tbody.innerHTML = '<tr><td colspan="7" class="empty-cell text-center p-8">할당된 사용자가 없습니다.</td></tr>';
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.tempSwUsers.forEach((user, idx) => {
|
||||||
|
const tr = document.createElement('tr');
|
||||||
|
tr.innerHTML = `
|
||||||
|
<td>${user.조직 || ''}</td>
|
||||||
|
<td>${user.부서 || ''}</td>
|
||||||
|
<td>${user.직위 || ''}</td>
|
||||||
|
<td>${user.이름 || ''}</td>
|
||||||
|
<td class="text-center">${user.사용기간 || ''}</td>
|
||||||
|
<td class="text-center">${user.신청서명 ? '<i data-lucide="paperclip" class="text-primary icon-sm"></i>' : '-'}</td>
|
||||||
|
<td class="text-center">
|
||||||
|
<div class="flex gap-2 justify-center items-center">
|
||||||
|
<button class="btn btn-outline btn-sm btn-edit-user" data-idx="${idx}">수정</button>
|
||||||
|
<button class="btn-circle-remove btn-del-user" data-idx="${idx}">×</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
`;
|
||||||
|
tbody.appendChild(tr);
|
||||||
|
});
|
||||||
|
|
||||||
|
tbody.querySelectorAll('.btn-edit-user').forEach(btn => {
|
||||||
|
btn.addEventListener('click', (e) => {
|
||||||
|
const idx = parseInt((e.currentTarget as HTMLElement).getAttribute('data-idx')!);
|
||||||
|
this.openUserEditSubModal(idx);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
tbody.querySelectorAll('.btn-del-user').forEach(btn => {
|
||||||
|
btn.addEventListener('click', (e) => {
|
||||||
|
const idx = parseInt((e.currentTarget as HTMLElement).getAttribute('data-idx')!);
|
||||||
|
if (confirm('사용자 할당을 삭제하시겠습니까?')) {
|
||||||
|
this.tempSwUsers.splice(idx, 1); this.renderUserList();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
createIcons({ icons: { Paperclip } });
|
||||||
}
|
}
|
||||||
|
|
||||||
subModal.classList.remove('hidden');
|
private openUserEditSubModal(idx: number = -1) {
|
||||||
}
|
const subModal = document.getElementById('sw-user-edit-modal')!;
|
||||||
|
const form = document.getElementById('sw-user-edit-form') as HTMLFormElement;
|
||||||
export function initSwUserModal(onSave: () => void, closeModals: () => void) {
|
form.reset();
|
||||||
if (!document.getElementById('sw-user-modal')) {
|
setFieldValue('edit-user-index', idx);
|
||||||
document.body.insertAdjacentHTML('beforeend', SW_USER_MODAL_HTML);
|
if (idx > -1) {
|
||||||
|
const user = this.tempSwUsers[idx];
|
||||||
|
setFieldValue('new-user-조직', user.조직);
|
||||||
|
setFieldValue('new-user-부서', user.부서);
|
||||||
|
setFieldValue('new-user-직위', user.직위);
|
||||||
|
setFieldValue('new-user-이름', user.이름);
|
||||||
|
if (user.사용기간 && user.사용기간.includes('~')) {
|
||||||
|
const parts = user.사용기간.split('~');
|
||||||
|
setFieldValue('new-user-시작일', parts[0].trim());
|
||||||
|
setFieldValue('new-user-종료일', parts[1].trim());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
subModal.classList.remove('hidden');
|
||||||
}
|
}
|
||||||
|
|
||||||
const mainSaveBtn = document.getElementById('btn-save-sw-user')!;
|
private saveUserDataToList() {
|
||||||
const addUserBtn = document.getElementById('btn-open-add-user')!;
|
const idx = parseInt(getFieldValue('edit-user-index'));
|
||||||
const confirmUserBtn = document.getElementById('btn-confirm-user-edit')!;
|
const 신청서Input = document.getElementById('new-user-신청서') as HTMLInputElement;
|
||||||
|
const 신청서명 = 신청서Input.files && 신청서Input.files.length > 0 ? 신청서Input.files[0].name : (idx > -1 ? this.tempSwUsers[idx].신청서명 : '');
|
||||||
|
|
||||||
['new-user-시작일', 'new-user-종료일'].forEach(id => {
|
const userData: any = {
|
||||||
applyDateMask(document.getElementById(id) as HTMLInputElement);
|
조직: getFieldValue('new-user-조직'),
|
||||||
});
|
부서: getFieldValue('new-user-부서'),
|
||||||
|
직위: getFieldValue('new-user-직위'),
|
||||||
createIcons({ icons: { Calendar } });
|
이름: getFieldValue('new-user-이름'),
|
||||||
|
사용기간: `${getFieldValue('new-user-시작일')} ~ ${getFieldValue('new-user-종료일')}`,
|
||||||
addUserBtn.addEventListener('click', () => openUserEditSubModal());
|
신청서명
|
||||||
|
|
||||||
confirmUserBtn.addEventListener('click', () => {
|
|
||||||
saveUserDataToList();
|
|
||||||
});
|
|
||||||
|
|
||||||
mainSaveBtn.addEventListener('click', () => {
|
|
||||||
if (!currentSwUserAsset) return;
|
|
||||||
|
|
||||||
// 전역 상태 업데이트
|
|
||||||
const existingIdx = state.masterData.swUsers.findIndex(u => u.sw_id === currentSwUserAsset!.id);
|
|
||||||
const newMapping = {
|
|
||||||
sw_id: currentSwUserAsset!.id,
|
|
||||||
userData: tempSwUsers.map(u => [u.조직, u.부서, u.직위, u.이름, u.사용기간, u.신청서명])
|
|
||||||
};
|
};
|
||||||
|
if (idx === -1) this.tempSwUsers.push(userData);
|
||||||
if (existingIdx > -1) state.masterData.swUsers[existingIdx] = newMapping as any;
|
else this.tempSwUsers[idx] = userData;
|
||||||
else state.masterData.swUsers.push(newMapping as any);
|
|
||||||
|
|
||||||
onSave();
|
|
||||||
document.getElementById('sw-user-modal')?.classList.add('hidden');
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('btn-close-sw-user-modal')?.addEventListener('click', () => {
|
|
||||||
document.getElementById('sw-user-modal')?.classList.add('hidden');
|
|
||||||
});
|
|
||||||
document.getElementById('btn-cancel-sw-user')?.addEventListener('click', () => {
|
|
||||||
document.getElementById('sw-user-modal')?.classList.add('hidden');
|
|
||||||
});
|
|
||||||
document.getElementById('btn-close-user-edit')?.addEventListener('click', () => {
|
|
||||||
document.getElementById('sw-user-edit-modal')?.classList.add('hidden');
|
document.getElementById('sw-user-edit-modal')?.classList.add('hidden');
|
||||||
});
|
this.renderUserList();
|
||||||
document.getElementById('btn-close-user-sub')?.addEventListener('click', () => {
|
}
|
||||||
document.getElementById('sw-user-edit-modal')?.classList.add('hidden');
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function saveUserDataToList() {
|
export const swUserModal = new SwUserModal();
|
||||||
const idx = parseInt(getFieldValue('edit-user-index'));
|
export function initSwUserModal(onSave: () => void, closeModals: () => void) { swUserModal.init(onSave, closeModals); }
|
||||||
const 신청서Input = document.getElementById('new-user-신청서') as HTMLInputElement;
|
export function openSwUserModal(asset: any) { swUserModal.open(asset); }
|
||||||
const 신청서명 = 신청서Input.files && 신청서Input.files.length > 0 ? 신청서Input.files[0].name : (idx > -1 ? tempSwUsers[idx].신청서명 : '');
|
|
||||||
|
|
||||||
const userData: any = {
|
|
||||||
조직: getFieldValue('new-user-조직'),
|
|
||||||
부서: getFieldValue('new-user-부서'),
|
|
||||||
직위: getFieldValue('new-user-직위'),
|
|
||||||
이름: getFieldValue('new-user-이름'),
|
|
||||||
사용기간: `${getFieldValue('new-user-시작일')} ~ ${getFieldValue('new-user-종료일')}`,
|
|
||||||
신청서명
|
|
||||||
};
|
|
||||||
|
|
||||||
if (idx === -1) tempSwUsers.push(userData);
|
|
||||||
else tempSwUsers[idx] = userData;
|
|
||||||
|
|
||||||
document.getElementById('sw-user-edit-modal')?.classList.add('hidden');
|
|
||||||
renderUserList();
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -13,15 +13,15 @@ export const HW_STATUS_LIST = ['운영', '재고', '수리', '폐기', '기타']
|
|||||||
|
|
||||||
// 구분(Category) -> 유형(Asset Type) 관계 정의 (통합 관리)
|
// 구분(Category) -> 유형(Asset Type) 관계 정의 (통합 관리)
|
||||||
export const CATEGORY_TYPE_MAP: Record<string, string[]> = {
|
export const CATEGORY_TYPE_MAP: Record<string, string[]> = {
|
||||||
'서버': ['서버 렉', '가상서버(VM)', '워크스테이션', 'NAS', 'DAS', '서버PC', '스토리지 렉'],
|
'서버': ['서버 렉', '가상서버(VM)', '워크스테이션', '저장시스템_렉(NAS)', '저장시스템_렉(DAS)', '저장시스템_미니(NAS)', '저장시스템_미니(DAS)'],
|
||||||
'PC': ['개인PC', '노트북', '공용PC', '서버PC'],
|
'PC': ['개인PC', '노트북', '공용PC', '서버PC'],
|
||||||
'스토리지': ['SSD', 'HDD', '외장HDD'],
|
'저장매체': ['SSD', 'HDD', '외장HDD'],
|
||||||
'네트워크': ['스위치', '허브', '방화벽', '라우터', '공유기', '허브'],
|
'네트워크': ['스위치', '허브', '방화벽', '라우터', '공유기', '허브'],
|
||||||
'PC부품': ['CPU', 'RAM', 'GPU', 'SSD', 'HDD', 'RAM', '모니터'],
|
'PC부품': ['CPU', 'RAM', 'GPU', 'SSD', 'HDD', 'RAM', '모니터'],
|
||||||
'공간정보장비': ['드론', '측량장비', '보조기기'],
|
'공간정보장비': ['드론', '측량장비', '보조기기'],
|
||||||
'업무지원장비': ['카메라', '스피커', 'TV', '모바일', '유선전화기', 'XR', '프린터', '전산소모품'],
|
'업무지원장비': ['카메라', '스피커', 'TV', '모바일', '유선전화기', 'XR', '프린터', '전산소모품'],
|
||||||
'외부': ['영구', '구독'],
|
'외부SW': ['영구', '구독'],
|
||||||
'내부': ['판매용', 'Solutions', 'Inhouse', 'Engine&Module'],
|
'내부SW': ['판매용', 'Solutions', 'Inhouse', 'Engine&Module'],
|
||||||
'비용관리': ['클라우드', '도메인', '전화', '인터넷', '이메일'],
|
'비용관리': ['클라우드', '도메인', '전화', '인터넷', '이메일'],
|
||||||
'내빈/외빈': ['선물'],
|
'내빈/외빈': ['선물'],
|
||||||
'시설자산': ['사무가구']
|
'시설자산': ['사무가구']
|
||||||
@@ -30,7 +30,7 @@ export const CATEGORY_TYPE_MAP: Record<string, string[]> = {
|
|||||||
// 설치위치 종속성 데이터
|
// 설치위치 종속성 데이터
|
||||||
export const LOCATION_DATA: Record<string, string[]> = {
|
export const LOCATION_DATA: Record<string, string[]> = {
|
||||||
'한맥빌딩': ['MDF실', '1층', '2층', '3층', '4층', '5층', '6층', '7층', '파고라'],
|
'한맥빌딩': ['MDF실', '1층', '2층', '3층', '4층', '5층', '6층', '7층', '파고라'],
|
||||||
'기술개발센터': ['서버실', '1층', '기타'],
|
'기술개발센터': ['서버실', '센터내부'],
|
||||||
'유니온빌딩': ['4층', '5층', '6층'],
|
'유니온빌딩': ['4층', '5층', '6층'],
|
||||||
'뉴코아빌딩': ['4층', '6층', '7층'],
|
'뉴코아빌딩': ['4층', '6층', '7층'],
|
||||||
'IDC': ['서관202', '서관203', '서관204', '서관205', '동관53', '동관54']
|
'IDC': ['서관202', '서관203', '서관204', '서관205', '동관53', '동관54']
|
||||||
@@ -38,8 +38,44 @@ export const LOCATION_DATA: Record<string, string[]> = {
|
|||||||
|
|
||||||
// 유형별 자산번호 접두사(Prefix) 매핑
|
// 유형별 자산번호 접두사(Prefix) 매핑
|
||||||
export const TYPE_PREFIX_MAP: Record<string, string> = {
|
export const TYPE_PREFIX_MAP: Record<string, string> = {
|
||||||
'서버': 'SVR', '개인PC': 'PC', '공용PC': 'PC', '서버PC': 'PC', 'NAS': 'NAS', 'DAS': 'DAS', '스토리지': 'STO',
|
'서버': 'SVR', '워크스테이션': 'SVR', '개인PC': 'PC', '공용PC': 'PC', '서버PC': 'PC',
|
||||||
'HDD': 'HDD', 'SSD': 'SSD', '노트북': 'NBK', '태블릿': 'TAB',
|
'저장시스템_렉(NAS)': 'DSS', '저장시스템_렉(DAS)': 'DSS', '저장시스템_미니(NAS)': 'DSS', '저장시스템_미니(DAS)': 'DSS',
|
||||||
|
'저장매체': 'STM', 'HDD': 'HDD', 'SSD': 'SSD',
|
||||||
|
'노트북': 'NBK', '태블릿': 'TAB',
|
||||||
'드론': 'DRO', '측량장비': 'SUR', '보조기기': 'SUR', '허브': 'NET',
|
'드론': 'DRO', '측량장비': 'SUR', '보조기기': 'SUR', '허브': 'NET',
|
||||||
'구독SW': 'SW', '영구SW': 'SW', '내부' : 'INT'
|
'구독SW': 'SW', '영구SW': 'SW', '내부' : 'SW_INT', '외부':'SW_EXT'
|
||||||
|
};
|
||||||
|
|
||||||
|
// 배치도 이미지 매핑 데이터
|
||||||
|
export const IMAGE_LOCATIONS: Record<string, Record<string, string[]>> = {
|
||||||
|
'IDC': {
|
||||||
|
'서관202': ['img/location_photo/IDC/서관202.png'],
|
||||||
|
'서관203': ['img/location_photo/IDC/서관203.png'],
|
||||||
|
'서관204': ['img/location_photo/IDC/서관204.png'],
|
||||||
|
'서관205': ['img/location_photo/IDC/서관205.png'],
|
||||||
|
'동관53': ['img/location_photo/IDC/동관53.png'],
|
||||||
|
'동관54': ['img/location_photo/IDC/동관54.png'],
|
||||||
|
},
|
||||||
|
'기술개발센터': {
|
||||||
|
'서버실': [
|
||||||
|
'img/location_photo/기술개발센터/서버실/서버실_1.png',
|
||||||
|
'img/location_photo/기술개발센터/서버실/서버실_2.png'
|
||||||
|
],
|
||||||
|
'센터내부': ['img/location_photo/기술개발센터/센터내부/센터내부.png']
|
||||||
|
},
|
||||||
|
'한맥빌딩': {
|
||||||
|
'1층': ['img/location_photo/한맥빌딩/1층.png'],
|
||||||
|
'2층': ['img/location_photo/한맥빌딩/2층.png'],
|
||||||
|
'3층': ['img/location_photo/한맥빌딩/3층.png'],
|
||||||
|
'4층': ['img/location_photo/한맥빌딩/4층.png'],
|
||||||
|
'5층': ['img/location_photo/한맥빌딩/5층.png'],
|
||||||
|
'6층': ['img/location_photo/한맥빌딩/6층.png'],
|
||||||
|
'7층': ['img/location_photo/한맥빌딩/7층.png'],
|
||||||
|
'MDF실': [
|
||||||
|
'img/location_photo/한맥빌딩/MDF실/MDF_1.png',
|
||||||
|
'img/location_photo/한맥빌딩/MDF실/MDF_2.png',
|
||||||
|
'img/location_photo/한맥빌딩/MDF실/MDF_3.png',
|
||||||
|
'img/location_photo/한맥빌딩/MDF실/MDF_4.png'
|
||||||
|
]
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
180
src/components/Modal/UserModal.ts
Normal file
180
src/components/Modal/UserModal.ts
Normal file
@@ -0,0 +1,180 @@
|
|||||||
|
import { state, saveSystemUser, deleteSystemUser } from '../../core/state';
|
||||||
|
import { BaseModal } from './BaseModal';
|
||||||
|
import { setFieldValue } from './ModalUtils';
|
||||||
|
import { createIcons, X, Save } from 'lucide';
|
||||||
|
import { UI_TEXT } from '../../core/schema';
|
||||||
|
|
||||||
|
class UserModal extends BaseModal {
|
||||||
|
constructor() {
|
||||||
|
super('user', '임직원 정보');
|
||||||
|
}
|
||||||
|
|
||||||
|
protected renderFrameHTML(): string {
|
||||||
|
return `
|
||||||
|
<div id="user-asset-modal" class="modal-overlay hidden">
|
||||||
|
<div class="modal-content narrow">
|
||||||
|
<div class="modal-header">
|
||||||
|
<div class="header-left">
|
||||||
|
<h2 id="user-modal-title" class="modal-title">${this.title}</h2>
|
||||||
|
<div id="user-header-identity" class="header-identity"></div>
|
||||||
|
</div>
|
||||||
|
<button id="btn-close-user-modal" class="btn-icon" aria-label="닫기">×</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form id="user-asset-form" class="grid-form vertical-form">
|
||||||
|
<input type="hidden" id="user-id" name="id" />
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>사번</label>
|
||||||
|
<input type="text" id="user-emp-no" name="emp_no" placeholder="예: HM202601" required />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>사용자명</label>
|
||||||
|
<input type="text" id="user-name-input" name="user_name" placeholder="예: 홍길동" required />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>사용조직 (부서)</label>
|
||||||
|
<input type="text" id="user-dept" name="dept_name" placeholder="예: 기술개발센터" required />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>직무 (직급)</label>
|
||||||
|
<input type="text" id="user-position-input" name="position" placeholder="예: BIM모델러" required />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>상태</label>
|
||||||
|
<select id="user-status" name="status">
|
||||||
|
<option value="재직">재직</option>
|
||||||
|
<option value="퇴직">퇴직</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button id="btn-delete-user-asset" class="btn btn-outline btn-danger">삭제</button>
|
||||||
|
<div class="footer-actions">
|
||||||
|
<button id="btn-revert-user-edit" class="btn btn-outline hidden">수정 취소</button>
|
||||||
|
<button id="btn-cancel-user-modal" class="btn btn-outline">닫기</button>
|
||||||
|
<button id="btn-save-user-asset" class="btn btn-primary">수정</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
protected initChildLogic(onSave: () => void, closeModals: () => void): void {
|
||||||
|
const saveBtn = document.getElementById('btn-save-user-asset')!;
|
||||||
|
const revertBtn = document.getElementById('btn-revert-user-edit')!;
|
||||||
|
const deleteBtn = document.getElementById('btn-delete-user-asset')!;
|
||||||
|
|
||||||
|
saveBtn.addEventListener('click', async () => {
|
||||||
|
if (!this.currentAsset) return;
|
||||||
|
if (!this.isEditMode) {
|
||||||
|
this.setEditLockMode('edit');
|
||||||
|
this.isEditMode = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const empNo = (document.getElementById('user-emp-no') as HTMLInputElement).value.trim();
|
||||||
|
const userName = (document.getElementById('user-name-input') as HTMLInputElement).value.trim();
|
||||||
|
const deptName = (document.getElementById('user-dept') as HTMLInputElement).value.trim();
|
||||||
|
const position = (document.getElementById('user-position-input') as HTMLInputElement).value.trim();
|
||||||
|
const status = (document.getElementById('user-status') as HTMLSelectElement).value;
|
||||||
|
|
||||||
|
if (!empNo || !userName || !deptName || !position) {
|
||||||
|
alert('모든 필수 입력 필드를 채워주세요.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const updated = {
|
||||||
|
id: this.currentAsset.id || null,
|
||||||
|
emp_no: empNo,
|
||||||
|
user_name: userName,
|
||||||
|
dept_name: deptName,
|
||||||
|
position: position,
|
||||||
|
status: status
|
||||||
|
};
|
||||||
|
|
||||||
|
if (await saveSystemUser(updated)) {
|
||||||
|
alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
|
||||||
|
onSave(); this.close(); closeModals();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
revertBtn.addEventListener('click', () => {
|
||||||
|
this.setEditLockMode('view');
|
||||||
|
if (this.currentAsset) this.fillFormData(this.currentAsset);
|
||||||
|
});
|
||||||
|
|
||||||
|
deleteBtn.addEventListener('click', async () => {
|
||||||
|
if (!this.currentAsset || !this.currentAsset.id) return;
|
||||||
|
if (!confirm('정말로 이 임직원 정보를 삭제하시겠습니까?')) return;
|
||||||
|
|
||||||
|
if (await deleteSystemUser(this.currentAsset.id)) {
|
||||||
|
alert('성공적으로 삭제되었습니다.');
|
||||||
|
onSave(); this.close(); closeModals();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
createIcons({ icons: { Save, X } });
|
||||||
|
}
|
||||||
|
|
||||||
|
protected fillFormData(asset: any): void {
|
||||||
|
setFieldValue('user-id', asset.id || '');
|
||||||
|
setFieldValue('user-emp-no', asset.emp_no || '');
|
||||||
|
setFieldValue('user-name-input', asset.user_name || '');
|
||||||
|
setFieldValue('user-dept', asset.dept_name || '');
|
||||||
|
setFieldValue('user-position-input', asset.position || '');
|
||||||
|
setFieldValue('user-status', asset.status || '재직');
|
||||||
|
this.updateHeaderIdentity(asset);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected onAfterOpen(asset: any, mode: string): void {
|
||||||
|
const titleEl = document.getElementById('user-modal-title');
|
||||||
|
if (titleEl) {
|
||||||
|
titleEl.textContent = (mode === 'add') ? '신규 임직원 등록' : '임직원 정보 수정';
|
||||||
|
}
|
||||||
|
|
||||||
|
const deleteBtn = document.getElementById('btn-delete-user-asset')!;
|
||||||
|
const saveBtn = document.getElementById('btn-save-user-asset')!;
|
||||||
|
|
||||||
|
deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
|
||||||
|
|
||||||
|
if (mode === 'add' || mode === 'edit') {
|
||||||
|
saveBtn.textContent = mode === 'add' ? '등록' : '저장';
|
||||||
|
saveBtn.style.display = 'block';
|
||||||
|
} else {
|
||||||
|
saveBtn.textContent = '수정';
|
||||||
|
saveBtn.style.display = 'block';
|
||||||
|
}
|
||||||
|
this.updateHeaderIdentity(asset);
|
||||||
|
}
|
||||||
|
|
||||||
|
private updateHeaderIdentity(asset: any) {
|
||||||
|
const container = document.getElementById('user-header-identity');
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
if (this.currentMode === 'add') {
|
||||||
|
container.innerHTML = '<span class="badge badge-primary">신규 등록</span>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const empNo = asset.emp_no || '';
|
||||||
|
const userName = asset.user_name || '';
|
||||||
|
const dept = asset.dept_name || '';
|
||||||
|
|
||||||
|
container.innerHTML = `
|
||||||
|
<span class="asset-code-title">${userName}</span>
|
||||||
|
<span class="service-type-badge">${empNo}</span>
|
||||||
|
<span class="asset-type-label">${dept}</span>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const userModal = new UserModal();
|
||||||
|
export function initUserModal(onSave: () => void, closeModals: () => void) { userModal.init(onSave, closeModals); }
|
||||||
|
export function openUserModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') { userModal.open(asset, mode); }
|
||||||
594
src/components/Modal/modal.css
Normal file
594
src/components/Modal/modal.css
Normal file
@@ -0,0 +1,594 @@
|
|||||||
|
/* Modal - Vercel Inspired Minimalist Design */
|
||||||
|
.modal-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0; left: 0; right: 0; bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 1000;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: opacity 0.2s ease, visibility 0.2s ease;
|
||||||
|
backdrop-filter: blur(2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-overlay:not(.hidden) { opacity: 1; visibility: visible; }
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
background-color: var(--canvas);
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600px;
|
||||||
|
max-height: 90vh;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||||||
|
transform: translateY(10px);
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border: 1px solid var(--hairline);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-overlay.sub-modal {
|
||||||
|
z-index: 1100;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
background-color: var(--canvas);
|
||||||
|
border-bottom: 1px solid var(--hairline);
|
||||||
|
padding: 1rem var(--spacing-base);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header h2 {
|
||||||
|
font-size: var(--fs-md);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--primary);
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header .btn-icon {
|
||||||
|
color: var(--mute) !important;
|
||||||
|
cursor: pointer;
|
||||||
|
background: none !important;
|
||||||
|
border: none !important;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 1;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group.relative {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 동적 리스트 컨테이너 */
|
||||||
|
.dynamic-row-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-row, .remote-info-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.remote-info-row {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 파일 업로드 디스플레이 */
|
||||||
|
.file-upload-display {
|
||||||
|
flex: 1;
|
||||||
|
border: 1px solid var(--hairline);
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 0 12px;
|
||||||
|
height: clamp(34px, 4.5vmin, 44px);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: var(--fs-sm);
|
||||||
|
color: var(--mute);
|
||||||
|
background-color: var(--canvas-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-circle-remove {
|
||||||
|
width: clamp(34px, 4.5vmin, 44px);
|
||||||
|
height: clamp(34px, 4.5vmin, 44px);
|
||||||
|
border-radius: 50% !important;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 !important;
|
||||||
|
color: var(--danger) !important;
|
||||||
|
border: 1px solid var(--danger) !important;
|
||||||
|
background: transparent;
|
||||||
|
font-size: 1.5rem !important; /* Larger X icon */
|
||||||
|
line-height: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: all 0.2s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-circle-remove:hover {
|
||||||
|
background-color: var(--danger);
|
||||||
|
color: var(--white) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.modal-body {
|
||||||
|
padding: var(--spacing-base);
|
||||||
|
overflow-y: auto;
|
||||||
|
flex: 1;
|
||||||
|
background: var(--canvas);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-form {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: var(--spacing-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group.full-width {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section Title for Grouping */
|
||||||
|
.form-section-title {
|
||||||
|
grid-column: span 2;
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--mute);
|
||||||
|
padding: 1rem 0 0.5rem 0;
|
||||||
|
border-bottom: 1px solid var(--hairline);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-section-title:first-child {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--mute);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input,
|
||||||
|
.form-group select,
|
||||||
|
.form-group textarea {
|
||||||
|
height: clamp(34px, 4.5vmin, 44px);
|
||||||
|
padding: 0 0.75rem;
|
||||||
|
border: 1px solid var(--hairline);
|
||||||
|
border-radius: 6px;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: var(--fs-sm);
|
||||||
|
outline: none;
|
||||||
|
transition: all 0.2s;
|
||||||
|
background-color: var(--canvas);
|
||||||
|
color: var(--primary);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input.font-mono,
|
||||||
|
.form-group select.font-mono {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group textarea {
|
||||||
|
height: auto;
|
||||||
|
padding: 0.75rem;
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input:focus,
|
||||||
|
.form-group select:focus,
|
||||||
|
.form-group textarea:focus {
|
||||||
|
border-color: var(--primary);
|
||||||
|
box-shadow: 0 0 0 1px var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input:disabled,
|
||||||
|
.form-group select:disabled {
|
||||||
|
background-color: var(--canvas-soft);
|
||||||
|
color: var(--mute);
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-footer {
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
border-top: 1px solid var(--hairline);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
background-color: var(--canvas-soft);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-footer .btn {
|
||||||
|
height: 36px;
|
||||||
|
padding: 0 1.25rem;
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal Size Variants */
|
||||||
|
.modal-content.wide {
|
||||||
|
max-width: 1000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content.narrow {
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vertical-form {
|
||||||
|
grid-template-columns: 1fr !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.modal-body-split {
|
||||||
|
display: flex;
|
||||||
|
gap: 2rem;
|
||||||
|
min-height: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-form-area {
|
||||||
|
flex: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-history-area {
|
||||||
|
flex: 0.8;
|
||||||
|
border-left: 1px solid var(--hairline);
|
||||||
|
padding-left: 2rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-header h3 {
|
||||||
|
font-size: var(--fs-md);
|
||||||
|
font-weight: 600;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 읽기 전용 필드 (자산번호 등) 통일 스타일 */
|
||||||
|
.is-readonly-field {
|
||||||
|
border-color: transparent !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
pointer-events: none !important;
|
||||||
|
color: var(--primary) !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
cursor: default;
|
||||||
|
padding-left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 조회 모드 (View Mode) 폼 필드 스타일 */
|
||||||
|
.is-view-mode input,
|
||||||
|
.is-view-mode select,
|
||||||
|
.is-view-mode textarea {
|
||||||
|
border-color: transparent !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
color: var(--primary) !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
padding-left: 0 !important;
|
||||||
|
-webkit-appearance: none !important;
|
||||||
|
-moz-appearance: none !important;
|
||||||
|
appearance: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 입력 필드 + 버튼 그룹 */
|
||||||
|
.input-with-btn {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-with-btn input {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remote Info UI Extras */
|
||||||
|
.ri-creds-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ri-field-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
background: var(--canvas-soft);
|
||||||
|
padding: 0 0.75rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid var(--hairline);
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-view-mode .ri-field-group {
|
||||||
|
background: transparent;
|
||||||
|
border-color: transparent;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ri-mini-label {
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--mute);
|
||||||
|
text-transform: uppercase;
|
||||||
|
user-select: none;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ri-field-group input {
|
||||||
|
border: none !important;
|
||||||
|
background: transparent !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
height: 36px !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ri-line {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ri-connector {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-left: 2px solid var(--hairline);
|
||||||
|
border-bottom: 2px solid var(--hairline);
|
||||||
|
margin-left: 12px;
|
||||||
|
margin-top: -12px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.history-timeline {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-item {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 24px;
|
||||||
|
padding-bottom: 24px;
|
||||||
|
border-left: 1px solid var(--hairline);
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-item:last-child {
|
||||||
|
border-left: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-item::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: -5px;
|
||||||
|
top: 0;
|
||||||
|
width: 9px;
|
||||||
|
height: 9px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: var(--canvas);
|
||||||
|
border: 2px solid var(--primary);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-date {
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
color: var(--mute);
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-details {
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
color: var(--primary);
|
||||||
|
line-height: 1.6;
|
||||||
|
background: var(--canvas-soft-2);
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid var(--hairline);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Upload UI Refinement */
|
||||||
|
.upload-sidebar {
|
||||||
|
width: 260px;
|
||||||
|
border-right: 1px solid var(--hairline);
|
||||||
|
background-color: var(--canvas-soft);
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-tab-btn {
|
||||||
|
padding: 0.8rem 1rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--body);
|
||||||
|
transition: all 0.2s;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-tab-btn.active {
|
||||||
|
background-color: var(--canvas);
|
||||||
|
color: var(--primary);
|
||||||
|
border-color: var(--hairline);
|
||||||
|
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Image Picker Overlay (View Location) --- */
|
||||||
|
.image-picker-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0; left: 0; right: 0; bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 2000;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-picker-window {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 900px;
|
||||||
|
height: 85vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: var(--canvas);
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-picker-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
background: var(--canvas);
|
||||||
|
color: var(--primary);
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
border-bottom: 1px solid var(--hairline);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-picker-header h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: var(--fs-md);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-picker-header .btn-icon {
|
||||||
|
color: var(--mute) !important;
|
||||||
|
cursor: pointer;
|
||||||
|
background: none !important;
|
||||||
|
border: none !important;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-picker-content {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
background: var(--canvas-soft);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-picker-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 0.5rem;
|
||||||
|
width: 100%;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
background: var(--canvas);
|
||||||
|
border-radius: 0 0 8px 8px;
|
||||||
|
border-top: 1px solid var(--hairline);
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-map-container {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
cursor: crosshair;
|
||||||
|
background-color: var(--canvas-soft-2);
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-map-container.readonly {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-marker-wrapper {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-map-img {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 75vh;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-drag: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.layout-marker {
|
||||||
|
position: absolute;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
background-color: var(--danger);
|
||||||
|
border: 2px solid white;
|
||||||
|
border-radius: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 100;
|
||||||
|
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pulse-marker::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%; left: 50%;
|
||||||
|
width: 100%; height: 100%;
|
||||||
|
background-color: var(--danger);
|
||||||
|
border-radius: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
animation: pulse 1.5s infinite;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
|
||||||
|
100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.digital-overlay-layer {
|
||||||
|
position: absolute;
|
||||||
|
top: 0; left: 0; right: 0; bottom: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
@@ -3,15 +3,15 @@ import { state } from '../core/state';
|
|||||||
const MENU_CONFIG: any = {
|
const MENU_CONFIG: any = {
|
||||||
hw: {
|
hw: {
|
||||||
label: '하드웨어',
|
label: '하드웨어',
|
||||||
tabs: ['대시보드', '서버', 'PC', '스토리지', '공간정보장비', 'PC부품', '네트워크', '업무지원장비']
|
tabs: ['대시보드', '서버', 'PC', '스토리지', '공간정보장비', 'PC부품', '부품 마스터', '네트워크', '업무지원장비']
|
||||||
},
|
},
|
||||||
sw: {
|
sw: {
|
||||||
label: '소프트웨어',
|
label: '소프트웨어',
|
||||||
tabs: ['외부', '내부']
|
tabs: ['외부SW', '내부SW']
|
||||||
},
|
},
|
||||||
ops: {
|
ops: {
|
||||||
label: '운영지원',
|
label: '운영지원',
|
||||||
tabs: ['클라우드', '도메인', '비용관리']
|
tabs: ['클라우드', '도메인', '비용관리', '사용자']
|
||||||
},
|
},
|
||||||
vip: {
|
vip: {
|
||||||
label: '내빈/외빈',
|
label: '내빈/외빈',
|
||||||
@@ -24,41 +24,55 @@ const MENU_CONFIG: any = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export function renderNavigation(onTabChange: (tab: string) => void) {
|
export function renderNavigation(onTabChange: (tab: string) => void) {
|
||||||
const navContainer = document.getElementById('main-nav')!;
|
const header = document.querySelector('.main-header') as HTMLElement;
|
||||||
|
const headerContainer = document.querySelector('.header-container')!;
|
||||||
|
if (!headerContainer) return;
|
||||||
|
|
||||||
const render = () => {
|
const render = () => {
|
||||||
navContainer.innerHTML = '';
|
// 1. 헤더 구조 (Vercel Style: Clean Single Row)
|
||||||
|
headerContainer.innerHTML = `
|
||||||
|
<div class="brand" id="btn-home-logo" style="cursor: pointer;">
|
||||||
|
<img src="img/image_92.png" class="main-logo" alt="HM Logo" />
|
||||||
|
<h1>한맥자산관리시스템</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
// 기존 메뉴 렌더링
|
<nav class="integrated-nav" id="main-nav-list"></nav>
|
||||||
(Object.keys(MENU_CONFIG) as Array<keyof typeof MENU_CONFIG>).forEach(catKey => {
|
|
||||||
|
<div class="header-actions">
|
||||||
|
<div class="role-toggle-wrapper">
|
||||||
|
<span class="role-label user ${state.currentUserRole === 'user' ? 'active' : ''}">실무자</span>
|
||||||
|
<label class="role-toggle">
|
||||||
|
<input type="checkbox" id="role-toggle-checkbox" ${state.currentUserRole === 'admin' ? 'checked' : ''}>
|
||||||
|
<span class="role-slider"></span>
|
||||||
|
</label>
|
||||||
|
<span class="role-label admin ${state.currentUserRole === 'admin' ? 'active' : ''}">관리자</span>
|
||||||
|
</div>
|
||||||
|
<div class="notification-area">
|
||||||
|
<button class="icon-btn" title="알림"><i data-lucide="bell" style="width:18px; height:18px;"></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const navList = document.getElementById('main-nav-list')!;
|
||||||
|
|
||||||
|
// 2. GNB 메뉴 렌더링 (Ghost Tab Style)
|
||||||
|
Object.keys(MENU_CONFIG).forEach(catKey => {
|
||||||
const config = MENU_CONFIG[catKey];
|
const config = MENU_CONFIG[catKey];
|
||||||
const isActive = state.activeCategory === catKey;
|
|
||||||
|
|
||||||
const group = document.createElement('div');
|
const visibleTabs = config.tabs.filter((tab: string) => {
|
||||||
group.className = `nav-group ${isActive ? 'active is-showing-shelf' : ''}`;
|
if (state.currentUserRole === 'admin') return tab === '대시보드';
|
||||||
|
return tab !== '대시보드';
|
||||||
const trigger = document.createElement('div');
|
|
||||||
trigger.className = 'gnb-trigger';
|
|
||||||
trigger.textContent = config.label;
|
|
||||||
|
|
||||||
trigger.addEventListener('click', () => {
|
|
||||||
if (state.activeCategory !== catKey) {
|
|
||||||
state.activeCategory = catKey as any;
|
|
||||||
const firstTab = config.tabs[0];
|
|
||||||
state.activeSubTab = firstTab;
|
|
||||||
render();
|
|
||||||
onTabChange(firstTab);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
group.appendChild(trigger);
|
|
||||||
|
|
||||||
const shelf = document.createElement('div');
|
if (visibleTabs.length === 0) return;
|
||||||
shelf.className = 'lnb-shelf';
|
|
||||||
|
|
||||||
config.tabs.forEach((tab: string) => {
|
visibleTabs.forEach((tab: string) => {
|
||||||
|
if (tab === '부품 마스터') return;
|
||||||
const item = document.createElement('div');
|
const item = document.createElement('div');
|
||||||
item.className = `lnb-item ${isActive && state.activeSubTab === tab ? 'active' : ''}`;
|
const isActive = state.activeSubTab === tab;
|
||||||
|
item.className = `gnb-trigger ${isActive ? 'active' : ''}`;
|
||||||
item.textContent = tab;
|
item.textContent = tab;
|
||||||
|
item.style.fontSize = 'var(--fs-sm)'; // Ensure small but standard font
|
||||||
|
|
||||||
item.addEventListener('click', (e) => {
|
item.addEventListener('click', (e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
@@ -67,30 +81,39 @@ export function renderNavigation(onTabChange: (tab: string) => void) {
|
|||||||
render();
|
render();
|
||||||
onTabChange(tab);
|
onTabChange(tab);
|
||||||
});
|
});
|
||||||
shelf.appendChild(item);
|
navList.appendChild(item);
|
||||||
});
|
});
|
||||||
group.appendChild(shelf);
|
|
||||||
navContainer.appendChild(group);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// ─── '관리자' 메뉴 별도 추가 (GNB 스타일) ───
|
// 3. 관리자 전용 '관리도구'
|
||||||
const adminGroup = document.createElement('div');
|
if (state.currentUserRole === 'admin') {
|
||||||
adminGroup.className = 'nav-group';
|
const adminTrigger = document.createElement('div');
|
||||||
|
adminTrigger.className = 'gnb-trigger admin-trigger';
|
||||||
|
adminTrigger.innerHTML = '관리도구';
|
||||||
|
adminTrigger.addEventListener('click', () => window.open('/map_editor.html', '_blank'));
|
||||||
|
navList.appendChild(adminTrigger);
|
||||||
|
}
|
||||||
|
|
||||||
const adminTrigger = document.createElement('div');
|
// 4. 이벤트 바인딩
|
||||||
adminTrigger.className = 'gnb-trigger';
|
document.getElementById('btn-home-logo')?.addEventListener('click', () => location.reload());
|
||||||
adminTrigger.innerHTML = '관리자';
|
|
||||||
adminTrigger.style.color = 'var(--text-muted)';
|
|
||||||
adminTrigger.style.borderLeft = '1px solid var(--border-color)';
|
|
||||||
adminTrigger.style.marginLeft = '1rem';
|
|
||||||
adminTrigger.style.paddingLeft = '1.5rem';
|
|
||||||
|
|
||||||
adminTrigger.addEventListener('click', () => {
|
const roleToggle = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
|
||||||
alert('준비중입니다.');
|
roleToggle?.addEventListener('change', () => {
|
||||||
|
state.currentUserRole = roleToggle.checked ? 'admin' : 'user';
|
||||||
|
if (state.currentUserRole === 'admin') {
|
||||||
|
state.activeCategory = 'hw';
|
||||||
|
state.activeSubTab = '대시보드';
|
||||||
|
} else {
|
||||||
|
state.activeCategory = 'hw';
|
||||||
|
state.activeSubTab = '서버';
|
||||||
|
}
|
||||||
|
render();
|
||||||
|
onTabChange(state.activeSubTab);
|
||||||
});
|
});
|
||||||
|
|
||||||
adminGroup.appendChild(adminTrigger);
|
// 아이콘 생성
|
||||||
navContainer.appendChild(adminGroup);
|
// @ts-ignore
|
||||||
|
if (window.lucide) window.lucide.createIcons();
|
||||||
};
|
};
|
||||||
|
|
||||||
render();
|
render();
|
||||||
|
|||||||
@@ -19,8 +19,8 @@
|
|||||||
|
|
||||||
.guide-tab {
|
.guide-tab {
|
||||||
padding: 0.75rem 1.25rem;
|
padding: 0.75rem 1.25rem;
|
||||||
font-size: 18px;
|
font-size: 24px;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-bottom: 2px solid transparent;
|
border-bottom: 2px solid transparent;
|
||||||
@@ -72,7 +72,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.guide-section h3 {
|
.guide-section h3 {
|
||||||
font-size: 1.3rem;
|
font-size: 1.73rem;
|
||||||
padding-bottom: 0.5rem;
|
padding-bottom: 0.5rem;
|
||||||
border-bottom: 2px solid var(--primary-color);
|
border-bottom: 2px solid var(--primary-color);
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
@@ -83,7 +83,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.guide-text {
|
.guide-text {
|
||||||
font-size: 18px;
|
font-size: 24px;
|
||||||
color: var(--text-main);
|
color: var(--text-main);
|
||||||
line-height: 1.7;
|
line-height: 1.7;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@@ -127,8 +127,8 @@
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 17px;
|
font-size: 23px;
|
||||||
font-weight: 700;
|
font-weight: 800;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -136,14 +136,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.flow-step .step-label {
|
.flow-step .step-label {
|
||||||
font-weight: 700;
|
font-weight: 800;
|
||||||
color: var(--text-main);
|
color: var(--text-main);
|
||||||
font-size: 18px;
|
font-size: 24px;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flow-step .step-desc {
|
.flow-step .step-desc {
|
||||||
font-size: 17px;
|
font-size: 23px;
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
@@ -159,13 +159,13 @@
|
|||||||
.guide-info-table {
|
.guide-info-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
font-size: 18px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-info-table th {
|
.guide-info-table th {
|
||||||
background: #f8faf9;
|
background: #f8faf9;
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
font-weight: 700;
|
font-weight: 800;
|
||||||
padding: 0.75rem;
|
padding: 0.75rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
border-bottom: 1px solid var(--border-color);
|
border-bottom: 1px solid var(--border-color);
|
||||||
@@ -182,7 +182,7 @@
|
|||||||
background: var(--primary-light);
|
background: var(--primary-light);
|
||||||
border-left: 4px solid var(--primary-color);
|
border-left: 4px solid var(--primary-color);
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
font-size: 18px;
|
font-size: 24px;
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
10695
src/core/dummyData.ts
10695
src/core/dummyData.ts
File diff suppressed because it is too large
Load Diff
@@ -1,213 +1,7 @@
|
|||||||
import * as XLSX from 'xlsx';
|
|
||||||
import { ASSET_SCHEMA } from './schema';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ITAM 엑셀 핸들러 (Database Synchronized Edition)
|
* ITAM 엑셀 핸들러 (지정 날짜 포맷팅 유틸리티)
|
||||||
* 데이터베이스 실제 스키마 컬럼과 엑셀 헤더를 1:1로 일치시킵니다.
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export interface HardwareAsset {
|
|
||||||
[key: string]: any;
|
|
||||||
id: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface SoftwareAsset {
|
|
||||||
[key: string]: any;
|
|
||||||
id: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface SWUser {
|
|
||||||
id: string;
|
|
||||||
sw_id: string;
|
|
||||||
user_name: string;
|
|
||||||
dept: string;
|
|
||||||
corp: string;
|
|
||||||
[key: string]: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface HardwareLog {
|
|
||||||
id: string;
|
|
||||||
assetId: string;
|
|
||||||
date: string;
|
|
||||||
details: string;
|
|
||||||
user: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface MasterAssetData {
|
|
||||||
pc: HardwareAsset[];
|
|
||||||
server: HardwareAsset[];
|
|
||||||
storage: HardwareAsset[];
|
|
||||||
network: HardwareAsset[];
|
|
||||||
equipment: HardwareAsset[];
|
|
||||||
survey: HardwareAsset[];
|
|
||||||
pcParts: HardwareAsset[];
|
|
||||||
swInternal: SoftwareAsset[];
|
|
||||||
swExternal: SoftwareAsset[];
|
|
||||||
cloud: SoftwareAsset[];
|
|
||||||
domain: any[];
|
|
||||||
vip: HardwareAsset[];
|
|
||||||
officeSupplies: HardwareAsset[];
|
|
||||||
cost: any[];
|
|
||||||
swUsers: SWUser[];
|
|
||||||
logs: HardwareLog[];
|
|
||||||
[key: string]: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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') {
|
||||||
@@ -219,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);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import { ASSET_SCHEMA, UI_TEXT } from './schema';
|
import { ASSET_SCHEMA, UI_TEXT } from './schema';
|
||||||
import { getActionButtonsHTML } from './utils';
|
|
||||||
import { generateOptionsHTML } from '../components/Modal/ModalUtils';
|
import { generateOptionsHTML } from '../components/Modal/ModalUtils';
|
||||||
import { CORP_LIST } from '../components/Modal/SharedData';
|
import { CORP_LIST } from '../components/Modal/SharedData';
|
||||||
|
|
||||||
@@ -14,47 +13,100 @@ export interface FilterOptions {
|
|||||||
showDept?: boolean;
|
showDept?: boolean;
|
||||||
showLoc?: boolean;
|
showLoc?: boolean;
|
||||||
showField?: boolean;
|
showField?: boolean;
|
||||||
|
showType?: boolean;
|
||||||
|
showStatus?: boolean;
|
||||||
extraHTML?: string;
|
extraHTML?: string;
|
||||||
onFilterChange: (filters: any) => void;
|
onFilterChange: (filters: any) => void;
|
||||||
|
initialFilters?: any;
|
||||||
|
fullList?: any[]; // For populating dynamic filters
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 전역 액션 버튼 그룹 생성 (자산 추가 등)
|
||||||
|
*/
|
||||||
|
export function getActionButtonsHTML(): string {
|
||||||
|
return `<div id="filter-bar-actions" class="header-action-group"></div>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function renderFilterBar(container: HTMLElement, options: FilterOptions) {
|
export function renderFilterBar(container: HTMLElement, options: FilterOptions) {
|
||||||
const { keywordLabel = '통합 검색', showCorp = false, showDept = false, showLoc = false, showField = false, extraHTML = '', onFilterChange } = options;
|
const {
|
||||||
|
keywordLabel = '통합 검색',
|
||||||
|
showCorp = false,
|
||||||
|
showDept = false,
|
||||||
|
showLoc = false,
|
||||||
|
showField = false,
|
||||||
|
showType = false,
|
||||||
|
showStatus = false,
|
||||||
|
extraHTML = '',
|
||||||
|
onFilterChange,
|
||||||
|
initialFilters = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '', status: '' },
|
||||||
|
fullList = []
|
||||||
|
} = options;
|
||||||
|
|
||||||
|
container.classList.add('search-bar'); // Restored class
|
||||||
|
|
||||||
|
// Helper to get unique sorted values
|
||||||
|
const getUnique = (key: keyof typeof ASSET_SCHEMA | string) => {
|
||||||
|
const fieldKey = (ASSET_SCHEMA as any)[key]?.key || key;
|
||||||
|
return Array.from(new Set(fullList.map(item => item[fieldKey] || item[(ASSET_SCHEMA as any)[key]?.db]).filter(Boolean))).sort();
|
||||||
|
};
|
||||||
|
|
||||||
container.innerHTML = `
|
container.innerHTML = `
|
||||||
<div class="search-item flex-1">
|
<div class="search-item flex-1">
|
||||||
<label>${keywordLabel}</label>
|
<label>${keywordLabel}</label>
|
||||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off" value="${initialFilters.keyword || ''}">
|
||||||
</div>
|
</div>
|
||||||
|
${showType ? `
|
||||||
|
<div class="search-item">
|
||||||
|
<label>${ASSET_SCHEMA.ASSET_TYPE.ui}</label>
|
||||||
|
<select id="filter-type">
|
||||||
|
<option value="">전체 유형</option>
|
||||||
|
${getUnique('ASSET_TYPE').map(v => `<option value="${v}" ${initialFilters.type === v ? 'selected' : ''}>${v}</option>`).join('')}
|
||||||
|
</select>
|
||||||
|
</div>` : ''}
|
||||||
|
${showStatus ? `
|
||||||
|
<div class="search-item">
|
||||||
|
<label>${ASSET_SCHEMA.HW_STATUS.ui}</label>
|
||||||
|
<select id="filter-status">
|
||||||
|
<option value="">전체 상태</option>
|
||||||
|
${getUnique('HW_STATUS').map(v => `<option value="${v}" ${initialFilters.status === v ? 'selected' : ''}>${v}</option>`).join('')}
|
||||||
|
</select>
|
||||||
|
</div>` : ''}
|
||||||
${showField ? `
|
${showField ? `
|
||||||
<div class="search-item">
|
<div class="search-item">
|
||||||
<label>${ASSET_SCHEMA.SW_FIELD.ui}</label>
|
<label>${ASSET_SCHEMA.SW_FIELD.ui}</label>
|
||||||
<select id="filter-field">
|
<select id="filter-field">
|
||||||
<option value="">전체 분야</option>
|
<option value="">전체 분야</option>
|
||||||
<option value="업무공통">업무공통</option>
|
<option value="업무공통" ${initialFilters.field === '업무공통' ? 'selected' : ''}>업무공통</option>
|
||||||
<option value="개발S/W">개발S/W</option>
|
<option value="개발S/W" ${initialFilters.field === '개발S/W' ? 'selected' : ''}>개발S/W</option>
|
||||||
<option value="디자인">디자인</option>
|
<option value="디자인" ${initialFilters.field === '디자인' ? 'selected' : ''}>디자인</option>
|
||||||
<option value="설계S/W">설계S/W</option>
|
<option value="설계S/W" ${initialFilters.field === '설계S/W' ? 'selected' : ''}>설계S/W</option>
|
||||||
</select>
|
</select>
|
||||||
</div>` : ''}
|
</div>` : ''}
|
||||||
${showCorp ? `
|
${showCorp ? `
|
||||||
<div class="search-item">
|
<div class="search-item">
|
||||||
<label>${ASSET_SCHEMA.PURCHASE_CORP.ui}</label>
|
<label>${ASSET_SCHEMA.PURCHASE_CORP.ui}</label>
|
||||||
<select id="filter-corp">${generateOptionsHTML(CORP_LIST, '', true)}</select>
|
<select id="filter-corp">${generateOptionsHTML(CORP_LIST, initialFilters.corp || '', true)}</select>
|
||||||
</div>` : ''}
|
</div>` : ''}
|
||||||
${showLoc ? `
|
${showLoc ? `
|
||||||
<div class="search-item">
|
<div class="search-item">
|
||||||
<label>${ASSET_SCHEMA.LOCATION.ui}</label>
|
<label>${ASSET_SCHEMA.LOCATION.ui}</label>
|
||||||
<select id="filter-loc"><option value="">전체 위치</option></select>
|
<select id="filter-loc">
|
||||||
|
<option value="">전체 위치</option>
|
||||||
|
${getUnique('LOCATION').map(v => `<option value="${v}" ${initialFilters.loc === v ? 'selected' : ''}>${v}</option>`).join('')}
|
||||||
|
</select>
|
||||||
</div>` : ''}
|
</div>` : ''}
|
||||||
${showDept ? `
|
${showDept ? `
|
||||||
<div class="search-item">
|
<div class="search-item">
|
||||||
<label>${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
|
<label>${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
|
||||||
<select id="filter-dept"><option value="">전체 조직</option></select>
|
<select id="filter-dept">
|
||||||
|
<option value="">전체 조직</option>
|
||||||
|
${getUnique('CURRENT_DEPT').map(v => `<option value="${v}" ${initialFilters.dept === v ? 'selected' : ''}>${v}</option>`).join('')}
|
||||||
|
</select>
|
||||||
</div>` : ''}
|
</div>` : ''}
|
||||||
${extraHTML}
|
${extraHTML}
|
||||||
<button id="btn-reset-filters" class="btn btn-outline btn-reset">
|
<button id="btn-reset-filters" class="btn btn-outline btn-reset">
|
||||||
<i data-lucide="refresh-ccw"></i> ${UI_TEXT.ACTION.RESET_FILTER}
|
<i data-lucide="refresh-ccw" class="icon-sm"></i> ${UI_TEXT.ACTION.RESET_FILTER}
|
||||||
</button>
|
</button>
|
||||||
${getActionButtonsHTML()}
|
${getActionButtonsHTML()}
|
||||||
`;
|
`;
|
||||||
@@ -66,7 +118,9 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
|
|||||||
corp: (container.querySelector('#filter-corp') as HTMLSelectElement)?.value || '',
|
corp: (container.querySelector('#filter-corp') as HTMLSelectElement)?.value || '',
|
||||||
dept: (container.querySelector('#filter-dept') as HTMLSelectElement)?.value || '',
|
dept: (container.querySelector('#filter-dept') as HTMLSelectElement)?.value || '',
|
||||||
loc: (container.querySelector('#filter-loc') as HTMLSelectElement)?.value || '',
|
loc: (container.querySelector('#filter-loc') as HTMLSelectElement)?.value || '',
|
||||||
field: (container.querySelector('#filter-field') as HTMLSelectElement)?.value || ''
|
field: (container.querySelector('#filter-field') as HTMLSelectElement)?.value || '',
|
||||||
|
type: (container.querySelector('#filter-type') as HTMLSelectElement)?.value || '',
|
||||||
|
status: (container.querySelector('#filter-status') as HTMLSelectElement)?.value || ''
|
||||||
};
|
};
|
||||||
onFilterChange(filters);
|
onFilterChange(filters);
|
||||||
};
|
};
|
||||||
@@ -76,9 +130,11 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
|
|||||||
container.querySelector('#filter-dept')?.addEventListener('change', triggerChange);
|
container.querySelector('#filter-dept')?.addEventListener('change', triggerChange);
|
||||||
container.querySelector('#filter-loc')?.addEventListener('change', triggerChange);
|
container.querySelector('#filter-loc')?.addEventListener('change', triggerChange);
|
||||||
container.querySelector('#filter-field')?.addEventListener('change', triggerChange);
|
container.querySelector('#filter-field')?.addEventListener('change', triggerChange);
|
||||||
|
container.querySelector('#filter-type')?.addEventListener('change', triggerChange);
|
||||||
|
container.querySelector('#filter-status')?.addEventListener('change', triggerChange);
|
||||||
|
|
||||||
container.querySelector('#btn-reset-filters')?.addEventListener('click', () => {
|
container.querySelector('#btn-reset-filters')?.addEventListener('click', () => {
|
||||||
['filter-keyword', 'filter-corp', 'filter-dept', 'filter-loc', 'filter-field'].forEach(id => {
|
['filter-keyword', 'filter-corp', 'filter-dept', 'filter-loc', 'filter-field', 'filter-type', 'filter-status'].forEach(id => {
|
||||||
const el = container.querySelector(`#${id}`);
|
const el = container.querySelector(`#${id}`);
|
||||||
if (el) (el as any).value = '';
|
if (el) (el as any).value = '';
|
||||||
});
|
});
|
||||||
@@ -98,7 +154,9 @@ export function applyCommonFilters(list: any[], filters: any, searchKeys: (keyof
|
|||||||
const matchDept = !filters.dept || (item[ASSET_SCHEMA.CURRENT_DEPT.key] || item[ASSET_SCHEMA.CURRENT_DEPT.db]) === filters.dept;
|
const matchDept = !filters.dept || (item[ASSET_SCHEMA.CURRENT_DEPT.key] || item[ASSET_SCHEMA.CURRENT_DEPT.db]) === filters.dept;
|
||||||
const matchLoc = !filters.loc || (item[ASSET_SCHEMA.LOCATION.key] || item[ASSET_SCHEMA.LOCATION.db]) === filters.loc;
|
const matchLoc = !filters.loc || (item[ASSET_SCHEMA.LOCATION.key] || item[ASSET_SCHEMA.LOCATION.db]) === filters.loc;
|
||||||
const matchField = !filters.field || (item[ASSET_SCHEMA.SW_FIELD.key] || item[ASSET_SCHEMA.SW_FIELD.db]) === filters.field;
|
const matchField = !filters.field || (item[ASSET_SCHEMA.SW_FIELD.key] || item[ASSET_SCHEMA.SW_FIELD.db]) === filters.field;
|
||||||
|
const matchType = !filters.type || (item[ASSET_SCHEMA.ASSET_TYPE.key] || item[ASSET_SCHEMA.ASSET_TYPE.db]) === filters.type;
|
||||||
|
const matchStatus = !filters.status || (item[ASSET_SCHEMA.HW_STATUS.key] || item[ASSET_SCHEMA.HW_STATUS.db]) === filters.status;
|
||||||
|
|
||||||
return matchKeyword && matchCorp && matchDept && matchLoc && matchField;
|
return matchKeyword && matchCorp && matchDept && matchLoc && matchField && matchType && matchStatus;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -17,10 +17,14 @@ export const ASSET_SCHEMA = {
|
|||||||
PURCHASE_AMOUNT:{ key: 'purchase_amount', db: 'purchase_amount', ui: '구매금액' },
|
PURCHASE_AMOUNT:{ key: 'purchase_amount', db: 'purchase_amount', ui: '구매금액' },
|
||||||
PURCHASE_VENDOR:{ key: 'purchase_vendor', db: 'purchase_vendor', ui: '구매업체' },
|
PURCHASE_VENDOR:{ key: 'purchase_vendor', db: 'purchase_vendor', ui: '구매업체' },
|
||||||
APPROVAL_DOC: { key: 'approval_document', db: 'approval_document', ui: '품의서' },
|
APPROVAL_DOC: { key: 'approval_document', db: 'approval_document', ui: '품의서' },
|
||||||
|
SERVICE_TYPE: { key: 'service_type', db: 'service_type', ui: '서비스 구분' },
|
||||||
MANAGER_MAIN: { key: 'manager_primary', db: 'manager_primary', ui: '담당자(정)' },
|
MANAGER_MAIN: { key: 'manager_primary', db: 'manager_primary', ui: '담당자(정)' },
|
||||||
MANAGER_SUB: { key: 'manager_secondary', db: 'manager_secondary', ui: '담당자(부)' },
|
MANAGER_SUB: { key: 'manager_secondary', db: 'manager_secondary', ui: '담당자(부)' },
|
||||||
LOCATION: { key: 'location', db: 'location', ui: '자산위치' },
|
LOCATION: { key: 'location', db: 'location', ui: '자산위치' },
|
||||||
LOC_DETAIL: { key: 'location_detail', db: 'location_detail', ui: '상세위치' },
|
LOC_DETAIL: { key: 'location_detail', db: 'location_detail', ui: '상세위치' },
|
||||||
|
LOCATION_PHOTO: { key: 'location_photo', db: 'location_photo', ui: '배치도이미지' },
|
||||||
|
LOC_X: { key: 'loc_x', db: 'loc_x', ui: '위치X' },
|
||||||
|
LOC_Y: { key: 'loc_y', db: 'loc_y', ui: '위치Y' },
|
||||||
MEMO: { key: 'memo', db: 'memo', ui: '메모' },
|
MEMO: { key: 'memo', db: 'memo', ui: '메모' },
|
||||||
|
|
||||||
// ─── 하드웨어 상세 (Hardware) ───
|
// ─── 하드웨어 상세 (Hardware) ───
|
||||||
@@ -117,12 +121,12 @@ export const PAGE_DESCRIPTIONS: Record<string, { title: string; description: str
|
|||||||
description: '측량 및 공간 정보 수집에 사용되는 특수 정밀 장비들의 이력과 상태를 관리합니다.',
|
description: '측량 및 공간 정보 수집에 사용되는 특수 정밀 장비들의 이력과 상태를 관리합니다.',
|
||||||
icon: 'map'
|
icon: 'map'
|
||||||
},
|
},
|
||||||
'내부': {
|
'내부SW': {
|
||||||
title: '사내 개발 S/W 관리',
|
title: '사내 개발 S/W 관리',
|
||||||
description: '사내에서 자체 개발하거나 운영 중인 시스템 및 소프트웨어 서비스 현황을 관리합니다.',
|
description: '사내에서 자체 개발하거나 운영 중인 시스템 및 소프트웨어 서비스 현황을 관리합니다.',
|
||||||
icon: 'code'
|
icon: 'code'
|
||||||
},
|
},
|
||||||
'외부': {
|
'외부SW': {
|
||||||
title: '외부 상용 S/W 관리',
|
title: '외부 상용 S/W 관리',
|
||||||
description: '상용 소프트웨어의 라이선스 보유 현황, 사용자 할당 및 만료 일정을 관리합니다.',
|
description: '상용 소프트웨어의 라이선스 보유 현황, 사용자 할당 및 만료 일정을 관리합니다.',
|
||||||
icon: 'package'
|
icon: 'package'
|
||||||
@@ -151,6 +155,21 @@ export const PAGE_DESCRIPTIONS: Record<string, { title: string; description: str
|
|||||||
title: '사무용 가구 관리',
|
title: '사무용 가구 관리',
|
||||||
description: '책상, 의자, 캐비닛 등 사무 환경 구성을 위한 가구 자산의 배치 현황을 관리합니다.',
|
description: '책상, 의자, 캐비닛 등 사무 환경 구성을 위한 가구 자산의 배치 현황을 관리합니다.',
|
||||||
icon: 'armchair'
|
icon: 'armchair'
|
||||||
|
},
|
||||||
|
'사용자': {
|
||||||
|
title: '임직원 사용자 관리',
|
||||||
|
description: 'IT 자산 할당 및 관리의 기준이 되는 사내 임직원(사용자) 정보를 데이터베이스 기반으로 직접 등록하고 수정합니다.',
|
||||||
|
icon: 'users'
|
||||||
|
},
|
||||||
|
'부품 마스터': {
|
||||||
|
title: '부품 표준 정보 관리',
|
||||||
|
description: 'PC 사양 적정성 평가의 기준이 되는 부품 표준 정보 및 등급별 감점 점수를 관리합니다.',
|
||||||
|
icon: 'cpu'
|
||||||
|
},
|
||||||
|
'직무별 기준 사양': {
|
||||||
|
title: '직무별 기준 사양 관리',
|
||||||
|
description: 'BIM 모델러, 개발자, 엔지니어 등 사내 직무별 권장 하드웨어 기준 및 성능 합격 점수를 관리합니다.',
|
||||||
|
icon: 'sliders'
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,90 +1,69 @@
|
|||||||
import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog } from './excelHandler';
|
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 MasterAssetData {
|
|
||||||
users: any[];
|
|
||||||
pc: any[];
|
|
||||||
server: any[];
|
|
||||||
storage: any[];
|
|
||||||
network: any[];
|
|
||||||
survey: any[];
|
|
||||||
pcParts: any[];
|
|
||||||
equipment: any[];
|
|
||||||
officeSupplies: any[];
|
|
||||||
swInternal: any[];
|
|
||||||
swExternal: any[];
|
|
||||||
cloud: any[];
|
|
||||||
domain: any[];
|
|
||||||
cost: any[];
|
|
||||||
vip: any[];
|
|
||||||
mobile?: any[]; // Legacy mobile support
|
|
||||||
equip?: any[]; // Backward compat
|
|
||||||
|
|
||||||
// Backward compatibility
|
|
||||||
subSw: any[];
|
|
||||||
permSw: any[];
|
|
||||||
|
|
||||||
swUsers: SWUser[];
|
|
||||||
logs: HardwareLog[];
|
|
||||||
|
|
||||||
// 통합 배열
|
|
||||||
hw: any[];
|
|
||||||
sw: any[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface AppState {
|
export interface AppState {
|
||||||
activeCategory: 'dashboard' | 'hw' | 'sw' | 'ops' | 'vip' | 'fac' | 'users' | 'etc';
|
activeCategory: 'dashboard' | 'hw' | 'sw' | 'ops' | 'vip' | 'fac' | 'users' | 'etc';
|
||||||
activeSubTab: string;
|
activeSubTab: string;
|
||||||
|
viewMode: 'location' | 'legacy' | 'list';
|
||||||
masterData: MasterAssetData;
|
masterData: MasterAssetData;
|
||||||
activeCharts: any[];
|
activeCharts: any[];
|
||||||
|
currentUserRole: 'admin' | 'user';
|
||||||
|
listFilters?: Record<string, any>;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 초기 상태
|
// 초기 상태
|
||||||
export const state: AppState = {
|
export const state: AppState = {
|
||||||
activeCategory: 'hw',
|
activeCategory: 'hw',
|
||||||
activeSubTab: '대시보드',
|
activeSubTab: '대시보드',
|
||||||
|
viewMode: 'location',
|
||||||
activeCharts: [],
|
activeCharts: [],
|
||||||
|
currentUserRole: 'user',
|
||||||
|
listFilters: {},
|
||||||
masterData: {
|
masterData: {
|
||||||
users: [],
|
users: [],
|
||||||
pc: [], server: [], storage: [], network: [],
|
pc: [], server: [], storage: [], network: [],
|
||||||
survey: [], pcParts: [], equipment: [], officeSupplies: [],
|
survey: [], pcParts: [], partsMaster: [], equipment: [], officeSupplies: [],
|
||||||
swInternal: [], swExternal: [], cloud: [], domain: [],
|
swInternal: [], swExternal: [], cloud: [], domain: [],
|
||||||
cost: [], vip: [],
|
cost: [], vip: [],
|
||||||
subSw: [], permSw: [],
|
|
||||||
hw: [], sw: [],
|
hw: [], sw: [],
|
||||||
swUsers: [], logs: []
|
swUsers: [], logs: [],
|
||||||
|
jobSpecs: [],
|
||||||
|
mobile: []
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
(window as any).__itam_state = state;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 신규 14개 테이블 구조에 맞춘 데이터 로드 (Dummy Data)
|
* 통합 V2 스키마에 맞춘 데이터 로드
|
||||||
*/
|
*/
|
||||||
export async function loadMasterDataFromDB() {
|
export async function loadMasterDataFromDB() {
|
||||||
try {
|
try {
|
||||||
state.masterData.pc = dummyPCs || [];
|
const response = await fetch(`${API_BASE_URL}/api/assets/master`);
|
||||||
state.masterData.server = dummyServers || [];
|
if (!response.ok) throw new Error('Failed to fetch master data');
|
||||||
state.masterData.storage = dummyStorages || [];
|
|
||||||
state.masterData.network = dummyEquips || []; // dummy fallback
|
const data = await response.json();
|
||||||
state.masterData.survey = [];
|
|
||||||
state.masterData.pcParts = [];
|
// 전역 상태 업데이트
|
||||||
state.masterData.equipment = dummyEquips || [];
|
state.masterData = {
|
||||||
state.masterData.officeSupplies = [];
|
...state.masterData,
|
||||||
state.masterData.swInternal = dummyPermSw || [];
|
...data,
|
||||||
state.masterData.swExternal = dummySubSw || [];
|
jobSpecs: data.jobSpecs || [],
|
||||||
state.masterData.cloud = dummyCloud || [];
|
logs: (data.logs || []).map((l: any) => ({
|
||||||
state.masterData.domain = dummyDomain || [];
|
...l,
|
||||||
state.masterData.cost = [];
|
assetId: l.asset_id || l.assetId,
|
||||||
state.masterData.vip = [];
|
date: l.log_date || l.date,
|
||||||
state.masterData.swUsers = dummySwUsers || [];
|
user: l.log_user || l.user,
|
||||||
state.masterData.logs = dummyLogs || [];
|
log_date: l.log_date || l.date,
|
||||||
state.masterData.users = [];
|
log_user: l.log_user || l.user
|
||||||
|
}))
|
||||||
|
};
|
||||||
|
|
||||||
// Mapping for backward compatibility
|
// Mapping for backward compatibility
|
||||||
state.masterData.equip = state.masterData.equipment;
|
(state.masterData as any).equip = state.masterData.equipment;
|
||||||
state.masterData.subSw = state.masterData.swExternal;
|
(state.masterData as any).subSw = state.masterData.swExternal;
|
||||||
state.masterData.permSw = state.masterData.swInternal;
|
(state.masterData as any).permSw = state.masterData.swInternal;
|
||||||
|
|
||||||
// 하드웨어 통합 (대시보드 호환용)
|
// 하드웨어 통합 (대시보드 호환용)
|
||||||
state.masterData.hw = [
|
state.masterData.hw = [
|
||||||
@@ -101,10 +80,10 @@ export async function loadMasterDataFromDB() {
|
|||||||
state.masterData.sw = [
|
state.masterData.sw = [
|
||||||
...state.masterData.swInternal,
|
...state.masterData.swInternal,
|
||||||
...state.masterData.swExternal,
|
...state.masterData.swExternal,
|
||||||
...state.masterData.cloud
|
...(state.masterData.cloud || [])
|
||||||
];
|
];
|
||||||
|
|
||||||
console.log('✅ All dummy data loaded and unified');
|
console.log('✅ V2 Normalized data loaded successfully');
|
||||||
return true;
|
return true;
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.warn('⚠️ Dummy 로드 실패:', err);
|
console.warn('⚠️ Dummy 로드 실패:', err);
|
||||||
@@ -117,18 +96,21 @@ export function updateState(newState: Partial<AppState>) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 자산 저장 (Dummy API)
|
* 자산 저장 (V2 Normalized API)
|
||||||
*/
|
*/
|
||||||
export async function saveAsset(category: string, asset: any) {
|
export async function saveAsset(category: string, asset: any) {
|
||||||
try {
|
try {
|
||||||
const currentList = [...(state.masterData as any)[category]];
|
const url = `${API_BASE_URL}/api/asset/${category}/save`;
|
||||||
const idx = currentList.findIndex(a => a.id === asset.id);
|
const response = await fetch(url, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(asset)
|
||||||
|
});
|
||||||
|
|
||||||
if (idx > -1) currentList[idx] = asset;
|
if (response.ok) {
|
||||||
else currentList.push(asset);
|
await loadMasterDataFromDB(); // 전역 상태 갱신
|
||||||
|
return true;
|
||||||
(state.masterData as any)[category] = currentList;
|
}
|
||||||
return true;
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('자산 저장 실패:', err);
|
console.error('자산 저장 실패:', err);
|
||||||
}
|
}
|
||||||
@@ -136,16 +118,119 @@ export async function saveAsset(category: string, asset: any) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 자산 삭제 (Dummy API)
|
* 자산 삭제 (V2 API)
|
||||||
*/
|
*/
|
||||||
export async function deleteAsset(category: string, assetId: string) {
|
export async function deleteAsset(category: string, assetId: string) {
|
||||||
try {
|
try {
|
||||||
const currentList = [...(state.masterData as any)[category]];
|
const url = `${API_BASE_URL}/api/asset/${category}/${assetId}`;
|
||||||
const filteredList = currentList.filter(a => a.id !== assetId);
|
const response = await fetch(url, { method: 'DELETE' });
|
||||||
(state.masterData as any)[category] = filteredList;
|
|
||||||
return true;
|
if (response.ok) {
|
||||||
|
await loadMasterDataFromDB(); // 전역 상태 갱신
|
||||||
|
return true;
|
||||||
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('자산 삭제 실패:', err);
|
console.error('자산 삭제 실패:', err);
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function savePartsMaster(component: any) {
|
||||||
|
try {
|
||||||
|
const url = `${API_BASE_URL}/api/hardware-components/save`;
|
||||||
|
const response = await fetch(url, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(component)
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
await loadMasterDataFromDB(); // 전역 상태 갱신
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('부품 마스터 저장 실패:', err);
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function deletePartsMaster(id: number) {
|
||||||
|
try {
|
||||||
|
const url = `${API_BASE_URL}/api/hardware-components/${id}`;
|
||||||
|
const response = await fetch(url, { method: 'DELETE' });
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
await loadMasterDataFromDB(); // 전역 상태 갱신
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('부품 마스터 삭제 실패:', err);
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function saveSystemUser(user: any) {
|
||||||
|
try {
|
||||||
|
const url = `${API_BASE_URL}/api/system-users/save`;
|
||||||
|
const response = await fetch(url, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(user)
|
||||||
|
});
|
||||||
|
if (response.ok) {
|
||||||
|
await loadMasterDataFromDB(); // 전역 상태 갱신
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('사용자 정보 저장 실패:', err);
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function deleteSystemUser(id: string) {
|
||||||
|
try {
|
||||||
|
const url = `${API_BASE_URL}/api/system-users/${id}`;
|
||||||
|
const response = await fetch(url, { method: 'DELETE' });
|
||||||
|
if (response.ok) {
|
||||||
|
await loadMasterDataFromDB(); // 전역 상태 갱신
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('사용자 정보 삭제 실패:', err);
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function saveJobSpec(spec: any) {
|
||||||
|
try {
|
||||||
|
const url = `${API_BASE_URL}/api/job-specs/save`;
|
||||||
|
const response = await fetch(url, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(spec)
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
await loadMasterDataFromDB(); // 전역 상태 갱신
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('직무별 기준 사양 저장 실패:', err);
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function deleteJobSpec(id: number) {
|
||||||
|
try {
|
||||||
|
const url = `${API_BASE_URL}/api/job-specs/${id}`;
|
||||||
|
const response = await fetch(url, { method: 'DELETE' });
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
await loadMasterDataFromDB(); // 전역 상태 갱신
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('직무별 기준 사양 삭제 실패:', err);
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|||||||
155
src/core/types.ts
Normal file
155
src/core/types.ts
Normal file
@@ -0,0 +1,155 @@
|
|||||||
|
/**
|
||||||
|
* ITAM Global Type Definitions
|
||||||
|
*/
|
||||||
|
|
||||||
|
export interface BaseAsset {
|
||||||
|
id: string;
|
||||||
|
asset_code?: string;
|
||||||
|
category?: string;
|
||||||
|
asset_type?: string;
|
||||||
|
purchase_corp?: string;
|
||||||
|
purchase_date?: string;
|
||||||
|
purchase_amount?: number | string;
|
||||||
|
purchase_vendor?: string;
|
||||||
|
approval_document?: string;
|
||||||
|
service_type?: string;
|
||||||
|
manager_primary?: string;
|
||||||
|
manager_secondary?: string;
|
||||||
|
location?: string;
|
||||||
|
location_detail?: string;
|
||||||
|
location_photo?: string;
|
||||||
|
loc_x?: number;
|
||||||
|
loc_y?: number;
|
||||||
|
memo?: string;
|
||||||
|
updated_at?: string;
|
||||||
|
created_at?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface HardwareAsset extends BaseAsset {
|
||||||
|
hw_status?: string;
|
||||||
|
model_name?: string;
|
||||||
|
asset_name?: string;
|
||||||
|
asset_mfr?: string;
|
||||||
|
current_dept?: string;
|
||||||
|
previous_dept?: string;
|
||||||
|
user_current?: string;
|
||||||
|
emp_no?: string;
|
||||||
|
user_position?: string;
|
||||||
|
previous_user?: string;
|
||||||
|
cpu?: string;
|
||||||
|
ram?: string;
|
||||||
|
gpu?: string;
|
||||||
|
ssd_1?: string;
|
||||||
|
ssd_2?: string;
|
||||||
|
hdd_1?: string;
|
||||||
|
hdd_2?: string;
|
||||||
|
hdd_3?: string;
|
||||||
|
hdd_4?: string;
|
||||||
|
mainboard?: string;
|
||||||
|
os?: string;
|
||||||
|
ip_address?: string;
|
||||||
|
ip_address_2?: string;
|
||||||
|
mac_address?: string;
|
||||||
|
remote_tool?: string;
|
||||||
|
remote_id?: string;
|
||||||
|
remote_pw?: string;
|
||||||
|
monitoring?: string;
|
||||||
|
volume?: string;
|
||||||
|
monitor_inch?: string;
|
||||||
|
asset_count?: number | string;
|
||||||
|
serial_num?: string;
|
||||||
|
// Normalized V3 fields
|
||||||
|
volumes?: any[];
|
||||||
|
remotes?: any[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SoftwareAsset extends BaseAsset {
|
||||||
|
sw_status?: string;
|
||||||
|
sw_field?: string;
|
||||||
|
sw_type?: string;
|
||||||
|
dev_objective?: string;
|
||||||
|
dev_manager?: string;
|
||||||
|
planning_manager?: string;
|
||||||
|
sales_manager?: string;
|
||||||
|
product_name?: string;
|
||||||
|
domain_address?: string;
|
||||||
|
email_account?: string;
|
||||||
|
email_pw?: string;
|
||||||
|
sw_id?: string;
|
||||||
|
sw_pw?: string;
|
||||||
|
purchase_method?: string;
|
||||||
|
asset_purpose?: string;
|
||||||
|
asset_status?: string;
|
||||||
|
start_date?: string;
|
||||||
|
expired_date?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SWUser {
|
||||||
|
id: string;
|
||||||
|
sw_id: string;
|
||||||
|
user_name: string;
|
||||||
|
dept: string;
|
||||||
|
corp: string;
|
||||||
|
emp_no?: string;
|
||||||
|
created_at?: string;
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface HardwareLog {
|
||||||
|
id: string;
|
||||||
|
asset_id: string;
|
||||||
|
log_date: string;
|
||||||
|
log_user: string;
|
||||||
|
event_type: string;
|
||||||
|
details: string;
|
||||||
|
old_dept?: string;
|
||||||
|
new_dept?: string;
|
||||||
|
old_user?: string;
|
||||||
|
new_user?: string;
|
||||||
|
created_at?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SystemUser {
|
||||||
|
id: string;
|
||||||
|
emp_no: string;
|
||||||
|
user_name: string;
|
||||||
|
dept_name: string;
|
||||||
|
position: string;
|
||||||
|
status: string;
|
||||||
|
created_at?: string;
|
||||||
|
updated_at?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PartsMaster {
|
||||||
|
id: number | string;
|
||||||
|
category: string;
|
||||||
|
component_name: string;
|
||||||
|
score_tier: string;
|
||||||
|
deduction: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MasterAssetData {
|
||||||
|
users: SystemUser[];
|
||||||
|
pc: HardwareAsset[];
|
||||||
|
server: HardwareAsset[];
|
||||||
|
storage: HardwareAsset[];
|
||||||
|
network: HardwareAsset[];
|
||||||
|
survey: HardwareAsset[];
|
||||||
|
pcParts: HardwareAsset[];
|
||||||
|
partsMaster: PartsMaster[];
|
||||||
|
equipment: HardwareAsset[];
|
||||||
|
officeSupplies: HardwareAsset[];
|
||||||
|
swInternal: SoftwareAsset[];
|
||||||
|
swExternal: SoftwareAsset[];
|
||||||
|
cloud: SoftwareAsset[];
|
||||||
|
domain: SoftwareAsset[];
|
||||||
|
cost: any[];
|
||||||
|
vip: HardwareAsset[];
|
||||||
|
swUsers: SWUser[];
|
||||||
|
logs: HardwareLog[];
|
||||||
|
jobSpecs?: any[];
|
||||||
|
mobile?: HardwareAsset[];
|
||||||
|
// Integrated arrays
|
||||||
|
hw: HardwareAsset[];
|
||||||
|
sw: SoftwareAsset[];
|
||||||
|
}
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
import { PAGE_DESCRIPTIONS } from './schema';
|
import { PAGE_DESCRIPTIONS } from './schema';
|
||||||
|
|
||||||
export const API_BASE_URL = `http://${location.hostname}:3000`;
|
export const API_BASE_URL = '';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ITAM 공통 유틸리티 함수
|
* ITAM 공통 유틸리티 함수
|
||||||
@@ -17,7 +17,7 @@ export function renderPageHeader(container: HTMLElement, pageId: string) {
|
|||||||
header.className = 'page-header';
|
header.className = 'page-header';
|
||||||
header.innerHTML = `
|
header.innerHTML = `
|
||||||
<div class="page-title-group">
|
<div class="page-title-group">
|
||||||
<h2 class="page-title"><i data-lucide="${config.icon}"></i> ${config.title}</h2>
|
<h2 class="page-title">${config.title}</h2>
|
||||||
<p class="page-description">${config.description}</p>
|
<p class="page-description">${config.description}</p>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
@@ -153,14 +153,207 @@ export function dynamicSort<T>(list: T[], key: string, direction: 'asc' | 'desc'
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 목록 뷰용 액션 버튼 HTML 생성 (자산추가)
|
* 목록 뷰용 액션 버튼 HTML 생성 (중복 제거를 위해 비워둠)
|
||||||
*/
|
*/
|
||||||
export function getActionButtonsHTML(): string {
|
export function getActionButtonsHTML(): string {
|
||||||
return `
|
return '';
|
||||||
<div class="search-actions">
|
|
||||||
<button id="btn-add-asset" class="btn btn-primary">
|
|
||||||
<i data-lucide="plus"></i> 자산추가
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 100점 만점 감점형 PC 성능 점수 계산 (CPU + RAM + GPU + 연식)
|
||||||
|
*/
|
||||||
|
export 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 function getPcGrade(score: number, isWin11Incompatible?: boolean): { name: string; class: string; color: string } {
|
||||||
|
if (score >= 85) return { name: '최상급', class: 'b-purple', color: '#7C3AED' };
|
||||||
|
if (score >= 70) return { name: '상급', class: 'b-primary', color: '#4F46E5' };
|
||||||
|
if (score >= 40) return { name: '중급', class: 'b-green', color: '#10B981' };
|
||||||
|
if (score >= 20 && !isWin11Incompatible) return { name: '보급', class: 'b-yellow', color: '#F59E0B' };
|
||||||
|
return { name: '교체 대상', class: 'badge-danger', color: '#EF4444' };
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Windows 11 업그레이드 지원 불가능한 하드웨어 조건인지 판별
|
||||||
|
*/
|
||||||
|
export function isWindows11Incompatible(cpu: string, ram: string): boolean {
|
||||||
|
if (!cpu) return true;
|
||||||
|
const cpuUpper = cpu.toUpperCase();
|
||||||
|
|
||||||
|
// 1. RAM 4GB 미만은 공식 미지원
|
||||||
|
if (ram) {
|
||||||
|
const ramMatch = ram.toUpperCase().match(/(\d+)\s*GB/);
|
||||||
|
if (ramMatch && ramMatch[1]) {
|
||||||
|
const ramVal = parseInt(ramMatch[1], 10);
|
||||||
|
if (ramVal < 4) return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. CPU 세대 검사
|
||||||
|
// Intel CPU 세대 판정
|
||||||
|
const intelMatch = cpuUpper.match(/I\d-?(\d+)/);
|
||||||
|
if (intelMatch && intelMatch[1]) {
|
||||||
|
const numStr = intelMatch[1];
|
||||||
|
let gen = 0;
|
||||||
|
if (numStr.length === 5) gen = parseInt(numStr.substring(0, 2), 10);
|
||||||
|
else if (numStr.length === 4) gen = parseInt(numStr.substring(0, 1), 10);
|
||||||
|
else if (numStr.length === 3) gen = parseInt(numStr.substring(0, 1), 10); // 3자리수 구형 세대 (예: i5-750)
|
||||||
|
|
||||||
|
if (gen > 0 && gen < 8) return true; // 8세대 미만 불가
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// AMD Ryzen CPU 세대 판정
|
||||||
|
const amdMatch = cpuUpper.match(/RYZEN\s?\d\s?-?(\d+)/);
|
||||||
|
if (amdMatch && amdMatch[1]) {
|
||||||
|
const numStr = amdMatch[1];
|
||||||
|
let amdGen = 0;
|
||||||
|
if (numStr.length === 4) amdGen = parseInt(numStr.substring(0, 1), 10); // 1xxx, 2xxx 등
|
||||||
|
|
||||||
|
if (amdGen > 0 && amdGen < 2) return true; // Ryzen 1세대 이하는 불가
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apple Silicon은 지원
|
||||||
|
if (cpuUpper.includes('APPLE') || cpuUpper.includes('M1') || cpuUpper.includes('M2') || cpuUpper.includes('M3') || cpuUpper.includes('M4')) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 그 외 확실한 구형 CPU 제품군
|
||||||
|
const knownOldCpus = ['CORE2', 'CORE 2', 'PENTIUM', 'CELERON', 'ATHLON', 'PHENOM', 'XEON'];
|
||||||
|
if (knownOldCpus.some(name => cpuUpper.includes(name))) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 세대 매칭은 안되었으나 Intel Core i 시리즈 구조이면 구형(1세대 등)으로 간주
|
||||||
|
if (cpuUpper.includes('I3') || cpuUpper.includes('I5') || cpuUpper.includes('I7') || cpuUpper.includes('I9')) {
|
||||||
|
// i5-620M 처럼 옛날 구형 모바일 칩 등
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
176
src/main.ts
176
src/main.ts
@@ -1,57 +1,56 @@
|
|||||||
|
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';
|
||||||
import { renderSWTable } from './views/SW_Table';
|
import { renderSWTable } from './views/SW_Table';
|
||||||
|
import { renderLocationView } from './views/LocationView';
|
||||||
import { initBaseModal } from './components/Modal/BaseModal';
|
import { initBaseModal } from './components/Modal/BaseModal';
|
||||||
import { initHwModal, openHwModal } from './components/Modal/HWModal';
|
import { initHwModal, openHwModal } from './components/Modal/HWModal';
|
||||||
import { initSwModal, openSwModal } from './components/Modal/SWModal';
|
import { initSwModal, openSwModal } from './components/Modal/SWModal';
|
||||||
import { initSwUserModal } from './components/Modal/SWUserModal';
|
import { initSwUserModal } from './components/Modal/SWUserModal';
|
||||||
import { initDomainModal, openDomainModal } from './components/Modal/DomainModal';
|
import { initDomainModal, openDomainModal } from './components/Modal/DomainModal';
|
||||||
|
import { initPartsMasterModal, openPartsMasterModal } from './components/Modal/PartsMasterModal';
|
||||||
|
import { initJobSpecModal, openJobSpecModal } from './components/Modal/JobSpecModal';
|
||||||
|
import { initUserModal, openUserModal } from './components/Modal/UserModal';
|
||||||
|
import { activePartsMasterSubTab } from './views/List/PartsMasterListView';
|
||||||
import { initDashboardDetailModal } from './components/Modal/DashboardDetailModal';
|
import { initDashboardDetailModal } from './components/Modal/DashboardDetailModal';
|
||||||
import { initGuide } from './components/Guide';
|
import { initGuide } from './components/Guide';
|
||||||
|
import { pcFlowModal } from './components/Modal/PCFlowModal';
|
||||||
import { createIcons, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, History, RefreshCcw, BookOpen, Settings } from 'lucide';
|
import { createIcons, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, History, RefreshCcw, BookOpen, Settings } from 'lucide';
|
||||||
|
|
||||||
// --- DB 저장을 위한 세분화된 헬퍼 함수들 ---
|
|
||||||
async function apiBatchSave(url: string, data: any[], label: string) {
|
|
||||||
try {
|
|
||||||
console.log(`✅ ${label} DB 저장 완료 (Dummy Mode: ${data?.length || 0} items)`);
|
|
||||||
} catch (err) {
|
|
||||||
console.error(`❌ ${label} DB 저장 오류:`, err);
|
|
||||||
alert(`${label} 저장 중 오류가 발생했습니다: ${(err as any).message}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const savePcToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/pc/batch`, state.masterData.pc, '개인PC');
|
|
||||||
const saveServerToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/server/batch`, state.masterData.server, '서버');
|
|
||||||
const saveStorageToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/storage/batch`, state.masterData.storage, '스토리지');
|
|
||||||
const saveNetworkToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/network/batch`, state.masterData.network, '네트워크');
|
|
||||||
const saveEquipToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/equipment/batch`, state.masterData.equipment, '업무지원장비');
|
|
||||||
const saveSwInternalToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/sw/internal/batch`, state.masterData.swInternal, '내부SW');
|
|
||||||
const saveSwExternalToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/sw/external/batch`, state.masterData.swExternal, '외부SW');
|
|
||||||
const saveCloudToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/cloud/batch`, state.masterData.cloud, '클라우드');
|
|
||||||
const saveSwUsersToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/asset/software/assignment/batch`, state.masterData.swUsers, 'SW사용자');
|
|
||||||
const saveLogsToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/asset/history/batch`, state.masterData.logs, '자산 로그');
|
|
||||||
const saveUsersToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/users/batch`, state.masterData.users, '사용자마스터');
|
|
||||||
|
|
||||||
// 화면 갱신 통합 핸들러
|
// 화면 갱신 통합 핸들러
|
||||||
function refreshView() {
|
function refreshView(tab?: string) {
|
||||||
const mainContent = document.getElementById('main-content')!;
|
const mainContent = document.getElementById('main-content')!;
|
||||||
if (!mainContent) return;
|
if (!mainContent) return;
|
||||||
|
|
||||||
if (state.activeSubTab === '대시보드') {
|
const activeTab = tab || state.activeSubTab;
|
||||||
|
|
||||||
|
if (activeTab === '대시보드') {
|
||||||
renderDashboard(mainContent);
|
renderDashboard(mainContent);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 서버 탭이 아닐 경우에는 state.viewMode가 location이더라도 강제로 목록(list) 뷰를 그리도록 함
|
||||||
|
// (state.viewMode의 원래 상태는 보존하여, 서버 탭 복귀 시 최근 보던 모드를 유지함)
|
||||||
|
const isServerTab = activeTab === '서버';
|
||||||
|
const effectiveViewMode = isServerTab ? state.viewMode : 'list';
|
||||||
|
|
||||||
|
mainContent.innerHTML = `
|
||||||
|
<div id="view-body" class="view-container"></div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const viewBody = document.getElementById('view-body')!;
|
||||||
|
if (effectiveViewMode === 'location') {
|
||||||
|
renderLocationView(viewBody);
|
||||||
} else {
|
} else {
|
||||||
renderSWTable(mainContent);
|
renderSWTable(viewBody); // 리스트 형식
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 통합 저장 및 갱신
|
// 통합 갱신 (저장은 이미 개별 모달에서 처리됨)
|
||||||
async function saveAllDataToDB() {
|
async function refreshAllData() {
|
||||||
await Promise.all([
|
|
||||||
savePcToDB(), saveServerToDB(), saveStorageToDB(), saveNetworkToDB(),
|
|
||||||
saveEquipToDB(), saveSwInternalToDB(), saveSwExternalToDB(),
|
|
||||||
saveCloudToDB(), saveSwUsersToDB(), saveLogsToDB(), saveUsersToDB()
|
|
||||||
]);
|
|
||||||
await loadMasterDataFromDB();
|
await loadMasterDataFromDB();
|
||||||
refreshView();
|
refreshView();
|
||||||
}
|
}
|
||||||
@@ -65,29 +64,29 @@ function initApp() {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
renderNavigation((tab) => {
|
renderNavigation((tab) => {
|
||||||
if (tab === '대시보드') {
|
refreshView();
|
||||||
renderDashboard(mainContent);
|
|
||||||
} else {
|
|
||||||
renderSWTable(mainContent);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
initHwModal(() => saveAllDataToDB(), closeAllModals);
|
initHwModal(() => refreshAllData(), closeAllModals);
|
||||||
initSwModal(() => saveAllDataToDB(), closeAllModals);
|
initSwModal(() => refreshAllData(), closeAllModals);
|
||||||
|
|
||||||
initSwUserModal(() => {
|
initSwUserModal(() => {
|
||||||
saveSwUsersToDB().then(() => {
|
|
||||||
loadMasterDataFromDB().then(() => refreshView());
|
loadMasterDataFromDB().then(() => refreshView());
|
||||||
});
|
|
||||||
}, closeAllModals);
|
}, closeAllModals);
|
||||||
|
initDomainModal(() => refreshAllData(), closeAllModals);
|
||||||
|
initPartsMasterModal(() => refreshAllData(), closeAllModals);
|
||||||
|
initJobSpecModal(() => refreshAllData(), closeAllModals);
|
||||||
|
initUserModal(() => refreshAllData(), closeAllModals);
|
||||||
|
|
||||||
initDashboardDetailModal();
|
initDashboardDetailModal();
|
||||||
initDomainModal();
|
|
||||||
initGuide();
|
initGuide();
|
||||||
|
pcFlowModal.init(() => {
|
||||||
|
loadMasterDataFromDB().then(() => refreshView());
|
||||||
|
});
|
||||||
|
|
||||||
loadMasterDataFromDB().then((success) => {
|
loadMasterDataFromDB().then((success) => {
|
||||||
if (success) {
|
if (success) {
|
||||||
refreshView();
|
refreshView();
|
||||||
|
initRoleSwitcher(); // [추가] 역할 전환 토글 초기화
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} catch (e) { console.error('❌ Initialization failed:', e); }
|
} catch (e) { console.error('❌ Initialization failed:', e); }
|
||||||
@@ -104,22 +103,40 @@ function initApp() {
|
|||||||
const cat = state.activeCategory;
|
const cat = state.activeCategory;
|
||||||
const newId = Math.random().toString(36).substring(2, 9);
|
const newId = Math.random().toString(36).substring(2, 9);
|
||||||
|
|
||||||
if (cat === 'users') {
|
|
||||||
// 사용자 추가는 renderUserList 내부에서 별도로 처리하거나 여기서 호출 가능
|
|
||||||
// 현재 renderUserList에서 별도로 핸들링하고 있으므로 중복 실행 방지
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (cat === 'hw') {
|
if (cat === 'hw') {
|
||||||
openHwModal({ id: newId, asset_code: '', category: tab } as any, 'add');
|
if (tab === '부품 마스터') {
|
||||||
|
if (activePartsMasterSubTab === 'job-spec') {
|
||||||
|
openJobSpecModal({ id: '' } as any, 'add');
|
||||||
|
} else {
|
||||||
|
openPartsMasterModal({ id: '' } as any, 'add');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
openHwModal({ id: newId, asset_code: '', category: tab } as any, 'add');
|
||||||
|
}
|
||||||
} else if (cat === 'sw') {
|
} else if (cat === 'sw') {
|
||||||
const swType = tab === '외부' ? '외부SW' : (tab === '내부' ? '내부SW' : '외부SW');
|
const swType = tab === '외부SW' ? '외부SW' : (tab === '내부SW' ? '내부SW' : '외부SW');
|
||||||
openSwModal({ id: newId, asset_type: swType } as any, 'add');
|
openSwModal({ id: newId, asset_type: swType } as any, 'add');
|
||||||
} else if (cat === 'ops') {
|
} else if (cat === 'ops') {
|
||||||
if (tab === '도메인') openDomainModal(null);
|
if (tab === '도메인') openDomainModal(null);
|
||||||
|
else if (tab === '사용자') openUserModal({ id: '' }, 'add');
|
||||||
}
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 부품 마스터 탭으로 바로가기 연동
|
||||||
|
if (target.closest('#btn-goto-parts-master')) {
|
||||||
|
state.activeCategory = 'hw';
|
||||||
|
state.activeSubTab = '부품 마스터';
|
||||||
|
renderNavigation((tab) => { refreshView(); });
|
||||||
|
refreshView();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// PC 이동/반납 모달 열기
|
||||||
|
if (target.closest('#btn-pc-flow')) {
|
||||||
|
pcFlowModal.open();
|
||||||
|
return;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
createIcons({
|
createIcons({
|
||||||
@@ -128,4 +145,61 @@ function initApp() {
|
|||||||
window.addEventListener('refresh-view', () => refreshView());
|
window.addEventListener('refresh-view', () => refreshView());
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', initApp);
|
/**
|
||||||
|
* 헤더 역할 전환 토글 로직
|
||||||
|
*/
|
||||||
|
function initRoleSwitcher() {
|
||||||
|
const checkbox = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
|
||||||
|
const userLabel = document.querySelector('.role-label.user');
|
||||||
|
const adminLabel = document.querySelector('.role-label.admin');
|
||||||
|
|
||||||
|
if (!checkbox || !userLabel || !adminLabel) return;
|
||||||
|
|
||||||
|
checkbox.addEventListener('change', () => {
|
||||||
|
if (checkbox.checked) {
|
||||||
|
state.currentUserRole = 'admin';
|
||||||
|
userLabel.classList.remove('active');
|
||||||
|
adminLabel.classList.add('active');
|
||||||
|
document.body.classList.add('admin-mode');
|
||||||
|
|
||||||
|
// 관리자 모드 전환 시 대시보드로 이동
|
||||||
|
state.activeCategory = 'hw';
|
||||||
|
state.activeSubTab = '대시보드';
|
||||||
|
} else {
|
||||||
|
state.currentUserRole = 'user';
|
||||||
|
adminLabel.classList.remove('active');
|
||||||
|
userLabel.classList.add('active');
|
||||||
|
document.body.classList.remove('admin-mode');
|
||||||
|
|
||||||
|
// 실무자 모드 전환 시 서버 목록으로 이동
|
||||||
|
state.activeCategory = 'hw';
|
||||||
|
state.activeSubTab = '서버';
|
||||||
|
}
|
||||||
|
// 모든 렌더링을 refreshView 하나로 통합하여 규격 유지
|
||||||
|
renderNavigation(() => refreshView());
|
||||||
|
refreshView();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 앱 초기화 (로그인 과정 없이 즉시 시작)
|
||||||
|
*/
|
||||||
|
function initializeAppDirectly() {
|
||||||
|
const loginContainer = document.getElementById('login-container');
|
||||||
|
const appLayout = document.getElementById('app-layout');
|
||||||
|
|
||||||
|
// 기본 권한 설정: 실무자 (User)
|
||||||
|
state.currentUserRole = 'user';
|
||||||
|
state.activeCategory = 'hw';
|
||||||
|
state.activeSubTab = '서버'; // 실무자 기본 탭
|
||||||
|
|
||||||
|
// 화면 전환
|
||||||
|
if (loginContainer) loginContainer.style.display = 'none';
|
||||||
|
if (appLayout) appLayout.style.display = 'flex';
|
||||||
|
|
||||||
|
// 앱 초기화 및 내비게이션(헤더 포함) 렌더링
|
||||||
|
initApp();
|
||||||
|
renderNavigation((tab) => refreshView(tab));
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', initializeAppDirectly);
|
||||||
|
|||||||
8
src/map-editor-main.ts
Normal file
8
src/map-editor-main.ts
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import './styles/common.css';
|
||||||
|
import './views/map-editor.css';
|
||||||
|
import { MapEditor } from './views/MapEditor';
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const editor = new MapEditor();
|
||||||
|
editor.init();
|
||||||
|
});
|
||||||
@@ -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"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
@@ -1,81 +1,48 @@
|
|||||||
:root {
|
:root {
|
||||||
/* --- System Colors (Added) --- */
|
/* --- Vercel Stark Palette --- */
|
||||||
--color-red: #F21D0D;
|
--primary: #171717;
|
||||||
--color-pink: #E8175E;
|
--on-primary: #ffffff;
|
||||||
--color-magenta: #B92ED1;
|
--body: #4d4d4d;
|
||||||
--color-purple: #6D3DC2;
|
--mute: #71717a;
|
||||||
--color-navy: #4255bd;
|
--hairline: #ebebeb;
|
||||||
--color-blue: #0D8DF2;
|
--hairline-strong: #a1a1a1;
|
||||||
--color-cyan: #03AEFC;
|
--canvas: #ffffff;
|
||||||
--color-green: #4DB251;
|
--canvas-soft: #fafafa;
|
||||||
--color-yellow: #FFBF00;
|
--canvas-soft-2: #f5f5f5;
|
||||||
--color-orange: #FF9800;
|
|
||||||
--color-dahong: #FF3D00;
|
|
||||||
--color-brown: #A0705F;
|
|
||||||
--color-iron: #7F7F7F;
|
|
||||||
--color-steel: #688897;
|
|
||||||
|
|
||||||
--color-red-light: #FEE9E7;
|
/* --- Brand Accents --- */
|
||||||
--color-pink-light: #FDE8EF;
|
--color-blue: #0070f3;
|
||||||
--color-magenta-light: #F8EBFB;
|
--color-cyan: #50e3c2;
|
||||||
--color-purple-light: #F1ECF9;
|
--color-pink: #ff0080;
|
||||||
--color-navy-light: #EDEEF9;
|
--color-violet: #7928ca;
|
||||||
--color-blue-light: #E7F4FE;
|
--color-orange: #f5a623;
|
||||||
--color-cyan-light: #E6F7FF;
|
|
||||||
--color-green-light: #EEF8EE;
|
|
||||||
--color-yellow-light: #FFF9E6;
|
|
||||||
--color-orange-light: #FFF5E6;
|
|
||||||
--color-dahong-light: #FFECE6;
|
|
||||||
--color-brown-light: #F6F1EF;
|
|
||||||
--color-iron-light: #F3F3F3;
|
|
||||||
--color-steel-light: #F0F4F5;
|
|
||||||
|
|
||||||
--color-red-medium: #FAA59E;
|
/* --- Semantic Alignment --- */
|
||||||
--color-pink-medium: #F6A2BF;
|
--primary-color: var(--primary);
|
||||||
--color-magenta-medium: #E3ABEC;
|
--primary-hover: #000000;
|
||||||
--color-purple-medium: #C5B1E7;
|
--primary-light: var(--canvas-soft-2);
|
||||||
--color-navy-medium: #B3BBE5;
|
--text-main: var(--primary);
|
||||||
--color-blue-medium: #9ED1FA;
|
--text-muted: var(--body);
|
||||||
--color-cyan-medium: #9ADFFE;
|
--border-color: var(--hairline);
|
||||||
--color-green-medium: #B8E0B9;
|
--bg-color: var(--canvas-soft);
|
||||||
--color-yellow-medium: #FFE599;
|
--bg-light: var(--canvas-soft-2);
|
||||||
--color-orange-medium: #FFD699;
|
|
||||||
--color-dahong-medium: #FFB199;
|
|
||||||
--color-brown-medium: #D9C6BF;
|
|
||||||
--color-iron-medium: #CCCCCC;
|
|
||||||
--color-steel-medium: #C3CFD5;
|
|
||||||
|
|
||||||
/* --- Primary Brand Levels --- */
|
|
||||||
--primary-lv-0: #E9EEED;
|
|
||||||
--primary-lv-1: #D2DCDB;
|
|
||||||
--primary-lv-2: #A5B9B6;
|
|
||||||
--primary-lv-3: #789792;
|
|
||||||
--primary-lv-4: #4B746D;
|
|
||||||
--primary-lv-5: #35635C;
|
|
||||||
--primary-lv-6: #1E5149;
|
|
||||||
--primary-lv-7: #1B443D;
|
|
||||||
--primary-lv-8: #193833;
|
|
||||||
--primary-lv-9: #162A27;
|
|
||||||
|
|
||||||
/* --- Legacy Aliases (Maintained for compatibility) --- */
|
|
||||||
--primary-color: var(--primary-lv-6);
|
|
||||||
--primary-hover: var(--primary-lv-5);
|
|
||||||
--primary-light: var(--primary-lv-0);
|
|
||||||
|
|
||||||
--text-main: #111827;
|
|
||||||
--text-muted: #6B7280;
|
|
||||||
--border-color: #E5E7EB;
|
|
||||||
--bg-color: #F9FAFB;
|
|
||||||
--bg-light: #FAFAFA;
|
|
||||||
--sidebar-bg: #ffffff;
|
|
||||||
--white: #FFFFFF;
|
--white: #FFFFFF;
|
||||||
--danger: var(--color-red);
|
--danger: #ee0000;
|
||||||
|
--success: #0070f3;
|
||||||
|
--header-height: 64px;
|
||||||
|
|
||||||
--dash-primary: #6cc020;
|
/* --- Global Typography Scale (No Upper Limit) --- */
|
||||||
--dash-light: #f2f9ec;
|
--fs-xs: max(10px, 1vmin + 0.1vw);
|
||||||
--dash-danger: #cf222e;
|
--fs-sm: max(12px, 1.2vmin + 0.2vw);
|
||||||
|
--fs-base: max(13px, 1.4vmin + 0.2vw);
|
||||||
|
--fs-md: max(16px, 2vmin + 0.3vw);
|
||||||
|
--fs-lg: max(20px, 3vmin + 0.4vw);
|
||||||
|
--fs-xl: max(28px, 5vmin + 0.6vw);
|
||||||
|
|
||||||
--header-height: 52px;
|
/* --- Layout Units --- */
|
||||||
|
--header-height: 64px;
|
||||||
|
--spacing-base: 1.5rem;
|
||||||
|
--radius-base: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
@@ -83,16 +50,29 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
letter-spacing: -0.02em;
|
letter-spacing: -0.02em;
|
||||||
/* 모든 요소에 자간 규칙 일괄 적용 */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
|
font-family: 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
|
||||||
color: var(--text-main);
|
color: var(--text-main);
|
||||||
background-color: var(--bg-color);
|
background-color: var(--bg-color);
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
font-size: 19px;
|
font-size: var(--fs-base);
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, textarea {
|
||||||
|
-webkit-user-select: text;
|
||||||
|
-moz-user-select: text;
|
||||||
|
-ms-user-select: text;
|
||||||
|
user-select: text;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-layout {
|
.app-layout {
|
||||||
@@ -100,180 +80,52 @@ body {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Main Header & GNB/LNB --- */
|
/* --- Header --- */
|
||||||
.main-header {
|
.main-header {
|
||||||
background-color: var(--white);
|
background-color: var(--canvas);
|
||||||
border-bottom: 1px solid var(--border-color);
|
border-bottom: 1px solid var(--border-color);
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
height: var(--header-height);
|
height: var(--header-height);
|
||||||
}
|
flex-shrink: 0;
|
||||||
|
|
||||||
.header-container {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 1.5rem;
|
padding: 0 1.5rem;
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand {
|
.header-container {
|
||||||
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.75rem;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-logo {
|
.brand { display: flex; align-items: center; gap: 0.75rem; }
|
||||||
height: 34px;
|
.main-logo { height: clamp(28px, 4vmin, 40px); width: auto; }
|
||||||
width: auto;
|
.brand h1 { font-size: clamp(0.85rem, 1.4vmin, 1.05rem); font-weight: 600; color: var(--text-main); }
|
||||||
}
|
|
||||||
|
|
||||||
.brand h1 {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
/* 전체적으로 살짝 축소 */
|
|
||||||
font-weight: 800;
|
|
||||||
color: var(--text-main);
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand h1 .sub-title {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
/* 영문 제목은 더 작게 */
|
|
||||||
color: var(--primary-color);
|
|
||||||
font-weight: 600;
|
|
||||||
margin-left: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.integrated-nav {
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-group {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.integrated-nav { flex: 1; display: flex; align-items: center; margin-left: 2rem; gap: 0.5rem; }
|
||||||
.gnb-trigger {
|
.gnb-trigger {
|
||||||
font-size: 14px;
|
font-size: var(--fs-xs);
|
||||||
font-weight: 700;
|
|
||||||
color: var(--text-main);
|
|
||||||
padding: 0 1rem;
|
|
||||||
cursor: pointer;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lnb-shelf {
|
|
||||||
display: none;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.25rem;
|
|
||||||
padding: 0 0.75rem;
|
|
||||||
height: 60%;
|
|
||||||
border-left: 1px solid var(--border-color);
|
|
||||||
margin-left: 0.25rem;
|
|
||||||
animation: fadeIn 0.2s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-group:hover .lnb-shelf,
|
|
||||||
.nav-group.is-showing-shelf .lnb-shelf {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lnb-item {
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
|
padding: 0.4rem 0.75rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 0.2rem 0.6rem;
|
border-radius: 9999px;
|
||||||
border-radius: 4px;
|
transition: all 0.2s;
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
|
.gnb-trigger:hover { color: var(--text-main); background: var(--canvas-soft-2); }
|
||||||
|
.gnb-trigger.active { color: var(--text-main); font-weight: 600; background: var(--canvas-soft-2); }
|
||||||
|
|
||||||
.lnb-item:hover {
|
/* --- Layout Content --- */
|
||||||
color: var(--primary-color);
|
|
||||||
background-color: var(--bg-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.lnb-item.active {
|
|
||||||
color: var(--primary-color);
|
|
||||||
background-color: var(--primary-light);
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(-5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Global Actions & Buttons --- */
|
|
||||||
.header-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.3rem;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 0.35rem;
|
|
||||||
padding: 0 0.8rem;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
height: 28px;
|
|
||||||
line-height: 1;
|
|
||||||
white-space: nowrap; /* 텍스트 줄바꿈 방지 */
|
|
||||||
flex-shrink: 0; /* 크기 찌그러짐 방지 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn i,
|
|
||||||
.btn svg {
|
|
||||||
width: 12px !important;
|
|
||||||
height: 12px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
color: var(--white);
|
|
||||||
border: 1px solid var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-outline {
|
|
||||||
background-color: transparent;
|
|
||||||
color: var(--text-muted);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-danger {
|
|
||||||
color: var(--danger) !important;
|
|
||||||
border-color: var(--danger) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Layout Frame --- */
|
|
||||||
.content-area {
|
.content-area {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 1.25rem 2rem 0; /* 상단 여백 1.25rem 추가 */
|
padding: 0;
|
||||||
overflow: hidden;
|
|
||||||
/* 전체 스크롤 차단 */
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.view-container {
|
.view-container {
|
||||||
@@ -282,93 +134,509 @@ body {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
/* 내부 스크롤을 유도하기 위해 설정 */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Footer --- */
|
.view-content-wrapper {
|
||||||
.main-footer {
|
flex: 1;
|
||||||
height: 28px;
|
display: flex;
|
||||||
background-color: var(--white);
|
flex-direction: column;
|
||||||
border-top: 1px solid var(--border-color);
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- View Toggle (Vercel Tab Style) --- */
|
||||||
|
.view-toggle {
|
||||||
|
display: inline-flex;
|
||||||
|
background: var(--canvas-soft-2);
|
||||||
|
padding: 0.2rem;
|
||||||
|
border: 1px solid var(--hairline);
|
||||||
|
gap: 0.1rem;
|
||||||
|
border-radius: var(--radius-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-btn {
|
||||||
|
padding: 0.35rem 1rem;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-muted);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.1s;
|
||||||
|
border-radius: calc(var(--radius-base) - 2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-btn:hover { color: var(--text-main); }
|
||||||
|
.toggle-btn.active {
|
||||||
|
background: var(--canvas);
|
||||||
|
color: var(--text-main);
|
||||||
|
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Role Toggle Switch --- */
|
||||||
|
.role-toggle-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
gap: 0.75rem;
|
||||||
padding: 0 1.5rem;
|
background: var(--canvas-soft-2);
|
||||||
flex-shrink: 0;
|
padding: 0.35rem 0.75rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
border: 1px solid var(--hairline);
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-footer p {
|
.role-label {
|
||||||
font-family: 'Pretendard Variable', Pretendard, sans-serif;
|
font-size: var(--fs-xs);
|
||||||
font-size: 0.75rem;
|
font-weight: 500;
|
||||||
font-weight: 300;
|
color: var(--mute);
|
||||||
line-height: 1.25rem;
|
transition: all 0.2s;
|
||||||
letter-spacing: -0.0175rem;
|
}
|
||||||
color: #777777;
|
|
||||||
user-select: none;
|
.role-label.active {
|
||||||
pointer-events: all;
|
color: var(--primary);
|
||||||
-webkit-user-drag: none;
|
font-weight: 700;
|
||||||
margin: 0;
|
}
|
||||||
padding: 0;
|
|
||||||
|
.role-toggle {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 40px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.role-toggle input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.role-slider {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: var(--hairline-strong);
|
||||||
|
transition: .4s;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.role-slider:before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
height: 16px;
|
||||||
|
width: 16px;
|
||||||
|
left: 2px;
|
||||||
|
bottom: 2px;
|
||||||
|
background-color: white;
|
||||||
|
transition: .4s;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .role-slider {
|
||||||
|
background-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .role-slider:before {
|
||||||
|
transform: translateX(20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Utility Styles (The Standard) --- */
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
padding: 0 1.25rem;
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: 9999px;
|
||||||
|
cursor: pointer;
|
||||||
|
height: clamp(32px, 4.5vmin, 44px);
|
||||||
|
transition: all 0.2s;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary { background-color: var(--primary); color: var(--on-primary); }
|
||||||
|
.btn-primary:hover { background-color: #000; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
|
||||||
|
|
||||||
|
.btn-outline { background-color: var(--canvas); color: var(--text-main); border: 1px solid var(--hairline); }
|
||||||
|
.btn-outline:hover { border-color: var(--hairline-strong); background: var(--canvas-soft); }
|
||||||
|
|
||||||
|
.btn-sm { height: clamp(28px, 3.5vmin, 36px); padding: 0 1rem; font-size: var(--fs-xs); }
|
||||||
|
.btn-danger { color: var(--danger) !important; border-color: var(--danger) !important; }
|
||||||
|
|
||||||
|
/* --- Form Elements --- */
|
||||||
|
.form-select-sm {
|
||||||
|
height: clamp(28px, 3.5vmin, 36px);
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
border: 1px solid var(--hairline);
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
outline: none;
|
||||||
|
background-color: var(--canvas);
|
||||||
|
color: var(--primary);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-select-sm:focus {
|
||||||
|
border-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.badge-primary { background-color: var(--primary); color: var(--on-primary); }
|
||||||
|
.badge.b-green { background-color: #e6f4ea; color: #137333; } /* 운영/중급 */
|
||||||
|
.badge.b-yellow { background-color: #fffbeb; color: #b45309; } /* 재고/보급 */
|
||||||
|
.badge.b-purple { background-color: #f3e8ff; color: #6b21a8; } /* 수리/최상급 */
|
||||||
|
.badge.b-primary { background-color: #e0e7ff; color: #3730a3; } /* GNB/상급 */
|
||||||
|
.badge.badge-danger { background-color: #fce8e6; color: #c5221f; } /* 폐기/교체대상 */
|
||||||
|
.badge.badge-muted { background-color: #f1f3f4; color: #5f6368; } /* 폐기 */
|
||||||
|
.badge.badge-light { background-color: var(--canvas-soft-2); color: var(--mute); border: 1px solid var(--hairline); } /* 재고기본 */
|
||||||
|
|
||||||
|
/* --- Form Elements Extra --- */
|
||||||
|
.input-with-icon {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-with-icon input {
|
||||||
|
padding-left: 2.5rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-with-icon i,
|
||||||
|
.input-with-icon .icon-sm {
|
||||||
|
position: absolute;
|
||||||
|
left: 12px;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
color: var(--mute);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.autocomplete-list {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
max-height: 250px;
|
||||||
|
overflow-y: auto;
|
||||||
|
background: var(--canvas);
|
||||||
|
border: 1px solid var(--hairline);
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 12px 30px rgba(0,0,0,0.12);
|
||||||
|
z-index: 1100;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.autocomplete-item {
|
||||||
|
padding: 10px 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-bottom: 1px solid var(--hairline-soft, #f5f5f5);
|
||||||
|
transition: background 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.autocomplete-item:hover {
|
||||||
|
background: var(--canvas-soft-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.autocomplete-item-empty {
|
||||||
|
padding: 1rem;
|
||||||
|
color: var(--mute);
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.suggestion-name {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
color: var(--primary);
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.suggestion-meta {
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
color: var(--mute);
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Summary & Selection Cards --- */
|
||||||
|
.summary-info-card {
|
||||||
|
padding: 1.25rem;
|
||||||
|
background: var(--canvas-soft);
|
||||||
|
border: 1px solid var(--hairline);
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-pc-selection-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
max-height: 250px;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-pc-item {
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid var(--hairline);
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
background: var(--canvas);
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-pc-item:hover {
|
||||||
|
border-color: var(--hairline-strong);
|
||||||
|
background: var(--canvas-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-pc-item.selected {
|
||||||
|
border-color: var(--primary);
|
||||||
|
background: var(--primary-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-item-code {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-item-meta {
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
color: var(--mute);
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-list-message {
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
color: var(--mute);
|
||||||
|
padding: 1rem 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Global Utilities --- */
|
||||||
|
.hidden { display: none !important; }
|
||||||
|
.clickable { cursor: pointer; transition: opacity 0.2s; }
|
||||||
|
.clickable:hover { opacity: 0.8; }
|
||||||
|
|
||||||
|
/* Flexbox & Grid Utilities */
|
||||||
|
.flex { display: flex; }
|
||||||
|
.flex-col { display: flex; flex-direction: column; }
|
||||||
|
.flex-row { display: flex; flex-direction: row; }
|
||||||
|
.items-center { align-items: center; }
|
||||||
|
.justify-between { justify-content: space-between; }
|
||||||
|
.justify-center { justify-content: center; }
|
||||||
|
.gap-1 { gap: 0.25rem; }
|
||||||
|
.gap-2 { gap: 0.5rem; }
|
||||||
|
.gap-3 { gap: 0.75rem; }
|
||||||
|
.gap-4 { gap: 1rem; }
|
||||||
|
.gap-6 { gap: 1.5rem; }
|
||||||
|
.gap-y-3 { row-gap: 0.75rem; }
|
||||||
|
.gap-x-4 { column-gap: 1rem; }
|
||||||
|
.mb-0 { margin-bottom: 0 !important; }
|
||||||
|
.mb-4 { margin-bottom: 1rem !important; }
|
||||||
|
.mb-6 { margin-bottom: 1.5rem !important; }
|
||||||
|
.pb-4 { padding-bottom: 1rem !important; }
|
||||||
|
.p-4 { padding: 1rem !important; }
|
||||||
|
.p-2 { padding: 0.5rem !important; }
|
||||||
|
.p-8 { padding: 2rem !important; }
|
||||||
|
.ml-auto { margin-left: auto !important; }
|
||||||
|
.self-end { align-self: flex-end !important; }
|
||||||
|
.font-medium { font-weight: 500; }
|
||||||
|
.text-muted { color: var(--mute) !important; }
|
||||||
|
.mt-12 { margin-top: 3rem !important; }
|
||||||
|
.icon-sm { width: 16px; height: 16px; }
|
||||||
|
.h-90vh { height: 90vh !important; }
|
||||||
|
.pt-0 { padding-top: 0 !important; }
|
||||||
|
.font-semibold { font-weight: 600; }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.w-full { width: 100%; }
|
||||||
|
.h-full { height: 100%; }
|
||||||
|
|
||||||
|
/* Text Utilities */
|
||||||
|
.text-center { text-align: center !important; }
|
||||||
|
.text-right { text-align: right !important; }
|
||||||
|
.text-left { text-align: left !important; }
|
||||||
|
.font-bold { font-weight: 700; }
|
||||||
|
.bg-primary-light { background-color: var(--primary-light) !important; }
|
||||||
|
.text-success { color: var(--success) !important; }
|
||||||
|
.text-danger { color: var(--danger) !important; }
|
||||||
|
.text-blue { color: var(--color-blue) !important; }
|
||||||
|
.text-orange { color: var(--color-orange) !important; }
|
||||||
|
/* --- Unified Search & Filter Bar --- */
|
||||||
|
.search-bar {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--spacing-base);
|
||||||
|
padding: 1.25rem var(--spacing-base);
|
||||||
|
border-bottom: 1px solid var(--hairline);
|
||||||
|
align-items: flex-end;
|
||||||
|
background: var(--canvas);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden {
|
.search-item {
|
||||||
display: none !important;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-nowrap {
|
.search-item.flex-1 {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-item label {
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--mute);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-item input,
|
||||||
|
.search-item select {
|
||||||
|
height: clamp(34px, 4.5vmin, 44px);
|
||||||
|
padding: 0 0.75rem;
|
||||||
|
border: 1px solid var(--hairline);
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: var(--fs-sm);
|
||||||
|
outline: none;
|
||||||
|
background-color: var(--canvas);
|
||||||
|
color: var(--primary);
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-item select {
|
||||||
|
cursor: pointer;
|
||||||
|
min-width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-item input:focus,
|
||||||
|
.search-item select:focus {
|
||||||
|
border-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-action-group {
|
||||||
|
margin-left: auto;
|
||||||
|
align-self: flex-end;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-view-toggle-label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--primary);
|
||||||
|
height: clamp(34px, 4.5vmin, 44px);
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
font-size: var(--fs-sm);
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-view-toggle-label input[type="checkbox"] {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-pagination-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
border-left: 1px solid var(--hairline);
|
||||||
|
height: clamp(34px, 4.5vmin, 44px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-info {
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
color: var(--mute);
|
||||||
|
font-weight: 500;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Utility Styles --- */
|
|
||||||
.badge {
|
/* --- Modal & View Header Layouts --- */
|
||||||
padding: 2px 6px;
|
.header-left {
|
||||||
border-radius: 4px;
|
display: flex;
|
||||||
font-size: 16px;
|
align-items: center;
|
||||||
font-weight: 700;
|
gap: 1rem;
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge-primary {
|
/* --- Asset Identity & Header Styling (Global) --- */
|
||||||
background-color: var(--primary-color);
|
.header-identity {
|
||||||
color: white;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
flex: 1;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge-muted {
|
.asset-code-title {
|
||||||
background-color: #9CA3AF;
|
font-size: var(--fs-md);
|
||||||
color: white;
|
font-weight: 600;
|
||||||
|
color: var(--primary);
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-tag {
|
.service-type-badge {
|
||||||
color: var(--text-muted);
|
font-size: var(--fs-xs);
|
||||||
font-size: 16px;
|
font-weight: 600;
|
||||||
padding: 1px 5px;
|
color: var(--on-primary);
|
||||||
border: 1px solid var(--border-color);
|
background: var(--primary);
|
||||||
border-radius: 3px;
|
padding: 4px 8px;
|
||||||
background-color: var(--bg-light);
|
border-radius: 9999px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-bold {
|
.asset-type-label {
|
||||||
font-weight: 700;
|
font-size: var(--fs-sm);
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--mute);
|
||||||
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Responsive Design (Tablet & Mobile) --- */
|
.main-footer {
|
||||||
@media (max-width: 1200px) {
|
border-top: 1px solid var(--border-color);
|
||||||
.header-container { gap: 0.75rem; padding: 0 1rem; }
|
background-color: var(--canvas);
|
||||||
.brand h1 { font-size: 1rem; }
|
color: var(--mute);
|
||||||
.brand h1 .sub-title { font-size: 0.75rem; }
|
padding: 1rem 2rem;
|
||||||
|
text-align: right;
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
flex-shrink: 0;
|
||||||
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
.main-footer p {
|
||||||
.main-header { height: auto; padding: 0.5rem 0; }
|
margin: 0;
|
||||||
.header-container { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
|
letter-spacing: -0.02em;
|
||||||
.integrated-nav { width: 100%; justify-content: flex-start; border-top: 1px solid var(--border-color); padding-top: 0.5rem; }
|
|
||||||
.header-actions { width: 100%; justify-content: flex-end; padding-top: 0.5rem; }
|
|
||||||
.content-area { padding: 0 1rem; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.brand h1 .sub-title { display: none; } /* 아주 좁은 화면에선 영문명 숨김 */
|
|
||||||
.header-actions .btn span { display: none; } /* 버튼 텍스트 숨기고 아이콘만 표시 */
|
|
||||||
.header-actions .btn { padding: 0 0.5rem; }
|
|
||||||
}
|
|
||||||
@@ -1,195 +0,0 @@
|
|||||||
/* --- Premium Executive Dashboard View Specific Styles --- */
|
|
||||||
.dashboard-section-title {
|
|
||||||
padding: 0 0 1rem 0;
|
|
||||||
font-size: 1.55rem;
|
|
||||||
font-weight: 800;
|
|
||||||
color: var(--text-main);
|
|
||||||
letter-spacing: -0.02em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
||||||
gap: 1.5rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Premium Glassmorphism Card Style */
|
|
||||||
.dashboard-card, .stat-card {
|
|
||||||
background: rgba(255, 255, 255, 0.7);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
-webkit-backdrop-filter: blur(10px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
|
||||||
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.07);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 1.5rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-card:hover, .stat-card:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
box-shadow: 0 12px 40px rgba(31, 38, 135, 0.12);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-layout-2col {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-layout-3col {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-card {
|
|
||||||
min-height: 380px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-card canvas {
|
|
||||||
flex: 1;
|
|
||||||
width: 100% !important;
|
|
||||||
max-height: 280px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Premium KPI Value Styling */
|
|
||||||
.stat-value {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
font-weight: 800;
|
|
||||||
background: linear-gradient(135deg, #1E5149 0%, #3B82F6 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-value-danger {
|
|
||||||
background: linear-gradient(135deg, #E11D48 0%, #F59E0B 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-label {
|
|
||||||
font-size: 1.15rem;
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-weight: 700;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-icon {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
border-radius: 12px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-blue { background: rgba(59, 130, 246, 0.1); color: #3B82F6; }
|
|
||||||
.icon-green { background: rgba(30, 81, 73, 0.1); color: #1E5149; }
|
|
||||||
.icon-red { background: rgba(225, 29, 72, 0.1); color: #E11D48; }
|
|
||||||
.icon-yellow { background: rgba(245, 158, 11, 0.1); color: #F59E0B; }
|
|
||||||
|
|
||||||
.table-premium {
|
|
||||||
background: white;
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-premium table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-premium th {
|
|
||||||
background: #F8FAFC;
|
|
||||||
color: #475569;
|
|
||||||
font-weight: 700;
|
|
||||||
padding: 1rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-premium td {
|
|
||||||
padding: 1rem;
|
|
||||||
border-bottom: 1px solid #E2E8F0;
|
|
||||||
color: #1E293B;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-premium tr:hover td {
|
|
||||||
background: #F1F5F9;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Slider/Carousel Specific Styles --- */
|
|
||||||
.dashboard-header-wrapper {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-controls {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-nav-btn {
|
|
||||||
background: white;
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--text-main);
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-nav-btn:hover {
|
|
||||||
background: var(--primary-color);
|
|
||||||
color: white;
|
|
||||||
border-color: var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-nav-btn:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-indicator {
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-slider-viewport {
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0.5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-slider-track {
|
|
||||||
display: flex;
|
|
||||||
transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
||||||
width: 200%; /* For 2 pages */
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-slide {
|
|
||||||
width: 50%; /* 100% / 2 pages */
|
|
||||||
flex-shrink: 0;
|
|
||||||
padding: 0 2px; /* Slight padding to avoid cutting off box-shadows */
|
|
||||||
}
|
|
||||||
115
src/styles/login.css
Normal file
115
src/styles/login.css
Normal file
@@ -0,0 +1,115 @@
|
|||||||
|
/* Login Screen Styles */
|
||||||
|
|
||||||
|
.login-layout {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 500px;
|
||||||
|
background-color: var(--white);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 3rem;
|
||||||
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
|
||||||
|
animation: slideUp 0.4s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideUp {
|
||||||
|
from { opacity: 0; transform: translateY(10px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-logo {
|
||||||
|
height: 52px;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-header h2 {
|
||||||
|
font-size: 2.33rem;
|
||||||
|
font-weight: 900;
|
||||||
|
color: var(--text-main);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-header p {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-selection {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.role-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rem 1.5rem;
|
||||||
|
border: 2px solid var(--bg-light);
|
||||||
|
border-radius: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
background-color: var(--bg-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.role-card:hover {
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
background-color: var(--white);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 10px 20px rgba(30, 81, 73, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.role-icon {
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
background-color: var(--white);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
color: var(--primary-color);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.role-card:hover .role-icon {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
color: var(--white);
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.role-card h3 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 800;
|
||||||
|
color: var(--text-main);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.role-card p {
|
||||||
|
font-size: 1.08rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-footer {
|
||||||
|
margin-top: 3rem;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
@@ -1,510 +0,0 @@
|
|||||||
/* Modal */
|
|
||||||
.modal-overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0; left: 0; right: 0; bottom: 0;
|
|
||||||
background-color: rgba(0, 0, 0, 0.4);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 1000;
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
transition: opacity 0.2s ease, visibility 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-overlay:not(.hidden) { opacity: 1; visibility: visible; }
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
background-color: var(--white);
|
|
||||||
width: 100%;
|
|
||||||
max-width: 600px;
|
|
||||||
max-height: 90vh;
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
|
|
||||||
transform: translateY(20px);
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-overlay:not(.hidden) .modal-content { transform: translateY(0); }
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
color: var(--white);
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header h2 {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
font-weight: 600;
|
|
||||||
letter-spacing: -0.02em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header .btn-icon {
|
|
||||||
color: #FFFFFF !important;
|
|
||||||
cursor: pointer;
|
|
||||||
background: none !important;
|
|
||||||
border: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-icon {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
padding: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--primary-color);
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-icon:hover {
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-body {
|
|
||||||
padding: 1.5rem;
|
|
||||||
overflow-y: auto;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-form {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.375rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group.full-width {
|
|
||||||
grid-column: span 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Section Title for Grouping */
|
|
||||||
.form-section-title {
|
|
||||||
grid-column: span 2;
|
|
||||||
font-size: 1.15rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--primary-color);
|
|
||||||
padding: 1.5rem 0 0.5rem 0; /* 패딩 조정 */
|
|
||||||
border-bottom: 1px solid var(--border-color);
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Modal Readonly/Edit Mode Interaction */
|
|
||||||
.grid-form.is-view-mode input,
|
|
||||||
.grid-form.is-view-mode select,
|
|
||||||
.grid-form.is-view-mode textarea {
|
|
||||||
border: none !important;
|
|
||||||
background-color: transparent !important;
|
|
||||||
padding-left: 0 !important;
|
|
||||||
padding-right: 0 !important;
|
|
||||||
pointer-events: none !important;
|
|
||||||
color: var(--text-main) !important;
|
|
||||||
font-weight: 500 !important;
|
|
||||||
appearance: none !important;
|
|
||||||
-webkit-appearance: none !important;
|
|
||||||
-moz-appearance: none !important;
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-form.is-view-mode input[type="file"] {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-form.is-view-mode .btn-helper {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-form.is-view-mode button {
|
|
||||||
pointer-events: none !important;
|
|
||||||
background: none !important;
|
|
||||||
border: none !important;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-form.is-view-mode select::-ms-expand {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-form.is-edit-mode input,
|
|
||||||
.grid-form.is-edit-mode select,
|
|
||||||
.grid-form.is-edit-mode textarea {
|
|
||||||
color: #FF3D00; /* 수정 시 글자색 변경 */
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 수동 수정 불가 필드 (자산번호 등) 전용 스타일 */
|
|
||||||
.grid-form input[readonly] {
|
|
||||||
border-color: transparent !important;
|
|
||||||
background-color: transparent !important;
|
|
||||||
pointer-events: none !important;
|
|
||||||
color: var(--text-main) !important;
|
|
||||||
font-weight: 500 !important;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-form.is-edit-mode input:focus,
|
|
||||||
.grid-form.is-edit-mode select:focus,
|
|
||||||
.grid-form.is-edit-mode textarea:focus {
|
|
||||||
border-color: #FF3D00;
|
|
||||||
box-shadow: 0 0 0 2px rgba(255, 61, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-section-title:first-child {
|
|
||||||
padding-top: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group label {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group input,
|
|
||||||
.form-group select,
|
|
||||||
.form-group textarea {
|
|
||||||
padding: 0.625rem;
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: 4px;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: 1.15rem;
|
|
||||||
outline: none;
|
|
||||||
transition: all 0.2s;
|
|
||||||
background-color: var(--white);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group textarea {
|
|
||||||
resize: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group input:focus,
|
|
||||||
.form-group select:focus,
|
|
||||||
.form-group textarea:focus {
|
|
||||||
border-color: var(--primary-color);
|
|
||||||
box-shadow: 0 0 0 2px rgba(30, 81, 73, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-footer {
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
border-top: 1px solid var(--border-color);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
background-color: #FAFAFA;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Wide Modal for History/Detail */
|
|
||||||
.modal-content.wide {
|
|
||||||
max-width: 950px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Upload Preview Specific */
|
|
||||||
.upload-sidebar {
|
|
||||||
width: 240px;
|
|
||||||
border-right: 1px solid var(--border-color);
|
|
||||||
background-color: var(--bg-light);
|
|
||||||
padding: 1.5rem 1rem;
|
|
||||||
overflow-y: auto;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-tab-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-tab-btn {
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 500;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
transition: all 0.2s;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
color: var(--text-main);
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-tab-btn:hover {
|
|
||||||
background-color: var(--white);
|
|
||||||
border-color: var(--border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-tab-btn.active {
|
|
||||||
background-color: var(--white);
|
|
||||||
color: var(--primary-color);
|
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
||||||
border-color: var(--border-color);
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-table-container {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background-color: var(--white);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-stats-bar {
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
border-bottom: 1px solid var(--border-color);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
background-color: var(--white);
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
min-width: max-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-table thead {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
z-index: 10;
|
|
||||||
background-color: var(--bg-light);
|
|
||||||
box-shadow: 0 1px 0 var(--border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-table th {
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
text-align: left;
|
|
||||||
font-size: 17px;
|
|
||||||
font-weight: 600;
|
|
||||||
border-bottom: 1px solid var(--border-color);
|
|
||||||
color: var(--text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-table td {
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
font-size: 18px;
|
|
||||||
border-bottom: 1px solid #f1f5f9;
|
|
||||||
color: var(--text-main);
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-table tr:hover {
|
|
||||||
background-color: var(--bg-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-body-split {
|
|
||||||
display: flex;
|
|
||||||
gap: 2rem;
|
|
||||||
min-height: 480px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-form-area {
|
|
||||||
flex: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-history-area {
|
|
||||||
flex: 0.8;
|
|
||||||
border-left: 1px solid var(--border-color);
|
|
||||||
padding-left: 1.5rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.history-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.history-header h3 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: 600;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
color: var(--text-main);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 읽기 전용 필드 (자산번호 등) 통일 스타일 */
|
|
||||||
.is-readonly-field {
|
|
||||||
border-color: transparent !important;
|
|
||||||
background-color: transparent !important;
|
|
||||||
pointer-events: none !important;
|
|
||||||
color: var(--text-main) !important;
|
|
||||||
font-weight: 600 !important;
|
|
||||||
cursor: default;
|
|
||||||
padding-left: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 입력 필드 + 버튼 그룹 (자산번호 생성 등) */
|
|
||||||
.input-with-btn {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-with-btn input {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0; /* flex 컨테이너 안에서 너비 압축 방지 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-with-btn .btn {
|
|
||||||
flex-shrink: 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.history-timeline {
|
|
||||||
flex: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
max-height: 500px;
|
|
||||||
padding-right: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.history-item {
|
|
||||||
position: relative;
|
|
||||||
padding-left: 1.25rem;
|
|
||||||
padding-bottom: 1.5rem;
|
|
||||||
border-left: 2px solid var(--border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.history-item::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: -7px;
|
|
||||||
top: 0;
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: var(--white);
|
|
||||||
border: 2px solid var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.history-item:last-child {
|
|
||||||
border-left: 2px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.history-date {
|
|
||||||
font-size: 1.05rem;
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.history-user {
|
|
||||||
font-size: 1.05rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.history-details {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
color: var(--text-main);
|
|
||||||
line-height: 1.4;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-history {
|
|
||||||
padding: 2rem 0;
|
|
||||||
text-align: center;
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dashboard Detail Modal Table Fixed Header */
|
|
||||||
#dashboard-detail-modal .modal-body {
|
|
||||||
overflow-y: auto;
|
|
||||||
max-height: calc(80vh - 120px);
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 모달 내부의 table-container 기존 전역 스타일 무력화 */
|
|
||||||
#dashboard-detail-modal .table-container {
|
|
||||||
border: none;
|
|
||||||
border-radius: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
max-height: none;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
#dashboard-detail-modal table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: separate;
|
|
||||||
border-spacing: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#dashboard-detail-modal thead th {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
background-color: var(--bg-light);
|
|
||||||
z-index: 10;
|
|
||||||
border-bottom: 2px solid var(--border-color);
|
|
||||||
box-shadow: none;
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-main);
|
|
||||||
text-align: left;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
#dashboard-detail-modal tbody td {
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
border-bottom: 1px solid var(--border-color);
|
|
||||||
font-size: 1.1rem;
|
|
||||||
color: var(--text-main);
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
#dashboard-detail-modal tbody tr:last-child td {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#dashboard-detail-modal tbody tr:hover {
|
|
||||||
background-color: var(--bg-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 뱃지 스타일 (대시보드 상세 목록용) */
|
|
||||||
#dashboard-detail-modal .badge {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0.125rem 0.5rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 1.05rem;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
#dashboard-detail-modal .badge-outline {
|
|
||||||
border: 1px solid var(--primary-color);
|
|
||||||
color: var(--primary-color);
|
|
||||||
background: var(--primary-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
#dashboard-detail-modal .badge-sw {
|
|
||||||
border: 1px solid #3b82f6;
|
|
||||||
color: #3b82f6;
|
|
||||||
background: #eff6ff;
|
|
||||||
}
|
|
||||||
@@ -1,232 +0,0 @@
|
|||||||
/* --- Page Header for Description --- */
|
|
||||||
.page-header {
|
|
||||||
padding: 1rem 0 0.2rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-title-group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-title {
|
|
||||||
font-size: 21px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--primary-color);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-title i {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-title svg {
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-description {
|
|
||||||
font-size: 17px;
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin: 0;
|
|
||||||
line-height: 1.4;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Table View & Filter Styles --- */
|
|
||||||
|
|
||||||
.search-bar {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.75rem; /* 간격 축소 및 통일 */
|
|
||||||
padding: 1.2rem 0;
|
|
||||||
border-bottom: 1px solid var(--border-color);
|
|
||||||
align-items: flex-end;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-item.flex-1 {
|
|
||||||
flex: 1; /* 검색창이 남은 공간을 채우도록 설정 */
|
|
||||||
min-width: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem; /* 버튼들 간의 간격 */
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-actions .btn {
|
|
||||||
height: 38px;
|
|
||||||
padding: 0 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-item label {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-item input,
|
|
||||||
.search-item select {
|
|
||||||
height: 38px;
|
|
||||||
padding: 0 1rem;
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 19px;
|
|
||||||
outline: none;
|
|
||||||
background-color: var(--white);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 셀렉트 박스 화살표 여백 절대 고정 (수정 금지) */
|
|
||||||
.search-item select {
|
|
||||||
padding-right: 2.5rem !important;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-item input:focus,
|
|
||||||
.search-item select:focus {
|
|
||||||
border-color: var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 필터 초기화 버튼 크기 조정 (입력창 높이 38px에 맞춤) */
|
|
||||||
.btn-reset {
|
|
||||||
height: 38px !important;
|
|
||||||
color: var(--text-muted) !important;
|
|
||||||
padding: 0 1.2rem !important;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-left: 0; /* 불필요한 마진 제거 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-container {
|
|
||||||
flex: 1;
|
|
||||||
background-color: var(--white);
|
|
||||||
border-top: 1px solid var(--border-color);
|
|
||||||
overflow: auto;
|
|
||||||
position: relative;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: separate;
|
|
||||||
border-spacing: 0;
|
|
||||||
table-layout: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
th, td {
|
|
||||||
padding: 0.8rem 1.2rem;
|
|
||||||
border-bottom: 1px solid #F3F4F6;
|
|
||||||
text-align: left; /* 기본은 좌측 정렬 */
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
thead {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
z-index: 50;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
background-color: #FAFAFA !important;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-muted);
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
z-index: 50;
|
|
||||||
box-shadow: inset 0 1px 0 var(--border-color), inset 0 -1px 0 var(--border-color); /* 상하 테두리 보정 */
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
font-size: 18px;
|
|
||||||
color: var(--text-main);
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody tr:hover {
|
|
||||||
background-color: #F9FAFB;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 정렬 클래스 강제 적용 */
|
|
||||||
.text-center { text-align: center !important; }
|
|
||||||
.text-right { text-align: right !important; }
|
|
||||||
.text-left { text-align: left !important; }
|
|
||||||
|
|
||||||
/* 메모 컬럼 전용: 가장 길게 표시되도록 너비 조정 및 줄바꿈 허용 */
|
|
||||||
.col-memo {
|
|
||||||
width: 20%;
|
|
||||||
min-width: 250px;
|
|
||||||
white-space: normal !important;
|
|
||||||
word-break: break-all;
|
|
||||||
line-height: 1.4;
|
|
||||||
text-align: left !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-icon {
|
|
||||||
padding: 0.25rem;
|
|
||||||
border: none;
|
|
||||||
background: none;
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--text-muted);
|
|
||||||
transition: color 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-icon:hover {
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-icon svg {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Table Sorting --- */
|
|
||||||
th.sortable {
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
transition: background-color 0.2s;
|
|
||||||
position: relative;
|
|
||||||
padding-right: 1.8rem !important; /* 아이콘 공간 확보 */
|
|
||||||
}
|
|
||||||
|
|
||||||
th.sortable:hover {
|
|
||||||
background-color: #F3F4F6;
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
th.sortable::after {
|
|
||||||
content: '↕';
|
|
||||||
position: absolute;
|
|
||||||
right: 0.6rem;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
font-size: 11px;
|
|
||||||
opacity: 0.3;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
th.sortable.asc::after {
|
|
||||||
content: '▲';
|
|
||||||
opacity: 1;
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
th.sortable.desc::after {
|
|
||||||
content: '▼';
|
|
||||||
opacity: 1;
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -13,13 +13,13 @@ export function renderSwDashboard(container: HTMLElement) {
|
|||||||
// 통합 SW 데이터
|
// 통합 SW 데이터
|
||||||
const allSw = [...state.masterData.swExternal, ...state.masterData.swInternal];
|
const allSw = [...state.masterData.swExternal, ...state.masterData.swInternal];
|
||||||
|
|
||||||
allSw.forEach(sw => {
|
allSw.forEach((sw: any) => {
|
||||||
const assigned = state.masterData.swUsers.filter(u => u.sw_id === sw.id).length;
|
const assigned = state.masterData.swUsers.filter(u => u.sw_id === sw.id).length;
|
||||||
const qty = typeof sw[ASSET_SCHEMA.ASSET_COUNT.key] === 'number' ? sw[ASSET_SCHEMA.ASSET_COUNT.key] : parseInt(sw[ASSET_SCHEMA.ASSET_COUNT.key]||'0', 10);
|
const qty = typeof sw[ASSET_SCHEMA.ASSET_COUNT.key] === 'number' ? sw[ASSET_SCHEMA.ASSET_COUNT.key] : parseInt(sw[ASSET_SCHEMA.ASSET_COUNT.key]||'0', 10);
|
||||||
const priceStr = sw[ASSET_SCHEMA.PURCHASE_AMOUNT.key] ? String(sw[ASSET_SCHEMA.PURCHASE_AMOUNT.key]).replace(/,/g, '') : '0';
|
const priceStr = sw[ASSET_SCHEMA.PURCHASE_AMOUNT.key] ? String(sw[ASSET_SCHEMA.PURCHASE_AMOUNT.key]).replace(/,/g, '') : '0';
|
||||||
const price = parseInt(priceStr, 10) || 0;
|
const price = parseInt(priceStr, 10) || 0;
|
||||||
|
|
||||||
if (sw.asset_type === '외부SW' || sw.type === '외부SW') {
|
if (sw.asset_type === '외부SW') {
|
||||||
extQty += qty; extUsed += assigned; extTotal++;
|
extQty += qty; extUsed += assigned; extTotal++;
|
||||||
if (isSWExpiring(sw)) extExp++;
|
if (isSWExpiring(sw)) extExp++;
|
||||||
if (sw[ASSET_SCHEMA.PURCHASE_DATE.key]?.startsWith('2026')) extCost2026 += price;
|
if (sw[ASSET_SCHEMA.PURCHASE_DATE.key]?.startsWith('2026')) extCost2026 += price;
|
||||||
@@ -33,38 +33,38 @@ export function renderSwDashboard(container: HTMLElement) {
|
|||||||
const intPer = intQty > 0 ? Math.round((intUsed/intQty)*100) : 0;
|
const intPer = intQty > 0 ? Math.round((intUsed/intQty)*100) : 0;
|
||||||
|
|
||||||
container.innerHTML = `
|
container.innerHTML = `
|
||||||
<div class="view-container">
|
<div class="view-container bg-soft">
|
||||||
<h3 class="dashboard-section-title">소프트웨어 라이선스 현황</h3>
|
<h3 class="dashboard-section-title">소프트웨어 라이선스 현황</h3>
|
||||||
|
|
||||||
<div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">
|
<div class="dashboard-layout-2col mb-6">
|
||||||
<div class="dashboard-card" data-action="ext-usage" style="cursor:pointer; min-height:auto;">
|
<div class="dashboard-card clickable" data-action="ext-usage">
|
||||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">외부 소프트웨어 사용율</span>
|
<div class="stat-label">외부 소프트웨어 사용율</div>
|
||||||
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">${extQty}카피 중 ${extUsed}개 할당</div>
|
<div class="stat-sub">${extQty}카피 중 ${extUsed}개 할당</div>
|
||||||
<div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">${extPer}%</div>
|
<div class="stat-value text-primary">${extPer}%</div>
|
||||||
<div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
|
<div class="stat-progress-bar">
|
||||||
<div style="width: ${extPer}%; height: 100%; background-color: var(--dash-primary);"></div>
|
<div class="progress-fill" style="width: ${extPer}%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dashboard-card" data-action="int-usage" style="cursor:pointer; min-height:auto;">
|
<div class="dashboard-card clickable" data-action="int-usage">
|
||||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">내부 소프트웨어 현황</span>
|
<div class="stat-label">내부 소프트웨어 현황</div>
|
||||||
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">등록된 내부 솔루션: ${intTotal}개</div>
|
<div class="stat-sub">등록된 내부 솔루션: ${intTotal}개</div>
|
||||||
<div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">${intPer}%</div>
|
<div class="stat-value text-primary">${intPer}%</div>
|
||||||
<div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
|
<div class="stat-progress-bar">
|
||||||
<div style="width: ${intPer}%; height: 100%; background-color: var(--dash-primary);"></div>
|
<div class="progress-fill" style="width: ${intPer}%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3 class="dashboard-section-title">2026년 누적 도입 비용 분석</h3>
|
<h3 class="dashboard-section-title">2026년 누적 도입 비용 분석</h3>
|
||||||
|
|
||||||
<div style="display:grid; grid-template-columns: repeat(2, 1fr); gap:1.5rem; margin-bottom:1.5rem;">
|
<div class="dashboard-layout-2col">
|
||||||
<div class="dashboard-card" style="min-height:auto;">
|
<div class="dashboard-card">
|
||||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">외부 SW 누적 비용 (2026)</span>
|
<div class="stat-label">외부 SW 누적 비용 (2026)</div>
|
||||||
<div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">₩ ${extCost2026.toLocaleString()}</div>
|
<div class="stat-value text-primary">₩ ${extCost2026.toLocaleString()}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dashboard-card" style="min-height:auto;">
|
<div class="dashboard-card">
|
||||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">내부 SW 누적 비용 (2026)</span>
|
<div class="stat-label">내부 SW 누적 비용 (2026)</div>
|
||||||
<div style="font-size: 2rem; font-weight:700; color:#3b82f6;">₩ ${intCost2026.toLocaleString()}</div>
|
<div class="stat-value text-blue">₩ ${intCost2026.toLocaleString()}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
505
src/views/Dashboard/dashboard.css
Normal file
505
src/views/Dashboard/dashboard.css
Normal file
@@ -0,0 +1,505 @@
|
|||||||
|
/* --- Vercel Inspired Premium Dashboard --- */
|
||||||
|
.dashboard-section-title {
|
||||||
|
padding: 0;
|
||||||
|
font-size: var(--fs-lg);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--primary);
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
margin-bottom: clamp(0.5rem, 1.5vmin, 1.5rem);
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Background Mesh Gradient for Stats Row */
|
||||||
|
.dashboard-stats-row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
border-bottom: 1px solid var(--hairline);
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: clamp(1rem, 2vmin, 2rem);
|
||||||
|
background: radial-gradient(at 0% 0%, rgba(80, 227, 194, 0.05) 0px, transparent 50%),
|
||||||
|
radial-gradient(at 100% 0%, rgba(121, 40, 202, 0.05) 0px, transparent 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-group-item {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 250px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: var(--spacing-base);
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-group-item.bordered {
|
||||||
|
border-left: 1px solid var(--hairline);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-group-item .stat-label {
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--mute);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-group-item .stat-value {
|
||||||
|
font-size: var(--fs-xl);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--primary);
|
||||||
|
line-height: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-group-item .stat-value span {
|
||||||
|
font-size: var(--fs-base);
|
||||||
|
font-weight: 400;
|
||||||
|
margin-left: 6px;
|
||||||
|
color: var(--mute);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-group-item .stat-sub {
|
||||||
|
display: flex;
|
||||||
|
gap: 1.5rem;
|
||||||
|
font-size: var(--fs-sm);
|
||||||
|
color: var(--body);
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Technical Data Alignment --- */
|
||||||
|
.text-primary {
|
||||||
|
color: var(--color-blue) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-stat-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-title {
|
||||||
|
font-size: var(--fs-base);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--primary);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-stat-body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loc-summary {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loc-summary span {
|
||||||
|
font-size: var(--fs-sm);
|
||||||
|
color: var(--mute);
|
||||||
|
}
|
||||||
|
|
||||||
|
.loc-summary span strong {
|
||||||
|
color: var(--primary);
|
||||||
|
font-size: var(--fs-base);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-summary {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.8rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
opacity: 0.9;
|
||||||
|
border-top: 1px dashed var(--hairline);
|
||||||
|
padding-top: 8px;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-summary span {
|
||||||
|
cursor: help;
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
color: var(--mute);
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-summary span strong {
|
||||||
|
color: var(--primary);
|
||||||
|
font-size: var(--fs-sm);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Enhanced Location View Layout --- */
|
||||||
|
.location-view-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
background: var(--canvas);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-filter-bar {
|
||||||
|
/* Inherit from .search-bar in common.css */
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-group label {
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--mute);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-main-content {
|
||||||
|
flex: 1;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
|
||||||
|
background: var(--canvas);
|
||||||
|
gap: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-container-section {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: var(--canvas);
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-frame-wrapper {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-image {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
object-fit: contain;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-overlay {
|
||||||
|
position: absolute;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-map-message {
|
||||||
|
padding: 5rem;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--mute);
|
||||||
|
font-size: var(--fs-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-box-point {
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Asset Detail Sidebar --- */
|
||||||
|
.asset-list-section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--canvas);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-bottom: 1px solid var(--hairline);
|
||||||
|
background: var(--canvas);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-table-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: var(--fs-base);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-header-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-identity {
|
||||||
|
display: flex;
|
||||||
|
align-items: center; /* Changed from baseline to center for perfect vertical alignment */
|
||||||
|
gap: 8px;
|
||||||
|
flex: 1;
|
||||||
|
flex-wrap: wrap; /* Allow wrapping on very small screens */
|
||||||
|
}
|
||||||
|
|
||||||
|
.asset-code-title {
|
||||||
|
font-size: var(--fs-md);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--primary);
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
line-height: 1; /* Reset line-height to prevent baseline shifts */
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-type-badge {
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--on-primary);
|
||||||
|
background: var(--primary);
|
||||||
|
padding: 4px 8px; /* Adjusted padding for better vertical centering */
|
||||||
|
border-radius: 9999px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
line-height: 1; /* Match line-height */
|
||||||
|
}
|
||||||
|
|
||||||
|
.asset-type-label {
|
||||||
|
font-size: var(--fs-sm);
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--mute);
|
||||||
|
line-height: 1; /* Match line-height */
|
||||||
|
}
|
||||||
|
|
||||||
|
.asset-detail-sidebar {
|
||||||
|
padding: 1.5rem 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-section {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-section-title {
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--mute);
|
||||||
|
border-bottom: 1px solid var(--hairline);
|
||||||
|
padding-bottom: 8px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-grid-2col {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 1rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-item.full-width {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-label-sm {
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
color: var(--mute);
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-layout-2col {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 2rem;
|
||||||
|
padding: 0 2rem 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-card {
|
||||||
|
background: var(--canvas);
|
||||||
|
border: 1px solid var(--hairline);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 2rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-card.clickable:hover {
|
||||||
|
border-color: var(--primary);
|
||||||
|
box-shadow: 0 12px 30px rgba(0,0,0,0.08);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-progress-bar {
|
||||||
|
height: 8px;
|
||||||
|
background: var(--canvas-soft-2);
|
||||||
|
border-radius: 9999px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: var(--primary);
|
||||||
|
border-radius: 9999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-card .stat-label {
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--mute);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-card .stat-value {
|
||||||
|
font-size: var(--fs-xl);
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-card .stat-sub {
|
||||||
|
font-size: var(--fs-sm);
|
||||||
|
color: var(--body);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-soft {
|
||||||
|
background-color: var(--canvas-soft) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-placeholder {
|
||||||
|
width: 140px;
|
||||||
|
height: 140px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: conic-gradient(var(--primary) calc(var(--val) * 1%), var(--hairline) 0);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
background: var(--canvas);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress::after {
|
||||||
|
content: attr(style); /* This is a hack to get the value, but we'll use innerHTML in TS if needed */
|
||||||
|
position: absolute;
|
||||||
|
font-size: var(--fs-sm);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.system-dashboard {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-badge-orange { background-color: var(--color-orange); color: var(--white); padding: 2px 8px; border-radius: 9999px; font-size: var(--fs-xs); font-weight: 600; }
|
||||||
|
.warning-badge { background-color: var(--danger); color: var(--white); padding: 2px 8px; border-radius: 9999px; font-size: var(--fs-xs); font-weight: 600; }
|
||||||
|
|
||||||
|
.list-section {
|
||||||
|
flex: 1.3;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 0;
|
||||||
|
padding: 1rem 1.5rem 0 0;
|
||||||
|
border-right: 1px solid var(--hairline);
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-panel {
|
||||||
|
flex: 0.7;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 0;
|
||||||
|
padding: 1rem 0 0 1.5rem;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-empty-state {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: var(--mute);
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-photo-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid var(--hairline);
|
||||||
|
background: #f0f0f0;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-photo-state {
|
||||||
|
padding: 3rem;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--mute);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Responsive Overrides */
|
||||||
|
@media (max-width: 1440px) {
|
||||||
|
.location-main-content {
|
||||||
|
grid-template-columns: 1.5fr 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.location-main-content {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: auto 1fr;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.map-container-section {
|
||||||
|
height: 400px;
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: 1px solid var(--hairline);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,13 +1,13 @@
|
|||||||
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)
|
||||||
*/
|
*/
|
||||||
export function renderDashboard(mainContent: HTMLElement) {
|
export function renderDashboard(mainContent: HTMLElement) {
|
||||||
if (!mainContent) return;
|
if (!mainContent) return;
|
||||||
mainContent.innerHTML = '';
|
|
||||||
|
|
||||||
// 기존 차트 리소스 해제
|
// 기존 차트 리소스 해제
|
||||||
if (state.activeCharts) {
|
if (state.activeCharts) {
|
||||||
@@ -17,11 +17,21 @@ export function renderDashboard(mainContent: HTMLElement) {
|
|||||||
}
|
}
|
||||||
state.activeCharts = [];
|
state.activeCharts = [];
|
||||||
|
|
||||||
|
mainContent.innerHTML = `
|
||||||
|
<div class="view-content-wrapper">
|
||||||
|
<div id="dashboard-scroll-container" class="table-container" style="padding: 0;">
|
||||||
|
<div id="dashboard-inner-content"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const innerContent = document.getElementById('dashboard-inner-content')!;
|
||||||
|
|
||||||
if (state.activeCategory === 'hw') {
|
if (state.activeCategory === 'hw') {
|
||||||
renderHwDashboard(mainContent);
|
renderHwDashboard(innerContent);
|
||||||
} else if (state.activeCategory === 'sw') {
|
} else if (state.activeCategory === 'sw') {
|
||||||
renderSwDashboard(mainContent);
|
renderSwDashboard(innerContent);
|
||||||
} else {
|
} else {
|
||||||
mainContent.innerHTML = `<div class="dashboard-section-title" style="padding:2rem;">운영 서비스 대시보드는 준비 중입니다.</div>`;
|
innerContent.innerHTML = `<div class="dashboard-section-title" style="padding:2rem;">해당 카테고리의 대시보드는 준비 중입니다.</div>`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,17 +8,19 @@ export function renderCloudList(container: HTMLElement) {
|
|||||||
createListView(container, {
|
createListView(container, {
|
||||||
title: '클라우드',
|
title: '클라우드',
|
||||||
dataSource: () => state.masterData.cloud || [],
|
dataSource: () => state.masterData.cloud || [],
|
||||||
searchKeys: ['PRODUCT_NAME', 'ASSET_PURPOSE', 'PURCHASE_VENDOR'],
|
searchKeys: ['PRODUCT_NAME', 'ASSET_PURPOSE', 'PURCHASE_VENDOR', 'ASSET_TYPE'],
|
||||||
filterOptions: {
|
filterOptions: {
|
||||||
keywordLabel: `통합 검색 (${ASSET_SCHEMA.PRODUCT_NAME.ui}/${ASSET_SCHEMA.PURCHASE_VENDOR.ui})`,
|
keywordLabel: `통합 검색 (${ASSET_SCHEMA.PRODUCT_NAME.ui}/${ASSET_SCHEMA.PURCHASE_VENDOR.ui})`,
|
||||||
showCorp: true,
|
showCorp: true,
|
||||||
showDept: true
|
showDept: true,
|
||||||
|
showType: true
|
||||||
},
|
},
|
||||||
onRowClick: (asset) => openSwModal(asset, 'view'),
|
onRowClick: (asset) => openSwModal(asset, 'view'),
|
||||||
columns: [
|
columns: [
|
||||||
{ header: ASSET_SCHEMA.PRODUCT_NAME.ui, sortKey: ASSET_SCHEMA.PRODUCT_NAME.key, render: a => a[ASSET_SCHEMA.PRODUCT_NAME.key] || '' },
|
{ header: ASSET_SCHEMA.PRODUCT_NAME.ui, sortKey: ASSET_SCHEMA.PRODUCT_NAME.key, render: a => a[ASSET_SCHEMA.PRODUCT_NAME.key] || '' },
|
||||||
{ header: ASSET_SCHEMA.ASSET_PURPOSE.ui, sortKey: ASSET_SCHEMA.ASSET_PURPOSE.key, render: a => a[ASSET_SCHEMA.ASSET_PURPOSE.key] || '' },
|
{ header: ASSET_SCHEMA.ASSET_PURPOSE.ui, sortKey: ASSET_SCHEMA.ASSET_PURPOSE.key, render: a => a[ASSET_SCHEMA.ASSET_PURPOSE.key] || '' },
|
||||||
{ header: ASSET_SCHEMA.PURCHASE_VENDOR.ui, sortKey: ASSET_SCHEMA.PURCHASE_VENDOR.key, render: a => a[ASSET_SCHEMA.PURCHASE_VENDOR.key] || '' },
|
{ header: ASSET_SCHEMA.PURCHASE_VENDOR.ui, sortKey: ASSET_SCHEMA.PURCHASE_VENDOR.key, render: a => a[ASSET_SCHEMA.PURCHASE_VENDOR.key] || '' },
|
||||||
|
{ header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
|
||||||
{
|
{
|
||||||
header: ASSET_SCHEMA.PURCHASE_AMOUNT.ui,
|
header: ASSET_SCHEMA.PURCHASE_AMOUNT.ui,
|
||||||
sortKey: ASSET_SCHEMA.PURCHASE_AMOUNT.key,
|
sortKey: ASSET_SCHEMA.PURCHASE_AMOUNT.key,
|
||||||
|
|||||||
@@ -7,15 +7,16 @@ export function renderCostList(container: HTMLElement) {
|
|||||||
createListView(container, {
|
createListView(container, {
|
||||||
title: '비용관리',
|
title: '비용관리',
|
||||||
dataSource: () => sortAssets(state.masterData.cloud?.filter((a: any) => a.category === '비용관리') || []),
|
dataSource: () => sortAssets(state.masterData.cloud?.filter((a: any) => a.category === '비용관리') || []),
|
||||||
searchKeys: ['PRODUCT_NAME', 'MANAGER_MAIN', 'EMAIL_ACCOUNT'],
|
searchKeys: ['PRODUCT_NAME', 'MANAGER_MAIN', 'EMAIL_ACCOUNT', 'ASSET_TYPE'],
|
||||||
filterOptions: {
|
filterOptions: {
|
||||||
keywordLabel: `통합 검색 (${ASSET_SCHEMA.PRODUCT_NAME.ui}/${ASSET_SCHEMA.MANAGER_MAIN.ui})`,
|
keywordLabel: `통합 검색 (${ASSET_SCHEMA.PRODUCT_NAME.ui}/${ASSET_SCHEMA.MANAGER_MAIN.ui})`,
|
||||||
showCorp: true,
|
showCorp: true,
|
||||||
showDept: true
|
showDept: true,
|
||||||
|
showType: true
|
||||||
},
|
},
|
||||||
onRowClick: () => alert('상세 정보 준비 중입니다.'),
|
onRowClick: () => alert('상세 정보 준비 중입니다.'),
|
||||||
columns: [
|
columns: [
|
||||||
{ header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '' },
|
{ header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
|
||||||
{ header: ASSET_SCHEMA.ASSET_PURPOSE.ui, sortKey: ASSET_SCHEMA.ASSET_PURPOSE.key, render: a => formatInline(a[ASSET_SCHEMA.ASSET_PURPOSE.key] || '-') },
|
{ header: ASSET_SCHEMA.ASSET_PURPOSE.ui, sortKey: ASSET_SCHEMA.ASSET_PURPOSE.key, render: a => formatInline(a[ASSET_SCHEMA.ASSET_PURPOSE.key] || '-') },
|
||||||
{ header: '현 사용자', sortKey: ASSET_SCHEMA.MANAGER_MAIN.key, align: 'center', render: a => a[ASSET_SCHEMA.MANAGER_MAIN.key] || '-' },
|
{ header: '현 사용자', sortKey: ASSET_SCHEMA.MANAGER_MAIN.key, align: 'center', render: a => a[ASSET_SCHEMA.MANAGER_MAIN.key] || '-' },
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -12,24 +12,20 @@ export function renderDomainList(container: HTMLElement) {
|
|||||||
createListView(container, {
|
createListView(container, {
|
||||||
title: '도메인',
|
title: '도메인',
|
||||||
dataSource: () => state.masterData.domain || [],
|
dataSource: () => state.masterData.domain || [],
|
||||||
searchKeys: ['DOMAIN_ADDR', 'ASSET_PURPOSE', 'PRODUCT_NAME'],
|
searchKeys: ['DOMAIN_ADDR', 'ASSET_PURPOSE', 'PRODUCT_NAME', 'ASSET_TYPE'],
|
||||||
persistentSortState,
|
persistentSortState,
|
||||||
emptyMessage: '등록된 도메인 정보가 없습니다.',
|
emptyMessage: '등록된 도메인 정보가 없습니다.',
|
||||||
filterOptions: {
|
filterOptions: {
|
||||||
keywordLabel: `통합 검색 (${ASSET_SCHEMA.DOMAIN_ADDR.ui}/${ASSET_SCHEMA.PRODUCT_NAME.ui})`,
|
keywordLabel: `통합 검색 (${ASSET_SCHEMA.DOMAIN_ADDR.ui}/${ASSET_SCHEMA.PRODUCT_NAME.ui})`,
|
||||||
showCorp: true,
|
showCorp: true,
|
||||||
showDept: true
|
showDept: true,
|
||||||
|
showType: true
|
||||||
},
|
},
|
||||||
onRowClick: (item) => openDomainModal(item),
|
onRowClick: (item) => openDomainModal(item),
|
||||||
columns: [
|
columns: [
|
||||||
{ header: ASSET_SCHEMA.DOMAIN_ADDR.ui, sortKey: ASSET_SCHEMA.DOMAIN_ADDR.key, align: 'left', render: a => a[ASSET_SCHEMA.DOMAIN_ADDR.key] || '' },
|
{ header: ASSET_SCHEMA.DOMAIN_ADDR.ui, sortKey: ASSET_SCHEMA.DOMAIN_ADDR.key, align: 'left', render: a => a[ASSET_SCHEMA.DOMAIN_ADDR.key] || '' },
|
||||||
{ header: ASSET_SCHEMA.ASSET_PURPOSE.ui, sortKey: ASSET_SCHEMA.ASSET_PURPOSE.key, align: 'left', render: a => a[ASSET_SCHEMA.ASSET_PURPOSE.key] || '' },
|
{ header: ASSET_SCHEMA.ASSET_PURPOSE.ui, sortKey: ASSET_SCHEMA.ASSET_PURPOSE.key, align: 'left', render: a => a[ASSET_SCHEMA.ASSET_PURPOSE.key] || '' },
|
||||||
{
|
{ header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
|
||||||
header: ASSET_SCHEMA.ASSET_TYPE.ui,
|
|
||||||
sortKey: ASSET_SCHEMA.ASSET_TYPE.key,
|
|
||||||
align: 'center',
|
|
||||||
render: a => `<span class="badge badge-${a[ASSET_SCHEMA.ASSET_TYPE.key] === '관리중' ? 'primary' : 'muted'}">${a[ASSET_SCHEMA.ASSET_TYPE.key] || '-'}</span>`
|
|
||||||
},
|
|
||||||
{ header: ASSET_SCHEMA.PURCHASE_CORP.ui, sortKey: ASSET_SCHEMA.PURCHASE_CORP.key, align: 'center', render: a => a[ASSET_SCHEMA.PURCHASE_CORP.key] || '' },
|
{ header: ASSET_SCHEMA.PURCHASE_CORP.ui, sortKey: ASSET_SCHEMA.PURCHASE_CORP.key, align: 'center', render: a => a[ASSET_SCHEMA.PURCHASE_CORP.key] || '' },
|
||||||
{ header: ASSET_SCHEMA.EXPIRED_DATE.ui, sortKey: ASSET_SCHEMA.EXPIRED_DATE.key, align: 'center', render: a => a[ASSET_SCHEMA.EXPIRED_DATE.key] || '' },
|
{ header: ASSET_SCHEMA.EXPIRED_DATE.ui, sortKey: ASSET_SCHEMA.EXPIRED_DATE.key, align: 'center', render: a => a[ASSET_SCHEMA.EXPIRED_DATE.key] || '' },
|
||||||
{ header: ASSET_SCHEMA.MEMO.ui, sortKey: ASSET_SCHEMA.MEMO.key, className: 'col-memo', render: a => formatInline(a[ASSET_SCHEMA.MEMO.key] || '-') }
|
{ header: ASSET_SCHEMA.MEMO.ui, sortKey: ASSET_SCHEMA.MEMO.key, className: 'col-memo', render: a => formatInline(a[ASSET_SCHEMA.MEMO.key] || '-') }
|
||||||
|
|||||||
@@ -8,11 +8,12 @@ export function renderEquipmentList(container: HTMLElement) {
|
|||||||
createListView(container, {
|
createListView(container, {
|
||||||
title: '업무지원장비',
|
title: '업무지원장비',
|
||||||
dataSource: () => sortAssets(state.masterData.equipment || []),
|
dataSource: () => sortAssets(state.masterData.equipment || []),
|
||||||
searchKeys: ['MODEL_NAME', 'CURRENT_USER', 'ASSET_MFR'],
|
searchKeys: ['MODEL_NAME', 'CURRENT_USER', 'ASSET_MFR', 'ASSET_TYPE'],
|
||||||
filterOptions: {
|
filterOptions: {
|
||||||
keywordLabel: `통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui}/${ASSET_SCHEMA.ASSET_MFR.ui})`,
|
keywordLabel: `통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui}/${ASSET_SCHEMA.ASSET_MFR.ui})`,
|
||||||
showLoc: true,
|
showLoc: true,
|
||||||
showDept: true
|
showDept: true,
|
||||||
|
showType: true
|
||||||
},
|
},
|
||||||
onRowClick: (asset) => openHwModal(asset, 'view'),
|
onRowClick: (asset) => openHwModal(asset, 'view'),
|
||||||
columns: [
|
columns: [
|
||||||
@@ -23,7 +24,7 @@ export function renderEquipmentList(container: HTMLElement) {
|
|||||||
render: a => `<span class="badge badge-${a[ASSET_SCHEMA.HW_STATUS.key] === '대여중' ? 'primary' : 'success'}">${a[ASSET_SCHEMA.HW_STATUS.key] || '보관중'}</span>`
|
render: a => `<span class="badge badge-${a[ASSET_SCHEMA.HW_STATUS.key] === '대여중' ? 'primary' : 'success'}">${a[ASSET_SCHEMA.HW_STATUS.key] || '보관중'}</span>`
|
||||||
},
|
},
|
||||||
{ header: ASSET_SCHEMA.CURRENT_USER.ui, sortKey: ASSET_SCHEMA.CURRENT_USER.key, align: 'center', render: a => a[ASSET_SCHEMA.CURRENT_USER.key] || '-' },
|
{ header: ASSET_SCHEMA.CURRENT_USER.ui, sortKey: ASSET_SCHEMA.CURRENT_USER.key, align: 'center', render: a => a[ASSET_SCHEMA.CURRENT_USER.key] || '-' },
|
||||||
{ header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '' },
|
{ header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
|
||||||
{ header: ASSET_SCHEMA.ASSET_MFR.ui, sortKey: ASSET_SCHEMA.ASSET_MFR.key, align: 'center', render: a => a[ASSET_SCHEMA.ASSET_MFR.key] || '' },
|
{ header: ASSET_SCHEMA.ASSET_MFR.ui, sortKey: ASSET_SCHEMA.ASSET_MFR.key, align: 'center', render: a => a[ASSET_SCHEMA.ASSET_MFR.key] || '' },
|
||||||
{ header: ASSET_SCHEMA.MODEL_NAME.ui, sortKey: ASSET_SCHEMA.MODEL_NAME.key, render: a => formatInline(a[ASSET_SCHEMA.MODEL_NAME.key] || a.명칭 || '-') },
|
{ header: ASSET_SCHEMA.MODEL_NAME.ui, sortKey: ASSET_SCHEMA.MODEL_NAME.key, render: a => formatInline(a[ASSET_SCHEMA.MODEL_NAME.key] || a.명칭 || '-') },
|
||||||
{ header: ASSET_SCHEMA.ASSET_COUNT.ui, sortKey: ASSET_SCHEMA.ASSET_COUNT.key, align: 'center', render: a => a[ASSET_SCHEMA.ASSET_COUNT.key] || '1' },
|
{ header: ASSET_SCHEMA.ASSET_COUNT.ui, sortKey: ASSET_SCHEMA.ASSET_COUNT.key, align: 'center', render: a => a[ASSET_SCHEMA.ASSET_COUNT.key] || '1' },
|
||||||
|
|||||||
@@ -8,11 +8,12 @@ export function renderFacilityList(container: HTMLElement) {
|
|||||||
createListView(container, {
|
createListView(container, {
|
||||||
title: '사무가구',
|
title: '사무가구',
|
||||||
dataSource: () => sortAssets(state.masterData.equipment?.filter((a: any) => a.category === '시설자산') || []),
|
dataSource: () => sortAssets(state.masterData.equipment?.filter((a: any) => a.category === '시설자산') || []),
|
||||||
searchKeys: ['MODEL_NAME', 'ASSET_MFR'],
|
searchKeys: ['MODEL_NAME', 'ASSET_MFR', 'ASSET_TYPE'],
|
||||||
filterOptions: {
|
filterOptions: {
|
||||||
keywordLabel: `통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui})`,
|
keywordLabel: `통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui})`,
|
||||||
showLoc: true,
|
showLoc: true,
|
||||||
showDept: true
|
showDept: true,
|
||||||
|
showType: true
|
||||||
},
|
},
|
||||||
onRowClick: (asset) => openHwModal(asset, 'view'),
|
onRowClick: (asset) => openHwModal(asset, 'view'),
|
||||||
columns: [
|
columns: [
|
||||||
@@ -22,7 +23,7 @@ export function renderFacilityList(container: HTMLElement) {
|
|||||||
align: 'center',
|
align: 'center',
|
||||||
render: a => `<span class="badge badge-success">${a[ASSET_SCHEMA.HW_STATUS.key] || '보관중'}</span>`
|
render: a => `<span class="badge badge-success">${a[ASSET_SCHEMA.HW_STATUS.key] || '보관중'}</span>`
|
||||||
},
|
},
|
||||||
{ header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '' },
|
{ header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
|
||||||
{ header: ASSET_SCHEMA.ASSET_MFR.ui, sortKey: ASSET_SCHEMA.ASSET_MFR.key, align: 'center', render: a => a[ASSET_SCHEMA.ASSET_MFR.key] || '' },
|
{ header: ASSET_SCHEMA.ASSET_MFR.ui, sortKey: ASSET_SCHEMA.ASSET_MFR.key, align: 'center', render: a => a[ASSET_SCHEMA.ASSET_MFR.key] || '' },
|
||||||
{ header: ASSET_SCHEMA.MODEL_NAME.ui, sortKey: ASSET_SCHEMA.MODEL_NAME.key, render: a => formatInline(a[ASSET_SCHEMA.MODEL_NAME.key] || '-') },
|
{ header: ASSET_SCHEMA.MODEL_NAME.ui, sortKey: ASSET_SCHEMA.MODEL_NAME.key, render: a => formatInline(a[ASSET_SCHEMA.MODEL_NAME.key] || '-') },
|
||||||
{
|
{
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user