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

Compare commits

base: Taehoon:ux_setting
Branches Tags
Taehoon:main Taehoon:QR_setting Taehoon:db_setting Taehoon:thoon Taehoon:feature/docker-deploy Taehoon:ux_setting Taehoon:HW_Dashboard Taehoon:Dockerizing Taehoon:login Taehoon:Filter Taehoon:SW_Table Taehoon:Upload Taehoon:setting Taehoon:Operation_Table Taehoon:server_dashboard Taehoon:Equip_table Taehoon:HW_dashboard Taehoon:PC_Table
..
compare: Taehoon:Dockerizing
Branches Tags
Taehoon:QR_setting Taehoon:db_setting Taehoon:main Taehoon:thoon Taehoon:feature/docker-deploy Taehoon:ux_setting Taehoon:HW_Dashboard Taehoon:Dockerizing Taehoon:login Taehoon:Filter Taehoon:SW_Table Taehoon:Upload Taehoon:setting Taehoon:Operation_Table Taehoon:server_dashboard Taehoon:Equip_table Taehoon:HW_dashboard Taehoon:PC_Table

1 Commits
ux_setting ... Dockerizin

Author SHA1 Message Date
송대일
9d19d8283e 자산관리 시스템 도커라이징 2026-06-17 11:31:10 +09:00
128 changed files with 22186 additions and 8731 deletions
Expand all files Collapse all files

10
.dockerignore Normal file
View File

@@ -0,0 +1,10 @@
node_modules
dist
build
.git
.gitignore
.env
npm-debug.log
uploads
*.xlsx
*.log

6
.env
View File

@@ -1,6 +0,0 @@
DB_HOST=172.16.8.151
DB_PORT=3306
DB_USER=itam_admin
DB_PASS=itam1234
DB_NAME=itam
PORT=3000

12
Dockerfile.backend Normal file
View File

@@ -0,0 +1,12 @@
FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
EXPOSE 3000
CMD ["npm", "run", "server"]

12
Dockerfile.frontend Normal file
View File

@@ -0,0 +1,12 @@
FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
EXPOSE 8080
CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

0
docs/plans/ITAM_RMM_Integration_Plan.md → ITAM_RMM_Integration_Plan.md
View File

0
docs/plans/IT_Asset_RMM_System_Report_Detailed.md → IT_Asset_RMM_System_Report_Detailed.md
View File

0
docs/plans/PC_사양_개선_기획서.html → PC_사양_개선_기획서.html
View File

429
PC_사양_적정성_분석_기획서.html Normal file
View File

@@ -0,0 +1,429 @@
<!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) &gt; 편집 디자이너(80.2) &gt; 3D 디자이너(78.4) &gt; UXUI 디자이너(72.7) &gt; 3D 개발자(67.8) &gt; 프로그램 개발자(67.3) &gt; BIM모델러(62.1) &gt; 엔지니어(42.9) &gt; 웹 개발자(39.2) &gt; 기획자(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">개인 실질 점수 &lt; avgScore × 0.80</span> → <span class="key">"사양 부족"</span> (직무 평균 20% 이상 미달)
IF <span class="val">개인 실질 점수 &gt; 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>실질 점수 &lt; 직무 평균 × 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>실질 점수 &gt; 직무 평균 × 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 &gt; 4080 &gt; 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 반영) &nbsp;·&nbsp; 2026. 05. 28</p>
<p style="margin-top:0.25rem;">내부 검토용 문서입니다. 무단 외부 배포를 금합니다.</p>
</footer>
</div>
</body>
</html>

0
docs/plans/PLAN_ASSET_HISTORY.md → PLAN_ASSET_HISTORY.md
View File

0
docs/plans/PROJECT_GUIDE.md → PROJECT_GUIDE.md
View File

33
README.md
View File

@@ -9,14 +9,6 @@
- 기존 동작 방식과 성능을 기준(Baseline)으로 삼고, 수정 후에도 **기존의 모든 기능이 무결하게 유지되는지 반드시 테스트하여 입증**한다.
- 검증 결과를 바탕으로 "무엇을, 왜, 어떻게" 바꿀지 상세 보고 후, 사용자로부터 **'진행시켜'** 승인을 얻은 뒤에만 집행한다.
4. **선보고 후승인**: 모든 기능 수정 및 코드 변경 전에는 예상 방안을 먼저 보고하고 승인 절차를 거친다.
5. **RED–GREEN–Refactor 개발 원칙**:
- 모든 기능 개발과 버그 수정은 **RED → GREEN → Refactor** 순서로 진행한다.
- **RED**: 요구사항을 명확히 표현하는 테스트를 먼저 작성하고, 해당 테스트가 기능 미구현 또는 결함으로 인해 실패하는지 확인한다.
- **GREEN**: 실패한 테스트를 통과시키는 데 필요한 최소한의 코드만 구현하며, 불필요한 기능 추가나 구조 변경을 하지 않는다.
- **Refactor**: 관련 테스트와 기존 테스트가 모두 통과하는 상태에서만 중복 제거, 명칭 개선, 책임 분리 등 코드 구조를 개선하며 동작은 변경하지 않는다.
- 각 단계가 끝날 때마다 관련 테스트와 기존 기능의 회귀 여부를 검증한다.
- 테스트 작성이 현실적으로 불가능한 경우에는 그 사유와 대체 검증 방법을 먼저 보고하고 승인을 받은 후 진행한다.
- 본 원칙을 적용할 때에도 기존의 **선보고 후승인** 및 **외과 수술식 수정** 규칙을 준수한다.
---
@@ -36,8 +28,29 @@
### 🎨 ITAM 시스템 디자인 가이드 (Design Guide)
디자인 일관성 및 시각적 원칙에 관한 상세 내용은 아래 문서를 참조하십시오.
1. **디자인 철학 (Design Philosophy)**
* **Minimalist & Border-based**: 불필요한 박스(Card) 사용을 최소화하고, 정보의 구분은 간결한 라인(Border/Divider)을 활용하여 시각적 피로도를 낮춥니다.
* **Professional Achromatic**: 무채색(Black, White, Grey)을 기본으로 하여 정돈된 업무 환경을 제공합니다.
* **Green Accent**: 블루 대신 짙은 그린(`#1E5149`)을 포인트 컬러로 사용하여 차분한 전문성을 강조합니다.
👉 **[디자인 가이드 바로가기 (design_rule.md)](./design_rule.md)**
2. **타이포그래피 (Typography)**
* **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**: 사용자의 오입력(실수로 바깥을 클릭하여 입력 내용이 날아가는 현상)을 방지하기 위해 **모달 바깥 영역(Overlay) 클릭 시 모달이 닫히지 않도록** 설정합니다. 닫기는 오직 'ESC' 키 또는 명시적인 'X' 및 '닫기' 버튼을 통해서만 가능합니다.
* **Layout**: `detail.png` 기준의 2열 그리드 시스템을 권장하며, 하단 우측에 액션 버튼(닫기, 저장 등)을 배치합니다.

BIN
SampleData_PC.xlsx Normal file
View File

Binary file not shown.

BIN
SampleData_SVR.xlsx Normal file
View File

Binary file not shown.

BIN
backupDB_20260602.xlsx Normal file
View File

Binary file not shown.

59
backup_db.js Normal file
View File

@@ -0,0 +1,59 @@
import mysql from 'mysql2/promise';
import dotenv from 'dotenv';
import * as xlsx from 'xlsx';
import fs from 'fs';
dotenv.config();
const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
async function backup() {
const connection = await mysql.createConnection({
host: DB_HOST,
user: DB_USER,
password: DB_PASS,
database: DB_NAME,
port: parseInt(DB_PORT || '3306')
});
console.log('🚀 Starting Database Backup Process...');
const tables = [
'asset_pc', 'asset_server', 'asset_storage', 'asset_remote',
'asset_equipment', 'asset_office_supplies', 'asset_survey', 'asset_vip'
];
const wb = xlsx.utils.book_new();
for (const table of tables) {
try {
// 1. Create table backup
await connection.query(`DROP TABLE IF EXISTS ${table}_backup`);
await connection.query(`CREATE TABLE ${table}_backup AS SELECT * FROM ${table}`);
console.log(`✅ Table backup created: ${table} -> ${table}_backup`);
// 2. Fetch data for Excel
const [rows] = await connection.query(`SELECT * FROM ${table}`);
if (rows.length > 0) {
const ws = xlsx.utils.json_to_sheet(rows);
// Sheet names max length is 31 chars
const sheetName = table.substring(0, 31);
xlsx.utils.book_append_sheet(wb, ws, sheetName);
}
} catch (e) {
console.warn(`⚠️ Skipped ${table}: ${e.message}`);
}
}
// 3. Write Excel file
const fileName = 'backupDB_20260608.xlsx';
xlsx.writeFile(wb, fileName);
console.log(`✅ Excel data exported successfully to ${fileName}`);
await connection.end();
}
backup().catch(err => {
console.error('❌ Backup Failed:', err);
process.exit(1);
});

28
check_logs.js Normal file
View File

@@ -0,0 +1,28 @@
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 checkRecentLogs() {
const connection = await mysql.createConnection({
host: DB_HOST,
user: DB_USER,
password: DB_PASS,
database: DB_NAME,
port: parseInt(DB_PORT || '3306')
});
console.log('--- Recent History Logs ---');
const [rows] = await connection.query('SELECT * FROM asset_history ORDER BY created_at DESC LIMIT 5');
console.log(JSON.stringify(rows, null, 2));
console.log('\n--- Recent Core Data (to check current_dept) ---');
const [coreRows] = await connection.query('SELECT id, asset_code, current_dept, previous_dept FROM asset_core ORDER BY updated_at DESC LIMIT 5');
console.log(JSON.stringify(coreRows, null, 2));
await connection.end();
}
checkRecentLogs().catch(console.error);

29
check_network.js Normal file
View File

@@ -0,0 +1,29 @@
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 checkRemote() {
const connection = await mysql.createConnection({
host: DB_HOST,
user: DB_USER,
password: DB_PASS,
database: DB_NAME,
port: parseInt(DB_PORT || '3306')
});
console.log('--- Checking asset_remote table ---');
const [columns] = await connection.query('DESCRIBE asset_remote');
const cols = columns.map(c => c.Field);
console.log('Columns in asset_remote:', cols.join(', '));
const [count] = await connection.query('SELECT COUNT(*) as count FROM asset_remote WHERE remote_tool IS NOT NULL OR remote_id IS NOT NULL');
console.log(`Rows with remote info (tool or id): ${count[0].count}`);
await connection.end();
}
checkRemote().catch(console.error);

176
db_init.js Normal file
View File

@@ -0,0 +1,176 @@
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);
});

729
doc_readme.md Normal file
View File

@@ -0,0 +1,729 @@
# ITAM 도커라이징 실전 가이드
## 1. 문서 목적
이 문서는 Gitea에 올라가 있는 현재 저장소를 기준으로, 개발 PC에 WSL2와 Ubuntu만 설치되어 있는 상태에서 지금의 Docker 실행 구조를 재현하는 방법을 처음부터 끝까지 설명하는 실전 가이드다.
이 문서는 아래 상황을 가정한다.
1. 소스 코드는 아직 로컬에 없거나, Gitea에서 막 받아올 예정이다.
2. Windows에는 WSL2와 Ubuntu는 설치되어 있다.
3. 그 외 Docker 관련 세팅은 아직 안 되어 있을 수 있다.
4. 최종 목표는 현재 저장소 기준 `frontend + backend + external DB` 구조를 Docker로 재현하는 것이다.
이 문서의 목적은 아래 네 가지다.
1. 현재 시스템 구조와 Docker 구조를 먼저 이해하게 한다.
2. 기존 파일 중 무엇이 새로 추가되었고 무엇이 수정되었는지 정리한다.
3. 각 단계별로 정확히 어디에서 명령을 실행해야 하는지 명시한다.
4. Gitea 소스만 받은 상태에서 지금과 같은 Docker 실행 상태까지 도달하게 한다.
---
## 2. 현재 시스템 구조 개요
## 2.1 애플리케이션 원래 구조
현재 저장소의 본래 실행 구조는 다음과 같다.
1. 프런트엔드: Vite 기반 TypeScript 앱
2. 백엔드: Express 기반 Node.js API 서버
3. 데이터베이스: 외부 MySQL 서버
즉, 원래부터 MySQL이 Docker 안에 들어 있던 구조가 아니다.
프런트와 백엔드는 각각 별도 프로세스로 실행되며, 프런트는 `/api` 상대 경로로 백엔드 API를 호출한다.
---
## 2.2 현재 Docker 구조
현재 최종 Docker 구조는 아래와 같다.
1. `frontend` 컨테이너
2. `backend` 컨테이너
3. 외부 MySQL DB
즉, 지금은 내부 `db` 컨테이너가 없고, 내부 `db-bootstrap` 컨테이너도 없다.
현재 구조를 문장으로 풀면 다음과 같다.
1. 브라우저는 `http://localhost:8080`으로 `frontend` 컨테이너에 접속한다.
2. `frontend`는 `/api` 요청을 `backend:3000`으로 프록시한다.
3. `backend`는 `.env`에 적힌 외부 DB 정보로 외부 MySQL에 직접 접속한다.
4. 조회 결과 JSON을 프런트가 받아 화면에 렌더링한다.
간단한 흐름은 아래와 같다.
```text
Browser
-> frontend container :8080
-> Vite proxy (/api)
-> backend container :3000
-> external MySQL (.env)
```
---
## 2.3 왜 이 구조가 맞는가
현재 구조가 적절한 이유는 다음과 같다.
1. 원래 시스템도 외부 MySQL을 쓰는 구조였다.
2. 지금 목표는 운영형 단일 배포가 아니라 현재 개발형 구조를 Docker로 재현하는 것이다.
3. 프런트는 Vite dev server 기반이라 운영형 nginx 정적 배포 구조로 억지로 바꾸는 것보다, 현 구조를 유지하는 편이 안전하다.
4. 실무 표준 관점에서도 앱 컨테이너는 무상태로 유지하고, DB는 외부 인프라를 사용하는 구성이 더 일반적이다.
---
## 3. 이번 도커라이징에서 추가되거나 수정된 파일 정리
아래 파일들은 이번 Docker 재현 구조를 위해 새로 추가되었거나 수정된 핵심 파일이다.
## 3.1 새로 추가된 파일
1. `Dockerfile.frontend`
2. `Dockerfile.backend`
3. `.dockerignore`
4. `docker-compose.yaml`
5. `start_docker_wsl.ps1`
6. `stop_docker_wsl.ps1`
7. `start_docker_wsl.bat`
8. `stop_docker_wsl.bat`
9. `docker/mysql/init/README.md`
10. `docker_task_plan.md`
11. `doc_readme2.md`
---
## 3.2 기존 파일 중 수정된 핵심 파일
1. `server.js`
2. `vite.config.ts`
3. `doc_readme.md`
---
## 3.3 각 파일의 역할
### `Dockerfile.frontend`
역할:
1. 프런트 Vite 개발 서버 이미지를 만든다.
2. 컨테이너 내부에서 `npm run dev -- --host 0.0.0.0`를 실행한다.
### `Dockerfile.backend`
역할:
1. 백엔드 Express 서버 이미지를 만든다.
2. 컨테이너 내부에서 `npm run server`를 실행한다.
### `.dockerignore`
역할:
1. `node_modules`, `build`, `.git`, `.env`, `uploads` 같은 불필요한 파일을 Docker build context에서 제외한다.
### `docker-compose.yaml`
역할:
1. `frontend`, `backend` 두 컨테이너를 동시에 띄운다.
2. `backend`는 `.env`의 외부 DB를 사용한다.
3. `frontend`는 `backend:3000`으로 프록시한다.
### `start_docker_wsl.ps1`
역할:
1. Windows 경로를 WSL 경로로 안전하게 바꾼다.
2. WSL 내부 Docker를 사용해 `docker compose up --build -d`를 실행한다.
3. 한글 경로와 공백 경로에서도 안정적으로 실행되게 한다.
### `stop_docker_wsl.ps1`
역할:
1. 같은 방식으로 WSL 내부에서 `docker compose down`을 실행한다.
### `start_docker_wsl.bat`, `stop_docker_wsl.bat`
역할:
1. PowerShell 스크립트를 쉽게 실행하는 래퍼 역할을 한다.
### `server.js`
중요 수정 사항:
1. `dotenv.config({ override: true })`가 아니라 `dotenv.config()`를 사용한다.
이유:
1. Compose나 실행 환경이 주는 환경변수를 `.env`가 덮어써 버리면 안 된다.
2. 외부 DB 정보와 포트 설정 등 실행 환경 우선 구조를 유지해야 한다.
### `vite.config.ts`
중요 수정 사항:
1. 프록시 타깃을 고정 `localhost:3000`이 아니라 환경변수 기반으로 받도록 바꿨다.
현재 구조:
```ts
const proxyTarget = process.env.VITE_DEV_PROXY_TARGET || 'http://localhost:3000';
```
이유:
1. 로컬에서 직접 프런트를 띄울 때는 `localhost:3000`이 맞다.
2. Docker 안에서는 `frontend` 컨테이너에서 보는 `localhost`가 백엔드가 아니므로 `backend:3000`을 써야 한다.
---
## 4. 현재 `docker-compose.yaml` 기준 실제 동작 구조
현재 `docker-compose.yaml`은 아래 구조다.
### `backend`
1. `Dockerfile.backend`로 이미지를 빌드한다.
2. `.env`를 읽는다.
3. DB 관련 변수는 `${DB_HOST}`, `${DB_PORT}`, `${DB_USER}`, `${DB_PASS}`, `${DB_NAME}`를 그대로 사용한다.
4. 포트 `3000:3000`으로 노출한다.
5. `uploads`, `map_config.json`을 마운트한다.
### `frontend`
1. `Dockerfile.frontend`로 이미지를 빌드한다.
2. `VITE_DEV_PROXY_TARGET: http://backend:3000` 환경변수를 사용한다.
3. 포트 `8080:8080`으로 노출한다.
4. 브라우저의 `/api` 요청을 `backend`로 프록시한다.
즉, 현재 Compose는 DB를 띄우지 않고 앱 두 개만 띄운다.
---
## 5. 사전 준비 사항
이 섹션은 Gitea에서 코드를 받기 전 또는 받은 직후에 확인해야 한다.
## 5.1 가정하는 기본 상태
이미 설치되어 있다고 가정하는 것:
1. Windows
2. WSL2
3. Ubuntu 배포판
아직 없을 수 있는 것:
1. Docker Desktop 또는 WSL 내부 Docker 사용 환경
2. Git 클라이언트
3. 프로젝트 `.env`
---
## 5.2 권장 Docker 실행 방식
현재 저장소 구조상 가장 권장하는 방식은 다음이다.
1. Windows에 Docker Desktop 설치
2. Docker Desktop에서 WSL2 통합 활성화
3. Ubuntu WSL 내부에서 `docker` 명령을 사용할 수 있게 한다.
이유:
1. 현재 `start_docker_wsl.ps1`가 WSL 내부의 `docker`를 호출하는 구조다.
2. 실제 검증도 WSL 내부 Docker 기준으로 이루어졌다.
---
## 5.3 외부 DB 정보 준비
현재 구조는 외부 MySQL을 사용하므로 `.env` 파일이 반드시 필요하다.
최소한 아래 값이 필요하다.
```env
DB_HOST=<외부 MySQL 호스트>
DB_PORT=3306
DB_USER=<외부 MySQL 계정>
DB_PASS=<외부 MySQL 비밀번호>
DB_NAME=itam
```
필요 시 추가 환경변수는 현재 백엔드 코드 기준으로 함께 넣을 수 있다.
---
## 6. Gitea에서 소스 받기
## 6.1 작업 실행 위치
이 단계는 **Windows PowerShell** 또는 **Windows 터미널의 PowerShell**에서 수행한다.
실행 위치 이유:
1. 이후 `start_docker_wsl.ps1`도 Windows PowerShell에서 실행하는 것이 가장 자연스럽다.
2. 로컬 작업 폴더를 Windows 경로 기준으로 준비할 수 있다.
---
## 6.2 소스 클론
예시:
```powershell
git clone <Gitea 저장소 URL>
cd <클론된 저장소 경로>
```
현재 프로젝트처럼 한글 경로를 사용할 수도 있지만, 가능하면 너무 복잡한 경로는 피하는 것이 좋다.
현재 실제 프로젝트 경로 예시는 아래였다.
```text
c:\Users\user\Desktop\안건 파일\itam
```
이 경로도 현재 스크립트로는 동작 가능하다.
---
## 7. Docker 환경 준비
## 7.1 작업 실행 위치
이 단계는 **Windows PowerShell**과 **WSL Ubuntu 터미널**을 둘 다 사용한다.
1. 설치 확인은 Windows PowerShell에서 시작
2. 실제 Docker 동작 확인은 WSL Ubuntu에서 수행
---
## 7.2 Docker Desktop 설치 여부 확인
**실행 위치: Windows PowerShell**
```powershell
docker version
```
만약 여기서 바로 안 잡혀도 현재 프로젝트는 WSL 내부 Docker를 쓰므로, 다음 단계로 넘어가 WSL 내부 확인을 한다.
---
## 7.3 WSL 내부 Docker 확인
**실행 위치: Windows PowerShell**
```powershell
wsl -l -v
wsl sh -lc "docker --version"
```
정상 기대 결과:
1. Ubuntu가 Running 상태
2. `docker --version`이 정상 출력
만약 `docker --version`이 실패하면, Docker Desktop 설치 및 WSL 통합을 먼저 완료해야 한다.
---
## 8. `.env` 파일 준비
## 8.1 작업 실행 위치
이 단계는 **Windows PowerShell**, **VS Code**, 또는 아무 텍스트 편집기**에서 수행한다.
즉, 프로젝트 루트에 `.env` 파일을 만드는 작업이다.
---
## 8.2 `.env` 작성
프로젝트 루트에 `.env`를 만든다.
예시:
```env
DB_HOST=your-external-db-host
DB_PORT=3306
DB_USER=your-db-user
DB_PASS=your-db-password
DB_NAME=itam
```
주의:
1. 현재 Compose는 내부 DB를 만들지 않는다.
2. 따라서 이 값이 곧 실제 운영/개발 외부 DB 연결 정보다.
3. 이 정보가 틀리면 `backend`는 기동해도 API에서 DB 오류가 난다.
---
## 9. 현재 Docker 파일이 어떻게 동작하는지 이해하기
## 9.1 `Dockerfile.frontend`
**확인 위치: 프로젝트 루트 / VS Code**
현재 내용 핵심:
```dockerfile
FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
EXPOSE 8080
CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
```
의미:
1. Node 20 Alpine 기반
2. 의존성 설치 후 전체 소스 복사
3. Vite 개발 서버 실행
---
## 9.2 `Dockerfile.backend`
**확인 위치: 프로젝트 루트 / VS Code**
현재 내용 핵심:
```dockerfile
FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
EXPOSE 3000
CMD ["npm", "run", "server"]
```
의미:
1. Node 20 Alpine 기반
2. Express 서버 실행
---
## 9.3 `vite.config.ts`
**확인 위치: 프로젝트 루트 / VS Code**
현재 핵심:
```ts
const proxyTarget = process.env.VITE_DEV_PROXY_TARGET || 'http://localhost:3000';
```
그리고 `/api`, `/uploads`가 모두 `proxyTarget`으로 프록시된다.
의미:
1. 로컬 실행 시 기본값은 `localhost:3000`
2. Docker 실행 시 Compose가 `http://backend:3000`을 주입
이 수정이 있어야 Docker 안에서도 화면에 데이터가 표시된다.
---
## 10. Docker Compose 기동
## 10.1 작업 실행 위치
이 단계는 반드시 **Windows PowerShell**에서 수행하는 것을 권장한다.
이유:
1. `start_docker_wsl.ps1`가 Windows 경로를 받아 WSL 경로로 바꾸는 구조다.
2. 한글/공백 경로에서 가장 안전하다.
---
## 10.2 권장 기동 방법
**실행 위치: 프로젝트 루트의 Windows PowerShell**
```powershell
.\start_docker_wsl.ps1
```
또는
```powershell
.\start_docker_wsl.bat
```
이 스크립트는 내부적으로 아래를 수행한다.
1. PowerShell 출력 인코딩을 UTF-8로 설정
2. 현재 Windows 경로를 WSL 경로로 변환
3. WSL 동작 확인
4. WSL 내부 Docker 동작 확인
5. `docker compose up --build -d` 수행
---
## 10.3 직접 기동이 필요할 때
**실행 위치: WSL Ubuntu 터미널**
직접 실행 예시는 아래와 같다.
```bash
cd /mnt/c/Users/user/Desktop/안건\ 파일/itam
docker compose up --build -d
```
하지만 현재 프로젝트는 한글 경로 이슈가 있었기 때문에, 특별한 이유가 없으면 `start_docker_wsl.ps1`를 우선 사용한다.
---
## 11. 컨테이너 기동 후 검증
## 11.1 컨테이너 상태 확인
**실행 위치: Windows PowerShell**
```powershell
wsl sh -lc "docker ps -a --format 'table {{.Names}}\t{{.Status}}' | grep itam"
```
정상 기대 상태:
1. `itam-backend` -> `Up`
2. `itam-frontend` -> `Up`
현재는 `itam-db`, `itam-db-bootstrap`가 없어야 정상이다.
---
## 11.2 백엔드 API 확인
**실행 위치: Windows PowerShell**
```powershell
Invoke-WebRequest -Uri http://localhost:3000/api/assets/master -UseBasicParsing | Select-Object -ExpandProperty StatusCode
```
정상 기대값:
1. `200`
이 검사는 `backend`가 외부 DB에 정상 연결됐는지 보는 가장 직접적인 검사다.
---
## 11.3 프런트 경유 API 확인
**실행 위치: Windows PowerShell**
```powershell
Invoke-WebRequest -Uri http://localhost:8080/api/assets/master -UseBasicParsing | Select-Object -ExpandProperty StatusCode
```
정상 기대값:
1. `200`
이 검사는 프런트 프록시가 정상인지 확인한다.
예전에 화면에 데이터가 안 보였던 것은 외부 DB 자체가 아니라, 이 프록시 경로가 잘못돼 있었기 때문이다.
---
## 11.4 브라우저 화면 확인
**실행 위치: 브라우저**
```text
http://localhost:8080
```
확인 포인트:
1. 화면이 열리는지
2. 목록/대시보드/테이블 데이터가 비어 있지 않은지
3. 모달 진입 시 데이터가 정상적으로 보이는지
---
## 12. 지금 데이터가 표시되는 원리
현재는 내부 DB로 데이터를 옮겨 담지 않는다.
현재 실제 동작 원리는 다음과 같다.
1. 브라우저가 `frontend`에 접속한다.
2. 프런트가 `/api/...`로 요청한다.
3. Vite 프록시가 `backend:3000`으로 요청을 넘긴다.
4. `backend`가 `.env`의 외부 MySQL에 직접 접속한다.
5. 조회 결과 JSON을 프런트가 받아 화면에 렌더링한다.
즉, 현재는 아래 구조다.
```text
Browser -> frontend -> backend -> external MySQL
```
예전 외부 DB 구조에서 화면에 데이터가 안 보였던 이유는 외부 DB 때문이 아니라, 프런트 컨테이너가 `localhost:3000`을 잘못 바라보고 있었기 때문이다.
지금은 `VITE_DEV_PROXY_TARGET: http://backend:3000`으로 수정되어 있기 때문에 정상 표시된다.
---
## 13. 자주 헷갈리는 포인트
## 13.1 현재는 내부 DB 컨테이너가 없다
현재 `docker-compose.yaml`에는 아래가 없다.
1. `db` 서비스
2. `db-bootstrap` 서비스
3. `itam_mysql_data` 볼륨
즉, DB는 Docker 스택 밖에 있다.
---
## 13.2 현재는 `.env`가 곧 실제 DB 연결 정보다
현재 `backend`는 아래처럼 Compose에서 그대로 받는다.
1. `DB_HOST: ${DB_HOST}`
2. `DB_PORT: ${DB_PORT}`
3. `DB_USER: ${DB_USER}`
4. `DB_PASS: ${DB_PASS}`
5. `DB_NAME: ${DB_NAME}`
즉, `.env`를 틀리게 적으면 화면도 데이터가 안 뜬다.
---
## 13.3 `server.js`는 여전히 중요하게 수정된 상태다
현재 `server.js`는 `dotenv.config()`를 사용한다.
이 구조는 이후 Compose나 실행 환경에서 변수를 주입할 때, 애플리케이션이 그 값을 받아들일 수 있게 하기 위해 유지해야 한다.
---
## 14. 스택 중지 방법
## 14.1 작업 실행 위치
**Windows PowerShell / 프로젝트 루트**
---
## 14.2 권장 종료 명령
```powershell
.\stop_docker_wsl.ps1
```
또는
```powershell
.\stop_docker_wsl.bat
```
이 스크립트는 내부적으로 WSL 경로 변환 후 `docker compose down`을 수행한다.
---
## 15. 장애 발생 시 점검 순서
## 15.1 `frontend` 화면은 뜨는데 데이터가 없을 때
**실행 위치: Windows PowerShell**
먼저 아래 두 API를 분리해서 본다.
```powershell
Invoke-WebRequest -Uri http://localhost:3000/api/assets/master -UseBasicParsing | Select-Object -ExpandProperty StatusCode
Invoke-WebRequest -Uri http://localhost:8080/api/assets/master -UseBasicParsing | Select-Object -ExpandProperty StatusCode
```
판단 기준:
1. `3000`은 200이고 `8080`만 실패 -> 프런트 프록시 문제
2. 둘 다 실패 -> 백엔드 또는 외부 DB 연결 문제
---
## 15.2 백엔드가 외부 DB에 연결되지 않을 때
**실행 위치: Windows PowerShell**
```powershell
wsl sh -lc "docker logs --tail=200 itam-backend"
```
점검 항목:
1. `.env`의 DB 정보가 정확한지
2. 외부 DB 서버 접근이 가능한지
3. 계정/비밀번호가 맞는지
4. 방화벽 또는 네트워크 이슈가 없는지
---
## 15.3 프런트 프록시가 의심될 때
**확인 위치: `vite.config.ts`, `docker-compose.yaml`**
다음 두 설정이 유지되는지 확인한다.
`vite.config.ts`
```ts
const proxyTarget = process.env.VITE_DEV_PROXY_TARGET || 'http://localhost:3000';
```
`docker-compose.yaml`
```yaml
VITE_DEV_PROXY_TARGET: http://backend:3000
```
이 둘 중 하나라도 바뀌면 Docker 안에서 화면 데이터가 다시 안 보일 수 있다.
---
## 16. 현재 기준 재현 절차 요약
가장 짧게 정리하면 아래 순서다.
1. Gitea에서 소스를 클론한다.
2. Windows PowerShell에서 프로젝트 루트로 이동한다.
3. `.env`에 외부 MySQL 정보를 작성한다.
4. Docker Desktop + WSL 통합 또는 WSL 내부 Docker 사용 가능 상태를 만든다.
5. `start_docker_wsl.ps1`를 실행한다.
6. `http://localhost:3000/api/assets/master`가 200인지 확인한다.
7. `http://localhost:8080/api/assets/master`가 200인지 확인한다.
8. 브라우저에서 `http://localhost:8080`을 열어 실제 데이터 표시를 확인한다.
---
## 17. 현재 최종 결론
현재 저장소의 도커라이징 구조는 실무 표준에 맞는 `무상태 앱 컨테이너 + 외부 DB` 구조다.
현재 핵심은 아래 세 가지다.
1. `backend`는 외부 MySQL에 직접 연결한다.
2. `frontend`는 `backend:3000`으로 API 프록시한다.
3. WSL 경로 변환 스크립트를 통해 Windows 한글 경로에서도 안정적으로 실행한다.
즉, 이 문서대로 진행하면 Gitea 소스만 받은 상태에서 지금과 같은 Docker 실행 구조를 재현할 수 있다.

730
doc_readme2.md Normal file
View File

@@ -0,0 +1,730 @@
# ITAM 도커라이징 최종 재현 가이드
## 1. 문서 목적
이 문서는 현재 Git 저장소에 올라간 파일만 가지고, 지금과 동일한 수준으로 ITAM 시스템을 도커라이징하고 실행하는 절차를 처음부터 끝까지 정리한 최종 가이드다.
이 문서만 읽어도 아래 목표를 달성할 수 있게 작성한다.
1. 현재 저장소 구조를 이해한다.
2. 왜 이렇게 도커라이징했는지 판단 근거를 안다.
3. WSL2 기반으로 실제 스택을 기동한다.
4. 외부 MySQL에서 내부 MySQL 컨테이너로 초기 데이터를 bootstrap 한다.
5. 프런트 8080과 백엔드 3000이 모두 정상 동작하는지 검증한다.
6. 재초기화, 재기동, 장애 확인까지 수행한다.
이 문서는 최종 성공 구조 기준이다. 실패 기록은 `doc_readme.md`를 본다.
---
## 2. 최종 목표 구조
현재 최종 구조는 아래 4개 서비스/역할로 나뉜다.
1. `frontend`: Vite 개발 서버 컨테이너, 포트 8080
2. `backend`: Express API 서버 컨테이너, 포트 3000
3. `db`: MySQL 8 컨테이너, 포트 3306
4. `db-bootstrap`: 외부 MySQL -> 내부 MySQL로 1회성 복제 수행 후 종료되는 도우미 컨테이너
논리 흐름은 다음과 같다.
```text
브라우저 -> frontend:8080 -> Vite proxy -> backend:3000 -> db:3306
\
-> /uploads -> backend 정적 경로
초기 1회 기동 시
외부 MySQL(.env) -> db-bootstrap -> 내부 MySQL(db)
```
---
## 3. 왜 이 구조를 선택했는가
이 저장소는 처음부터 운영형 정적 배포 앱이 아니었다. 실제 구조는 다음과 같았다.
1. 프런트는 Vite 개발 서버가 따로 돈다.
2. 백엔드는 Express API가 따로 돈다.
3. 프런트는 상대 경로 `/api`를 호출한다.
4. 백엔드는 프런트의 `dist`를 서빙하지 않는다.
따라서 내일 바로 시연 가능한 수준까지 빠르게 안정화하려면 아래 전략이 가장 맞다.
1. 프런트를 Vite dev server 그대로 컨테이너화한다.
2. 백엔드를 별도 컨테이너로 유지한다.
3. DB는 MySQL 8 컨테이너로 묶되, 초기 데이터는 외부 DB에서 복제한다.
4. 프런트 프록시는 컨테이너 네트워크 서비스명 `backend`로 붙게 한다.
즉, 현재 구조는 "개발형 구조를 Docker로 재현한 시연/개발용 Compose"다.
---
## 4. 저장소 내 최종 관련 파일 목록
현재 도커라이징과 직접 관련된 핵심 파일은 아래와 같다.
1. `.dockerignore`
2. `Dockerfile.frontend`
3. `Dockerfile.backend`
4. `docker-compose.yaml`
5. `start_docker_wsl.ps1`
6. `stop_docker_wsl.ps1`
7. `start_docker_wsl.bat`
8. `stop_docker_wsl.bat`
9. `docker/mysql/init/README.md`
10. `server.js`
11. `vite.config.ts`
각 파일 역할은 다음과 같다.
### 4.1 `.dockerignore`
Docker build context에서 제외할 파일을 정의한다.
주요 제외 대상은 다음과 같다.
1. `node_modules`
2. `dist`
3. `build`
4. `.git`
5. `.env`
6. `uploads`
7. `*.xlsx`
8. `*.log`
### 4.2 `Dockerfile.frontend`
프런트 컨테이너 이미지 정의다.
```dockerfile
FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
EXPOSE 8080
CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
```
이 이미지는 Vite dev server를 컨테이너에서 띄우기 위한 것이다.
### 4.3 `Dockerfile.backend`
백엔드 컨테이너 이미지 정의다.
```dockerfile
FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
EXPOSE 3000
CMD ["npm", "run", "server"]
```
### 4.4 `docker-compose.yaml`
전체 스택의 핵심 파일이다.
현재 최종 구성은 다음 논리를 가진다.
1. `db`는 MySQL 8 내부 DB다.
2. `db-bootstrap`은 외부 DB 데이터를 내부 DB로 1회 복제한다.
3. `backend`는 내부 `db`에 붙는다.
4. `frontend`는 `backend` 서비스명으로 프록시한다.
### 4.5 `start_docker_wsl.ps1`
Windows에서 WSL 경유로 Docker Compose를 안전하게 기동하는 진입점이다.
핵심은 다음 두 가지다.
1. 프로젝트 Windows 경로를 `wslpath`로 WSL 경로로 바꾼다.
2. 그 경로로 이동한 뒤 `docker compose up --build -d`를 수행한다.
### 4.6 `stop_docker_wsl.ps1`
같은 방식으로 WSL 내부에서 `docker compose down`을 수행해 스택을 안전하게 내린다.
### 4.7 `start_docker_wsl.bat`, `stop_docker_wsl.bat`
더블클릭 또는 간단 실행용 래퍼다. 내부적으로 PowerShell 스크립트를 호출한다.
### 4.8 `server.js`
중요 포인트는 다음 두 가지다.
1. `dotenv.config();`를 사용한다.
2. `dotenv.config({ override: true })`를 사용하지 않는다.
이 차이로 Compose 환경변수 `DB_HOST=db`가 `.env`보다 우선하도록 보장한다.
### 4.9 `vite.config.ts`
현재 프록시는 환경변수 기반으로 동작한다.
```ts
const proxyTarget = process.env.VITE_DEV_PROXY_TARGET || 'http://localhost:3000';
```
로컬 PC에서 직접 Vite를 띄우면 기본값 `http://localhost:3000`을 쓴다.
컨테이너에서는 Compose가 `http://backend:3000`을 주입한다.
---
## 5. 현재 최종 `docker-compose.yaml` 구조 설명
아래는 실제 동작 관점에서 읽어야 할 핵심 내용이다.
### 5.1 `db` 서비스
역할:
1. 내부 MySQL 데이터 저장소
2. 앱이 최종적으로 붙는 DB
핵심 설정:
1. 이미지: `mysql:8.0`
2. DB 이름: `itam`
3. 앱 계정: `itam_admin`
4. 데이터 볼륨: `itam_mysql_data`
5. healthcheck 사용
healthcheck는 `mysqladmin ping`으로 동작하며, `backend`와 `db-bootstrap`은 이 상태를 기다린다.
### 5.2 `db-bootstrap` 서비스
역할:
1. 외부 원본 DB에서 내부 `db`로 초기 데이터 복제
2. 1회성 작업 후 종료
핵심 포인트:
1. `.env`를 읽어 외부 DB 접속 정보를 가져온다.
2. 내부 `db`에 `asset_core` 테이블이 이미 존재하면 아무 것도 하지 않고 종료한다.
3. 그렇지 않으면 `mysqldump | mysql` 파이프라인으로 복제한다.
4. `restart: "no"` 이므로 정상 종료 후 반복 실행하지 않는다.
또한 source DB와 target DB 변수는 분리돼 있다.
1. source: `SOURCE_DB_*`
2. target: `TARGET_DB_*`
이 구조로 외부 원본 DB 자격증명과 내부 컨테이너 DB 자격증명이 섞이지 않는다.
### 5.3 `backend` 서비스
역할:
1. Express API 제공
2. 내부 `db`에 연결
3. `/uploads` 정적 제공
핵심 포인트:
1. `env_file: .env`를 유지하지만,
2. Compose `environment`에서 `DB_HOST=db`, `DB_PORT=3306`, `DB_USER=itam_admin`, `DB_PASS=itam1234`, `DB_NAME=itam`를 다시 지정한다.
3. `depends_on`은 `db` healthy와 `db-bootstrap` 성공 종료를 모두 기다린다.
즉, 백엔드는 DB bootstrap이 끝난 뒤 시작한다.
### 5.4 `frontend` 서비스
역할:
1. Vite dev server 제공
2. 브라우저 요청 `/api`, `/uploads`를 `backend`로 프록시
핵심 포인트:
1. `VITE_DEV_PROXY_TARGET: http://backend:3000`
2. `CHOKIDAR_USEPOLLING: "true"`
3. `npm run dev -- --host 0.0.0.0`
중요한 이유는 컨테이너 안의 `localhost`가 호스트의 `localhost`가 아니기 때문이다.
---
## 6. 사전 준비 조건
이 저장소를 지금처럼 기동하려면 다음 전제가 필요하다.
### 6.1 운영체제와 런타임
1. Windows
2. WSL2 Ubuntu 설치 및 실행 중
3. Docker CLI가 WSL 내부에서 동작 가능
권장 확인 명령:
```powershell
wsl -l -v
wsl sh -lc "docker --version"
```
### 6.2 `.env` 파일
현재 최종 구조는 "첫 기동 시 외부 DB에서 내부 DB로 bootstrap" 하는 방식이므로 `.env`가 반드시 필요하다.
최소한 다음 값은 외부 원본 DB를 가리켜야 한다.
```env
DB_HOST=<external-mysql-host>
DB_PORT=3306
DB_USER=<external-db-user>
DB_PASS=<external-db-password>
DB_NAME=itam
```
주의:
1. `.env`는 `db-bootstrap`이 외부 원본 DB에 접속할 때 사용한다.
2. `backend`는 최종적으로 내부 `db` 컨테이너를 쓰므로, 런타임에서는 Compose `environment`가 우선한다.
### 6.3 한글 경로 주의
현재 프로젝트 경로는 한글과 공백을 포함한다.
```text
c:\Users\user\Desktop\안건 파일\itam
```
이 때문에 Docker 관련 명령은 수동으로 경로를 조립하지 말고, `start_docker_wsl.ps1` / `stop_docker_wsl.ps1`을 우선 사용해야 한다.
---
## 7. 첫 기동 절차
이 절차는 "Git에서 소스를 받은 뒤 처음 올리는 경우" 기준이다.
### 7.1 저장소 준비
1. 저장소를 받는다.
2. `.env`가 올바른 외부 원본 DB를 가리키는지 확인한다.
3. WSL이 켜져 있는지 확인한다.
### 7.2 권장 실행 방법
Windows PowerShell에서 프로젝트 루트로 이동한 뒤 아래 중 하나를 사용한다.
방법 A:
```powershell
.\start_docker_wsl.ps1
```
방법 B:
```powershell
.\start_docker_wsl.bat
```
### 7.3 내부 실행 순서
스크립트는 내부적으로 다음 순서로 동작한다.
1. 현재 Windows 경로를 WSL 경로로 변환한다.
2. WSL 동작 여부를 확인한다.
3. WSL 내부 Docker 사용 가능 여부를 확인한다.
4. `docker compose up --build -d`를 수행한다.
### 7.4 기대되는 컨테이너 순서
정상이라면 다음 순서로 올라온다.
1. `itam-db`
2. `itam-db-bootstrap`
3. `itam-backend`
4. `itam-frontend`
`itam-db-bootstrap`은 정상이라면 최종 상태가 `Exited (0)`이어야 한다.
---
## 8. 첫 기동 후 검증 절차
기동 후에는 반드시 아래 검증을 수행한다.
### 8.1 컨테이너 상태 확인
```powershell
wsl sh -lc "docker ps -a --format 'table {{.Names}}\t{{.Status}}' | grep itam"
```
정상 기대 상태:
1. `itam-db` -> `Up ... (healthy)`
2. `itam-db-bootstrap` -> `Exited (0)`
3. `itam-backend` -> `Up`
4. `itam-frontend` -> `Up`
### 8.2 백엔드 API 직접 확인
```powershell
Invoke-WebRequest -Uri http://localhost:3000/api/assets/master -UseBasicParsing | Select-Object -ExpandProperty StatusCode
```
정상 기대값:
1. `200`
### 8.3 프런트 경유 API 확인
```powershell
Invoke-WebRequest -Uri http://localhost:8080/api/assets/master -UseBasicParsing | Select-Object -ExpandProperty StatusCode
```
정상 기대값:
1. `200`
### 8.4 데이터가 실제로 들어왔는지 확인
```powershell
wsl sh -lc "docker exec itam-db mysql -uitam_admin -pitam1234 -D itam -e 'SHOW TABLES' | head -n 20"
```
정상이라면 아래와 같은 테이블들이 보여야 한다.
1. `asset_core`
2. `asset_remote`
3. `asset_spec`
4. `asset_location`
5. `asset_history`
6. `asset_software_perpetual`
7. `asset_software_subscription`
8. `hardware_components_master`
9. `job_spec_standards`
### 8.5 브라우저 화면 확인
브라우저에서 아래 주소를 연다.
```text
http://localhost:8080
```
목록/대시보드 데이터가 보이면 화면까지 정상 연결된 것이다.
---
## 9. 재기동 절차
코드만 수정됐고 DB는 유지하고 싶다면 다음처럼 하면 된다.
### 9.1 스택 종료
```powershell
.\stop_docker_wsl.ps1
```
또는
```powershell
.\stop_docker_wsl.bat
```
### 9.2 스택 재기동
```powershell
.\start_docker_wsl.ps1
```
이 경우 `itam_mysql_data` 볼륨이 유지되므로, `db-bootstrap`은 내부 DB에 `asset_core`가 이미 있음을 감지하고 빠르게 종료한다.
---
## 10. DB를 완전히 다시 초기화하는 절차
외부 원본 DB에서 다시 처음부터 내부 DB를 복제하고 싶다면, MySQL 볼륨을 제거해야 한다.
### 10.1 스택 중지
```powershell
.\stop_docker_wsl.ps1
```
### 10.2 MySQL 데이터 볼륨 삭제
```powershell
wsl sh -lc "docker volume rm -f itam_itam_mysql_data"
```
### 10.3 다시 시작
```powershell
.\start_docker_wsl.ps1
```
이때 `db-bootstrap`이 외부 DB에서 내부 DB로 전체를 다시 복제한다.
---
## 11. 현재 구조에서 꼭 알아야 할 설계 포인트
### 11.1 `server.js`의 `dotenv.config()` 변경 이유
백엔드가 내부 DB로 붙게 하려면 Compose가 준 환경변수가 `.env`보다 우선해야 한다.
만약 아래처럼 `override: true`를 쓰면 안 된다.
```js
dotenv.config({ override: true });
```
이렇게 되면 내부 `db`가 아니라 `.env`의 외부 DB로 다시 붙을 수 있다.
현재는 아래가 맞다.
```js
dotenv.config();
```
### 11.2 왜 `docker-entrypoint-initdb.d` 기반 dump 파일을 안 쓰는가
처음에는 이 방식을 시도했지만, 실제 데이터의 긴 문자열/깨진 텍스트 때문에 import가 line 97에서 중단됐다.
그래서 현재는 더 안정적인 아래 방식을 쓴다.
1. 외부 DB에서 `mysqldump`
2. 파이프로 내부 `db`에 즉시 `mysql` import
즉, 파일 중간 생성물을 신뢰하지 않는 구조다.
### 11.3 왜 프런트 프록시 타깃을 환경변수화했는가
로컬 직접 실행과 컨테이너 실행의 네트워크 기준이 다르기 때문이다.
1. 로컬 직접 실행: `localhost:3000`이 맞다.
2. 컨테이너 내부 실행: `backend:3000`이 맞다.
그래서 `vite.config.ts`는 둘 다 수용할 수 있게 작성됐다.
---
## 12. 문제 발생 시 진단 순서
이 프로젝트에서는 문제를 아래 순서로 자르면 가장 빠르다.
### 12.1 브라우저 화면에 데이터가 없을 때
먼저 다음 둘을 분리해서 본다.
1. `http://localhost:3000/api/assets/master`
2. `http://localhost:8080/api/assets/master`
판단 기준:
1. `3000`은 200이고 `8080`만 실패면 프런트 프록시 문제다.
2. 둘 다 실패면 백엔드 또는 DB 문제다.
### 12.2 DB bootstrap이 성공했는지 확인할 때
```powershell
wsl sh -lc "docker ps -a --format 'table {{.Names}}\t{{.Status}}' | grep itam"
```
여기서 `itam-db-bootstrap`이 `Exited (0)`인지 본다.
### 12.3 내부 DB에 실제 데이터가 있는지 확인할 때
```powershell
wsl sh -lc "docker exec itam-db mysql -uitam_admin -pitam1234 -D itam -e 'SHOW TABLES'"
```
### 12.4 백엔드 로그 확인
```powershell
wsl sh -lc "docker logs --tail=200 itam-backend"
```
### 12.5 DB 로그 확인
```powershell
wsl sh -lc "docker logs --tail=200 itam-db"
```
### 12.6 프런트 로그 확인
```powershell
wsl sh -lc "docker logs --tail=200 itam-frontend"
```
---
## 13. 자주 나올 수 있는 장애와 해석
### 13.1 `docker` 명령이 PowerShell에서 안 보임
의미:
1. Windows 셸이 아니라 WSL에서 Docker를 쓰는 환경이다.
대응:
1. `start_docker_wsl.ps1` 사용
### 13.2 `asset_core` 테이블 없음
의미:
1. 내부 DB 초기화가 안 됐거나 bootstrap이 안 끝났다.
대응:
1. `db-bootstrap` 상태 확인
2. `.env` 외부 DB 접속 정보 확인
3. 필요하면 볼륨 삭제 후 재초기화
### 13.3 `3000` API는 되는데 화면은 비어 있음
의미:
1. DB는 정상이고 프런트 프록시 또는 화면 렌더링 문제다.
대응:
1. `8080/api/assets/master` 상태 먼저 확인
### 13.4 `db-bootstrap`가 실패 종료함
의미 후보:
1. `.env` 외부 DB 접속 정보 오류
2. 외부 DB 네트워크 접근 불가
3. 외부 계정 권한 문제
대응:
1. `docker logs itam-db-bootstrap` 확인
---
## 14. 현재 최종 검증 완료 상태
이 저장소는 아래 상태까지 검증이 완료됐다.
1. WSL2 Ubuntu에서 Docker 실행 가능
2. `start_docker_wsl.ps1`로 전체 스택 기동 가능
3. `db` 컨테이너 healthcheck 통과
4. `db-bootstrap`가 외부 DB에서 내부 DB로 데이터 복제 후 `Exited (0)` 종료
5. `backend`가 내부 `db`를 사용해 API 응답 가능
6. `frontend`가 `backend`를 프록시해 8080 기준 화면/API 동작 가능
7. 내부 MySQL에 실데이터 적재 확인
즉, 현재 Git에 올라간 상태만으로도 WSL2와 외부 원본 DB 정보만 있으면 지금과 같은 수준의 Docker 실행 재현이 가능하다.
---
## 15. 현재 구조의 한계와 다음 단계
현재 구조는 충분히 시연 가능하고 개발 재현도 가능하지만, 다음은 아직 별도 작업이 필요하다.
1. 운영형 정적 배포 구조 전환
2. 외부 DB 없이도 완전 독립 실행 가능한 정식 dump/backup 체계
3. `.env.example` 정리
4. DB bootstrap 전용 계정/권한 최소화
5. 장기적으로 `map_config.json` 파일 저장 정책 정리
하지만 "현재 저장소만으로 지금과 같은 Docker 실행 상태 재현"이라는 목표는 이미 충족한다.
---
## 16. 빠른 실행 요약
가장 짧게 요약하면 다음 순서다.
1. `.env`에 외부 원본 MySQL 접속 정보를 넣는다.
2. WSL2 Ubuntu와 WSL 내부 Docker가 살아 있는지 확인한다.
3. `start_docker_wsl.ps1`를 실행한다.
4. `itam-db-bootstrap`가 `Exited (0)`인지 확인한다.
5. `http://localhost:3000/api/assets/master`와 `http://localhost:8080/api/assets/master`가 모두 200인지 확인한다.
6. 브라우저에서 `http://localhost:8080`을 열어 데이터가 보이는지 확인한다.
이 순서대로 진행하면 현재 저장소 기준 Dockerized ITAM 시연 환경을 재현할 수 있다.
---
## 17. 2026-06-16 최신 정정
이 문서의 상단 본문은 한동안 사용했던 `내부 db + db-bootstrap` 구조를 기준으로 작성됐다. 하지만 오늘 기준 현재 저장소의 실제 `docker-compose.yaml`은 다시 `무상태 앱 컨테이너 + 외부 DB` 구조로 되돌아가 있다.
따라서 현재 시점의 정답 아키텍처는 아래다.
1. `backend` 컨테이너
2. `frontend` 컨테이너
3. 외부 MySQL DB
현재는 더 이상 아래 항목이 없다.
1. `db` 서비스 없음
2. `db-bootstrap` 서비스 없음
3. `itam_mysql_data` 볼륨 없음
### 17.1 현재 실제 `docker-compose.yaml` 기준 backend 동작
현재 backend는 `.env`의 외부 DB 접속 정보를 그대로 사용한다.
즉, 아래 환경변수 매핑이 현재 기준이다.
1. `DB_HOST: ${DB_HOST}`
2. `DB_PORT: ${DB_PORT}`
3. `DB_USER: ${DB_USER}`
4. `DB_PASS: ${DB_PASS}`
5. `DB_NAME: ${DB_NAME}`
`PORT: 3000`만 Compose에서 고정한다.
### 17.2 현재 실제 기동 구조
현재 스택 기동 순서는 단순하다.
1. `backend` 기동
2. `frontend` 기동
3. backend는 외부 DB에 직접 접속
4. frontend는 `http://backend:3000`으로 프록시
즉, 현재는 DB 컨테이너 초기화 단계나 bootstrap 단계가 존재하지 않는다.
### 17.3 현재 기준 첫 실행 체크리스트
오늘 기준으로는 아래 순서가 맞다.
1. `.env`에 외부 DB 접속 정보 입력
2. `start_docker_wsl.ps1` 또는 `start_docker_wsl.bat` 실행
3. `http://localhost:3000/api/assets/master`가 200인지 확인
4. `http://localhost:8080/api/assets/master`가 200인지 확인
5. 브라우저에서 `http://localhost:8080` 접속 후 데이터 표시 확인
### 17.4 이 문서에서 현재 유효한 부분과 과거 이력 부분
현재도 그대로 유효한 내용은 아래다.
1. WSL2 기반 실행 방식
2. `start_docker_wsl.ps1` / `stop_docker_wsl.ps1` 사용 방식
3. `server.js`에서 Compose 환경변수가 `.env`보다 우선되도록 `dotenv.config()`를 유지해야 한다는 점
4. `vite.config.ts`에서 프록시 타깃을 환경변수화해야 한다는 점
현재는 과거 이력으로만 읽어야 하는 내용은 아래다.
1. 내부 `db` 서비스 설명
2. `db-bootstrap` 설명
3. `itam_mysql_data` 볼륨 설명
4. 내부 DB 재초기화 절차
5. 내부 테이블 확인 절차
### 17.5 현재 최종 한 줄 요약
오늘 날짜 기준 현재 저장소의 실사용 Compose 구조는 `frontend + backend + external DB`이며, 이전의 내부 DB/bootstrap 구조는 역사적으로 한 번 사용했던 임시 해결책으로만 남아 있다.

48
docker-compose.yaml Normal file
View File

@@ -0,0 +1,48 @@
services:
backend:
build:
context: .
dockerfile: Dockerfile.backend
container_name: itam-backend
working_dir: /app
env_file:
- .env
environment:
DB_HOST: ${DB_HOST}
DB_PORT: ${DB_PORT}
DB_USER: ${DB_USER}
DB_PASS: ${DB_PASS}
DB_NAME: ${DB_NAME}
PORT: 3000
ports:
- "3000:3000"
volumes:
- ./:/app
- backend_node_modules:/app/node_modules
- ./uploads:/app/uploads
- ./map_config.json:/app/map_config.json
command: npm run server
restart: unless-stopped
frontend:
build:
context: .
dockerfile: Dockerfile.frontend
container_name: itam-frontend
working_dir: /app
depends_on:
- backend
environment:
CHOKIDAR_USEPOLLING: "true"
VITE_DEV_PROXY_TARGET: http://backend:3000
ports:
- "8080:8080"
volumes:
- ./:/app
- frontend_node_modules:/app/node_modules
command: npm run dev -- --host 0.0.0.0
restart: unless-stopped
volumes:
backend_node_modules:
frontend_node_modules:

16
docker/mysql/init/README.md Normal file
View File

@@ -0,0 +1,16 @@
# MySQL init directory
This directory is kept as a legacy hook for file-based MySQL initialization.
Current production path in this repository is not file-based import.
The live Docker flow uses the `db-bootstrap` service in `docker-compose.yaml` to stream data from the external source DB into the internal `db` container.
Use this directory only if you intentionally switch back to `docker-entrypoint-initdb.d` style initialization.
If you do that, typical naming would be:
- `01_schema.sql`
- `02_seed.sql`
- or a single `01_itam_dump.sql`
Remember that files in this directory are executed automatically by the MySQL container only on the first initialization of the data volume.

330
docker_task_plan.md Normal file
View File

@@ -0,0 +1,330 @@
# ITAM 도커라이징 작업 태스크 정리
## 1. 문서 목적
이 문서는 ITAM 자산관리 시스템의 도커라이징 작업을 실제 실행 단위로 쪼개서 정리한 태스크 문서다.
이 문서의 목표는 아래와 같다.
1. 내일까지 보여줄 시연 범위를 기준으로 우선순위를 정한다.
2. 시연용 작업과 운영형 전환 작업을 분리한다.
3. 개발 담당자가 바로 실행할 수 있는 체크리스트를 제공한다.
관련 배경과 구조 분석은 [doc_readme.md](c:/Users/user/Desktop/안건%20파일/itam/doc_readme.md) 문서를 기준으로 한다.
현재 구현/검증 상태:
- `Dockerfile.frontend` 생성 완료
- `Dockerfile.backend` 생성 완료
- `docker-compose.yaml` 생성 완료
- `.dockerignore` 생성 완료
- WSL2 Ubuntu에서 `docker compose up --build -d` 검증 완료
- frontend 8080 응답 확인 완료
- backend `/api/assets/master` 응답 확인 완료
- 현재 DB는 external MySQL 기준이며, DB 컨테이너 추가 작업은 다음 단계로 남아 있음
## 2. 이번 작업의 최우선 목표
이번 도커라이징의 1차 목표는 "운영 배포 완료"가 아니라 아래 상태를 재현하는 것이다.
1. frontend 컨테이너가 정상 기동한다.
2. backend 컨테이너가 정상 기동한다.
3. backend가 기존 외부 MySQL 또는 MySQL 컨테이너에 정상 연결된다.
4. 브라우저에서 화면이 열린다.
5. 핵심 API 호출이 정상 동작한다.
6. 업로드 저장 경로가 유지된다.
7. 필요 시 DB까지 함께 포함된 재현 가능한 스택을 제공한다.
## 3. 작업 범위 구분
### 3.1 이번 시연 범위에 포함
- Dockerfile.frontend 초안 작성
- Dockerfile.backend 초안 작성
- docker-compose.yaml 작성
- `.dockerignore` 작성
- MySQL 컨테이너 추가 설계
- 초기 SQL dump 또는 init SQL 적재 방식 정의
- `uploads` 볼륨 처리
- `map_config.json` 영속성 처리 방식 반영
- 컨테이너 기동 및 접속 확인
- 핵심 API 및 화면 확인
### 3.2 이번 시연 범위에서 제외
- DB 전체 마이그레이션 자동화
- nginx 기반 운영 배포 구조
- 단일 이미지 운영 구조 전환
- CI/CD 연계
## 4. 선행 확인 태스크
아래 태스크는 실제 Docker 파일 작성 전에 먼저 확인해야 한다.
### Task 1. 외부 MySQL 접근 가능 여부 확인
- 목적: 컨테이너에서 외부 DB 접속이 가능한지 확인
- 확인 항목:
- DB_HOST 접근 가능 여부
- DB_PORT 3306 접속 가능 여부
- 계정 권한 정상 여부
- 완료 기준:
- backend 컨테이너 기준 DB 연결 에러가 발생하지 않음
### Task 2. 기준 스키마 상태 확인
- 목적: 현재 앱이 요구하는 테이블 구조가 실제 DB와 맞는지 확인
- 확인 항목:
- `asset_core`
- `asset_spec`
- `asset_location`
- `asset_remote`
- `asset_history`
- `hardware_components_master`
- `job_spec_standards`
- 완료 기준:
- `/api/assets/master` 호출 시 쿼리 에러가 발생하지 않음
### Task 3. 파일 영속성 대상 확인
- 목적: 컨테이너 재시작 이후에도 유지되어야 할 파일/폴더 식별
- 대상:
- `uploads`
- `map_config.json`
- 완료 기준:
- 볼륨 설계 대상이 명확하게 문서화됨
### Task 4. DB 기준 데이터 소스 확정
- 목적: MySQL 컨테이너 최초 기동 시 어떤 데이터로 초기화할지 결정
- 선택지:
- 기존 사내 DB에서 추출한 SQL dump 사용
- 정리된 스키마 SQL + seed SQL 사용
- 수동 import 절차 사용
- 완료 기준:
- `docker/mysql/init` 기준 적재 전략 또는 수동 복원 절차가 확정됨
## 5. 시연용 도커라이징 태스크
### Task 5. 프런트 Dockerfile 작성
- 목적: Vite 개발 서버를 컨테이너에서 구동
- 작업 내용:
- Node 20 계열 이미지 사용
- `package*.json` 복사 후 `npm install`
- 8080 포트 노출
- `npm run dev -- --host 0.0.0.0` 실행
- 산출물:
- `Dockerfile.frontend`
- 완료 기준:
- 컨테이너에서 8080 포트가 정상 listen 상태가 됨
### Task 6. 백엔드 Dockerfile 작성
- 목적: Express API 서버를 컨테이너에서 구동
- 작업 내용:
- Node 20 계열 이미지 사용
- `package*.json` 복사 후 `npm install`
- 3000 포트 노출
- `npm run server` 실행
- 산출물:
- `Dockerfile.backend`
- 완료 기준:
- 컨테이너에서 3000 포트가 정상 listen 상태가 됨
### Task 7. MySQL Docker 구성 추가
- 목적: DB까지 포함한 재현 가능한 스택 구성
- 작업 내용:
- `mysql:8.0` 서비스 정의
- `MYSQL_DATABASE`, `MYSQL_USER`, `MYSQL_PASSWORD` 설정
- utf8mb4 문자셋 옵션 반영
- MySQL 데이터 volume 연결
- 초기 SQL 적재용 `docker/mysql/init` 디렉터리 설계
- 산출물:
- `docker-compose.yaml` 내 `db` 서비스 또는 별도 DB compose 확장안
- 완료 기준:
- MySQL 컨테이너가 정상 기동하고 3306 포트에서 응답 가능
### Task 8. backend DB 연결 전환
- 목적: backend가 external MySQL 대신 DB 컨테이너를 바라보도록 변경
- 작업 내용:
- `DB_HOST`를 `db`로 전환
- 필요 시 `.env.docker` 또는 compose 내부 환경변수 사용
- backend `depends_on`에 db 추가
- 산출물:
- DB 컨테이너용 backend 환경 정의
- 완료 기준:
- backend 로그에서 DB 연결 성공 확인
### Task 9. docker-compose.yaml 확장
- 목적: frontend/backend를 함께 기동
- 작업 내용:
- frontend 서비스 정의
- backend 서비스 정의
- db 서비스 정의
- 포트 매핑 추가
- `.env` 또는 docker 전용 환경변수 연결
- MySQL 데이터 볼륨 연결
- `uploads` 볼륨 연결
- `map_config.json` 처리 방식 반영
- 산출물:
- `docker-compose.yaml`
- 완료 기준:
- `docker compose up --build` 한 번으로 세 서비스가 모두 올라옴
### Task 10. `.dockerignore` 작성
- 목적: 불필요한 빌드 컨텍스트 제외
- 제외 권장 항목:
- `node_modules`
- `dist`
- `build`
- `.git`
- `uploads`
- `*.xlsx`
- 산출물:
- `.dockerignore`
- 완료 기준:
- 이미지 빌드 컨텍스트가 과도하게 커지지 않음
## 6. 시연 검증 태스크
### Task 11. WSL 컨테이너 기동 검증
- 실행 명령:
```bash
powershell -ExecutionPolicy Bypass -File .\start_docker_wsl.ps1
```
- 확인 항목:
- frontend 로그 에러 여부
- backend 로그 에러 여부
- db 로그 에러 여부
- backend와 db 연결 성공 여부
- 완료 기준:
- 세 컨테이너 모두 종료 없이 유지됨
### Task 12. 웹 접속 검증
- 확인 항목:
- `http://localhost:8080` 접속 가능 여부
- 첫 화면 로딩 여부
- 콘솔 에러 여부
- 완료 기준:
- 브라우저에서 초기 화면이 정상 표시됨
### Task 13. API 검증
- 확인 항목:
- `http://localhost:3000/api/assets/master`
- 프런트에서 `/api/assets/master` 호출 정상 여부
- 완료 기준:
- 200 응답 또는 정상 데이터 응답 확인
### Task 14. DB 초기 데이터 검증
- 확인 항목:
- MySQL 컨테이너 내부에 목표 DB가 생성되었는지
- 기준 테이블이 존재하는지
- 샘플 데이터 또는 실데이터가 적재되었는지
- 완료 기준:
- backend가 기대하는 최소 테이블과 데이터가 실제로 조회됨
### Task 15. 업로드/파일 저장 검증
- 확인 항목:
- `/api/upload` 호출 정상 여부
- 업로드 파일이 `uploads`에 실제 저장되는지
- `map_config.json` 수정 내용이 유지되는지
- 완료 기준:
- 컨테이너 재시작 후에도 저장 데이터가 유지됨
## 7. 시연 후 후속 태스크
### Task 16. 운영형 프런트 배포 구조 전환
- 목표: Vite dev server 대신 정적 빌드 기반 구조로 전환
- 후보:
- nginx 정적 서빙
- Express 정적 서빙
### Task 17. DB 초기화/마이그레이션 전략 통합
- 목표: 기준 스키마와 실행 순서를 단일 정책으로 통일
- 필요 작업:
- 기준 스키마 선정
- 초기화 스크립트 확정
- 마이그레이션 순서 정의
### Task 18. `.env.example` 및 배포 환경 분리
- 목표: 민감정보를 저장소에서 분리하고 배포별 설정 체계화
### Task 19. 운영 볼륨 및 백업 전략 정리
- 목표: 업로드 파일과 설정 파일, MySQL 데이터의 장기 보존 정책 정리
### Task 20. DB 백업/복원 절차 문서화
- 목표: 컨테이너 DB를 기준으로 dump/restore 절차를 문서화
## 8. 우선순위 정리
### P0: 내일까지 반드시 필요한 작업
1. Task 1. 외부 MySQL 접근 가능 여부 확인
2. Task 2. 기준 스키마 상태 확인
3. Task 4. DB 기준 데이터 소스 확정
4. Task 7. MySQL Docker 구성 추가
5. Task 8. backend DB 연결 전환
6. Task 9. docker-compose.yaml 확장
7. Task 11. WSL 컨테이너 기동 검증
8. Task 12. 웹 접속 검증
9. Task 13. API 검증
10. Task 14. DB 초기 데이터 검증
### P1: 시연 안정화를 위해 권장되는 작업
1. Task 3. 파일 영속성 대상 확인
2. Task 10. `.dockerignore` 작성
3. Task 15. 업로드/파일 저장 검증
### P2: 시연 이후 진행할 작업
1. Task 16. 운영형 프런트 배포 구조 전환
2. Task 17. DB 초기화/마이그레이션 전략 통합
3. Task 18. `.env.example` 및 배포 환경 분리
4. Task 19. 운영 볼륨 및 백업 전략 정리
5. Task 20. DB 백업/복원 절차 문서화
## 9. 개발자용 최종 작업 순서 제안
개발 담당자에게는 아래 순서로 진행하라고 전달하면 된다.
1. 외부 DB 연결 가능 여부부터 확인
2. 현재 DB 스키마가 앱 요구사항과 맞는지 확인
3. DB 기준 dump 또는 init SQL 확보
4. MySQL 컨테이너 구성 추가
5. backend의 DB 연결 대상을 `db`로 전환
6. WSL에서 `docker compose config` 확인
7. WSL에서 컨테이너 기동 테스트
8. 웹 접속 및 API 확인
9. 업로드 및 파일 영속성 확인
10. 시연 완료 후 운영형 구조로 분리 작업 진행
## 10. 완료 판단 기준
이번 도커라이징 1차 작업은 아래 조건을 만족하면 완료로 본다.
1. `docker compose up --build`로 프런트, 백엔드, DB가 모두 기동한다.
2. 브라우저에서 8080 화면이 열린다.
3. `/api/assets/master`가 정상 응답한다.
4. backend가 DB 컨테이너와 정상 연결된다.
5. DB 초기 테이블과 데이터가 기대 상태로 적재된다.
6. `uploads`, `map_config.json`, MySQL 데이터가 재시작 후에도 유지된다.
이 문서는 실제 구현 작업의 체크리스트로 사용한다.

48
docs/plans/design_rule.md
View File

@@ -1,48 +0,0 @@
# 🎨 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를 제공합니다.

44
drop_legacy.js Normal file
View File

@@ -0,0 +1,44 @@
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 dropLegacyTables() {
const connection = await mysql.createConnection({
host: DB_HOST,
user: DB_USER,
password: DB_PASS,
database: DB_NAME,
port: parseInt(DB_PORT || '3306')
});
console.log('🧹 Starting cleanup of obsolete legacy backup tables...');
const tablesToDrop = [
'asset_pc', 'asset_pc_backup',
'asset_server', 'asset_server_backup',
'asset_storage', 'asset_storage_backup',
'asset_remote_backup', // IMPORTANT: DO NOT drop asset_remote!
'asset_equipment', 'asset_equipment_backup',
'asset_office_supplies', 'asset_office_supplies_backup',
'asset_survey', 'asset_survey_backup',
'asset_vip', 'asset_vip_backup',
'asset_pc_parts'
];
for (const table of tablesToDrop) {
try {
await connection.query(`DROP TABLE IF EXISTS ${table}`);
console.log(`✅ Dropped table: ${table}`);
} catch (err) {
console.warn(`⚠️ Failed to drop table ${table}: ${err.message}`);
}
}
console.log('🎉 Cleanup complete. Database is now lean and mean.');
await connection.end();
}
dropLegacyTables().catch(console.error);

BIN
image 92.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 135 KiB

0
public/img/location_photo/IDC/동관53.png → img/location_photo/IDC/동관53.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 MiB

After

Width:  |  Height:  |  Size: 10 MiB

0
public/img/location_photo/IDC/동관54.png → img/location_photo/IDC/동관54.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.3 MiB

After

Width:  |  Height:  |  Size: 6.3 MiB

BIN
img/location_photo/IDC/서관202.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 MiB

0
public/img/location_photo/IDC/서관203.png → img/location_photo/IDC/서관203.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 MiB

After

Width:  |  Height:  |  Size: 4.7 MiB

0
public/img/location_photo/IDC/서관204.png → img/location_photo/IDC/서관204.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 MiB

After

Width:  |  Height:  |  Size: 2.9 MiB

0
public/img/location_photo/IDC/서관205.png → img/location_photo/IDC/서관205.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 MiB

After

Width:  |  Height:  |  Size: 3.9 MiB

BIN
public/img/location_photo/기술개발센터/서버실/서버실_1.png → img/location_photo/기술개발센터/서버실/서버실_1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 MiB

After

Width:  |  Height:  |  Size: 11 MiB

0
public/img/location_photo/기술개발센터/서버실/서버실_2.png → img/location_photo/기술개발센터/서버실/서버실_2.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.1 MiB

After

Width:  |  Height:  |  Size: 6.1 MiB

BIN
public/img/location_photo/한맥빌딩/MDF실/MDF_1.png → img/location_photo/한맥빌딩/MDF실/MDF_1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.5 MiB

After

Width:  |  Height:  |  Size: 9.5 MiB

0
public/img/location_photo/한맥빌딩/MDF실/MDF_2.png → img/location_photo/한맥빌딩/MDF실/MDF_2.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.8 MiB

After

Width:  |  Height:  |  Size: 9.8 MiB

0
public/img/location_photo/한맥빌딩/MDF실/MDF_3.png → img/location_photo/한맥빌딩/MDF실/MDF_3.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.1 MiB

After

Width:  |  Height:  |  Size: 8.1 MiB

0
public/img/location_photo/한맥빌딩/MDF실/MDF_4.png → img/location_photo/한맥빌딩/MDF실/MDF_4.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.8 MiB

After

Width:  |  Height:  |  Size: 5.8 MiB

0
docs/plans/implementation_plan.md → implementation_plan.md
View File

0
docs/plans/implementation_plan2 → implementation_plan2
View File

0
docs/plans/implementation_plan3 → implementation_plan3
View File

13
index.html
View File

@@ -5,9 +5,15 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>한맥가족 자산관리시스템</title>
<title>ITAM 자산관리 ERP</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
<link rel="stylesheet" href="/src/styles/common.css" />
<link rel="stylesheet" href="/src/styles/login.css" />
<link rel="stylesheet" href="/src/styles/guide.css" />
<link rel="stylesheet" href="/src/styles/modal.css" />
<link rel="stylesheet" href="/src/styles/dashboard.css" />
<link rel="stylesheet" href="/src/styles/table.css" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
</head>
@@ -19,7 +25,7 @@
<div class="header-container" id="nav-container">
<div class="brand">
<img src="/image 92.png" alt="Logo" class="main-logo" />
<h1>한맥자산관리시스템</h1>
<h1>자산관리시스템<span class="sub-title">(Digital Asset Control Hub System)</span></h1>
</div>
<!-- Navigation (GNB + LNB in same row) -->
@@ -51,7 +57,8 @@
<!-- Footer -->
<footer class="main-footer">
<p>&copy; 2026 BARON Consultant Co,Ltd. All rights reserved.</p>
<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>Powered by BARON Consultant Co,Ltd</p>
</footer>
</div>

814
map_config.json
View File

File diff suppressed because it is too large Load Diff

8
map_editor.html
View File

@@ -6,7 +6,7 @@
<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">
<body style="margin: 0; display: flex; height: 100vh; overflow: hidden; font-family: sans-serif;">
<!-- Left: File Selector -->
<div class="file-sidebar" id="file-sidebar">
@@ -22,7 +22,7 @@
<!-- Right: Control Panel -->
<div class="sidebar">
<h2>Map Editor <small class="editor-version">v3.0</small></h2>
<h2>Map Editor <small style="font-size: 0.6em; color: #888;">v3.0</small></h2>
<div class="current-path" id="current-path">파일을 선택하세요</div>
<p>
드래그하여 구역을 정의하세요. 저장 버튼을 누르면 즉시 시스템에 반영됩니다.
@@ -31,8 +31,8 @@
<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>
<button id="btn-clear-all" class="btn btn-outline" style="height:38px;">전체 삭제</button>
<button id="btn-save-server" class="btn btn-primary" style="height:38px;">서버에 즉시 저장</button>
<div id="save-status"></div>
</div>
</div>

197
migrate_schema.js Normal file
View File

@@ -0,0 +1,197 @@
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 migrateSchema() {
const connection = await mysql.createConnection({
host: DB_HOST,
user: DB_USER,
password: DB_PASS,
database: DB_NAME,
port: parseInt(DB_PORT || '3306')
});
console.log('🚀 Phase 1: Creating Normalized Tables & Migrating Data...');
try {
await connection.query('SET FOREIGN_KEY_CHECKS = 0');
// --- 1. Drop existing new tables if they exist ---
await connection.query('DROP TABLE IF EXISTS asset_core, asset_hardware, asset_location, asset_remote');
// --- 2. Create New Schema ---
await connection.query(`
CREATE TABLE asset_core (
id VARCHAR(50) PRIMARY KEY,
asset_code VARCHAR(100) UNIQUE NOT NULL,
category VARCHAR(100),
asset_type VARCHAR(100),
asset_purpose VARCHAR(255),
service_type VARCHAR(50),
purchase_corp VARCHAR(100),
purchase_date VARCHAR(50),
purchase_amount VARCHAR(100),
purchase_vendor VARCHAR(255),
approval_document VARCHAR(255),
memo TEXT,
manager_primary VARCHAR(100),
manager_secondary VARCHAR(100),
current_dept VARCHAR(255),
previous_dept VARCHAR(255),
user_current VARCHAR(100),
previous_user VARCHAR(100),
emp_no VARCHAR(20),
user_position VARCHAR(50),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`);
await connection.query(`
CREATE TABLE asset_hardware (
id INT AUTO_INCREMENT PRIMARY KEY,
asset_id VARCHAR(50) NOT NULL,
hw_status VARCHAR(50),
model_name VARCHAR(255),
mainboard VARCHAR(255),
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),
volume VARCHAR(100),
monitor_inch VARCHAR(50),
serial_num VARCHAR(100),
FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`);
await connection.query(`
CREATE TABLE asset_location (
id INT AUTO_INCREMENT PRIMARY KEY,
asset_id VARCHAR(50) NOT NULL,
location VARCHAR(255),
location_detail VARCHAR(255),
location_photo VARCHAR(255),
loc_x VARCHAR(20),
loc_y VARCHAR(20),
is_active BOOLEAN DEFAULT TRUE,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`);
await connection.query(`
CREATE TABLE asset_remote (
id INT AUTO_INCREMENT PRIMARY KEY,
asset_id VARCHAR(50) NOT NULL,
ip_address VARCHAR(100),
mac_address VARCHAR(100),
remote_tool VARCHAR(100),
remote_id VARCHAR(100),
remote_pw VARCHAR(100),
is_active BOOLEAN DEFAULT TRUE,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`);
await connection.query('SET FOREIGN_KEY_CHECKS = 1');
console.log('✅ Normalized tables created.');
// --- 3. Migrate Data from Legacy Tables ---
const legacyTables = ['asset_pc', 'asset_server', 'asset_storage', 'asset_remote', 'asset_equipment', 'asset_office_supplies', 'asset_survey', 'asset_vip'];
let totalMigrated = 0;
for (const table of legacyTables) {
try {
const [rows] = await connection.query(`SELECT * FROM ${table}`);
for (const row of rows) {
// 3.1 Insert into asset_core
await connection.query(`
INSERT IGNORE INTO asset_core (
id, asset_code, category, asset_type, 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, created_at
) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
`, [
row.id, row.asset_code, row.category, row.asset_type, row.asset_purpose, row.service_type,
row.purchase_corp, row.purchase_date, row.purchase_amount, row.purchase_vendor, row.approval_document,
row.memo, row.manager_primary, row.manager_secondary, row.current_dept, row.previous_dept,
row.user_current, row.previous_user, row.emp_no, row.user_position, row.created_at
]);
// 3.2 Insert into asset_hardware (if hardware fields exist)
if (row.model_name || row.cpu || row.ram || row.hw_status) {
await connection.query(`
INSERT INTO asset_hardware (
asset_id, hw_status, model_name, mainboard, os, cpu, ram, gpu, storage1, storage2, storage3, monitoring, price, volume, monitor_inch, serial_num
) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
`, [
row.id, row.hw_status, row.model_name, row.mainboard, row.os, row.cpu, row.ram, row.gpu,
row.ssd_1 || row.hdd_1, row.ssd_2 || row.hdd_2, row.hdd_3, row.monitoring, row.price,
row.volume, row.monitor_inch, row.serial_num
]);
}
// 3.3 Insert into asset_location (if location fields exist)
if (row.location || row.location_detail) {
await connection.query(`
INSERT INTO asset_location (
asset_id, location, location_detail, location_photo, loc_x, loc_y
) VALUES (?, ?, ?, ?, ?, ?)
`, [
row.id, row.location, row.location_detail, row.location_photo, row.loc_x, row.loc_y
]);
}
// 3.4 Insert into asset_remote (if network fields exist)
// Handle primary network interface
if (row.ip_address || row.mac_address || row.remote_tool) {
await connection.query(`
INSERT INTO asset_remote (
asset_id, ip_address, mac_address, remote_tool, remote_id, remote_pw
) VALUES (?, ?, ?, ?, ?, ?)
`, [
row.id, row.ip_address, row.mac_address, row.remote_tool, row.remote_id, row.remote_pw
]);
}
// Handle secondary network interface (e.g., from server table) if it exists
if (row.ip_address_2 || row.remote_tool_2) {
await connection.query(`
INSERT INTO asset_remote (
asset_id, ip_address, remote_tool, remote_id, remote_pw
) VALUES (?, ?, ?, ?, ?)
`, [
row.id, row.ip_address_2, row.remote_tool_2, row.remote_id_2, row.remote_pw_2
]);
}
totalMigrated++;
}
console.log(`- Migrated ${rows.length} records from ${table}`);
} catch (err) {
console.warn(`- Skipping legacy table ${table}: ${err.message}`);
}
}
console.log(`✅ Phase 1 Data Migration Completed. Total Assets Migrated: ${totalMigrated}`);
} catch (err) {
console.error('❌ Migration Failed:', err);
} finally {
await connection.end();
}
}
migrateSchema();

212
migrate_v2_final.js Normal file
View File

@@ -0,0 +1,212 @@
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 migrateV2() {
const connection = await mysql.createConnection({
host: DB_HOST,
user: DB_USER,
password: DB_PASS,
database: DB_NAME,
port: parseInt(DB_PORT || '3306')
});
console.log('🚀 Phase 2: Final Migration to Normalized V2 Schema...');
try {
await connection.query('SET FOREIGN_KEY_CHECKS = 0');
// 1. Create/Enhance Core Tables
console.log('1. Creating/Enhancing Tables...');
await connection.query('DROP TABLE IF EXISTS asset_core, asset_hardware, asset_location, asset_remote');
await connection.query(`
CREATE TABLE asset_core (
id VARCHAR(50) PRIMARY KEY,
asset_code VARCHAR(100) UNIQUE NOT NULL,
category VARCHAR(100),
asset_type VARCHAR(100),
current_role VARCHAR(50) DEFAULT 'Normal' COMMENT 'Normal, Server, Personal, etc.',
asset_purpose VARCHAR(255),
service_type VARCHAR(50),
purchase_corp VARCHAR(100),
purchase_date VARCHAR(50),
purchase_amount VARCHAR(100),
purchase_vendor VARCHAR(255),
approval_document VARCHAR(255),
memo TEXT,
manager_primary VARCHAR(100),
manager_secondary VARCHAR(100),
current_dept VARCHAR(255),
previous_dept VARCHAR(255),
user_current VARCHAR(100),
previous_user VARCHAR(100),
emp_no VARCHAR(20),
user_position VARCHAR(50),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`);
await connection.query(`
CREATE TABLE asset_hardware (
id INT AUTO_INCREMENT PRIMARY KEY,
asset_id VARCHAR(50) NOT NULL,
hw_status VARCHAR(50),
model_name VARCHAR(255),
mainboard VARCHAR(255),
os VARCHAR(100),
cpu VARCHAR(255),
ram VARCHAR(100),
gpu VARCHAR(100),
storage1 VARCHAR(255),
storage2 VARCHAR(255),
storage3 VARCHAR(255),
storage4 VARCHAR(255),
monitoring VARCHAR(100),
price VARCHAR(100),
volume VARCHAR(100),
monitor_inch VARCHAR(50),
serial_num VARCHAR(100),
FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`);
await connection.query(`
CREATE TABLE asset_location (
id INT AUTO_INCREMENT PRIMARY KEY,
asset_id VARCHAR(50) NOT NULL,
location VARCHAR(255),
location_detail VARCHAR(255),
location_photo VARCHAR(255),
loc_x VARCHAR(20),
loc_y VARCHAR(20),
is_active TINYINT(1) DEFAULT 1,
deactivated_at DATETIME NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`);
await connection.query(`
CREATE TABLE asset_remote (
id INT AUTO_INCREMENT PRIMARY KEY,
asset_id VARCHAR(50) NOT NULL,
ip_address VARCHAR(100),
mac_address VARCHAR(100),
remote_tool VARCHAR(100),
remote_id VARCHAR(100),
remote_pw VARCHAR(100),
is_active TINYINT(1) DEFAULT 1,
deactivated_at DATETIME NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`);
console.log('✅ V2 Schema tables created.');
// 2. Migration Logic
const legacyTables = [
{ name: 'asset_pc', defaultRole: 'Personal' },
{ name: 'asset_server', defaultRole: 'Server' },
{ name: 'asset_storage', defaultRole: 'Normal' },
{ name: 'asset_equipment', defaultRole: 'Normal' },
{ name: 'asset_office_supplies', defaultRole: 'Normal' },
{ name: 'asset_survey', defaultRole: 'Normal' },
{ name: 'asset_vip', defaultRole: 'Normal' },
{ name: 'asset_pc_parts', defaultRole: 'Normal' }
];
let totalMigrated = 0;
for (const tableInfo of legacyTables) {
const table = tableInfo.name;
try {
const [rows] = await connection.query(`SELECT * FROM ${table}`);
console.log(`- Migrating ${rows.length} records from ${table}...`);
for (const row of rows) {
// 2.1 Insert into asset_core
const role = (table === 'asset_pc' && row.asset_type === '서버PC') ? 'Server' : tableInfo.defaultRole;
await connection.query(`
INSERT IGNORE INTO asset_core (
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, created_at
) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
`, [
row.id, row.asset_code, row.category, row.asset_type, role, row.asset_purpose, row.service_type,
row.purchase_corp, row.purchase_date, row.purchase_amount, row.purchase_vendor, row.approval_document,
row.memo, row.manager_primary, row.manager_secondary, row.current_dept, row.previous_dept,
row.user_current || row.current_user, row.previous_user, row.emp_no, row.user_position, row.created_at
]);
// 2.2 Insert into asset_hardware
await connection.query(`
INSERT INTO asset_hardware (
asset_id, hw_status, model_name, mainboard, os, cpu, ram, gpu, storage1, storage2, storage3, storage4, monitoring, price, volume, monitor_inch, serial_num
) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
`, [
row.id, row.hw_status, row.model_name, row.mainboard, row.os, row.cpu, row.ram, row.gpu,
row.ssd_1 || row.storage1, row.ssd_2 || row.storage2, row.hdd_1 || row.storage3, row.hdd_2, row.monitoring, row.price,
row.volume, row.monitor_inch, row.serial_num
]);
// 2.3 Insert into asset_location
if (row.location || row.location_detail) {
await connection.query(`
INSERT INTO asset_location (
asset_id, location, location_detail, location_photo, loc_x, loc_y, is_active
) VALUES (?, ?, ?, ?, ?, ?, 1)
`, [
row.id, row.location, row.location_detail, row.location_photo, row.loc_x, row.loc_y
]);
}
// 2.4 Insert into asset_remote
// Primary Network
if (row.ip_address || row.mac_address || row.remote_tool) {
await connection.query(`
INSERT INTO asset_remote (
asset_id, ip_address, mac_address, remote_tool, remote_id, remote_pw, is_active
) VALUES (?, ?, ?, ?, ?, ?, 1)
`, [
row.id, row.ip_address, row.mac_address, row.remote_tool, row.remote_id, row.remote_pw
]);
}
// Secondary Network (for servers)
if (row.ip_address_2 || row.remote_tool_2) {
await connection.query(`
INSERT INTO asset_remote (
asset_id, ip_address, remote_tool, remote_id, remote_pw, is_active
) VALUES (?, ?, ?, ?, ?, 1)
`, [
row.id, row.ip_address_2, row.remote_tool_2, row.remote_id_2, row.remote_pw_2
]);
}
totalMigrated++;
}
} catch (err) {
console.warn(`- Skipping table ${table}: ${err.message}`);
}
}
await connection.query('SET FOREIGN_KEY_CHECKS = 1');
console.log(`✅ Phase 2 Data Migration Completed. Total Assets Migrated: ${totalMigrated}`);
} catch (err) {
console.error('❌ Migration Failed:', err);
} finally {
await connection.end();
}
}
migrateV2();

73
migrate_v4_network.js Normal file
View File

@@ -0,0 +1,73 @@
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 migrate() {
const conn = await pool.getConnection();
try {
console.log('1. Creating asset_remote_v4 table...');
await conn.query(`
CREATE TABLE IF NOT EXISTS asset_remote_v4 (
id INT AUTO_INCREMENT PRIMARY KEY,
asset_id VARCHAR(50) NOT NULL,
net_type VARCHAR(20) NOT NULL, /* 'IP' or 'REMOTE' */
net_name VARCHAR(100), /* e.g., '기본망', 'AnyDesk' */
net_value1 VARCHAR(100), /* IP or ID */
net_value2 VARCHAR(100), /* MAC or PW */
is_active TINYINT(1) DEFAULT 1,
deactivated_at DATETIME NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`);
console.log('2. Migrating data from asset_remote...');
const [oldRows] = await conn.query('SELECT * FROM asset_remote WHERE is_active = 1');
let ipCount = 0;
let remoteCount = 0;
for (const row of oldRows) {
// Migrating IP/MAC
if (row.ip_address || row.mac_address) {
await conn.query(
'INSERT INTO asset_remote_v4 (asset_id, net_type, net_name, net_value1, net_value2, created_at) VALUES (?, ?, ?, ?, ?, ?)',
[row.asset_id, 'IP', '기본망', row.ip_address, row.mac_address, row.created_at]
);
ipCount++;
}
// Migrating Remote
if (row.remote_tool || row.remote_id || row.remote_pw) {
await conn.query(
'INSERT INTO asset_remote_v4 (asset_id, net_type, net_name, net_value1, net_value2, created_at) VALUES (?, ?, ?, ?, ?, ?)',
[row.asset_id, 'REMOTE', row.remote_tool, row.remote_id, row.remote_pw, row.created_at]
);
remoteCount++;
}
}
console.log(`Migrated ${ipCount} IP records and ${remoteCount} Remote records.`);
console.log('3. Renaming tables...');
await conn.query('DROP TABLE IF EXISTS asset_remote_legacy');
await conn.query('RENAME TABLE asset_remote TO asset_remote_legacy, asset_remote_v4 TO asset_remote;');
console.log('✅ Migration V4 (Remote) Complete.');
} catch (e) {
console.error('Migration failed:', e);
} finally {
conn.release();
pool.end();
}
}
migrate();

28
migrate_v5_rename_remote.js Normal file
View File

@@ -0,0 +1,28 @@
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 migrate() {
const conn = await pool.getConnection();
try {
console.log('1. Renaming asset_network to asset_remote...');
await conn.query('RENAME TABLE asset_network TO asset_remote');
console.log('✅ Table renamed successfully.');
} catch (e) {
console.error('Migration failed:', e);
} finally {
conn.release();
pool.end();
}
}
migrate();

195
migrate_v6_parts_master.js Normal file
View File

@@ -0,0 +1,195 @@
import mysql from 'mysql2/promise';
import dotenv from 'dotenv';
dotenv.config({ override: true });
const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
// 기존의 감점 계산 로직을 그대로 이용해 등급과 감점점수를 도출하는 헬퍼 함수
function parseCpu(cpu) {
if (!cpu) return { tier: '기타', deduction: 30 };
const cpuUpper = cpu.toUpperCase().trim();
if (cpuUpper === '-' || cpuUpper === '') return { tier: '기타', deduction: 30 };
let tier = '기타';
let deduction = 30;
if (cpuUpper.includes('I9') || cpuUpper.includes('RYZEN 9') || cpuUpper.includes('RYZEN9')) {
tier = 'i9 / Ryzen 9';
deduction = 0;
} else if (cpuUpper.includes('I7') || cpuUpper.includes('RYZEN 7') || cpuUpper.includes('RYZEN7')) {
tier = 'i7 / Ryzen 7';
deduction = 5;
} else if (cpuUpper.includes('I5') || cpuUpper.includes('RYZEN 5') || cpuUpper.includes('RYZEN5')) {
tier = 'i5 / Ryzen 5';
deduction = 15;
} else if (cpuUpper.includes('I3') || cpuUpper.includes('RYZEN 3') || cpuUpper.includes('RYZEN3')) {
tier = 'i3 / Ryzen 3';
deduction = 25;
}
// 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;
}
// 최종 등급 감점 + 세대 감점 합산
return { tier, deduction: deduction + genDeduction };
}
function parseGpu(gpu) {
if (!gpu) return { tier: 'C', deduction: 25 };
const gpuUpper = gpu.toUpperCase().trim();
if (gpuUpper === '-' || gpuUpper === '') return { tier: 'C', deduction: 25 };
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')
) {
return { tier: 'S', deduction: 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')
) {
return { tier: 'A', deduction: 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')
) {
return { tier: 'B', deduction: 15 };
} else {
return { tier: 'C', deduction: 25 };
}
}
function parseRam(ram) {
if (!ram) return { tier: '부족', deduction: 25 };
const ramUpper = ram.toUpperCase().trim();
if (ramUpper === '-' || ramUpper === '') return { tier: '부족', deduction: 25 };
const ramMatch = ramUpper.match(/(\d+)\s*GB/);
if (ramMatch && ramMatch[1]) {
const ramVal = parseInt(ramMatch[1], 10);
if (ramVal >= 32) return { tier: '최적', deduction: 0 };
else if (ramVal >= 16) return { tier: '보통', deduction: 10 };
else if (ramVal >= 8) return { tier: '주의', deduction: 20 };
}
return { tier: '부족', deduction: 25 };
}
async function runMigration() {
console.log('🔄 DB 커넥션 연결 중...');
const connection = await mysql.createConnection({
host: DB_HOST,
user: DB_USER,
password: DB_PASS,
database: DB_NAME,
port: parseInt(DB_PORT || '3306')
});
try {
console.log('⚙️ 1. hardware_components_master 테이블 생성...');
await connection.query('DROP TABLE IF EXISTS hardware_components_master');
await connection.query(`
CREATE TABLE hardware_components_master (
id INT AUTO_INCREMENT PRIMARY KEY,
category VARCHAR(50) NOT NULL COMMENT 'CPU, GPU, RAM 등',
component_name VARCHAR(255) NOT NULL UNIQUE COMMENT '부품 표준 명칭',
score_tier VARCHAR(50) COMMENT '성능 등급',
deduction INT DEFAULT 0 COMMENT '감점 점수',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`);
console.log('✅ 테이블 생성 완료.');
console.log('🔍 2. 기존 asset_spec 테이블에서 부품명 조회...');
const [specRows] = await connection.query('SELECT DISTINCT cpu, ram, gpu FROM asset_spec');
const uniqueCpus = new Set();
const uniqueGpus = new Set();
const uniqueRams = new Set();
specRows.forEach(row => {
if (row.cpu && row.cpu.trim() !== '-' && row.cpu.trim() !== '') uniqueCpus.add(row.cpu.trim());
if (row.gpu && row.gpu.trim() !== '-' && row.gpu.trim() !== '') uniqueGpus.add(row.gpu.trim());
if (row.ram && row.ram.trim() !== '-' && row.ram.trim() !== '') uniqueRams.add(row.ram.trim());
});
// 만약 데이터가 너무 비어있을 경우를 대비하여 기본 대표 부품 몇 개 추가
if (uniqueCpus.size === 0) {
['Intel Core i9-13900K', 'Intel Core i7-14700K', 'Intel Core i5-12400', 'AMD Ryzen 7 7800X3D', 'Intel Core i3-10100'].forEach(c => uniqueCpus.add(c));
}
if (uniqueGpus.size === 0) {
['NVIDIA GeForce RTX 4090', 'NVIDIA GeForce RTX 4070', 'NVIDIA GeForce RTX 3060', 'Intel Iris Xe Graphics', 'NVIDIA GeForce GTX 1660 Super'].forEach(g => uniqueGpus.add(g));
}
if (uniqueRams.size === 0) {
['8GB', '16GB', '32GB', '64GB'].forEach(r => uniqueRams.add(r));
}
console.log(` - 추출된 CPU 개수: ${uniqueCpus.size}`);
console.log(` - 추출된 GPU 개수: ${uniqueGpus.size}`);
console.log(` - 추출된 RAM 개수: ${uniqueRams.size}`);
console.log('💾 3. 마스터 테이블에 부품 데이터 및 감점 정보 삽입...');
// CPU 삽입
for (const cpu of uniqueCpus) {
const { tier, deduction } = parseCpu(cpu);
await connection.query(
'INSERT IGNORE INTO hardware_components_master (category, component_name, score_tier, deduction) VALUES (?, ?, ?, ?)',
['CPU', cpu, tier, deduction]
);
}
// GPU 삽입
for (const gpu of uniqueGpus) {
const { tier, deduction } = parseGpu(gpu);
await connection.query(
'INSERT IGNORE INTO hardware_components_master (category, component_name, score_tier, deduction) VALUES (?, ?, ?, ?)',
['GPU', gpu, tier, deduction]
);
}
// RAM 삽입
for (const ram of uniqueRams) {
const { tier, deduction } = parseRam(ram);
await connection.query(
'INSERT IGNORE INTO hardware_components_master (category, component_name, score_tier, deduction) VALUES (?, ?, ?, ?)',
['RAM', ram, tier, deduction]
);
}
console.log('✅ 마이그레이션이 성공적으로 완료되었습니다!');
} catch (error) {
console.error('❌ 마이그레이션 오류 발생:', error);
} finally {
await connection.end();
}
}
runMigration();

36
probe_db.js Normal file
View File

@@ -0,0 +1,36 @@
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 probeDB() {
const connection = await mysql.createConnection({
host: DB_HOST,
user: DB_USER,
password: DB_PASS,
database: DB_NAME,
port: parseInt(DB_PORT || '3306')
});
console.log('--- Database Probe Start ---');
const [tables] = await connection.query('SHOW TABLES');
const tableNames = tables.map(t => Object.values(t)[0]);
console.log('Existing Tables:', tableNames);
for (const table of tableNames) {
const [columns] = await connection.query(`DESCRIBE ${table}`);
console.log(`\n[Table: ${table}]`);
columns.forEach(c => {
console.log(` - ${c.Field} (${c.Type}) ${c.Comment ? '// ' + c.Comment : ''}`);
});
}
await connection.end();
console.log('\n--- Database Probe End ---');
}
probeDB().catch(console.error);

BIN
public/img/image_92.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.9 MiB

BIN
public/img/location_photo/IDC/서관202.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.9 MiB

BIN
public/img/location_photo/기술개발센터/센터내부/센터내부.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 388 KiB

354
public/img/location_photo/기술개발센터/팀자리/center_chair_map_view_only.html
View File

@@ -1,354 +0,0 @@
<!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>

1
public/img/location_photo/기술개발센터/팀자리/center_chair_people_data.json
View File

File diff suppressed because one or more lines are too long

931
public/img/location_photo/기술개발센터/팀자리/center_chair_people_map.html
View File

@@ -1,931 +0,0 @@
<!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>

932
public/img/location_photo/기술개발센터/팀자리/center_chair_people_map_6f.html
View File

@@ -1,932 +0,0 @@
<!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>

932
public/img/location_photo/기술개발센터/팀자리/center_chair_people_map_7f.html
View File

@@ -1,932 +0,0 @@
<!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>

508
public/img/location_photo/기술개발센터/팀자리/center_chair_people_map_generated.html
View File

File diff suppressed because one or more lines are too long

1
public/img/location_photo/기술개발센터/팀자리/center_chair_people_payload.js
View File

File diff suppressed because one or more lines are too long

1
public/img/location_photo/기술개발센터/팀자리/center_chair_people_payload_6f.js
View File

File diff suppressed because one or more lines are too long

1
public/img/location_photo/기술개발센터/팀자리/center_chair_people_payload_7f.js
View File

File diff suppressed because one or more lines are too long

BIN
public/img/location_photo/한맥빌딩/1층.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 196 KiB

BIN
public/img/location_photo/한맥빌딩/2층.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 276 KiB

BIN
public/img/location_photo/한맥빌딩/3층.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 225 KiB

BIN
public/img/location_photo/한맥빌딩/4층.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 228 KiB

BIN
public/img/location_photo/한맥빌딩/5층.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 242 KiB

BIN
public/img/location_photo/한맥빌딩/6층.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 259 KiB

BIN
public/img/location_photo/한맥빌딩/7층.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 213 KiB

163
scratch/calculate_job_averages.js Normal file
View File

@@ -0,0 +1,163 @@
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
View File

@@ -1,118 +0,0 @@
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
View File

@@ -1,128 +0,0 @@
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
View File

@@ -1,88 +0,0 @@
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();

30
scratch/parse_excel.js Normal file
View File

@@ -0,0 +1,30 @@
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);
}

27
scratch/parse_svr_excel.js Normal file
View File

@@ -0,0 +1,27 @@
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);
}

447
scratch/update_dummy_pcs.js Normal file
View File

@@ -0,0 +1,447 @@
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);
}

442
scratch/update_dummy_servers.js Normal file
View File

@@ -0,0 +1,442 @@
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);
}

86
server.js
View File

@@ -4,7 +4,22 @@ import cors from 'cors';
import dotenv from 'dotenv';
import fs from 'fs';
dotenv.config({ override: true });
dotenv.config();
const dbConfig = {
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 getDbConnectionSummary = () => ({
host: dbConfig.host || '(missing)',
port: dbConfig.port,
user: dbConfig.user || '(missing)',
database: dbConfig.database || '(missing)'
});
const app = express();
app.use(cors());
@@ -18,11 +33,11 @@ if (!fs.existsSync('uploads')) {
// MySQL Pool Configuration
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'),
host: dbConfig.host,
user: dbConfig.user,
password: dbConfig.password,
database: dbConfig.database,
port: dbConfig.port,
waitForConnections: true,
connectionLimit: 10,
queueLimit: 0
@@ -48,7 +63,15 @@ const pool = mysql.createPool({
`);
console.log('✅ job_spec_standards table verification completed.');
} catch (err) {
console.error('❌ Failed to verify/create job_spec_standards table:', err);
console.error('❌ Failed to verify/create job_spec_standards table:', {
db: getDbConnectionSummary(),
code: err.code,
errno: err.errno,
syscall: err.syscall,
address: err.address,
port: err.port,
message: err.message
});
} finally {
if (connection) connection.release();
}
@@ -56,7 +79,15 @@ const pool = mysql.createPool({
// Error Handler
const handleError = (res, err, label) => {
console.error(`❌ [${label}] Error:`, err);
console.error(`❌ [${label}] Error:`, {
db: getDbConnectionSummary(),
code: err.code,
errno: err.errno,
syscall: err.syscall,
address: err.address,
port: err.port,
message: err.message
});
res.status(500).json({ error: err.message });
};
@@ -675,41 +706,16 @@ app.delete('/api/system-users/:id', async (req, res) => {
}
});
app.post('/api/maps/save', async (req, res) => {
let connection;
app.post('/api/maps/save', (req, res) => {
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();
}
let config = {};
if (fs.existsSync('map_config.json')) config = JSON.parse(fs.readFileSync('map_config.json', 'utf8') || '{}');
config[path] = boxes;
fs.writeFileSync('map_config.json', JSON.stringify(config, null, 2));
res.json({ success: true });
} catch (err) { handleError(res, err, 'SAVE MAPS'); }
});
// 7. File Upload API (Base64)

1
src/components/Guide.ts
View File

@@ -1,6 +1,5 @@
import { createIcons, BookOpen, X, ChevronDown, ChevronRight, RefreshCw } from 'lucide';
import { state } from '../core/state';
import './guide.css';
// ─── 자산별 가이드 콘텐츠 정의 (SW_Table 브랜치 전체 복구) ───
interface GuideTabConfig {

22
src/components/Modal/BaseModal.ts
View File

@@ -1,6 +1,5 @@
import { createIcons, X } from 'lucide';
import { setEditLock } from './ModalUtils';
import './modal.css';
/**
* 모든 모달의 공통 기능을 관리하는 베이스 추상 클래스입니다.
@@ -10,7 +9,6 @@ export abstract class BaseModal {
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;
@@ -55,23 +53,16 @@ export abstract class BaseModal {
*/
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);
this.fillFormData(asset);
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);
@@ -120,16 +111,9 @@ export function closeModals() {
}
export function initBaseModal() {
// ESC 키로 모든 모달 닫기 (위치보기 팝업이 있으면 그것부터 닫음)
// ESC 키로 모든 모달 닫기
window.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
const picker = document.querySelector('.image-picker-overlay');
if (picker) {
picker.remove();
} else {
closeModals();
}
}
if (e.key === 'Escape') closeModals();
});
return { closeAllModals: closeModals };

6
src/components/Modal/DashboardDetailModal.ts
View File

@@ -4,14 +4,14 @@ import { createIcons, X } from 'lucide';
const DASHBOARD_DETAIL_MODAL_HTML = `
<div id="dashboard-detail-modal" class="modal-overlay hidden">
<div class="modal-content wide">
<div class="modal-content wide" style="max-width: 1000px;">
<div class="modal-header">
<h2 id="dashboard-detail-modal-title" class="modal-title">상세 목록</h2>
<h2 id="dashboard-detail-modal-title">상세 목록</h2>
<button id="btn-close-dashboard-detail-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
</div>
<div class="modal-body">
<div class="table-container">
<table>
<table style="width:100%;">
<thead></thead>
<tbody id="dashboard-detail-tbody"></tbody>
</table>

64
src/components/Modal/DomainModal.ts
View File

@@ -2,7 +2,7 @@ import { state, saveAsset, deleteAsset } from '../../core/state';
import { BaseModal } from './BaseModal';
import { CORP_LIST } from './SharedData';
import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
import { createIcons, X, Save, History, Plus } from 'lucide';
import { createIcons, X, Save, Database, CalendarClock, Edit2, History, Plus } from 'lucide';
import { formatExcelDate } from '../../core/excelHandler';
import { UI_TEXT } from '../../core/schema';
@@ -16,18 +16,15 @@ class DomainAssetModal extends BaseModal {
<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="닫기">&times;</button>
<h2 id="domain-modal-title">${this.title}</h2>
<button id="btn-close-domain-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></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" />
<div class="form-section-title">기본 정보</div>
<div class="form-group">
<label>구분</label>
@@ -61,7 +58,7 @@ class DomainAssetModal extends BaseModal {
</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, ',')" />
<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>
@@ -81,9 +78,9 @@ class DomainAssetModal extends BaseModal {
</div>
<div class="modal-history-area">
<div class="history-header">
<h3><i data-lucide="history"></i> 변경 이력</h3>
<h3><i data-lucide="history" style="width:16px; height:16px;"></i> 변경 이력</h3>
<button type="button" id="btn-add-domain-log" class="btn btn-outline btn-sm">
이력 추가 <i data-lucide="plus"></i>
이력 추가 <i data-lucide="plus" style="width:14px; height:14px;"></i>
</button>
</div>
<div id="domain-history-list" class="history-timeline"></div>
@@ -144,7 +141,7 @@ class DomainAssetModal extends BaseModal {
}
});
createIcons({ icons: { History, Plus, Save, X } });
createIcons({ icons: { History, Plus, Save, CalendarClock, Database } });
}
protected fillFormData(asset: any): void {
@@ -161,52 +158,31 @@ class DomainAssetModal extends BaseModal {
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;
}
const type = getFieldValue('domain-type') || asset.type || '';
const serviceName = getFieldValue('domain-service-name') || asset.service_name || '';
const domainName = getFieldValue('domain-name') || asset.domain_name || '';
container.innerHTML = `
<span class="asset-code-title">${serviceName}</span>
<span class="service-type-badge">${type}</span>
<span class="asset-type-label">${domainName}</span>
`;
}
private renderHistory(assetId: string) {
const container = document.getElementById('domain-history-list');
if (!container) return;
const logs = (state.masterData.logs || []).filter(l => l.asset_id === assetId);
if (logs.length === 0) {
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('');
}
const logs = (state.masterData.logs || []).filter(l => l.assetId === assetId);
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 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); }
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);
}

718
src/components/Modal/HWModal.ts
View File

File diff suppressed because it is too large Load Diff

155
src/components/Modal/JobSpecModal.ts
View File

@@ -10,94 +10,97 @@ class JobSpecModal extends BaseModal {
}
protected renderFrameHTML(): string {
const sharedStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0;';
const inputStyle = sharedStyle;
return `
<div id="job-spec-asset-modal" class="modal-overlay hidden">
<div class="modal-content narrow">
<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;
}
.hidden {
display: none !important;
}
</style>
<div class="modal-content" style="max-width: 500px; width: 100%;">
<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="닫기">&times;</button>
<h2 id="job-spec-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">\${this.title}</h2>
<button id="btn-close-job-spec-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">&times;</button>
</div>
<div class="modal-body">
<form id="job-spec-asset-form" class="grid-form vertical-form">
<div class="modal-body" style="padding: 24px; overflow-y: auto;">
<form id="job-spec-asset-form" class="grid-form" style="display: flex; flex-direction: column; gap: 16px;">
<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 class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">직무명</label>
<input type="text" id="job-spec-job-name" name="job_name" placeholder="예: BIM 모델러, 개발자, 엔지니어" required style="\${inputStyle} width: 100%;" />
</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 class="form-group" style="display: flex; flex-direction: column; gap: 6px; position: relative;">
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 CPU 사양</label>
<input type="text" id="job-spec-cpu-standard" name="cpu_standard" placeholder="CPU 검색..." required style="\${inputStyle} width: 100%;" 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 class="form-group" style="display: flex; flex-direction: column; gap: 6px; position: relative;">
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 RAM 사양</label>
<input type="text" id="job-spec-ram-standard" name="ram_standard" placeholder="RAM 검색..." required style="\${inputStyle} width: 100%;" 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 class="form-group" style="display: flex; flex-direction: column; gap: 6px; position: relative;">
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 GPU 사양</label>
<input type="text" id="job-spec-gpu-standard" name="gpu_standard" placeholder="GPU 검색..." required style="\${inputStyle} width: 100%;" 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 class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">성능 기준 점수 (이상, 자동 계산됨)</label>
<input type="number" id="job-spec-min-score" name="min_score" placeholder="자동 계산 대기..." required style="\${inputStyle} width: 100%;" readonly />
</div>
<div class="form-group">
<label>비고 (메모)</label>
<textarea id="job-spec-remarks" name="remarks" placeholder="기타 필요 사양 및 안내 사항" rows="3"></textarea>
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">비고 (메모)</label>
<textarea id="job-spec-remarks" name="remarks" placeholder="기타 필요 사양 및 안내 사항" style="box-sizing: border-box !important; font-size: 13px; margin: 0; min-height: 80px; width: 100%; padding: 8px; border: 1px solid var(--border-color); border-radius: 4px; resize: vertical;"></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 class="modal-footer" style="display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #f8fafc; border-top: 1px solid var(--border-color);">
<button id="btn-delete-job-spec-asset" class="btn btn-outline btn-danger" style="height: 42px;">삭제</button>
<div class="footer-actions" style="display: flex; gap: 8px;">
<button id="btn-revert-job-spec-edit" class="btn btn-outline hidden" style="height: 42px;">수정 취소</button>
<button id="btn-cancel-job-spec-modal" class="btn btn-outline" style="height: 42px;">닫기</button>
<button id="btn-save-job-spec-asset" class="btn btn-primary" style="height: 42px;">수정</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>
`;
}
@@ -236,7 +239,6 @@ class JobSpecModal extends BaseModal {
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 {
@@ -255,32 +257,19 @@ class JobSpecModal extends BaseModal {
deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
if (mode === 'add' || mode === 'edit') {
saveBtn.textContent = (mode === 'add') ? '등록' : '저장';
if (mode === 'add') {
this.setEditLockMode('edit');
this.isEditMode = true;
saveBtn.textContent = '등록';
saveBtn.style.display = 'block';
} else {
this.setEditLockMode('view');
this.isEditMode = false;
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>
`;
this.updateMinScore();
}
}

46
src/components/Modal/ModalUtils.ts
View File

@@ -110,45 +110,29 @@ export function setEditLock(
const generateBtn = options.generateBtnId ? document.getElementById(options.generateBtnId) : null;
const addLogBtn = options.addLogBtnId ? document.getElementById(options.addLogBtnId) : null;
if (!form) return;
if (!form || !saveBtn || !revertBtn) return;
const isEdit = (mode === 'add' || mode === 'edit');
if (isEdit) {
if (mode === 'add' || mode === 'edit') {
// 편집 모드 활성화
form.classList.remove('is-view-mode');
form.classList.add('is-edit-mode');
if (saveBtn) saveBtn.textContent = (mode === 'add' ? '등록' : '저장');
if (revertBtn) revertBtn.classList.toggle('hidden', mode === 'add');
saveBtn.textContent = '저장';
revertBtn.classList.toggle('hidden', mode === 'add'); // 신규 추가 시에는 취소 버튼 숨김
// 모든 필드 활성화
const inputs = form.querySelectorAll('input, select, textarea');
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');
// 번호 생성 버튼은 '추가(add)' 시에만 노출
if (generateBtn) {
generateBtn.style.display = mode === 'add' ? 'flex' : 'none';
}
// 내역 추가 버튼 노출
if (addLogBtn) addLogBtn.style.display = 'flex';
} else {
// 조회 모드 (잠금)
form.classList.remove('is-edit-mode');
form.classList.add('is-view-mode');
if (saveBtn) saveBtn.textContent = '수정';
if (revertBtn) revertBtn.classList.add('hidden');
saveBtn.textContent = '수정';
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 (addLogBtn) addLogBtn.style.display = 'none';
}
@@ -185,9 +169,9 @@ export function createModalFrameHTML(
</div>
<div class="modal-history-area">
<div class="history-header">
<h3><i data-lucide="history" class="icon-sm"></i> ${options.historyTitle}</h3>
<button type="button" id="btn-add-${idPrefix}-log" class="btn btn-outline btn-sm">
내역 추가 <i data-lucide="plus" class="icon-sm"></i>
<h3><i data-lucide="history" style="width:16px; height:16px;"></i> ${options.historyTitle}</h3>
<button type="button" id="${options.addLogBtnId}" class="btn btn-outline btn-sm">
내역 추가 <i data-lucide="plus" style="width:14px; height:14px;"></i>
</button>
</div>
<div id="${idPrefix}-history-list" class="history-timeline"></div>

312
src/components/Modal/PCFlowModal.ts
View File

@@ -4,10 +4,10 @@ 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;
@@ -30,7 +30,7 @@ export class PCFlowModal {
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) {
@@ -59,19 +59,14 @@ export class PCFlowModal {
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));
});
}
if (radioCheckout) radioCheckout.checked = true;
// 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 = '';
@@ -99,7 +94,7 @@ export class PCFlowModal {
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();
@@ -109,16 +104,16 @@ export class PCFlowModal {
// 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) =>
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))
@@ -138,7 +133,7 @@ export class PCFlowModal {
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
@@ -166,16 +161,16 @@ export class PCFlowModal {
// 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) =>
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))
@@ -202,7 +197,7 @@ export class PCFlowModal {
// 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();
@@ -210,11 +205,11 @@ export class PCFlowModal {
const pcs = state.masterData.pc || [];
const filtered = pcs.filter((p: any) => {
const status = (p.hw_status || '').trim();
const matchesQuery = !query ||
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;
});
@@ -314,17 +309,21 @@ export class PCFlowModal {
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.innerHTML = '<div style="padding: 10px; color: var(--text-muted); font-size: 13px;">일치하는 사원이 없습니다.</div>';
container.classList.remove('hidden');
return;
}
users.forEach(u => {
const item = document.createElement('div');
item.className = 'autocomplete-item';
item.style.padding = '8px 12px';
item.style.cursor = 'pointer';
item.style.fontSize = '13px';
item.style.borderBottom = '1px solid #F3F4F6';
item.className = 'suggestion-item';
item.innerHTML = `
<div class="suggestion-name">${u.user_name}</div>
<div class="suggestion-meta">
<div style="font-weight: 700; color: var(--text-main);">${u.user_name}</div>
<div style="font-size: 11px; color: var(--text-muted); display: flex; gap: 8px;">
<span>부서: ${u.dept_name}</span>
<span>|</span>
<span>사번: ${u.emp_no || '-'}</span>
@@ -339,17 +338,21 @@ export class PCFlowModal {
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.innerHTML = '<div style="padding: 10px; color: var(--text-muted); font-size: 13px;">불출 가능한 대기 PC 재고가 없습니다.</div>';
container.classList.remove('hidden');
return;
}
pcs.forEach(p => {
const item = document.createElement('div');
item.className = 'autocomplete-item';
item.style.padding = '8px 12px';
item.style.cursor = 'pointer';
item.style.fontSize = '13px';
item.style.borderBottom = '1px solid #F3F4F6';
item.className = 'suggestion-item';
item.innerHTML = `
<div class="suggestion-name">${p.asset_code} (${p.model_name || '모델명 없음'})</div>
<div class="suggestion-meta">
<div style="font-weight: 700; color: var(--primary-color);">${p.asset_code} (${p.model_name || '모델명 없음'})</div>
<div style="font-size: 11px; color: var(--text-muted);">
사양: CPU ${p.cpu || '-'} / RAM ${p.ram || '-'} / 위치: ${p.location || '-'}
</div>
`;
@@ -424,20 +427,20 @@ export class PCFlowModal {
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) =>
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>';
userPcsList.innerHTML = '<div style="font-size: 12px; color: var(--text-muted); padding: 8px 0;">이 사용자가 소유한 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">
<div class="user-pc-item ${isSelected ? 'selected' : ''}" data-id="${p.id}" style="padding: 10px; border: 1px solid ${isSelected ? 'var(--primary-color)' : 'var(--border-color)'}; border-radius: 4px; cursor: pointer; background: ${isSelected ? 'var(--primary-light)' : 'white'}; transition: all 0.2s;">
<div style="font-weight: 700; font-size: 13px; color: ${isSelected ? 'var(--primary-color)' : 'var(--text-main)'};">${p.asset_code}</div>
<div style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">
${p.model_name || '모델명 없음'} | CPU: ${p.cpu || '-'} | RAM: ${p.ram || '-'}
</div>
</div>
@@ -462,132 +465,159 @@ export class PCFlowModal {
}
private renderHTML(): string {
const overlayStyle = `
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center;
z-index: 1000; transition: opacity 0.3s;
`;
const contentStyle = `
background: white; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
overflow: hidden; max-height: 90vh; width: 950px; display: flex; flex-direction: column;
`;
const labelStyle = 'display: block; font-size: 13px; font-weight: 700; color: var(--text-muted); margin-bottom: 8px;';
const inputStyle = 'width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 13px; outline: none; box-sizing: border-box;';
const inputWithIconStyle = 'width: 100%; height: 38px; padding: 0 12px 0 36px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 13px; outline: none; box-sizing: border-box;';
return `
<div id="pc-flow-modal" class="modal-overlay hidden">
<div class="modal-content wide">
<div class="modal-header">
<h2 class="modal-title">
<div id="pc-flow-modal" class="modal-overlay hidden" style="${overlayStyle}">
<div class="modal-content" style="${contentStyle}">
<div class="modal-header" style="background: var(--primary-color); padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color);">
<h2 style="margin: 0; font-size: 18px; font-weight: 800; color: white; display: flex; align-items: center; gap: 8px;">
<i data-lucide="refresh-cw"></i> PC 이동/반납 (불출/반납/이동)
</h2>
<button id="btn-close-pc-flow-modal" class="btn-icon" aria-label="닫기">&times;</button>
<button id="btn-close-pc-flow-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">&times;</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 class="modal-body" style="padding: 24px; overflow-y: auto; display: flex; gap: 24px;">
<!-- 왼쪽 영역: 입력 폼 -->
<div style="flex: 1.2; display: flex; flex-direction: column; gap: 20px;">
<!-- 1. 처리 유형 -->
<div>
<label style="${labelStyle}">1. 처리 유형 선택</label>
<div style="display: flex; gap: 12px;">
<label class="flow-type-label active" style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;">
<input type="radio" name="flow-type" value="checkout" checked style="display:none;" />
불출 (지급)
</label>
<label class="flow-type-label" style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;">
<input type="radio" name="flow-type" value="return" style="display:none;" />
입고 (반납)
</label>
<label class="flow-type-label" style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;">
<input type="radio" name="flow-type" value="move" style="display:none;" />
이동 (이관)
</label>
</div>
</div>
<!-- 오른쪽 영역: 선택 요약 & 사원 소유 자산 목록 -->
<div class="modal-history-area">
<div class="history-header">
<h3>선택 내역 요약</h3>
<!-- 2. 대상 사용자 검색 -->
<div style="position: relative;">
<label id="user-search-label" style="${labelStyle}">2. 대상 사원 검색</label>
<div style="position: relative; display: flex; align-items: center;">
<input type="text" id="pc-flow-user-search" placeholder="사원명, 부서, 사번 검색..." style="${inputWithIconStyle}" />
<i data-lucide="search" style="position: absolute; left: 10px; width: 16px; height: 16px; color: var(--text-muted);"></i>
</div>
<div id="pc-flow-user-suggestions" class="hidden" style="position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: white; border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1000; margin-top: 4px;"></div>
</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>
<!-- 3. 새 인수자 검색 (이동 시 노출) -->
<div id="target-user-search-container" class="hidden" style="position: relative;">
<label style="${labelStyle}">새 인수 사원 검색</label>
<div style="position: relative; display: flex; align-items: center;">
<input type="text" id="pc-flow-target-user-search" placeholder="사원명, 부서, 사번 검색..." style="${inputWithIconStyle}" />
<i data-lucide="search" style="position: absolute; left: 10px; width: 16px; height: 16px; color: var(--text-muted);"></i>
</div>
<div id="pc-flow-target-user-suggestions" class="hidden" style="position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: white; border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1000; margin-top: 4px;"></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>
<!-- 4. 재고 PC 검색 (불출 시 노출) -->
<div id="stock-pc-search-container" style="position: relative;">
<label style="${labelStyle}">3. 불출할 재고 PC 선택</label>
<div style="position: relative; display: flex; align-items: center;">
<input type="text" id="pc-flow-stock-search" placeholder="자산코드 또는 모델명 검색..." style="${inputWithIconStyle}" />
<i data-lucide="monitor" style="position: absolute; left: 10px; width: 16px; height: 16px; color: var(--text-muted);"></i>
</div>
<div id="pc-flow-stock-suggestions" class="hidden" style="position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: white; border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1000; margin-top: 4px;"></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>
<!-- 5. 상세 공통 입력 -->
<div style="display: flex; gap: 16px;">
<div style="flex: 1;">
<label style="${labelStyle.replace('margin-bottom: 8px;', 'margin-bottom: 6px;')}">처리 일자</label>
<input type="date" id="pc-flow-date" style="${inputStyle}" />
</div>
<div style="flex: 2;">
<label style="${labelStyle.replace('margin-bottom: 8px;', 'margin-bottom: 6px;')}">상세 사유</label>
<textarea id="pc-flow-details" rows="2" placeholder="미입력 시 기본 문구로 자동 입력됩니다." style="width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 4px; font-family: inherit; font-size: 13px; resize: none; box-sizing: border-box; outline: none;"></textarea>
</div>
</div>
</div>
<!-- 오른쪽 영역: 선택 요약 & 사원 소유 자산 목록 -->
<div style="flex: 0.8; border-left: 1px solid var(--border-color); padding-left: 24px; display: flex; flex-direction: column; gap: 16px;">
<h3 style="margin: 0; font-size: 14px; font-weight: 800; border-bottom: 1px solid var(--border-color); padding-bottom: 8px;">선택 내역 요약</h3>
<!-- 사원 요약 카드 -->
<div id="summary-user-card" style="padding: 12px; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 6px; display: flex; flex-direction: column; gap: 4px;">
<div style="font-size: 11px; color: var(--text-muted);">대상 사원</div>
<div id="summary-user-name" style="font-weight: 700; font-size: 14px;">선택된 사원 없음</div>
<div id="summary-user-dept" style="font-size: 12px; color: var(--text-muted);">-</div>
</div>
<!-- 인수 사원 요약 카드 (이동 전용) -->
<div id="summary-target-user-card" class="summary-card hidden" style="padding: 12px; background: #EEF2F6; border: 1px solid var(--border-color); border-radius: 6px; display: flex; flex-direction: column; gap: 4px;">
<div style="font-size: 11px; color: var(--text-muted);">새 인수 사원</div>
<div id="summary-target-user-name" style="font-weight: 700; font-size: 14px;">선택된 사원 없음</div>
<div id="summary-target-user-dept" style="font-size: 12px; color: var(--text-muted);">-</div>
</div>
<!-- 대상 PC 자산 요약 카드 -->
<div id="summary-pc-card" style="padding: 12px; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 6px; display: flex; flex-direction: column; gap: 4px;">
<div style="font-size: 11px; color: var(--text-muted);">대상 PC 자산</div>
<div id="summary-pc-code" style="font-weight: 700; font-size: 14px; color: var(--primary-color);">선택된 PC 없음</div>
<div id="summary-pc-model" style="font-size: 12px; color: var(--text-muted);">-</div>
</div>
<!-- 사용자 보유 PC 목록 선택 (반납/이동 시) -->
<div id="user-pcs-container" class="hidden" style="display: flex; flex-direction: column; gap: 8px;">
<div style="font-size: 12px; font-weight: 700; color: var(--text-muted);">사원 보유 PC 선택 (클릭하여 매핑)</div>
<div id="user-pcs-list" style="display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto;"></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 class="modal-footer" style="padding: 16px 24px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 12px; background: var(--bg-light);">
<button id="btn-cancel-pc-flow-modal" class="btn btn-outline" style="height: 42px;">취소</button>
<button id="btn-submit-pc-flow" class="btn btn-primary" style="height: 42px;">이동/반납 처리 완료</button>
</div>
</div>
</div>
<style>
.flow-type-label {
transition: all 0.2s;
border-color: var(--border-color);
background: white;
color: var(--text-muted);
}
.flow-type-label:hover {
border-color: var(--primary-color);
color: var(--primary-color);
}
.flow-type-label.active {
border-color: var(--primary-color);
background: var(--primary-light);
color: var(--primary-color);
}
.suggestion-item:hover {
background-color: var(--primary-light) !important;
}
</style>
`;
}
}

109
src/components/Modal/PartsMasterModal.ts
View File

@@ -1,7 +1,7 @@
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 { createIcons, X, Save, Database, Edit2, Plus } from 'lucide';
import { UI_TEXT } from '../../core/schema';
class PartsMasterModal extends BaseModal {
@@ -10,51 +10,52 @@ class PartsMasterModal extends BaseModal {
}
protected renderFrameHTML(): string {
const sharedStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0;';
const inputStyle = sharedStyle;
const selectStyle = sharedStyle;
return `
<div id="parts-master-asset-modal" class="modal-overlay hidden">
<div class="modal-content narrow">
<div class="modal-content" style="max-width: 500px; width: 100%;">
<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="닫기">&times;</button>
<h2 id="parts-master-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">${this.title}</h2>
<button id="btn-close-parts-master-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">&times;</button>
</div>
<div class="modal-body">
<form id="parts-master-asset-form" class="grid-form vertical-form">
<div class="modal-body" style="padding: 24px; overflow-y: auto;">
<form id="parts-master-asset-form" class="grid-form" style="display: flex; flex-direction: column; gap: 16px;">
<input type="hidden" id="parts-master-id" name="id" />
<div class="form-group">
<label>부품 분류</label>
<select id="parts-master-category" name="category">
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">부품 분류</label>
<select id="parts-master-category" name="category" style="${selectStyle}">
<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 class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">부품 표준 명칭</label>
<input type="text" id="parts-master-component-name" name="component_name" placeholder="예: Intel Core i7-14700K" required style="${inputStyle} width: 100%;" />
</div>
<div class="form-group">
<label>성능 등급</label>
<input type="text" id="parts-master-score-tier" name="score_tier" placeholder="예: i7 / S / 최적" required />
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">성능 등급</label>
<input type="text" id="parts-master-score-tier" name="score_tier" placeholder="예: i7 / S / 최적" required style="${inputStyle} width: 100%;" />
</div>
<div class="form-group">
<label>감점 점수 (양수로 입력)</label>
<input type="number" id="parts-master-deduction" name="deduction" placeholder="예: 5" required />
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">감점 점수 (양수로 입력)</label>
<input type="number" id="parts-master-deduction" name="deduction" placeholder="예: 5" required style="${inputStyle} width: 100%;" />
</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 class="modal-footer" style="display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #f8fafc; border-top: 1px solid var(--border-color);">
<button id="btn-delete-parts-master-asset" class="btn btn-outline btn-danger" style="height: 42px;">삭제</button>
<div class="footer-actions" style="display: flex; gap: 8px;">
<button id="btn-revert-parts-master-edit" class="btn btn-outline hidden" style="height: 42px;">수정 취소</button>
<button id="btn-cancel-parts-master-modal" class="btn btn-outline" style="height: 42px;">닫기</button>
<button id="btn-save-parts-master-asset" class="btn btn-primary" style="height: 42px;">수정</button>
</div>
</div>
</div>
@@ -108,13 +109,11 @@ class PartsMasterModal extends BaseModal {
if (!this.currentAsset || !this.currentAsset.id) return;
if (!confirm('정말로 이 부품 마스터 정보를 삭제하시겠습니까?\n삭제 시 기존 등록 PC 중 이 부품명을 사용하는 PC의 자동완성 정합성 체크에 영향을 줄 수 있습니다.')) return;
if (await deletePartsMaster(Number(this.currentAsset.id))) {
if (await deletePartsMaster(this.currentAsset.id)) {
alert('성공적으로 삭제되었습니다.');
onSave(); this.close(); closeModals();
}
});
createIcons({ icons: { Plus, X, Save } });
}
protected fillFormData(asset: any): void {
@@ -123,49 +122,45 @@ class PartsMasterModal extends BaseModal {
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') ? '신규 부품 마스터 등록' : '부품 마스터 상세 편집';
if (mode === 'add') {
titleEl.textContent = '신규 부품 마스터 등록';
} else {
titleEl.textContent = '부품 마스터 상세 편집';
}
}
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') ? '등록' : '저장';
if (mode === 'add') {
this.setEditLockMode('edit');
this.isEditMode = true;
saveBtn.textContent = '등록';
saveBtn.style.display = 'block';
} else {
this.setEditLockMode('view');
this.isEditMode = false;
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); }
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);
}

115
src/components/Modal/SWModal.ts
View File

@@ -1,14 +1,14 @@
import { state, saveAsset, deleteAsset } from '../../core/state';
import { BaseModal } from './BaseModal';
import { openSwUserModal } from './SWUserModal';
import { createIcons, History, Plus, X, Save, RotateCcw, Calendar, Users } from 'lucide';
import { createIcons, History, Plus, X, Save, Edit2, RotateCcw, Calendar, Users } from 'lucide';
import { CORP_LIST } from './SharedData';
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
import { API_BASE_URL } from '../../core/utils';
import {
generateOptionsHTML,
setFieldValue,
getFieldValue,
import {
generateOptionsHTML,
setFieldValue,
getFieldValue,
applyDateMask
} from './ModalUtils';
@@ -22,18 +22,15 @@ class SwAssetModal extends BaseModal {
<div id="sw-asset-modal" class="modal-overlay hidden">
<div class="modal-content wide">
<div class="modal-header">
<div class="header-left">
<h2 id="sw-modal-title" class="modal-title">${this.title}</h2>
<div id="sw-header-identity" class="header-identity"></div>
</div>
<button id="btn-close-sw-modal" class="btn-icon" aria-label="닫기">&times;</button>
<h2 id="sw-modal-title">${this.title}</h2>
<button id="btn-close-sw-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
</div>
<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" />
<div class="form-section-title">기본 정보 (Identity)</div>
<div class="form-group">
<label>자산 유형</label>
@@ -84,7 +81,7 @@ class SwAssetModal extends BaseModal {
</div>
<div class="form-group sw-standard-field">
<label>${ASSET_SCHEMA.PURCHASE_AMOUNT.ui}</label>
<input type="text" id="sw-금액" name="purchase_amount" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" />
<input type="text" id="sw-금액" name="purchase_amount" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\\\B(?=(\\\\d{3})+(?!\\\\d))/g, ',')" />
</div>
<div class="form-group cloud-only">
@@ -103,12 +100,12 @@ class SwAssetModal extends BaseModal {
<div class="form-section-title">관리 및 비고</div>
<div class="form-group sw-standard-field">
<label>${ASSET_SCHEMA.PURCHASE_DATE.ui}</label>
<div class="input-with-btn">
<input type="text" id="sw-구매일" name="purchase_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>
<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>
<input type="date" id="sw-구매일-picker" class="hidden-picker" onchange="document.getElementById('sw-구매일').value = this.value" tabindex="-1" />
<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 class="form-group sw-standard-field">
@@ -129,12 +126,12 @@ class SwAssetModal extends BaseModal {
</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>
<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>
<input type="date" id="sw-만료일-picker" class="hidden-picker" onchange="document.getElementById('sw-만료일').value = this.value" tabindex="-1" />
<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 class="form-group full-width">
@@ -143,18 +140,18 @@ class SwAssetModal extends BaseModal {
</div>
</form>
<div id="sw-user-section" class="user-management-section">
<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"></i> 사용자 관리
<i data-lucide="users" style="width:16px; height:16px; margin-right:4px;"></i> 사용자 관리
</button>
</div>
</div>
<div class="modal-history-area">
<div class="history-header">
<h3><i data-lucide="history"></i> 업데이트 내역</h3>
<div class="history-header" style="display:flex; justify-content:space-between; align-items:center;">
<h3><i data-lucide="history" style="width:16px; height:16px;"></i> 업데이트 내역</h3>
<button type="button" id="btn-open-sw-update" class="btn btn-outline btn-sm">
계약 업데이트 <i data-lucide="rotate-ccw"></i>
계약 업데이트 <i data-lucide="refresh-ccw" style="width:14px; height:14px;"></i>
</button>
</div>
<div id="sw-history-list" class="history-timeline"></div>
@@ -173,24 +170,24 @@ class SwAssetModal extends BaseModal {
</div>
<!-- 계약 업데이트 서브 모달 -->
<div id="sw-update-modal" class="modal-overlay hidden sub-modal">
<div class="modal-content narrow">
<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 class="modal-title">계약 업데이트 반영</h2>
<button id="btn-close-sw-update" class="btn-icon">&times;</button>
<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 vertical-form">
<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 class="input-with-btn">
<input type="text" id="sw-update-start" placeholder="YYYY-MM-DD" />
<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" />
<input type="text" id="sw-update-end" placeholder="YYYY-MM-DD" style="flex: 1;" />
</div>
</div>
<div class="form-group">
@@ -212,15 +209,6 @@ class SwAssetModal extends BaseModal {
</div>
</div>
</div>
<style>
.hidden-picker {
position: absolute;
width: 0;
height: 0;
opacity: 0;
pointer-events: none;
}
</style>
`;
}
@@ -243,6 +231,7 @@ class SwAssetModal extends BaseModal {
if (this.currentAsset) openSwUserModal(this.currentAsset);
});
// 업데이트 모달 로직
const subModal = document.getElementById('sw-update-modal')!;
const closeUpdate = () => subModal.classList.add('hidden');
document.getElementById('btn-close-sw-update')?.addEventListener('click', closeUpdate);
@@ -289,7 +278,7 @@ class SwAssetModal extends BaseModal {
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(); }
});
@@ -333,32 +322,10 @@ class SwAssetModal extends BaseModal {
}
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;
}
const type = getFieldValue('sw-asset-type') || asset.asset_type || asset.type || '';
const name = getFieldValue('sw-제품명') || asset.product_name || '';
const corp = getFieldValue('sw-법인') || asset.purchase_corp || '';
container.innerHTML = `
<span class="asset-code-title">${name}</span>
<span class="service-type-badge">${corp}</span>
<span class="asset-type-label">${type}</span>
`;
}
private applySwTypeUI(type: string) {
@@ -387,12 +354,18 @@ class SwAssetModal extends BaseModal {
private renderHistory(swId: string) {
const container = document.getElementById('sw-history-list');
if (!container) return;
const logs = (state.masterData.logs || []).filter(l => l.asset_id === swId);
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.log_date || ''}</div><div class="history-user">${l.log_user || '시스템'}</div><div class="history-details">${l.details}</div></div>`).join('');
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 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); }
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);
}

91
src/components/Modal/SWUserModal.ts
View File

@@ -16,15 +16,15 @@ class SwUserModal extends BaseModal {
<div id="sw-user-asset-modal" class="modal-overlay hidden">
<div class="modal-content wide">
<div class="modal-header">
<h2 id="sw-user-title" class="modal-title">${this.title}</h2>
<button id="btn-close-sw-user-modal" class="btn-icon" aria-label="닫기">&times;</button>
<h2 id="sw-user-title">${this.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="flex justify-between items-center mb-4">
<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 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">
@@ -35,9 +35,9 @@ class SwUserModal extends BaseModal {
<th>부서</th>
<th>직위</th>
<th>이름</th>
<th class="text-center">사용기간</th>
<th class="text-center">신청서</th>
<th class="text-center">관리</th>
<th>사용기간</th>
<th>신청서</th>
<th>관리</th>
</tr>
</thead>
<tbody id="sw-user-table-body"></tbody>
@@ -54,14 +54,14 @@ class SwUserModal extends BaseModal {
</div>
<!-- 사용자 추가/수정 서브 모달 -->
<div id="sw-user-edit-modal" class="modal-overlay hidden sub-modal">
<div class="modal-content narrow">
<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" class="modal-title">사용자 정보</h3>
<button id="btn-close-user-edit" class="btn-icon">&times;</button>
<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 vertical-form">
<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>
@@ -81,22 +81,22 @@ class SwUserModal extends BaseModal {
</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>
<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" class="hidden-picker" onchange="document.getElementById('new-user-시작일').value = this.value" tabindex="-1" />
<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 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>
<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" class="hidden-picker" onchange="document.getElementById('new-user-종료일').value = this.value" tabindex="-1" />
<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">
@@ -111,15 +111,6 @@ class SwUserModal extends BaseModal {
</div>
</div>
</div>
<style>
.hidden-picker {
position: absolute;
width: 0;
height: 0;
opacity: 0;
pointer-events: none;
}
</style>
`;
}
@@ -149,9 +140,10 @@ class SwUserModal extends BaseModal {
onSave(); this.close(); closeModals();
});
// 닫기 이벤트들 (BaseModal의 공통 버튼 외 추가분)
document.getElementById('btn-close-sw-user-modal')?.addEventListener('click', () => this.close());
document.getElementById('btn-cancel-sw-user')?.addEventListener('click', () => this.close());
const subModal = document.getElementById('sw-user-edit-modal')!;
const closeSub = () => subModal.classList.add('hidden');
document.getElementById('btn-close-user-edit')?.addEventListener('click', closeSub);
@@ -163,9 +155,9 @@ class SwUserModal extends BaseModal {
protected fillFormData(asset: any): void {
const swInfo = document.getElementById('sw-user-sw-info')!;
swInfo.innerHTML = `
<div class="sw-info-header border-b border-hairline pb-4 mb-6">
<div class="detail-label-sm">${asset.purchase_corp || asset.법인 || ''}</div>
<div class="asset-code-title">${asset.product_name || asset.제품명 || ''}</div>
<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.purchase_corp || asset.법인 || ''}</div>
<div style="font-size:1.1rem; font-weight:700; color:var(--primary-color);">${asset.product_name || asset.제품명 || ''}</div>
</div>
`;
@@ -173,7 +165,7 @@ class SwUserModal extends BaseModal {
this.tempSwUsers = existingMapping ? (existingMapping.userData || []).map((u: any) => ({
조직: u[0], 부서: u[1], 직위: u[2], 이름: u[3], 사용기간: u[4], 신청서명: u[5]
})) : [];
this.renderUserList();
}
@@ -181,10 +173,9 @@ class SwUserModal extends BaseModal {
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>';
tbody.innerHTML = '<tr><td colspan="7" style="text-align:center; padding:2rem; color:var(--text-muted);">할당된 사용자가 없습니다.</td></tr>';
return;
}
@@ -195,12 +186,12 @@ class SwUserModal extends BaseModal {
<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">
<td>${user.사용기간 || ''}</td>
<td style="text-align:center;">${user.신청서명 ? '<i data-lucide="paperclip" class="text-primary"></i>' : '-'}</td>
<td>
<div style="display:flex; gap:0.5rem;">
<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}">&times;</button>
<button class="btn btn-outline btn-sm btn-danger btn-del-user" data-idx="${idx}">삭제</button>
</div>
</td>
`;
@@ -266,5 +257,11 @@ class SwUserModal extends BaseModal {
}
export const swUserModal = new SwUserModal();
export function initSwUserModal(onSave: () => void, closeModals: () => void) { swUserModal.init(onSave, closeModals); }
export function openSwUserModal(asset: any) { swUserModal.open(asset); }
export function initSwUserModal(onSave: () => void, closeModals: () => void) {
swUserModal.init(onSave, closeModals);
}
export function openSwUserModal(asset: any) {
swUserModal.open(asset);
}

111
src/components/Modal/UserModal.ts
View File

@@ -10,55 +10,55 @@ class UserModal extends BaseModal {
}
protected renderFrameHTML(): string {
const sharedStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0;';
const inputStyle = sharedStyle;
return `
<div id="user-asset-modal" class="modal-overlay hidden">
<div class="modal-content narrow">
<div class="modal-content" style="max-width: 500px; width: 100%;">
<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="닫기">&times;</button>
<h2 id="user-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">\${this.title}</h2>
<button id="btn-close-user-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">&times;</button>
</div>
<div class="modal-body">
<form id="user-asset-form" class="grid-form vertical-form">
<div class="modal-body" style="padding: 24px; overflow-y: auto;">
<form id="user-asset-form" class="grid-form" style="display: flex; flex-direction: column; gap: 16px;">
<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 class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">사번</label>
<input type="text" id="user-emp-no" name="emp_no" placeholder="예: HM202601" required style="\${inputStyle} width: 100%;" />
</div>
<div class="form-group">
<label>사용자명</label>
<input type="text" id="user-name-input" name="user_name" placeholder="예: 홍길동" required />
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">사용자명</label>
<input type="text" id="user-name-input" name="user_name" placeholder="예: 홍길동" required style="\${inputStyle} width: 100%;" />
</div>
<div class="form-group">
<label>사용조직 (부서)</label>
<input type="text" id="user-dept" name="dept_name" placeholder="예: 기술개발센터" required />
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">사용조직 (부서)</label>
<input type="text" id="user-dept" name="dept_name" placeholder="예: 기술개발센터" required style="\${inputStyle} width: 100%;" />
</div>
<div class="form-group">
<label>직무 (직급)</label>
<input type="text" id="user-position-input" name="position" placeholder="예: BIM모델러" required />
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">직무 (직급)</label>
<input type="text" id="user-position-input" name="position" placeholder="예: BIM모델러" required style="\${inputStyle} width: 100%;" />
</div>
<div class="form-group">
<label>상태</label>
<select id="user-status" name="status">
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">상태</label>
<select id="user-status" name="status" style="\${sharedStyle}">
<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 class="modal-footer" style="display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #f8fafc; border-top: 1px solid var(--border-color);">
<button id="btn-delete-user-asset" class="btn btn-outline btn-danger" style="height: 42px;">삭제</button>
<div class="footer-actions" style="display: flex; gap: 8px;">
<button id="btn-revert-user-edit" class="btn btn-outline hidden" style="height: 42px;">수정 취소</button>
<button id="btn-cancel-user-modal" class="btn btn-outline" style="height: 42px;">닫기</button>
<button id="btn-save-user-asset" class="btn btn-primary" style="height: 42px;">수정</button>
</div>
</div>
</div>
@@ -119,8 +119,6 @@ class UserModal extends BaseModal {
onSave(); this.close(); closeModals();
}
});
createIcons({ icons: { Save, X } });
}
protected fillFormData(asset: any): void {
@@ -130,51 +128,44 @@ class UserModal extends BaseModal {
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') ? '신규 임직원 등록' : '임직원 정보 수정';
if (mode === 'add') {
titleEl.textContent = '신규 임직원 등록';
} else {
titleEl.textContent = '임직원 정보 수정';
}
}
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' ? '등록' : '저장';
if (mode === 'add') {
this.setEditLockMode('edit');
this.isEditMode = true;
saveBtn.textContent = '등록';
saveBtn.style.display = 'block';
} else {
this.setEditLockMode('view');
this.isEditMode = false;
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); }
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
View File

@@ -1,594 +0,0 @@
/* 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;
}

127
src/components/Navigation.ts
View File

@@ -24,96 +24,93 @@ const MENU_CONFIG: any = {
};
export function renderNavigation(onTabChange: (tab: string) => void) {
const header = document.querySelector('.main-header') as HTMLElement;
const headerContainer = document.querySelector('.header-container')!;
if (!headerContainer) return;
const navContainer = document.getElementById('main-nav')!;
const render = () => {
// 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>
<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')!;
navContainer.innerHTML = '';
// 2. GNB 메뉴 렌더링 (Ghost Tab Style)
Object.keys(MENU_CONFIG).forEach(catKey => {
// 기존 메뉴 렌더링
(Object.keys(MENU_CONFIG) as Array<keyof typeof MENU_CONFIG>).forEach(catKey => {
const config = MENU_CONFIG[catKey];
// 역할에 따라 노출할 서브탭 필터링
const visibleTabs = config.tabs.filter((tab: string) => {
if (state.currentUserRole === 'admin') return tab === '대시보드';
return tab !== '대시보드';
if (state.currentUserRole === 'admin') {
// 관리자(admin)일 경우 대시보드 탭만 노출
return tab === '대시보드';
} else {
// 실무자(user)일 경우 대시보드 제외한 모든 탭 노출
return tab !== '대시보드';
}
});
if (visibleTabs.length === 0) return;
// 노출할 서브탭이 없으면 해당 대분류 GNB 메뉴도 렌더링하지 않음
if (visibleTabs.length === 0) {
return;
}
const isActive = state.activeCategory === catKey;
const group = document.createElement('div');
group.className = `nav-group ${isActive ? 'active is-showing-shelf' : ''}`;
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 = visibleTabs[0] || config.tabs[0];
state.activeSubTab = firstTab;
render();
onTabChange(firstTab);
}
});
group.appendChild(trigger);
const shelf = document.createElement('div');
shelf.className = 'lnb-shelf';
visibleTabs.forEach((tab: string) => {
if (tab === '부품 마스터') return;
if (tab === '부품 마스터') return; // 메뉴바에서 표시 생략
const item = document.createElement('div');
const isActive = state.activeSubTab === tab;
item.className = `gnb-trigger ${isActive ? 'active' : ''}`;
item.className = `lnb-item ${isActive && state.activeSubTab === tab ? 'active' : ''}`;
item.textContent = tab;
item.style.fontSize = 'var(--fs-sm)'; // Ensure small but standard font
item.addEventListener('click', (e) => {
e.stopPropagation();
state.activeCategory = catKey as any;
state.activeSubTab = tab;
render();
render();
onTabChange(tab);
});
navList.appendChild(item);
shelf.appendChild(item);
});
group.appendChild(shelf);
navContainer.appendChild(group);
});
// 3. 관리자 전용 '관리도구'
// ─── '관리자' 메뉴 별도 추가 (GNB 스타일 - 관리자 역할일 때만 노출) ───
if (state.currentUserRole === 'admin') {
const adminGroup = document.createElement('div');
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);
adminTrigger.className = 'gnb-trigger';
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', () => {
window.open('/map_editor.html', '_blank');
});
adminGroup.appendChild(adminTrigger);
navContainer.appendChild(adminGroup);
}
// 4. 이벤트 바인딩
document.getElementById('btn-home-logo')?.addEventListener('click', () => location.reload());
const roleToggle = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
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);
});
// 아이콘 생성
// @ts-ignore
if (window.lucide) window.lucide.createIcons();
};
render();

10695
src/core/dummyData.ts Normal file
View File

File diff suppressed because it is too large Load Diff

264
src/core/excelHandler.ts
View File

@@ -1,7 +1,218 @@
import * as XLSX from 'xlsx';
import { ASSET_SCHEMA } from './schema';
/**
* ITAM 엑셀 핸들러 (지정 날짜 포맷팅 유틸리티)
* ITAM 엑셀 핸들러 (Database Synchronized Edition)
* 데이터베이스 실제 스키마 컬럼과 엑셀 헤더를 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;
asset_id?: string;
date?: string;
log_date?: string;
created_at?: string;
details: string;
user?: string;
log_user?: string;
event_type?: 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 {
if (!val) return '';
if (typeof val === 'number') {
@@ -13,3 +224,54 @@ export function formatExcelDate(val: any): string {
}
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);
});
}

34
src/core/filterHandler.ts
View File

@@ -1,4 +1,5 @@
import { ASSET_SCHEMA, UI_TEXT } from './schema';
import { getActionButtonsHTML } from './utils';
import { generateOptionsHTML } from '../components/Modal/ModalUtils';
import { CORP_LIST } from '../components/Modal/SharedData';
@@ -18,14 +19,6 @@ export interface FilterOptions {
extraHTML?: string;
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) {
@@ -39,18 +32,9 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
showStatus = false,
extraHTML = '',
onFilterChange,
initialFilters = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '', status: '' },
fullList = []
initialFilters = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '', status: '' }
} = 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 = `
<div class="search-item flex-1">
<label>${keywordLabel}</label>
@@ -61,7 +45,6 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
<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 ? `
@@ -69,7 +52,6 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
<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 ? `
@@ -91,22 +73,16 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
${showLoc ? `
<div class="search-item">
<label>${ASSET_SCHEMA.LOCATION.ui}</label>
<select id="filter-loc">
<option value="">전체 위치</option>
${getUnique('LOCATION').map(v => `<option value="${v}" ${initialFilters.loc === v ? 'selected' : ''}>${v}</option>`).join('')}
</select>
<select id="filter-loc"><option value="">전체 위치</option></select>
</div>` : ''}
${showDept ? `
<div class="search-item">
<label>${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
<select id="filter-dept">
<option value="">전체 조직</option>
${getUnique('CURRENT_DEPT').map(v => `<option value="${v}" ${initialFilters.dept === v ? 'selected' : ''}>${v}</option>`).join('')}
</select>
<select id="filter-dept"><option value="">전체 조직</option></select>
</div>` : ''}
${extraHTML}
<button id="btn-reset-filters" class="btn btn-outline btn-reset">
<i data-lucide="refresh-ccw" class="icon-sm"></i> ${UI_TEXT.ACTION.RESET_FILTER}
<i data-lucide="refresh-ccw"></i> ${UI_TEXT.ACTION.RESET_FILTER}
</button>
${getActionButtonsHTML()}
`;

1603
src/core/realServerData.ts Normal file
View File

File diff suppressed because it is too large Load Diff

51
src/core/state.ts
View File

@@ -1,7 +1,41 @@
import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog, MasterAssetData, SystemUser } from './types';
import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog } from './excelHandler';
import { API_BASE_URL } from './utils';
import { dummyPCs, dummyServers, dummyStorages, dummyEquips, dummySubSw, dummyPermSw, dummyCloud, dummyDomain, dummySwUsers, dummyLogs } from './dummyData';
// --- State Definitions ---
export interface MasterAssetData {
users: any[];
pc: any[];
server: any[];
storage: any[];
network: any[];
survey: any[];
pcParts: any[];
partsMaster: 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
jobSpecs?: any[];
// Backward compatibility
subSw: any[];
permSw: any[];
swUsers: SWUser[];
logs: HardwareLog[];
// 통합 배열
hw: any[];
sw: any[];
}
export interface AppState {
activeCategory: 'dashboard' | 'hw' | 'sw' | 'ops' | 'vip' | 'fac' | 'users' | 'etc';
activeSubTab: string;
@@ -23,18 +57,16 @@ export const state: AppState = {
masterData: {
users: [],
pc: [], server: [], storage: [], network: [],
survey: [], pcParts: [], partsMaster: [], equipment: [], officeSupplies: [],
survey: [], pcParts: [], partsMaster: [], equipment: [], officeSupplies: [],
swInternal: [], swExternal: [], cloud: [], domain: [],
cost: [], vip: [],
subSw: [], permSw: [],
hw: [], sw: [],
swUsers: [], logs: [],
jobSpecs: [],
mobile: []
jobSpecs: []
}
};
(window as any).__itam_state = state;
/**
* 통합 V2 스키마에 맞춘 데이터 로드
*/
@@ -61,9 +93,9 @@ export async function loadMasterDataFromDB() {
};
// Mapping for backward compatibility
(state.masterData as any).equip = state.masterData.equipment;
(state.masterData as any).subSw = state.masterData.swExternal;
(state.masterData as any).permSw = state.masterData.swInternal;
state.masterData.equip = state.masterData.equipment;
state.masterData.subSw = state.masterData.swExternal;
state.masterData.permSw = state.masterData.swInternal;
// 하드웨어 통합 (대시보드 호환용)
state.masterData.hw = [
@@ -234,3 +266,4 @@ export async function deleteJobSpec(id: number) {
}
return false;
}

155
src/core/types.ts
View File

@@ -1,155 +0,0 @@
/**
* 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[];
}

78
src/main.ts
View File

@@ -1,5 +1,3 @@
import './styles/common.css';
import './styles/login.css';
import { state, loadMasterDataFromDB, saveAsset } from './core/state';
import { renderNavigation } from './components/Navigation';
import { renderDashboard } from './views/DashboardView';
@@ -21,28 +19,43 @@ import { createIcons, Plus, X, LayoutDashboard, Monitor, Server, Database, Lapto
// 화면 갱신 통합 핸들러
function refreshView(tab?: string) {
function refreshView() {
const mainContent = document.getElementById('main-content')!;
if (!mainContent) return;
const activeTab = tab || state.activeSubTab;
if (activeTab === '대시보드') {
if (state.activeSubTab === '대시보드') {
renderDashboard(mainContent);
return;
}
// 서버 탭이 아닐 경우에는 state.viewMode가 location이더라도 강제로 목록(list) 뷰를 그리도록 함
// (state.viewMode의 원래 상태는 보존하여, 서버 탭 복귀 시 최근 보던 모드를 유지함)
const isServerTab = activeTab === '서버';
const effectiveViewMode = isServerTab ? state.viewMode : 'list';
// 서버 탭이 아닐 경우 '자산현황(위치)' 뷰 진입 방지 및 강제 리스트 모드 전환
if (state.activeSubTab !== '서버' && state.viewMode === 'location') {
state.viewMode = 'list';
}
const isServerTab = state.activeSubTab === '서버';
mainContent.innerHTML = `
<div id="view-body" class="view-container"></div>
<div class="view-header">
<div class="view-toggle-container" style="${isServerTab ? '' : 'display:none;'}">
<button class="mode-toggle-btn ${state.viewMode === 'location' ? 'active' : ''}" data-mode="location">자산현황(위치)</button>
<button class="mode-toggle-btn ${state.viewMode === 'list' ? 'active' : ''}" data-mode="list">자산목록</button>
</div>
</div>
<div id="view-body" style="flex: 1; overflow: hidden; display: flex; flex-direction: column;"></div>
`;
// 이벤트 바인딩
mainContent.querySelectorAll('.mode-toggle-btn').forEach(btn => {
btn.addEventListener('click', () => {
const mode = (btn as HTMLElement).getAttribute('data-mode') as any;
state.viewMode = mode;
refreshView();
});
});
const viewBody = document.getElementById('view-body')!;
if (effectiveViewMode === 'location') {
if (state.viewMode === 'location') {
renderLocationView(viewBody);
} else {
renderSWTable(viewBody); // 리스트 형식
@@ -86,7 +99,6 @@ function initApp() {
loadMasterDataFromDB().then((success) => {
if (success) {
refreshView();
initRoleSwitcher(); // [추가] 역할 전환 토글 초기화
}
});
} catch (e) { console.error('❌ Initialization failed:', e); }
@@ -156,6 +168,7 @@ function initRoleSwitcher() {
if (!checkbox || !userLabel || !adminLabel) return;
checkbox.addEventListener('change', () => {
const mainContent = document.getElementById('main-content')!;
if (checkbox.checked) {
state.currentUserRole = 'admin';
userLabel.classList.remove('active');
@@ -165,6 +178,14 @@ function initRoleSwitcher() {
// 관리자 모드 전환 시 대시보드로 이동
state.activeCategory = 'hw';
state.activeSubTab = '대시보드';
refreshView();
renderNavigation((tab) => {
if (tab === '대시보드') {
renderDashboard(mainContent);
} else {
renderSWTable(mainContent);
}
});
} else {
state.currentUserRole = 'user';
adminLabel.classList.remove('active');
@@ -174,10 +195,15 @@ function initRoleSwitcher() {
// 실무자 모드 전환 시 서버 목록으로 이동
state.activeCategory = 'hw';
state.activeSubTab = '서버';
refreshView();
renderNavigation((tab) => {
if (tab === '대시보드') {
renderDashboard(mainContent);
} else {
renderSWTable(mainContent);
}
});
}
// 모든 렌더링을 refreshView 하나로 통합하여 규격 유지
renderNavigation(() => refreshView());
refreshView();
});
}
@@ -187,19 +213,35 @@ function initRoleSwitcher() {
function initializeAppDirectly() {
const loginContainer = document.getElementById('login-container');
const appLayout = document.getElementById('app-layout');
const checkbox = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
const userLabel = document.querySelector('.role-label.user');
const adminLabel = document.querySelector('.role-label.admin');
// 기본 권한 설정: 실무자 (User)
state.currentUserRole = 'user';
state.activeCategory = 'hw';
state.activeSubTab = '서버'; // 실무자 기본 탭
// UI 상태 동기화
if (checkbox) checkbox.checked = false;
if (userLabel) userLabel.classList.add('active');
if (adminLabel) adminLabel.classList.remove('active');
document.body.classList.remove('admin-mode');
// 화면 전환
if (loginContainer) loginContainer.style.display = 'none';
if (appLayout) appLayout.style.display = 'flex';
// 앱 초기화 및 내비게이션(헤더 포함) 렌더링
// 앱 초기화
initRoleSwitcher();
initApp();
renderNavigation((tab) => refreshView(tab));
// 로고 클릭 시 새로고침 (초기 화면 복귀 효과)
const brand = document.querySelector('.brand') as HTMLElement;
if (brand) {
brand.style.cursor = 'pointer';
brand.onclick = () => location.reload();
}
}
document.addEventListener('DOMContentLoaded', initializeAppDirectly);

2
src/map-editor-main.ts
View File

@@ -1,5 +1,5 @@
import './styles/common.css';
import './views/map-editor.css';
import './styles/map-editor.css';
import { MapEditor } from './views/MapEditor';
document.addEventListener('DOMContentLoaded', () => {

Some files were not shown because too many files have changed in this diff Show More