Compare commits
28 Commits
server_das
...
login
| Author | SHA1 | Date | |
|---|---|---|---|
| 9e8ab11f99 | |||
| 19d4222470 | |||
| db5c7a96a6 | |||
| 7d3d5ef281 | |||
| 9cd5d59bf8 | |||
| 590ddd0e85 | |||
| bf7fb0ffe6 | |||
| 2c67037fc4 | |||
| b2713a142d | |||
| 82bbe85e23 | |||
| d34ebb8500 | |||
| 2af79cdad3 | |||
| 68cb5f9767 | |||
| 8f0508a7d0 | |||
| 171bcc772b | |||
| ab0d25b827 | |||
| d7af75976e | |||
| dde3aefaac | |||
| 1fbd297988 | |||
| 4b5e25fd3f | |||
| 367f72673d | |||
| 9fcecd4bf5 | |||
| d125de1902 | |||
| d8a0c47fb3 | |||
| 4b88ac01a4 | |||
| 5feaa5f170 | |||
| 9365af4522 | |||
| 55e9cd4cd9 |
64
ITAM_RMM_Integration_Plan.md
Normal file
@@ -0,0 +1,64 @@
|
||||
# [보고서] IT 자산 실시간 통합 관리 시스템(RMM) 도입 계획서
|
||||
|
||||
## 1. 도입 배경 및 목적
|
||||
- **현황**: 현재 시스템은 수동 입력 기반의 정적 자산 대장으로 운영되어, 실제 장비의 가동 상태나 장애 여부를 실시간으로 파악하는 데 한계가 있음.
|
||||
- **목적**: 전산자산(서버, PC)의 실시간 상태 정보를 자동 수집하고 장애 징후를 사전에 탐지하여, 선제적 유지보수 체계를 구축하고 운영 효율성을 극대화함.
|
||||
|
||||
## 2. 시스템 주요 기능
|
||||
### 2.1 실시간 가동 상태 모니터링
|
||||
- 주요 자원(CPU, Memory, Disk) 사용률 실시간 수집
|
||||
- 운영체제(OS) 및 주요 시스템 서비스의 정상 작동 여부 확인
|
||||
- 자산 리스트 내 상태 인디케이터(정상/주의/장애) 표시
|
||||
|
||||
### 2.2 원격 제어 및 지원 통합
|
||||
- **기술적 구현 방식 (원클릭 자동 연결)**: 웹사이트에서 전화번호를 누르면 전화 앱이 켜지거나, 이메일 주소를 누르면 메일 창이 뜨는 것과 동일한 원리인 'URL 프로토콜 핸들러' 기술을 적용함.
|
||||
- **자동화 프로세스**: 관리자가 화면의 [연결] 버튼을 클릭하면, 시스템이 팀뷰어나 애니데스크에 "A장비로 연결해줘"라는 신호를 직접 보냄.
|
||||
- **편의성**: 관리자가 대상 장비의 ID나 비밀번호를 직접 복사해서 프로그램에 입력할 필요 없이, 클릭 한 번으로 내 PC에 설치된 원격 소프트웨어가 자동 실행되며 즉시 화면이 연결되도록 구현함.
|
||||
- **유연한 접속 모드 지원**:
|
||||
- **무인 접속(Unattended Access)**: 서버 및 공용 장비의 경우, 사전에 등록된 자격 증명을 통해 관리자 승인만으로 즉시 접속하여 야간 또는 긴급 장애에 대응함.
|
||||
- **사용자 승인 접속(Attended Access)**: 개인용 PC의 경우, 사용자의 화면에 접속 요청 팝업을 띄우고 승인 시에만 화면 공유를 시작하여 개인정보 보호 및 보안 규정을 준수함.
|
||||
- **보안 및 감사 로그 자동화**:
|
||||
- 원격 접속이 시작되는 시점에 관리자 정보, 접속 목적, 대상 장비 정보를 DB에 자동 기록함.
|
||||
- 세션 종료 후 총 작업 시간 및 조치 내역을 입력하도록 유도하여 투명한 유지보수 이력을 관리함.
|
||||
|
||||
### 2.3 원격 지원 상세 워크플로우 (Remote Support Workflow)
|
||||
관리자가 장애를 인지하고 조치를 완료하기까지의 표준 프로세스는 다음과 같습니다.
|
||||
|
||||
1. **지원 요청 및 대상 선택**: 관리자가 ITAM 대시보드 또는 리스트에서 장애가 발생한 자산을 선택하고 '원격 지원 시작' 버튼을 클릭함.
|
||||
2. **접속 모드 자동 판별**:
|
||||
- **서버(무인)**: 시스템이 저장된 자격 증명을 확인하고 관리자에게 '즉시 연결' 팝업을 띄움.
|
||||
- **PC(유인)**: 관리자가 '접속 요청' 버튼을 누르면, 대상 PC 화면에 "관리자가 원격 제어를 요청했습니다. 승인하시겠습니까?" 팝업이 전송됨.
|
||||
3. **세션 초기화 및 로그 생성**: 접속 시도가 승인되면 서버는 즉시 [접속 일시, 관리자 ID, 대상 자산 번호]를 포함한 '세션 로그'를 생성하고 상태를 '진행 중'으로 변경함.
|
||||
4. **프로토콜 핸들러 실행**: 브라우저가 관리자 PC의 원격 제어 앱(TeamViewer 등)을 자동으로 실행하며, 대상 장비의 ID와 패스워드 정보를 암호화된 인자로 전달하여 즉시 화면이 연결됨.
|
||||
5. **조치 및 지원 수행**: 관리자가 실시간으로 장비를 제어하여 장애를 복구함.
|
||||
6. **세션 종료 및 결과 기록**:
|
||||
- 관리자가 원격 제어 앱을 종료하면, ITAM 웹 화면에 '조치 결과 입력' 창이 활성화됨.
|
||||
- 관리자가 조치 내용(예: 서비스 재시작, 패치 적용 등)을 입력하고 저장하면 세션 로그가 최종 확정됨.
|
||||
7. **이력 보관**: 완료된 모든 이력은 '자산 상세 정보 > 유지보수 이력' 탭에서 언제든지 열람 및 보고서 출력이 가능함.
|
||||
|
||||
### 3.3 장애 사전 탐지 및 알림
|
||||
- 설정된 임계치(예: 디스크 잔량 10% 미만) 초과 시 즉시 알림 발송
|
||||
- 장기 미접속 또는 점검 누락 장비의 실시간 식별
|
||||
|
||||
## 3. 운영 프로세스 및 메커니즘
|
||||
1. **데이터 수집 (Collection)**: 각 자산에 배치된 에이전트가 시스템 정보를 주기적으로 추출함.
|
||||
2. **분석 및 판별 (Analysis)**: 수집된 데이터를 중앙 서버에서 분석하여 장비의 상태 등급을 판정함.
|
||||
3. **가시화 (Visualization)**: 통합 관리 대시보드를 통해 전체 자산의 헬스 상태를 실시간으로 출력함.
|
||||
4. **대응 (Action)**: 장애 감지 시 원격 제어 기능을 호출하여 즉각적인 기술 지원을 수행함.
|
||||
|
||||
## 4. 핵심 기술 및 도구
|
||||
- **에이전트**: PowerShell 기반의 경량 스크립트를 활용하여 별도의 상용 소프트웨어 설치 없이 시스템 정보 수집.
|
||||
- **백엔드**: Node.js 환경에서 대용량 점검 데이터를 효율적으로 처리하고 데이터베이스화함.
|
||||
- **프론트엔드**: TypeScript를 활용하여 직관적이고 반응성이 뛰어난 관리자 대시보드 구현.
|
||||
- **원격 솔루션**: 보안성이 검증된 TeamViewer/AnyDesk의 프로토콜 연동을 통한 안전한 원격 접속 환경 구축.
|
||||
|
||||
## 5. 기대 효과
|
||||
- **가용성 증대**: 장애 발생 전 사전 조치를 통해 시스템 다운타임을 최소화하고 업무 연속성 확보.
|
||||
- **비용 절감**: 현장 방문 점검 최소화 및 원격 조치를 통한 IT 운영 관리 비용 및 시간 절감.
|
||||
- **데이터 기반 의무**: 객관적인 성능 지표 및 점검 이력을 바탕으로 정밀한 자산 교체 주기 산정 및 감사 대응.
|
||||
- **관리 생산성 향상**: 자산 정보 조회와 실시간 관리를 단일 플랫폼으로 통합하여 업무 프로세스 간소화.
|
||||
|
||||
## 6. 향후 계획
|
||||
- 1단계: 서버 자산 중심의 실시간 모니터링 및 대시보드 구축
|
||||
- 2단계: 전사 PC 대상 원격 지원 및 보안 점검 기능 확대 적용
|
||||
- 3단계: 누적 데이터를 활용한 성능 분석 및 월간 운영 보고서 자동화
|
||||
318
IT_Asset_RMM_System_Report_Detailed.md
Normal file
@@ -0,0 +1,318 @@
|
||||
# 전산자산 원격 점검 및 관리 시스템(RMM) 구축 조사 보고서 (상세판)
|
||||
|
||||
## 1. RMM(Remote Monitoring & Management) 개요
|
||||
|
||||
RMM(Remote Monitoring & Management)은 서버, 업무용 PC, 노트북 등 IT 자산에 에이전트를 설치하여
|
||||
중앙 관리 서버에서 상태를 자동 수집하고, 이상 발생 시 경고를 발송하며, 필요 시 원격 접속으로 문제를 해결하는
|
||||
기업용 IT 운영 관리 체계입니다.
|
||||
|
||||
### 주요 기능
|
||||
- CPU, 메모리, 디스크 상태 모니터링
|
||||
- Windows 서비스 및 프로세스 상태 점검
|
||||
- OS 패치 및 백신 상태 확인
|
||||
- 자동 점검 스케줄링 (1일 1~2회 이상)
|
||||
- 이상 발생 시 이메일/메신저 알림
|
||||
- 원격 접속을 통한 장애 조치
|
||||
- 점검 이력 및 감사 로그 보관
|
||||
|
||||
---
|
||||
|
||||
## 2. 구축 목표
|
||||
|
||||
### 서버 및 서버용 PC
|
||||
- 하루 1~2회 자동 점검
|
||||
- 주요 시스템 자원 및 서비스 상태 수집
|
||||
- 이상 발생 시 관리자 즉시 통보
|
||||
|
||||
### 업무용 PC
|
||||
- 중앙 관리 서버에서 정기 점검
|
||||
- 패치 및 보안 상태 확인
|
||||
|
||||
### 개인 PC
|
||||
- 사용자가 직접 점검 실행
|
||||
- 결과를 중앙 서버에 업로드
|
||||
|
||||
### 관리자
|
||||
- 마지막 점검 일시 확인
|
||||
- 성공/실패 여부 확인
|
||||
- 미실행 장비 식별
|
||||
- 필요 시 즉시 원격 접속
|
||||
|
||||
---
|
||||
|
||||
## 3. 기대 효과
|
||||
|
||||
- 장애 조기 탐지 및 사전 예방
|
||||
- 현장 방문 최소화
|
||||
- 점검 누락 방지
|
||||
- 감사 대응 자료 자동 확보
|
||||
- 자산 운영 현황 실시간 가시화
|
||||
- 사용자 점검 이행 여부 관리
|
||||
|
||||
---
|
||||
|
||||
## 4. 전체 시스템 아키텍처
|
||||
|
||||
```text
|
||||
[관리자 웹 포털]
|
||||
├─ 대시보드
|
||||
├─ 점검 결과 조회
|
||||
├─ 원격 접속 버튼
|
||||
├─ 알림 관리
|
||||
└─ 사용자 수행 현황
|
||||
|
||||
│
|
||||
▼
|
||||
|
||||
[중앙 관리 서버]
|
||||
├─ 스케줄러
|
||||
├─ 데이터 수집 API
|
||||
├─ 분석 엔진
|
||||
├─ 알림 시스템
|
||||
└─ 데이터베이스
|
||||
|
||||
│
|
||||
▼
|
||||
|
||||
[에이전트 설치 대상]
|
||||
├─ 서버
|
||||
├─ 서버용 PC
|
||||
├─ 업무용 PC
|
||||
└─ 개인 PC
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. 주요 구성 요소
|
||||
|
||||
### 5.1 중앙 관리 서버
|
||||
- 스케줄 실행
|
||||
- 상태 분석
|
||||
- 데이터 저장
|
||||
- 알림 전송
|
||||
- 웹 서비스 제공
|
||||
|
||||
### 5.2 에이전트 프로그램
|
||||
- PowerShell 또는 Python 기반
|
||||
- 상태 수집
|
||||
- 중앙 서버 전송
|
||||
|
||||
### 5.3 관리자 웹 대시보드
|
||||
- 실시간 현황 조회
|
||||
- 점검 이력 확인
|
||||
- 원격 접속 실행
|
||||
|
||||
### 5.4 원격 접속 솔루션
|
||||
- TeamViewer Tensor
|
||||
- AnyDesk
|
||||
- Microsoft Remote Help
|
||||
|
||||
### 5.5 데이터베이스
|
||||
- SQL Server 또는 PostgreSQL
|
||||
|
||||
### 5.6 알림 시스템
|
||||
- 이메일
|
||||
- Microsoft Teams
|
||||
- Slack
|
||||
|
||||
---
|
||||
|
||||
## 6. 점검 항목
|
||||
|
||||
### 공통 점검 항목
|
||||
- CPU 사용률
|
||||
- 메모리 사용률
|
||||
- 디스크 여유 공간
|
||||
- 네트워크 연결 상태
|
||||
- 시스템 부팅 시간
|
||||
- 재부팅 필요 여부
|
||||
|
||||
### 서버 추가 항목
|
||||
- 주요 서비스 실행 여부
|
||||
- 이벤트 로그 오류
|
||||
- 백업 결과
|
||||
- DB 상태
|
||||
|
||||
### PC 추가 항목
|
||||
- 백신 업데이트 여부
|
||||
- Windows Update 상태
|
||||
- BitLocker 상태
|
||||
|
||||
### 개인 PC
|
||||
- 기본 시스템 상태
|
||||
- 점검 수행 여부 및 시간 기록
|
||||
|
||||
---
|
||||
|
||||
## 7. 운영 프로세스
|
||||
|
||||
### 정상 운영
|
||||
1. 스케줄러가 하루 1~2회 자동 실행
|
||||
2. 에이전트가 점검 수행
|
||||
3. 결과를 중앙 서버로 전송
|
||||
4. 분석 엔진이 정상 여부 판정
|
||||
5. 대시보드에 저장
|
||||
|
||||
### 이상 발생 시
|
||||
1. 임계치 초과 또는 서비스 중지 감지
|
||||
2. 관리자에게 알림 발송
|
||||
3. 관리자가 원격 접속
|
||||
4. 조치 내용 기록
|
||||
|
||||
### 개인 PC
|
||||
1. 사용자가 '점검 실행' 버튼 클릭
|
||||
2. 스크립트 수행
|
||||
3. 결과 업로드
|
||||
4. 관리자가 이행 여부 확인
|
||||
|
||||
---
|
||||
|
||||
## 8. 개인 PC 자가 점검 기능
|
||||
|
||||
### 사용자 화면
|
||||
- 점검 실행 버튼
|
||||
- 결과 요약 표시
|
||||
- 마지막 점검 시간 표시
|
||||
|
||||
### 관리자 확인 항목
|
||||
- 마지막 점검 일시
|
||||
- 성공/실패 여부
|
||||
- 미실행 기간
|
||||
- 이상 발생 내역
|
||||
|
||||
---
|
||||
|
||||
## 9. 관리자 대시보드 구성
|
||||
|
||||
- 전체 자산 현황
|
||||
- 정상/경고/장애 통계
|
||||
- 최근 점검 성공률
|
||||
- 미점검 장비 목록
|
||||
- 개인 PC 수행 현황
|
||||
- 원격 접속 바로가기
|
||||
- 월간 보고서
|
||||
|
||||
---
|
||||
|
||||
## 10. 솔루션 비교
|
||||
|
||||
| 솔루션 | 특징 | 적합도 |
|
||||
|------|------|------|
|
||||
| Microsoft Intune | 엔드포인트 관리 및 규정 준수 | 매우 높음 |
|
||||
| TeamViewer Tensor | 기업용 원격 접속 및 RMM 연동 | 매우 높음 |
|
||||
| ManageEngine Endpoint Central | 자산, 패치, 원격 관리 통합 | 매우 높음 |
|
||||
| Zabbix | 오픈소스 모니터링 | 높음 |
|
||||
| Splashtop Remote Support | 원격 지원 + RMM | 높음 |
|
||||
| Power BI | 대시보드 및 보고 | 매우 높음 |
|
||||
|
||||
---
|
||||
|
||||
## 11. 권장 구축 방안
|
||||
|
||||
### 권장 아키텍처
|
||||
- Microsoft Intune
|
||||
- TeamViewer Tensor
|
||||
- PowerShell 자동 점검 스크립트
|
||||
- Microsoft SQL Server
|
||||
- Power BI
|
||||
- Microsoft Teams 알림
|
||||
|
||||
### 권장 이유
|
||||
- Windows 환경과 높은 호환성
|
||||
- 보안 및 감사 기능 우수
|
||||
- 사용자 PC까지 통합 관리 가능
|
||||
- 경영진 보고 자동화 가능
|
||||
|
||||
---
|
||||
|
||||
## 12. 보안 요구사항
|
||||
|
||||
- MFA(다중 인증)
|
||||
- RBAC(역할 기반 권한 관리)
|
||||
- TLS 암호화
|
||||
- 감사 로그 저장
|
||||
- 승인된 관리자만 원격 접속
|
||||
- 사용자 동의 기반 개인 PC 점검
|
||||
|
||||
---
|
||||
|
||||
## 13. 구축 일정 (예시)
|
||||
|
||||
| 단계 | 기간 |
|
||||
|------|------|
|
||||
| 요구사항 분석 | 2주 |
|
||||
| 솔루션 선정 | 2주 |
|
||||
| PoC | 4주 |
|
||||
| 설계 및 개발 | 6주 |
|
||||
| 시범 운영 | 4주 |
|
||||
| 전사 확대 | 4주 |
|
||||
|
||||
총 예상 기간: 약 4~6개월
|
||||
|
||||
---
|
||||
|
||||
## 14. 예상 비용 (예시)
|
||||
|
||||
| 항목 | 비용 수준 |
|
||||
|------|----------|
|
||||
| Intune 라이선스 | 사용자당 월 과금 |
|
||||
| TeamViewer Tensor | 동시 세션 기준 |
|
||||
| 개발 비용 | 중~고 |
|
||||
| 운영 비용 | 중간 |
|
||||
|
||||
---
|
||||
|
||||
## 15. 구축 우선순위
|
||||
|
||||
### 1단계
|
||||
- 핵심 서버 모니터링
|
||||
- 관리자 대시보드
|
||||
|
||||
### 2단계
|
||||
- 원격 접속 통합
|
||||
- 자동 알림
|
||||
|
||||
### 3단계
|
||||
- 개인 PC 자가 점검
|
||||
|
||||
### 4단계
|
||||
- Power BI 경영 보고
|
||||
|
||||
---
|
||||
|
||||
## 16. 최종 권장안
|
||||
|
||||
> Microsoft Intune + TeamViewer Tensor + PowerShell + SQL Server + Power BI
|
||||
|
||||
이 조합은 다음 요구사항을 모두 충족합니다.
|
||||
- 자동 점검
|
||||
- 이상 탐지
|
||||
- 원격 접속
|
||||
- 사용자 자가 점검
|
||||
- 이력 관리
|
||||
- 감사 대응
|
||||
- 경영진 보고
|
||||
|
||||
---
|
||||
|
||||
## 17. 공식 출처 및 링크
|
||||
|
||||
- Microsoft Intune: https://intune.microsoft.com
|
||||
- TeamViewer Tensor: https://www.teamviewer.com/en/tensor/
|
||||
- TeamViewer RMM 소개: https://www.teamviewer.com/en/solutions/use-cases/rmm-remote-monitoring-management/
|
||||
- ManageEngine Endpoint Central: https://www.manageengine.com/products/endpoint-central/
|
||||
- Zabbix: https://www.zabbix.com
|
||||
- Power BI: https://powerbi.microsoft.com
|
||||
- Microsoft SQL Server: https://www.microsoft.com/sql-server
|
||||
- Splashtop RMM 설명: https://www.splashtop.com/blog/what-is-remote-monitoring-and-management
|
||||
|
||||
---
|
||||
|
||||
## 18. 결론
|
||||
|
||||
본 시스템은 서버, 업무용 PC, 개인 PC를 통합 관리하여
|
||||
정기적인 자동 점검과 이상 탐지, 원격 접속, 사용자 자가 점검, 점검 이력 관리까지 지원하는
|
||||
기업용 IT 운영 플랫폼입니다.
|
||||
|
||||
특히 개인 PC의 자가 점검 기능과 관리자 추적 기능을 포함함으로써
|
||||
규정 준수와 운영 효율성을 동시에 확보할 수 있습니다.
|
||||
@@ -51,6 +51,6 @@
|
||||
* **Input/Button**: 입력 필드와 버튼은 최소한의 보더와 포인트 컬러만 사용하여 정갈하게 표현합니다.
|
||||
* **Modal (모달 공통 규칙)**:
|
||||
* **Header**: 짙은 그린(`#1E5149`) 배경에 화이트 텍스트를 사용하며, 우측 상단에 명확한 'X' 닫기 버튼을 배치합니다.
|
||||
* **Interaction**: 사용자의 편의를 위해 `ESC` 키를 누르거나 모달 바깥 영역(Overlay)을 클릭하면 모달이 닫히도록 구현합니다.
|
||||
* **Interaction**: 사용자의 오입력(실수로 바깥을 클릭하여 입력 내용이 날아가는 현상)을 방지하기 위해 **모달 바깥 영역(Overlay) 클릭 시 모달이 닫히지 않도록** 설정합니다. 닫기는 오직 'ESC' 키 또는 명시적인 'X' 및 '닫기' 버튼을 통해서만 가능합니다.
|
||||
* **Layout**: `detail.png` 기준의 2열 그리드 시스템을 권장하며, 하단 우측에 액션 버튼(닫기, 저장 등)을 배치합니다.
|
||||
|
||||
|
||||
@@ -1,55 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<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>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/modal.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>
|
||||
<body>
|
||||
<div class="app-layout">
|
||||
<!-- Single-Line Integrated Header -->
|
||||
<header class="main-header">
|
||||
<div class="header-container" id="nav-container">
|
||||
<div class="brand">
|
||||
<h1>HM <span>ITAM</span></h1>
|
||||
</div>
|
||||
|
||||
<!-- Navigation (GNB + LNB in same row) -->
|
||||
<nav class="integrated-nav" id="main-nav">
|
||||
<!-- JS will render main items and sub items here side-by-side -->
|
||||
</nav>
|
||||
|
||||
<div class="header-actions">
|
||||
<button id="btn-download-template" class="btn btn-outline" title="통합 양식 다운로드">
|
||||
<i data-lucide="download"></i> 양식
|
||||
</button>
|
||||
<label for="excel-upload" class="btn btn-outline" title="엑셀 파일 업로드">
|
||||
<i data-lucide="upload"></i> 업로드
|
||||
</label>
|
||||
<input type="file" id="excel-upload" accept=".xlsx, .xls" style="display: none;" />
|
||||
<button id="btn-export-excel" class="btn btn-primary" title="일괄 엑셀 저장">
|
||||
<i data-lucide="file-spreadsheet"></i> 엑셀저장
|
||||
</button>
|
||||
<button id="btn-add-asset" class="btn btn-primary hidden">
|
||||
<i data-lucide="plus"></i> 자산추가
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<main class="content-area" id="main-content">
|
||||
<!-- Components inject views here -->
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- All modals are injected dynamically -->
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,25 +0,0 @@
|
||||
{
|
||||
"name": "hm-itam",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview",
|
||||
"server": "node server.js",
|
||||
"db-init": "node db_init.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^5.2.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"cors": "^2.8.6",
|
||||
"dotenv": "^17.4.2",
|
||||
"express": "^5.2.1",
|
||||
"lucide": "^0.364.0",
|
||||
"mysql2": "^3.22.1",
|
||||
"xlsx": "^0.18.5"
|
||||
}
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
/**
|
||||
* 모든 모달의 공통 기능 (닫기, ESC 처리, 배경 클릭 등)을 관리하는 베이스 모듈입니다.
|
||||
*/
|
||||
export function initBaseModal() {
|
||||
const closeAllModals = () => {
|
||||
const modals = document.querySelectorAll('.modal-overlay');
|
||||
modals.forEach(modal => modal.classList.add('hidden'));
|
||||
};
|
||||
|
||||
// ESC 키로 닫기
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') closeAllModals();
|
||||
});
|
||||
|
||||
// 배경(Overlay) 클릭 시 닫기 (동적 생성된 모달 대응을 위해 이벤트 위임 고려 가능하나 일단 단순 구현)
|
||||
document.addEventListener('click', (e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (target.classList.contains('modal-overlay')) {
|
||||
closeAllModals();
|
||||
}
|
||||
});
|
||||
|
||||
return { closeAllModals };
|
||||
}
|
||||
|
||||
/**
|
||||
* 특정 모달을 엽니다.
|
||||
* @param modalId 모달 엘리먼트의 ID
|
||||
*/
|
||||
export function openModal(modalId: string) {
|
||||
const modal = document.getElementById(modalId);
|
||||
if (modal) {
|
||||
modal.classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
@@ -1,109 +0,0 @@
|
||||
import { HardwareAsset, SoftwareAsset } from '../../core/excelHandler';
|
||||
import { state } from '../../core/state';
|
||||
|
||||
const DASHBOARD_DETAIL_MODAL_HTML = `
|
||||
<div id="dashboard-detail-modal" class="modal-overlay hidden">
|
||||
<div class="modal-content wide" style="max-width: 1000px;">
|
||||
<div class="modal-header">
|
||||
<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 style="width:100%;">
|
||||
<thead></thead>
|
||||
<tbody id="dashboard-detail-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div></div>
|
||||
<button id="btn-cancel-dashboard-detail-modal" class="btn btn-outline">닫기</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
export function initDashboardDetailModal() {
|
||||
if (!document.getElementById('dashboard-detail-modal')) {
|
||||
document.body.insertAdjacentHTML('beforeend', DASHBOARD_DETAIL_MODAL_HTML);
|
||||
}
|
||||
|
||||
const modal = document.getElementById('dashboard-detail-modal')!;
|
||||
const closeBtn = document.getElementById('btn-close-dashboard-detail-modal')!;
|
||||
const cancelBtn = document.getElementById('btn-cancel-dashboard-detail-modal')!;
|
||||
|
||||
const closeModal = () => modal.classList.add('hidden');
|
||||
closeBtn.addEventListener('click', closeModal);
|
||||
cancelBtn.addEventListener('click', closeModal);
|
||||
modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });
|
||||
}
|
||||
|
||||
export function openDashboardDetail(title: string, list: HardwareAsset[]) {
|
||||
const modal = document.getElementById('dashboard-detail-modal');
|
||||
if (!modal) return;
|
||||
const titleEl = document.getElementById('dashboard-detail-modal-title');
|
||||
const tbody = document.getElementById('dashboard-detail-tbody');
|
||||
if (!titleEl || !tbody) return;
|
||||
const thead = tbody.closest('table')?.querySelector('thead');
|
||||
if (!thead) return;
|
||||
|
||||
titleEl.textContent = title;
|
||||
thead.innerHTML = `<tr><th>No</th><th>유형</th><th>자산코드</th><th>명칭/모델</th><th>위치</th><th>담당/사용자</th><th>구매일</th><th>금액</th></tr>`;
|
||||
tbody.innerHTML = '';
|
||||
if (list.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="8" style="text-align:center; padding: 2rem;">해당 조건의 자산이 없습니다.</td></tr>`;
|
||||
} else {
|
||||
list.forEach((asset, idx) => {
|
||||
let manager = asset.관리자 || asset.사용자 || asset.담당자_정 || '-';
|
||||
let name = asset.명칭 || asset.모델명 || '-';
|
||||
const tr = document.createElement('tr');
|
||||
tr.innerHTML = `<td>${idx+1}</td><td>${asset.type}</td><td>${asset.자산코드}</td><td>${name}</td><td>${asset.위치||'-'}</td><td>${manager}</td><td>${asset.구매일||'-'}</td><td>${asset.금액||'-'}</td>`;
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
}
|
||||
modal.classList.remove('hidden');
|
||||
}
|
||||
|
||||
export function openSwDashboardDetail(title: string, list: SoftwareAsset[]) {
|
||||
const modal = document.getElementById('dashboard-detail-modal');
|
||||
if (!modal) return;
|
||||
const titleEl = document.getElementById('dashboard-detail-modal-title');
|
||||
const tbody = document.getElementById('dashboard-detail-tbody');
|
||||
if (!titleEl || !tbody) return;
|
||||
const thead = tbody.closest('table')?.querySelector('thead');
|
||||
if (!thead) return;
|
||||
|
||||
titleEl.textContent = title;
|
||||
thead.innerHTML = `<tr><th>No</th><th>유형</th><th>법인</th><th>제품명</th><th>수량</th><th>금액</th></tr>`;
|
||||
tbody.innerHTML = '';
|
||||
list.forEach((sw, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.innerHTML = `<td>${idx+1}</td><td>${sw.type}</td><td>${sw.법인}</td><td>${sw.제품명}</td><td>${sw.수량}</td><td>${sw.금액}</td>`;
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
modal.classList.remove('hidden');
|
||||
}
|
||||
|
||||
export function openSwUsageDetail(title: string, list: SoftwareAsset[]) {
|
||||
const modal = document.getElementById('dashboard-detail-modal');
|
||||
if (!modal) return;
|
||||
const titleEl = document.getElementById('dashboard-detail-modal-title');
|
||||
const tbody = document.getElementById('dashboard-detail-tbody');
|
||||
if (!titleEl || !tbody) return;
|
||||
const thead = tbody.closest('table')?.querySelector('thead');
|
||||
if (!thead) return;
|
||||
|
||||
titleEl.textContent = title;
|
||||
thead.innerHTML = `<tr><th>No</th><th>법인</th><th>제품명</th><th>수량</th><th>사용중</th><th>사용가능</th></tr>`;
|
||||
tbody.innerHTML = '';
|
||||
list.forEach((sw, idx) => {
|
||||
const assigned = state.masterData.swUsers.filter(u => u.swId === sw.id).length;
|
||||
const qty = typeof sw.수량 === 'number' ? sw.수량 : parseInt(sw.수량||'0', 10);
|
||||
const avail = qty - assigned;
|
||||
const tr = document.createElement('tr');
|
||||
tr.innerHTML = `<td>${idx+1}</td><td>${sw.법인}</td><td>${sw.제품명}</td><td>${qty}</td><td>${assigned}</td><td>${avail}</td>`;
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
modal.classList.remove('hidden');
|
||||
}
|
||||
@@ -1,335 +0,0 @@
|
||||
import { state } from '../../core/state';
|
||||
import { HardwareAsset } from '../../core/excelHandler';
|
||||
import { renderTable } from '../../views/AssetTableView';
|
||||
import { createIcons, Paperclip } from 'lucide';
|
||||
|
||||
let currentAsset: HardwareAsset | null = null;
|
||||
let isEditMode = false;
|
||||
|
||||
const HW_MODAL_HTML = `
|
||||
<div id="hw-asset-modal" class="modal-overlay hidden">
|
||||
<div class="modal-content wide">
|
||||
<div class="modal-header">
|
||||
<h2 id="hw-modal-title">자산 상세 정보</h2>
|
||||
<button id="btn-close-hw-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="hw-asset-form" class="grid-form">
|
||||
<input type="hidden" id="hw-asset-id" />
|
||||
<input type="hidden" id="hw-asset-type" />
|
||||
|
||||
<!-- Group 1: 기본 정보 -->
|
||||
<div class="form-section-title">기본 정보 (Identity)</div>
|
||||
<div class="form-group">
|
||||
<label for="hw-법인">법인</label>
|
||||
<input type="text" id="hw-법인" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="hw-자산코드">자산번호/코드</label>
|
||||
<input type="text" id="hw-자산코드" required />
|
||||
</div>
|
||||
<div class="form-group server-only">
|
||||
<label for="hw-용도">용도</label>
|
||||
<input type="text" id="hw-용도" />
|
||||
</div>
|
||||
<div class="form-group server-only">
|
||||
<label for="hw-상세">상세 내용</label>
|
||||
<input type="text" id="hw-상세" />
|
||||
</div>
|
||||
<div class="form-group non-server">
|
||||
<label for="hw-명칭">명칭</label>
|
||||
<input type="text" id="hw-명칭" />
|
||||
</div>
|
||||
<div class="form-group full-width server-only">
|
||||
<label for="hw-비고">비고</label>
|
||||
<input type="text" id="hw-비고" />
|
||||
</div>
|
||||
|
||||
<!-- Group 2: 네트워크 정보 -->
|
||||
<div class="form-section-title server-only">네트워크 정보 (Connectivity)</div>
|
||||
<div class="form-group server-only">
|
||||
<label for="hw-IP주소">IP 주소 1</label>
|
||||
<input type="text" id="hw-IP주소" />
|
||||
</div>
|
||||
<div class="form-group server-only">
|
||||
<label for="hw-IP2">IP 주소 2</label>
|
||||
<input type="text" id="hw-IP2" />
|
||||
</div>
|
||||
<div class="form-group server-only">
|
||||
<label for="hw-원격접속">원격 도구 (Anydesk/Chrome 등)</label>
|
||||
<input type="text" id="hw-원격접속" />
|
||||
</div>
|
||||
<div class="form-group server-only">
|
||||
<label for="hw-서버ID">서버 ID</label>
|
||||
<input type="text" id="hw-서버ID" />
|
||||
</div>
|
||||
<div class="form-group server-only">
|
||||
<label for="hw-서버PW">서버 PW</label>
|
||||
<input type="text" id="hw-서버PW" />
|
||||
</div>
|
||||
<div class="form-group non-server" id="hw-IP주소-group">
|
||||
<label for="hw-IP주소-non-server">IP 주소</label>
|
||||
<input type="text" id="hw-IP주소-non-server" />
|
||||
</div>
|
||||
|
||||
<!-- Group 3: 시스템 사양 -->
|
||||
<div class="form-section-title">시스템 사양 (Specifications)</div>
|
||||
<div class="form-group">
|
||||
<label for="hw-모델명">모델명</label>
|
||||
<input type="text" id="hw-모델명" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="hw-OS">운영체제 (OS)</label>
|
||||
<input type="text" id="hw-OS" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="hw-CPU">CPU 사양</label>
|
||||
<input type="text" id="hw-CPU" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="hw-RAM">RAM 용량</label>
|
||||
<input type="text" id="hw-RAM" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="hw-SSD1">Storage 1 (SSD/HDD)</label>
|
||||
<input type="text" id="hw-SSD1" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="hw-SSD2">Storage 2 (SSD/HDD)</label>
|
||||
<input type="text" id="hw-SSD2" />
|
||||
</div>
|
||||
<div class="form-group server-only">
|
||||
<label for="hw-모니터링">모니터링 여부</label>
|
||||
<input type="text" id="hw-모니터링" />
|
||||
</div>
|
||||
<div class="form-group" id="hw-비품유형-group" style="display:none;">
|
||||
<label for="hw-비품유형">비품유형</label>
|
||||
<select id="hw-비품유형">
|
||||
<option value="노트북">노트북</option><option value="태블릿">태블릿</option><option value="휴대폰">휴대폰</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group full-width non-server">
|
||||
<label for="hw-HW사양">H/W 사양 상세</label>
|
||||
<textarea id="hw-HW사양" rows="2"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Group 4: 관리 및 운영 -->
|
||||
<div class="form-section-title">관리 및 운영 (Operation)</div>
|
||||
<div class="form-group">
|
||||
<label for="hw-위치">설치위치</label>
|
||||
<input type="text" id="hw-위치" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="hw-담당자_정">담당자 (정)</label>
|
||||
<input type="text" id="hw-담당자_정" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="hw-담당자_부">담당자 (부)</label>
|
||||
<input type="text" id="hw-담당자_부" />
|
||||
</div>
|
||||
<div class="form-group non-server">
|
||||
<label for="hw-구매일">구매일</label>
|
||||
<input type="text" id="hw-구매일" />
|
||||
</div>
|
||||
<div class="form-group non-server">
|
||||
<label for="hw-금액">금액</label>
|
||||
<input type="text" id="hw-금액" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\d))/g, ',')" />
|
||||
</div>
|
||||
<div class="form-group full-width">
|
||||
<label>품의서 (파일 증빙)</label>
|
||||
<div style="display:flex; align-items:center; gap:0.5rem;">
|
||||
<input type="file" id="hw-품의서" />
|
||||
<span id="hw-품의서명" style="font-size:0.75rem; color:var(--text-light)"></span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="btn-delete-hw-asset" class="btn btn-outline btn-danger">삭제</button>
|
||||
<div class="footer-actions">
|
||||
<button id="btn-revert-hw-edit" class="btn btn-outline hidden">수정 취소</button>
|
||||
<button id="btn-cancel-hw-modal" class="btn btn-outline">닫기</button>
|
||||
<button id="btn-save-hw-asset" class="btn btn-primary">수정</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
export function openHwModal(asset: HardwareAsset) {
|
||||
currentAsset = asset;
|
||||
isEditMode = false;
|
||||
|
||||
const modal = document.getElementById('hw-asset-modal')!;
|
||||
const form = document.getElementById('hw-asset-form') as HTMLFormElement;
|
||||
const saveBtn = document.getElementById('btn-save-hw-asset')!;
|
||||
const revertBtn = document.getElementById('btn-revert-hw-edit')!;
|
||||
|
||||
form.reset();
|
||||
form.classList.remove('is-edit-mode');
|
||||
form.classList.add('is-view-mode');
|
||||
saveBtn.textContent = '수정';
|
||||
revertBtn.classList.add('hidden');
|
||||
|
||||
fillHwFormData(asset);
|
||||
|
||||
modal.classList.remove('hidden');
|
||||
createIcons({ icons: { Paperclip } });
|
||||
}
|
||||
|
||||
function fillHwFormData(asset: HardwareAsset) {
|
||||
(document.getElementById('hw-asset-id') as HTMLInputElement).value = asset.id;
|
||||
(document.getElementById('hw-asset-type') as HTMLInputElement).value = asset.type;
|
||||
(document.getElementById('hw-법인') as HTMLInputElement).value = asset.법인;
|
||||
(document.getElementById('hw-자산코드') as HTMLInputElement).value = asset.자산코드;
|
||||
(document.getElementById('hw-위치') as HTMLInputElement).value = asset.위치;
|
||||
(document.getElementById('hw-모델명') as HTMLInputElement).value = asset.모델명 || '';
|
||||
(document.getElementById('hw-OS') as HTMLInputElement).value = asset.OS || '';
|
||||
(document.getElementById('hw-CPU') as HTMLInputElement).value = asset.CPU || '';
|
||||
(document.getElementById('hw-RAM') as HTMLInputElement).value = asset.RAM || '';
|
||||
(document.getElementById('hw-SSD1') as HTMLInputElement).value = asset.SSD1 || '';
|
||||
(document.getElementById('hw-SSD2') as HTMLInputElement).value = asset.SSD2 || '';
|
||||
(document.getElementById('hw-담당자_정') as HTMLInputElement).value = asset.담당자_정 || asset.관리자 || '';
|
||||
(document.getElementById('hw-담당자_부') as HTMLInputElement).value = asset.담당자_부 || '';
|
||||
(document.getElementById('hw-품의서명') as HTMLElement).textContent = asset.품의서명 || '';
|
||||
|
||||
const serverOnly = document.querySelectorAll('.server-only');
|
||||
const nonServer = document.querySelectorAll('.non-server');
|
||||
const equipGroup = document.getElementById('hw-비품유형-group')!;
|
||||
|
||||
if (asset.type === '서버') {
|
||||
serverOnly.forEach(el => (el as HTMLElement).style.display = 'flex');
|
||||
nonServer.forEach(el => (el as HTMLElement).style.display = 'none');
|
||||
equipGroup.style.display = 'none';
|
||||
|
||||
(document.getElementById('hw-용도') as HTMLInputElement).value = asset.용도 || '';
|
||||
(document.getElementById('hw-상세') as HTMLInputElement).value = asset.상세 || '';
|
||||
(document.getElementById('hw-비고') as HTMLInputElement).value = asset.비고 || '';
|
||||
(document.getElementById('hw-IP주소') as HTMLInputElement).value = asset.IP주소 || '';
|
||||
(document.getElementById('hw-IP2') as HTMLInputElement).value = (asset as any).IP2 || '';
|
||||
(document.getElementById('hw-원격접속') as HTMLInputElement).value = asset.원격접속 || '';
|
||||
(document.getElementById('hw-서버ID') as HTMLInputElement).value = (asset as any).서버ID || '';
|
||||
(document.getElementById('hw-서버PW') as HTMLInputElement).value = (asset as any).서버PW || '';
|
||||
(document.getElementById('hw-모니터링') as HTMLInputElement).value = asset.모니터링 || '';
|
||||
} else {
|
||||
serverOnly.forEach(el => (el as HTMLElement).style.display = 'none');
|
||||
nonServer.forEach(el => (el as HTMLElement).style.display = 'flex');
|
||||
|
||||
(document.getElementById('hw-명칭') as HTMLInputElement).value = asset.명칭 || '';
|
||||
(document.getElementById('hw-구매일') as HTMLInputElement).value = asset.구매일 || '';
|
||||
(document.getElementById('hw-금액') as HTMLInputElement).value = asset.금액 || '';
|
||||
(document.getElementById('hw-HW사양') as HTMLTextAreaElement).value = asset.HW사양 || '';
|
||||
(document.getElementById('hw-IP주소-non-server') as HTMLInputElement).value = asset.IP주소 || '';
|
||||
|
||||
if (asset.type === '전산비품') {
|
||||
equipGroup.style.display = 'flex';
|
||||
(document.getElementById('hw-비품유형') as HTMLSelectElement).value = asset.비품유형 || '노트북';
|
||||
} else {
|
||||
equipGroup.style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function initHwModal() {
|
||||
// HTML 주입
|
||||
if (!document.getElementById('hw-asset-modal')) {
|
||||
document.body.insertAdjacentHTML('beforeend', HW_MODAL_HTML);
|
||||
}
|
||||
|
||||
const modal = document.getElementById('hw-asset-modal')!;
|
||||
const form = document.getElementById('hw-asset-form') as HTMLFormElement;
|
||||
const closeBtn = document.getElementById('btn-close-hw-modal')!;
|
||||
const cancelBtn = document.getElementById('btn-cancel-hw-modal')!;
|
||||
const saveBtn = document.getElementById('btn-save-hw-asset')!;
|
||||
const revertBtn = document.getElementById('btn-revert-hw-edit')!;
|
||||
const deleteBtn = document.getElementById('btn-delete-hw-asset')!;
|
||||
|
||||
const closeModal = () => {
|
||||
modal.classList.add('hidden');
|
||||
isEditMode = false;
|
||||
};
|
||||
|
||||
const switchToViewMode = () => {
|
||||
isEditMode = false;
|
||||
form.classList.remove('is-edit-mode');
|
||||
form.classList.add('is-view-mode');
|
||||
saveBtn.textContent = '수정';
|
||||
revertBtn.classList.add('hidden');
|
||||
if (currentAsset) fillHwFormData(currentAsset);
|
||||
};
|
||||
|
||||
closeBtn.addEventListener('click', closeModal);
|
||||
cancelBtn.addEventListener('click', closeModal);
|
||||
modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });
|
||||
revertBtn.addEventListener('click', () => { switchToViewMode(); });
|
||||
|
||||
saveBtn.addEventListener('click', () => {
|
||||
if (!currentAsset) return;
|
||||
|
||||
if (!isEditMode) {
|
||||
isEditMode = true;
|
||||
form.classList.remove('is-view-mode');
|
||||
form.classList.add('is-edit-mode');
|
||||
saveBtn.textContent = '저장';
|
||||
revertBtn.classList.remove('hidden');
|
||||
return;
|
||||
}
|
||||
|
||||
const assetId = (document.getElementById('hw-asset-id') as HTMLInputElement).value;
|
||||
const type = (document.getElementById('hw-asset-type') as HTMLInputElement).value;
|
||||
|
||||
const updated: HardwareAsset = {
|
||||
...currentAsset,
|
||||
법인: (document.getElementById('hw-법인') as HTMLInputElement).value,
|
||||
자산코드: (document.getElementById('hw-자산코드') as HTMLInputElement).value,
|
||||
위치: (document.getElementById('hw-위치') as HTMLInputElement).value,
|
||||
모델명: (document.getElementById('hw-모델명') as HTMLInputElement).value,
|
||||
OS: (document.getElementById('hw-OS') as HTMLInputElement).value,
|
||||
CPU: (document.getElementById('hw-CPU') as HTMLInputElement).value,
|
||||
RAM: (document.getElementById('hw-RAM') as HTMLInputElement).value,
|
||||
SSD1: (document.getElementById('hw-SSD1') as HTMLInputElement).value,
|
||||
SSD2: (document.getElementById('hw-SSD2') as HTMLInputElement).value,
|
||||
담당자_정: (document.getElementById('hw-담당자_정') as HTMLInputElement).value,
|
||||
관리자: (document.getElementById('hw-담당자_정') as HTMLInputElement).value,
|
||||
담당자_부: (document.getElementById('hw-담당자_부') as HTMLInputElement).value,
|
||||
};
|
||||
|
||||
if (type === '서버') {
|
||||
updated.용도 = (document.getElementById('hw-용도') as HTMLInputElement).value;
|
||||
updated.상세 = (document.getElementById('hw-상세') as HTMLInputElement).value;
|
||||
updated.비고 = (document.getElementById('hw-비고') as HTMLInputElement).value;
|
||||
updated.IP주소 = (document.getElementById('hw-IP주소') as HTMLInputElement).value;
|
||||
(updated as any).IP2 = (document.getElementById('hw-IP2') as HTMLInputElement).value;
|
||||
updated.원격접속 = (document.getElementById('hw-원격접속') as HTMLInputElement).value;
|
||||
(updated as any).서버ID = (document.getElementById('hw-서버ID') as HTMLInputElement).value;
|
||||
(updated as any).서버PW = (document.getElementById('hw-서버PW') as HTMLInputElement).value;
|
||||
updated.모니터링 = (document.getElementById('hw-모니터링') as HTMLInputElement).value;
|
||||
} else {
|
||||
updated.명칭 = (document.getElementById('hw-명칭') as HTMLInputElement).value;
|
||||
updated.구매일 = (document.getElementById('hw-구매일') as HTMLInputElement).value;
|
||||
updated.금액 = (document.getElementById('hw-금액') as HTMLInputElement).value;
|
||||
updated.HW사양 = (document.getElementById('hw-HW사양') as HTMLTextAreaElement).value;
|
||||
updated.IP주소 = (document.getElementById('hw-IP주소-non-server') as HTMLInputElement).value;
|
||||
|
||||
if (type === '전산비품') {
|
||||
updated.비품유형 = (document.getElementById('hw-비품유형') as HTMLSelectElement).value;
|
||||
}
|
||||
}
|
||||
|
||||
const idx = state.masterData.hw.findIndex(a => a.id === assetId);
|
||||
if (idx > -1) {
|
||||
state.masterData.hw[idx] = updated;
|
||||
renderTable(document.getElementById('main-content')!);
|
||||
switchToViewMode();
|
||||
}
|
||||
});
|
||||
|
||||
deleteBtn.addEventListener('click', () => {
|
||||
if (!currentAsset) return;
|
||||
if (confirm('정말로 이 자산을 삭제하시겠습니까?')) {
|
||||
state.masterData.hw = state.masterData.hw.filter(a => a.id !== currentAsset!.id);
|
||||
renderTable(document.getElementById('main-content')!);
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -1,342 +0,0 @@
|
||||
import { state } from '../../core/state';
|
||||
import { HardwareAsset, HardwareLog } from '../../core/excelHandler';
|
||||
import { openModal } from './BaseModal';
|
||||
|
||||
const PC_MODAL_HTML = `
|
||||
<div id="pc-asset-modal" class="modal-overlay hidden">
|
||||
<div class="modal-content wide">
|
||||
<div class="modal-header">
|
||||
<h2 id="pc-modal-title">개인PC 상세 정보</h2>
|
||||
<button id="btn-close-pc-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="pc-asset-form" class="grid-form">
|
||||
<input type="hidden" id="pc-asset-id" />
|
||||
<input type="hidden" id="pc-asset-type" value="개인PC" />
|
||||
<div class="form-group">
|
||||
<label for="pc-법인">법인</label>
|
||||
<select id="pc-법인" required>
|
||||
<option value="한맥">한맥 (HM)</option><option value="삼안">삼안 (SM)</option><option value="바론">바론 (BR)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="pc-자산코드">자산코드</label>
|
||||
<input type="text" id="pc-자산코드" placeholder="ex) HM-PC-2018-001" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="pc-사용자">사용자</label>
|
||||
<input type="text" id="pc-사용자" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="pc-위치">위치</label>
|
||||
<input type="text" id="pc-위치" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="pc-CPU">CPU</label>
|
||||
<input type="text" id="pc-CPU" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="pc-GPU">GPU</label>
|
||||
<input type="text" id="pc-GPU" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="pc-RAM">RAM</label>
|
||||
<input type="text" id="pc-RAM" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="pc-SSD1">SSD1</label>
|
||||
<input type="text" id="pc-SSD1" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="pc-SSD2">SSD2</label>
|
||||
<input type="text" id="pc-SSD2" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="pc-HDD1">HDD1</label>
|
||||
<input type="text" id="pc-HDD1" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="pc-HDD2">HDD2</label>
|
||||
<input type="text" id="pc-HDD2" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="pc-구매일">구매일</label>
|
||||
<input type="text" id="pc-구매일" placeholder="ex) 2024-01-01" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="pc-금액">금액</label>
|
||||
<input type="text" id="pc-금액" placeholder="ex) 1,000,000" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\d))/g, ',')" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="pc-납품업체">납품업체</label>
|
||||
<input type="text" id="pc-납품업체" />
|
||||
</div>
|
||||
|
||||
<div class="form-group full-width">
|
||||
<label>품의서 (파일)</label>
|
||||
<div style="display:flex; align-items:center; gap:0.5rem;">
|
||||
<input type="file" id="pc-품의서" />
|
||||
<span id="pc-품의서명" style="font-size:0.75rem; color:var(--text-light)"></span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-history-area">
|
||||
<div class="history-header">
|
||||
<h3><i data-lucide="history" style="width:16px; height:16px;"></i> 수정 이력</h3>
|
||||
</div>
|
||||
<div id="pc-history-list" class="history-timeline">
|
||||
<div class="empty-history">이력이 없습니다.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="btn-delete-pc-asset" class="btn btn-outline btn-danger">삭제</button>
|
||||
<div class="footer-actions">
|
||||
<button id="btn-revert-pc-edit" class="btn btn-outline hidden">수정 취소</button>
|
||||
<button id="btn-close-pc-footer" class="btn btn-outline">닫기</button>
|
||||
<button id="btn-save-pc-asset" class="btn btn-primary">수정</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
export function initPcModal(renderContent: () => void, closeModals: () => void) {
|
||||
if (!document.getElementById('pc-asset-modal')) {
|
||||
document.body.insertAdjacentHTML('beforeend', PC_MODAL_HTML);
|
||||
}
|
||||
|
||||
const pcForm = document.getElementById('pc-asset-form') as HTMLFormElement;
|
||||
const btnRevertEdit = document.getElementById('btn-revert-pc-edit') as HTMLButtonElement;
|
||||
const btnSavePc = document.getElementById('btn-save-pc-asset') as HTMLButtonElement;
|
||||
const btnDeletePc = document.getElementById('btn-delete-pc-asset') as HTMLButtonElement;
|
||||
const btnCloseHeader = document.getElementById('btn-close-pc-modal') as HTMLButtonElement;
|
||||
const btnCloseFooter = document.getElementById('btn-close-pc-footer') as HTMLButtonElement;
|
||||
|
||||
let isEditMode = false;
|
||||
let currentAsset: HardwareAsset | null = null;
|
||||
|
||||
const setEditMode = (edit: boolean) => {
|
||||
isEditMode = edit;
|
||||
if (edit) {
|
||||
pcForm.classList.add('is-edit-mode');
|
||||
pcForm.classList.remove('is-view-mode');
|
||||
btnSavePc.textContent = '저장';
|
||||
btnRevertEdit.classList.remove('hidden');
|
||||
btnCloseFooter.classList.add('hidden');
|
||||
} else {
|
||||
pcForm.classList.add('is-view-mode');
|
||||
pcForm.classList.remove('is-edit-mode');
|
||||
btnSavePc.textContent = '수정';
|
||||
btnRevertEdit.classList.add('hidden');
|
||||
btnCloseFooter.classList.remove('hidden');
|
||||
if (currentAsset) fillFormData(currentAsset);
|
||||
}
|
||||
};
|
||||
|
||||
function fillFormData(asset: HardwareAsset) {
|
||||
(document.getElementById('pc-asset-id') as HTMLInputElement).value = asset.id;
|
||||
(document.getElementById('pc-법인') as HTMLSelectElement).value = asset.법인;
|
||||
(document.getElementById('pc-자산코드') as HTMLInputElement).value = asset.자산코드;
|
||||
(document.getElementById('pc-사용자') as HTMLInputElement).value = asset.사용자 || '';
|
||||
(document.getElementById('pc-위치') as HTMLInputElement).value = asset.위치 || '';
|
||||
(document.getElementById('pc-CPU') as HTMLInputElement).value = asset.CPU || '';
|
||||
(document.getElementById('pc-GPU') as HTMLInputElement).value = asset.GPU || '';
|
||||
(document.getElementById('pc-RAM') as HTMLInputElement).value = asset.RAM || '';
|
||||
(document.getElementById('pc-SSD1') as HTMLInputElement).value = asset.SSD1 || '';
|
||||
(document.getElementById('pc-SSD2') as HTMLInputElement).value = asset.SSD2 || '';
|
||||
(document.getElementById('pc-HDD1') as HTMLInputElement).value = asset.HDD1 || '';
|
||||
(document.getElementById('pc-HDD2') as HTMLInputElement).value = asset.HDD2 || '';
|
||||
(document.getElementById('pc-구매일') as HTMLInputElement).value = asset.구매일 || '';
|
||||
(document.getElementById('pc-금액') as HTMLInputElement).value = asset.금액 || '';
|
||||
(document.getElementById('pc-납품업체') as HTMLInputElement).value = asset.납품업체 || '';
|
||||
(document.getElementById('pc-품의서명') as HTMLElement).innerText = asset.품의서명 ? `첨부: ${asset.품의서명}` : '';
|
||||
}
|
||||
|
||||
btnRevertEdit?.addEventListener('click', () => setEditMode(false));
|
||||
btnCloseHeader?.addEventListener('click', closeModals);
|
||||
btnCloseFooter?.addEventListener('click', closeModals);
|
||||
|
||||
btnSavePc?.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
if (!isEditMode) {
|
||||
setEditMode(true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!pcForm.checkValidity()) { pcForm.reportValidity(); return; }
|
||||
|
||||
// ... (저장 로직 유지)
|
||||
e.preventDefault();
|
||||
if (!pcForm.checkValidity()) { pcForm.reportValidity(); return; }
|
||||
|
||||
const id = (document.getElementById('pc-asset-id') as HTMLInputElement).value;
|
||||
const fileInput = document.getElementById('pc-품의서') as HTMLInputElement;
|
||||
const 품의서명 = fileInput.files && fileInput.files.length > 0 ? fileInput.files[0].name : (document.getElementById('pc-품의서명') as HTMLElement).innerText.replace('첨부: ', '');
|
||||
|
||||
const newAsset: HardwareAsset = {
|
||||
id: id || Math.random().toString(36).substring(2, 9),
|
||||
type: '개인PC',
|
||||
법인: (document.getElementById('pc-법인') as HTMLSelectElement).value,
|
||||
자산코드: (document.getElementById('pc-자산코드') as HTMLInputElement).value,
|
||||
명칭: '',
|
||||
위치: (document.getElementById('pc-위치') as HTMLInputElement).value,
|
||||
관리자: '', IP주소: '', MACaddress: '', HW사양: '', OS: '', 납품업체: (document.getElementById('pc-납품업체') as HTMLInputElement).value,
|
||||
사용자: (document.getElementById('pc-사용자') as HTMLInputElement).value,
|
||||
CPU: (document.getElementById('pc-CPU') as HTMLInputElement).value,
|
||||
GPU: (document.getElementById('pc-GPU') as HTMLInputElement).value,
|
||||
RAM: (document.getElementById('pc-RAM') as HTMLInputElement).value,
|
||||
SSD1: (document.getElementById('pc-SSD1') as HTMLInputElement).value,
|
||||
SSD2: (document.getElementById('pc-SSD2') as HTMLInputElement).value,
|
||||
HDD1: (document.getElementById('pc-HDD1') as HTMLInputElement).value,
|
||||
HDD2: (document.getElementById('pc-HDD2') as HTMLInputElement).value,
|
||||
구매일: (document.getElementById('pc-구매일') as HTMLInputElement).value,
|
||||
금액: (document.getElementById('pc-금액') as HTMLInputElement).value,
|
||||
품의서명
|
||||
};
|
||||
|
||||
if (id) {
|
||||
const idx = state.masterData.hw.findIndex(a => a.id === id);
|
||||
if(idx !== -1) {
|
||||
const oldAsset = state.masterData.hw[idx];
|
||||
const changes = getChangeDetails(oldAsset, newAsset);
|
||||
if (changes) {
|
||||
state.masterData.logs.push({
|
||||
id: Math.random().toString(36).substring(2, 9),
|
||||
assetId: id,
|
||||
date: new Date().toLocaleString(),
|
||||
details: changes,
|
||||
user: '관리자'
|
||||
});
|
||||
}
|
||||
state.masterData.hw[idx] = newAsset;
|
||||
}
|
||||
} else {
|
||||
state.masterData.hw.push(newAsset);
|
||||
}
|
||||
|
||||
closeModals();
|
||||
renderContent();
|
||||
});
|
||||
|
||||
btnDeletePc?.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const id = (document.getElementById('pc-asset-id') as HTMLInputElement).value;
|
||||
if (confirm('삭제하시겠습니까?')) {
|
||||
state.masterData.hw = state.masterData.hw.filter(a => a.id !== id);
|
||||
closeModals();
|
||||
renderContent();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function openPcModal(asset?: HardwareAsset) {
|
||||
const pcForm = document.getElementById('pc-asset-form') as HTMLFormElement;
|
||||
const deleteBtn = document.getElementById('btn-delete-pc-asset')!;
|
||||
const historyArea = document.querySelector('.modal-history-area') as HTMLElement;
|
||||
|
||||
openModal('pc-asset-modal');
|
||||
pcForm.reset();
|
||||
|
||||
if (asset) {
|
||||
document.getElementById('pc-modal-title')!.textContent = '개인PC 상세 정보 수정';
|
||||
deleteBtn.style.display = 'block';
|
||||
if (historyArea) historyArea.style.display = 'flex';
|
||||
|
||||
(document.getElementById('pc-asset-id') as HTMLInputElement).value = asset.id;
|
||||
(document.getElementById('pc-법인') as HTMLSelectElement).value = asset.법인;
|
||||
(document.getElementById('pc-자산코드') as HTMLInputElement).value = asset.자산코드;
|
||||
(document.getElementById('pc-사용자') as HTMLInputElement).value = asset.사용자 || '';
|
||||
(document.getElementById('pc-위치') as HTMLInputElement).value = asset.위치 || '';
|
||||
(document.getElementById('pc-CPU') as HTMLInputElement).value = asset.CPU || '';
|
||||
(document.getElementById('pc-GPU') as HTMLInputElement).value = asset.GPU || '';
|
||||
(document.getElementById('pc-RAM') as HTMLInputElement).value = asset.RAM || '';
|
||||
(document.getElementById('pc-SSD1') as HTMLInputElement).value = asset.SSD1 || '';
|
||||
(document.getElementById('pc-SSD2') as HTMLInputElement).value = asset.SSD2 || '';
|
||||
(document.getElementById('pc-HDD1') as HTMLInputElement).value = asset.HDD1 || '';
|
||||
(document.getElementById('pc-HDD2') as HTMLInputElement).value = asset.HDD2 || '';
|
||||
(document.getElementById('pc-구매일') as HTMLInputElement).value = asset.구매일 || '';
|
||||
(document.getElementById('pc-금액') as HTMLInputElement).value = asset.금액 || '';
|
||||
(document.getElementById('pc-납품업체') as HTMLInputElement).value = asset.납품업체 || '';
|
||||
(document.getElementById('pc-품의서명') as HTMLElement).innerText = asset.품의서명 ? `첨부: ${asset.품의서명}` : '';
|
||||
|
||||
renderHistory(asset.id);
|
||||
} else {
|
||||
document.getElementById('pc-modal-title')!.textContent = '신규 개인PC 자산 추가';
|
||||
deleteBtn.style.display = 'none';
|
||||
if (historyArea) historyArea.style.display = 'none';
|
||||
|
||||
(document.getElementById('pc-asset-id') as HTMLInputElement).value = '';
|
||||
(document.getElementById('pc-법인') as HTMLSelectElement).value = '한맥';
|
||||
(document.getElementById('pc-품의서명') as HTMLElement).innerText = '';
|
||||
}
|
||||
}
|
||||
|
||||
function getChangeDetails(oldAsset: HardwareAsset, newAsset: HardwareAsset): string {
|
||||
const changes: string[] = [];
|
||||
const fields = [
|
||||
{ key: '법인', label: '법인' },
|
||||
{ key: '자산코드', label: '자산코드' },
|
||||
{ key: '사용자', label: '사용자' },
|
||||
{ key: '위치', label: '위치' },
|
||||
{ key: 'CPU', label: 'CPU' },
|
||||
{ key: 'GPU', label: 'GPU' },
|
||||
{ key: 'RAM', label: 'RAM' },
|
||||
{ key: 'SSD1', label: 'SSD1' },
|
||||
{ key: 'SSD2', label: 'SSD2' },
|
||||
{ key: 'HDD1', label: 'HDD1' },
|
||||
{ key: 'HDD2', label: 'HDD2' },
|
||||
{ key: '구매일', label: '구매일' },
|
||||
{ key: '금액', label: '금액' },
|
||||
{ key: '납품업체', label: '납품업체' },
|
||||
{ key: '품의서명', label: '품의서' },
|
||||
];
|
||||
|
||||
fields.forEach(field => {
|
||||
const oldVal = (oldAsset as any)[field.key] || '';
|
||||
const newVal = (newAsset as any)[field.key] || '';
|
||||
if (oldVal !== newVal) {
|
||||
changes.push(`${field.label}: ${oldVal || '없음'} → ${newVal || '없음'}`);
|
||||
}
|
||||
});
|
||||
return changes.join('\n');
|
||||
}
|
||||
|
||||
function renderHistory(assetId: string) {
|
||||
const historyList = document.getElementById('pc-history-list');
|
||||
if (!historyList) return;
|
||||
|
||||
const logs = state.masterData.logs
|
||||
.filter(l => l.assetId === assetId)
|
||||
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
|
||||
|
||||
if (logs.length === 0) {
|
||||
historyList.innerHTML = '<div class="empty-history">이력이 없습니다.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
historyList.innerHTML = logs.map(log => `
|
||||
<div class="history-item">
|
||||
<div class="history-date">${log.date}</div>
|
||||
<div class="history-user">수정자: ${log.user}</div>
|
||||
<div class="history-details">${log.details.replace(/\\n/g, '<br>')}</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
@@ -1,222 +0,0 @@
|
||||
import { state } from '../../core/state';
|
||||
import { SoftwareAsset } from '../../core/excelHandler';
|
||||
import { openModal } from './BaseModal';
|
||||
|
||||
const SW_MODAL_HTML = `
|
||||
<div id="sw-asset-modal" class="modal-overlay hidden">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 id="sw-modal-title">S/W 상세 정보</h2>
|
||||
<button id="btn-close-sw-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="sw-asset-form" class="grid-form">
|
||||
<input type="hidden" id="sw-asset-id" />
|
||||
<input type="hidden" id="sw-asset-type" />
|
||||
<div class="form-group">
|
||||
<label for="sw-분야">분야</label>
|
||||
<select id="sw-분야" required>
|
||||
<option value="업무공통">업무공통</option>
|
||||
<option value="개발S/W">개발S/W</option>
|
||||
<option value="디자인">디자인</option>
|
||||
<option value="설계S/W">설계S/W</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="sw-법인">법인</label>
|
||||
<select id="sw-법인" required>
|
||||
<option value="한맥">한맥 (HM)</option>
|
||||
<option value="삼안 (SM)">삼안 (SM)</option>
|
||||
<option value="바론 (BR)">바론 (BR)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="sw-부서">부서</label>
|
||||
<input type="text" id="sw-부서" placeholder="ex) 경영지원팀" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="sw-제품명">제품명</label>
|
||||
<input type="text" id="sw-제품명" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="sw-구매일">구매일</label>
|
||||
<input type="text" id="sw-구매일" placeholder="ex) 2024-01-01" />
|
||||
</div>
|
||||
<div class="form-group" id="sw-구독일-group">
|
||||
<label for="sw-구독일">구독일(시작~끝)</label>
|
||||
<input type="text" id="sw-구독일" placeholder="ex) 2024-01-01 ~ 2024-12-31" />
|
||||
</div>
|
||||
<div class="form-group" id="sw-유지보수-group" style="display:none;">
|
||||
<label for="sw-유지보수여부">유지보수 여부</label>
|
||||
<label style="display:flex; align-items:center; gap:0.5rem; height: 38px; cursor: pointer;">
|
||||
<input type="checkbox" id="sw-유지보수여부" /> 대상 여부
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="sw-금액">금액</label>
|
||||
<input type="text" id="sw-금액" placeholder="ex) 1,000,000" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\d))/g, ',')" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="sw-수량">수량 (보유량)</label>
|
||||
<input type="number" id="sw-수량" min="1" value="1" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="sw-계정명">계정명</label>
|
||||
<input type="text" id="sw-계정명" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="sw-납품업체">납품업체</label>
|
||||
<input type="text" id="sw-납품업체" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="sw-비고">비고</label>
|
||||
<input type="text" id="sw-비고" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="btn-delete-sw-asset" class="btn btn-outline btn-danger">삭제</button>
|
||||
<div class="footer-actions">
|
||||
<button id="btn-revert-sw-edit" class="btn btn-outline hidden">수정 취소</button>
|
||||
<button id="btn-close-sw-footer" class="btn btn-outline">닫기</button>
|
||||
<button id="btn-save-sw-asset" class="btn btn-primary">수정</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
export function initSwModal(renderContent: () => void, closeModals: () => void) {
|
||||
if (!document.getElementById('sw-asset-modal')) {
|
||||
document.body.insertAdjacentHTML('beforeend', SW_MODAL_HTML);
|
||||
}
|
||||
|
||||
const swForm = document.getElementById('sw-asset-form') as HTMLFormElement;
|
||||
const btnRevertEdit = document.getElementById('btn-revert-sw-edit') as HTMLButtonElement;
|
||||
const btnSaveSw = document.getElementById('btn-save-sw-asset') as HTMLButtonElement;
|
||||
const btnDeleteSw = document.getElementById('btn-delete-sw-asset') as HTMLButtonElement;
|
||||
const btnCloseHeader = document.getElementById('btn-close-sw-modal') as HTMLButtonElement;
|
||||
const btnCloseFooter = document.getElementById('btn-close-sw-footer') as HTMLButtonElement;
|
||||
|
||||
let isEditMode = false;
|
||||
let currentAsset: SoftwareAsset | null = null;
|
||||
|
||||
const setEditMode = (edit: boolean) => {
|
||||
isEditMode = edit;
|
||||
if (edit) {
|
||||
swForm.classList.add('is-edit-mode');
|
||||
swForm.classList.remove('is-view-mode');
|
||||
btnSaveSw.textContent = '저장';
|
||||
btnRevertEdit.classList.remove('hidden');
|
||||
btnCloseFooter.classList.add('hidden');
|
||||
} else {
|
||||
swForm.classList.add('is-view-mode');
|
||||
swForm.classList.remove('is-edit-mode');
|
||||
btnSaveSw.textContent = '수정';
|
||||
btnRevertEdit.classList.add('hidden');
|
||||
btnCloseFooter.classList.remove('hidden');
|
||||
if (currentAsset) fillFormData(currentAsset);
|
||||
}
|
||||
};
|
||||
|
||||
function fillFormData(asset: SoftwareAsset) {
|
||||
(document.getElementById('sw-asset-id') as HTMLInputElement).value = asset.id;
|
||||
(document.getElementById('sw-asset-type') as HTMLInputElement).value = asset.type;
|
||||
(document.getElementById('sw-분야') as HTMLSelectElement).value = asset.분야 || '업무공통';
|
||||
(document.getElementById('sw-법인') as HTMLSelectElement).value = asset.법인;
|
||||
(document.getElementById('sw-부서') as HTMLInputElement).value = asset.부서 || '';
|
||||
(document.getElementById('sw-제품명') as HTMLInputElement).value = asset.제품명;
|
||||
(document.getElementById('sw-구매일') as HTMLInputElement).value = asset.구매일 || '';
|
||||
(document.getElementById('sw-구독일') as HTMLInputElement).value = asset.구독일 || '';
|
||||
(document.getElementById('sw-유지보수여부') as HTMLInputElement).checked = !!asset.유지보수여부;
|
||||
(document.getElementById('sw-금액') as HTMLInputElement).value = asset.금액 || '';
|
||||
(document.getElementById('sw-수량') as HTMLInputElement).value = String(asset.수량);
|
||||
(document.getElementById('sw-계정명') as HTMLInputElement).value = asset.계정명 || '';
|
||||
(document.getElementById('sw-납품업체') as HTMLInputElement).value = asset.납품업체 || '';
|
||||
(document.getElementById('sw-비고') as HTMLInputElement).value = asset.비고 || '';
|
||||
}
|
||||
|
||||
btnRevertEdit?.addEventListener('click', () => setEditMode(false));
|
||||
btnCloseHeader?.addEventListener('click', closeModals);
|
||||
btnCloseFooter?.addEventListener('click', closeModals);
|
||||
|
||||
btnSaveSw?.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
if (!isEditMode) {
|
||||
setEditMode(true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!swForm.checkValidity()) { swForm.reportValidity(); return; }
|
||||
|
||||
const id = (document.getElementById('sw-asset-id') as HTMLInputElement).value;
|
||||
const newAsset: SoftwareAsset = {
|
||||
id: id || Math.random().toString(36).substring(2, 9),
|
||||
type: (document.getElementById('sw-asset-type') as HTMLInputElement).value,
|
||||
분야: (document.getElementById('sw-분야') as HTMLSelectElement).value,
|
||||
법인: (document.getElementById('sw-법인') as HTMLSelectElement).value,
|
||||
부서: (document.getElementById('sw-부서') as HTMLInputElement).value,
|
||||
제품명: (document.getElementById('sw-제품명') as HTMLInputElement).value,
|
||||
구매일: (document.getElementById('sw-구매일') as HTMLInputElement).value,
|
||||
구독일: (document.getElementById('sw-구독일') as HTMLInputElement).value,
|
||||
유지보수여부: (document.getElementById('sw-유지보수여부') as HTMLInputElement).checked,
|
||||
금액: (document.getElementById('sw-금액') as HTMLInputElement).value,
|
||||
수량: parseInt((document.getElementById('sw-수량') as HTMLInputElement).value || '1', 10),
|
||||
계정명: (document.getElementById('sw-계정명') as HTMLInputElement).value,
|
||||
납품업체: (document.getElementById('sw-납품업체') as HTMLInputElement).value,
|
||||
비고: (document.getElementById('sw-비고') as HTMLInputElement).value,
|
||||
};
|
||||
|
||||
if (id) {
|
||||
const idx = state.masterData.sw.findIndex(a => a.id === id);
|
||||
if(idx !== -1) state.masterData.sw[idx] = newAsset;
|
||||
} else {
|
||||
state.masterData.sw.push(newAsset);
|
||||
}
|
||||
|
||||
closeModals();
|
||||
renderContent();
|
||||
});
|
||||
|
||||
btnDeleteSw?.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const id = (document.getElementById('sw-asset-id') as HTMLInputElement).value;
|
||||
if (confirm('삭제하시겠습니까?')) {
|
||||
state.masterData.sw = state.masterData.sw.filter(a => a.id !== id);
|
||||
closeModals();
|
||||
renderContent();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function openSwModal(asset?: SoftwareAsset) {
|
||||
currentAsset = asset || null;
|
||||
const swForm = document.getElementById('sw-asset-form') as HTMLFormElement;
|
||||
const deleteBtn = document.getElementById('btn-delete-sw-asset')!;
|
||||
|
||||
openModal('sw-asset-modal');
|
||||
swForm.reset();
|
||||
|
||||
const subGroup = document.getElementById('sw-구독일-group')!;
|
||||
const permGroup = document.getElementById('sw-유지보수-group')!;
|
||||
if (state.activeSubTab === '구독SW') {
|
||||
subGroup.style.display = 'flex';
|
||||
permGroup.style.display = 'none';
|
||||
} else {
|
||||
subGroup.style.display = 'none';
|
||||
permGroup.style.display = 'flex';
|
||||
}
|
||||
|
||||
if (asset) {
|
||||
document.getElementById('sw-modal-title')!.textContent = `${state.activeSubTab} 상세 정보 수정`;
|
||||
deleteBtn.style.display = 'block';
|
||||
fillFormData(asset);
|
||||
setEditMode(false);
|
||||
} else {
|
||||
document.getElementById('sw-modal-title')!.textContent = `신규 ${state.activeSubTab} 자산 추가`;
|
||||
deleteBtn.style.display = 'none';
|
||||
(document.getElementById('sw-asset-id') as HTMLInputElement).value = '';
|
||||
(document.getElementById('sw-asset-type') as HTMLInputElement).value = state.activeSubTab;
|
||||
setEditMode(true);
|
||||
}
|
||||
}
|
||||
@@ -1,241 +0,0 @@
|
||||
import { state } from '../../core/state';
|
||||
import { SoftwareAsset, SWUser } from '../../core/excelHandler';
|
||||
import { openModal } from './BaseModal';
|
||||
import { createIcons, Edit2, X, Paperclip } from 'lucide';
|
||||
|
||||
let currentSwUserAssetId: string = '';
|
||||
let tempSwUsers: SWUser[] = [];
|
||||
|
||||
const SW_USER_MODAL_HTML = `
|
||||
<!-- S/W 할당 사용자 목록 모달 -->
|
||||
<div id="sw-user-modal" class="modal-overlay hidden">
|
||||
<div class="modal-content" style="max-width: 800px;">
|
||||
<div class="modal-header">
|
||||
<h2 id="sw-user-modal-title">S/W 할당 사용자 목록</h2>
|
||||
<button id="btn-close-sw-user-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<input type="hidden" id="sw-user-asset-id" />
|
||||
<div style="text-align: right; margin-bottom: 0.75rem;">
|
||||
<button type="button" id="btn-open-add-user" class="btn btn-primary btn-sm"><i data-lucide="plus"></i> 사용자 추가</button>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table style="width:100%;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>법인</th>
|
||||
<th>부서/팀</th>
|
||||
<th>직위</th>
|
||||
<th>이름</th>
|
||||
<th>사용기간</th>
|
||||
<th>증빙</th>
|
||||
<th style="text-align:center;">관리</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="user-list-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div></div>
|
||||
<div class="footer-actions">
|
||||
<button id="btn-save-sw-user-mapping" class="btn btn-primary">변경사항 저장</button>
|
||||
<button id="btn-cancel-sw-user-modal" class="btn btn-outline">닫기</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 사용자 추가/수정 서브 모달 -->
|
||||
<div id="sw-user-edit-modal" class="modal-overlay hidden" style="z-index: 1100;">
|
||||
<div class="modal-content" style="max-width: 500px;">
|
||||
<div class="modal-header">
|
||||
<h2 id="sw-user-edit-modal-title">사용자 정보</h2>
|
||||
<button id="btn-close-sw-user-edit" class="btn-icon"><i data-lucide="x"></i></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<input type="hidden" id="edit-user-idx" />
|
||||
<div class="grid-form" style="grid-template-columns: 1fr;">
|
||||
<div class="form-group">
|
||||
<label>법인</label>
|
||||
<select id="new-user-법인">
|
||||
<option value="한맥">한맥</option><option value="삼안">삼안</option><option value="바론">바론</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>부서</label>
|
||||
<input type="text" id="new-user-부서" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>팀</label>
|
||||
<input type="text" id="new-user-팀" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>직위</label>
|
||||
<input type="text" id="new-user-직위" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>이름</label>
|
||||
<input type="text" id="new-user-이름" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>사용기간</label>
|
||||
<input type="text" id="new-user-사용기간" placeholder="ex) 2024.01 ~ 2024.12" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>신청서 (증빙파일)</label>
|
||||
<input type="file" id="new-user-신청서" />
|
||||
<span id="new-user-신청서명" style="font-size:0.75rem; color:var(--text-muted);"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="btn-cancel-sw-user-edit" class="btn btn-outline">취소</button>
|
||||
<button id="btn-save-edit-user" class="btn btn-primary">확인</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
export function initSwUserModal(renderContent: () => void, closeModals: () => void) {
|
||||
if (!document.getElementById('sw-user-modal')) {
|
||||
document.body.insertAdjacentHTML('beforeend', SW_USER_MODAL_HTML);
|
||||
}
|
||||
|
||||
const btnOpenAddUser = document.getElementById('btn-open-add-user');
|
||||
const btnSaveEditUser = document.getElementById('btn-save-edit-user');
|
||||
const btnSaveSwUserMapping = document.getElementById('btn-save-sw-user-mapping');
|
||||
const btnCancelUserEdit = document.getElementById('btn-cancel-sw-user-edit');
|
||||
const btnCloseUserEdit = document.getElementById('btn-close-sw-user-edit');
|
||||
const btnCancelUserModal = document.getElementById('btn-cancel-sw-user-modal');
|
||||
const btnCloseUserModal = document.getElementById('btn-close-sw-user-modal');
|
||||
|
||||
btnOpenAddUser?.addEventListener('click', () => openUserEditModal(-1));
|
||||
btnSaveEditUser?.addEventListener('click', () => saveUserEdit());
|
||||
|
||||
btnSaveSwUserMapping?.addEventListener('click', () => {
|
||||
state.masterData.swUsers = state.masterData.swUsers.filter(u => u.swId !== currentSwUserAssetId);
|
||||
state.masterData.swUsers.push(...tempSwUsers);
|
||||
document.getElementById('sw-user-modal')?.classList.add('hidden');
|
||||
renderContent();
|
||||
});
|
||||
|
||||
btnCancelUserEdit?.addEventListener('click', () => document.getElementById('sw-user-edit-modal')?.classList.add('hidden'));
|
||||
btnCloseUserEdit?.addEventListener('click', () => document.getElementById('sw-user-edit-modal')?.classList.add('hidden'));
|
||||
btnCancelUserModal?.addEventListener('click', () => document.getElementById('sw-user-modal')?.classList.add('hidden'));
|
||||
btnCloseUserModal?.addEventListener('click', () => document.getElementById('sw-user-modal')?.classList.add('hidden'));
|
||||
}
|
||||
|
||||
function renderUserList() {
|
||||
const tbody = document.getElementById('user-list-body')!;
|
||||
tbody.innerHTML = '';
|
||||
if (tempSwUsers.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="7" style="padding: 2rem; text-align: center; color: var(--text-muted);">할당된 사용자가 없습니다.</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
tempSwUsers.forEach((user, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
const deptTeam = [user.부서, user.팀].filter(Boolean).join(' / ') || '-';
|
||||
const attachIcon = user.신청서명 ? `<i data-lucide="paperclip" class="text-primary" style="width:16px; height:16px;" title="${user.신청서명}"></i>` : '-';
|
||||
|
||||
tr.innerHTML = `
|
||||
<td>${user.법인}</td>
|
||||
<td>${deptTeam}</td>
|
||||
<td>${user.직위 || '-'}</td>
|
||||
<td><strong>${user.이름}</strong></td>
|
||||
<td style="text-align:center;">${user.사용기간 || '-'}</td>
|
||||
<td style="text-align:center;">${attachIcon}</td>
|
||||
<td style="text-align:center;">
|
||||
<button type="button" class="btn-icon btn-edit-user" data-idx="${idx}" style="color: var(--primary-color);"><i data-lucide="edit-2" style="width:14px; height:14px;"></i></button>
|
||||
<button type="button" class="btn-icon btn-remove-user" data-idx="${idx}" style="color: var(--danger);"><i data-lucide="x" style="width:14px; height:14px;"></i></button>
|
||||
</td>
|
||||
`;
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
|
||||
createIcons({ icons: { Edit2, X, Paperclip } });
|
||||
|
||||
tbody.querySelectorAll('.btn-edit-user').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
const idx = parseInt((e.currentTarget as HTMLElement).getAttribute('data-idx')!);
|
||||
openUserEditModal(idx);
|
||||
});
|
||||
});
|
||||
|
||||
tbody.querySelectorAll('.btn-remove-user').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
const idx = parseInt((e.currentTarget as HTMLButtonElement).getAttribute('data-idx')!);
|
||||
tempSwUsers.splice(idx, 1);
|
||||
renderUserList();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export function openSwUserModal(asset: SoftwareAsset) {
|
||||
openModal('sw-user-modal');
|
||||
currentSwUserAssetId = asset.id;
|
||||
tempSwUsers = state.masterData.swUsers.filter(u => u.swId === asset.id).map(u => ({...u}));
|
||||
renderUserList();
|
||||
}
|
||||
|
||||
function openUserEditModal(idx: number) {
|
||||
const editModal = document.getElementById('sw-user-edit-modal')!;
|
||||
editModal.classList.remove('hidden');
|
||||
(document.getElementById('edit-user-idx') as HTMLInputElement).value = String(idx);
|
||||
|
||||
if (idx === -1) {
|
||||
document.getElementById('sw-user-edit-modal-title')!.innerText = '새 사용자 추가';
|
||||
(document.getElementById('new-user-법인') as HTMLSelectElement).value = '한맥';
|
||||
(document.getElementById('new-user-부서') as HTMLInputElement).value = '';
|
||||
(document.getElementById('new-user-팀') as HTMLInputElement).value = '';
|
||||
(document.getElementById('new-user-직위') as HTMLInputElement).value = '';
|
||||
(document.getElementById('new-user-이름') as HTMLInputElement).value = '';
|
||||
(document.getElementById('new-user-사용기간') as HTMLInputElement).value = '';
|
||||
(document.getElementById('new-user-신청서') as HTMLInputElement).value = '';
|
||||
document.getElementById('new-user-신청서명')!.innerText = '';
|
||||
} else {
|
||||
document.getElementById('sw-user-edit-modal-title')!.innerText = '사용자 정보 수정';
|
||||
const u = tempSwUsers[idx];
|
||||
(document.getElementById('new-user-법인') as HTMLSelectElement).value = u.법인;
|
||||
(document.getElementById('new-user-부서') as HTMLInputElement).value = u.부서;
|
||||
(document.getElementById('new-user-팀') as HTMLInputElement).value = u.팀;
|
||||
(document.getElementById('new-user-직위') as HTMLInputElement).value = u.직위;
|
||||
(document.getElementById('new-user-이름') as HTMLInputElement).value = u.이름;
|
||||
(document.getElementById('new-user-사용기간') as HTMLInputElement).value = u.사용기간;
|
||||
(document.getElementById('new-user-신청서') as HTMLInputElement).value = '';
|
||||
document.getElementById('new-user-신청서명')!.innerText = u.신청서명 ? `첨부: ${u.신청서명}` : '';
|
||||
}
|
||||
}
|
||||
|
||||
function saveUserEdit() {
|
||||
const idx = parseInt((document.getElementById('edit-user-idx') as HTMLInputElement).value);
|
||||
const 이름 = (document.getElementById('new-user-이름') as HTMLInputElement).value.trim();
|
||||
if (!이름) { alert('이름을 입력해주세요.'); return; }
|
||||
|
||||
const fileInput = document.getElementById('new-user-신청서') as HTMLInputElement;
|
||||
let 신청서명 = '';
|
||||
if (fileInput.files && fileInput.files.length > 0) {
|
||||
신청서명 = fileInput.files[0].name;
|
||||
} else if (idx !== -1) {
|
||||
신청서명 = tempSwUsers[idx].신청서명;
|
||||
}
|
||||
|
||||
const userData: SWUser = {
|
||||
id: idx === -1 ? Math.random().toString(36).substring(2, 9) : tempSwUsers[idx].id,
|
||||
swId: currentSwUserAssetId,
|
||||
법인: (document.getElementById('new-user-법인') as HTMLSelectElement).value,
|
||||
부서: (document.getElementById('new-user-부서') as HTMLInputElement).value,
|
||||
팀: (document.getElementById('new-user-팀') as HTMLInputElement).value,
|
||||
직위: (document.getElementById('new-user-직위') as HTMLInputElement).value,
|
||||
이름,
|
||||
사용기간: (document.getElementById('new-user-사용기간') as HTMLInputElement).value,
|
||||
신청서명
|
||||
};
|
||||
|
||||
if (idx === -1) tempSwUsers.push(userData);
|
||||
else tempSwUsers[idx] = userData;
|
||||
|
||||
document.getElementById('sw-user-edit-modal')?.classList.add('hidden');
|
||||
renderUserList();
|
||||
}
|
||||
@@ -1,161 +0,0 @@
|
||||
import { state } from '../../core/state';
|
||||
import { HardwareAsset } from '../../core/excelHandler';
|
||||
import { openModal } from './BaseModal';
|
||||
|
||||
const STORAGE_MODAL_HTML = `
|
||||
<div id="storage-asset-modal" class="modal-overlay hidden">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 id="storage-modal-title">스토리지 상세 정보</h2>
|
||||
<button id="btn-close-storage-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="storage-asset-form" class="grid-form">
|
||||
<input type="hidden" id="storage-asset-id" />
|
||||
<input type="hidden" id="storage-asset-type" value="스토리지" />
|
||||
<div class="form-group"><label for="storage-법인">법인</label><input type="text" id="storage-법인" required /></div>
|
||||
<div class="form-group"><label for="storage-유형">유형</label><input type="text" id="storage-유형" required /></div>
|
||||
<div class="form-group"><label for="storage-자산코드">자산코드</label><input type="text" id="storage-자산코드" required /></div>
|
||||
<div class="form-group"><label for="storage-명칭">명칭</label><input type="text" id="storage-명칭" required /></div>
|
||||
<div class="form-group"><label for="storage-위치">위치</label><input type="text" id="storage-위치" /></div>
|
||||
<div class="form-group"><label for="storage-모델명">모델명</label><input type="text" id="storage-모델명" /></div>
|
||||
<div class="form-group"><label for="storage-용량">용량</label><input type="text" id="storage-용량" /></div>
|
||||
<div class="form-group"><label for="storage-담당자_정">담당자(정)</label><input type="text" id="storage-담당자_정" /></div>
|
||||
<div class="form-group"><label for="storage-IP주소">IP주소</label><input type="text" id="storage-IP주소" /></div>
|
||||
<div class="form-group"><label for="storage-구매일">구매일</label><input type="text" id="storage-구매일" /></div>
|
||||
<div class="form-group"><label for="storage-금액">금액</label><input type="text" id="storage-금액" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\d))/g, ',')" /></div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="btn-delete-storage-asset" class="btn btn-outline btn-danger">삭제</button>
|
||||
<div class="footer-actions">
|
||||
<button id="btn-revert-storage-edit" class="btn btn-outline hidden">수정 취소</button>
|
||||
<button id="btn-close-storage-footer" class="btn btn-outline">닫기</button>
|
||||
<button id="btn-save-storage-asset" class="btn btn-primary">수정</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
export function initStorageModal(renderContent: () => void, closeModals: () => void) {
|
||||
if (!document.getElementById('storage-asset-modal')) {
|
||||
document.body.insertAdjacentHTML('beforeend', STORAGE_MODAL_HTML);
|
||||
}
|
||||
|
||||
const storageForm = document.getElementById('storage-asset-form') as HTMLFormElement;
|
||||
const btnRevertEdit = document.getElementById('btn-revert-storage-edit') as HTMLButtonElement;
|
||||
const btnSaveStorage = document.getElementById('btn-save-storage-asset') as HTMLButtonElement;
|
||||
const btnDeleteStorage = document.getElementById('btn-delete-storage-asset') as HTMLButtonElement;
|
||||
const btnCloseHeader = document.getElementById('btn-close-storage-modal') as HTMLButtonElement;
|
||||
const btnCloseFooter = document.getElementById('btn-close-storage-footer') as HTMLButtonElement;
|
||||
|
||||
let isEditMode = false;
|
||||
let currentAsset: HardwareAsset | null = null;
|
||||
|
||||
const setEditMode = (edit: boolean) => {
|
||||
isEditMode = edit;
|
||||
if (edit) {
|
||||
storageForm.classList.add('is-edit-mode');
|
||||
storageForm.classList.remove('is-view-mode');
|
||||
btnSaveStorage.textContent = '저장';
|
||||
btnRevertEdit.classList.remove('hidden');
|
||||
btnCloseFooter.classList.add('hidden');
|
||||
} else {
|
||||
storageForm.classList.add('is-view-mode');
|
||||
storageForm.classList.remove('is-edit-mode');
|
||||
btnSaveStorage.textContent = '수정';
|
||||
btnRevertEdit.classList.add('hidden');
|
||||
btnCloseFooter.classList.remove('hidden');
|
||||
if (currentAsset) fillFormData(currentAsset);
|
||||
}
|
||||
};
|
||||
|
||||
function fillFormData(asset: HardwareAsset) {
|
||||
(document.getElementById('storage-asset-id') as HTMLInputElement).value = asset.id;
|
||||
(document.getElementById('storage-법인') as HTMLInputElement).value = asset.법인;
|
||||
(document.getElementById('storage-유형') as HTMLInputElement).value = asset.storage유형 || 'NAS';
|
||||
(document.getElementById('storage-자산코드') as HTMLInputElement).value = asset.자산코드;
|
||||
(document.getElementById('storage-명칭') as HTMLInputElement).value = asset.명칭;
|
||||
(document.getElementById('storage-위치') as HTMLInputElement).value = asset.위치 || '';
|
||||
(document.getElementById('storage-모델명') as HTMLInputElement).value = asset.모델명 || '';
|
||||
(document.getElementById('storage-용량') as HTMLInputElement).value = asset.용량 || '';
|
||||
(document.getElementById('storage-담당자_정') as HTMLInputElement).value = asset.담당자_정 || '';
|
||||
(document.getElementById('storage-IP주소') as HTMLInputElement).value = asset.IP주소 || '';
|
||||
(document.getElementById('storage-구매일') as HTMLInputElement).value = asset.구매일 || '';
|
||||
(document.getElementById('storage-금액') as HTMLInputElement).value = asset.금액 || '';
|
||||
}
|
||||
|
||||
btnRevertEdit?.addEventListener('click', () => setEditMode(false));
|
||||
btnCloseHeader?.addEventListener('click', closeModals);
|
||||
btnCloseFooter?.addEventListener('click', closeModals);
|
||||
|
||||
btnSaveStorage?.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
if (!isEditMode) {
|
||||
setEditMode(true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!storageForm.checkValidity()) { storageForm.reportValidity(); return; }
|
||||
|
||||
const id = (document.getElementById('storage-asset-id') as HTMLInputElement).value;
|
||||
const newAsset: HardwareAsset = {
|
||||
id: id || Math.random().toString(36).substring(2, 9),
|
||||
type: '스토리지',
|
||||
법인: (document.getElementById('storage-법인') as HTMLInputElement).value,
|
||||
storage유형: (document.getElementById('storage-유형') as HTMLInputElement).value,
|
||||
자산코드: (document.getElementById('storage-자산코드') as HTMLInputElement).value,
|
||||
명칭: (document.getElementById('storage-명칭') as HTMLInputElement).value,
|
||||
위치: (document.getElementById('storage-위치') as HTMLInputElement).value,
|
||||
모델명: (document.getElementById('storage-모델명') as HTMLInputElement).value,
|
||||
용량: (document.getElementById('storage-용량') as HTMLInputElement).value,
|
||||
담당자_정: (document.getElementById('storage-담당자_정') as HTMLInputElement).value,
|
||||
IP주소: (document.getElementById('storage-IP주소') as HTMLInputElement).value,
|
||||
구매일: (document.getElementById('storage-구매일') as HTMLInputElement).value,
|
||||
금액: (document.getElementById('storage-금액') as HTMLInputElement).value,
|
||||
관리자: '', MACaddress: '', HW사양: '', OS: '', 납품업체: '', 품의서명: ''
|
||||
};
|
||||
|
||||
if (id) {
|
||||
const idx = state.masterData.hw.findIndex(a => a.id === id);
|
||||
if(idx !== -1) state.masterData.hw[idx] = newAsset;
|
||||
} else {
|
||||
state.masterData.hw.push(newAsset);
|
||||
}
|
||||
|
||||
closeModals();
|
||||
renderContent();
|
||||
});
|
||||
|
||||
btnDeleteStorage?.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const id = (document.getElementById('storage-asset-id') as HTMLInputElement).value;
|
||||
if (confirm('삭제하시겠습니까?')) {
|
||||
state.masterData.hw = state.masterData.hw.filter(a => a.id !== id);
|
||||
closeModals();
|
||||
renderContent();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function openStorageModal(asset?: HardwareAsset) {
|
||||
currentAsset = asset || null;
|
||||
const storageForm = document.getElementById('storage-asset-form') as HTMLFormElement;
|
||||
const deleteBtn = document.getElementById('btn-delete-storage-asset')!;
|
||||
|
||||
openModal('storage-asset-modal');
|
||||
storageForm.reset();
|
||||
|
||||
if (asset) {
|
||||
document.getElementById('storage-modal-title')!.textContent = '스토리지 상세 정보 수정';
|
||||
deleteBtn.style.display = 'block';
|
||||
fillFormData(asset);
|
||||
setEditMode(false);
|
||||
} else {
|
||||
document.getElementById('storage-modal-title')!.textContent = '신규 스토리지 자산 추가';
|
||||
deleteBtn.style.display = 'none';
|
||||
(document.getElementById('storage-asset-id') as HTMLInputElement).value = '';
|
||||
setEditMode(true);
|
||||
}
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
import { state } from '../core/state';
|
||||
|
||||
const MENU_CONFIG = {
|
||||
hw: {
|
||||
label: '하드웨어',
|
||||
tabs: ['대시보드', '개인PC', '서버', '스토리지', '전산비품']
|
||||
},
|
||||
sw: {
|
||||
label: '소프트웨어',
|
||||
tabs: ['대시보드', '구독SW', '영구SW']
|
||||
},
|
||||
ops: {
|
||||
label: '운영 서비스',
|
||||
tabs: ['대시보드', '서비스현황', '백업관리', '보안점검']
|
||||
}
|
||||
};
|
||||
|
||||
export function renderNavigation(onTabChange: (tab: string) => void) {
|
||||
const navContainer = document.getElementById('main-nav')!;
|
||||
const btnAddAsset = document.getElementById('btn-add-asset') as HTMLButtonElement;
|
||||
|
||||
const render = () => {
|
||||
navContainer.innerHTML = '';
|
||||
|
||||
(Object.keys(MENU_CONFIG) as Array<keyof typeof MENU_CONFIG>).forEach(catKey => {
|
||||
const config = MENU_CONFIG[catKey];
|
||||
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;
|
||||
state.activeSubTab = '대시보드';
|
||||
if (btnAddAsset) btnAddAsset.classList.add('hidden');
|
||||
render();
|
||||
onTabChange('대시보드');
|
||||
}
|
||||
});
|
||||
group.appendChild(trigger);
|
||||
|
||||
// 하위 탭 선반 (Shelf)
|
||||
const shelf = document.createElement('div');
|
||||
shelf.className = 'lnb-shelf';
|
||||
|
||||
config.tabs.forEach(tab => {
|
||||
const item = document.createElement('div');
|
||||
item.className = `lnb-item ${isActive && state.activeSubTab === tab ? 'active' : ''}`;
|
||||
item.textContent = tab;
|
||||
|
||||
item.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
state.activeCategory = catKey;
|
||||
state.activeSubTab = tab;
|
||||
|
||||
if (btnAddAsset) {
|
||||
if (tab === '대시보드') btnAddAsset.classList.add('hidden');
|
||||
else btnAddAsset.classList.remove('hidden');
|
||||
}
|
||||
|
||||
render();
|
||||
onTabChange(tab);
|
||||
});
|
||||
shelf.appendChild(item);
|
||||
});
|
||||
group.appendChild(shelf);
|
||||
|
||||
// 마우스 오버 시 다른 그룹의 선반은 가리고 내 것만 보여주는 스타일은 CSS에서 처리함
|
||||
navContainer.appendChild(group);
|
||||
});
|
||||
};
|
||||
|
||||
render();
|
||||
}
|
||||
@@ -1,232 +0,0 @@
|
||||
import { MasterAssetData, HardwareAsset, SoftwareAsset, SWUser } from './excelHandler';
|
||||
|
||||
const corps = ['한맥', '삼안', '바론'];
|
||||
const users = ['홍길동', '김철수', '이영희', '박지훈', '김팀장', '신유진', '윤대웅', '마리아'];
|
||||
const depts = ['설계팀', '기술팀', '경영지원팀', '영업팀'];
|
||||
|
||||
function rand(arr: any[]) {
|
||||
return arr[Math.floor(Math.random() * arr.length)];
|
||||
}
|
||||
|
||||
function randDate(startYear: number, endYear: number) {
|
||||
const y = Math.floor(Math.random() * (endYear - startYear + 1)) + startYear;
|
||||
const m = String(Math.floor(Math.random() * 12) + 1).padStart(2, '0');
|
||||
const d = String(Math.floor(Math.random() * 28) + 1).padStart(2, '0');
|
||||
return `${y}-${m}-${d}`;
|
||||
}
|
||||
|
||||
function randUser() { // 25% 확률로 유휴자산 할당
|
||||
return Math.random() < 0.25 ? '' : rand(users);
|
||||
}
|
||||
|
||||
export function generateDummyData(): MasterAssetData {
|
||||
const hw: HardwareAsset[] = [];
|
||||
const sw: SoftwareAsset[] = [];
|
||||
const swUsers: SWUser[] = [];
|
||||
|
||||
// 1. 개인PC 50개
|
||||
for (let i = 1; i <= 50; i++) {
|
||||
const purchaseYear = Math.floor(Math.random() * 10) + 2017; // 2017~2026
|
||||
hw.push({
|
||||
id: Math.random().toString(36).substring(2, 9),
|
||||
type: '개인PC',
|
||||
법인: rand(corps),
|
||||
자산코드: `HM-PC-${purchaseYear}-${String(i).padStart(3, '0')}`,
|
||||
명칭: '',
|
||||
위치: `${rand(['본사', '지사'])} ${Math.floor(Math.random()*5)+1}층`,
|
||||
사용자: randUser(),
|
||||
CPU: rand(['i5-10400', 'i7-12700', 'Ryzen 5', 'Ryzen 7']),
|
||||
GPU: rand(['-', 'GTX 1660', 'RTX 3060', 'RTX 4070']),
|
||||
RAM: rand(['16GB', '32GB']),
|
||||
SSD1: rand(['256GB', '512GB', '1TB']),
|
||||
SSD2: '',
|
||||
HDD1: rand(['-', '1TB', '2TB']),
|
||||
HDD2: '',
|
||||
구매일: randDate(purchaseYear, purchaseYear),
|
||||
금액: String(Math.floor(Math.random()*100 + 50) * 10000).replace(/\B(?=(\d{3})+(?!\d))/g, ','),
|
||||
납품업체: rand(['다나와', '컴퓨존', '오피스디포']),
|
||||
품의서명: '',
|
||||
관리자: '', IP주소: '', MACaddress: '', OS: '', HW사양: ''
|
||||
});
|
||||
}
|
||||
|
||||
// 2. 서버 20개
|
||||
for (let i = 1; i <= 20; i++) {
|
||||
const purchaseYear = Math.floor(Math.random() * 10) + 2017; // 2017~2026
|
||||
hw.push({
|
||||
id: Math.random().toString(36).substring(2, 9),
|
||||
type: '서버',
|
||||
법인: rand(corps),
|
||||
자산코드: `HM-SV-${purchaseYear}-${String(i).padStart(3, '0')}`,
|
||||
명칭: `웹/DB 서버 #${i}`,
|
||||
용도: rand(['웹 서버', 'DB 서버', '백업 서버', '개발 서버']),
|
||||
storage유형: rand(['물리', 'VM']),
|
||||
위치: rand(['IDC 1센터', 'IDC 2센터', '본사 전산실']),
|
||||
관리자: rand(users),
|
||||
담당자_정: rand(users),
|
||||
담당자_부: rand(users),
|
||||
IP주소: `192.168.10.${i}`,
|
||||
원격접속: `ssh://192.168.10.${i}:22`,
|
||||
MACaddress: '00:11:22:33:44:' + String(i).padStart(2, '0'),
|
||||
OS: rand(['Windows Server 2019', 'Ubuntu 22.04 LTS', 'CentOS 7']),
|
||||
모델명: rand(['Dell PowerEdge R740', 'HP ProLiant DL380', 'Lenovo ThinkSystem']),
|
||||
CPU: rand(['Xeon Silver 4210', 'Xeon Gold 6248', 'EPYC 7702']),
|
||||
RAM: rand(['64GB', '128GB', '256GB']),
|
||||
GPU: rand(['-', 'RTX A4000', 'Tesla V100']),
|
||||
SSD1: rand(['512GB SSD', '1TB NVMe']),
|
||||
SSD2: rand(['-', '1TB SSD', '2TB SSD']),
|
||||
HDD1: rand(['-', '4TB HDD', '8TB HDD']),
|
||||
모니터링: rand(['Zabbix', 'Grafana', 'PRTG']),
|
||||
비고: i % 5 === 0 ? '정기 점검 대상' : '-',
|
||||
HW사양: 'Xeon 16Core, 64GB RAM',
|
||||
구매일: randDate(purchaseYear, purchaseYear),
|
||||
금액: '5,000,000',
|
||||
납품업체: '서버뱅크',
|
||||
품의서명: ''
|
||||
});
|
||||
}
|
||||
|
||||
// 3. 스토리지 20개
|
||||
for (let i = 1; i <= 20; i++) {
|
||||
const purchaseYear = Math.floor(Math.random() * 10) + 2017; // 2017~2026
|
||||
hw.push({
|
||||
id: Math.random().toString(36).substring(2, 9),
|
||||
type: '스토리지',
|
||||
법인: rand(corps),
|
||||
storage유형: rand(['NAS', 'DAS']),
|
||||
자산코드: `HM-ST-${purchaseYear}-${String(i).padStart(3, '0')}`,
|
||||
명칭: `백업 스토리지 #${i}`,
|
||||
위치: '전산실',
|
||||
모델명: rand(['Synology DS920+', 'QNAP TS-453D']),
|
||||
용량: rand(['16TB', '32TB', '64TB']),
|
||||
담당자_정: randUser(),
|
||||
담당자_부: rand(users),
|
||||
IP주소: `192.168.20.${i}`,
|
||||
MACaddress: '',
|
||||
구매일: randDate(purchaseYear, purchaseYear),
|
||||
금액: '1,500,000',
|
||||
납품업체: '스토리지넷',
|
||||
품의서명: '',
|
||||
관리자: '', OS: '', HW사양: ''
|
||||
});
|
||||
}
|
||||
|
||||
// 4. 전산비품 (노트북, 태블릿, 휴대폰 각각 5개씩)
|
||||
const equips = [
|
||||
{ type: '노트북', code: 'NB', name: 'LG 그램 16인치', price: '1,800,000' },
|
||||
{ type: '태블릿', code: 'TB', name: '아이패드 프로 12.9', price: '1,500,000' },
|
||||
{ type: '휴대폰', code: 'PH', name: '갤럭시 S24', price: '1,200,000' }
|
||||
];
|
||||
equips.forEach((eq) => {
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
const purchaseYear = Math.floor(Math.random() * 8) + 2019; // 2019~2026
|
||||
hw.push({
|
||||
id: Math.random().toString(36).substring(2, 9),
|
||||
type: '전산비품',
|
||||
법인: rand(corps),
|
||||
비품유형: eq.type,
|
||||
자산코드: `HM-${eq.code}-${purchaseYear}-${String(i).padStart(3, '0')}`,
|
||||
명칭: eq.name,
|
||||
위치: rand(['본사', '지사']),
|
||||
관리자: randUser(),
|
||||
구매일: randDate(purchaseYear, purchaseYear),
|
||||
금액: eq.price,
|
||||
납품업체: '브랜드 총판',
|
||||
품의서명: '',
|
||||
IP주소: '', MACaddress: '', OS: '', HW사양: ''
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 5. 구독형 S/W 40개
|
||||
for (let i = 1; i <= 40; i++) {
|
||||
const swId = Math.random().toString(36).substring(2, 9);
|
||||
const purchaseYear = Math.random() < 0.3 ? 2026 : 2024;
|
||||
|
||||
let isExpiring = Math.random() < 0.25;
|
||||
let endDt = new Date();
|
||||
if (isExpiring) {
|
||||
endDt.setDate(endDt.getDate() + Math.floor(Math.random() * 25) + 1); // 1~25일 뒤 만료
|
||||
} else {
|
||||
endDt.setMonth(endDt.getMonth() + Math.floor(Math.random() * 11) + 2); // 넉넉히 남음
|
||||
}
|
||||
const endStr = `${endDt.getFullYear()}.${String(endDt.getMonth()+1).padStart(2,'0')}.${String(endDt.getDate()).padStart(2,'0')}`;
|
||||
|
||||
sw.push({
|
||||
id: swId,
|
||||
type: '구독SW',
|
||||
분야: rand(['업무공통', '개발S/W', '디자인', '설계S/W']),
|
||||
법인: rand(corps),
|
||||
부서: rand(depts),
|
||||
제품명: rand(['Adobe CC All Apps', 'Microsoft 365', 'Slack Pro', 'Notion Team']),
|
||||
구매일: `${purchaseYear}-01-01`,
|
||||
구독일: `${purchaseYear}.01.01 ~ ${endStr}`,
|
||||
금액: String(Math.floor(Math.random() * 100 + 10) * 10000).replace(/\B(?=(\d{3})+(?!\d))/g, ','),
|
||||
수량: Math.floor(Math.random() * 5) + 3, // 3~7
|
||||
계정명: `user${i}@hm.com`,
|
||||
납품업체: '총판',
|
||||
비고: '연간구독'
|
||||
});
|
||||
|
||||
const assignCount = Math.floor(Math.random() * 2) + 1;
|
||||
for (let j=0; j<assignCount; j++) {
|
||||
swUsers.push({
|
||||
id: Math.random().toString(36).substring(2, 9),
|
||||
swId: swId,
|
||||
법인: rand(corps),
|
||||
부서: rand(depts),
|
||||
팀: rand(['1팀', '2팀', '기획팀']),
|
||||
직위: rand(['사원', '대리', '과장']),
|
||||
이름: rand(users),
|
||||
사용기간: '2024.01~12',
|
||||
신청서명: ''
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 6. 영구형 S/W 40개
|
||||
for (let i = 1; i <= 40; i++) {
|
||||
const swId = Math.random().toString(36).substring(2, 9);
|
||||
|
||||
let isExpiring = Math.random() < 0.25;
|
||||
let endDt = new Date();
|
||||
if (isExpiring) {
|
||||
endDt.setDate(endDt.getDate() + Math.floor(Math.random() * 25) + 1); // 1~25일 뒤 만료
|
||||
} else {
|
||||
endDt.setMonth(endDt.getMonth() + Math.floor(Math.random() * 11) + 2); // 넉넉히 남음
|
||||
}
|
||||
const endStr = `${endDt.getFullYear()}.${String(endDt.getMonth()+1).padStart(2,'0')}.${String(endDt.getDate()).padStart(2,'0')}`;
|
||||
|
||||
sw.push({
|
||||
id: swId,
|
||||
type: '영구SW',
|
||||
분야: rand(['업무공통', '개발S/W', '디자인', '설계S/W']),
|
||||
법인: rand(corps),
|
||||
부서: rand(depts),
|
||||
제품명: rand(['AutoCAD 2024', 'Windows 10 Pro', '한컴오피스 2022', 'Visual Studio 2022']),
|
||||
구매일: '2020-05-15',
|
||||
유지보수여부: true,
|
||||
비고: `유지보수: ~ ${endStr}`,
|
||||
금액: '1,500,000',
|
||||
수량: Math.floor(Math.random() * 3) + 2, // 2~4
|
||||
계정명: `sn-2020-${i}`,
|
||||
납품업체: '오토데스크 / MS'
|
||||
});
|
||||
const assignCount = Math.floor(Math.random() * 2) + 1;
|
||||
for (let j=0; j<assignCount; j++) {
|
||||
swUsers.push({
|
||||
id: Math.random().toString(36).substring(2, 9),
|
||||
swId: swId,
|
||||
법인: rand(corps),
|
||||
부서: rand(depts),
|
||||
팀: rand(['1팀', '2팀']),
|
||||
직위: rand(['과장', '차장', '부장']),
|
||||
이름: rand(users),
|
||||
사용기간: '영구',
|
||||
신청서명: ''
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return { hw, sw, swUsers, logs: [] };
|
||||
}
|
||||
@@ -1,344 +0,0 @@
|
||||
import * as XLSX from 'xlsx';
|
||||
|
||||
export interface HardwareAsset {
|
||||
id: string;
|
||||
type: string; // '개인PC', '서버', '스토리지', '전산비품'
|
||||
법인: string;
|
||||
자산코드: string;
|
||||
명칭: string;
|
||||
위치: string;
|
||||
관리자: string;
|
||||
IP주소: string;
|
||||
IP2?: string;
|
||||
MACaddress: string;
|
||||
HW사양: string;
|
||||
OS: string;
|
||||
사용자?: string;
|
||||
CPU?: string;
|
||||
GPU?: string;
|
||||
RAM?: string;
|
||||
SSD1?: string;
|
||||
SSD2?: string;
|
||||
HDD1?: string;
|
||||
HDD2?: string;
|
||||
storage유형?: string;
|
||||
비품유형?: string;
|
||||
모델명?: string;
|
||||
용량?: string;
|
||||
담당자_정?: string;
|
||||
담당자_부?: string;
|
||||
구매일?: string;
|
||||
금액?: string;
|
||||
납품업체: string;
|
||||
품의서명: string;
|
||||
용도?: string;
|
||||
상세?: string;
|
||||
원격접속?: string;
|
||||
서버ID?: string;
|
||||
서버PW?: string;
|
||||
모니터링?: string;
|
||||
비고?: string;
|
||||
}
|
||||
|
||||
|
||||
export interface SoftwareAsset {
|
||||
id: string;
|
||||
type: string; // '구독SW', '영구SW'
|
||||
분야?: string;
|
||||
법인: string;
|
||||
부서?: string;
|
||||
제품명: string;
|
||||
구매일: string;
|
||||
구독일?: string;
|
||||
유지보수여부?: boolean;
|
||||
금액: string;
|
||||
수량: number;
|
||||
계정명: string;
|
||||
납품업체: string;
|
||||
비고: string;
|
||||
}
|
||||
|
||||
export interface SWUser {
|
||||
id: string;
|
||||
swId: string;
|
||||
법인: string;
|
||||
부서: string;
|
||||
팀: string;
|
||||
직위: string;
|
||||
이름: string;
|
||||
사용기간: string;
|
||||
신청서명: string;
|
||||
}
|
||||
|
||||
export interface HardwareLog {
|
||||
id: string;
|
||||
assetId: string;
|
||||
date: string;
|
||||
details: string;
|
||||
user: string;
|
||||
}
|
||||
|
||||
export interface MasterAssetData {
|
||||
hw: HardwareAsset[];
|
||||
sw: SoftwareAsset[];
|
||||
swUsers: SWUser[];
|
||||
logs: HardwareLog[];
|
||||
}
|
||||
|
||||
const HW_TABS = ['개인PC', '서버', '스토리지', '전산비품'];
|
||||
const SW_TABS = ['구독SW', '영구SW'];
|
||||
|
||||
const HW_HEADERS = ['법인', '자산코드', '명칭', '위치', '관리자', 'IP주소', 'MACaddress', 'HW사양', 'OS', '구매일', '금액', '납품업체', '품의서명'];
|
||||
const PC_HEADERS = ['법인', '자산코드', '사용자', '위치', 'CPU', 'GPU', 'RAM', 'SSD1', 'SSD2', 'HDD1', 'HDD2', '구매일', '금액', '납품업체', '품의서명'];
|
||||
const SERVER_HEADERS = ['법인', '자산번호', '유형', '용도', '설치위치', '담당자(정)', '담당자(부)', 'IP 주소', '원격접속', '모델명', 'OS', 'CPU', 'RAM', 'GPU', 'Storage1', 'Storage2', 'Storage3', '모니터링', '비고'];
|
||||
const STORAGE_HEADERS = ['법인', '유형', '자산코드', '명칭', '위치', '모델명', '용량', '담당자(정)', '담당자(부)', 'IP주소', 'MAC주소', '구매일', '금액', '납품업체', '품의서명'];
|
||||
const SUB_SW_HEADERS = ['ID', '분야', '법인', '부서', '제품명', '구매일', '구독일', '금액', '수량', '계정명', '납품업체', '비고'];
|
||||
const PERM_SW_HEADERS = ['ID', '분야', '법인', '부서', '제품명', '구매일', '유지보수여부', '금액', '수량', '계정명', '납품업체', '비고'];
|
||||
const SW_USER_HEADERS = ['id', 'swId', '법인', '부서', '팀', '직위', '이름', '사용기간', '신청서명'];
|
||||
const HISTORY_HEADERS = ['id', 'assetId', 'date', 'details', 'user'];
|
||||
|
||||
/**
|
||||
* 템플릿 엑셀 다중 시트로 다운로드
|
||||
*/
|
||||
export function downloadTemplate() {
|
||||
const wb = XLSX.utils.book_new();
|
||||
|
||||
HW_TABS.forEach(tab => {
|
||||
let hd = HW_HEADERS;
|
||||
let wscols: any[] = [];
|
||||
|
||||
if (tab === '개인PC') {
|
||||
hd = PC_HEADERS;
|
||||
wscols = [{wch:15}, {wch:25}, {wch:15}, {wch:20}, {wch:20}, {wch:20}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
|
||||
} else if (tab === '서버') {
|
||||
hd = SERVER_HEADERS;
|
||||
wscols = [{wch:15}, {wch:20}, {wch:15}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:20}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:30}];
|
||||
} else if (tab === '스토리지') {
|
||||
hd = STORAGE_HEADERS;
|
||||
wscols = [{wch:15}, {wch:15}, {wch:25}, {wch:25}, {wch:20}, {wch:25}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
|
||||
} else {
|
||||
hd = HW_HEADERS;
|
||||
wscols = [{wch:15}, {wch:20}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:40}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
|
||||
}
|
||||
|
||||
const ws = XLSX.utils.aoa_to_sheet([hd]);
|
||||
ws['!cols'] = wscols;
|
||||
XLSX.utils.book_append_sheet(wb, ws, tab);
|
||||
});
|
||||
|
||||
SW_TABS.forEach(tab => {
|
||||
let hd = tab === '구독SW' ? SUB_SW_HEADERS : PERM_SW_HEADERS;
|
||||
const ws = XLSX.utils.aoa_to_sheet([hd]);
|
||||
ws['!cols'] = [{wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:30}, {wch:15}, {wch:20}, {wch:15}, {wch:10}, {wch:20}, {wch:20}, {wch:30}];
|
||||
XLSX.utils.book_append_sheet(wb, ws, tab);
|
||||
});
|
||||
|
||||
const swUserWs = XLSX.utils.aoa_to_sheet([SW_USER_HEADERS]);
|
||||
swUserWs['!cols'] = [{wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
|
||||
XLSX.utils.book_append_sheet(wb, swUserWs, 'SW_사용자');
|
||||
|
||||
const historyWs = XLSX.utils.aoa_to_sheet([HISTORY_HEADERS]);
|
||||
historyWs['!cols'] = [{wch:15}, {wch:20}, {wch:20}, {wch:50}, {wch:15}];
|
||||
XLSX.utils.book_append_sheet(wb, historyWs, 'History');
|
||||
|
||||
XLSX.writeFile(wb, 'itam_assets_template.xlsx');
|
||||
}
|
||||
|
||||
/**
|
||||
* 마스터 데이터를 여러 시트로 쪼개서 내보내기
|
||||
*/
|
||||
export function exportToExcel(masterData: MasterAssetData) {
|
||||
const wb = XLSX.utils.book_new();
|
||||
|
||||
HW_TABS.forEach(tab => {
|
||||
const targetAssets = masterData.hw.filter(a => a.type === tab);
|
||||
let wsData;
|
||||
let colsConfig;
|
||||
|
||||
if (tab === '개인PC') {
|
||||
wsData = [
|
||||
PC_HEADERS,
|
||||
...targetAssets.map(a => [a.법인, a.자산코드, a.사용자, a.위치, a.CPU, a.GPU, a.RAM, a.SSD1, a.SSD2, a.HDD1, a.HDD2, a.구매일, a.금액, a.납품업체, a.품의서명])
|
||||
];
|
||||
colsConfig = [{wch:15}, {wch:25}, {wch:15}, {wch:20}, {wch:20}, {wch:20}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
|
||||
} else if (tab === '서버') {
|
||||
wsData = [
|
||||
SERVER_HEADERS,
|
||||
...targetAssets.map(a => [a.법인, a.자산코드, a.storage유형 || '물리', a.용도 || '', a.위치, a.담당자_정 || '', a.담당자_부 || '', a.IP주소, a.원격접속 || '', a.모델명 || '', a.OS, a.CPU, a.RAM, a.GPU || '', a.SSD1 || '', a.SSD2 || '', a.HDD1 || '', a.모니터링 || '', a.비고 || ''])
|
||||
];
|
||||
colsConfig = [{wch:15}, {wch:20}, {wch:15}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:20}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:30}];
|
||||
} else if (tab === '스토리지') {
|
||||
wsData = [
|
||||
STORAGE_HEADERS,
|
||||
...targetAssets.map(a => [a.법인, a.storage유형, a.자산코드, a.명칭, a.위치, a.모델명, a.용량, a.담당자_정, a.담당자_부, a.IP주소, a.MACaddress, a.구매일, a.금액, a.납품업체, a.품의서명])
|
||||
];
|
||||
colsConfig = [{wch:15}, {wch:15}, {wch:25}, {wch:25}, {wch:20}, {wch:25}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
|
||||
} else {
|
||||
wsData = [
|
||||
HW_HEADERS,
|
||||
...targetAssets.map(a => [a.법인, a.자산코드, a.명칭, a.위치, a.관리자, a.IP주소, a.MACaddress, a.HW사양, a.OS, a.구매일, a.금액, a.납품업체, a.품의서명])
|
||||
];
|
||||
colsConfig = [{wch:15}, {wch:20}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:40}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
|
||||
}
|
||||
|
||||
const ws = XLSX.utils.aoa_to_sheet(wsData);
|
||||
ws['!cols'] = colsConfig;
|
||||
XLSX.utils.book_append_sheet(wb, ws, tab);
|
||||
});
|
||||
|
||||
SW_TABS.forEach(tab => {
|
||||
const targetAssets = masterData.sw.filter(a => a.type === tab);
|
||||
let wsData;
|
||||
if (tab === '구독SW') {
|
||||
wsData = [
|
||||
SUB_SW_HEADERS,
|
||||
...targetAssets.map(a => [a.id, a.분야||'', a.법인, a.부서||'', a.제품명, a.구매일, a.구독일, a.금액, a.수량, a.계정명, a.납품업체, a.비고])
|
||||
];
|
||||
} else {
|
||||
wsData = [
|
||||
PERM_SW_HEADERS,
|
||||
...targetAssets.map(a => [a.id, a.분야||'', a.법인, a.부서||'', a.제품명, a.구매일, a.유지보수여부 ? 'Y' : 'N', a.금액, a.수량, a.계정명, a.납품업체, a.비고])
|
||||
];
|
||||
}
|
||||
const ws = XLSX.utils.aoa_to_sheet(wsData);
|
||||
ws['!cols'] = [{wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:30}, {wch:15}, {wch:20}, {wch:15}, {wch:10}, {wch:20}, {wch:20}, {wch:30}];
|
||||
XLSX.utils.book_append_sheet(wb, ws, tab);
|
||||
});
|
||||
|
||||
const swUserWsData = [
|
||||
SW_USER_HEADERS,
|
||||
...masterData.swUsers.map(u => [u.id, u.swId, u.법인, u.부서, u.팀, u.직위, u.이름, u.사용기간, u.신청서명])
|
||||
];
|
||||
const swUserWs = XLSX.utils.aoa_to_sheet(swUserWsData);
|
||||
swUserWs['!cols'] = [{wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
|
||||
XLSX.utils.book_append_sheet(wb, swUserWs, 'SW_사용자');
|
||||
|
||||
const historyWsData = [
|
||||
HISTORY_HEADERS,
|
||||
...masterData.logs.map(l => [l.id, l.assetId, l.date, l.details, l.user])
|
||||
];
|
||||
const historyWs = XLSX.utils.aoa_to_sheet(historyWsData);
|
||||
historyWs['!cols'] = [{wch:15}, {wch:20}, {wch:20}, {wch:50}, {wch:15}];
|
||||
XLSX.utils.book_append_sheet(wb, historyWs, 'History');
|
||||
|
||||
const dateStr = new Date().toISOString().split('T')[0];
|
||||
XLSX.writeFile(wb, `itam_assets_master_${dateStr}.xlsx`);
|
||||
}
|
||||
|
||||
export async function parseExcel(file: File): Promise<MasterAssetData> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
try {
|
||||
const data = e.target?.result;
|
||||
const workbook = XLSX.read(data, { type: 'binary' });
|
||||
const hwAssets: HardwareAsset[] = [];
|
||||
const swAssets: SoftwareAsset[] = [];
|
||||
const swUsers: SWUser[] = [];
|
||||
const logs: HardwareLog[] = [];
|
||||
|
||||
workbook.SheetNames.forEach(sheetName => {
|
||||
const worksheet = workbook.Sheets[sheetName];
|
||||
const json = XLSX.utils.sheet_to_json(worksheet) as any[];
|
||||
|
||||
if (HW_TABS.includes(sheetName)) {
|
||||
json.forEach(row => {
|
||||
if (sheetName === '개인PC') {
|
||||
hwAssets.push({
|
||||
id: Math.random().toString(36).substring(2, 9),
|
||||
type: sheetName,
|
||||
법인: row['법인'] || '',
|
||||
자산코드: row['자산코드'] || '',
|
||||
명칭: '',
|
||||
위치: row['위치'] || '',
|
||||
사용자: row['사용자'] || '',
|
||||
관리자: '', IP주소: '', MACaddress: '', HW사양: '', OS: '',
|
||||
CPU: row['CPU'] || '', GPU: row['GPU'] || '', RAM: row['RAM'] || '',
|
||||
SSD1: row['SSD1'] || '', SSD2: row['SSD2'] || '', HDD1: row['HDD1'] || '', HDD2: row['HDD2'] || '',
|
||||
구매일: row['구매일'] || '', 금액: row['금액'] ? String(row['금액']) : '',
|
||||
납품업체: row['납품업체'] || '', 품의서명: row['품의서명'] || '',
|
||||
});
|
||||
} else if (sheetName === '서버') {
|
||||
hwAssets.push({
|
||||
id: Math.random().toString(36).substring(2, 9),
|
||||
type: sheetName,
|
||||
법인: row['법인'] || '',
|
||||
자산코드: row['자산번호'] || row['자산코드'] || '',
|
||||
명칭: row['용도'] || row['명칭'] || '',
|
||||
용도: row['용도'] || '', 위치: row['설치위치'] || row['위치'] || '',
|
||||
관리자: row['담당자(정)'] || '', 담당자_정: row['담당자(정)'] || '', 담당자_부: row['담당자(부)'] || '',
|
||||
IP주소: row['IP 주소'] || row['IP주소'] || '', IP2: row['IP2'] || '',
|
||||
원격접속: row['원격접속'] || '', 서버ID: row['서버ID'] || '', 서버PW: row['서버PW'] || '',
|
||||
모델명: row['모델명'] || '', OS: row['OS'] || '',
|
||||
CPU: row['CPU'] || '', RAM: row['RAM'] || '', GPU: row['GPU'] || '',
|
||||
SSD1: row['Storage1'] || row['SSD1'] || '', SSD2: row['Storage2'] || row['SSD2'] || '', HDD1: row['Storage3'] || row['HDD1'] || '',
|
||||
모니터링: row['모니터링'] || '', 비고: row['비고'] || '', storage유형: row['유형'] || '물리',
|
||||
MACaddress: '', HW사양: '', 구매일: '', 금액: '', 납품업체: '', 품의서명: '',
|
||||
});
|
||||
} else if (sheetName === '스토리지') {
|
||||
hwAssets.push({
|
||||
id: Math.random().toString(36).substring(2, 9),
|
||||
type: sheetName,
|
||||
법인: row['법인'] || '', 자산코드: row['자산코드'] || '', 명칭: row['명칭'] || '', 위치: row['위치'] || '',
|
||||
관리자: '', IP주소: row['IP주소'] || '', MACaddress: row['MAC주소'] || '', HW사양: '', OS: '',
|
||||
storage유형: row['유형'] || '', 모델명: row['모델명'] || '', 용량: row['용량'] || '',
|
||||
담당자_정: row['담당자(정)'] || '', 담당자_부: row['담당자(부)'] || '',
|
||||
구매일: row['구매일'] || '', 금액: row['금액'] ? String(row['금액']) : '',
|
||||
납품업체: row['납품업체'] || '', 품의서명: row['품의서명'] || '',
|
||||
});
|
||||
} else {
|
||||
hwAssets.push({
|
||||
id: Math.random().toString(36).substring(2, 9),
|
||||
type: sheetName,
|
||||
법인: row['법인'] || '', 자산코드: row['자산코드'] || '', 명칭: row['명칭'] || '', 위치: row['위치'] || '',
|
||||
관리자: row['관리자'] || '', IP주소: row['IP주소'] || '', MACaddress: row['MACaddress'] || '',
|
||||
HW사양: row['HW사양'] || '', OS: row['OS'] || '',
|
||||
구매일: row['구매일'] || '', 금액: row['금액'] ? String(row['금액']) : '',
|
||||
납품업체: row['납품업체'] || '', 품의서명: row['품의서명'] || '',
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (SW_TABS.includes(sheetName)) {
|
||||
json.forEach(row => {
|
||||
swAssets.push({
|
||||
id: row['ID'] ? String(row['ID']) : Math.random().toString(36).substring(2, 9),
|
||||
type: sheetName, 분야: row['분야'] || '', 법인: row['법인'] || '', 부서: row['부서'] || '', 제품명: row['제품명'] || '',
|
||||
구매일: row['구매일'] || '', 구독일: row['구독일'] || '', 유지보수여부: row['유지보수여부'] === 'Y' || row['유지보수여부'] === true,
|
||||
금액: row['금액'] ? String(row['금액']) : '', 수량: parseInt(row['수량'] || '1', 10),
|
||||
계정명: row['계정명'] || '', 납품업체: row['납품업체'] || '', 비고: row['비고'] || '',
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (sheetName === 'SW_사용자') {
|
||||
json.forEach(row => {
|
||||
swUsers.push({
|
||||
id: row['id'] ? String(row['id']) : Math.random().toString(36).substring(2, 9),
|
||||
swId: row['swId'] ? String(row['swId']) : '', 법인: row['법인'] || '', 부서: row['부서'] || '',
|
||||
팀: row['팀'] || '', 직위: row['직위'] || '', 이름: row['이름'] || '',
|
||||
사용기간: row['사용기간'] || '', 신청서명: row['신청서명'] || '',
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (sheetName === 'History') {
|
||||
json.forEach(row => {
|
||||
logs.push({
|
||||
id: row['id'] ? String(row['id']) : Math.random().toString(36).substring(2, 9),
|
||||
assetId: row['assetId'] ? String(row['assetId']) : '',
|
||||
date: row['date'] || '', details: row['details'] || '', user: row['user'] || '',
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
resolve({ hw: hwAssets, sw: swAssets, swUsers, logs });
|
||||
} catch (err) {
|
||||
reject(err);
|
||||
}
|
||||
};
|
||||
reader.onerror = (err) => reject(err);
|
||||
reader.readAsBinaryString(file);
|
||||
});
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
import { MasterAssetData, HardwareAsset } from './excelHandler';
|
||||
import { generateDummyData } from './dummyDataGenerator';
|
||||
import { realServerData } from './realServerData';
|
||||
|
||||
// --- State Definitions ---
|
||||
export interface AppState {
|
||||
masterData: MasterAssetData;
|
||||
activeCategory: 'hw' | 'sw' | 'ops';
|
||||
activeSubTab: string;
|
||||
activeCharts: any[];
|
||||
}
|
||||
|
||||
const dummy = generateDummyData();
|
||||
// 서버 데이터만 실제 데이터로 교체
|
||||
const mergedHw: HardwareAsset[] = [
|
||||
...dummy.hw.filter(a => a.type !== '서버'),
|
||||
...realServerData.map(s => ({
|
||||
id: s.id || Math.random().toString(36).substring(2, 9),
|
||||
type: '서버',
|
||||
법인: s.법인,
|
||||
자산코드: s.자산코드,
|
||||
명칭: s.용도 || '',
|
||||
위치: s.위치,
|
||||
관리자: s.담당자_정 || '홍길동',
|
||||
담당자_정: s.담당자_정 || '홍길동',
|
||||
담당자_부: s.담당자_부 || '김철수',
|
||||
IP주소: s.IP주소,
|
||||
IP2: s.IP2 || '',
|
||||
MACaddress: s.MACaddress || '',
|
||||
HW사양: s.HW사양 || '',
|
||||
OS: s.OS,
|
||||
CPU: s.CPU,
|
||||
RAM: s.RAM,
|
||||
SSD1: s.SSD1,
|
||||
SSD2: s.SSD2,
|
||||
HDD1: s.HDD1,
|
||||
storage유형: s.storage유형,
|
||||
모델명: s.모델명,
|
||||
구매일: s.구매일 || '',
|
||||
금액: s.금액 || '',
|
||||
납품업체: s.납품업체 || '',
|
||||
품의서명: s.품의서명 || '',
|
||||
용도: s.용도,
|
||||
상세: s.상세,
|
||||
원격접속: s.원격접속 || '',
|
||||
서버ID: s.서버ID || '',
|
||||
서버PW: s.서버PW || '',
|
||||
모니터링: s.모니터링 || '',
|
||||
비고: s.비고 || ''
|
||||
}))
|
||||
];
|
||||
|
||||
// --- Initial State ---
|
||||
export const state: AppState = {
|
||||
masterData: {
|
||||
...dummy,
|
||||
hw: mergedHw, // 기본적으로 하드코딩된 데이터를 가지고 시작
|
||||
logs: []
|
||||
},
|
||||
activeCategory: 'hw',
|
||||
activeSubTab: '대시보드',
|
||||
activeCharts: []
|
||||
};
|
||||
|
||||
/**
|
||||
* DB에서 데이터 로드
|
||||
*/
|
||||
export async function loadMasterDataFromDB() {
|
||||
try {
|
||||
const response = await fetch('http://localhost:3000/api/hw');
|
||||
if (!response.ok) throw new Error('DB 로드 실패');
|
||||
const data = await response.json();
|
||||
if (data && data.length > 0) {
|
||||
state.masterData.hw = data;
|
||||
console.log('✅ DB 데이터 로드 완료');
|
||||
return true;
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn('⚠️ 백엔드 서버 연결 실패. 로컬 데이터를 유지합니다.');
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// --- State Helpers ---
|
||||
export function updateState(newState: Partial<AppState>) {
|
||||
Object.assign(state, newState);
|
||||
}
|
||||
@@ -1,108 +0,0 @@
|
||||
import { state, loadMasterDataFromDB } from './core/state';
|
||||
import { renderNavigation } from './components/Navigation';
|
||||
import { renderDashboard } from './views/DashboardView';
|
||||
import { renderTable } from './views/AssetTableView';
|
||||
import { downloadTemplate, exportToExcel, parseExcel, HardwareAsset } from './core/excelHandler';
|
||||
import { initBaseModal } from './components/Modal/BaseModal';
|
||||
import { initPcModal } from './components/Modal/PCModal';
|
||||
import { initHwModal, openHwModal } from './components/Modal/HWModal';
|
||||
import { initStorageModal } from './components/Modal/StorageModal';
|
||||
import { initSwModal } from './components/Modal/SWModal';
|
||||
import { initSwUserModal } from './components/Modal/SWUserModal';
|
||||
import { initDashboardDetailModal } from './components/Modal/DashboardDetailModal';
|
||||
import { createIcons, Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, History, RefreshCcw } from 'lucide';
|
||||
|
||||
// --- DB 저장을 위한 헬퍼 함수 ---
|
||||
async function saveAllHwToDB(assets: HardwareAsset[]) {
|
||||
try {
|
||||
const response = await fetch('http://localhost:3000/api/hw/batch', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(assets)
|
||||
});
|
||||
if (!response.ok) throw new Error('DB 저장 실패');
|
||||
console.log('✅ DB 저장 완료');
|
||||
} catch (err) {
|
||||
console.error('❌ DB 저장 실패:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// --- App Initialization ---
|
||||
function initApp() {
|
||||
console.log('🚀 ITAM System Initializing...');
|
||||
const mainContent = document.getElementById('main-content')!;
|
||||
if (!mainContent) return;
|
||||
|
||||
// 1. 전역 모달 및 내비게이션 초기화
|
||||
const { closeAllModals } = initBaseModal();
|
||||
|
||||
try {
|
||||
renderNavigation((tab) => {
|
||||
if (tab === '대시보드') {
|
||||
renderDashboard(mainContent);
|
||||
} else {
|
||||
renderTable(mainContent);
|
||||
}
|
||||
});
|
||||
|
||||
initPcModal(() => {
|
||||
saveAllHwToDB(state.masterData.hw);
|
||||
renderTable(mainContent);
|
||||
}, closeAllModals);
|
||||
|
||||
initHwModal();
|
||||
|
||||
initStorageModal(() => {
|
||||
saveAllHwToDB(state.masterData.hw);
|
||||
renderTable(mainContent);
|
||||
}, closeAllModals);
|
||||
|
||||
initSwModal(() => renderTable(mainContent), closeAllModals);
|
||||
initSwUserModal(() => renderTable(mainContent), closeAllModals);
|
||||
initDashboardDetailModal();
|
||||
} catch (e) {
|
||||
console.error('❌ Initialization failed:', e);
|
||||
}
|
||||
|
||||
// 2. 초기 렌더링
|
||||
renderDashboard(mainContent);
|
||||
|
||||
// 3. 비동기 데이터 로드
|
||||
loadMasterDataFromDB().then((success) => {
|
||||
if (success) {
|
||||
if (state.activeSubTab === '대시보드') renderDashboard(mainContent);
|
||||
else renderTable(mainContent);
|
||||
}
|
||||
});
|
||||
|
||||
// 4. 이벤트 바인딩
|
||||
document.getElementById('btn-download-template')?.addEventListener('click', () => downloadTemplate());
|
||||
document.getElementById('btn-export-excel')?.addEventListener('click', () => exportToExcel(state.masterData));
|
||||
|
||||
const uploadInput = document.getElementById('excel-upload') as HTMLInputElement;
|
||||
uploadInput?.addEventListener('change', async (e) => {
|
||||
const file = (e.target as HTMLInputElement).files?.[0];
|
||||
if (file) {
|
||||
const data = await parseExcel(file);
|
||||
state.masterData = data;
|
||||
await saveAllHwToDB(data.hw);
|
||||
renderTable(mainContent);
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('btn-add-asset')?.addEventListener('click', () => {
|
||||
if (state.activeSubTab === '서버' || state.activeSubTab === '전산비품' || state.activeSubTab === '스토리지') {
|
||||
openHwModal({
|
||||
id: Math.random().toString(36).substring(2, 9),
|
||||
type: state.activeSubTab,
|
||||
법인: '한맥', 자산코드: '', 명칭: '', 위치: '', 관리자: '', IP주소: '', MACaddress: '', HW사양: '', OS: '', 납품업체: '', 품의서명: ''
|
||||
} as any);
|
||||
}
|
||||
});
|
||||
|
||||
createIcons({
|
||||
icons: { Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, History, RefreshCcw }
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initApp);
|
||||
@@ -1,13 +0,0 @@
|
||||
[
|
||||
{
|
||||
"법인": "(주)회사1",
|
||||
"자산코드": "ASSET-100",
|
||||
"명칭": "서버 모델A",
|
||||
"위치": "본사 1층",
|
||||
"관리자": "관리자A",
|
||||
"IP주소": "192.168.0.1",
|
||||
"MACaddress": "00:00:00:00:00:01",
|
||||
"HW사양": "Core i7, 16GB RAM",
|
||||
"OS": "Windows 10"
|
||||
}
|
||||
]
|
||||
@@ -1,262 +0,0 @@
|
||||
:root {
|
||||
--primary-color: #1E5149;
|
||||
--primary-hover: #153c36;
|
||||
--primary-light: #edf2f1;
|
||||
--text-main: #111827;
|
||||
--text-muted: #6B7280;
|
||||
--border-color: #E5E7EB;
|
||||
--bg-color: #F9FAFB;
|
||||
--white: #FFFFFF;
|
||||
--danger: #dc2626;
|
||||
|
||||
--header-height: 52px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Pretendard Variable', Pretendard, sans-serif;
|
||||
color: var(--text-main);
|
||||
background-color: var(--bg-color);
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.02em;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* --- Integrated Header Style --- */
|
||||
.main-header {
|
||||
background-color: var(--white);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
z-index: 100;
|
||||
height: var(--header-height);
|
||||
}
|
||||
|
||||
.header-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1.5rem;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.brand h1 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 800;
|
||||
color: var(--text-main);
|
||||
white-space: nowrap;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.brand h1 span { color: var(--primary-color); }
|
||||
|
||||
/* --- Integrated Nav --- */
|
||||
.integrated-nav {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.gnb-trigger {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
padding: 0 1rem;
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.lnb-shelf {
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0 0.75rem;
|
||||
height: 60%;
|
||||
border-left: 1px solid var(--border-color);
|
||||
margin-left: 0.25rem;
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
.nav-group:hover .lnb-shelf,
|
||||
.nav-group.is-showing-shelf .lnb-shelf {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.lnb-item {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: 0.2rem 0.6rem;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.lnb-item.active {
|
||||
color: var(--primary-color);
|
||||
background-color: var(--primary-light);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateX(-5px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
/* --- Header Actions --- */
|
||||
.header-actions { display: flex; gap: 0.3rem; align-items: center; }
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0 0.8rem;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
height: 28px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.btn i, .btn svg { width: 12px !important; height: 12px !important; }
|
||||
|
||||
.btn-primary { background-color: var(--primary-color); color: var(--white); border: 1px solid var(--primary-color); }
|
||||
.btn-outline { background-color: transparent; color: var(--text-muted); border: 1px solid var(--border-color); }
|
||||
|
||||
/* --- Content Area & Standardized Layout --- */
|
||||
.content-area {
|
||||
flex: 1;
|
||||
padding: 2rem; /* benchmark: 좌, 우, 하단 2rem 공백 통일 */
|
||||
overflow-y: auto;
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
.view-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
/* --- Search Filter Bar --- */
|
||||
.search-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.25rem;
|
||||
background-color: var(--white);
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.search-item { display: flex; flex-direction: column; gap: 0.4rem; }
|
||||
.search-item.flex-1 { flex: 1; }
|
||||
.search-item label { font-size: 11px; font-weight: 800; color: var(--text-muted); }
|
||||
.search-item input,
|
||||
.search-item select {
|
||||
height: 32px;
|
||||
padding: 0 2.5rem 0 0.75rem; /* Increased right padding for arrow */
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 3px;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
appearance: none; /* Modern arrow styling */
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-9'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.75rem center;
|
||||
}
|
||||
|
||||
.search-item input {
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.btn-reset {
|
||||
height: 32px !important;
|
||||
padding: 0 0.8rem !important;
|
||||
font-size: 12px !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
gap: 0.35rem !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
/* --- Table (Box-less Design) --- */
|
||||
.table-container {
|
||||
background-color: var(--white);
|
||||
border-top: 1px solid var(--border-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
overflow: auto;
|
||||
max-height: calc(100vh - 240px); /* Adjusting for bottom spacing */
|
||||
}
|
||||
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
th, td {
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
text-align: left;
|
||||
white-space: nowrap; /* Force single line for all info */
|
||||
}
|
||||
th {
|
||||
background-color: #FAFAFA;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
box-shadow: inset 0 -1px 0 var(--border-color);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
td { font-size: 14px; }
|
||||
tbody tr:hover { background-color: #F9FAFB; }
|
||||
|
||||
/* --- Dashboard Style --- */
|
||||
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
|
||||
.stat-card { background-color: var(--white); padding: 1.5rem; border: 1px solid var(--border-color); border-radius: 8px; }
|
||||
.stat-card .value { font-size: 2.2rem; font-weight: 800; color: var(--primary-color); margin-top: 0.5rem; }
|
||||
.dashboard-layout-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
|
||||
.dashboard-card {
|
||||
background-color: var(--white);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 360px; /* Increased height for better chart view */
|
||||
}
|
||||
.dashboard-card canvas {
|
||||
flex: 1;
|
||||
width: 100% !important;
|
||||
max-height: 280px;
|
||||
}
|
||||
.dashboard-section-title { padding: 0 0 1rem 0; font-size: 1.1rem; font-weight: 700; color: var(--text-main); }
|
||||
|
||||
.hidden { display: none !important; }
|
||||
.text-nowrap { white-space: nowrap; }
|
||||
.btn-sm { padding: 0.25rem 0.5rem; font-size: 11px; height: 24px; }
|
||||
@@ -1,267 +0,0 @@
|
||||
/* Modal */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.2s ease, visibility 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-overlay:not(.hidden) { opacity: 1; visibility: visible; }
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--white);
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
max-height: 90vh;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(20px);
|
||||
transition: transform 0.2s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-overlay:not(.hidden) .modal-content { transform: translateY(0); }
|
||||
|
||||
.modal-header {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--white);
|
||||
padding: 1rem 1.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.modal-header .btn-icon {
|
||||
color: #FFFFFF !important;
|
||||
cursor: pointer;
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.modal-header .btn-icon i,
|
||||
.modal-header .btn-icon svg {
|
||||
width: 20px !important; /* Original natural size */
|
||||
height: 20px !important;
|
||||
stroke: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.modal-header .btn-icon:hover {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.grid-form {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.form-group.full-width {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
/* Section Title for Grouping */
|
||||
.form-section-title {
|
||||
grid-column: span 2;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
padding: 1.5rem 0 0.5rem 0; /* 패딩 조정 */
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Modal Readonly/Edit Mode Interaction */
|
||||
.grid-form.is-view-mode input,
|
||||
.grid-form.is-view-mode select,
|
||||
.grid-form.is-view-mode textarea {
|
||||
border-color: transparent !important;
|
||||
background-color: transparent !important;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
pointer-events: none;
|
||||
color: var(--text-main);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.grid-form.is-edit-mode input,
|
||||
.grid-form.is-edit-mode select,
|
||||
.grid-form.is-edit-mode textarea {
|
||||
color: #FF3D00; /* 수정 시 글자색 변경 */
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.grid-form.is-edit-mode input:focus,
|
||||
.grid-form.is-edit-mode select:focus,
|
||||
.grid-form.is-edit-mode textarea:focus {
|
||||
border-color: #FF3D00;
|
||||
box-shadow: 0 0 0 2px rgba(255, 61, 0, 0.1);
|
||||
}
|
||||
|
||||
.form-section-title:first-child {
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
padding: 0.625rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
font-family: inherit;
|
||||
font-size: 0.875rem;
|
||||
outline: none;
|
||||
transition: all 0.2s;
|
||||
background-color: var(--white);
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus,
|
||||
.form-group textarea:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 2px rgba(30, 81, 73, 0.1);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 1rem 1.5rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #FAFAFA;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Wide Modal for History/Detail */
|
||||
.modal-content.wide {
|
||||
max-width: 950px;
|
||||
}
|
||||
|
||||
.modal-body-split {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
min-height: 480px;
|
||||
}
|
||||
|
||||
.modal-form-area {
|
||||
flex: 1.2;
|
||||
}
|
||||
|
||||
.modal-history-area {
|
||||
flex: 0.8;
|
||||
border-left: 1px solid var(--border-color);
|
||||
padding-left: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.history-header {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.history-header h3 {
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.history-timeline {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
max-height: 500px;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
position: relative;
|
||||
padding-left: 1.25rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border-left: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.history-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -7px;
|
||||
top: 0;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--white);
|
||||
border: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.history-item:last-child {
|
||||
border-left: 2px solid transparent;
|
||||
}
|
||||
|
||||
.history-date {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.history-user {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.history-details {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-main);
|
||||
line-height: 1.4;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.empty-history {
|
||||
padding: 2rem 0;
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
@@ -1,208 +0,0 @@
|
||||
import { state } from '../core/state';
|
||||
import { createIcons, Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw } from 'lucide';
|
||||
import { openPcModal } from '../components/Modal/PCModal';
|
||||
import { openHwModal } from '../components/Modal/HWModal';
|
||||
import { openStorageModal } from '../components/Modal/StorageModal';
|
||||
import { openSwModal } from '../components/Modal/SWModal';
|
||||
import { openSwUserModal } from '../components/Modal/SWUserModal';
|
||||
|
||||
/**
|
||||
* 자산 목록 테이블 렌더링 메인 함수
|
||||
*/
|
||||
export function renderTable(mainContent: HTMLElement) {
|
||||
mainContent.innerHTML = '';
|
||||
const container = document.createElement('div');
|
||||
container.className = 'view-container';
|
||||
const table = document.createElement('table');
|
||||
|
||||
if (state.activeCategory === 'hw') {
|
||||
renderHwTable(table, container, mainContent);
|
||||
} else {
|
||||
renderSwTable(table, container, mainContent);
|
||||
}
|
||||
|
||||
createIcons({
|
||||
icons: { Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2 }
|
||||
});
|
||||
}
|
||||
|
||||
function renderHwTable(table: HTMLTableElement, container: HTMLElement, mainContent: HTMLElement) {
|
||||
const fullList = state.masterData.hw.filter(a => a.type === state.activeSubTab);
|
||||
container.innerHTML = '';
|
||||
|
||||
// --- 1. Search Bar (Unified Style) ---
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
|
||||
const corps = Array.from(new Set(fullList.map(a => a.법인))).filter(Boolean).sort();
|
||||
const orgUnits = Array.from(new Set(fullList.map(a => a.현사용조직))).filter(Boolean).sort();
|
||||
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (자산코드/조직/모델명)</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>법인</label>
|
||||
<select id="filter-corp">
|
||||
<option value="">전체 법인</option>
|
||||
${corps.map(c => `<option value="${c}">${c}</option>`).join('')}
|
||||
</select>
|
||||
</div>
|
||||
${state.activeSubTab === '서버' ? `
|
||||
<div class="search-item">
|
||||
<label>현 사용조직</label>
|
||||
<select id="filter-org-unit">
|
||||
<option value="">전체 조직</option>
|
||||
${orgUnits.map(o => `<option value="${o}">${o}</option>`).join('')}
|
||||
</select>
|
||||
</div>` : ''}
|
||||
<button id="btn-reset-filters" class="btn btn-outline btn-reset" title="초기화">
|
||||
<i data-lucide="refresh-ccw" style="width:14px; height:14px;"></i> 필터 초기화
|
||||
</button>
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
|
||||
// --- 2. Table Structure (Unified Style) ---
|
||||
const tableWrapper = document.createElement('div');
|
||||
tableWrapper.className = 'table-container';
|
||||
|
||||
if (state.activeSubTab === '개인PC') {
|
||||
table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>자산코드</th><th>사용자</th><th>위치</th><th>CPU</th><th>RAM</th><th>Storage</th><th>구매일</th><th>금액</th><th>품의서</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
|
||||
} else if (state.activeSubTab === '서버') {
|
||||
table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>현 사용조직</th><th>자산번호</th><th>용도</th><th>상세</th><th>설치위치</th><th>담당자</th><th>IP주소</th><th>모델명</th><th>OS</th><th>CPU/RAM</th><th>Storage</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
|
||||
} else if (state.activeSubTab === '스토리지') {
|
||||
table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>유형</th><th>자산코드</th><th>명칭</th><th>위치</th><th>모델명</th><th>용량</th><th>IP주소</th><th>구매일</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
|
||||
} else {
|
||||
table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>자산코드</th><th>명칭</th><th>위치</th><th>관리자</th><th>구매일</th><th>금액</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
|
||||
}
|
||||
|
||||
tableWrapper.appendChild(table);
|
||||
container.appendChild(tableWrapper);
|
||||
mainContent.appendChild(container);
|
||||
|
||||
const tbody = document.getElementById('dynamic-tbody')!;
|
||||
|
||||
const updateTable = () => {
|
||||
const keyword = (document.getElementById('filter-keyword') as HTMLInputElement).value.toLowerCase().trim();
|
||||
const corp = (document.getElementById('filter-corp') as HTMLSelectElement).value;
|
||||
const orgUnit = (document.getElementById('filter-org-unit') as HTMLSelectElement)?.value || '';
|
||||
|
||||
const filtered = fullList.filter(asset => {
|
||||
const matchKeyword = !keyword || String(asset.자산코드||'').toLowerCase().includes(keyword) || String(asset.현사용조직||'').toLowerCase().includes(keyword) || String(asset.모델명||'').toLowerCase().includes(keyword);
|
||||
const matchCorp = !corp || asset.법인 === corp;
|
||||
const matchOrg = !orgUnit || asset.현사용조직 === orgUnit;
|
||||
return matchKeyword && matchCorp && matchOrg;
|
||||
});
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
const colSpan = table.querySelectorAll('th').length;
|
||||
tbody.innerHTML = `<tr><td colspan="${colSpan}" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
filtered.forEach((asset, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
const formatInline = (v: any) => String(v || '').replace(/\n/g, ' / ').trim();
|
||||
|
||||
if (state.activeSubTab === '개인PC') {
|
||||
const storage = [asset.SSD1, asset.SSD2, asset.HDD1].filter(v => v).join(' / ');
|
||||
tr.innerHTML = `<td>${idx+1}</td><td>${asset.법인}</td><td>${asset.자산코드}</td><td>${asset.사용자||''}</td><td>${asset.위치||''}</td><td>${asset.CPU||''}</td><td>${asset.RAM||''}</td><td>${formatInline(storage)}</td><td>${asset.구매일||''}</td><td>${asset.금액||''}</td><td style="text-align:center;">${asset.품의서명 ? '<i data-lucide="paperclip" class="text-primary"></i>' : '-'}</td><td><button class="btn btn-outline btn-sm btn-edit">수정</button></td>`;
|
||||
tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openPcModal(asset); });
|
||||
} else if (state.activeSubTab === '서버') {
|
||||
const cpuRam = [asset.CPU, asset.RAM].filter(v => v).join(' / ');
|
||||
const storage = [asset.SSD1, asset.SSD2].filter(v => v).join(' / ');
|
||||
const ipInfo = [asset.IP주소, asset.IP2].filter(v => v).join(' / ');
|
||||
tr.innerHTML = `<td>${idx+1}</td><td>${asset.법인}</td><td>${asset.현사용조직||''}</td><td>${asset.자산코드}</td><td>${formatInline(asset.용도)}</td><td>${formatInline(asset.상세)}</td><td>${formatInline(asset.위치)}</td><td>${asset.담당자_정||''}</td><td>${formatInline(ipInfo)}</td><td>${asset.모델명||''}</td><td>${asset.OS||''}</td><td>${formatInline(cpuRam)}</td><td>${formatInline(storage)}</td><td><button class="btn btn-outline btn-sm btn-edit">수정</button></td>`;
|
||||
tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset); });
|
||||
} else if (state.activeSubTab === '스토리지') {
|
||||
tr.innerHTML = `<td>${idx+1}</td><td>${asset.법인}</td><td>${asset.storage유형||''}</td><td>${asset.자산코드}</td><td>${asset.명칭}</td><td>${asset.위치||''}</td><td>${asset.모델명||''}</td><td>${asset.용량||''}</td><td>${asset.IP주소||''}</td><td>${asset.구매일||''}</td><td><button class="btn btn-outline btn-sm btn-edit">수정</button></td>`;
|
||||
tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openStorageModal(asset); });
|
||||
} else {
|
||||
tr.innerHTML = `<td>${idx+1}</td><td>${asset.법인}</td><td>${asset.자산코드}</td><td>${asset.명칭}</td><td>${asset.위치}</td><td>${asset.관리자}</td><td>${asset.구매일||''}</td><td>${asset.금액||''}</td><td><button class="btn btn-outline btn-sm btn-edit">수정</button></td>`;
|
||||
tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset); });
|
||||
}
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
createIcons({ icons: { Paperclip, Edit2, RefreshCcw } });
|
||||
};
|
||||
|
||||
const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
|
||||
const corpSelect = document.getElementById('filter-corp') as HTMLSelectElement;
|
||||
const orgSelect = document.getElementById('filter-org-unit') as HTMLSelectElement;
|
||||
const resetBtn = document.getElementById('btn-reset-filters') as HTMLButtonElement;
|
||||
|
||||
keywordInput.addEventListener('input', updateTable);
|
||||
corpSelect.addEventListener('change', updateTable);
|
||||
orgSelect?.addEventListener('change', updateTable);
|
||||
resetBtn.addEventListener('click', () => {
|
||||
keywordInput.value = ''; corpSelect.value = ''; if(orgSelect) orgSelect.value = '';
|
||||
updateTable();
|
||||
});
|
||||
|
||||
updateTable();
|
||||
}
|
||||
|
||||
function renderSwTable(table: HTMLTableElement, container: HTMLElement, mainContent: HTMLElement) {
|
||||
const fullList = state.masterData.sw.filter(a => a.type === state.activeSubTab);
|
||||
const isSub = state.activeSubTab === '구독SW';
|
||||
container.innerHTML = '';
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
filterBar.innerHTML = `<div class="search-item flex-1"><label>통합 검색 (제품명/부서)</label><input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off"></div><div class="search-item"><label>분야</label><select id="filter-field"><option value="">전체 분야</option><option value="업무공통">업무공통</option><option value="개발S/W">개발S/W</option><option value="디자인">디자인</option><option value="설계S/W">설계S/W</option></select></div><div class="search-item"><label>법인</label><select id="filter-corp"><option value="">전체 법인</option><option value="한맥">한맥</option><option value="삼안">삼안</option><option value="바론">바론</option></select></div><button id="btn-reset-filters" class="btn btn-outline btn-reset" title="검색 조건 초기화"><i data-lucide="refresh-ccw" style="width:14px; height:14px;"></i> 필터 초기화</button>`;
|
||||
container.appendChild(filterBar);
|
||||
|
||||
const tableWrapper = document.createElement('div');
|
||||
tableWrapper.className = 'table-container';
|
||||
table.classList.add('sw-table');
|
||||
table.innerHTML = `<thead><tr><th style="text-align:center;">No.</th><th style="text-align:center;">분야</th><th style="text-align:center;">법인</th><th style="text-align:center;">부서</th><th style="text-align:center;">제품명</th><th style="text-align:center;">구매일</th>${isSub ? '<th style="text-align:center;">구독일</th>' : ''}<th style="text-align:center;">금액</th><th style="text-align:center;">수량</th><th style="text-align:center;">사용가능</th><th style="text-align:center;">관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
|
||||
tableWrapper.appendChild(table);
|
||||
container.appendChild(tableWrapper);
|
||||
mainContent.appendChild(container);
|
||||
|
||||
const tbody = document.getElementById('dynamic-tbody')!;
|
||||
const updateTable = () => {
|
||||
const keyword = (document.getElementById('filter-keyword') as HTMLInputElement).value.toLowerCase().trim();
|
||||
const field = (document.getElementById('filter-field') as HTMLSelectElement).value;
|
||||
const corp = (document.getElementById('filter-corp') as HTMLSelectElement).value;
|
||||
const filtered = fullList.filter(asset => {
|
||||
const matchKeyword = !keyword || (asset.제품명 || '').toLowerCase().includes(keyword) || (asset.부서 || '').toLowerCase().includes(keyword);
|
||||
const matchField = !field || asset.분야 === field;
|
||||
const matchCorp = !corp || asset.법인 === corp;
|
||||
return matchKeyword && matchField && matchCorp;
|
||||
});
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="${isSub ? 11 : 10}" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</td></tr>`;
|
||||
return;
|
||||
}
|
||||
filtered.forEach((asset, idx) => {
|
||||
const assigned = state.masterData.swUsers.filter(u => u.swId === asset.id).length;
|
||||
const qty = typeof asset.수량 === 'number' ? asset.수량 : parseInt(asset.수량||'0', 10);
|
||||
const avail = qty - assigned;
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
tr.innerHTML = `<td>${idx+1}</td><td>${asset.분야||''}</td><td>${asset.법인}</td><td>${asset.부서||''}</td><td>${asset.제품명}</td><td>${asset.구매일||''}</td>${isSub ? `<td>${asset.구독일||''}</td>` : ''}<td>${asset.금액||'0'}</td><td>${qty}</td><td><strong style="color: ${avail > 0 ? 'var(--primary-color)' : 'var(--danger)'}">${avail}</strong></td><td style="display:flex; justify-content:center; align-items:center; gap:0.5rem;"><button type="button" class="btn-icon btn-edit" title="수정" style="color: var(--text-muted);"><i data-lucide="edit-2" style="width:18px; height:18px;"></i></button><button type="button" class="btn-icon btn-users" title="사용자 관리" style="color: var(--primary-color);"><i data-lucide="users" style="width:18px; height:18px;"></i></button></td>`;
|
||||
tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openSwModal(asset); });
|
||||
tr.querySelector('.btn-edit')?.addEventListener('click', () => openSwModal(asset));
|
||||
tr.querySelector('.btn-users')?.addEventListener('click', () => openSwUserModal(asset));
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
createIcons({ icons: { Edit2, Users, RefreshCcw } });
|
||||
};
|
||||
|
||||
const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
|
||||
const fieldSelect = document.getElementById('filter-field') as HTMLSelectElement;
|
||||
const corpSelect = document.getElementById('filter-corp') as HTMLSelectElement;
|
||||
const resetBtn = document.getElementById('btn-reset-filters') as HTMLButtonElement;
|
||||
keywordInput.addEventListener('input', updateTable);
|
||||
fieldSelect.addEventListener('change', updateTable);
|
||||
corpSelect.addEventListener('change', updateTable);
|
||||
resetBtn.addEventListener('click', () => {
|
||||
keywordInput.value = ''; fieldSelect.value = ''; corpSelect.value = '';
|
||||
updateTable();
|
||||
});
|
||||
updateTable();
|
||||
}
|
||||
@@ -1,278 +0,0 @@
|
||||
import { state } from '../core/state';
|
||||
import { HardwareAsset, SoftwareAsset } from '../core/excelHandler';
|
||||
import { openDashboardDetail, openSwDashboardDetail, openSwUsageDetail } from '../components/Modal/DashboardDetailModal';
|
||||
|
||||
declare var Chart: any;
|
||||
|
||||
/**
|
||||
* 대시보드 렌더링 메인 함수
|
||||
*/
|
||||
export function renderDashboard(mainContent: HTMLElement) {
|
||||
if (!mainContent) return;
|
||||
mainContent.innerHTML = '';
|
||||
|
||||
// 기존 차트 리소스 해제
|
||||
if (state.activeCharts) {
|
||||
state.activeCharts.forEach(c => {
|
||||
if (c && typeof c.destroy === 'function') c.destroy();
|
||||
});
|
||||
}
|
||||
state.activeCharts = [];
|
||||
|
||||
if (state.activeCategory === 'hw') {
|
||||
renderHwDashboard(mainContent);
|
||||
} else if (state.activeCategory === 'sw') {
|
||||
renderSwDashboard(mainContent);
|
||||
} else {
|
||||
mainContent.innerHTML = `<div class="dashboard-section-title">운영 서비스 대시보드는 준비 중입니다.</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
// --- 하드웨어 대시보드 ---
|
||||
function renderHwDashboard(container: HTMLElement) {
|
||||
const types = ['개인PC', '서버', '스토리지', '전산비품'];
|
||||
const units = ['대', '대', '대', '개'];
|
||||
const groups: any = {};
|
||||
|
||||
types.forEach(t => { groups[t] = { idle: [], active: [], aged: [], normal: [] }; });
|
||||
|
||||
state.masterData.hw.forEach(a => {
|
||||
if (!groups[a.type]) return;
|
||||
if (isHwIdle(a)) groups[a.type].idle.push(a);
|
||||
else groups[a.type].active.push(a);
|
||||
|
||||
const ageY = getHwAgeYears(a);
|
||||
const isAged = a.type === '전산비품' ? ageY >= 3 : ageY >= 5;
|
||||
if (isAged) groups[a.type].aged.push(a);
|
||||
else groups[a.type].normal.push(a);
|
||||
});
|
||||
|
||||
let usageCards = '';
|
||||
types.forEach((t, i) => {
|
||||
const total = groups[t].idle.length + groups[t].active.length;
|
||||
const used = groups[t].active.length;
|
||||
const per = total > 0 ? Math.round((used / total) * 100) : 0;
|
||||
const barColor = per >= 50 ? 'var(--dash-primary)' : 'var(--dash-danger)';
|
||||
|
||||
usageCards += `
|
||||
<div class="dashboard-card" data-action="idle" data-type="${t}" style="padding: 1.25rem 1.5rem; cursor:pointer; min-height:auto;">
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">${t} 사용현황</span>
|
||||
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">
|
||||
${total}${units[i]} 중 ${used}${units[i]} 사용 중
|
||||
</div>
|
||||
<div style="font-size: 2rem; font-weight:700; color:${barColor}; line-height:1;">${per}%</div>
|
||||
<div style="width:100%; height:4px; background-color:var(--border-color); border-radius:2px; overflow:hidden; margin-top:0.75rem;">
|
||||
<div style="width:${per}%; height:100%; background-color:${barColor};"></div>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="view-container">
|
||||
<h3 class="dashboard-section-title">자산 사용현황 요약</h3>
|
||||
<div class="dashboard-grid">${usageCards}</div>
|
||||
|
||||
<h3 class="dashboard-section-title">하드웨어 보유 통계</h3>
|
||||
<div class="dashboard-layout-2col">
|
||||
<div class="dashboard-card">
|
||||
<h4 style="margin-bottom:1rem; font-size:0.9rem; color:var(--text-muted);">자산 유형별 보유 현황</h4>
|
||||
<canvas id="chart-hw-types"></canvas>
|
||||
</div>
|
||||
<div class="dashboard-card">
|
||||
<h4 style="margin-bottom:1rem; font-size:0.9rem; color:var(--text-muted);">법인별 자산 분포</h4>
|
||||
<canvas id="chart-hw-corps"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
setTimeout(() => {
|
||||
if (typeof Chart === 'undefined') return;
|
||||
const ctxType = (document.getElementById('chart-hw-types') as HTMLCanvasElement)?.getContext('2d');
|
||||
const ctxCorp = (document.getElementById('chart-hw-corps') as HTMLCanvasElement)?.getContext('2d');
|
||||
if (ctxType) {
|
||||
const chart = new Chart(ctxType, {
|
||||
type: 'doughnut',
|
||||
data: { labels: types, datasets: [{ data: types.map(t => state.masterData.hw.filter(a => a.type === t).length), backgroundColor: ['#1E5149', '#3b82f6', '#10b981', '#f59e0b'] }] },
|
||||
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'right' } } }
|
||||
});
|
||||
state.activeCharts.push(chart);
|
||||
}
|
||||
if (ctxCorp) {
|
||||
const corps = ['한맥', '삼안', '바론'];
|
||||
const chart = new Chart(ctxCorp, {
|
||||
type: 'bar',
|
||||
data: { labels: corps, datasets: [{ label: '보유 수량', data: corps.map(c => state.masterData.hw.filter(a => a.법인 === c).length), backgroundColor: 'rgba(30, 81, 73, 0.7)', borderRadius: 4 }] },
|
||||
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }
|
||||
});
|
||||
state.activeCharts.push(chart);
|
||||
}
|
||||
}, 100);
|
||||
|
||||
container.querySelectorAll('[data-action="idle"]').forEach(card => {
|
||||
card.addEventListener('click', () => {
|
||||
const t = card.getAttribute('data-type')!;
|
||||
openDashboardDetail(`[${t}] 유휴 자산 목록`, groups[t].idle);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// --- 소프트웨어 대시보드 ---
|
||||
function renderSwDashboard(container: HTMLElement) {
|
||||
let subQty = 0, subUsed = 0, subExp = 0, subTotal = 0;
|
||||
let permQty = 0, permUsed = 0, permExp = 0, permTotal = 0;
|
||||
|
||||
const currentYear = new Date().getFullYear().toString();
|
||||
const corps = ['한맥', '삼안', '바론'];
|
||||
const categories = ['업무공통', '개발S/W', '디자인', '설계S/W'];
|
||||
|
||||
const costByCorp: Record<string, number> = { '한맥': 0, '삼안': 0, '바론': 0 };
|
||||
const costByCat: Record<string, number> = {};
|
||||
categories.forEach(c => costByCat[c] = 0);
|
||||
|
||||
state.masterData.sw.forEach(sw => {
|
||||
const assigned = state.masterData.swUsers.filter(u => u.swId === sw.id).length;
|
||||
const qty = typeof sw.수량 === 'number' ? sw.수량 : parseInt(sw.수량||'0', 10);
|
||||
const priceStr = sw.금액 ? String(sw.금액).replace(/,/g, '') : '0';
|
||||
const price = parseInt(priceStr, 10) || 0;
|
||||
|
||||
if (sw.type === '구독SW') {
|
||||
subQty += qty; subUsed += assigned; subTotal++;
|
||||
if (isSWExpiring(sw)) subExp++;
|
||||
} else {
|
||||
permQty += qty; permUsed += assigned; permTotal++;
|
||||
if (isSWExpiring(sw)) permExp++;
|
||||
}
|
||||
|
||||
if (sw.구매일 && sw.구매일.startsWith(currentYear)) {
|
||||
if (costByCorp[sw.법인] !== undefined) costByCorp[sw.법인] += price;
|
||||
if (sw.분야 && costByCat[sw.분야] !== undefined) costByCat[sw.분야] += price;
|
||||
}
|
||||
});
|
||||
|
||||
const subPer = subQty > 0 ? Math.round((subUsed/subQty)*100) : 0;
|
||||
const permPer = permQty > 0 ? Math.round((permUsed/permQty)*100) : 0;
|
||||
const subExpPer = subTotal > 0 ? Math.round((subExp/subTotal)*100) : 0;
|
||||
const permExpPer = permTotal > 0 ? Math.round((permExp/permTotal)*100) : 0;
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="view-container">
|
||||
<h3 class="dashboard-section-title">소프트웨어 라이선스 현황</h3>
|
||||
<div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">
|
||||
<div class="dashboard-card" data-action="sub-usage" style="cursor:pointer; min-height:auto;">
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">구독 소프트웨어 사용율</span>
|
||||
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">${subQty}카피 중 ${subUsed}개 할당</div>
|
||||
<div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">${subPer}%</div>
|
||||
<div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
|
||||
<div style="width: ${subPer}%; height: 100%; background-color: var(--dash-primary);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard-card" data-action="perm-usage" style="cursor:pointer; min-height:auto;">
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">영구 소프트웨어 사용율</span>
|
||||
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">${permQty}카피 중 ${permUsed}개 할당</div>
|
||||
<div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">${permPer}%</div>
|
||||
<div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
|
||||
<div style="width: ${permPer}%; height: 100%; background-color: var(--dash-primary);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">
|
||||
<div class="dashboard-card" data-action="sub-exp" style="flex-direction:row; justify-content:space-between; align-items:center; cursor:pointer; min-height:auto;">
|
||||
<div style="flex:1;">
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">구독 SW 만료 예정 (30일 이내)</span>
|
||||
<div style="font-size: 1.5rem; font-weight:700; color:${subExp > 0 ? 'var(--dash-danger)' : 'var(--text-main)'}; margin-top:0.5rem;">${subExp}개 제품</div>
|
||||
</div>
|
||||
<div style="width: 60px; height: 60px; border-radius: 50%; background: conic-gradient(var(--dash-danger) ${subExpPer}%, var(--border-color) 0); display:flex; justify-content:center; align-items:center;">
|
||||
<div style="width: 48px; height: 48px; border-radius: 50%; background: var(--white); display:flex; justify-content:center; align-items:center;">
|
||||
<span style="font-size: 0.875rem; color:var(--text-muted); font-weight:600;">${subExpPer}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard-card" data-action="perm-exp" style="flex-direction:row; justify-content:space-between; align-items:center; cursor:pointer; min-height:auto;">
|
||||
<div style="flex:1;">
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">유지보수 만료 예정 (30일 이내)</span>
|
||||
<div style="font-size: 1.5rem; font-weight:700; color:${permExp > 0 ? 'var(--dash-danger)' : 'var(--text-main)'}; margin-top:0.5rem;">${permExp}개 제품</div>
|
||||
</div>
|
||||
<div style="width: 60px; height: 60px; border-radius: 50%; background: conic-gradient(var(--dash-danger) ${permExpPer}%, var(--border-color) 0); display:flex; justify-content:center; align-items:center;">
|
||||
<div style="width: 48px; height: 48px; border-radius: 50%; background: var(--white); display:flex; justify-content:center; align-items:center;">
|
||||
<span style="font-size: 0.875rem; color:var(--text-muted); font-weight:600;">${permExpPer}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="dashboard-section-title">${currentYear}년 도입 비용 분석</h3>
|
||||
<div class="dashboard-layout-2col">
|
||||
<div class="dashboard-card">
|
||||
<h4 style="margin-bottom:1rem; font-size:0.9rem; color:var(--text-muted);">법인별 도입 금액 (원)</h4>
|
||||
<canvas id="chart-sw-corp"></canvas>
|
||||
</div>
|
||||
<div class="dashboard-card">
|
||||
<h4 style="margin-bottom:1rem; font-size:0.9rem; color:var(--text-muted);">분야별 도입 금액 (원)</h4>
|
||||
<canvas id="chart-sw-cat"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
setTimeout(() => {
|
||||
if (typeof Chart === 'undefined') return;
|
||||
const ctxCorp = (document.getElementById('chart-sw-corp') as HTMLCanvasElement)?.getContext('2d');
|
||||
const ctxCat = (document.getElementById('chart-sw-cat') as HTMLCanvasElement)?.getContext('2d');
|
||||
if (ctxCorp) {
|
||||
const chart = new Chart(ctxCorp, {
|
||||
type: 'bar',
|
||||
data: { labels: corps, datasets: [{ data: corps.map(c => costByCorp[c]), backgroundColor: 'rgba(30, 81, 73, 0.8)', borderRadius: 4 }] },
|
||||
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }
|
||||
});
|
||||
state.activeCharts.push(chart);
|
||||
}
|
||||
if (ctxCat) {
|
||||
const chart = new Chart(ctxCat, {
|
||||
type: 'bar',
|
||||
data: { labels: categories, datasets: [{ data: categories.map(c => costByCat[c]), backgroundColor: 'rgba(59, 130, 246, 0.8)', borderRadius: 4 }] },
|
||||
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }
|
||||
});
|
||||
state.activeCharts.push(chart);
|
||||
}
|
||||
}, 100);
|
||||
|
||||
container.querySelector('[data-action="sub-usage"]')?.addEventListener('click', () => openSwUsageDetail('구독 소프트웨어 사용 목록', state.masterData.sw.filter(sw => sw.type === '구독SW')));
|
||||
container.querySelector('[data-action="perm-usage"]')?.addEventListener('click', () => openSwUsageDetail('영구 소프트웨어 사용 목록', state.masterData.sw.filter(sw => sw.type === '영구SW')));
|
||||
container.querySelector('[data-action="sub-exp"]')?.addEventListener('click', () => openSwDashboardDetail('구독 SW 만료 예정 목록', state.masterData.sw.filter(sw => sw.type === '구독SW' && isSWExpiring(sw))));
|
||||
container.querySelector('[data-action="perm-exp"]')?.addEventListener('click', () => openSwDashboardDetail('유지보수 만료 예정 목록', state.masterData.sw.filter(sw => sw.type === '영구SW' && isSWExpiring(sw))));
|
||||
}
|
||||
|
||||
function isHwIdle(a: HardwareAsset) {
|
||||
if (a.type === '개인PC') return !a.사용자 || a.사용자.trim() === '' || a.사용자.trim() === '-';
|
||||
if (a.type === '스토리지') return !a.담당자_정 || a.담당자_정.trim() === '' || a.담당자_정.trim() === '-';
|
||||
return !a.관리자 || a.관리자.trim() === '' || a.관리자.trim() === '-';
|
||||
}
|
||||
|
||||
function getHwAgeYears(a: HardwareAsset) {
|
||||
if (!a.구매일) return 0;
|
||||
try {
|
||||
const buyDate = new Date(a.구매일.replace(/\./g, '-'));
|
||||
if (isNaN(buyDate.getTime())) return 0;
|
||||
return (Date.now() - buyDate.getTime()) / (1000 * 60 * 60 * 24 * 365.25);
|
||||
} catch { return 0; }
|
||||
}
|
||||
|
||||
function isSWExpiring(sw: SoftwareAsset) {
|
||||
if (sw.type === '구독SW' && sw.구독일) {
|
||||
const parts = sw.구독일.split('~');
|
||||
if (parts.length > 1) {
|
||||
const endMs = new Date(parts[1].trim().replace(/\./g, '-')).getTime();
|
||||
const diffDays = (endMs - Date.now()) / (1000 * 60 * 60 * 24);
|
||||
return diffDays >= 0 && diffDays <= 30;
|
||||
}
|
||||
} else if (sw.type === '영구SW' && sw.비고 && sw.비고.includes('유지보수: ~')) {
|
||||
try {
|
||||
const endMs = new Date(sw.비고.split('~')[1].trim().replace(/\./g, '-')).getTime();
|
||||
const diffDays = (endMs - Date.now()) / (1000 * 60 * 60 * 24);
|
||||
return diffDays >= 0 && diffDays <= 30;
|
||||
} catch { return false; }
|
||||
}
|
||||
return false;
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
# 🛠️ 개발 및 관리 규칙 (Strict Development Rules)
|
||||
|
||||
1. **언어 설정**: 영어로 생각하되, 모든 답변은 **한국어**로 작성한다.
|
||||
2. **임의 수정 절대 금지 (Zero-Arbitrary Change)**:
|
||||
- 사용자가 명시적으로 지시한 부분 외에는 **단 한 줄의 코드도, 그 어떤 파일도 임의로 수정, 정리, 리팩토링하지 않는다.**
|
||||
- 지시받지 않은 다른 파트의 코드는 절대 건드리지 않으며, 영향 범위가 요청 범위를 벗어나지 않도록 '외과 수술식(Surgical) 수정'을 원칙으로 한다.
|
||||
3. **개선 작업 절차 (Test-First Approach)**:
|
||||
- 사용자가 개선(Refactoring, Optimization 등)을 지시한 경우, **수정 전 현재 시스템이 정상적으로 잘 작동하는지 먼저 전수 확인**한다.
|
||||
- 기존 동작 방식과 성능을 기준(Baseline)으로 삼고, 수정 후에도 **기존의 모든 기능이 무결하게 유지되는지 반드시 테스트하여 입증**한다.
|
||||
- 검증 결과를 바탕으로 "무엇을, 왜, 어떻게" 바꿀지 상세 보고 후, 사용자로부터 **'진행시켜'** 승인을 얻은 뒤에만 집행한다.
|
||||
4. **선보고 후승인**: 모든 기능 수정 및 코드 변경 전에는 예상 방안을 먼저 보고하고 승인 절차를 거친다.
|
||||
|
||||
---
|
||||
|
||||
### 🚀 서버 구동 및 외부 접속 규칙 (Server Run & External Access)
|
||||
|
||||
1. **포트 고정**: 개발 서버는 반드시 **8080** 포트를 사용한다. (`vite.config.ts` 설정 준수)
|
||||
2. **외부 접속 허용 (Host)**: 사무실 내 타 직원이 접속할 수 있도록 `--host` 모드로 구동한다.
|
||||
3. **구동 명령어**:
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
* 해당 명령어 실행 시 `0.0.0.0` 또는 `Network: http://[내-IP]:8080/` 경로로 타인 접속이 가능하다.
|
||||
4. **IP 확인 방법**:
|
||||
* Windows: `ipconfig` 명령어로 'IPv4 주소' 확인 후 공유.
|
||||
|
||||
---
|
||||
|
||||
### 🎨 ITAM 시스템 디자인 가이드 (Design Guide)
|
||||
|
||||
1. **디자인 철학 (Design Philosophy)**
|
||||
* **Minimalist & Border-based**: 불필요한 박스(Card) 사용을 최소화하고, 정보의 구분은 간결한 라인(Border/Divider)을 활용하여 시각적 피로도를 낮춥니다.
|
||||
* **Professional Achromatic**: 무채색(Black, White, Grey)을 기본으로 하여 정돈된 업무 환경을 제공합니다.
|
||||
* **Green Accent**: 블루 대신 짙은 그린(`#1E5149`)을 포인트 컬러로 사용하여 차분한 전문성을 강조합니다.
|
||||
|
||||
2. **타이포그래피 (Typography)**
|
||||
* **Font Family**: `Pretendard` (전역 적용)
|
||||
* **Letter Spacing**: `-0.02em` (약 -2%) 적용. 자간을 좁게 설정하여 밀도 있고 세련된 가독성을 확보합니다.
|
||||
* **Weights**: 400(Regular), 500(Medium), 600(SemiBold), 700(Bold).
|
||||
* **Date Format (날짜 표기 규칙)**: 시스템 내 모든 날짜는 `YYYY.MM.DD` 형식을 기본으로 사용합니다. (예: 2026.04.10)
|
||||
|
||||
3. **컬러 팔레트 (Color Palette)**
|
||||
* **Point Color**: `#1E5149` (Deep Green) - 강조, 활성화 상태, 주요 액션 버튼.
|
||||
* **Text**: Main(`#111827` - Near Black), Muted(`#6B7280` - Grey).
|
||||
* **Border/Divider**: `#E5E7EB` (Light Grey) - 정보 구분을 위한 얇은 실선.
|
||||
* **Background**: `#FFFFFF` (White) / `#F9FAFB` (Off White).
|
||||
|
||||
4. **레이아웃 및 컴포넌트 규칙 (Layout Rules)**
|
||||
* **Box-less Design**: 꼭 필요한 정보 묶음(데이터 그룹화 등)이 아니면 박스 형태의 테두리나 배경 사용을 지양합니다.
|
||||
* **Line-based Division**: 섹션 간의 구분은 1px 두께의 얇은 실선(Border)을 통해 명확히 합니다.
|
||||
* **Table**: 배경색이나 화려한 효과 없이 행(Row) 간의 얇은 구분선만 사용하여 데이터 본연에 집중하게 합니다.
|
||||
* **Input/Button**: 입력 필드와 버튼은 최소한의 보더와 포인트 컬러만 사용하여 정갈하게 표현합니다.
|
||||
* **Modal (모달 공통 규칙)**:
|
||||
* **Header**: 짙은 그린(`#1E5149`) 배경에 화이트 텍스트를 사용하며, 우측 상단에 명확한 'X' 닫기 버튼을 배치합니다.
|
||||
* **Interaction**: 사용자의 편의를 위해 `ESC` 키를 누르거나 모달 바깥 영역(Overlay)을 클릭하면 모달이 닫히도록 구현합니다.
|
||||
* **Layout**: `detail.png` 기준의 2열 그리드 시스템을 권장하며, 하단 우측에 액션 버튼(닫기, 저장 등)을 배치합니다.
|
||||
|
||||
|
Before Width: | Height: | Size: 92 KiB |
|
Before Width: | Height: | Size: 71 KiB |
|
Before Width: | Height: | Size: 77 KiB |
|
Before Width: | Height: | Size: 195 KiB |
|
Before Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 72 KiB |
|
Before Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 72 KiB |
|
Before Width: | Height: | Size: 53 KiB |
@@ -1,13 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css" />
|
||||
<title>ITAM - IT Asset Management</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,32 +0,0 @@
|
||||
# 📑 ITAM 시스템 통합 구축 기획서 (plan.md)
|
||||
|
||||
## 1. 프로젝트 목적 (Objective)
|
||||
본 시스템은 **'전산자산번호 부여방안'** 표준 가이드에 따라 사내 모든 전산 자산을 통합 관리하는 것을 목적으로 한다. 분산된 자산 정보를 일원화된 번호 체계로 시스템화하여 직관적인 식별과 정밀한 이력 추적이 가능한 플랫폼을 지향한다.
|
||||
|
||||
## 2. 자산번호 체계 적용 (Standardization)
|
||||
검토안에 따라 모든 자산은 다음과 같은 규칙으로 고유 번호를 부여받으며, 시스템의 핵심 Key로 활용된다.
|
||||
|
||||
* **번호 생성 규칙**: `[구매법인]-[설치위치]-[자산종류]-[일련번호(구매연월+3자리)]`
|
||||
* *예시: 삼안에서 2025년 4월에 구매한 IDC 서버 → `SM-IDC-SVR-202504001`*
|
||||
* **코드 정의**:
|
||||
* **구매법인**: BR(바론), SM(삼안), HM(한맥), JH(장헌), HL(한라), PTC(PTC) 등
|
||||
* **설치위치**: TDC(센터 서버실), HBD(한맥빌딩), IDC(IDC), UBD(유니온 빌딩), NBD(뉴코아 빌딩) 등
|
||||
* **자산종류**: SVR(서버), PC(PC), STO(스토리지), NAS(NAS), DAS(DAS), HDD(하드) 등
|
||||
|
||||
## 3. 기획 의도 및 시스템 가치 (Core Intent)
|
||||
1. **식별 용이성 확보**: 번호만으로도 법인, 위치, 종류, 도입 시기를 즉시 파악할 수 있는 시스템 UI를 제공한다.
|
||||
2. **전사 통합 관리 로드맵**:
|
||||
* **Phase 1**: IDC 서버 및 스토리지 데이터 마이그레이션 (현재 완료 단계)
|
||||
* **Phase 2**: 센터 서버실(TDC) 및 빌딩별 네트워크 장비 확장
|
||||
* **Phase 3**: 전사 개인 PC(PC) 및 하드웨어 부품(HDD 등) 통합
|
||||
* **Phase 4**: 소프트웨어 라이선스와 하드웨어 자산의 매핑 관리
|
||||
3. **데이터 무결성 유지**: 자산 위치 변경 시 기존 번호를 폐기하고 신규 번호를 부여하는 이력 관리 원칙을 시스템상에서 강제 및 기록한다.
|
||||
|
||||
## 4. 시스템 주요 기능 (Key Features)
|
||||
* **자산 자동 번호 부여**: 입력 폼에서 법인/위치/종류 선택 시 가이드에 따른 자산번호 자동 생성 기능.
|
||||
* **상세 이력 카드**: 자산번호를 클릭하면 상세 사양, 취득일, 사용자, 현재 상태 및 과거 이동 이력을 모달로 표시.
|
||||
* **통합 필터링**: 법인별, 위치별, 종류별로 자산을 즉시 분류하여 조회할 수 있는 고성능 테이블 제공.
|
||||
|
||||
## 5. 기술 및 디자인 원칙 (Engineering Standards)
|
||||
* **Design**: `README.md` 가이드를 준수하며, 자산번호가 가장 강조되는 레이아웃을 유지한다.
|
||||
* **Data Structure**: 향후 DB 전환 시 자산번호의 각 코드(SM, IDC 등)를 정규화하여 관리 효율을 극대화한다.
|
||||
@@ -1,295 +0,0 @@
|
||||
:root {
|
||||
--primary-color: #1E5149;
|
||||
--primary-hover: #163d37;
|
||||
--bg-default: #FFFFFF;
|
||||
--bg-muted: #F9FAFB;
|
||||
--info-color: #4B5563; /* 무채색 계열로 변경 */
|
||||
--text-main: #111827;
|
||||
--text-muted: #6B7280;
|
||||
--border-color: #E5E7EB;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background-color: var(--bg-default);
|
||||
color: var(--text-main);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
height: 50px;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 40px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.top-bar-brand {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
margin-right: 48px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.top-bar-menu {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
height: 100%;
|
||||
border-bottom: 3px solid transparent;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.menu-item.active {
|
||||
color: white;
|
||||
border-bottom: 3px solid white;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 50px);
|
||||
overflow: hidden; /* 전체 페이지 스크롤 방지 */
|
||||
padding: 0; /* 패딩은 내부 요소에서 관리 */
|
||||
}
|
||||
|
||||
.content-header {
|
||||
padding: 32px 40px 16px 40px;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: var(--bg-default);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 0 40px 40px 40px;
|
||||
}
|
||||
|
||||
.content-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
/* Common Table Styles */
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: separate; /* sticky border 유지를 위해 separate 사용 */
|
||||
border-spacing: 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.data-table th, .data-table td {
|
||||
padding: 14px 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
background-color: #F8FAFC; /* 헤더 전용 배경색 */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.data-table tr:hover {
|
||||
background-color: var(--bg-muted);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background-color: var(--bg-muted);
|
||||
}
|
||||
|
||||
/* Dashboard Stats - Border based */
|
||||
.dashboard-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 0;
|
||||
margin-bottom: 48px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.stat-card:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Modal Styles */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--bg-default);
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.modal-close-btn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px 24px;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.detail-item.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.detail-item label {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-muted);
|
||||
background-color: var(--bg-default);
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
background-color: var(--bg-muted);
|
||||
}
|
||||
|
||||
@@ -1,51 +0,0 @@
|
||||
import { useState } from 'react'
|
||||
import './App.css'
|
||||
import AssetManagementView from './components/AssetManagementView'
|
||||
import HardwareManagementView from './components/HardwareManagementView'
|
||||
|
||||
function App() {
|
||||
const [activeMenu, setActiveMenu] = useState('assets')
|
||||
|
||||
const renderContent = () => {
|
||||
switch (activeMenu) {
|
||||
case 'assets':
|
||||
return <AssetManagementView />
|
||||
case 'hardware':
|
||||
return <HardwareManagementView />
|
||||
default:
|
||||
return <AssetManagementView />
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="app-container">
|
||||
<header className="top-bar">
|
||||
<div className="top-bar-brand">
|
||||
ITAM System
|
||||
</div>
|
||||
<nav className="top-bar-menu">
|
||||
<div
|
||||
className={`menu-item ${activeMenu === 'assets' ? 'active' : ''}`}
|
||||
onClick={() => setActiveMenu('assets')}
|
||||
>
|
||||
전산자산관리대장
|
||||
</div>
|
||||
<div
|
||||
className={`menu-item ${activeMenu === 'hardware' ? 'active' : ''}`}
|
||||
onClick={() => setActiveMenu('hardware')}
|
||||
>
|
||||
H/W 사양 정보
|
||||
</div>
|
||||
<div className="menu-item">S/W 설치 현황</div>
|
||||
<div className="menu-item">라이선스 관리</div>
|
||||
<div className="menu-item">실물 자산 관리</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main className="main-content">
|
||||
{renderContent()}
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
@@ -1,168 +0,0 @@
|
||||
import { useState } from 'react'
|
||||
import { idcServers, idcStorages, IdcServer } from '../data/idcData'
|
||||
import ServerDetailModal from './ServerDetailModal'
|
||||
|
||||
const AssetManagementView = () => {
|
||||
const [viewMode, setViewMode] = useState<'server' | 'storage'>('server')
|
||||
const [selectedServer, setSelectedServer] = useState<IdcServer | null>(null)
|
||||
|
||||
return (
|
||||
<div className="asset-management" style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
|
||||
<div className="content-header">
|
||||
<div className="content-title">전산자산관리대장 (IDC)</div>
|
||||
<div style={{ display: 'flex', gap: '12px' }}>
|
||||
<button
|
||||
className={`btn ${viewMode === 'server' ? 'btn-primary' : 'btn-outline'}`}
|
||||
onClick={() => setViewMode('server')}
|
||||
>
|
||||
서버 목록
|
||||
</button>
|
||||
<button
|
||||
className={`btn ${viewMode === 'storage' ? 'btn-primary' : 'btn-outline'}`}
|
||||
onClick={() => setViewMode('storage')}
|
||||
>
|
||||
스토리지 목록
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="table-container">
|
||||
<div style={{ padding: '24px 0 16px 0' }}>
|
||||
<h3 style={{ fontSize: '1.125rem', fontWeight: 600, color: 'var(--primary-color)', margin: 0 }}>
|
||||
{viewMode === 'server' ? 'IDC 서버 상세 정보' : 'IDC 스토리지 상세 정보'}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{viewMode === 'server' ? (
|
||||
<table className="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>회사</th>
|
||||
<th>서버번호</th>
|
||||
<th>구분</th>
|
||||
<th>설치위치</th>
|
||||
<th>관리자</th>
|
||||
<th>IP 주소</th>
|
||||
<th>접속 정보</th>
|
||||
<th>H/W 사양</th>
|
||||
<th>OS</th>
|
||||
<th>구매일</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{idcServers.map((server) => (
|
||||
<tr key={server.serverNo} onClick={() => setSelectedServer(server)} style={{ cursor: 'pointer' }}>
|
||||
<td style={{ fontWeight: 600 }}>{server.company}</td>
|
||||
<td style={{ color: 'var(--primary-color)', fontWeight: 500 }}>{server.serverNo}</td>
|
||||
<td>
|
||||
<div>{server.category}</div>
|
||||
{server.remarks && <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{server.remarks}</div>}
|
||||
</td>
|
||||
<td>{server.location}</td>
|
||||
<td>
|
||||
<div style={{ fontWeight: 500 }}>{server.managerPrimary ? `정: ${server.managerPrimary}` : '정: -'}</div>
|
||||
<div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{server.managerSecondary ? `부: ${server.managerSecondary}` : '부: -'}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>{server.ip1}</div>
|
||||
{server.ip2 && <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{server.ip2}</div>}
|
||||
</td>
|
||||
<td>
|
||||
{server.remoteAccess.map((access, idx) => (
|
||||
<div key={idx} style={{
|
||||
marginBottom: idx < server.remoteAccess.length - 1 ? '8px' : 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '2px'
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
|
||||
<span style={{ fontSize: '0.7rem', backgroundColor: '#f3f4f6', padding: '1px 4px', borderRadius: '2px', color: 'var(--text-muted)', fontWeight: 600 }}>{access.tool}</span>
|
||||
<span style={{ fontSize: '0.8125rem', fontWeight: 500 }}>{access.id}</span>
|
||||
</div>
|
||||
<div style={{ fontSize: '0.75rem', color: 'var(--text-muted)', paddingLeft: '4px', borderLeft: '1px solid var(--border-color)', marginLeft: '4px' }}>
|
||||
PW: <span style={{ color: 'var(--text-main)' }}>{access.pw}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</td>
|
||||
<td style={{ fontSize: '0.8125rem' }}>
|
||||
<div style={{ fontWeight: 500 }}>{server.model}</div>
|
||||
<div style={{ color: 'var(--text-muted)' }}>{server.cpu} / {server.ram}</div>
|
||||
<div style={{ color: 'var(--text-muted)' }}>{server.storage.join(' + ')}</div>
|
||||
</td>
|
||||
<td style={{ fontSize: '0.8125rem' }}>{server.os}</td>
|
||||
<td style={{ fontSize: '0.8125rem' }}>{server.purchaseDate}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
) : (
|
||||
<table className="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>회사</th>
|
||||
<th>서버번호</th>
|
||||
<th>구분</th>
|
||||
<th>설치위치</th>
|
||||
<th>관리자</th>
|
||||
<th>IP 주소</th>
|
||||
<th>접속 정보</th>
|
||||
<th>모델명</th>
|
||||
<th>용량</th>
|
||||
<th>구매일</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{idcStorages.map((storage) => (
|
||||
<tr key={storage.serverNo}>
|
||||
<td style={{ fontWeight: 600 }}>{storage.company}</td>
|
||||
<td style={{ color: 'var(--primary-color)', fontWeight: 500 }}>{storage.serverNo}</td>
|
||||
<td>
|
||||
<div>{storage.category}</div>
|
||||
{storage.remarks && <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{storage.remarks}</div>}
|
||||
</td>
|
||||
<td>{storage.location}</td>
|
||||
<td>
|
||||
<span style={{ fontWeight: 500 }}>정: {storage.managerPrimary}</span>
|
||||
<span style={{ fontSize: '0.75rem', color: 'var(--text-muted)', marginLeft: '8px' }}>부: {storage.managerSecondary}</span>
|
||||
</td>
|
||||
<td>{storage.ip}</td>
|
||||
<td>
|
||||
{storage.remoteAccess.map((access, idx) => (
|
||||
<div key={idx} style={{
|
||||
marginBottom: idx < storage.remoteAccess.length - 1 ? '8px' : 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '2px'
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
|
||||
<span style={{ fontSize: '0.7rem', backgroundColor: '#f3f4f6', padding: '1px 4px', borderRadius: '2px', color: 'var(--text-muted)', fontWeight: 600 }}>{access.tool}</span>
|
||||
<span style={{ fontSize: '0.8125rem', fontWeight: 500 }}>{access.id}</span>
|
||||
</div>
|
||||
<div style={{ fontSize: '0.75rem', color: 'var(--text-muted)', paddingLeft: '4px', borderLeft: '1px solid var(--border-color)', marginLeft: '4px' }}>
|
||||
PW: <span style={{ color: 'var(--text-main)' }}>{access.pw}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</td>
|
||||
<td>{storage.model}</td>
|
||||
<td style={{ fontWeight: 600 }}>{storage.capacity}</td>
|
||||
<td>{storage.purchaseDate}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{selectedServer && (
|
||||
<ServerDetailModal
|
||||
server={selectedServer}
|
||||
onClose={() => setSelectedServer(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AssetManagementView
|
||||
@@ -1,51 +0,0 @@
|
||||
import { mockCategories } from '../data/mockData'
|
||||
|
||||
const DashboardView = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className="content-header">
|
||||
<div className="content-title">대시보드</div>
|
||||
</div>
|
||||
|
||||
<div className="dashboard-stats">
|
||||
<div className="stat-card">
|
||||
<div className="stat-label">전체 자산</div>
|
||||
<div className="stat-value">8개</div>
|
||||
</div>
|
||||
{mockCategories.map(cat => (
|
||||
<div key={cat.id} className="stat-card">
|
||||
<div className="stat-label">{cat.name}</div>
|
||||
<div className="stat-value">{cat.count}개</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h3>최근 변경 내역</h3>
|
||||
<table className="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>날짜</th>
|
||||
<th>내용</th>
|
||||
<th>사용자</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>2023-04-11</td>
|
||||
<td>PC 신규 등록</td>
|
||||
<td>이관형</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2023-04-10</td>
|
||||
<td>모니터 부서 할당 변경</td>
|
||||
<td>관리자</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DashboardView
|
||||
@@ -1,87 +0,0 @@
|
||||
import { useState } from 'react'
|
||||
import { mockHardwareSpecs, HardwareSpec } from '../data/mockData'
|
||||
|
||||
const SpecModal = ({ spec, onClose }: { spec: HardwareSpec, onClose: () => void }) => {
|
||||
return (
|
||||
<div style={{
|
||||
position: 'fixed', top: 0, left: 0, width: '100%', height: '100%',
|
||||
backgroundColor: 'rgba(0,0,0,0.5)', display: 'flex', justifyContent: 'center', alignItems: 'center',
|
||||
zIndex: 1000
|
||||
}}>
|
||||
<div className="card" style={{ width: '600px', maxWidth: '90%' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '20px' }}>
|
||||
<h2>상세 사양 정보</h2>
|
||||
<button className="btn" onClick={onClose}>×</button>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: '10px' }}>
|
||||
<strong>PC명:</strong> <span>{spec.pcName}</span>
|
||||
<strong>사용자:</strong> <span>{spec.userName}</span>
|
||||
<strong>부서:</strong> <span>{spec.department}</span>
|
||||
<strong>OS:</strong> <span>{spec.os}</span>
|
||||
<strong>CPU:</strong> <span>{spec.cpu}</span>
|
||||
<strong>Memory:</strong> <span>{spec.memory}</span>
|
||||
<strong>Disk:</strong> <span>{spec.disk}</span>
|
||||
<strong>MAC:</strong> <span>{spec.macAddress}</span>
|
||||
<strong>IP:</strong> <span>{spec.ipAddress}</span>
|
||||
<strong>Graphic:</strong> <span>{spec.graphicCard}</span>
|
||||
</div>
|
||||
<div style={{ marginTop: '20px', textAlign: 'right' }}>
|
||||
<button className="btn btn-primary" onClick={onClose}>닫기</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const HardwareManagementView = () => {
|
||||
const [selectedSpec, setSelectedSpec] = useState<HardwareSpec | null>(null)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="content-header">
|
||||
<div className="content-title">H/W 사양 정보</div>
|
||||
</div>
|
||||
|
||||
<table className="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>PC명</th>
|
||||
<th>부서</th>
|
||||
<th>사용자</th>
|
||||
<th>OS</th>
|
||||
<th>CPU</th>
|
||||
<th>IP주소</th>
|
||||
<th>상세</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{mockHardwareSpecs.map(spec => (
|
||||
<tr key={spec.id}>
|
||||
<td>{spec.pcName}</td>
|
||||
<td>{spec.department}</td>
|
||||
<td>{spec.userName}</td>
|
||||
<td>{spec.os.split(' ')[2]}</td>
|
||||
<td title={spec.cpu}>{spec.cpu.split('@')[0]}</td>
|
||||
<td>{spec.ipAddress}</td>
|
||||
<td>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
style={{ padding: '4px 8px', fontSize: '0.8rem' }}
|
||||
onClick={() => setSelectedSpec(spec)}
|
||||
>
|
||||
보기
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{selectedSpec && (
|
||||
<SpecModal spec={selectedSpec} onClose={() => setSelectedSpec(null)} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default HardwareManagementView
|
||||
@@ -1,144 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { IdcServer } from '../data/idcData';
|
||||
|
||||
interface ServerDetailModalProps {
|
||||
server: IdcServer;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const ServerDetailModal: React.FC<ServerDetailModalProps> = ({ server, onClose }) => {
|
||||
// ESC 키로 모달 닫기
|
||||
useEffect(() => {
|
||||
const handleEsc = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape') {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
window.addEventListener('keydown', handleEsc);
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleEsc);
|
||||
};
|
||||
}, [onClose]);
|
||||
|
||||
return (
|
||||
<div className="modal-overlay" onClick={onClose}>
|
||||
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="modal-header">
|
||||
<h2 style={{ margin: 0, fontSize: '1.125rem', fontWeight: 600 }}>{server.category} ({server.serverNo})</h2>
|
||||
<button className="modal-close-btn" onClick={onClose} aria-label="Close modal">×</button>
|
||||
</div>
|
||||
|
||||
<div className="modal-body">
|
||||
<div className="detail-grid">
|
||||
{/* Row 1 */}
|
||||
<div className="detail-item">
|
||||
<label>회사 구분</label>
|
||||
<div className="detail-value">{server.company}</div>
|
||||
</div>
|
||||
<div className="detail-item">
|
||||
<label>서버 번호</label>
|
||||
<div className="detail-value" style={{ color: 'var(--primary-color)', fontWeight: 600 }}>{server.serverNo}</div>
|
||||
</div>
|
||||
|
||||
{/* Row 2 */}
|
||||
<div className="detail-item">
|
||||
<label>자산명(용도)</label>
|
||||
<div className="detail-value">{server.category}</div>
|
||||
</div>
|
||||
<div className="detail-item">
|
||||
<label>설치 위치</label>
|
||||
<div className="detail-value">{server.location}</div>
|
||||
</div>
|
||||
|
||||
{/* Row 3: 관리자 추가 */}
|
||||
<div className="detail-item full-width">
|
||||
<label>관리 담당자</label>
|
||||
<div className="detail-value">
|
||||
<span style={{ fontWeight: 600, color: 'var(--text-main)' }}>정: {server.managerPrimary}</span>
|
||||
<span style={{ marginLeft: '16px', color: 'var(--text-muted)' }}>부: {server.managerSecondary}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 4 */}
|
||||
<div className="detail-item">
|
||||
<label>IP 주소 1</label>
|
||||
<div className="detail-value">{server.ip1 || '-'}</div>
|
||||
</div>
|
||||
<div className="detail-item">
|
||||
<label>IP 주소 2</label>
|
||||
<div className="detail-value">{server.ip2 || '-'}</div>
|
||||
</div>
|
||||
|
||||
{/* Row 5 */}
|
||||
<div className="detail-item full-width">
|
||||
<label>원격 접속 정보</label>
|
||||
<div className="detail-value">
|
||||
{server.remoteAccess.length > 0 ? (
|
||||
<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
|
||||
{server.remoteAccess.map((access, idx) => (
|
||||
<div key={idx} style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '4px 8px', backgroundColor: 'var(--bg-muted)', borderRadius: '4px', border: '1px solid var(--border-color)' }}>
|
||||
<span style={{ fontSize: '0.75rem', fontWeight: 600, color: 'var(--text-muted)' }}>{access.tool}</span>
|
||||
<span style={{ fontWeight: 500 }}>{access.id}</span>
|
||||
<span style={{ color: 'var(--border-color)' }}>|</span>
|
||||
<span>PW: <span style={{ color: 'var(--text-main)' }}>{access.pw}</span></span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : '-'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 6 */}
|
||||
<div className="detail-item">
|
||||
<label>제조사 및 모델명</label>
|
||||
<div className="detail-value">{server.model || '-'}</div>
|
||||
</div>
|
||||
<div className="detail-item">
|
||||
<label>OS</label>
|
||||
<div className="detail-value">{server.os || '-'}</div>
|
||||
</div>
|
||||
|
||||
{/* Row 7 */}
|
||||
<div className="detail-item">
|
||||
<label>CPU</label>
|
||||
<div className="detail-value">{server.cpu || '-'}</div>
|
||||
</div>
|
||||
<div className="detail-item">
|
||||
<label>RAM</label>
|
||||
<div className="detail-value">{server.ram || '-'}</div>
|
||||
</div>
|
||||
|
||||
{/* Row 8 */}
|
||||
<div className="detail-item full-width">
|
||||
<label>Storage (디스크 구성)</label>
|
||||
<div className="detail-value">{server.storage.length > 0 ? server.storage.join(' + ') : '-'}</div>
|
||||
</div>
|
||||
|
||||
{/* Row 9 */}
|
||||
<div className="detail-item">
|
||||
<label>구매일자</label>
|
||||
<div className="detail-value">{server.purchaseDate || '-'}</div>
|
||||
</div>
|
||||
<div className="detail-item">
|
||||
<label>모니터링 여부</label>
|
||||
<div className="detail-value">{server.monitoring || '-'}</div>
|
||||
</div>
|
||||
|
||||
{/* Row 10 */}
|
||||
<div className="detail-item full-width">
|
||||
<label>비고 및 특이사항</label>
|
||||
<div className="detail-value" style={{ minHeight: '40px' }}>{server.remarks || '-'}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="modal-footer">
|
||||
<button className="btn btn-outline" onClick={onClose} style={{ marginRight: '8px' }}>닫기</button>
|
||||
<button className="btn btn-primary" onClick={onClose}>수정(저장)</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServerDetailModal;
|
||||
@@ -1,608 +0,0 @@
|
||||
export interface RemoteAccess {
|
||||
tool: string;
|
||||
ip?: string;
|
||||
id: string;
|
||||
pw: string;
|
||||
}
|
||||
|
||||
export interface IdcServer {
|
||||
company: string;
|
||||
serverNo: string;
|
||||
category: string;
|
||||
remarks: string;
|
||||
location: string;
|
||||
managerPrimary: string;
|
||||
managerSecondary: string;
|
||||
ip1: string;
|
||||
ip2: string;
|
||||
remoteAccess: RemoteAccess[];
|
||||
monitoring: string;
|
||||
serverIdMatch: string;
|
||||
model: string;
|
||||
os: string;
|
||||
cpu: string;
|
||||
ram: string;
|
||||
storage: string[];
|
||||
purchaseDate: string;
|
||||
}
|
||||
|
||||
export interface IdcStorage {
|
||||
company: string;
|
||||
serverNo: string;
|
||||
category: string;
|
||||
remarks: string;
|
||||
location: string;
|
||||
managerPrimary: string;
|
||||
managerSecondary: string;
|
||||
ip: string;
|
||||
managementIp?: string;
|
||||
remoteAccess: RemoteAccess[];
|
||||
model: string;
|
||||
capacity: string;
|
||||
purchaseDate: string;
|
||||
}
|
||||
|
||||
export const idcServers: IdcServer[] = [
|
||||
{
|
||||
company: "한맥",
|
||||
serverNo: "hm-idc-001",
|
||||
category: "한맥 인트라넷",
|
||||
remarks: "",
|
||||
location: "서관 204번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "211.206.127.70",
|
||||
ip2: "192.168.10.5",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "samanerp1!" },
|
||||
{ tool: "Remote Util", id: "211.206.127.70", pw: "1234아이티!" }
|
||||
],
|
||||
monitoring: "win exp, raid X",
|
||||
serverIdMatch: "srv07d330084",
|
||||
model: "HPE ProLiant DL360 Gen10",
|
||||
os: "Windows Server 2016",
|
||||
cpu: "intel xeon silver4110 CPU @2.10GHz",
|
||||
ram: "32GB",
|
||||
storage: ["280GB", "2.7TB"],
|
||||
purchaseDate: "2020.12.10"
|
||||
},
|
||||
{
|
||||
company: "한맥",
|
||||
serverNo: "hm-idc-002",
|
||||
category: "한맥 인트라넷 예비",
|
||||
remarks: "단가, 입사자지원 서버 (스마트 건설 용도 구매)",
|
||||
location: "서관 205번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "211.206.127.78",
|
||||
ip2: "192.168.10.13",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "Hanmac2141!" }
|
||||
],
|
||||
monitoring: "win exp, raid X",
|
||||
serverIdMatch: "srcff5294c84",
|
||||
model: "HPE ProLiant DL360 Gen10",
|
||||
os: "Windows Server 2019",
|
||||
cpu: "intel xeon silver4214R CPU @2.40GHz",
|
||||
ram: "32GB",
|
||||
storage: ["280GB", "2.7TB"],
|
||||
purchaseDate: ""
|
||||
},
|
||||
{
|
||||
company: "삼안",
|
||||
serverNo: "sa-idc-001",
|
||||
category: "삼안 인트라넷",
|
||||
remarks: "",
|
||||
location: "서관 204번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "118.220.172.237",
|
||||
ip2: "erp.samaneng.com",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "samanerp1!" },
|
||||
{ tool: "Remote Util", id: "118.220.172.237", pw: "1234아이티!" }
|
||||
],
|
||||
monitoring: "O",
|
||||
serverIdMatch: "newSmintranet",
|
||||
model: "HPE ProLiant DL360 Gen10",
|
||||
os: "Windows Server 2016",
|
||||
cpu: "intel xeon silver4214R CPU @2.40GHz",
|
||||
ram: "32GB",
|
||||
storage: ["280GB", "3.27TB"],
|
||||
purchaseDate: "2019.12.20"
|
||||
},
|
||||
{
|
||||
company: "삼안",
|
||||
serverNo: "sa-idc-002",
|
||||
category: "삼안 인트라넷 예비",
|
||||
remarks: "",
|
||||
location: "서관 204번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "118.220.172.249",
|
||||
ip2: "",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "samanerp1!" },
|
||||
{ tool: "Remote Util", id: "678-605-383-130", pw: "1234아이티!" }
|
||||
],
|
||||
monitoring: "설치 X",
|
||||
serverIdMatch: "INTRANET",
|
||||
model: "HPE ProLiant DL360 GEN9",
|
||||
os: "Windows Server 2008 R2",
|
||||
cpu: "Intel(R) Xeon(R) CPU E5-2630 v3 @ 2.40GHz",
|
||||
ram: "32GB",
|
||||
storage: ["279GB", "2.72TB"],
|
||||
purchaseDate: ""
|
||||
},
|
||||
{
|
||||
company: "삼안",
|
||||
serverNo: "sa-idc-003",
|
||||
category: "SATIS 01",
|
||||
remarks: "구 SATIS 서버, 세금계산서 발행(회계)",
|
||||
location: "서관 204번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "118.220.172.228",
|
||||
ip2: "",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "satissg11707808" }
|
||||
],
|
||||
monitoring: "설치 X",
|
||||
serverIdMatch: "satis01",
|
||||
model: "HPE ProLiant DL380p GEN8",
|
||||
os: "Windows Server 2008 R2",
|
||||
cpu: "Intel(R) Xeon(R) CPU E5-2643 0 @ 3.30GHz",
|
||||
ram: "20GB",
|
||||
storage: ["100GB", "458GB"],
|
||||
purchaseDate: ""
|
||||
},
|
||||
{
|
||||
company: "삼안",
|
||||
serverNo: "sa-idc-004",
|
||||
category: "SATIS 02",
|
||||
remarks: "SATIS 리뉴얼 버전 (ERP 서버)",
|
||||
location: "서관 204번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "118.220.172.229",
|
||||
ip2: "",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "satissg11707808" }
|
||||
],
|
||||
monitoring: "설치 X",
|
||||
serverIdMatch: "satis02",
|
||||
model: "HPE ProLiant DL380p GEN8",
|
||||
os: "Windows Server 2008 R2",
|
||||
cpu: "Intel(R) Xeon(R) CPU E5-2643 0 @ 3.30GHz",
|
||||
ram: "20GB",
|
||||
storage: ["100GB", "458GB", "18.1TB"],
|
||||
purchaseDate: ""
|
||||
},
|
||||
{
|
||||
company: "삼안",
|
||||
serverNo: "sa-idc-005",
|
||||
category: "웹 서버",
|
||||
remarks: "남양주 테스트 서버 (도메인 관리 기능 제거 2026.03.11)",
|
||||
location: "서관 204번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "samanweb.cafe24.com",
|
||||
ip2: "118.220.172.195",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "saman+2013+web" }
|
||||
],
|
||||
monitoring: "win exp, 포트 안열림",
|
||||
serverIdMatch: "www",
|
||||
model: "HPE ProLiant DL380p GEN8",
|
||||
os: "Windwos Server 2012",
|
||||
cpu: "Intel(R) Xeon(R) CPU E5-2609 0 @ 2.40GHz",
|
||||
ram: "16GB",
|
||||
storage: ["100GB", "230GB", "230GB"],
|
||||
purchaseDate: ""
|
||||
},
|
||||
{
|
||||
company: "삼안",
|
||||
serverNo: "sa-idc-006",
|
||||
category: "PQ DB 서버",
|
||||
remarks: "",
|
||||
location: "서관 204번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "118.220.172.231",
|
||||
ip2: "",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "7013ddj10235!" }
|
||||
],
|
||||
monitoring: "O",
|
||||
serverIdMatch: "src5dd67f2ed",
|
||||
model: "HPE ProLiant DL360 Gen10",
|
||||
os: "Windows Server 2019",
|
||||
cpu: "intel xeon silver4210R CPU @2.40GHz",
|
||||
ram: "32GB",
|
||||
storage: ["278GB", "2.18TB"],
|
||||
purchaseDate: "2024.12.16"
|
||||
},
|
||||
{
|
||||
company: "삼안",
|
||||
serverNo: "sa-idc-007",
|
||||
category: "Oracle DB 서버",
|
||||
remarks: "",
|
||||
location: "서관 202번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "118.220.172.225",
|
||||
ip2: "",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "7013ddj10235!" }
|
||||
],
|
||||
monitoring: "win exp, raid X",
|
||||
serverIdMatch: "SAMAN-DB",
|
||||
model: "HPE ProLiant DL380 GEN9",
|
||||
os: "Windows Server 2012",
|
||||
cpu: "Intel(R) Xeon(R) CPU E5-2650 v4 @ 2.20GHz",
|
||||
ram: "64GB",
|
||||
storage: ["558GB", "1.09TB", "1.09TB"],
|
||||
purchaseDate: ""
|
||||
},
|
||||
{
|
||||
company: "삼안",
|
||||
serverNo: "sa-idc-008",
|
||||
category: "안전관리",
|
||||
remarks: "삼안 개발서버2 - AI, SSL, 장헌TBM, 노드",
|
||||
location: "서관 202번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "1.234.37.171",
|
||||
ip2: "",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "samanerp1!" }
|
||||
],
|
||||
monitoring: "연결 X",
|
||||
serverIdMatch: "",
|
||||
model: "HPE ProLiant DL380 GEN10",
|
||||
os: "Windwos Server 2022",
|
||||
cpu: "Intel Xeon(R) Silver 4210R CPU @ 2.40GHz",
|
||||
ram: "128GB",
|
||||
storage: ["278GB", "3.27TB"],
|
||||
purchaseDate: "2025.04.10"
|
||||
},
|
||||
{
|
||||
company: "삼안",
|
||||
serverNo: "sa-idc-009",
|
||||
category: "가족사 공통메뉴",
|
||||
remarks: "삼안 개발서버1 - QNA, 급여명세서",
|
||||
location: "서관 202번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "118.220.172.233",
|
||||
ip2: "",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "samanerp1!" }
|
||||
],
|
||||
monitoring: "O",
|
||||
serverIdMatch: "srcc9ac928ee",
|
||||
model: "HPE ProLiant DL380 GEN10",
|
||||
os: "Windwos Server 2022",
|
||||
cpu: "Intel Xeon(R) Silver 4210R CPU @ 2.40GHz",
|
||||
ram: "128GB",
|
||||
storage: ["278GB", "3.27TB"],
|
||||
purchaseDate: "2025.04.10"
|
||||
},
|
||||
{
|
||||
company: "한라",
|
||||
serverNo: "hl-idc-001",
|
||||
category: "한라 인트라넷",
|
||||
remarks: "인트라넷,안전, 운영, MISO 서버로 운영 중(win 2008)",
|
||||
location: "동관 54번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "1.234.37.143",
|
||||
ip2: "",
|
||||
remoteAccess: [
|
||||
{ tool: "Remote Util", id: "1.234.37.143", pw: "1234dkdlxl!" }
|
||||
],
|
||||
monitoring: "설치 X",
|
||||
serverIdMatch: "",
|
||||
model: "HPE ProLiant DL360 GEN9",
|
||||
os: "Windows Server 2008 R2",
|
||||
cpu: "Intel(R) Xeon(R) CPU E5-2603 v4 @ 1.70GHz",
|
||||
ram: "8GB",
|
||||
storage: ["299GB", "631GB"],
|
||||
purchaseDate: ""
|
||||
},
|
||||
{
|
||||
company: "한라",
|
||||
serverNo: "hl-idc-002",
|
||||
category: "안전전산화 서버 (디자인팀 웹)",
|
||||
remarks: "인트라넷 서버 다운 시 백업용 대기",
|
||||
location: "동관 54번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "1.234.37.144",
|
||||
ip2: "192.168.20.49",
|
||||
remoteAccess: [
|
||||
{ tool: "Remote Util", id: "1.234.37.144", pw: "1234dkdlxl!" }
|
||||
],
|
||||
monitoring: "O",
|
||||
serverIdMatch: "",
|
||||
model: "HPE ProLiant DL360 GEN9",
|
||||
os: "Windows Server 2012",
|
||||
cpu: "Intel(R) Xeon(R) CPU E5-2603 v4 @ 1.70GHz",
|
||||
ram: "8GB",
|
||||
storage: ["299GB", "631GB"],
|
||||
purchaseDate: ""
|
||||
},
|
||||
{
|
||||
company: "한라",
|
||||
serverNo: "hl-idc-003",
|
||||
category: "개발서버2",
|
||||
remarks: "PTC 연구비로 구매한 예비서버2",
|
||||
location: "동관 53번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "192.168.20.171",
|
||||
ip2: "1.234.37.171",
|
||||
remoteAccess: [
|
||||
{ tool: "Remote Util", id: "1.234.37.171", pw: "1234dkdlxl!" }
|
||||
],
|
||||
monitoring: "O",
|
||||
serverIdMatch: "",
|
||||
model: "HPE ProLiant DL380 Gen10",
|
||||
os: "Windows Server 2019 Standard",
|
||||
cpu: "Intel(R) Xeon(R) Silver 4214R CPU @ 2.40GHz",
|
||||
ram: "32GB",
|
||||
storage: ["280GB", "1TB"],
|
||||
purchaseDate: "2022.09.21"
|
||||
},
|
||||
{
|
||||
company: "장헌",
|
||||
serverNo: "jh-idc-001",
|
||||
category: "장헌인트라넷",
|
||||
remarks: "BEPs",
|
||||
location: "서관 205번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "211.206.127.71",
|
||||
ip2: "192.168.10.6",
|
||||
remoteAccess: [
|
||||
{ tool: "Remote Util", id: "211.206.127.71", pw: "1234dkdlxl!" },
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "Hanmac2141!%" }
|
||||
],
|
||||
monitoring: "잠금 걸려있음",
|
||||
serverIdMatch: "src775d3e5df",
|
||||
model: "HPE ProLiant DL380 GEN10",
|
||||
os: "Windows Server 2019",
|
||||
cpu: "Intel(R) Xeon(R) Silver 4214R CPU @ 2.40GHz",
|
||||
ram: "32GB",
|
||||
storage: ["280GB", "1TB"],
|
||||
purchaseDate: "2022.09.21"
|
||||
},
|
||||
{
|
||||
company: "장헌",
|
||||
serverNo: "jh-idc-002",
|
||||
category: "장헌 인트라넷 예비",
|
||||
remarks: "",
|
||||
location: "동관 53번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "1.234.37.170",
|
||||
ip2: "192.168.20.170",
|
||||
remoteAccess: [
|
||||
{ tool: "Remote Util", id: "1.234.37.170", pw: "1234dkdlxl!" },
|
||||
{ tool: "원격데스크탑", id: "Administrator", pw: "Hanmac2141!" }
|
||||
],
|
||||
monitoring: "원격 X, O",
|
||||
serverIdMatch: "",
|
||||
model: "HPE ProLiant DL360 Gen10",
|
||||
os: "Windows Server 2019",
|
||||
cpu: "Intel(R) Xeon(R) Silver 4214R CPU @ 2.40GHz",
|
||||
ram: "32GB",
|
||||
storage: ["280GB", "1TB"],
|
||||
purchaseDate: "2022.04.01"
|
||||
},
|
||||
{
|
||||
company: "장헌",
|
||||
serverNo: "jh-idc-003",
|
||||
category: "인트라넷(구)",
|
||||
remarks: "현재는 GIT 백업 으로 사용",
|
||||
location: "서관 205번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "211.206.127.110",
|
||||
ip2: "192.168.10.40",
|
||||
remoteAccess: [
|
||||
{ tool: "Remote Util", id: "211.206.127.110", pw: "1234dkdlxl!" },
|
||||
{ tool: "원격데스크탑", id: "User", pw: "Hanmac2141!" }
|
||||
],
|
||||
monitoring: "",
|
||||
serverIdMatch: "",
|
||||
model: "",
|
||||
os: "Windows Server 2019",
|
||||
cpu: "Intel(R) Xeon(R) Silver 4214R CPU @ 2.40GHz",
|
||||
ram: "",
|
||||
storage: [],
|
||||
purchaseDate: ""
|
||||
},
|
||||
{
|
||||
company: "(주)장헌",
|
||||
serverNo: "jh-idc-004",
|
||||
category: "(주) 장헌 인트라넷",
|
||||
remarks: "2025.12.23 IDC 이전 설치",
|
||||
location: "서관 205번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "211.206.127.76",
|
||||
ip2: "",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "User", pw: "Hanmac2141!%" }
|
||||
],
|
||||
monitoring: "win exp, raid X",
|
||||
serverIdMatch: "DESKTOP-5IL75B7",
|
||||
model: "",
|
||||
os: "Windows 10",
|
||||
cpu: "12th Gen Intel(R) Core(TM) i7-12700F",
|
||||
ram: "32GB",
|
||||
storage: ["465GB", "1.81TB"],
|
||||
purchaseDate: ""
|
||||
},
|
||||
{
|
||||
company: "PTC",
|
||||
serverNo: "ptc-idc-001",
|
||||
category: "PTC인트라넷",
|
||||
remarks: "2024.05.22 인트라넷서버로 교체",
|
||||
location: "서관 205번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "211.206.127.72",
|
||||
ip2: "192.168.10.7",
|
||||
remoteAccess: [
|
||||
{ tool: "Remote Util", id: "211.206.127.72", pw: "1234dkdlxl!" }
|
||||
],
|
||||
monitoring: "설치 X",
|
||||
serverIdMatch: "",
|
||||
model: "SYSTEM X3650 M2",
|
||||
os: "Windows Server 2008 R2",
|
||||
cpu: "Intel(R) Xeon(R) CPU E5520 @ 2.27GHz",
|
||||
ram: "16GB",
|
||||
storage: ["556GB"],
|
||||
purchaseDate: ""
|
||||
},
|
||||
{
|
||||
company: "PTC",
|
||||
serverNo: "ptc-idc-002",
|
||||
category: "예비서버",
|
||||
remarks: "PTC 인트라넷 예비서버",
|
||||
location: "서관 204번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "192.168.10.8",
|
||||
ip2: "",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "1234dkdlxl!" }
|
||||
],
|
||||
monitoring: "O",
|
||||
serverIdMatch: "",
|
||||
model: "HPE ProLiant DL360 GEN10",
|
||||
os: "Windows Server 2019",
|
||||
cpu: "Intel Xeon(R) Silver 4210R CPU @ 2.40GHz",
|
||||
ram: "32GB",
|
||||
storage: ["278GB", "1.09TB"],
|
||||
purchaseDate: "2022.04.01"
|
||||
},
|
||||
{
|
||||
company: "PTC",
|
||||
serverNo: "ptc-idc-003",
|
||||
category: "DB 백업 서버",
|
||||
remarks: "2024.05.22 변경 (데스크탑)",
|
||||
location: "서관 205번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "211.206.127.74",
|
||||
ip2: "192.168.10.9",
|
||||
remoteAccess: [
|
||||
{ tool: "Remote Util", id: "211.206.127.74", pw: "1234dkdlxl!" }
|
||||
],
|
||||
monitoring: "설치 X",
|
||||
serverIdMatch: "",
|
||||
model: "",
|
||||
os: "Window 7",
|
||||
cpu: "Intel(R) Core(TM)2 CPU 6400 @ 2.13GHz",
|
||||
ram: "4GB",
|
||||
storage: ["593GB", "1.23TB"],
|
||||
purchaseDate: ""
|
||||
},
|
||||
{
|
||||
company: "바론",
|
||||
serverNo: "br-idc-001",
|
||||
category: "인트라넷",
|
||||
remarks: "",
|
||||
location: "서관 205번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "211.206.127.75",
|
||||
ip2: "192.168.10.10",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "Hanmac2141!%" }
|
||||
],
|
||||
monitoring: "O",
|
||||
serverIdMatch: "srcf0136042d",
|
||||
model: "HPE ProLiant DL360 GEN10",
|
||||
os: "Windows Server 2022",
|
||||
cpu: "Intel Xeon(R) Silver 4210R CPU @ 2.40GHz",
|
||||
ram: "32GB",
|
||||
storage: ["280GB", "2.18TB"],
|
||||
purchaseDate: "2025.04.14"
|
||||
},
|
||||
{
|
||||
company: "현타",
|
||||
serverNo: "ht-idc-001",
|
||||
category: "인트라넷",
|
||||
remarks: "",
|
||||
location: "동관 53번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "1.234.37.172",
|
||||
ip2: "192.168.20.172",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "Hanmac2141!" }
|
||||
],
|
||||
monitoring: "O",
|
||||
serverIdMatch: "src901e49933",
|
||||
model: "HPE ProLiant DL380 GEN10",
|
||||
os: "Windows Server 2019",
|
||||
cpu: "Intel Xeon Silver 4210R CPU @ 2.40GHz",
|
||||
ram: "32GB",
|
||||
storage: ["280GB", "1TB"],
|
||||
purchaseDate: "2022.09.21"
|
||||
}
|
||||
];
|
||||
|
||||
export const idcStorages: IdcStorage[] = [
|
||||
{
|
||||
company: "삼안",
|
||||
serverNo: "sa-nas-001",
|
||||
category: "인트라넷 백업 스토리지",
|
||||
remarks: "",
|
||||
location: "서관 203번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip: "118.220.172.246",
|
||||
remoteAccess: [{ tool: "원격", id: "administrator", pw: "sg11707808" }],
|
||||
model: "Promiss R Series",
|
||||
capacity: "36TB",
|
||||
purchaseDate: ""
|
||||
},
|
||||
{
|
||||
company: "삼안",
|
||||
serverNo: "sa-nas-002",
|
||||
category: "성과품 스토리지",
|
||||
remarks: "매니지먼트 접속 확인 불가",
|
||||
location: "서관 205번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip: "118.220.172.248",
|
||||
managementIp: "118.220.172.247",
|
||||
remoteAccess: [{ tool: "원격", id: "administrator", pw: "sg11707808" }],
|
||||
model: "ENC_3U_16BAY_D",
|
||||
capacity: "23TB",
|
||||
purchaseDate: "2019.06.03"
|
||||
},
|
||||
{
|
||||
company: "삼안",
|
||||
serverNo: "sa-nas-003",
|
||||
category: "성과품 백업 스토리지",
|
||||
remarks: "",
|
||||
location: "서관 202번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip: "118.220.172.241",
|
||||
managementIp: "118.220.172.240",
|
||||
remoteAccess: [
|
||||
{ tool: "원격", id: "administrator", pw: "saman1!" },
|
||||
{ tool: "원격", id: "admin0", pw: "Root1234" }
|
||||
],
|
||||
model: "Promiss R Series",
|
||||
capacity: "48TB",
|
||||
purchaseDate: "2025.03.13"
|
||||
}
|
||||
];
|
||||
@@ -1,84 +0,0 @@
|
||||
export interface Category {
|
||||
id: string;
|
||||
name: string;
|
||||
count: number;
|
||||
}
|
||||
|
||||
export interface Asset {
|
||||
id: string;
|
||||
categoryName: string;
|
||||
name: string;
|
||||
quantity: number;
|
||||
internalCode: string;
|
||||
serialNumber: string;
|
||||
department: string;
|
||||
user: string;
|
||||
acquisitionDate: string;
|
||||
status: string;
|
||||
location: string;
|
||||
}
|
||||
|
||||
export interface HardwareSpec {
|
||||
id: string;
|
||||
pcName: string;
|
||||
department: string;
|
||||
userName: string;
|
||||
os: string;
|
||||
cpu: string;
|
||||
memory: string;
|
||||
disk: string;
|
||||
macAddress: string;
|
||||
ipAddress: string;
|
||||
graphicCard: string;
|
||||
}
|
||||
|
||||
export const mockCategories: Category[] = [
|
||||
{ id: '1', name: 'PC', count: 1 },
|
||||
{ id: '2', name: '모니터', count: 5 },
|
||||
{ id: '3', name: '노트북', count: 2 },
|
||||
];
|
||||
|
||||
export const mockAssets: Asset[] = [
|
||||
{
|
||||
id: '1',
|
||||
categoryName: 'PC',
|
||||
name: 'PC',
|
||||
quantity: 1,
|
||||
internalCode: 'PC20230411001',
|
||||
serialNumber: 'SN-001-A1',
|
||||
department: '한맥기술',
|
||||
user: '이관형',
|
||||
acquisitionDate: '2023-04-11',
|
||||
status: '정상',
|
||||
location: '본사 3층',
|
||||
},
|
||||
];
|
||||
|
||||
export const mockHardwareSpecs: HardwareSpec[] = [
|
||||
{
|
||||
id: '1',
|
||||
pcName: 'DESKTOP-G1DVL26',
|
||||
department: '한맥기술',
|
||||
userName: '이준권',
|
||||
os: 'Microsoft Windows 10 Pro 10.0.19044',
|
||||
cpu: 'Intel(R) Core(TM) i5-4590 CPU @ 3.30GHz',
|
||||
memory: 'Samsung 4 GB / Samsung 4 GB',
|
||||
disk: 'ST2000DM001-1CH164 1.82 TB / Samsung SSD 850 EVO 120GB',
|
||||
macAddress: '0862664B98A3',
|
||||
ipAddress: '172.16.9.68',
|
||||
graphicCard: 'NVIDIA GeForce GTX 750',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
pcName: 'DESKTOP-BNBPOUP',
|
||||
department: '한맥기술',
|
||||
userName: '주완기 연구원',
|
||||
os: 'Microsoft Windows 10 Pro 10.0.19045',
|
||||
cpu: 'Intel(R) Core(TM) i5-4570 CPU @ 3.20GHz',
|
||||
memory: 'Samsung 8 GB / Samsung 8 GB',
|
||||
disk: 'ST1000DM003-1CH162 931.51 GB / Samsung SSD 840 EVO 120GB',
|
||||
macAddress: 'E03F4948ECC6',
|
||||
ipAddress: '172.16.9.23',
|
||||
graphicCard: 'Intel(R) HD Graphics 4600',
|
||||
},
|
||||
];
|
||||
@@ -1,26 +0,0 @@
|
||||
:root {
|
||||
font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.02em;
|
||||
|
||||
color-scheme: light;
|
||||
color: #111827;
|
||||
background-color: #F9FAFB;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App.tsx'
|
||||
import './index.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
@@ -1,49 +0,0 @@
|
||||
IDC,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
|
||||
서버목록,,,,,,,,,,,,,,,,,,,,,,,,,,한맥,LMS 서버,mdf,
|
||||
회사,서버번호,구분,비고,설치위치,담당자,,IP 주소,,원격접속,,,모니터링 여부,"서버 이름 ID
|
||||
일치 여부, 전 서버 이름",제조사 및 모델명,OS,CPU,RAM,Storage1,Storage2,Storage3,계산서,,,,,삼안,XR플래그십 스토리지,,20250414
|
||||
,,,,,정,부,IP,IP2,접속도구,아이디,비빌번호,,,,,,,,,,,,,,,장헌,"스토리지, 서버",mdf 추정,
|
||||
한맥,hm-idc-001,한맥 인트라넷,,서관 204번,,,211.206.127.70,192.168.10.5,원격데스크탑,administrator,samanerp1!,"win exp, raid X",srv07d330084,HPE ProLiant DL360 Gen10,Windows Server 2016,intel xeon silver4110 CPU @2.10GHz 2.10GHZ,32GB,280GB,2.7TB,,20201210 추정,한맥,,,,한라,백업서버,mdf,
|
||||
,,,,,,,,,Remote Util,211.206.127.70,1234아이티!,,,,,,,,,,,,,,,,,,
|
||||
,hm-idc-002,한맥 인트라넷 예비,"단가, 입사자지원 서버 (4/1 장헌산업 이름으로 스마트 건설 용도 구매)",서관 205번,,,211.206.127.78,192.168.10.13,원격데스크탑,administrator,Hanmac2141!,"win exp, raid X",srcff5294c84,HPE ProLiant DL360 Gen10,Windows Server 2019,intel xeon silver4214R CPU @2.40GHz 2.39GHZ,32GB,280GB,2.7TB,,,,,,,,,,
|
||||
삼안,sa-idc-001,삼안 인트라넷,,서관 204번,,,118.220.172.237,erp.samaneng.com,원격데스크탑,administrator,samanerp1!,O,newSmintranet,HPE ProLiant DL360 Gen10,Windows Server 2016,intel xeon silver4214R CPU @2.40GHz 2.39GHZ,32GB,280GB,3.27TB,,20191220 추정,삼안,,,,,,,
|
||||
,,,,,,,,,Remote Util,118.220.172.237,1234아이티!,,,,,,,,,,,,,,,,,,
|
||||
,sa-idc-002,삼안 인트라넷 예비,,서관 204번,,,118.220.172.249,,원격데스크탑,administrator,samanerp1!,설치 X,INTRANET,HPE ProLiant DL360 GEN9,Windows Server 2008 R2,Intel(R) Xeon(R) CPU E5-2630 v3 @ 2.40GHz 2.40GHz,32GB,279GB,2.72TB,,,,,,,,,,
|
||||
,,,,,,,,,Remote Util,678-605-383-130,1234아이티!,,,,,,,,,,,,,,,,,,
|
||||
,sa-idc-003,SATIS 01,"구 SATIS 서버, 세금계산서 발행(회계)",서관 204번,,,118.220.172.228,,원격데스크탑,administrator,satissg11707808,설치 X,satis01,HPE ProLiant DL380p GEN8,Windows Server 2008 R2,Intel(R) Xeon(R) CPU E5-2643 0 @ 3.30GHz 3.30GHz,20GB,100GB,458GB,,,,,,,,,,
|
||||
,sa-idc-004,SATIS 02,SATIS 리뉴얼 버전 (ERP 서버),서관 204번,,,118.220.172.229,,원격데스크탑,administrator,satissg11707808,설치 X,satis02,HPE ProLiant DL380p GEN8,Windows Server 2008 R2,Intel(R) Xeon(R) CPU E5-2643 0 @ 3.30GHz 3.30GHz,20GB,100GB,458GB,18.1TB,,,,,,,,,
|
||||
,sa-idc-005,웹 서버,남양주 테스트 서버 (도메인 관리 기능 제거 2026.03.11),서관 204번,,,samanweb.cafe24.com,118.220.172.195,원격데스크탑,administrator,saman+2013+web,"win exp, 포트 안열림",www,HPE ProLiant DL380p GEN8,Windwos Server 2012,Intel(R) Xeon(R) CPU E5-2609 0 @ 2.40GHz 2.40GHz,16GB,100GB,230GB,230GB,,,,,,,,,
|
||||
,sa-idc-006,PQ DB 서버,,서관 204번,,,118.220.172.231,,원격데스크탑,administrator,7013ddj10235!, O,src5dd67f2ed,HPE ProLiant DL360 Gen10,Windows Server 2019,intel xeon silver4210R CPU @2.40GHz 2.39GHZ,32GB,278GB,2.18TB,,20241216 구매교체,삼안,,,,,,,
|
||||
,sa-idc-007,Oracle DB 서버,,서관 202번,,,118.220.172.225,,원격데스크탑,administrator,7013ddj10235!,"win exp, raid X",SAMAN-DB,HPE ProLiant DL380 GEN9,Windows Server 2012,Intel(R) Xeon(R) CPU E5-2650 v4 @ 2.20GHz 2.20GHz,64GB,558GB,1.09TB,1.09TB,,,,,,,,,
|
||||
,sa-idc-008,안전관리,"삼안 개발서버2 - AI, SSL, 장헌TBM, 노드",서관 202번,,,1.234.37.171,,원격데스크탑,administrator,samanerp1!,연결 X,,HPE ProLiant DL380 GEN10,Windwos Server 2022,Intel Xeon(R) Silver 4210R CPU @ 2.40GHz,128GB,278GB,3.27TB,,20250410 설치,삼안,,,,,,,
|
||||
,sa-idc-009,가족사 공통메뉴,"삼안 개발서버1 - QNA, 급여명세서",서관 202번,,,118.220.172.233,,원격데스크탑,administrator,samanerp1!,O,srcc9ac928ee,HPE ProLiant DL380 GEN10,Windwos Server 2022,Intel Xeon(R) Silver 4210R CPU @ 2.40GHz,128GB,278GB,3.27TB,,20250410 설치,삼안,,,,,,,
|
||||
한라,hl-idc-001,한라 인트라넷,"인트라넷,안전, 운영, MISO 서버로 운영 중(win 2008)",동관 54번,,,1.234.37.143,,Remote Util,1.234.37.143,1234dkdlxl!,설치 X,,HPE ProLiant DL360 GEN9,Windows Server 2008 R2,Intel(R) Xeon(R) CPU E5-2603 v4 @ 1.70GHz 1.70GHz,8GB,299GB,631GB,,,,,,,,,,
|
||||
,hl-idc-002,안전전산화 서버 (디자인팀 웹),"인트라넷 서버 다운 시 백업용 대기, (임시) 디자인팀 웹 퍼블리싱 서버",동관 54번,,,1.234.37.144,192.168.20.49,Remote Util,1.234.37.144,1234dkdlxl!,O,,HPE ProLiant DL360 GEN9,Windows Server 2012,Intel(R) Xeon(R) CPU E5-2603 v4 @ 1.70GHz 1.70GHz,8GB,299GB,631GB,,,,,,,,,,
|
||||
,hl-idc-003,개발서버2,PTC 연구비로 구매한 예비서버2 ,동관 53번,,,192.168.20.171,1.234.37.171,Remote Util,1.234.37.171,1234dkdlxl!,O,,HPE ProLiant DL380 Gen10,Windows Server 2019 Standard,Intel(R) Xeon(R) Silver 4214R CPU @ 2.40GHz,32GB,280GB,1TB,,20220921 추정,ptc,,,,,,,
|
||||
,,,"이전 : 하수도자산 소스+프로그램 현재 : 큰길 서비스용 xampp+ PostgreSQL, BEPs",,,,,,원격데스크탑,administrator,Hanmac2141!%,,src775d3e5df,,,,,,,,,,,,,,,,
|
||||
장헌,jh-idc-001,장헌인트라넷,,서관 205번,,,211.206.127.71,192.168.10.6,Remote Util,211.206.127.71,1234dkdlxl!,잠금 걸려있음,,HPE ProLiant DL380 GEN10,Windows Server 2019,Intel(R) Xeon(R) Silver 4214R CPU @ 2.40GHz 2.39GHz,32GB,280GB,1TB,,20220921 추정,ptc,,,,,,,
|
||||
,jh-idc-002,장헌 인트라넷 예비,,동관 53번,,,1.234.37.170,192.168.20.170,Remote Util,1.234.37.170,1234dkdlxl!,"원격 X, O
|
||||
",,HPE ProLiant DL360 Gen10,Windows Server 2019,Intel(R) Xeon(R) Silver 4214R CPU @ 2.40GHz 2.39GHz,32GB,280GB,1TB,,20220401 추정,장헌,,,,,,,
|
||||
,,,,,,,,,원격데스크탑,Administrator,Hanmac2141!,,,,,,,,,,,,,,,,,,
|
||||
,jh-idc-003,인트라넷(구),현재는 GIT 백업 으로 사용,서관 205번,,,211.206.127.110,192.168.10.40,Remote Util,211.206.127.110,1234dkdlxl!,,,,Windows Server 2019,Intel(R) Xeon(R) Silver 4214R CPU @ 2.40GHz,,,,,,,,,,,,,
|
||||
,,,,,,,,,원격데스크탑,User,Hanmac2141!,,,,,,,,,,,,,,,,,,
|
||||
(주)장헌,jh-idc-004,(주) 장헌 인트라넷,2025.12.23 (주) 장헌 센터 MDF에서 IDC로 이전 설치,서관 205번,,,211.206.127.76,,원격데스크탑,User,Hanmac2141!%,"win exp, raid X",DESKTOP-5IL75B7,,Windows 10,12th Gen Intel(R) Core(TM) i7-12700F,32GB,465GB,1.81TB,,,,,,,,,,
|
||||
PTC,ptc-idc-001,PTC인트라넷,"구 파일 서버(부서자료 백업용), 2024.05.22 인트라넷서버로 교체",서관 205번,,,211.206.127.72,192.168.10.7,Remote Util,211.206.127.72,1234dkdlxl!,설치 X,,SYSTEM X3650 M2,Windows Server 2008 R2,Intel(R) Xeon(R) CPU E5520 @ 2.27GHz 2.26GHz,16GB,556GB,,,,,,,,,,,
|
||||
,ptc-idc-002,예비서버,PTC 인트라넷 예비서버,서관 204번,,,192.168.10.8,,원격데스크탑,administrator,1234dkdlxl!,O,,HPE ProLiant DL360 GEN10,Windows Server 2019,Intel Xeon(R) Silver 4210R CPU @ 2.40GHz,32GB,278GB,1.09TB,,20220401 추정,장헌,,,,,,,
|
||||
,ptc-idc-003,DB 백업 서버,"구 파일 인트라넷, 2024.05.22에 DB 백업 테스트 서버로 변경 (데스크탑)",서관 205번,,,211.206.127.74,192.168.10.9,Remote Util,211.206.127.74,1234dkdlxl!,설치 X,,,Window 7,Intel(R) Core(TM)2 CPU 6400 @ 2.13GHz 2.13GHz,4GB,593GB,1.23TB,,,,,,,,,,
|
||||
바론,br-idc-001,인트라넷,,서관 205번,,,211.206.127.75,192.168.10.10,원격데스크탑,administrator,Hanmac2141!%,O,srcf0136042d,HPE ProLiant DL360 GEN10,Windows Server 2022,Intel Xeon(R) Silver 4210R CPU @ 2.40GHz,32GB,280GB,2.18TB,,20250414 추정,바론,,,,,,,
|
||||
현타,ht-idc-001,인트라넷,,동관 53번,,,1.234.37.172,192.168.20.172,원격데스크탑,administrator,Hanmac2141!,O,src901e49933,HPE ProLiant DL380 GEN10,Windows Server 2019,Intel Xeon Silver 4210R CPU @ 2.40GHz 2.39GHz,32GB,280GB,1TB,,20220921 추정,ptc,,,,,,,
|
||||
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
|
||||
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
|
||||
스토리지 목록,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
|
||||
회사,서버번호,구분,비고,설치위치,담당자,,IP 주소,,원격접속,,,,,,모델명,용량,,,,,,,,,,,,,
|
||||
,,,,,정,부,,,접속도구,아이디,비빌번호,,,,,,,,,,,,,,,,,,
|
||||
삼안,sa-das-001,,"Satis01, Satis02 광케이블 연결 (물리연결)",서관 205번,,,,,,,,,,,,,,,,,,,,,,,,,
|
||||
,sa-nas-001,인트라넷 백업 스토리지,,서관 203번,,,(IDC) 118.220.172.246,,원격,administrator,sg11707808,,,,Promiss R Series,36TB,,,,,,,,,,,,,
|
||||
,sa-nas-002,성과품 스토리지,,서관 205번,,,(IDC) 118.220.172.248,,원격,administrator,sg11707808,,,,ENC_3U_16BAY_D // SEAGATE ST2000NM0045,23TB,,,,,20190603 추정,삼안,,,,,,,
|
||||
,,,매니지먼트 접속 확인 불가 (콘솔 연결 후 페이지 오픈 필요),,,,(매니지먼트) 118.220.172.247,,원격,-,-,,,,,,,,,,,,,,,,,,
|
||||
,sa-nas-003,성과품 백업 스토리지,,서관 202번,,,(IDC) 118.220.172.241,,원격,administrator,saman1!,,,,Promiss R Series,48TB,,,,,20250313,삼안,,,,,,,
|
||||
,,,,,,,(매지니먼트) 118.220.172.240,,원격,admin0,Root1234,,,,,,,,,,,,,,,,,,
|
||||
한라,hl-das-001,,파일서버 정보 없음(접속 불가),동관 54번,,,,,,,,,,,,,,,,,20190701 추정,한라,(한라 파일서버도 동일일자 추정),,,,,,
|
||||
,hl-das-002,,,동관 54번,,,,,,,,,,,,,,,,,,,,,,,,,
|
||||
|
1834
build/pc_agent/Analysis-00.toc
Normal file
211
build/pc_agent/EXE-00.toc
Normal file
@@ -0,0 +1,211 @@
|
||||
('D:\\이태훈\\22전산자산조사\\ITAM\\dist\\pc_agent.exe',
|
||||
True,
|
||||
False,
|
||||
False,
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\PyInstaller\\bootloader\\images\\icon-console.ico',
|
||||
None,
|
||||
False,
|
||||
False,
|
||||
b'<?xml version="1.0" encoding="UTF-8" standalone="yes"?>\n<assembly xmlns='
|
||||
b'"urn:schemas-microsoft-com:asm.v1" manifestVersion="1.0">\n <trustInfo x'
|
||||
b'mlns="urn:schemas-microsoft-com:asm.v3">\n <security>\n <requested'
|
||||
b'Privileges>\n <requestedExecutionLevel level="asInvoker" uiAccess='
|
||||
b'"false"/>\n </requestedPrivileges>\n </security>\n </trustInfo>\n '
|
||||
b'<compatibility xmlns="urn:schemas-microsoft-com:compatibility.v1">\n <'
|
||||
b'application>\n <supportedOS Id="{e2011457-1546-43c5-a5fe-008deee3d3f'
|
||||
b'0}"/>\n <supportedOS Id="{35138b9a-5d96-4fbd-8e2d-a2440225f93a}"/>\n '
|
||||
b' <supportedOS Id="{4a2f28e3-53b9-4441-ba9c-d69d4a4a6e38}"/>\n <s'
|
||||
b'upportedOS Id="{1f676c76-80e1-4239-95bb-83d0f6d0da78}"/>\n <supporte'
|
||||
b'dOS Id="{8e0f7a12-bfb3-4fe8-b9a5-48fd50a15a9a}"/>\n </application>\n <'
|
||||
b'/compatibility>\n <application xmlns="urn:schemas-microsoft-com:asm.v3">'
|
||||
b'\n <windowsSettings>\n <longPathAware xmlns="http://schemas.micros'
|
||||
b'oft.com/SMI/2016/WindowsSettings">true</longPathAware>\n </windowsSett'
|
||||
b'ings>\n </application>\n <dependency>\n <dependentAssembly>\n <ass'
|
||||
b'emblyIdentity type="win32" name="Microsoft.Windows.Common-Controls" version='
|
||||
b'"6.0.0.0" processorArchitecture="*" publicKeyToken="6595b64144ccf1df" langua'
|
||||
b'ge="*"/>\n </dependentAssembly>\n </dependency>\n</assembly>',
|
||||
True,
|
||||
False,
|
||||
None,
|
||||
None,
|
||||
None,
|
||||
'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\pc_agent.pkg',
|
||||
[('pyi-contents-directory _internal', '', 'OPTION'),
|
||||
('PYZ-00.pyz', 'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\PYZ-00.pyz', 'PYZ'),
|
||||
('struct',
|
||||
'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\localpycs\\struct.pyc',
|
||||
'PYMODULE'),
|
||||
('pyimod01_archive',
|
||||
'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\localpycs\\pyimod01_archive.pyc',
|
||||
'PYMODULE'),
|
||||
('pyimod02_importers',
|
||||
'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\localpycs\\pyimod02_importers.pyc',
|
||||
'PYMODULE'),
|
||||
('pyimod03_ctypes',
|
||||
'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\localpycs\\pyimod03_ctypes.pyc',
|
||||
'PYMODULE'),
|
||||
('pyimod04_pywin32',
|
||||
'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\localpycs\\pyimod04_pywin32.pyc',
|
||||
'PYMODULE'),
|
||||
('pyiboot01_bootstrap',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\PyInstaller\\loader\\pyiboot01_bootstrap.py',
|
||||
'PYSOURCE'),
|
||||
('pyi_rth_inspect',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\PyInstaller\\hooks\\rthooks\\pyi_rth_inspect.py',
|
||||
'PYSOURCE'),
|
||||
('pyi_rth_pkgutil',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\PyInstaller\\hooks\\rthooks\\pyi_rth_pkgutil.py',
|
||||
'PYSOURCE'),
|
||||
('pyi_rth_multiprocessing',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\PyInstaller\\hooks\\rthooks\\pyi_rth_multiprocessing.py',
|
||||
'PYSOURCE'),
|
||||
('pyi_rth_cryptography_openssl',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\_pyinstaller_hooks_contrib\\rthooks\\pyi_rth_cryptography_openssl.py',
|
||||
'PYSOURCE'),
|
||||
('pyi_rth_pywintypes',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\_pyinstaller_hooks_contrib\\rthooks\\pyi_rth_pywintypes.py',
|
||||
'PYSOURCE'),
|
||||
('pyi_rth_pythoncom',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\_pyinstaller_hooks_contrib\\rthooks\\pyi_rth_pythoncom.py',
|
||||
'PYSOURCE'),
|
||||
('pc_agent', 'D:\\이태훈\\22전산자산조사\\ITAM\\pc_agent.py', 'PYSOURCE'),
|
||||
('python312.dll',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\python312.dll',
|
||||
'BINARY'),
|
||||
('pywin32_system32\\pywintypes312.dll',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\pywin32_system32\\pywintypes312.dll',
|
||||
'BINARY'),
|
||||
('pywin32_system32\\pythoncom312.dll',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\pywin32_system32\\pythoncom312.dll',
|
||||
'BINARY'),
|
||||
('select.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\select.pyd',
|
||||
'EXTENSION'),
|
||||
('_multiprocessing.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_multiprocessing.pyd',
|
||||
'EXTENSION'),
|
||||
('pyexpat.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\pyexpat.pyd',
|
||||
'EXTENSION'),
|
||||
('_ssl.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_ssl.pyd',
|
||||
'EXTENSION'),
|
||||
('_hashlib.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_hashlib.pyd',
|
||||
'EXTENSION'),
|
||||
('unicodedata.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\unicodedata.pyd',
|
||||
'EXTENSION'),
|
||||
('_decimal.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_decimal.pyd',
|
||||
'EXTENSION'),
|
||||
('_lzma.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_lzma.pyd',
|
||||
'EXTENSION'),
|
||||
('_bz2.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_bz2.pyd',
|
||||
'EXTENSION'),
|
||||
('_ctypes.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_ctypes.pyd',
|
||||
'EXTENSION'),
|
||||
('_queue.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_queue.pyd',
|
||||
'EXTENSION'),
|
||||
('_wmi.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_wmi.pyd',
|
||||
'EXTENSION'),
|
||||
('_socket.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_socket.pyd',
|
||||
'EXTENSION'),
|
||||
('_overlapped.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_overlapped.pyd',
|
||||
'EXTENSION'),
|
||||
('_asyncio.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_asyncio.pyd',
|
||||
'EXTENSION'),
|
||||
('_cffi_backend.cp312-win_amd64.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\_cffi_backend.cp312-win_amd64.pyd',
|
||||
'EXTENSION'),
|
||||
('cryptography\\hazmat\\bindings\\_rust.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography\\hazmat\\bindings\\_rust.pyd',
|
||||
'EXTENSION'),
|
||||
('charset_normalizer\\md__mypyc.cp312-win_amd64.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\charset_normalizer\\md__mypyc.cp312-win_amd64.pyd',
|
||||
'EXTENSION'),
|
||||
('charset_normalizer\\md.cp312-win_amd64.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\charset_normalizer\\md.cp312-win_amd64.pyd',
|
||||
'EXTENSION'),
|
||||
('win32\\_win32sysloader.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\win32\\_win32sysloader.pyd',
|
||||
'EXTENSION'),
|
||||
('win32\\win32api.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\win32\\win32api.pyd',
|
||||
'EXTENSION'),
|
||||
('Pythonwin\\win32ui.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\Pythonwin\\win32ui.pyd',
|
||||
'EXTENSION'),
|
||||
('win32\\win32event.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\win32\\win32event.pyd',
|
||||
'EXTENSION'),
|
||||
('win32\\win32trace.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\win32\\win32trace.pyd',
|
||||
'EXTENSION'),
|
||||
('VCRUNTIME140.dll',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\VCRUNTIME140.dll',
|
||||
'BINARY'),
|
||||
('VCRUNTIME140_1.dll',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\VCRUNTIME140_1.dll',
|
||||
'BINARY'),
|
||||
('libssl-3.dll',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\libssl-3.dll',
|
||||
'BINARY'),
|
||||
('libcrypto-3.dll',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\libcrypto-3.dll',
|
||||
'BINARY'),
|
||||
('libffi-8.dll',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\libffi-8.dll',
|
||||
'BINARY'),
|
||||
('python3.dll',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\python3.dll',
|
||||
'BINARY'),
|
||||
('Pythonwin\\mfc140u.dll',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\Pythonwin\\mfc140u.dll',
|
||||
'BINARY'),
|
||||
('certifi\\cacert.pem',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\certifi\\cacert.pem',
|
||||
'DATA'),
|
||||
('certifi\\py.typed',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\certifi\\py.typed',
|
||||
'DATA'),
|
||||
('cryptography-45.0.2.dist-info\\licenses\\LICENSE.BSD',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\licenses\\LICENSE.BSD',
|
||||
'DATA'),
|
||||
('cryptography-45.0.2.dist-info\\licenses\\LICENSE',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\licenses\\LICENSE',
|
||||
'DATA'),
|
||||
('cryptography-45.0.2.dist-info\\RECORD',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\RECORD',
|
||||
'DATA'),
|
||||
('cryptography-45.0.2.dist-info\\METADATA',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\METADATA',
|
||||
'DATA'),
|
||||
('cryptography-45.0.2.dist-info\\WHEEL',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\WHEEL',
|
||||
'DATA'),
|
||||
('cryptography-45.0.2.dist-info\\INSTALLER',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\INSTALLER',
|
||||
'DATA'),
|
||||
('cryptography-45.0.2.dist-info\\licenses\\LICENSE.APACHE',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\licenses\\LICENSE.APACHE',
|
||||
'DATA'),
|
||||
('base_library.zip',
|
||||
'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\base_library.zip',
|
||||
'DATA')],
|
||||
[],
|
||||
False,
|
||||
False,
|
||||
1779102721,
|
||||
[('run.exe',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\PyInstaller\\bootloader\\Windows-64bit-intel\\run.exe',
|
||||
'EXECUTABLE')],
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\python312.dll')
|
||||
189
build/pc_agent/PKG-00.toc
Normal file
@@ -0,0 +1,189 @@
|
||||
('D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\pc_agent.pkg',
|
||||
{'BINARY': True,
|
||||
'DATA': True,
|
||||
'EXECUTABLE': True,
|
||||
'EXTENSION': True,
|
||||
'PYMODULE': True,
|
||||
'PYSOURCE': True,
|
||||
'PYZ': False,
|
||||
'SPLASH': True,
|
||||
'SYMLINK': False},
|
||||
[('pyi-contents-directory _internal', '', 'OPTION'),
|
||||
('PYZ-00.pyz', 'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\PYZ-00.pyz', 'PYZ'),
|
||||
('struct',
|
||||
'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\localpycs\\struct.pyc',
|
||||
'PYMODULE'),
|
||||
('pyimod01_archive',
|
||||
'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\localpycs\\pyimod01_archive.pyc',
|
||||
'PYMODULE'),
|
||||
('pyimod02_importers',
|
||||
'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\localpycs\\pyimod02_importers.pyc',
|
||||
'PYMODULE'),
|
||||
('pyimod03_ctypes',
|
||||
'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\localpycs\\pyimod03_ctypes.pyc',
|
||||
'PYMODULE'),
|
||||
('pyimod04_pywin32',
|
||||
'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\localpycs\\pyimod04_pywin32.pyc',
|
||||
'PYMODULE'),
|
||||
('pyiboot01_bootstrap',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\PyInstaller\\loader\\pyiboot01_bootstrap.py',
|
||||
'PYSOURCE'),
|
||||
('pyi_rth_inspect',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\PyInstaller\\hooks\\rthooks\\pyi_rth_inspect.py',
|
||||
'PYSOURCE'),
|
||||
('pyi_rth_pkgutil',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\PyInstaller\\hooks\\rthooks\\pyi_rth_pkgutil.py',
|
||||
'PYSOURCE'),
|
||||
('pyi_rth_multiprocessing',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\PyInstaller\\hooks\\rthooks\\pyi_rth_multiprocessing.py',
|
||||
'PYSOURCE'),
|
||||
('pyi_rth_cryptography_openssl',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\_pyinstaller_hooks_contrib\\rthooks\\pyi_rth_cryptography_openssl.py',
|
||||
'PYSOURCE'),
|
||||
('pyi_rth_pywintypes',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\_pyinstaller_hooks_contrib\\rthooks\\pyi_rth_pywintypes.py',
|
||||
'PYSOURCE'),
|
||||
('pyi_rth_pythoncom',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\_pyinstaller_hooks_contrib\\rthooks\\pyi_rth_pythoncom.py',
|
||||
'PYSOURCE'),
|
||||
('pc_agent', 'D:\\이태훈\\22전산자산조사\\ITAM\\pc_agent.py', 'PYSOURCE'),
|
||||
('python312.dll',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\python312.dll',
|
||||
'BINARY'),
|
||||
('pywin32_system32\\pywintypes312.dll',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\pywin32_system32\\pywintypes312.dll',
|
||||
'BINARY'),
|
||||
('pywin32_system32\\pythoncom312.dll',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\pywin32_system32\\pythoncom312.dll',
|
||||
'BINARY'),
|
||||
('select.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\select.pyd',
|
||||
'EXTENSION'),
|
||||
('_multiprocessing.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_multiprocessing.pyd',
|
||||
'EXTENSION'),
|
||||
('pyexpat.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\pyexpat.pyd',
|
||||
'EXTENSION'),
|
||||
('_ssl.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_ssl.pyd',
|
||||
'EXTENSION'),
|
||||
('_hashlib.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_hashlib.pyd',
|
||||
'EXTENSION'),
|
||||
('unicodedata.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\unicodedata.pyd',
|
||||
'EXTENSION'),
|
||||
('_decimal.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_decimal.pyd',
|
||||
'EXTENSION'),
|
||||
('_lzma.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_lzma.pyd',
|
||||
'EXTENSION'),
|
||||
('_bz2.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_bz2.pyd',
|
||||
'EXTENSION'),
|
||||
('_ctypes.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_ctypes.pyd',
|
||||
'EXTENSION'),
|
||||
('_queue.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_queue.pyd',
|
||||
'EXTENSION'),
|
||||
('_wmi.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_wmi.pyd',
|
||||
'EXTENSION'),
|
||||
('_socket.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_socket.pyd',
|
||||
'EXTENSION'),
|
||||
('_overlapped.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_overlapped.pyd',
|
||||
'EXTENSION'),
|
||||
('_asyncio.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_asyncio.pyd',
|
||||
'EXTENSION'),
|
||||
('_cffi_backend.cp312-win_amd64.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\_cffi_backend.cp312-win_amd64.pyd',
|
||||
'EXTENSION'),
|
||||
('cryptography\\hazmat\\bindings\\_rust.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography\\hazmat\\bindings\\_rust.pyd',
|
||||
'EXTENSION'),
|
||||
('charset_normalizer\\md__mypyc.cp312-win_amd64.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\charset_normalizer\\md__mypyc.cp312-win_amd64.pyd',
|
||||
'EXTENSION'),
|
||||
('charset_normalizer\\md.cp312-win_amd64.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\charset_normalizer\\md.cp312-win_amd64.pyd',
|
||||
'EXTENSION'),
|
||||
('win32\\_win32sysloader.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\win32\\_win32sysloader.pyd',
|
||||
'EXTENSION'),
|
||||
('win32\\win32api.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\win32\\win32api.pyd',
|
||||
'EXTENSION'),
|
||||
('Pythonwin\\win32ui.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\Pythonwin\\win32ui.pyd',
|
||||
'EXTENSION'),
|
||||
('win32\\win32event.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\win32\\win32event.pyd',
|
||||
'EXTENSION'),
|
||||
('win32\\win32trace.pyd',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\win32\\win32trace.pyd',
|
||||
'EXTENSION'),
|
||||
('VCRUNTIME140.dll',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\VCRUNTIME140.dll',
|
||||
'BINARY'),
|
||||
('VCRUNTIME140_1.dll',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\VCRUNTIME140_1.dll',
|
||||
'BINARY'),
|
||||
('libssl-3.dll',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\libssl-3.dll',
|
||||
'BINARY'),
|
||||
('libcrypto-3.dll',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\libcrypto-3.dll',
|
||||
'BINARY'),
|
||||
('libffi-8.dll',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\libffi-8.dll',
|
||||
'BINARY'),
|
||||
('python3.dll',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\python3.dll',
|
||||
'BINARY'),
|
||||
('Pythonwin\\mfc140u.dll',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\Pythonwin\\mfc140u.dll',
|
||||
'BINARY'),
|
||||
('certifi\\cacert.pem',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\certifi\\cacert.pem',
|
||||
'DATA'),
|
||||
('certifi\\py.typed',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\certifi\\py.typed',
|
||||
'DATA'),
|
||||
('cryptography-45.0.2.dist-info\\licenses\\LICENSE.BSD',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\licenses\\LICENSE.BSD',
|
||||
'DATA'),
|
||||
('cryptography-45.0.2.dist-info\\licenses\\LICENSE',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\licenses\\LICENSE',
|
||||
'DATA'),
|
||||
('cryptography-45.0.2.dist-info\\RECORD',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\RECORD',
|
||||
'DATA'),
|
||||
('cryptography-45.0.2.dist-info\\METADATA',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\METADATA',
|
||||
'DATA'),
|
||||
('cryptography-45.0.2.dist-info\\WHEEL',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\WHEEL',
|
||||
'DATA'),
|
||||
('cryptography-45.0.2.dist-info\\INSTALLER',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\INSTALLER',
|
||||
'DATA'),
|
||||
('cryptography-45.0.2.dist-info\\licenses\\LICENSE.APACHE',
|
||||
'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\licenses\\LICENSE.APACHE',
|
||||
'DATA'),
|
||||
('base_library.zip',
|
||||
'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\base_library.zip',
|
||||
'DATA')],
|
||||
'python312.dll',
|
||||
False,
|
||||
False,
|
||||
False,
|
||||
[],
|
||||
None,
|
||||
None,
|
||||
None)
|
||||
BIN
build/pc_agent/PYZ-00.pyz
Normal file
1193
build/pc_agent/PYZ-00.toc
Normal file
BIN
build/pc_agent/base_library.zip
Normal file
BIN
build/pc_agent/localpycs/pyimod01_archive.pyc
Normal file
BIN
build/pc_agent/localpycs/pyimod02_importers.pyc
Normal file
BIN
build/pc_agent/localpycs/pyimod03_ctypes.pyc
Normal file
BIN
build/pc_agent/localpycs/pyimod04_pywin32.pyc
Normal file
BIN
build/pc_agent/localpycs/struct.pyc
Normal file
BIN
build/pc_agent/pc_agent.pkg
Normal file
58
build/pc_agent/warn-pc_agent.txt
Normal file
@@ -0,0 +1,58 @@
|
||||
|
||||
This file lists modules PyInstaller was not able to find. This does not
|
||||
necessarily mean these modules are required for running your program. Both
|
||||
Python's standard library and 3rd-party Python packages often conditionally
|
||||
import optional modules, some of which may be available only on certain
|
||||
platforms.
|
||||
|
||||
Types of import:
|
||||
* top-level: imported at the top-level - look at these first
|
||||
* conditional: imported within an if-statement
|
||||
* delayed: imported within a function
|
||||
* optional: imported within a try-except-statement
|
||||
|
||||
IMPORTANT: Do NOT post this list to the issue-tracker. Use it as a basis for
|
||||
tracking down the missing module yourself. Thanks!
|
||||
|
||||
missing module named pwd - imported by posixpath (delayed, conditional, optional), shutil (delayed, optional), tarfile (optional), pathlib (delayed, optional), subprocess (delayed, conditional, optional), netrc (delayed, conditional), getpass (delayed)
|
||||
missing module named grp - imported by shutil (delayed, optional), tarfile (optional), pathlib (delayed, optional), subprocess (delayed, conditional, optional)
|
||||
missing module named _posixsubprocess - imported by subprocess (conditional), multiprocessing.util (delayed)
|
||||
missing module named fcntl - imported by subprocess (optional)
|
||||
missing module named _posixshmem - imported by multiprocessing.resource_tracker (conditional), multiprocessing.shared_memory (conditional)
|
||||
missing module named _scproxy - imported by urllib.request (conditional)
|
||||
missing module named termios - imported by getpass (optional)
|
||||
missing module named multiprocessing.BufferTooShort - imported by multiprocessing (top-level), multiprocessing.connection (top-level)
|
||||
missing module named multiprocessing.AuthenticationError - imported by multiprocessing (top-level), multiprocessing.connection (top-level)
|
||||
missing module named _frozen_importlib_external - imported by importlib._bootstrap (delayed), importlib (optional), importlib.abc (optional), zipimport (top-level)
|
||||
excluded module named _frozen_importlib - imported by importlib (optional), importlib.abc (optional), zipimport (top-level)
|
||||
missing module named posix - imported by os (conditional, optional), posixpath (optional), shutil (conditional), importlib._bootstrap_external (conditional)
|
||||
missing module named resource - imported by posix (top-level)
|
||||
missing module named multiprocessing.get_context - imported by multiprocessing (top-level), multiprocessing.pool (top-level), multiprocessing.managers (top-level), multiprocessing.sharedctypes (top-level)
|
||||
missing module named multiprocessing.TimeoutError - imported by multiprocessing (top-level), multiprocessing.pool (top-level)
|
||||
missing module named multiprocessing.set_start_method - imported by multiprocessing (top-level), multiprocessing.spawn (top-level)
|
||||
missing module named multiprocessing.get_start_method - imported by multiprocessing (top-level), multiprocessing.spawn (top-level)
|
||||
missing module named pyimod02_importers - imported by C:\Users\User\AppData\Local\Programs\Python\Python312\Lib\site-packages\PyInstaller\hooks\rthooks\pyi_rth_pkgutil.py (delayed)
|
||||
missing module named collections.Callable - imported by collections (optional), socks (optional)
|
||||
missing module named vms_lib - imported by platform (delayed, optional)
|
||||
missing module named 'java.lang' - imported by platform (delayed, optional)
|
||||
missing module named java - imported by platform (delayed)
|
||||
missing module named _winreg - imported by platform (delayed, optional)
|
||||
missing module named simplejson - imported by requests.compat (conditional, optional)
|
||||
missing module named dummy_threading - imported by requests.cookies (optional)
|
||||
missing module named asyncio.DefaultEventLoopPolicy - imported by asyncio (delayed, conditional), asyncio.events (delayed, conditional)
|
||||
missing module named annotationlib - imported by typing_extensions (conditional)
|
||||
missing module named 'h2.events' - imported by urllib3.http2.connection (top-level)
|
||||
missing module named 'h2.connection' - imported by urllib3.http2.connection (top-level)
|
||||
missing module named h2 - imported by urllib3.http2.connection (top-level)
|
||||
missing module named zstandard - imported by urllib3.util.request (optional), urllib3.response (optional)
|
||||
missing module named brotli - imported by urllib3.util.request (optional), urllib3.response (optional)
|
||||
missing module named brotlicffi - imported by urllib3.util.request (optional), urllib3.response (optional)
|
||||
missing module named win_inet_pton - imported by socks (conditional, optional)
|
||||
missing module named bcrypt - imported by cryptography.hazmat.primitives.serialization.ssh (optional)
|
||||
missing module named cryptography.x509.UnsupportedExtension - imported by cryptography.x509 (optional), urllib3.contrib.pyopenssl (optional)
|
||||
missing module named 'OpenSSL.crypto' - imported by urllib3.contrib.pyopenssl (delayed, conditional)
|
||||
missing module named OpenSSL - imported by urllib3.contrib.pyopenssl (top-level)
|
||||
missing module named 'pyodide.ffi' - imported by urllib3.contrib.emscripten.fetch (delayed, optional)
|
||||
missing module named pyodide - imported by urllib3.contrib.emscripten.fetch (top-level)
|
||||
missing module named js - imported by urllib3.contrib.emscripten.fetch (top-level)
|
||||
missing module named 'win32com.gen_py' - imported by win32com (conditional, optional)
|
||||
16542
build/pc_agent/xref-pc_agent.html
Normal file
24
create_db.js
@@ -1,24 +0,0 @@
|
||||
import * as XLSX from 'xlsx';
|
||||
|
||||
const hwTabs = ['개인PC', '서버', '스토리지', '전산비품'];
|
||||
const swTabs = ['구독SW', '영구SW'];
|
||||
|
||||
const hwHeaders = ['법인', '자산코드', '명칭', '위치', '관리자', 'IP주소', 'MACaddress', 'HW사양', 'OS'];
|
||||
const swHeaders = ['법인', 'SW명', '라이선스키', '할당자', '사용기간', '비고'];
|
||||
|
||||
const wb = XLSX.utils.book_new();
|
||||
|
||||
hwTabs.forEach((tab, i) => {
|
||||
const wsData = [hwHeaders, [`(주)회사${i}`, `ASSET-${i}00`, `${tab} 모델A`, '본사 1층', '관리자A', '192.168.0.1', '00:00:00:00:00:01', 'Core i7, 16GB RAM', 'Windows 10']];
|
||||
const ws = XLSX.utils.aoa_to_sheet(wsData);
|
||||
XLSX.utils.book_append_sheet(wb, ws, tab);
|
||||
});
|
||||
|
||||
swTabs.forEach((tab, i) => {
|
||||
const wsData = [swHeaders, [`(주)회사${i}`, `${tab} Adobe CC`, '1234-5678-ABCD', '홍길동,김철수', '2024.01~2024.12', '본사 전용']];
|
||||
const ws = XLSX.utils.aoa_to_sheet(wsData);
|
||||
XLSX.utils.book_append_sheet(wb, ws, tab);
|
||||
});
|
||||
|
||||
XLSX.writeFile(wb, 'temp_db.xlsx');
|
||||
console.log('temp_db.xlsx created!');
|
||||
@@ -1,49 +0,0 @@
|
||||
import mysql from 'mysql2/promise';
|
||||
import dotenv from 'dotenv';
|
||||
|
||||
dotenv.config();
|
||||
|
||||
const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
|
||||
|
||||
async function migrateData() {
|
||||
const connection = await mysql.createConnection({
|
||||
host: DB_HOST,
|
||||
user: DB_USER,
|
||||
password: DB_PASS,
|
||||
database: DB_NAME,
|
||||
port: parseInt(DB_PORT || '3306')
|
||||
});
|
||||
|
||||
console.log('🔄 기존 데이터 보정 시작 (상세유형 = 유형)...');
|
||||
|
||||
const tables = ['pc_assets', 'server_assets', 'storage_assets', 'equip_assets', 'mobile_assets'];
|
||||
|
||||
for (const table of tables) {
|
||||
// 1. 유형(type)이 비어있는 경우 기본값 채우기 (보정 전 단계)
|
||||
let defaultType = '기타';
|
||||
if (table === 'server_assets') defaultType = '서버';
|
||||
else if (table === 'pc_assets') defaultType = '개인PC';
|
||||
else if (table === 'storage_assets') defaultType = '스토리지';
|
||||
else if (table === 'equip_assets') defaultType = '전산비품';
|
||||
else if (table === 'mobile_assets') defaultType = '모바일기기';
|
||||
|
||||
await connection.query(`UPDATE ${table} SET type = ? WHERE type IS NULL OR type = ''`, [defaultType]);
|
||||
|
||||
// 2. 개인PC가 아닌 데이터들에 대해 상세유형 = 유형 업데이트
|
||||
const [result] = await connection.query(`
|
||||
UPDATE ${table}
|
||||
SET detail_purpose = type
|
||||
WHERE type NOT IN ('개인PC', 'PC')
|
||||
`);
|
||||
|
||||
console.log(`✅ ${table}: ${result.affectedRows}개 데이터 보정 완료`);
|
||||
}
|
||||
|
||||
console.log('✨ 모든 기존 데이터 보정이 완료되었습니다.');
|
||||
await connection.end();
|
||||
}
|
||||
|
||||
migrateData().catch(err => {
|
||||
console.error('❌ 데이터 보정 실패:', err);
|
||||
process.exit(1);
|
||||
});
|
||||
64
db_init.js
@@ -45,6 +45,7 @@ async function initDB() {
|
||||
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),
|
||||
@@ -70,16 +71,18 @@ async function initDB() {
|
||||
await connection.query(`
|
||||
CREATE TABLE sw_sub_assets (
|
||||
id VARCHAR(50) PRIMARY KEY,
|
||||
corp VARCHAR(100),
|
||||
asset_code VARCHAR(100),
|
||||
product_name VARCHAR(255),
|
||||
license_type VARCHAR(100),
|
||||
quantity INT,
|
||||
price VARCHAR(100),
|
||||
purchase_date VARCHAR(50),
|
||||
expiry_date VARCHAR(50),
|
||||
vendor VARCHAR(255),
|
||||
remarks TEXT,
|
||||
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;
|
||||
`);
|
||||
@@ -87,15 +90,18 @@ async function initDB() {
|
||||
await connection.query(`
|
||||
CREATE TABLE sw_perm_assets (
|
||||
id VARCHAR(50) PRIMARY KEY,
|
||||
corp VARCHAR(100),
|
||||
asset_code VARCHAR(100),
|
||||
product_name VARCHAR(255),
|
||||
license_key VARCHAR(255),
|
||||
quantity INT,
|
||||
price VARCHAR(100),
|
||||
purchase_date VARCHAR(50),
|
||||
vendor VARCHAR(255),
|
||||
remarks TEXT,
|
||||
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;
|
||||
`);
|
||||
@@ -133,11 +139,29 @@ async function initDB() {
|
||||
|
||||
await connection.query(`
|
||||
CREATE TABLE asset_logs (
|
||||
id VARCHAR(50) PRIMARY KEY,
|
||||
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;
|
||||
`);
|
||||
|
||||
140
debug_excel.json
@@ -1,140 +0,0 @@
|
||||
{
|
||||
"서버 관리대장(기술개발센터).xlsx": [
|
||||
[
|
||||
"마천사무실"
|
||||
],
|
||||
[
|
||||
"실사진",
|
||||
"구성",
|
||||
"자산번호",
|
||||
"명칭(주기)",
|
||||
"상세",
|
||||
"유형",
|
||||
"담당자",
|
||||
null,
|
||||
"IP",
|
||||
"원격접속",
|
||||
null,
|
||||
null,
|
||||
"모델명",
|
||||
"OS",
|
||||
"CPU",
|
||||
"RAM",
|
||||
"GPU",
|
||||
"Storage1",
|
||||
"Storage2",
|
||||
"Storage3"
|
||||
],
|
||||
[
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
"정",
|
||||
"부",
|
||||
null,
|
||||
"접속도구",
|
||||
"아이디",
|
||||
"비밀번호"
|
||||
],
|
||||
[
|
||||
null,
|
||||
null,
|
||||
"",
|
||||
"GSIM NAS",
|
||||
"팀 내부 자료 저장 , 정사영상 및 지도 데이터 저장 , Gitea 및 Git 내장 NAS",
|
||||
"NAS",
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
"Synology DS923+"
|
||||
],
|
||||
[
|
||||
null,
|
||||
null,
|
||||
"",
|
||||
"그래픽스개발팀\r\n데이터 백업 NAS",
|
||||
"그래픽스 개발팀 데이터 백업용 NAS",
|
||||
"NAS",
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
"Synology DS923+"
|
||||
]
|
||||
],
|
||||
"서버 관리대장(한맥빌딩).xlsx": [
|
||||
[
|
||||
"한맥빌딩(MDF 실)"
|
||||
],
|
||||
[
|
||||
"실사진",
|
||||
"구성",
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
"서버번호",
|
||||
"명칭(주기)",
|
||||
"유형",
|
||||
"IP",
|
||||
"모델명",
|
||||
"용도",
|
||||
"담당자",
|
||||
"OS",
|
||||
"CPU",
|
||||
"RAM",
|
||||
"GPU",
|
||||
"Storage1",
|
||||
"Storage2",
|
||||
"Storage3"
|
||||
],
|
||||
[],
|
||||
[
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
1,
|
||||
"NAS 2",
|
||||
"NAS",
|
||||
"192.168.9.23",
|
||||
"DS414j",
|
||||
"한라 기업부설연구소 공용 NAS",
|
||||
"이준하 차장"
|
||||
],
|
||||
[
|
||||
null,
|
||||
null,
|
||||
"NAS2",
|
||||
"NAS 1\r\n(DS224+)",
|
||||
"NAS4",
|
||||
"NAS 5\r\n(DS923+)",
|
||||
"NAS 6\r\n(DS923+)",
|
||||
null,
|
||||
null,
|
||||
2,
|
||||
"NAS 1",
|
||||
"NAS",
|
||||
"192.168.9.32",
|
||||
"DS224+",
|
||||
"한라 사업지원, 경영지원, 업무, 안전품질, 운영 공용 NAS",
|
||||
"이준하 차장"
|
||||
]
|
||||
]
|
||||
}
|
||||
BIN
image 92.png
Normal file
|
After Width: | Height: | Size: 135 KiB |
BIN
img/location_photo/IDC/동관53.png
Normal file
|
After Width: | Height: | Size: 10 MiB |
BIN
img/location_photo/IDC/동관54.png
Normal file
|
After Width: | Height: | Size: 6.3 MiB |
BIN
img/location_photo/IDC/서관202.png
Normal file
|
After Width: | Height: | Size: 4.4 MiB |
BIN
img/location_photo/IDC/서관203.png
Normal file
|
After Width: | Height: | Size: 4.7 MiB |
BIN
img/location_photo/IDC/서관204.png
Normal file
|
After Width: | Height: | Size: 2.9 MiB |
BIN
img/location_photo/IDC/서관205.png
Normal file
|
After Width: | Height: | Size: 3.9 MiB |
BIN
img/location_photo/기술개발센터/서버실/서버실_1.png
Normal file
|
After Width: | Height: | Size: 11 MiB |
BIN
img/location_photo/기술개발센터/서버실/서버실_2.png
Normal file
|
After Width: | Height: | Size: 6.1 MiB |
BIN
img/location_photo/한맥빌딩/MDF실/MDF_1.png
Normal file
|
After Width: | Height: | Size: 9.5 MiB |
BIN
img/location_photo/한맥빌딩/MDF실/MDF_2.png
Normal file
|
After Width: | Height: | Size: 9.8 MiB |
BIN
img/location_photo/한맥빌딩/MDF실/MDF_3.png
Normal file
|
After Width: | Height: | Size: 8.1 MiB |
BIN
img/location_photo/한맥빌딩/MDF실/MDF_4.png
Normal file
|
After Width: | Height: | Size: 5.8 MiB |
146
index.html
@@ -1,61 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<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>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/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>
|
||||
<body>
|
||||
<div class="app-layout">
|
||||
<!-- Single-Line Integrated Header -->
|
||||
<header class="main-header">
|
||||
<div class="header-container" id="nav-container">
|
||||
<div class="brand">
|
||||
<h1>HM <span>IT 자산관리 시스템</span></h1>
|
||||
</div>
|
||||
|
||||
<!-- Navigation (GNB + LNB in same row) -->
|
||||
<nav class="integrated-nav" id="main-nav">
|
||||
<!-- JS will render main items and sub items here side-by-side -->
|
||||
</nav>
|
||||
|
||||
<div class="header-actions">
|
||||
<button id="btn-open-guide-header" class="btn btn-outline" title="프로세스 가이드">
|
||||
<i data-lucide="book-open"></i> 가이드
|
||||
</button>
|
||||
<button id="btn-download-template" class="btn btn-outline" title="통합 양식 다운로드">
|
||||
<i data-lucide="download"></i> 양식
|
||||
</button>
|
||||
<label for="excel-upload" class="btn btn-outline" title="엑셀 파일 업로드">
|
||||
<i data-lucide="upload"></i> 업로드
|
||||
</label>
|
||||
<input type="file" id="excel-upload" accept=".xlsx, .xls" style="display: none;" />
|
||||
<button id="btn-export-excel" class="btn btn-primary" title="일괄 엑셀 저장">
|
||||
<i data-lucide="file-spreadsheet"></i> 엑셀저장
|
||||
</button>
|
||||
<button id="btn-add-asset" class="btn btn-primary hidden">
|
||||
<i data-lucide="plus"></i> 자산추가
|
||||
</button>
|
||||
<head>
|
||||
<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>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>
|
||||
|
||||
<body>
|
||||
<!-- Login Screen -->
|
||||
<div id="login-container" class="login-layout">
|
||||
<div class="login-card">
|
||||
<div class="login-header">
|
||||
<img src="/image 92.png" alt="Logo" class="login-logo" />
|
||||
<h2>ITAM 시스템</h2>
|
||||
<p>자산 관리 포털에 오신 것을 환영합니다</p>
|
||||
</div>
|
||||
<div id="login-selection" class="login-selection">
|
||||
<div class="role-card" data-role="admin">
|
||||
<div class="role-icon">
|
||||
<i data-lucide="settings"></i>
|
||||
</div>
|
||||
<h3>관리자</h3>
|
||||
<p>시스템 설정 및 자산 마스터 관리</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<main class="content-area" id="main-content">
|
||||
<!-- Components inject views here -->
|
||||
</main>
|
||||
<div class="role-card" data-role="user">
|
||||
<div class="role-icon">
|
||||
<i data-lucide="monitor"></i>
|
||||
</div>
|
||||
<h3>실무자</h3>
|
||||
<p>자산 조회 및 현황 확인</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-footer">
|
||||
<p>© 2026 BARON Consultant Co,Ltd. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- All modals are injected dynamically -->
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
<div class="app-layout" id="app-layout" style="display: none;">
|
||||
<!-- Single-Line Integrated Header -->
|
||||
<header class="main-header">
|
||||
<div class="header-container" id="nav-container">
|
||||
<div class="brand">
|
||||
<img src="/image 92.png" alt="Logo" class="main-logo" />
|
||||
<h1>자산관리시스템<span class="sub-title">(Digital Asset Control Hub System)</span></h1>
|
||||
</div>
|
||||
|
||||
<!-- Navigation (GNB + LNB in same row) -->
|
||||
<nav class="integrated-nav" id="main-nav">
|
||||
<!-- JS will render main items and sub items here side-by-side -->
|
||||
</nav>
|
||||
|
||||
<div class="header-actions">
|
||||
<div class="role-switcher" id="role-switcher">
|
||||
<span class="role-label user active">실무자</span>
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="role-toggle-checkbox">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
<span class="role-label admin">관리자</span>
|
||||
</div>
|
||||
<button id="btn-admin-page" class="hidden"></button> <!-- JS 호환용 숨김 -->
|
||||
<button id="btn-open-guide-header" class="btn btn-outline" title="프로세스 가이드">
|
||||
<i data-lucide="book-open"></i> 가이드
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<main class="content-area" id="main-content">
|
||||
<!-- Components inject views here -->
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="main-footer">
|
||||
<div id="secret-cloud-trigger" style="width: 20px; height: 20px; cursor: pointer; opacity: 0.1; background: #000; border-radius: 4px; position: absolute; left: 1rem;"></div>
|
||||
<p>Powered by BARON Consultant Co,Ltd</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- All modals are injected dynamically -->
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
768
map_config.json
Normal file
@@ -0,0 +1,768 @@
|
||||
{
|
||||
"img/location_photo/IDC/서관205.png": [
|
||||
{
|
||||
"x": "50.78",
|
||||
"y": "1.53",
|
||||
"w": "45.83",
|
||||
"h": "6.10"
|
||||
},
|
||||
{
|
||||
"x": "50.67",
|
||||
"y": "10.35",
|
||||
"w": "45.95",
|
||||
"h": "5.99"
|
||||
},
|
||||
{
|
||||
"x": "50.78",
|
||||
"y": "19.06",
|
||||
"w": "45.83",
|
||||
"h": "6.32"
|
||||
},
|
||||
{
|
||||
"x": "50.67",
|
||||
"y": "27.89",
|
||||
"w": "46.06",
|
||||
"h": "6.32"
|
||||
},
|
||||
{
|
||||
"x": "50.78",
|
||||
"y": "36.71",
|
||||
"w": "45.95",
|
||||
"h": "6.21"
|
||||
},
|
||||
{
|
||||
"x": "50.78",
|
||||
"y": "45.64",
|
||||
"w": "45.83",
|
||||
"h": "6.32"
|
||||
},
|
||||
{
|
||||
"x": "50.67",
|
||||
"y": "54.25",
|
||||
"w": "46.06",
|
||||
"h": "6.54"
|
||||
},
|
||||
{
|
||||
"x": "50.90",
|
||||
"y": "63.29",
|
||||
"w": "45.72",
|
||||
"h": "5.99"
|
||||
},
|
||||
{
|
||||
"x": "50.90",
|
||||
"y": "72.00",
|
||||
"w": "45.72",
|
||||
"h": "6.32"
|
||||
},
|
||||
{
|
||||
"x": "50.78",
|
||||
"y": "81.92",
|
||||
"w": "18.40",
|
||||
"h": "15.58"
|
||||
},
|
||||
{
|
||||
"x": "78.67",
|
||||
"y": "82.03",
|
||||
"w": "17.94",
|
||||
"h": "15.25"
|
||||
}
|
||||
],
|
||||
"img/location_photo/IDC/서관202.png": [
|
||||
{
|
||||
"x": "56.35",
|
||||
"y": "64.02",
|
||||
"w": "40.41",
|
||||
"h": "5.89"
|
||||
},
|
||||
{
|
||||
"x": "56.35",
|
||||
"y": "71.57",
|
||||
"w": "40.66",
|
||||
"h": "5.89"
|
||||
},
|
||||
{
|
||||
"x": "56.23",
|
||||
"y": "79.25",
|
||||
"w": "40.53",
|
||||
"h": "5.76"
|
||||
},
|
||||
{
|
||||
"x": "55.98",
|
||||
"y": "86.42",
|
||||
"w": "41.15",
|
||||
"h": "6.27"
|
||||
}
|
||||
],
|
||||
"img/location_photo/IDC/서관203.png": [
|
||||
{
|
||||
"x": "56.07",
|
||||
"y": "2.44",
|
||||
"w": "40.91",
|
||||
"h": "6.40"
|
||||
},
|
||||
{
|
||||
"x": "56.07",
|
||||
"y": "10.12",
|
||||
"w": "40.79",
|
||||
"h": "6.27"
|
||||
},
|
||||
{
|
||||
"x": "55.95",
|
||||
"y": "17.80",
|
||||
"w": "41.04",
|
||||
"h": "6.14"
|
||||
},
|
||||
{
|
||||
"x": "55.95",
|
||||
"y": "63.51",
|
||||
"w": "40.91",
|
||||
"h": "6.14"
|
||||
},
|
||||
{
|
||||
"x": "55.95",
|
||||
"y": "71.19",
|
||||
"w": "41.04",
|
||||
"h": "6.14"
|
||||
},
|
||||
{
|
||||
"x": "56.07",
|
||||
"y": "87.70",
|
||||
"w": "40.91",
|
||||
"h": "6.02"
|
||||
}
|
||||
],
|
||||
"img/location_photo/IDC/서관204.png": [
|
||||
{
|
||||
"x": "48.87",
|
||||
"y": "2.57",
|
||||
"w": "47.40",
|
||||
"h": "6.14"
|
||||
},
|
||||
{
|
||||
"x": "49.01",
|
||||
"y": "10.38",
|
||||
"w": "47.40",
|
||||
"h": "5.89"
|
||||
},
|
||||
{
|
||||
"x": "48.87",
|
||||
"y": "17.93",
|
||||
"w": "47.40",
|
||||
"h": "5.89"
|
||||
},
|
||||
{
|
||||
"x": "48.73",
|
||||
"y": "25.49",
|
||||
"w": "47.69",
|
||||
"h": "6.27"
|
||||
},
|
||||
{
|
||||
"x": "48.87",
|
||||
"y": "33.17",
|
||||
"w": "47.40",
|
||||
"h": "6.02"
|
||||
},
|
||||
{
|
||||
"x": "48.87",
|
||||
"y": "40.59",
|
||||
"w": "47.54",
|
||||
"h": "6.40"
|
||||
},
|
||||
{
|
||||
"x": "48.87",
|
||||
"y": "48.40",
|
||||
"w": "47.54",
|
||||
"h": "6.14"
|
||||
},
|
||||
{
|
||||
"x": "48.73",
|
||||
"y": "55.95",
|
||||
"w": "47.69",
|
||||
"h": "6.14"
|
||||
},
|
||||
{
|
||||
"x": "49.01",
|
||||
"y": "63.63",
|
||||
"w": "47.40",
|
||||
"h": "6.14"
|
||||
},
|
||||
{
|
||||
"x": "48.73",
|
||||
"y": "71.06",
|
||||
"w": "47.54",
|
||||
"h": "6.27"
|
||||
},
|
||||
{
|
||||
"x": "48.87",
|
||||
"y": "78.74",
|
||||
"w": "47.40",
|
||||
"h": "6.27"
|
||||
},
|
||||
{
|
||||
"x": "49.01",
|
||||
"y": "86.68",
|
||||
"w": "18.76",
|
||||
"h": "12.29"
|
||||
}
|
||||
],
|
||||
"img/location_photo/IDC/동관53.png": [
|
||||
{
|
||||
"x": "61.62",
|
||||
"y": "3.08",
|
||||
"w": "35.63",
|
||||
"h": "7.55"
|
||||
},
|
||||
{
|
||||
"x": "61.53",
|
||||
"y": "12.68",
|
||||
"w": "35.80",
|
||||
"h": "7.30"
|
||||
},
|
||||
{
|
||||
"x": "61.70",
|
||||
"y": "21.65",
|
||||
"w": "35.63",
|
||||
"h": "7.68"
|
||||
}
|
||||
],
|
||||
"img/location_photo/IDC/동관54.png": [
|
||||
{
|
||||
"x": "54.71",
|
||||
"y": "2.57",
|
||||
"w": "42.21",
|
||||
"h": "6.27"
|
||||
},
|
||||
{
|
||||
"x": "54.71",
|
||||
"y": "10.38",
|
||||
"w": "42.21",
|
||||
"h": "6.14"
|
||||
},
|
||||
{
|
||||
"x": "54.71",
|
||||
"y": "27.15",
|
||||
"w": "41.97",
|
||||
"h": "6.27"
|
||||
},
|
||||
{
|
||||
"x": "54.71",
|
||||
"y": "43.54",
|
||||
"w": "42.09",
|
||||
"h": "6.02"
|
||||
},
|
||||
{
|
||||
"x": "54.71",
|
||||
"y": "54.93",
|
||||
"w": "42.09",
|
||||
"h": "6.40"
|
||||
},
|
||||
{
|
||||
"x": "54.83",
|
||||
"y": "70.16",
|
||||
"w": "42.09",
|
||||
"h": "6.27"
|
||||
},
|
||||
{
|
||||
"x": "54.71",
|
||||
"y": "79.51",
|
||||
"w": "42.09",
|
||||
"h": "6.14"
|
||||
}
|
||||
],
|
||||
"img/location_photo/기술개발센터/서버실_1.png": [
|
||||
{
|
||||
"x": "69.45",
|
||||
"y": "1.10",
|
||||
"w": "8.58",
|
||||
"h": "11.45"
|
||||
},
|
||||
{
|
||||
"x": "79.21",
|
||||
"y": "1.10",
|
||||
"w": "11.65",
|
||||
"h": "11.45"
|
||||
},
|
||||
{
|
||||
"x": "90.16",
|
||||
"y": "23.23",
|
||||
"w": "8.43",
|
||||
"h": "21.11"
|
||||
},
|
||||
{
|
||||
"x": "52.91",
|
||||
"y": "53.35",
|
||||
"w": "8.66",
|
||||
"h": "21.11"
|
||||
},
|
||||
{
|
||||
"x": "62.36",
|
||||
"y": "53.47",
|
||||
"w": "8.43",
|
||||
"h": "21.11"
|
||||
},
|
||||
{
|
||||
"x": "71.65",
|
||||
"y": "53.47",
|
||||
"w": "8.50",
|
||||
"h": "20.98"
|
||||
},
|
||||
{
|
||||
"x": "80.87",
|
||||
"y": "53.35",
|
||||
"w": "8.35",
|
||||
"h": "21.23"
|
||||
},
|
||||
{
|
||||
"x": "90.08",
|
||||
"y": "53.35",
|
||||
"w": "8.58",
|
||||
"h": "21.11"
|
||||
},
|
||||
{
|
||||
"x": "43.78",
|
||||
"y": "76.38",
|
||||
"w": "8.50",
|
||||
"h": "21.11"
|
||||
},
|
||||
{
|
||||
"x": "53.15",
|
||||
"y": "76.38",
|
||||
"w": "8.43",
|
||||
"h": "21.23"
|
||||
},
|
||||
{
|
||||
"x": "62.44",
|
||||
"y": "76.51",
|
||||
"w": "8.35",
|
||||
"h": "20.98"
|
||||
},
|
||||
{
|
||||
"x": "71.57",
|
||||
"y": "76.25",
|
||||
"w": "8.43",
|
||||
"h": "21.11"
|
||||
},
|
||||
{
|
||||
"x": "81.02",
|
||||
"y": "76.64",
|
||||
"w": "8.27",
|
||||
"h": "20.85"
|
||||
},
|
||||
{
|
||||
"x": "90.24",
|
||||
"y": "76.64",
|
||||
"w": "8.50",
|
||||
"h": "20.98"
|
||||
}
|
||||
],
|
||||
"img/location_photo/기술개발센터/서버실_2.png": [
|
||||
{
|
||||
"x": "49.60",
|
||||
"y": "1.93",
|
||||
"w": "46.96",
|
||||
"h": "6.53"
|
||||
},
|
||||
{
|
||||
"x": "49.34",
|
||||
"y": "11.92",
|
||||
"w": "47.09",
|
||||
"h": "6.66"
|
||||
},
|
||||
{
|
||||
"x": "49.34",
|
||||
"y": "21.39",
|
||||
"w": "47.35",
|
||||
"h": "6.40"
|
||||
},
|
||||
{
|
||||
"x": "49.47",
|
||||
"y": "30.73",
|
||||
"w": "47.22",
|
||||
"h": "6.40"
|
||||
},
|
||||
{
|
||||
"x": "49.34",
|
||||
"y": "39.82",
|
||||
"w": "47.22",
|
||||
"h": "6.53"
|
||||
},
|
||||
{
|
||||
"x": "49.47",
|
||||
"y": "49.68",
|
||||
"w": "47.09",
|
||||
"h": "6.91"
|
||||
},
|
||||
{
|
||||
"x": "49.60",
|
||||
"y": "59.28",
|
||||
"w": "46.82",
|
||||
"h": "6.27"
|
||||
},
|
||||
{
|
||||
"x": "49.34",
|
||||
"y": "68.63",
|
||||
"w": "47.35",
|
||||
"h": "6.40"
|
||||
},
|
||||
{
|
||||
"x": "49.47",
|
||||
"y": "77.84",
|
||||
"w": "46.82",
|
||||
"h": "6.40"
|
||||
},
|
||||
{
|
||||
"x": "49.60",
|
||||
"y": "86.93",
|
||||
"w": "46.82",
|
||||
"h": "6.53"
|
||||
}
|
||||
],
|
||||
"img/location_photo/한맥빌딩/MDF실/MDF_1.png": [
|
||||
{
|
||||
"x": "49.33",
|
||||
"y": "14.99",
|
||||
"w": "7.13",
|
||||
"h": "11.01"
|
||||
},
|
||||
{
|
||||
"x": "59.23",
|
||||
"y": "14.73",
|
||||
"w": "7.13",
|
||||
"h": "11.14"
|
||||
},
|
||||
{
|
||||
"x": "69.22",
|
||||
"y": "14.86",
|
||||
"w": "7.13",
|
||||
"h": "11.14"
|
||||
},
|
||||
{
|
||||
"x": "78.96",
|
||||
"y": "14.99",
|
||||
"w": "7.30",
|
||||
"h": "11.01"
|
||||
},
|
||||
{
|
||||
"x": "89.03",
|
||||
"y": "14.99",
|
||||
"w": "7.05",
|
||||
"h": "11.14"
|
||||
},
|
||||
{
|
||||
"x": "48.57",
|
||||
"y": "34.19",
|
||||
"w": "7.39",
|
||||
"h": "11.14"
|
||||
},
|
||||
{
|
||||
"x": "56.80",
|
||||
"y": "34.06",
|
||||
"w": "7.22",
|
||||
"h": "11.27"
|
||||
},
|
||||
{
|
||||
"x": "64.94",
|
||||
"y": "34.19",
|
||||
"w": "7.30",
|
||||
"h": "11.01"
|
||||
},
|
||||
{
|
||||
"x": "72.83",
|
||||
"y": "34.19",
|
||||
"w": "7.47",
|
||||
"h": "10.88"
|
||||
},
|
||||
{
|
||||
"x": "81.22",
|
||||
"y": "34.06",
|
||||
"w": "7.22",
|
||||
"h": "11.14"
|
||||
},
|
||||
{
|
||||
"x": "89.36",
|
||||
"y": "34.19",
|
||||
"w": "7.13",
|
||||
"h": "11.01"
|
||||
},
|
||||
{
|
||||
"x": "48.66",
|
||||
"y": "53.52",
|
||||
"w": "9.06",
|
||||
"h": "20.99"
|
||||
},
|
||||
{
|
||||
"x": "58.48",
|
||||
"y": "53.27",
|
||||
"w": "9.15",
|
||||
"h": "21.12"
|
||||
},
|
||||
{
|
||||
"x": "68.55",
|
||||
"y": "53.27",
|
||||
"w": "9.06",
|
||||
"h": "21.12"
|
||||
},
|
||||
{
|
||||
"x": "78.54",
|
||||
"y": "53.39",
|
||||
"w": "8.90",
|
||||
"h": "21.25"
|
||||
},
|
||||
{
|
||||
"x": "89.36",
|
||||
"y": "53.27",
|
||||
"w": "7.39",
|
||||
"h": "9.99"
|
||||
},
|
||||
{
|
||||
"x": "89.36",
|
||||
"y": "64.92",
|
||||
"w": "7.39",
|
||||
"h": "9.60"
|
||||
},
|
||||
{
|
||||
"x": "48.57",
|
||||
"y": "77.08",
|
||||
"w": "9.40",
|
||||
"h": "21.38"
|
||||
},
|
||||
{
|
||||
"x": "58.56",
|
||||
"y": "77.20",
|
||||
"w": "9.23",
|
||||
"h": "21.12"
|
||||
},
|
||||
{
|
||||
"x": "68.63",
|
||||
"y": "77.33",
|
||||
"w": "9.06",
|
||||
"h": "21.12"
|
||||
},
|
||||
{
|
||||
"x": "78.71",
|
||||
"y": "77.46",
|
||||
"w": "8.98",
|
||||
"h": "20.99"
|
||||
}
|
||||
],
|
||||
"img/location_photo/한맥빌딩/MDF실/MDF_2.png": [
|
||||
{
|
||||
"x": "56.59",
|
||||
"y": "44.43",
|
||||
"w": "40.35",
|
||||
"h": "6.78"
|
||||
},
|
||||
{
|
||||
"x": "56.71",
|
||||
"y": "54.80",
|
||||
"w": "40.24",
|
||||
"h": "6.53"
|
||||
},
|
||||
{
|
||||
"x": "56.71",
|
||||
"y": "65.94",
|
||||
"w": "40.24",
|
||||
"h": "6.40"
|
||||
}
|
||||
],
|
||||
"img/location_photo/한맥빌딩/MDF실/MDF_3.png": [
|
||||
{
|
||||
"x": "56.71",
|
||||
"y": "13.20",
|
||||
"w": "40.24",
|
||||
"h": "6.78"
|
||||
},
|
||||
{
|
||||
"x": "56.48",
|
||||
"y": "23.57",
|
||||
"w": "40.58",
|
||||
"h": "6.53"
|
||||
},
|
||||
{
|
||||
"x": "56.59",
|
||||
"y": "34.57",
|
||||
"w": "40.58",
|
||||
"h": "6.27"
|
||||
},
|
||||
{
|
||||
"x": "56.59",
|
||||
"y": "44.69",
|
||||
"w": "40.46",
|
||||
"h": "6.66"
|
||||
},
|
||||
{
|
||||
"x": "56.71",
|
||||
"y": "54.80",
|
||||
"w": "40.24",
|
||||
"h": "6.66"
|
||||
},
|
||||
{
|
||||
"x": "56.71",
|
||||
"y": "65.81",
|
||||
"w": "40.24",
|
||||
"h": "6.53"
|
||||
},
|
||||
{
|
||||
"x": "56.59",
|
||||
"y": "76.05",
|
||||
"w": "40.35",
|
||||
"h": "6.53"
|
||||
}
|
||||
],
|
||||
"img/location_photo/한맥빌딩/MDF실/MDF_4.png": [
|
||||
{
|
||||
"x": "52.36",
|
||||
"y": "64.02",
|
||||
"w": "44.38",
|
||||
"h": "6.53"
|
||||
}
|
||||
],
|
||||
"img/location_photo/기술개발센터/서버실/서버실_1.png": [
|
||||
{
|
||||
"x": "69.53",
|
||||
"y": "1.42",
|
||||
"w": "8.58",
|
||||
"h": "11.45"
|
||||
},
|
||||
{
|
||||
"x": "79.21",
|
||||
"y": "1.55",
|
||||
"w": "11.97",
|
||||
"h": "11.32"
|
||||
},
|
||||
{
|
||||
"x": "90.24",
|
||||
"y": "23.30",
|
||||
"w": "8.50",
|
||||
"h": "21.49"
|
||||
},
|
||||
{
|
||||
"x": "53.07",
|
||||
"y": "53.28",
|
||||
"w": "8.74",
|
||||
"h": "21.62"
|
||||
},
|
||||
{
|
||||
"x": "62.28",
|
||||
"y": "53.41",
|
||||
"w": "8.82",
|
||||
"h": "21.49"
|
||||
},
|
||||
{
|
||||
"x": "71.50",
|
||||
"y": "53.28",
|
||||
"w": "8.90",
|
||||
"h": "21.75"
|
||||
},
|
||||
{
|
||||
"x": "80.87",
|
||||
"y": "53.15",
|
||||
"w": "8.66",
|
||||
"h": "21.75"
|
||||
},
|
||||
{
|
||||
"x": "90.08",
|
||||
"y": "53.54",
|
||||
"w": "8.90",
|
||||
"h": "21.49"
|
||||
},
|
||||
{
|
||||
"x": "43.86",
|
||||
"y": "76.32",
|
||||
"w": "8.82",
|
||||
"h": "21.75"
|
||||
},
|
||||
{
|
||||
"x": "53.15",
|
||||
"y": "76.45",
|
||||
"w": "8.66",
|
||||
"h": "21.49"
|
||||
},
|
||||
{
|
||||
"x": "62.52",
|
||||
"y": "76.57",
|
||||
"w": "8.58",
|
||||
"h": "21.62"
|
||||
},
|
||||
{
|
||||
"x": "71.65",
|
||||
"y": "76.45",
|
||||
"w": "8.66",
|
||||
"h": "21.62"
|
||||
},
|
||||
{
|
||||
"x": "80.94",
|
||||
"y": "76.57",
|
||||
"w": "8.74",
|
||||
"h": "21.49"
|
||||
},
|
||||
{
|
||||
"x": "90.24",
|
||||
"y": "76.57",
|
||||
"w": "8.50",
|
||||
"h": "21.36"
|
||||
}
|
||||
],
|
||||
"img/location_photo/기술개발센터/서버실/서버실_2.png": [
|
||||
{
|
||||
"x": "49.47",
|
||||
"y": "1.80",
|
||||
"w": "47.49",
|
||||
"h": "7.04"
|
||||
},
|
||||
{
|
||||
"x": "49.47",
|
||||
"y": "12.04",
|
||||
"w": "47.49",
|
||||
"h": "6.91"
|
||||
},
|
||||
{
|
||||
"x": "49.60",
|
||||
"y": "21.52",
|
||||
"w": "47.35",
|
||||
"h": "6.91"
|
||||
},
|
||||
{
|
||||
"x": "49.47",
|
||||
"y": "30.48",
|
||||
"w": "47.49",
|
||||
"h": "7.04"
|
||||
},
|
||||
{
|
||||
"x": "49.60",
|
||||
"y": "39.82",
|
||||
"w": "47.49",
|
||||
"h": "6.91"
|
||||
},
|
||||
{
|
||||
"x": "49.47",
|
||||
"y": "50.06",
|
||||
"w": "47.62",
|
||||
"h": "6.91"
|
||||
},
|
||||
{
|
||||
"x": "49.74",
|
||||
"y": "59.28",
|
||||
"w": "47.22",
|
||||
"h": "6.91"
|
||||
},
|
||||
{
|
||||
"x": "49.34",
|
||||
"y": "68.37",
|
||||
"w": "47.75",
|
||||
"h": "7.04"
|
||||
},
|
||||
{
|
||||
"x": "49.60",
|
||||
"y": "77.97",
|
||||
"w": "47.22",
|
||||
"h": "6.91"
|
||||
},
|
||||
{
|
||||
"x": "49.60",
|
||||
"y": "86.93",
|
||||
"w": "47.35",
|
||||
"h": "7.17"
|
||||
}
|
||||
]
|
||||
}
|
||||
42
map_editor.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ITAM Map Coordinate Editor v3.0</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
|
||||
</head>
|
||||
<body style="margin: 0; display: flex; height: 100vh; overflow: hidden; font-family: sans-serif;">
|
||||
|
||||
<!-- Left: File Selector -->
|
||||
<div class="file-sidebar" id="file-sidebar">
|
||||
<!-- Rendered by MapEditor.ts -->
|
||||
</div>
|
||||
|
||||
<!-- Center: Main Editor -->
|
||||
<div class="editor-container" id="container">
|
||||
<div class="img-wrapper" id="wrapper">
|
||||
<img src="" id="target-img" alt="Map Image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Control Panel -->
|
||||
<div class="sidebar">
|
||||
<h2>Map Editor <small style="font-size: 0.6em; color: #888;">v3.0</small></h2>
|
||||
<div class="current-path" id="current-path">파일을 선택하세요</div>
|
||||
<p>
|
||||
드래그하여 구역을 정의하세요. 저장 버튼을 누르면 즉시 시스템에 반영됩니다.
|
||||
</p>
|
||||
|
||||
<div class="box-list" id="box-list"></div>
|
||||
|
||||
<div class="actions">
|
||||
<button id="btn-clear-all" class="btn btn-outline" style="height:38px;">전체 삭제</button>
|
||||
<button id="btn-save-server" class="btn btn-primary" style="height:38px;">서버에 즉시 저장</button>
|
||||
<div id="save-status"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module" src="/src/map-editor-main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,77 +0,0 @@
|
||||
import mysql from 'mysql2/promise';
|
||||
import dotenv from 'dotenv';
|
||||
|
||||
dotenv.config();
|
||||
|
||||
const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
|
||||
|
||||
// 영문 -> 한글 필드 매핑 테이블
|
||||
const FIELD_MAPPING = {
|
||||
corp: '법인',
|
||||
asset_code: '자산코드',
|
||||
type: '유형',
|
||||
purpose: '용도',
|
||||
detail_purpose: '상세용도',
|
||||
details: '상세',
|
||||
current_org: '현사용조직',
|
||||
prev_org: '이전사용조직',
|
||||
location: '위치',
|
||||
manager_main: '담당자_정',
|
||||
manager_sub: '담당자_부',
|
||||
ip_address: 'IP주소',
|
||||
remote_tool: '원격접속',
|
||||
server_id: '서버ID',
|
||||
server_pw: '서버PW',
|
||||
model_name: '모델명',
|
||||
os: 'OS',
|
||||
cpu: 'CPU',
|
||||
ram: 'RAM',
|
||||
storage1: 'SSD1',
|
||||
storage2: 'SSD2',
|
||||
status: '상태'
|
||||
};
|
||||
|
||||
async function migrateData() {
|
||||
const connection = await mysql.createConnection({
|
||||
host: DB_HOST,
|
||||
user: DB_USER,
|
||||
password: DB_PASS,
|
||||
database: DB_NAME,
|
||||
port: parseInt(DB_PORT || '3306')
|
||||
});
|
||||
|
||||
console.log('🔄 데이터 필드 영문 -> 한글 마이그레이션 시작...');
|
||||
|
||||
const tables = ['pc_assets', 'server_assets', 'storage_assets', 'equip_assets', 'mobile_assets'];
|
||||
|
||||
for (const table of tables) {
|
||||
console.log(`📦 ${table} 처리 중...`);
|
||||
const [rows] = await connection.query(`SELECT * FROM ${table}`);
|
||||
|
||||
for (const row of rows) {
|
||||
const updatedRow = { ...row };
|
||||
// 영문 키의 값을 한글 키로 복사
|
||||
Object.entries(FIELD_MAPPING).forEach(([eng, kor]) => {
|
||||
if (row[eng] !== undefined && row[eng] !== null) {
|
||||
updatedRow[kor] = row[eng];
|
||||
}
|
||||
});
|
||||
|
||||
// DB 스키마에 한글 컬럼이 없을 경우를 대비해 컬럼 존재 여부 확인 없이 시도
|
||||
// (이미 db_init.js가 한글 컬럼을 생성했을 가능성 확인 필요)
|
||||
try {
|
||||
await connection.query(`UPDATE ${table} SET ? WHERE id = ?`, [updatedRow, row.id]);
|
||||
} catch (err) {
|
||||
// 컬럼이 없어서 실패하는 경우 무시 (나중에 수동 추가)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
console.log('✨ 마이그레이션 완료.');
|
||||
await connection.end();
|
||||
}
|
||||
|
||||
migrateData().catch(err => {
|
||||
console.error('❌ 마이그레이션 실패:', err);
|
||||
process.exit(1);
|
||||
});
|
||||
1
package-lock.json
generated
@@ -11,6 +11,7 @@
|
||||
"cors": "^2.8.6",
|
||||
"dotenv": "^17.4.2",
|
||||
"express": "^5.2.1",
|
||||
"iconv-lite": "^0.7.2",
|
||||
"lucide": "^0.364.0",
|
||||
"mysql2": "^3.22.1",
|
||||
"xlsx": "^0.18.5"
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
"cors": "^2.8.6",
|
||||
"dotenv": "^17.4.2",
|
||||
"express": "^5.2.1",
|
||||
"iconv-lite": "^0.7.2",
|
||||
"lucide": "^0.364.0",
|
||||
"mysql2": "^3.22.1",
|
||||
"xlsx": "^0.18.5"
|
||||
|
||||
134
pc_agent.py
Normal file
@@ -0,0 +1,134 @@
|
||||
import wmi
|
||||
import requests
|
||||
import json
|
||||
import socket
|
||||
import platform
|
||||
import sys
|
||||
import time
|
||||
|
||||
def collect_specs():
|
||||
try:
|
||||
c = wmi.WMI()
|
||||
computer = c.Win32_ComputerSystem()[0]
|
||||
os_info = c.Win32_OperatingSystem()[0]
|
||||
proc = c.Win32_Processor()[0]
|
||||
board = c.Win32_BaseBoard()[0]
|
||||
|
||||
# 1. 상세 GPU 정보 수집 (모든 그래픽 카드)
|
||||
gpu_list = []
|
||||
for g in c.Win32_VideoController():
|
||||
gpu_list.append(g.Name)
|
||||
gpu_info = ", ".join(gpu_list) if gpu_list else "N/A"
|
||||
|
||||
# 2. 모든 저장장치 정보 수집 및 SSD/HDD 구분
|
||||
storage_list = []
|
||||
|
||||
# Windows 8 이상에서 작동하는 상세 저장소 정보 수집 시도
|
||||
physical_disks = {}
|
||||
try:
|
||||
storage_c = wmi.WMI(namespace="Root\\Microsoft\\Windows\\Storage")
|
||||
for d in storage_c.MSFT_PhysicalDisk():
|
||||
# MediaType: 3(HDD), 4(SSD), 0(Unspecified)
|
||||
physical_disks[d.DeviceId] = d.MediaType
|
||||
except:
|
||||
pass
|
||||
|
||||
for d in c.Win32_DiskDrive():
|
||||
size_gb = round(float(d.Size) / (1024**3)) if d.Size else 0
|
||||
|
||||
# 미디어 타입 판단
|
||||
media_type = physical_disks.get(str(d.Index), 0)
|
||||
prefix = ""
|
||||
if media_type == 4:
|
||||
prefix = "[SSD] "
|
||||
elif media_type == 3:
|
||||
prefix = "[HDD] "
|
||||
else:
|
||||
# 힌트가 없을 경우 모델명으로 추측
|
||||
cap = d.Caption.upper()
|
||||
if "SSD" in cap or "NVME" in cap or "FLASH" in cap:
|
||||
prefix = "[SSD] "
|
||||
else:
|
||||
prefix = "[HDD] "
|
||||
|
||||
storage_list.append(f"{prefix}{d.Caption} ({size_gb}GB)")
|
||||
|
||||
# DB 필드(SSD1, SSD2, SSD3)에 나눠 담기
|
||||
storage1 = storage_list[0] if len(storage_list) > 0 else "N/A"
|
||||
storage2 = storage_list[1] if len(storage_list) > 1 else ""
|
||||
storage3 = storage_list[2] if len(storage_list) > 2 else ""
|
||||
|
||||
# 실시간 데이터 추출
|
||||
specs = {
|
||||
"메인보드": f"{board.Manufacturer} {board.Product}".strip(),
|
||||
"CPU": proc.Name.strip(),
|
||||
"RAM": f"{round(float(computer.TotalPhysicalMemory) / (1024**3))}GB",
|
||||
"OS": os_info.Caption,
|
||||
"GPU": gpu_info,
|
||||
"SSD1": storage1,
|
||||
"SSD2": storage2,
|
||||
"SSD3": storage3,
|
||||
"비고": "실시간 에이전트(EXE) 자동 수집"
|
||||
}
|
||||
return specs
|
||||
except Exception as e:
|
||||
print(f"데이터 수집 중 오류 발생: {e}")
|
||||
return None
|
||||
|
||||
def send_data(specs, server_url, asset_code):
|
||||
try:
|
||||
# 전송 데이터에 자산코드 추가 (식별용)
|
||||
specs["자산코드"] = asset_code
|
||||
print(f"\n📡 서버로 전송 중... ({server_url})")
|
||||
response = requests.post(server_url, json=specs, timeout=10)
|
||||
if response.status_code == 200:
|
||||
print("✅ 전송 성공! ITAM 시스템에서 확인하세요.")
|
||||
else:
|
||||
print(f"❌ 전송 실패: 서버 응답 코드 {response.status_code}")
|
||||
except Exception as e:
|
||||
print(f"❌ 서버 연결 오류: {e}")
|
||||
print("서버가 켜져 있는지, URL이 맞는지 확인해주세요.")
|
||||
|
||||
if __name__ == "__main__":
|
||||
print("========================================")
|
||||
print(" ITAM PC 실시간 사양 수집 에이전트 (v1.1)")
|
||||
print("========================================\n")
|
||||
|
||||
# 1. 정보 수집
|
||||
print("🔍 하드웨어 정보를 읽어오는 중...")
|
||||
data = collect_specs()
|
||||
|
||||
if data:
|
||||
print("\n[수집된 실제 사양]")
|
||||
display_map = {
|
||||
"메인보드": "메인보드",
|
||||
"CPU": "CPU",
|
||||
"RAM": "RAM",
|
||||
"OS": "OS",
|
||||
"GPU": "GPU",
|
||||
"SSD1": "Storage 1",
|
||||
"SSD2": "Storage 2",
|
||||
"SSD3": "Storage 3",
|
||||
"비고": "비고"
|
||||
}
|
||||
for key, value in data.items():
|
||||
if value: # 값이 있는 경우만 표시
|
||||
label = display_map.get(key, key)
|
||||
print(f" - {label}: {value}")
|
||||
|
||||
print("\n" + "="*40)
|
||||
asset_code = input("등록할 자산번호를 입력하세요 (예: PC-001): ").strip()
|
||||
if not asset_code:
|
||||
print("❌ 자산번호 없이는 전송할 수 없습니다.")
|
||||
else:
|
||||
server_ip = input("서버 IP를 입력하세요 (기본값 localhost): ").strip()
|
||||
if not server_ip: server_ip = "localhost"
|
||||
|
||||
target_url = f"http://{server_ip}:3000/api/agent/collect"
|
||||
|
||||
confirm = input("\n위 정보를 서버로 전송할까요? (y/n): ")
|
||||
if confirm.lower() == 'y':
|
||||
send_data(data, target_url, asset_code)
|
||||
|
||||
print("\n5초 후 프로그램이 종료됩니다...")
|
||||
time.sleep(5)
|
||||
38
pc_agent.spec
Normal file
@@ -0,0 +1,38 @@
|
||||
# -*- mode: python ; coding: utf-8 -*-
|
||||
|
||||
|
||||
a = Analysis(
|
||||
['pc_agent.py'],
|
||||
pathex=[],
|
||||
binaries=[],
|
||||
datas=[],
|
||||
hiddenimports=[],
|
||||
hookspath=[],
|
||||
hooksconfig={},
|
||||
runtime_hooks=[],
|
||||
excludes=[],
|
||||
noarchive=False,
|
||||
optimize=0,
|
||||
)
|
||||
pyz = PYZ(a.pure)
|
||||
|
||||
exe = EXE(
|
||||
pyz,
|
||||
a.scripts,
|
||||
a.binaries,
|
||||
a.datas,
|
||||
[],
|
||||
name='pc_agent',
|
||||
debug=False,
|
||||
bootloader_ignore_signals=False,
|
||||
strip=False,
|
||||
upx=True,
|
||||
upx_exclude=[],
|
||||
runtime_tmpdir=None,
|
||||
console=True,
|
||||
disable_windowed_traceback=False,
|
||||
argv_emulation=False,
|
||||
target_arch=None,
|
||||
codesign_identity=None,
|
||||
entitlements_file=None,
|
||||
)
|
||||
@@ -1,91 +0,0 @@
|
||||
import mysql from 'mysql2/promise';
|
||||
import dotenv from 'dotenv';
|
||||
import fs from 'fs';
|
||||
|
||||
dotenv.config();
|
||||
|
||||
const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
|
||||
|
||||
async function restoreDB() {
|
||||
const connection = await mysql.createConnection({
|
||||
host: DB_HOST,
|
||||
user: DB_USER,
|
||||
password: DB_PASS,
|
||||
database: DB_NAME,
|
||||
port: parseInt(DB_PORT || '3306')
|
||||
});
|
||||
|
||||
console.log('📖 백업 파일 읽는 중...');
|
||||
const rawData = fs.readFileSync('backup_atam_data.json', 'utf8');
|
||||
const data = JSON.parse(rawData);
|
||||
|
||||
const tables = {
|
||||
pc_assets: data.pc_assets || [],
|
||||
server_assets: data.server_assets || [],
|
||||
storage_assets: data.storage_assets || [],
|
||||
equip_assets: data.equip_assets || [],
|
||||
mobile_assets: data.mobile_assets || [],
|
||||
sw_sub_assets: data.sw_sub_assets || [],
|
||||
sw_perm_assets: data.sw_perm_assets || [],
|
||||
cloud_assets: data.cloud_assets || [],
|
||||
sw_users: data.sw_users || [],
|
||||
asset_logs: data.logs || []
|
||||
};
|
||||
|
||||
console.log('🚀 데이터 복구 시작...');
|
||||
|
||||
for (const [tableName, rows] of Object.entries(tables)) {
|
||||
if (rows.length === 0) {
|
||||
console.log(`⏩ ${tableName}: 데이터 없음, 건너뜀`);
|
||||
continue;
|
||||
}
|
||||
|
||||
console.log(`📦 ${tableName} 복구 중 (${rows.length}개)...`);
|
||||
|
||||
// 테이블 컬럼 정보 조회
|
||||
const [columns] = await connection.query(`SHOW COLUMNS FROM ${tableName}`);
|
||||
const validColumns = columns.map(c => c.Field);
|
||||
|
||||
for (const row of rows) {
|
||||
const filteredRow = {};
|
||||
Object.keys(row).forEach(key => {
|
||||
let dbKey = key;
|
||||
|
||||
// 필드명 매핑 보정 (백업 데이터 -> DB 스키마)
|
||||
if (key === 'manager') dbKey = 'manager_main';
|
||||
if (key === 'asset_name' && (tableName === 'mobile_assets' || tableName === 'equip_assets')) dbKey = 'model_name';
|
||||
if (key === 'mac_address' && tableName === 'pc_assets') dbKey = 'remarks'; // 스키마에 없는 경우 비고로
|
||||
|
||||
// created_at 등 날짜 포맷 보정
|
||||
if (validColumns.includes(dbKey)) {
|
||||
let value = row[key];
|
||||
if (dbKey === 'created_at' && value) {
|
||||
// '2026-04-17T08:52:11.000Z' -> '2026-04-17 08:52:11'
|
||||
value = value.replace('T', ' ').replace(/\..*$/, '');
|
||||
}
|
||||
filteredRow[dbKey] = value;
|
||||
}
|
||||
});
|
||||
|
||||
// 필수값 ID 확인
|
||||
if (!filteredRow.id) {
|
||||
filteredRow.id = Math.random().toString(36).substr(2, 9);
|
||||
}
|
||||
|
||||
try {
|
||||
await connection.query(`INSERT INTO ${tableName} SET ?`, filteredRow);
|
||||
} catch (err) {
|
||||
console.error(`❌ [${tableName}] ID ${filteredRow.id} 삽입 실패: ${err.message}`);
|
||||
}
|
||||
}
|
||||
console.log(`✅ ${tableName} 완료`);
|
||||
}
|
||||
|
||||
console.log('✨ 모든 데이터 복구가 완료되었습니다.');
|
||||
await connection.end();
|
||||
}
|
||||
|
||||
restoreDB().catch(err => {
|
||||
console.error('❌ 복구 실패:', err);
|
||||
process.exit(1);
|
||||
});
|
||||
@@ -1,63 +0,0 @@
|
||||
import mysql from 'mysql2/promise';
|
||||
import dotenv from 'dotenv';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
|
||||
dotenv.config();
|
||||
|
||||
const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
|
||||
|
||||
async function restoreFinal() {
|
||||
const connection = await mysql.createConnection({
|
||||
host: DB_HOST,
|
||||
user: DB_USER,
|
||||
password: DB_PASS,
|
||||
database: DB_NAME,
|
||||
port: parseInt(DB_PORT || '3306')
|
||||
});
|
||||
|
||||
console.log('📖 realServerData.ts 읽는 중...');
|
||||
const filePath = path.join(process.cwd(), 'src/core/realServerData.ts');
|
||||
const fileContent = fs.readFileSync(filePath, 'utf8');
|
||||
|
||||
const jsonMatch = fileContent.match(/\[\s*\{[\s\S]*\}\s*\]/);
|
||||
const realData = JSON.parse(jsonMatch[0]);
|
||||
|
||||
console.log(`🚀 ${realData.length}개의 실제 데이터 복구 시작 (한글 필드 기준)...`);
|
||||
|
||||
for (const item of realData) {
|
||||
const type = item.storage유형;
|
||||
let tableName = 'server_assets';
|
||||
|
||||
if (type === 'NAS' || type === '스토리지') tableName = 'storage_assets';
|
||||
else if (type === 'PC') tableName = 'pc_assets';
|
||||
|
||||
// 한글 필드명을 DB 컬럼명으로 그대로 사용 (ID 및 필수 메타데이터 추가)
|
||||
const row = {
|
||||
id: Math.random().toString(36).substr(2, 9),
|
||||
...item,
|
||||
// mapping corrections for DB schema
|
||||
유형: type,
|
||||
용도: item.용도 || '',
|
||||
상세: item.상세 || '',
|
||||
위치: item.위치 || ''
|
||||
};
|
||||
|
||||
// delete unnecessary key
|
||||
delete row.storage유형;
|
||||
|
||||
try {
|
||||
await connection.query(`INSERT INTO ${tableName} SET ?`, row);
|
||||
} catch (err) {
|
||||
// console.error(`❌ 삽입 실패:`, err.message);
|
||||
}
|
||||
}
|
||||
|
||||
console.log('✨ 모든 디자인 및 데이터 복구가 완료되었습니다.');
|
||||
await connection.end();
|
||||
}
|
||||
|
||||
restoreFinal().catch(err => {
|
||||
console.error('❌ 복구 실패:', err);
|
||||
process.exit(1);
|
||||
});
|
||||
@@ -1,83 +0,0 @@
|
||||
import mysql from 'mysql2/promise';
|
||||
import dotenv from 'dotenv';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
|
||||
dotenv.config();
|
||||
|
||||
const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
|
||||
|
||||
async function restoreRealData() {
|
||||
const connection = await mysql.createConnection({
|
||||
host: DB_HOST,
|
||||
user: DB_USER,
|
||||
password: DB_PASS,
|
||||
database: DB_NAME,
|
||||
port: parseInt(DB_PORT || '3306')
|
||||
});
|
||||
|
||||
console.log('📖 realServerData.ts 읽는 중...');
|
||||
const filePath = path.join(process.cwd(), 'src/core/realServerData.ts');
|
||||
const fileContent = fs.readFileSync(filePath, 'utf8');
|
||||
|
||||
// TypeScript 파일에서 JSON 배열 부분만 추출
|
||||
const jsonMatch = fileContent.match(/\[\s*\{[\s\S]*\}\s*\]/);
|
||||
if (!jsonMatch) {
|
||||
throw new Error('데이터 형식을 찾을 수 없습니다.');
|
||||
}
|
||||
const realData = JSON.parse(jsonMatch[0]);
|
||||
|
||||
console.log(`🚀 ${realData.length}개의 실제 데이터 복구 시작...`);
|
||||
|
||||
for (const item of realData) {
|
||||
const type = item.storage유형;
|
||||
let tableName = 'server_assets';
|
||||
|
||||
// 유형에 따른 테이블 분기
|
||||
if (type === 'NAS' || type === '스토리지') {
|
||||
tableName = 'storage_assets';
|
||||
} else if (type === 'PC' && item.용도.includes('서버')) {
|
||||
tableName = 'server_assets'; // 서버 역할을 하는 PC
|
||||
} else if (type === 'PC') {
|
||||
tableName = 'pc_assets';
|
||||
}
|
||||
|
||||
// DB 스키마 매핑
|
||||
const filteredRow = {
|
||||
id: Math.random().toString(36).substr(2, 9),
|
||||
corp: item.법인 || '',
|
||||
asset_code: item.자산코드 || '',
|
||||
type: type === 'NAS' ? '스토리지' : (type === 'PC' ? '서버(PC)' : type),
|
||||
purpose: item.용도 || '',
|
||||
details: item.상세 || '',
|
||||
location: item.위치 || '',
|
||||
manager_main: item.담당자_정 || '',
|
||||
manager_sub: item.담당자_부 || '',
|
||||
ip_address: item.IP주소 || '',
|
||||
remote_tool: item.원격접속 || '',
|
||||
server_id: item.서버ID || '',
|
||||
server_pw: item.서버PW || '',
|
||||
model_name: item.모델명 || '',
|
||||
os: item.OS || '',
|
||||
cpu: item.CPU || '',
|
||||
ram: item.RAM || '',
|
||||
storage1: item.SSD1 || '',
|
||||
storage2: item.SSD2 || '',
|
||||
remarks: item.IP2 ? `보조IP: ${item.IP2}` : ''
|
||||
};
|
||||
|
||||
try {
|
||||
await connection.query(`INSERT INTO ${tableName} SET ?`, filteredRow);
|
||||
} catch (err) {
|
||||
console.error(`❌ [${tableName}] 삽입 실패 (${item.자산코드}):`, err.message);
|
||||
}
|
||||
}
|
||||
|
||||
console.log('✨ 실제 운영 데이터 복구가 완료되었습니다.');
|
||||
await connection.end();
|
||||
}
|
||||
|
||||
restoreRealData().catch(err => {
|
||||
console.error('❌ 복구 실패:', err);
|
||||
process.exit(1);
|
||||
});
|
||||
519
server.js
@@ -2,14 +2,19 @@ import express from 'express';
|
||||
import mysql from 'mysql2/promise';
|
||||
import cors from 'cors';
|
||||
import dotenv from 'dotenv';
|
||||
import fs from 'fs';
|
||||
|
||||
dotenv.config();
|
||||
|
||||
const app = express();
|
||||
const PORT = process.env.PORT || 3000;
|
||||
|
||||
app.use(cors());
|
||||
app.use(express.json({ limit: '50mb' }));
|
||||
app.use(express.json({ limit: '100mb' }));
|
||||
|
||||
// Request Logger
|
||||
app.use((req, res, next) => {
|
||||
console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`);
|
||||
next();
|
||||
});
|
||||
|
||||
const pool = mysql.createPool({
|
||||
host: process.env.DB_HOST,
|
||||
@@ -17,371 +22,165 @@ const pool = mysql.createPool({
|
||||
password: process.env.DB_PASS,
|
||||
database: process.env.DB_NAME,
|
||||
port: parseInt(process.env.DB_PORT || '3306'),
|
||||
waitForConnections: true,
|
||||
connectionLimit: 10,
|
||||
queueLimit: 0
|
||||
charset: 'utf8mb4'
|
||||
});
|
||||
|
||||
// 테이블 존재 여부 확인 및 자동 생성
|
||||
async function ensureTables() {
|
||||
const connection = await pool.getConnection();
|
||||
try {
|
||||
await connection.query(`
|
||||
CREATE TABLE IF NOT EXISTS 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 IF NOT EXISTS asset_logs (
|
||||
id VARCHAR(50) PRIMARY KEY,
|
||||
asset_id VARCHAR(50),
|
||||
log_date VARCHAR(50),
|
||||
log_user VARCHAR(100),
|
||||
details TEXT,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
||||
`);
|
||||
console.log('✅ Cloud & Logs tables ensured.');
|
||||
} finally {
|
||||
connection.release();
|
||||
}
|
||||
}
|
||||
|
||||
// 공통 배치 저장 로직
|
||||
async function batchSave(tableName, assets, getQuery) {
|
||||
const connection = await pool.getConnection();
|
||||
try {
|
||||
await connection.beginTransaction();
|
||||
await connection.query(`DELETE FROM ${tableName}`);
|
||||
if (assets.length > 0) {
|
||||
const { sql, values } = getQuery(assets);
|
||||
await connection.query(sql, [values]);
|
||||
}
|
||||
await connection.commit();
|
||||
return { success: true, count: assets.length };
|
||||
} catch (err) {
|
||||
await connection.rollback();
|
||||
throw err;
|
||||
} finally {
|
||||
connection.release();
|
||||
}
|
||||
}
|
||||
|
||||
// 하드웨어 쿼리 헬퍼
|
||||
const hardwareInsertSQL = (table) => `
|
||||
INSERT INTO ${table} (
|
||||
id, corp, asset_code, purchase_date, type, detail_purpose, purpose, details,
|
||||
current_org, prev_org, location, manager_main, manager_sub, ip_address,
|
||||
remote_tool, server_id, server_pw, model_name, os, cpu, ram, gpu,
|
||||
storage1, storage2, storage3, monitoring, price, remarks,
|
||||
storage_location, status
|
||||
) VALUES ?
|
||||
`;
|
||||
|
||||
const getHardwareValues = (a) => [
|
||||
a.id, a.법인||'', a.자산코드||'', a.구매연월||'', a.type||'', a.상세용도||'', a.용도||'', a.상세||'',
|
||||
a.현사용조직||'', a.이전사용조직||'', a.위치||'', a.담당자_정||'', a.담당자_부||'', a.IP주소||'',
|
||||
a.원격접속||'', a.서버ID||'', a.서버PW||'', a.모델명||'', a.OS||'', a.CPU||'', a.RAM||'', a.GPU||'',
|
||||
a.SSD1||'', a.SSD2||'', a.HDD1||'', a.모니터링||'', a.금액||'', a.비고||'',
|
||||
a.보관위치||'', a.현재상태||''
|
||||
];
|
||||
|
||||
const mapHardware = (r, defaultType) => {
|
||||
const type = r.type || defaultType;
|
||||
return {
|
||||
id: r.id,
|
||||
법인: r.corp,
|
||||
자산코드: r.asset_code,
|
||||
구매연월: r.purchase_date,
|
||||
type: type,
|
||||
상세용도: (type !== '개인PC' && !r.detail_purpose) ? type : r.detail_purpose,
|
||||
용도: r.purpose,
|
||||
상세: r.details,
|
||||
현사용조직: r.current_org,
|
||||
이전사용조직: r.prev_org,
|
||||
위치: r.location,
|
||||
담당자_정: r.manager_main,
|
||||
담당자_부: r.manager_sub,
|
||||
IP주소: r.ip_address,
|
||||
원격접속: r.remote_tool,
|
||||
서버ID: r.server_id,
|
||||
서버PW: r.server_pw,
|
||||
모델명: r.model_name,
|
||||
OS: r.os,
|
||||
CPU: r.cpu,
|
||||
RAM: r.ram,
|
||||
GPU: r.gpu,
|
||||
SSD1: r.storage1,
|
||||
SSD2: r.storage2,
|
||||
HDD1: r.storage3,
|
||||
모니터링: r.monitoring,
|
||||
금액: r.price,
|
||||
비고: r.remarks,
|
||||
보관위치: r.storage_location,
|
||||
현재상태: r.status
|
||||
};
|
||||
const handleError = (res, err, context, isGet = false) => {
|
||||
console.error(`❌ [${context}] Error:`, err.message);
|
||||
if (isGet) res.json([]);
|
||||
else res.status(500).json({ error: err.message });
|
||||
};
|
||||
|
||||
// --- API 라우트 정의 ---
|
||||
// --- API Implementation ---
|
||||
|
||||
// PC API
|
||||
app.get('/api/pc', async (req, res) => {
|
||||
/**
|
||||
* Generic Fetcher for Asset Tables
|
||||
*/
|
||||
const fetchAssets = async (tableName, res, context) => {
|
||||
try {
|
||||
const [rows] = await pool.query('SELECT * FROM pc_assets');
|
||||
console.log('🔍 DB Raw Rows (PC):', rows.length, 'items found.');
|
||||
if (rows.length > 0) console.log('🔍 First row sample:', rows[0]);
|
||||
res.json(rows.map(r => mapHardware(r, '개인PC')));
|
||||
} catch (err) {
|
||||
console.error('❌ DB Query Error (PC):', err.message);
|
||||
res.status(500).json({ error: err.message });
|
||||
}
|
||||
});
|
||||
|
||||
app.post('/api/pc/batch', async (req, res) => {
|
||||
try {
|
||||
const result = await batchSave('pc_assets', req.body, (assets) => ({
|
||||
sql: hardwareInsertSQL('pc_assets'),
|
||||
values: assets.map(getHardwareValues)
|
||||
}));
|
||||
res.json(result);
|
||||
} catch (err) { res.status(500).json({ error: err.message }); }
|
||||
});
|
||||
|
||||
// 서버 API
|
||||
app.get('/api/server', async (req, res) => {
|
||||
try {
|
||||
const [rows] = await pool.query('SELECT * FROM server_assets');
|
||||
res.json(rows.map(r => mapHardware(r, '서버')));
|
||||
} catch (err) { res.status(500).json({ error: err.message }); }
|
||||
});
|
||||
|
||||
app.post('/api/server/batch', async (req, res) => {
|
||||
try {
|
||||
const result = await batchSave('server_assets', req.body, (assets) => ({
|
||||
sql: hardwareInsertSQL('server_assets'),
|
||||
values: assets.map(getHardwareValues)
|
||||
}));
|
||||
res.json(result);
|
||||
} catch (err) { res.status(500).json({ error: err.message }); }
|
||||
});
|
||||
|
||||
// 스토리지 API
|
||||
app.get('/api/storage', async (req, res) => {
|
||||
try {
|
||||
const [rows] = await pool.query('SELECT * FROM storage_assets');
|
||||
res.json(rows.map(r => mapHardware(r, '스토리지')));
|
||||
} catch (err) { res.status(500).json({ error: err.message }); }
|
||||
});
|
||||
|
||||
app.post('/api/storage/batch', async (req, res) => {
|
||||
try {
|
||||
const result = await batchSave('storage_assets', req.body, (assets) => ({
|
||||
sql: hardwareInsertSQL('storage_assets'),
|
||||
values: assets.map(getHardwareValues)
|
||||
}));
|
||||
res.json(result);
|
||||
} catch (err) { res.status(500).json({ error: err.message }); }
|
||||
});
|
||||
|
||||
// 전산비품 API
|
||||
app.get('/api/equip', async (req, res) => {
|
||||
try {
|
||||
const [rows] = await pool.query('SELECT * FROM equip_assets');
|
||||
res.json(rows.map(r => mapHardware(r, '전산비품')));
|
||||
} catch (err) { res.status(500).json({ error: err.message }); }
|
||||
});
|
||||
|
||||
app.post('/api/equip/batch', async (req, res) => {
|
||||
try {
|
||||
const result = await batchSave('equip_assets', req.body, (assets) => ({
|
||||
sql: hardwareInsertSQL('equip_assets'),
|
||||
values: assets.map(getHardwareValues)
|
||||
}));
|
||||
res.json(result);
|
||||
} catch (err) { res.status(500).json({ error: err.message }); }
|
||||
});
|
||||
|
||||
// 모바일 API
|
||||
app.get('/api/mobile', async (req, res) => {
|
||||
try {
|
||||
const [rows] = await pool.query('SELECT * FROM mobile_assets');
|
||||
res.json(rows.map(r => mapHardware(r, '모바일기기')));
|
||||
} catch (err) { res.status(500).json({ error: err.message }); }
|
||||
});
|
||||
|
||||
app.post('/api/mobile/batch', async (req, res) => {
|
||||
try {
|
||||
const result = await batchSave('mobile_assets', req.body, (assets) => ({
|
||||
sql: hardwareInsertSQL('mobile_assets'),
|
||||
values: assets.map(getHardwareValues)
|
||||
}));
|
||||
res.json(result);
|
||||
} catch (err) { res.status(500).json({ error: err.message }); }
|
||||
});
|
||||
|
||||
// 구독 SW API
|
||||
app.get('/api/sw/sub', async (req, res) => {
|
||||
try {
|
||||
const [rows] = await pool.query('SELECT * FROM sw_sub_assets');
|
||||
res.json(rows.map(r => ({
|
||||
id: r.id, type: '구독SW', 법인: r.corp, 자산번호: r.asset_code, 제품명: r.product_name,
|
||||
라이선스유형: r.license_type, 수량: r.quantity, 금액: r.price, 구매일: r.purchase_date,
|
||||
만료일: r.expiry_date, 납품업체: r.vendor, 비고: r.remarks
|
||||
})));
|
||||
} catch (err) { res.status(500).json({ error: err.message }); }
|
||||
});
|
||||
|
||||
app.post('/api/sw/sub/batch', async (req, res) => {
|
||||
try {
|
||||
const result = await batchSave('sw_sub_assets', req.body, (assets) => ({
|
||||
sql: `INSERT INTO sw_sub_assets (id, corp, asset_code, product_name, license_type, quantity, price, purchase_date, expiry_date, vendor, remarks) VALUES ?`,
|
||||
values: assets.map(a => [a.id, a.법인||'', a.자산번호||'', a.제품명||'', a.라이선스유형||'', a.수량||0, a.금액||'', a.구매일||'', a.만료일||'', a.납품업체||'', a.비고||''])
|
||||
}));
|
||||
res.json(result);
|
||||
} catch (err) { res.status(500).json({ error: err.message }); }
|
||||
});
|
||||
|
||||
// 영구 SW API
|
||||
app.get('/api/sw/perm', async (req, res) => {
|
||||
try {
|
||||
const [rows] = await pool.query('SELECT * FROM sw_perm_assets');
|
||||
res.json(rows.map(r => ({
|
||||
id: r.id, type: '영구SW', 법인: r.corp, 자산번호: r.asset_code, 제품명: r.product_name,
|
||||
라이선스키: r.license_key, 수량: r.quantity, 금액: r.price, 구매일: r.purchase_date,
|
||||
납품업체: r.vendor, 비고: r.remarks
|
||||
})));
|
||||
} catch (err) { res.status(500).json({ error: err.message }); }
|
||||
});
|
||||
|
||||
app.post('/api/sw/perm/batch', async (req, res) => {
|
||||
try {
|
||||
const result = await batchSave('sw_perm_assets', req.body, (assets) => ({
|
||||
sql: `INSERT INTO sw_perm_assets (id, corp, asset_code, product_name, license_key, quantity, price, purchase_date, vendor, remarks) VALUES ?`,
|
||||
values: assets.map(a => [a.id, a.법인||'', a.자산번호||'', a.제품명||'', a.라이선스키||'', a.수량||0, a.금액||'', a.구매일||'', a.납품업체||'', a.비고||''])
|
||||
}));
|
||||
res.json(result);
|
||||
} catch (err) { res.status(500).json({ error: err.message }); }
|
||||
});
|
||||
|
||||
// 클라우드 API
|
||||
app.get('/api/cloud', async (req, res) => {
|
||||
try {
|
||||
const [rows] = await pool.query('SELECT * FROM cloud_assets');
|
||||
res.json(rows.map(r => ({
|
||||
id: r.id, type: '클라우드', 플랫폼명: r.platform_name, 법인: r.corp, 부서: r.dept,
|
||||
제품명: r.product_name, 계정명: r.account_name, 결제수단: r.pay_method,
|
||||
결제일: r.pay_day, 연결카드번호: r.card_num, 당월청구액: r.monthly_fee, 비고: r.remarks
|
||||
})));
|
||||
} catch (err) { res.status(500).json({ error: err.message }); }
|
||||
});
|
||||
|
||||
app.post('/api/cloud/batch', async (req, res) => {
|
||||
try {
|
||||
const result = await batchSave('cloud_assets', req.body, (assets) => ({
|
||||
sql: `INSERT INTO cloud_assets (id, platform_name, corp, dept, product_name, account_name, pay_method, pay_day, card_num, monthly_fee, remarks) VALUES ?`,
|
||||
values: assets.map(a => [a.id, a.플랫폼명||'', a.법인||'', a.부서||'', a.제품명||'', a.계정명||'', a.결제수단||'', a.결제일||'', a.연결카드번호||'', a.당월청구액||'', a.비고||''])
|
||||
}));
|
||||
res.json(result);
|
||||
} catch (err) { res.status(500).json({ error: err.message }); }
|
||||
});
|
||||
|
||||
// 로그 API
|
||||
app.get('/api/logs', async (req, res) => {
|
||||
try {
|
||||
const [rows] = await pool.query('SELECT * FROM asset_logs ORDER BY log_date DESC');
|
||||
res.json(rows.map(r => ({
|
||||
id: r.id, assetId: r.asset_id, date: r.log_date, user: r.log_user, details: r.details
|
||||
})));
|
||||
} catch (err) { res.status(500).json({ error: err.message }); }
|
||||
});
|
||||
|
||||
app.post('/api/logs/batch', async (req, res) => {
|
||||
try {
|
||||
const result = await batchSave('asset_logs', req.body, (assets) => ({
|
||||
sql: `INSERT INTO asset_logs (id, asset_id, log_date, log_user, details) VALUES ?`,
|
||||
values: assets.map(a => [a.id, a.assetId||'', a.date||'', a.user||'', a.details||''])
|
||||
}));
|
||||
res.json(result);
|
||||
} catch (err) { res.status(500).json({ error: err.message }); }
|
||||
});
|
||||
|
||||
// SW 사용자 API
|
||||
app.get('/api/sw-users', async (req, res) => {
|
||||
try {
|
||||
const [rows] = await pool.query('SELECT * FROM sw_users');
|
||||
const grouped = rows.reduce((acc, u) => {
|
||||
if (!acc[u.sw_id]) acc[u.sw_id] = [];
|
||||
acc[u.sw_id].push([u.corp, u.dept, u.position, u.user_name, u.usage_period, u.doc_name]);
|
||||
return acc;
|
||||
}, {});
|
||||
res.json(Object.keys(grouped).map(sw_id => ({ sw_id, userData: grouped[sw_id] })));
|
||||
} catch (err) { res.status(500).json({ error: err.message }); }
|
||||
});
|
||||
|
||||
app.post('/api/sw-users/batch', async (req, res) => {
|
||||
try {
|
||||
const connection = await pool.getConnection();
|
||||
await connection.beginTransaction();
|
||||
await connection.query('DELETE FROM sw_users');
|
||||
const allUsers = req.body;
|
||||
if (allUsers.length > 0) {
|
||||
const values = allUsers.flatMap(item =>
|
||||
(item.userData || []).map(u => [item.sw_id, u[0], u[1], u[2], u[3], u[4], u[5]])
|
||||
);
|
||||
if (values.length > 0) {
|
||||
await connection.query('INSERT INTO sw_users (sw_id, corp, dept, position, user_name, usage_period, doc_name) VALUES ?', [values]);
|
||||
}
|
||||
}
|
||||
await connection.commit();
|
||||
connection.release();
|
||||
res.json({ success: true });
|
||||
} catch (err) { res.status(500).json({ error: err.message }); }
|
||||
});
|
||||
|
||||
// 자산번호 자동 생성 API
|
||||
app.get('/api/generate-asset-code', async (req, res) => {
|
||||
const { prefix } = req.query;
|
||||
if (!prefix) return res.status(400).json({ error: 'Prefix is required' });
|
||||
|
||||
try {
|
||||
const tables = ['pc_assets', 'server_assets', 'storage_assets', 'equip_assets', 'mobile_assets'];
|
||||
let maxNum = 0;
|
||||
|
||||
for (const table of tables) {
|
||||
const [rows] = await pool.query(
|
||||
`SELECT asset_code FROM ${table} WHERE asset_code LIKE ?`,
|
||||
[`${prefix}%`]
|
||||
);
|
||||
rows.forEach(r => {
|
||||
const numPart = r.asset_code.replace(prefix, '');
|
||||
const num = parseInt(numPart);
|
||||
if (!isNaN(num) && num > maxNum) maxNum = num;
|
||||
});
|
||||
}
|
||||
|
||||
const nextNum = (maxNum + 1).toString().padStart(3, '0');
|
||||
res.json({ nextCode: `${prefix}${nextNum}` });
|
||||
const [rows] = await pool.query(`SELECT * FROM ${tableName}`);
|
||||
console.log(`📡 [GET ${context}] Returning ${rows.length} rows from ${tableName}`);
|
||||
res.json(rows);
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: err.message });
|
||||
handleError(res, err, context, true);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Generic Batch Saver for Asset Tables
|
||||
*/
|
||||
const saveAssetsBatch = async (tableName, items, res, context) => {
|
||||
const connection = await pool.getConnection();
|
||||
try {
|
||||
await connection.beginTransaction();
|
||||
|
||||
// Get valid columns for this table
|
||||
const [cols] = await connection.query(`DESCRIBE ${tableName}`);
|
||||
const validColumns = cols.map(c => c.Field);
|
||||
|
||||
// 1. Clear existing
|
||||
await connection.query(`DELETE FROM ${tableName}`);
|
||||
|
||||
// 2. Insert new items
|
||||
for (const item of items) {
|
||||
const filteredRow = {};
|
||||
validColumns.forEach(col => {
|
||||
if (col === 'created_at' || col === 'updated_at') return;
|
||||
if (item[col] !== undefined) filteredRow[col] = item[col];
|
||||
});
|
||||
|
||||
if (!filteredRow.id) filteredRow.id = Math.random().toString(36).substring(2, 9);
|
||||
await connection.query(`INSERT INTO ${tableName} SET ?`, [filteredRow]);
|
||||
}
|
||||
|
||||
await connection.commit();
|
||||
res.json({ success: true, count: items.length });
|
||||
} catch (err) {
|
||||
await connection.rollback();
|
||||
handleError(res, err, context);
|
||||
} finally {
|
||||
connection.release();
|
||||
}
|
||||
};
|
||||
|
||||
// --- Routes ---
|
||||
|
||||
const routeMap = {
|
||||
'/api/users': { table: 'system_users', context: 'USERS' },
|
||||
'/api/pc': { table: 'asset_pc', context: 'PC' },
|
||||
'/api/server': { table: 'asset_server', context: 'SERVER' },
|
||||
'/api/storage': { table: 'asset_storage', context: 'STORAGE' },
|
||||
'/api/network': { table: 'asset_network', context: 'NETWORK' },
|
||||
'/api/sw/internal': { table: 'asset_sw_internal', context: 'SW INTERNAL' },
|
||||
'/api/sw/external': { table: 'asset_sw_external', context: 'SW EXTERNAL' },
|
||||
'/api/survey': { table: 'asset_survey', context: 'SURVEY' },
|
||||
'/api/pc-parts': { table: 'asset_pc_parts', context: 'PC PARTS' },
|
||||
'/api/equipment': { table: 'asset_equipment', context: 'EQUIPMENT' },
|
||||
'/api/office-supplies': { table: 'asset_office_supplies', context: 'OFFICE SUPPLIES' },
|
||||
'/api/cloud': { table: 'asset_cloud', context: 'CLOUD' },
|
||||
'/api/domain': { table: 'asset_domain', context: 'DOMAIN' },
|
||||
'/api/cost': { table: 'asset_cost', context: 'COST' },
|
||||
'/api/vip': { table: 'asset_vip', context: 'VIP' },
|
||||
'/api/asset/software/assignment': { table: 'asset_software_assignment', context: 'SW ASSIGN' }
|
||||
};
|
||||
|
||||
Object.entries(routeMap).forEach(([route, { table, context }]) => {
|
||||
app.get(route, (req, res) => fetchAssets(table, res, context));
|
||||
app.post(`${route}/batch`, (req, res) => saveAssetsBatch(table, req.body, res, `${context} BATCH`));
|
||||
});
|
||||
|
||||
app.get('/api/asset/history', (req, res) => fetchAssets('asset_history', res, 'HISTORY'));
|
||||
app.post('/api/asset/history/batch', async (req, res) => {
|
||||
const connection = await pool.getConnection();
|
||||
try {
|
||||
await connection.beginTransaction();
|
||||
await connection.query('DELETE FROM asset_history');
|
||||
for (const item of req.body) {
|
||||
const dbRow = {
|
||||
asset_id: item.assetId,
|
||||
log_date: item.date,
|
||||
log_user: item.user,
|
||||
details: item.details,
|
||||
cost: item.cost || 0
|
||||
};
|
||||
await connection.query('INSERT INTO asset_history SET ?', [dbRow]);
|
||||
}
|
||||
await connection.commit();
|
||||
res.json({ success: true });
|
||||
} catch (err) { await connection.rollback(); handleError(res, err, 'BATCH HISTORY'); } finally { connection.release(); }
|
||||
});
|
||||
|
||||
app.get('/api/generate-asset-code', async (req, res) => {
|
||||
try {
|
||||
const { prefix } = req.query;
|
||||
if (!prefix) return res.status(400).json({ error: 'Prefix is required' });
|
||||
const tables = ['asset_pc', 'asset_server', 'asset_storage', 'asset_network', 'asset_survey', 'asset_pc_parts', 'asset_equipment', 'asset_office_supplies', 'asset_vip'];
|
||||
let lastCode = '';
|
||||
for (const table of tables) {
|
||||
const [rows] = await pool.query(`SELECT asset_code FROM ${table} WHERE asset_code LIKE ? ORDER BY asset_code DESC LIMIT 1`, [`${prefix}%`]);
|
||||
if (rows.length > 0 && rows[0].asset_code > lastCode) lastCode = rows[0].asset_code;
|
||||
}
|
||||
let nextNum = 1;
|
||||
if (lastCode) {
|
||||
const lastNum = parseInt(lastCode.split('-').pop() || '0');
|
||||
nextNum = lastNum + 1;
|
||||
}
|
||||
res.json({ nextCode: `${prefix}${String(nextNum).padStart(3, '0')}` });
|
||||
} catch (err) { handleError(res, err, 'GENERATE CODE'); }
|
||||
});
|
||||
|
||||
// 6. Map Config API (Real-time Save)
|
||||
app.get('/api/maps', (req, res) => {
|
||||
try {
|
||||
if (!fs.existsSync('map_config.json')) {
|
||||
return res.json({});
|
||||
}
|
||||
const data = fs.readFileSync('map_config.json', 'utf8');
|
||||
res.json(JSON.parse(data || '{}'));
|
||||
} catch (err) {
|
||||
handleError(res, err, 'GET MAPS');
|
||||
}
|
||||
});
|
||||
|
||||
// 초기화 및 서버 기동
|
||||
ensureTables().then(() => {
|
||||
app.listen(PORT, () => {
|
||||
console.log(`📡 ITAM Dedicated API Server running on http://localhost:${PORT}`);
|
||||
});
|
||||
}).catch(err => {
|
||||
console.error('❌ Failed to start server:', err);
|
||||
app.post('/api/maps/save', (req, res) => {
|
||||
try {
|
||||
const { path, boxes } = req.body;
|
||||
if (!path) return res.status(400).json({ error: 'Path is required' });
|
||||
|
||||
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));
|
||||
console.log(`💾 [MAP SAVE] Updated config for: ${path}`);
|
||||
res.json({ success: true });
|
||||
} catch (err) {
|
||||
handleError(res, err, 'SAVE MAPS');
|
||||
}
|
||||
});
|
||||
|
||||
app.listen(3000, '0.0.0.0', () => {
|
||||
console.log('📡 ITAM BACKEND SERVER RUNNING ON PORT 3000 (Multi-Table Optimized)');
|
||||
});
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { createIcons, BookOpen, X, ChevronDown, ChevronRight, RefreshCw } from 'lucide';
|
||||
import { state } from '../core/state';
|
||||
|
||||
// ─── 자산별 가이드 콘텐츠 정의 ───
|
||||
// ─── 자산별 가이드 콘텐츠 정의 (SW_Table 브랜치 전체 복구) ───
|
||||
interface GuideTabConfig {
|
||||
id: string;
|
||||
label: string;
|
||||
@@ -46,6 +47,18 @@ const GUIDE_TABS: GuideTabConfig[] = [
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="guide-section">
|
||||
<h3>시스템 기본 사용방법</h3>
|
||||
<table class="guide-info-table">
|
||||
<thead><tr><th>기능</th><th>방법</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><strong>자산 조회</strong></td><td>상단 카테고리(하드웨어/소프트웨어) 및 하위 탭 선택 후 데이터 조회</td></tr>
|
||||
<tr><td><strong>자산 등록</strong></td><td>[자산 추가] 버튼 클릭 후 상세 정보 입력 및 저장</td></tr>
|
||||
<tr><td><strong>정보 수정</strong></td><td>목록 행 클릭 후 나타나는 모달에서 내용 변경 및 저장</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
`
|
||||
},
|
||||
{
|
||||
@@ -55,7 +68,7 @@ const GUIDE_TABS: GuideTabConfig[] = [
|
||||
<section class="guide-section">
|
||||
<h3>개인PC 관리 가이드</h3>
|
||||
<p class="guide-text">
|
||||
개인PC는 임직원에게 지급되는 데스크톱 및 노트북을 관리합니다. 자산의 지급, 교체, 반납까지의 전체 생애주기를 시스템에서 추적합니다.
|
||||
임직원에게 지급되는 데스크톱 및 노트북을 관리합니다. 자산의 지급, 교체, 반납까지의 전체 생애주기를 시스템에서 추적합니다.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
@@ -70,33 +83,62 @@ const GUIDE_TABS: GuideTabConfig[] = [
|
||||
<span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
|
||||
<div class="flow-step">
|
||||
<span class="step-number">2</span>
|
||||
<div><span class="step-label">자산 등록</span><p class="step-desc">자산코드 부여, 사양(CPU/RAM/Storage) 등록</p></div>
|
||||
<div><span class="step-label">자산 등록</span><p class="step-desc">자산번호 부여, 상세 사양 등록</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<i data-lucide="chevron-down" class="flow-arrow"></i>
|
||||
<div class="flow-row">
|
||||
<div class="flow-step">
|
||||
<span class="step-number">3</span>
|
||||
<div><span class="step-label">사용자 지급</span><p class="step-desc">사용자·사용조직 지정, 설치위치 기록</p></div>
|
||||
<div><span class="step-label">사용자 지급</span><p class="step-desc">사용자 지정 및 설치위치 기록</p></div>
|
||||
</div>
|
||||
<span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
|
||||
<div class="flow-step">
|
||||
<span class="step-number">4</span>
|
||||
<div><span class="step-label">운영 관리</span><p class="step-desc">OS 업데이트, 보안 점검, 품의서 관리</p></div>
|
||||
<div><span class="step-label">운영 관리</span><p class="step-desc">보안 점검 및 수리 이력 관리</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<i data-lucide="chevron-down" class="flow-arrow"></i>
|
||||
<div class="flow-row">
|
||||
<div class="flow-step">
|
||||
<span class="step-number">5</span>
|
||||
<div><span class="step-label">교체/반납</span><p class="step-desc">장비 회수 및 데이터 소거</p></div>
|
||||
</div>
|
||||
<span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
|
||||
<div class="flow-step">
|
||||
<span class="step-number">6</span>
|
||||
<div><span class="step-label">폐기 처리</span><p class="step-desc">불용 처리 및 매각/폐기 등록</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="guide-section">
|
||||
<h3>주요 관리 항목</h3>
|
||||
<table class="guide-info-table">
|
||||
<thead><tr><th>항목</th><th>설명</th><th>관리 주기</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>구매법인</td><td>자산의 소유 법인</td><td>등록 시</td></tr>
|
||||
<tr><td>사용자/조직</td><td>실제 사용자 및 소속 부서</td><td>변동 시</td></tr>
|
||||
<tr><td>자산번호</td><td>고유 식별 번호 (바코드)</td><td>등록 시</td></tr>
|
||||
<tr><td>모델명/사양</td><td>제조사 모델 및 CPU/RAM 등</td><td>등록 시</td></tr>
|
||||
<tr><td>구매금액</td><td>구매 비용 (부가세 포함)</td><td>등록 시</td></tr> </tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<div class="guide-tip">
|
||||
<strong>관리 팁:</strong> 자산 이력에서 '분출'과 '반납' 로그를 꼼꼼히 기록하면 자산의 실제 위치를 정확히 파악할 수 있습니다.
|
||||
</div>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'server',
|
||||
label: '🖥️ 서버',
|
||||
label: '🖥️ 서버/스토리지',
|
||||
content: `
|
||||
<section class="guide-section">
|
||||
<h3>서버 관리 가이드</h3>
|
||||
<h3>인프라 자산 관리 가이드</h3>
|
||||
<p class="guide-text">
|
||||
물리 서버와 가상 서버를 포함한 서버급 자산을 관리합니다. 안정적인 서비스 운영을 위해 체계적인 관리가 필요합니다.
|
||||
서버실 및 IDC에 설치된 물리 서버와 스토리지 장비를 관리합니다. 고가의 자산이므로 담당자(정/부) 지정이 필수입니다.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
@@ -106,21 +148,66 @@ const GUIDE_TABS: GuideTabConfig[] = [
|
||||
<div class="flow-row">
|
||||
<div class="flow-step">
|
||||
<span class="step-number">1</span>
|
||||
<div><span class="step-label">도입 계획</span><p class="step-desc">용도 정의, 사양 산정, 구매 승인</p></div>
|
||||
<div><span class="step-label">도입 계획</span><p class="step-desc">사양 확정 및 구매 승인</p></div>
|
||||
</div>
|
||||
<span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
|
||||
<div class="flow-step">
|
||||
<span class="step-number">2</span>
|
||||
<div><span class="step-label">설치 및 등록</span><p class="step-desc">랙 배치, 네트워크 설정, 자산 등록</p></div>
|
||||
<div><span class="step-label">설치 및 등록</span><p class="step-desc">네트워크 설정 및 자산번호 부여</p></div>
|
||||
</div>
|
||||
<span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
|
||||
<div class="flow-step">
|
||||
<span class="step-number">3</span>
|
||||
<div><span class="step-label">운영 관리</span><p class="step-desc">모니터링, 패치 적용, 장애 대응</p></div>
|
||||
<div><span class="step-label">운영 관리</span><p class="step-desc">정기 점검 및 장애 이력 관리</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="guide-section">
|
||||
<h3>필수 입력 항목</h3>
|
||||
<table class="guide-info-table">
|
||||
<thead><tr><th>항목</th><th>중요성</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><strong>IP 주소</strong></td><td>서버 접속 및 모니터링을 위한 필수 정보</td></tr>
|
||||
<tr><td><strong>설치위치</strong></td><td>IDC 또는 서버실 내의 정확한 랙 위치</td></tr>
|
||||
<tr><td><strong>담당자(정/부)</strong></td><td>비상 시 연락 가능한 관리 책임자</td></tr>
|
||||
<tr><td><strong>용도/상세</strong></td><td>운영 중인 서비스 및 상세 업무 설명</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<div class="guide-warn">
|
||||
<strong>주의 사항:</strong> 서버 자산의 IP가 변경될 경우 시스템에 즉시 반영하여 네트워크 관리 대장과의 정합성을 유지해야 합니다.
|
||||
</div>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 'software',
|
||||
label: '💾 소프트웨어',
|
||||
content: `
|
||||
<section class="guide-section">
|
||||
<h3>소프트웨어 자산 관리 가이드</h3>
|
||||
<p class="guide-text">
|
||||
구독형(SaaS) 및 영구형 라이선스를 관리합니다. 불법 소프트웨어 사용 방지와 비용 최적화가 주 목적입니다.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="guide-section">
|
||||
<h3>라이선스 관리 포인트</h3>
|
||||
<table class="guide-info-table">
|
||||
<thead><tr><th>구분</th><th>관리 내용</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><strong>구독형(Sub)</strong></td><td>구독 만료일 도래 전 갱신 여부 결정 및 비용 정산</td></tr>
|
||||
<tr><td><strong>영구형(Perm)</strong></td><td>보유 수량 대비 실제 설치 수량 매핑 (초과 사용 금지)</td></tr>
|
||||
<tr><td><strong>운영서비스</strong></td><td>도메인, 메일 등 매월 또는 매년 발생하는 비용 추적</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<div class="guide-tip">
|
||||
<strong>팁:</strong> 소프트웨어 상세 페이지의 [사용자 할당] 기능을 활용하여 누가 어떤 라이선스를 사용하는지 체계적으로 관리하세요.
|
||||
</div>
|
||||
`
|
||||
}
|
||||
];
|
||||
@@ -131,7 +218,7 @@ export function initGuide() {
|
||||
if (document.getElementById('guide-overlay')) return;
|
||||
|
||||
const overlay = document.createElement('div');
|
||||
overlay.className = 'guide-overlay';
|
||||
overlay.className = 'modal-overlay hidden';
|
||||
overlay.id = 'guide-overlay';
|
||||
|
||||
const tabsHtml = GUIDE_TABS.map((tab, i) =>
|
||||
@@ -143,32 +230,33 @@ export function initGuide() {
|
||||
).join('');
|
||||
|
||||
overlay.innerHTML = `
|
||||
<div class="guide-modal" id="guide-modal">
|
||||
<div class="guide-header">
|
||||
<h2><i data-lucide="book-open"></i> IT 자산관리 프로세스 가이드</h2>
|
||||
<button class="btn-close-guide" id="btn-close-guide">
|
||||
<div class="modal-content wide" id="guide-modal" style="height: 90vh;">
|
||||
<div class="modal-header">
|
||||
<h2><i data-lucide="book-open"></i> 자산관리 프로세스 가이드 (Standard)</h2>
|
||||
<button class="btn-icon" id="btn-close-guide">
|
||||
<i data-lucide="x"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="guide-tabs">${tabsHtml}</div>
|
||||
<div class="guide-body">${panelsHtml}</div>
|
||||
<div class="guide-tabs-container">
|
||||
<div class="guide-tabs">${tabsHtml}</div>
|
||||
</div>
|
||||
<div class="modal-body" style="padding-top: 0;">
|
||||
<div class="guide-body">${panelsHtml}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
body.appendChild(overlay);
|
||||
|
||||
const openGuide = () => {
|
||||
console.log('📖 Opening Guide Modal...');
|
||||
overlay.classList.add('active');
|
||||
console.log('📖 Opening Full Guide Modal...');
|
||||
overlay.classList.remove('hidden');
|
||||
};
|
||||
const closeGuide = () => overlay.classList.remove('active');
|
||||
const closeGuide = () => overlay.classList.add('hidden');
|
||||
|
||||
const triggerBtn = document.getElementById('btn-open-guide-header');
|
||||
if (triggerBtn) {
|
||||
console.log('✅ Guide trigger button found and bound.');
|
||||
triggerBtn.addEventListener('click', openGuide);
|
||||
} else {
|
||||
console.warn('⚠️ Guide trigger button (#btn-open-guide-header) not found in DOM.');
|
||||
}
|
||||
|
||||
overlay.addEventListener('click', (e) => { if (e.target === overlay) closeGuide(); });
|
||||
@@ -187,5 +275,5 @@ export function initGuide() {
|
||||
});
|
||||
});
|
||||
|
||||
createIcons({ icons: { BookOpen, X, ChevronDown, ChevronRight, RefreshCw }, nameAttr: 'data-lucide' });
|
||||
createIcons({ icons: { BookOpen, X, ChevronDown, ChevronRight, RefreshCw } });
|
||||
}
|
||||
|
||||
@@ -1,32 +1,121 @@
|
||||
import { createIcons, X } from 'lucide';
|
||||
import { setEditLock } from './ModalUtils';
|
||||
|
||||
/**
|
||||
* 모든 모달의 공통 기능 (닫기, ESC 처리, 배경 클릭 등)을 관리하는 베이스 모듈입니다.
|
||||
* 모든 모달의 공통 기능을 관리하는 베이스 추상 클래스입니다.
|
||||
*/
|
||||
export function initBaseModal() {
|
||||
const closeAllModals = () => {
|
||||
const modals = document.querySelectorAll('.modal-overlay');
|
||||
modals.forEach(modal => modal.classList.add('hidden'));
|
||||
};
|
||||
export abstract class BaseModal {
|
||||
protected idPrefix: string;
|
||||
protected title: string;
|
||||
protected currentAsset: any | null = null;
|
||||
protected isEditMode: boolean = false;
|
||||
protected modalEl: HTMLElement | null = null;
|
||||
protected formEl: HTMLFormElement | null = null;
|
||||
|
||||
// ESC 키로 닫기
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') closeAllModals();
|
||||
});
|
||||
constructor(idPrefix: string, title: string) {
|
||||
this.idPrefix = idPrefix;
|
||||
this.title = title;
|
||||
}
|
||||
|
||||
// 배경(Overlay) 클릭 시 닫기 (동적 생성된 모달 대응을 위해 이벤트 위임 고려 가능하나 일단 단순 구현)
|
||||
document.addEventListener('click', (e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (target.classList.contains('modal-overlay')) {
|
||||
closeAllModals();
|
||||
/**
|
||||
* 모달 초기화: HTML 삽입 및 공통 이벤트 바인딩
|
||||
*/
|
||||
public init(onSave: () => void, closeModalsFn: () => void) {
|
||||
// 1. 프레임 HTML 삽입 (자식 클래스에서 정의한 HTML 사용)
|
||||
if (!document.getElementById(`${this.idPrefix}-asset-modal`)) {
|
||||
document.body.insertAdjacentHTML('beforeend', this.renderFrameHTML());
|
||||
}
|
||||
});
|
||||
|
||||
return { closeAllModals };
|
||||
this.modalEl = document.getElementById(`${this.idPrefix}-asset-modal`);
|
||||
this.formEl = document.getElementById(`${this.idPrefix}-asset-form`) as HTMLFormElement;
|
||||
|
||||
// 2. 공통 버튼 이벤트 바인딩 (닫기, 취소 등)
|
||||
const btnCloseHeader = document.getElementById(`btn-close-${this.idPrefix}-modal`);
|
||||
const btnCancelFooter = document.getElementById(`btn-cancel-${this.idPrefix}-modal`);
|
||||
|
||||
const closeAction = () => {
|
||||
this.close();
|
||||
closeModalsFn(); // 전역 모달 상태 해제 콜백
|
||||
};
|
||||
|
||||
btnCloseHeader?.addEventListener('click', closeAction);
|
||||
btnCancelFooter?.addEventListener('click', closeAction);
|
||||
|
||||
// 3. 자식 클래스 전용 초기화 로직 실행
|
||||
this.initChildLogic(onSave, closeModalsFn);
|
||||
|
||||
// 4. 아이콘 초기화
|
||||
createIcons({ icons: { X } });
|
||||
}
|
||||
|
||||
/**
|
||||
* 모달 열기: 데이터 바인딩 및 모드 설정
|
||||
*/
|
||||
public open(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
|
||||
this.currentAsset = asset;
|
||||
this.isEditMode = (mode === 'add' || mode === 'edit');
|
||||
|
||||
this.setEditLockMode(mode);
|
||||
this.fillFormData(asset);
|
||||
|
||||
if (this.modalEl) {
|
||||
this.modalEl.classList.remove('hidden');
|
||||
}
|
||||
|
||||
this.onAfterOpen(asset, mode);
|
||||
}
|
||||
|
||||
/**
|
||||
* 모달 닫기: 상태 초기화
|
||||
*/
|
||||
public close() {
|
||||
if (this.modalEl) {
|
||||
this.modalEl.classList.add('hidden');
|
||||
}
|
||||
this.isEditMode = false;
|
||||
this.currentAsset = null;
|
||||
this.onAfterClose();
|
||||
}
|
||||
|
||||
/**
|
||||
* 조회/수정 모드에 따른 UI 잠금 및 버튼 제어
|
||||
*/
|
||||
protected setEditLockMode(mode: 'view' | 'edit' | 'add') {
|
||||
setEditLock(`${this.idPrefix}-asset-form`, mode, {
|
||||
saveBtnId: `btn-save-${this.idPrefix}-asset`,
|
||||
revertBtnId: `btn-revert-${this.idPrefix}-edit`,
|
||||
addLogBtnId: `btn-add-${this.idPrefix}-log`
|
||||
});
|
||||
}
|
||||
|
||||
// --- 추상 메서드: 자식 클래스에서 구현해야 함 ---
|
||||
protected abstract renderFrameHTML(): string;
|
||||
protected abstract initChildLogic(onSave: () => void, closeModals: () => void): void;
|
||||
protected abstract fillFormData(asset: any): void;
|
||||
protected abstract onAfterOpen(asset: any, mode: string): void;
|
||||
|
||||
// --- 훅(Hook) 메서드: 필요 시 오버라이드 ---
|
||||
protected onAfterClose(): void {}
|
||||
}
|
||||
|
||||
/**
|
||||
* 특정 모달을 엽니다.
|
||||
* @param modalId 모달 엘리먼트의 ID
|
||||
* --- 레거시 호환성을 위한 함수형 익스포트 ---
|
||||
* 기존 코드들이 참조하고 있는 함수들을 유지합니다.
|
||||
*/
|
||||
export function closeModals() {
|
||||
const modals = document.querySelectorAll('.modal-overlay');
|
||||
modals.forEach(modal => modal.classList.add('hidden'));
|
||||
}
|
||||
|
||||
export function initBaseModal() {
|
||||
// ESC 키로 모든 모달 닫기
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') closeModals();
|
||||
});
|
||||
|
||||
return { closeAllModals: closeModals };
|
||||
}
|
||||
|
||||
export function openModal(modalId: string) {
|
||||
const modal = document.getElementById(modalId);
|
||||
if (modal) {
|
||||
|
||||
@@ -1,317 +0,0 @@
|
||||
import { state } from '../../core/state';
|
||||
import { SoftwareAsset } from '../../core/excelHandler';
|
||||
import { openModal } from './BaseModal';
|
||||
import { createIcons, Save, X, Edit2, RotateCcw, History, Plus } from 'lucide';
|
||||
|
||||
const CLOUD_MODAL_HTML = `
|
||||
<div id="cloud-asset-modal" class="modal-overlay hidden">
|
||||
<div class="modal-content wide">
|
||||
<div class="modal-header">
|
||||
<h2 id="cloud-modal-title">클라우드 서비스 상세</h2>
|
||||
<button id="btn-close-cloud-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="cloud-asset-form" class="grid-form">
|
||||
<input type="hidden" id="cloud-asset-id" />
|
||||
<div class="form-group"><label>플랫폼명</label><input type="text" id="cloud-플랫폼명" placeholder="예: AWS, Cafe24" required /></div>
|
||||
<div class="form-group">
|
||||
<label>담당법인</label>
|
||||
<select id="cloud-법인" required>
|
||||
<option value="한맥">한맥</option><option value="삼안">삼안</option><option value="바론">바론</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" style="grid-column: span 2;"><label>사용용도(프로젝트/제품명)</label><input type="text" id="cloud-제품명" required /></div>
|
||||
<div class="form-group"><label>담당부서</label><input type="text" id="cloud-부서" /></div>
|
||||
<div class="form-group"><label>계정명(이메일)</label><input type="text" id="cloud-계정명" /></div>
|
||||
|
||||
<div class="form-group"><label>결제수단</label>
|
||||
<select id="cloud-결제수단">
|
||||
<option value="">선택안함</option>
|
||||
<option value="법인카드">법인카드</option>
|
||||
<option value="인보이스">인보이스</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group"><label>연결카드번호(뒷4자리)</label><input type="text" id="cloud-연결카드번호" placeholder="1234" /></div>
|
||||
<div class="form-group"><label>결제일(기준일)</label><input type="number" min="1" max="31" id="cloud-결제일" placeholder="15" /></div>
|
||||
<div class="form-group"><label>당월 청구액(원)</label><input type="text" id="cloud-당월청구액" placeholder="0" oninput="this.value = this.value.replace(/[^0-9]/g, '') ? Number(this.value.replace(/[^0-9]/g, '')).toLocaleString() : ''" /></div>
|
||||
<div class="form-group" style="grid-column: span 2;"><label>비고</label><input type="text" id="cloud-비고" /></div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-history-area">
|
||||
<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-cloud-update" class="btn btn-outline btn-sm"><i data-lucide="plus" style="width:14px;height:14px;"></i> 내역 추가</button>
|
||||
</div>
|
||||
<div id="cloud-history-list" class="history-timeline">
|
||||
<div class="empty-history">내역이 없습니다.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer" style="justify-content: space-between;">
|
||||
<button id="btn-delete-cloud-asset" class="btn btn-outline btn-danger">삭제</button>
|
||||
<div class="footer-actions">
|
||||
<button id="btn-revert-cloud-edit" class="btn btn-outline hidden">취소</button>
|
||||
<button id="btn-close-cloud-footer" class="btn btn-outline">닫기</button>
|
||||
<button id="btn-save-cloud-asset" class="btn btn-primary">수정</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="cloud-update-modal" class="modal-overlay hidden" style="z-index: 1100;">
|
||||
<div class="modal-content" style="max-width: 400px;">
|
||||
<div class="modal-header">
|
||||
<h2>클라우드 결제/이력 업데이트</h2>
|
||||
<button id="btn-close-cloud-update" class="btn-icon"><i data-lucide="x"></i></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="grid-form" style="grid-template-columns: 1fr;">
|
||||
<div class="form-group">
|
||||
<label>업데이트 일자</label>
|
||||
<input type="date" id="cloud-update-date" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>청구 금액(원)</label>
|
||||
<input type="text" id="cloud-update-cost" oninput="this.value = this.value.replace(/[^0-9]/g, '') ? Number(this.value.replace(/[^0-9]/g, '')).toLocaleString() : ''" placeholder="ex) 150,000" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>상세 내용 (메모)</label>
|
||||
<input type="text" id="cloud-update-note" placeholder="예: 트래픽 초과로 인한 요금 증가" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div></div>
|
||||
<div class="footer-actions">
|
||||
<button id="btn-cancel-cloud-update" class="btn btn-outline">취소</button>
|
||||
<button id="btn-save-cloud-update" class="btn btn-primary">반영하기</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
export let currentCloudAsset: SoftwareAsset | null = null;
|
||||
export let isCloudEditMode = false;
|
||||
|
||||
export function setCloudEditMode(edit: boolean) {
|
||||
isCloudEditMode = edit;
|
||||
const form = document.getElementById('cloud-asset-form') as HTMLFormElement;
|
||||
const btnSave = document.getElementById('btn-save-cloud-asset') as HTMLButtonElement;
|
||||
const btnRevert = document.getElementById('btn-revert-cloud-edit') as HTMLButtonElement;
|
||||
const btnClose = document.getElementById('btn-close-cloud-footer') as HTMLButtonElement;
|
||||
|
||||
if (edit) {
|
||||
form.classList.add('is-edit-mode');
|
||||
form.classList.remove('is-view-mode');
|
||||
btnSave.textContent = '저장';
|
||||
btnRevert.classList.remove('hidden');
|
||||
btnClose.classList.add('hidden');
|
||||
Array.from(form.elements).forEach((el: any) => el.disabled = false);
|
||||
} else {
|
||||
form.classList.add('is-view-mode');
|
||||
form.classList.remove('is-edit-mode');
|
||||
btnSave.textContent = '수정';
|
||||
btnRevert.classList.add('hidden');
|
||||
btnClose.classList.remove('hidden');
|
||||
Array.from(form.elements).forEach((el: any) => el.disabled = true);
|
||||
if (currentCloudAsset) fillCloudFormData(currentCloudAsset);
|
||||
}
|
||||
}
|
||||
|
||||
export function fillCloudFormData(asset: SoftwareAsset) {
|
||||
(document.getElementById('cloud-asset-id') as HTMLInputElement).value = asset.id;
|
||||
(document.getElementById('cloud-플랫폼명') as HTMLInputElement).value = asset.플랫폼명 || '';
|
||||
(document.getElementById('cloud-법인') as HTMLSelectElement).value = asset.법인 || '한맥';
|
||||
(document.getElementById('cloud-제품명') as HTMLInputElement).value = asset.제품명 || '';
|
||||
(document.getElementById('cloud-부서') as HTMLInputElement).value = asset.부서 || '';
|
||||
(document.getElementById('cloud-계정명') as HTMLInputElement).value = asset.계정명 || '';
|
||||
(document.getElementById('cloud-결제수단') as HTMLSelectElement).value = asset.결제수단 || '';
|
||||
(document.getElementById('cloud-연결카드번호') as HTMLInputElement).value = asset.연결카드번호 || '';
|
||||
(document.getElementById('cloud-결제일') as HTMLInputElement).value = asset.결제일 || '';
|
||||
|
||||
const billing = asset.당월청구액 ? asset.당월청구액.replace(/[^0-9]/g, '') : '';
|
||||
(document.getElementById('cloud-당월청구액') as HTMLInputElement).value = billing ? Number(billing).toLocaleString() : '';
|
||||
(document.getElementById('cloud-비고') as HTMLInputElement).value = asset.비고 || '';
|
||||
|
||||
document.getElementById('btn-open-cloud-update')!.style.display = 'flex';
|
||||
renderCloudHistory(asset.id);
|
||||
}
|
||||
|
||||
function renderCloudHistory(assetId: string) {
|
||||
const historyList = document.getElementById('cloud-history-list');
|
||||
if (!historyList) return;
|
||||
if (!state.masterData.logs) state.masterData.logs = [];
|
||||
|
||||
const logs = state.masterData.logs
|
||||
.filter(l => l.assetId === assetId)
|
||||
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
|
||||
|
||||
if (logs.length === 0) {
|
||||
historyList.innerHTML = '<div class="empty-history">업데이트 내역이 없습니다.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
historyList.innerHTML = logs.map(log => `
|
||||
<div class="history-item">
|
||||
<div class="history-date">${log.date}</div>
|
||||
<div class="history-user">작업자: ${log.user}</div>
|
||||
<div class="history-details">${log.details.replace(/\n/g, '<br>')}</div>
|
||||
</div>
|
||||
`).join('');
|
||||
createIcons({ icons: { X, History, Plus } });
|
||||
}
|
||||
|
||||
export function initCloudModal(renderContent: () => void, closeModals: () => void) {
|
||||
if (!document.getElementById('cloud-asset-modal')) {
|
||||
document.body.insertAdjacentHTML('beforeend', CLOUD_MODAL_HTML);
|
||||
}
|
||||
|
||||
const form = document.getElementById('cloud-asset-form') as HTMLFormElement;
|
||||
const btnRevert = document.getElementById('btn-revert-cloud-edit');
|
||||
const btnSave = document.getElementById('btn-save-cloud-asset');
|
||||
const btnDelete = document.getElementById('btn-delete-cloud-asset');
|
||||
|
||||
document.getElementById('btn-close-cloud-modal')?.addEventListener('click', closeModals);
|
||||
document.getElementById('btn-close-cloud-footer')?.addEventListener('click', closeModals);
|
||||
|
||||
btnRevert?.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
setCloudEditMode(false);
|
||||
});
|
||||
|
||||
btnSave?.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
if (!isCloudEditMode) {
|
||||
setCloudEditMode(true);
|
||||
return;
|
||||
}
|
||||
if (!form.checkValidity()) { form.reportValidity(); return; }
|
||||
|
||||
const id = (document.getElementById('cloud-asset-id') as HTMLInputElement).value;
|
||||
const billingRaw = (document.getElementById('cloud-당월청구액') as HTMLInputElement).value.replace(/[^0-9]/g, '');
|
||||
|
||||
const newAsset: SoftwareAsset = {
|
||||
id: id || Math.random().toString(36).substring(2, 9),
|
||||
type: '클라우드',
|
||||
플랫폼명: (document.getElementById('cloud-플랫폼명') as HTMLInputElement).value,
|
||||
법인: (document.getElementById('cloud-법인') as HTMLSelectElement).value,
|
||||
제품명: (document.getElementById('cloud-제품명') as HTMLInputElement).value,
|
||||
부서: (document.getElementById('cloud-부서') as HTMLInputElement).value,
|
||||
계정명: (document.getElementById('cloud-계정명') as HTMLInputElement).value,
|
||||
결제수단: (document.getElementById('cloud-결제수단') as HTMLSelectElement).value,
|
||||
연결카드번호: (document.getElementById('cloud-연결카드번호') as HTMLInputElement).value,
|
||||
결제일: (document.getElementById('cloud-결제일') as HTMLInputElement).value,
|
||||
당월청구액: billingRaw,
|
||||
비고: (document.getElementById('cloud-비고') as HTMLInputElement).value,
|
||||
구매일: '', 금액: '', 수량: 1, 납품업체: ''
|
||||
};
|
||||
|
||||
if (id) {
|
||||
const idx = state.masterData.sw.findIndex(a => a.id === id);
|
||||
if (idx !== -1) state.masterData.sw[idx] = newAsset;
|
||||
} else {
|
||||
state.masterData.sw.push(newAsset);
|
||||
const now = new Date();
|
||||
state.masterData.logs = state.masterData.logs || [];
|
||||
state.masterData.logs.push({
|
||||
id: Math.random().toString(36).substring(2, 9),
|
||||
assetId: newAsset.id,
|
||||
date: `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}-${String(now.getDate()).padStart(2,'0')}`,
|
||||
user: '관리자',
|
||||
details: '신규 등록'
|
||||
});
|
||||
}
|
||||
closeModals();
|
||||
renderContent();
|
||||
});
|
||||
|
||||
btnDelete?.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const id = (document.getElementById('cloud-asset-id') as HTMLInputElement).value;
|
||||
if (confirm('클라우드 자산을 삭제하시겠습니까?')) {
|
||||
state.masterData.sw = state.masterData.sw.filter(a => a.id !== id);
|
||||
closeModals();
|
||||
renderContent();
|
||||
}
|
||||
});
|
||||
|
||||
// 클라우드 업데이트 (이력) 모달 로직
|
||||
const updateModal = document.getElementById('cloud-update-modal')!;
|
||||
document.getElementById('btn-open-cloud-update')?.addEventListener('click', () => {
|
||||
updateModal.classList.remove('hidden');
|
||||
(document.getElementById('cloud-update-date') as HTMLInputElement).value = new Date().toISOString().split('T')[0];
|
||||
(document.getElementById('cloud-update-cost') as HTMLInputElement).value = '';
|
||||
(document.getElementById('cloud-update-note') as HTMLInputElement).value = '';
|
||||
});
|
||||
|
||||
const closeUpdateModal = () => updateModal.classList.add('hidden');
|
||||
document.getElementById('btn-close-cloud-update')?.addEventListener('click', closeUpdateModal);
|
||||
document.getElementById('btn-cancel-cloud-update')?.addEventListener('click', closeUpdateModal);
|
||||
|
||||
document.getElementById('btn-save-cloud-update')?.addEventListener('click', () => {
|
||||
const id = (document.getElementById('cloud-asset-id') as HTMLInputElement).value;
|
||||
if (!id) return;
|
||||
|
||||
const date = (document.getElementById('cloud-update-date') as HTMLInputElement).value;
|
||||
const costRaw = (document.getElementById('cloud-update-cost') as HTMLInputElement).value.replace(/[^0-9]/g, '');
|
||||
const note = (document.getElementById('cloud-update-note') as HTMLInputElement).value;
|
||||
|
||||
if (!date) return alert('업데이트 일자를 입력하세요.');
|
||||
|
||||
let details = '결제/상태 업데이트';
|
||||
if (costRaw) details += ` (비용: ₩ ${Number(costRaw).toLocaleString()})`;
|
||||
if (note) details += `\n메모: ${note}`;
|
||||
|
||||
state.masterData.logs = state.masterData.logs || [];
|
||||
state.masterData.logs.push({
|
||||
id: Math.random().toString(36).substring(2, 9),
|
||||
assetId: id,
|
||||
date,
|
||||
user: '관리자',
|
||||
details
|
||||
});
|
||||
|
||||
// 금액 업데이트 반영
|
||||
if (costRaw) {
|
||||
const idx = state.masterData.sw.findIndex(a => a.id === id);
|
||||
if (idx !== -1) {
|
||||
state.masterData.sw[idx].당월청구액 = costRaw;
|
||||
(document.getElementById('cloud-당월청구액') as HTMLInputElement).value = Number(costRaw).toLocaleString();
|
||||
}
|
||||
}
|
||||
|
||||
closeUpdateModal();
|
||||
renderCloudHistory(id);
|
||||
renderContent();
|
||||
});
|
||||
|
||||
createIcons({ icons: { Save, X, Edit2, RotateCcw, History, Plus } });
|
||||
}
|
||||
|
||||
export function openCloudModal(asset?: SoftwareAsset) {
|
||||
currentCloudAsset = asset || null;
|
||||
const form = document.getElementById('cloud-asset-form') as HTMLFormElement;
|
||||
const deleteBtn = document.getElementById('btn-delete-cloud-asset')!;
|
||||
|
||||
openModal('cloud-asset-modal');
|
||||
form.reset();
|
||||
|
||||
if (asset) {
|
||||
document.getElementById('cloud-modal-title')!.textContent = '클라우드 서비스 상세';
|
||||
deleteBtn.style.display = 'block';
|
||||
fillCloudFormData(asset);
|
||||
setCloudEditMode(false);
|
||||
} else {
|
||||
document.getElementById('cloud-modal-title')!.textContent = '신규 클라우드 서비스 등록';
|
||||
deleteBtn.style.display = 'none';
|
||||
(document.getElementById('cloud-asset-id') as HTMLInputElement).value = '';
|
||||
document.getElementById('btn-open-cloud-update')!.style.display = 'none';
|
||||
renderCloudHistory('');
|
||||
setCloudEditMode(true);
|
||||
}
|
||||
createIcons({ icons: { History, Plus } });
|
||||
}
|
||||