93 Commits

Author SHA1 Message Date
이태훈
9f165faf13 feat: add desktop label printer program files and clean up backup files 2026-06-23 14:07:22 +09:00
이태훈
237ac9ee25 fix: 위치보기 수정 (도면 오버플로우 제한 및 API 호출 경로 정상화) 2026-06-22 13:56:52 +09:00
f41f2378d7 fix: 자산번호 저장 누락 오류 수정 및 위치보기 도면 배치 보완 2026-06-19 16:25:28 +09:00
41406f56e8 Merge branch 'ux_setting' into db_setting
# Conflicts:
#	README.md
2026-06-19 15:48:26 +09:00
af578a63bc refactor: 프로젝트 정리 및 최적화 (미사용 파일 제거, 코드 중복 제거, 정적 이미지 빌드 경로 수정)
- 미사용 목업 파일(dummyData.ts, realServerData.ts, server_data.json) 및 중복 기획서 제거

- excelHandler.ts 내 미사용 대용량 엑셀 처리 함수들을 삭제하여 xlsx 의존성 제거 및 클라이언트 빌드 크기 최적화

- ListFactory.ts와 utils.ts 간에 중복으로 존재하던 calculatePcScoreDeductive 함수를 하나로 일원화

- 기획서 및 계획 문서들을 docs/plans/ 하위 폴더로 이동하여 프로젝트 루트 정리

- 정적 이미지 폴더(img/)를 public/img/로 이동하여 프로덕션 빌드 시 로고 및 장비 사진 엑박 오류 해결
2026-06-19 15:12:25 +09:00
e8bc42e5de refactor: CSS 파일 모듈화 및 컴포넌트별 직접 Import 구조 전환 (방안 B)
- HTML 내 CSS link 태그들을 삭제하고, 각 TS 진입점 파일에서 CSS 파일을 직접 import하도록 연동

- 스타일 파일들을 각 컴포넌트/뷰 디렉토리 옆으로 이동 배치 (Co-location)

- guide.css, modal.css, dashboard.css, table.css, map-editor.css 이동 및 경로 갱신

- 디자인 시스템(common.css) 및 로그인 스타일(login.css)은 전역 배치 유지하고 main.ts에서 통합 임포트
2026-06-19 15:04:36 +09:00
587e92a7da feat: 서버 탭 전환 시 뷰 모드 유지 및 대시보드/맵 에디터 스타일 표준화
- 서버 탭 복귀 시 최근 선택한 뷰 모드(목록/위치) 상태 유지 및 currentViewMode 상태 일원화

- 개인PC 대시보드 및 맵 에디터의 인라인 CSS 스타일을 공통 CSS 및 변수 클래스로 분리 및 가독성 개선

- Vite 멀티페이지 빌드 설정(vite.config.ts) 추가
2026-06-19 14:55:25 +09:00
c6515c1b5d merge: 공동작업자 HW_Dashboard 브랜치 병합 (대시보드 UI 및 가독성 개선 사항 병합) 2026-06-19 13:39:29 +09:00
e128634e05 style: UI 가독성 개선 및 LocationView 타입 오류 수정
1. common.css의 --mute 변수 색상 대비값 강화 (#71717a) 및 누락된 자산 상태/성능 등급 배지 CSS 클래스 정의
2. ListFactory.ts에서 테이블 헤더(th) 정렬을 데이터 셀(td)과 일치시키고 장문 생략 시 툴팁(title) 추가
3. common.css에서 타이포그래피 스케일 계산식을 clamp에서 max로 변경하여 상한선 제한 해제 (와이드 화면 대응)
4. LocationView.ts 내 HardwareAsset 타입에 정의되지 않은 asset_purpose를 any로 타입 캐스팅하여 TS2339 빌드 에러 해결
5. 프로젝트 폴더 내 일회성 점검/이관 스크립트 및 Playwright 임시 캡처 로그/이미지 파일 정리
2026-06-19 13:19:25 +09:00
c0ef52deac style(table): optimize for 1920x1080 without horizontal scroll
- Switched to fixed table layout to ensure fit within viewport
- Implemented automatic ellipsis (...) for overflowing text in all cells
- Synchronized cell widths and alignment in ListFactory with column definitions
- Removed restrictive min-widths that caused horizontal scrolling
2026-06-18 20:41:03 +09:00
aab1f91d3d feat(map): implement robust ID-based asset mapping and fix UI rendering inconsistencies
- Migrated map mapping from fuzzy coordinates to precise asset_id tracking
- Updated MapEditor to allow explicit asset assignment via dropdown
- Fixed LocationView rendering logic to search across all hardware categories
- Standardized map indicators to always render as areas (boxes) with minimum size
- Restored stable CSS max-height for detail modal photos to prevent clipping
- Synced MapEditor saves directly to database via asset_id
2026-06-18 19:49:15 +09:00
f656f0a439 fix: 대시보드 사양 적정성 직무 매핑 수정 (system_users.position 우선 참조)
- HwDashboard: asset_core.user_position 대신 system_users.user_name -> position 으로 세부 직무 조회
- ListFactory: 동일하게 세부 직무명 우선 참조
- 미니 모달 조직(직무) 컬럼: _resolved_position 사용으로 정확한 직무명 표시
- 수정된 필드명: u.name -> u.user_name (system_users 실제 컬럼명 반영)
- 예) 디자이너(3D, 영상) 직군이 최상급 기준으로 올바르게 판정됨
2026-06-18 19:48:23 +09:00
e77c4854cb fix: restore exact matching logic for map locations 2026-06-18 17:04:25 +09:00
1d32a0350b feat: 등급별 자산 종합 현황 및 사양 적정성 분석 레이아웃 5:5 콤팩트 최적화 2026-06-18 15:56:51 +09:00
309c400ee2 최신코드 반영 2026-06-18 13:00:18 +09:00
3db05f2939 feat(ui/ux): unify typography to Pretendard and enforce read-only view mode as default
- Set global font-family to Pretendard and letter-spacing to -0.02em.
- Standardized table header font-size to var(--fs-sm).
- Fixed table clipping and sticky header behavior at 1920x1080.
- Implemented dynamic select options in search filters.
- Enforced 'view' mode as default for all asset modals (PC, Server, SW, etc.).
- Improved Modal logic to ensure all fields (including dynamic rows) are correctly locked.
- Updated Location View detail button from 'Edit' to 'View'.
- Updated design_rule.md to reflect new typography standards.
2026-06-18 11:13:16 +09:00
2cb4b87c0a style: surgically unify Admin page UI and sub-tabs
- Standardized sub-tab rendering in PartsMasterListView to prevent duplication
- Updated badge classes to match system design guide (badge-success/warning)
- Refactored JobSpecModal to use unified .grid-form and header identity
- Preserved all functional logic and tab-switching behavior from collaborator
2026-06-17 13:16:15 +09:00
6ed2faee2d merge: remote main updates into ux_setting with style preservation
- Resolved conflicts in state.ts, HwDashboard.ts, ListFactory.ts, and PartsMasterListView.ts
- Prioritized latest functional logic from main branch (Job Spec mapping, Matrix calculations)
- Maintained Vercel-inspired UI styling and unified CSS classes from ux_setting branch
- Synchronized PC status toggle visibility rules with latest main branch changes
2026-06-17 13:08:59 +09:00
89d3ac2e89 style: unify UI styling & restore dashboard logic
- Restored HW/SW Dashboard full features (Chart.js, filters, tables) from main
- Unified Search Bar & Filter Bar across all views (List, Location)
- Integrated asset identity info into all Modal Headers
- Standardized 'Remove Row' buttons as high-visibility circular circles
- Centralized hardcoded inline styles into dedicated CSS files
- Fixed various ReferenceErrors and layout regressions in HWModal
2026-06-17 12:29:26 +09:00
b37981506e style: revert content/logic to main while preserving Vercel UI styles
- Reverted HWModal to unified form structure from main branch
- Restored original field positions and visibility logic in all modals
- Applied Vercel-inspired CSS classes and removed legacy inline styles
- Restored SwDashboard 2x2 layout from main
- Cleaned up unused modular form files
- Fixed TypeError related to ASSET_MFR schema key
2026-06-17 10:46:24 +09:00
abc531a41e Design: 대시보드 하단 표 세로비율 확장 및 스크롤바 제거 2026-06-17 09:28:06 +09:00
8451101325 Style: 대시보드 UI 프리미엄 리스타일링 및 카드 구조 도입 2026-06-17 09:25:16 +09:00
3e69e74bc9 Feat: 통합 사양 적정성 인라인 바 그래프 및 대시보드 레이아웃 개편 2026-06-17 09:22:31 +09:00
73ef13f3a5 style: apply Vercel-inspired responsive UI & fluid scaling 2026-06-16 17:43:20 +09:00
155570e8de style: disable global text selection to prevent accidental UI dragging 2026-06-16 14:32:16 +09:00
723c4723f6 feat: 개인PC 자산 관리(PC) 페이지에서 '자산 현황' 토글 탭 숨김처리 및 자산 목록으로 기본 고정 2026-06-15 15:01:46 +09:00
a44283281f feat: 대시보드 미니 모달 상세 자산 목록 테이블에 등급 및 점수 컬럼 표기 기능 추가 2026-06-15 14:53:36 +09:00
fa87f383e2 fix: 직무별 기준 사양 대비 부족 사양(0.6배 미만) 및 오버스펙(1.5배 초과) 판정 수치 비율 임계치 조정 2026-06-15 14:51:09 +09:00
6118141f6e feat: 직무별 기준 사양(job_spec_standards) 데이터를 활용한 부족사양, 오버스펙 판정 및 등급별 부족분(구매 필요) 산출 공식 연동 2026-06-15 14:43:53 +09:00
119c799d1d style: 레이아웃 비율 복구 및 타이포그래피 전역 표준화 (16px Base)
- 주요 변경 사항:
  1. 레이아웃 안정화: 서버 위치도 뷰의 2:1 비율 복원 및 가변형(Adaptive) 레이아웃 적용
  2. 타이포그래피 표준화: 전역 폰트 스케일 도입 및 기본 폰트 사이즈 상향 (15px -> 16px)
  3. 3-Way 토글 통합: [자산 위치] [운영 현황] [자산 목록] 간의 전환 오류 수정 및 UI 통일
  4. 하드코딩 제거: 인라인 스타일을 CSS 클래스 및 변수 체계로 전면 리팩토링
  5. 가이드 업데이트: 변경된 디자인 정책을 design_rule.md에 반영
2026-06-15 14:21:54 +09:00
05e23883b8 feat: 직무별 기준 사양 등록 시 부품 마스터 자동완성 검색 및 성능 점수 실시간 자동 계산 기능 추가 2026-06-15 13:29:10 +09:00
8c406fd0b8 fix: 부품 표준 정보 서브 탭 렌더링 시 DOM 쿼리 타이밍 에러 해결 (document.getElementById -> tabContainer.querySelector) 2026-06-15 13:27:20 +09:00
e678f9d653 feat: 부품 마스터 화면 내 직무별 기준 사양 CRUD 및 서브 탭 연동 기능 추가 2026-06-15 13:26:11 +09:00
132e37d0d3 refactor: 사양 부족 및 노후 장비의 교체 수요를 해당 사용자의 직무 권장 사양 등급에 맞추어 분산 합계 계산 2026-06-15 13:19:10 +09:00
d6e75f8b2c refactor: 교체 대상 PC 교체 수요를 보급 PC 신규 구매 필요 수량으로 이전 합산 2026-06-15 13:17:01 +09:00
c35f57acab style: 보급 PC 라벨 단순화 및 부족분 컬럼명을 구매 필요로 변경 2026-06-15 13:14:45 +09:00
97cecb8b50 feat: 5등급 PC 분류 체계 도입 (교체 대상 PC 등급 신설) 2026-06-15 13:12:07 +09:00
b9d28736e2 docs: add work log for 2026-06-15 and update DB deletion policy in README 2026-06-15 11:47:46 +09:00
a4b620099c feat: 대시보드 폰트 크기, 패딩 조절 및 자산목록 정렬 기준 변경(updated_at 내림차순) 2026-06-15 11:22:07 +09:00
b169176d57 WIP(style): UI 컴포넌트 하드코딩 제거 및 CSS 통합 (진행 중)
- 작업 상태: 진행 중 (Work In Progress)
- 주요 변경 사항:
  1. CSS 파일 통합: HWModal, SWModal, ListFactory 등에서 인라인 스타일(style 속성) 전면 제거 및 클래스 기반으로 재작성
  2. 폰트/타이포그래피 스케일업: 최소 폰트 14px 기준으로 전체 텍스트 크기 상향 및 굵기(font-weight) 상향 조정
  3. GNB(상단바) 레이아웃 개편: 2단 구조(로고 라인 / 메뉴 라인)로 변경 및 카테고리 텍스트 라벨 생략을 통한 간결화
  4. 로고 이미지 교체: image 92.png로 업데이트 및 경로 정리
  5. 디자인 가이드 분리: README에서 design_rule.md로 디자인 정책 문서 독립

* 참고: 현재 디자인 검토를 위한 중간 반영 상태이며, 피드백에 따라 추가 수정 예정임.
2026-06-12 15:57:20 +09:00
56abdddbc7 Merge remote-tracking branch 'origin/main' into ux_setting 2026-06-12 13:34:13 +09:00
fd9e88d7c6 style: 리팩토링 및 CSS 통합 작업 완료 (하드코딩 스타일 제거) 2026-06-12 13:29:59 +09:00
407b9ba531 style: 연도별 PC 노후도 예측 표의 왼편 여백 제거 및 레이아웃 정렬 2026-06-12 10:40:37 +09:00
55c43aa250 merge: remote main updates into local main 2026-06-12 10:37:52 +09:00
9186eb50ca feat: 자산 관리 시스템 고도화 및 DB 정규화 대응 수정
1. 자산 저장 시 500 에러 해결: V3 정규화 스키마에 맞춰 테이블 매핑 최신화 및 저장 로직 안정화
2. 자산 번호 체계 개편: 구매일자(YYYYMM)와 유형을 기반으로 PREFIX-YYYYMM-NNNN 규칙 적용 (코드 로직 수정 및 기존 데이터 전량 갱신)
3. 구매일자 표준화: 모든 purchase_date를 YYYY-MM-DD 형식으로 통일
4. HWModal 기능 복원: 위치 등록 시 다중 사진 페이지네이션(좌우 버튼) 기능 복구
5. 위치 지도 고도화: HTML 인터랙티브 지도 지원 및 이미지 지도 내 좌석 스내핑 로직 추가
2026-06-12 10:29:42 +09:00
8a3727ea61 feat: 대시보드 구분선 디자인 전환, 폰트 확대 및 버그 수정 2026-06-12 08:49:04 +09:00
0c1977f707 style: 폰트 크기를 ux_setting 표준 규격(14px)으로 복구 및 최적화 2026-06-11 13:06:04 +09:00
19e6be27de fix(merge): resolve compile errors and restore remote db IP 2026-06-11 11:49:34 +09:00
accbbdc2fa fix(pc-view): restore pc list view rendering and enable status view toggle for PC 2026-06-11 11:43:51 +09:00
d3c4fa5e66 fix(main): restore dashboard tab rendering check in refreshView 2026-06-11 11:42:03 +09:00
8c1cb6cf93 merge: merge origin/main into HW_Dashboard and resolve conflicts 2026-06-11 11:39:09 +09:00
4810df212a merge: ux_setting 브랜치를 main에 병합 (HWModal UI 고도화 및 PC 탭 제한 사항 반영) 2026-06-11 11:23:09 +09:00
f5a84a77ef feat: PC 페이지 개발 대기 상태 전환 및 자산현황 뷰 노출 범위 제한 (서버 탭 전용) 2026-06-11 11:20:28 +09:00
565802f55b feat(flow-logs): fix text overlapping, show full asset code, filter by current month and support JSON logs 2026-06-11 11:14:04 +09:00
10479aad7e feat: HWModal 네트워크 및 원격 접속 정보 동적 입력 기능 통합 및 UI 최적화 2026-06-11 11:14:00 +09:00
95fbd3f606 fix: 자산 상세 정보 레이아웃 최적화 및 스타일 표준화
- 상세 정보 섹션을 2열 그리드로 변경하여 정보 밀도 향상\n- 항목 제목(12px) 및 내용(14px) 폰트 크기 조정\n- 인라인 스타일을 dashboard.css로 이전 및 중앙 집중화\n- 불필요한 아이콘 제거 및 UI 정돈
2026-06-11 10:37:33 +09:00
207acbdecb fix: LocationView 레이아웃 안정화 및 UI 개선
- 페이지네이션 버튼을 상세위치 옆으로 이동\n- 지도 이미지 밀림 현상 방지를 위한 정렬 방식 수정 및 동기화 로직 보강\n- 상단 메뉴에서 구버전 현황 버튼 제거
2026-06-11 10:08:43 +09:00
164568843b feat: LocationView 고도화 - 지도 클릭 시 사이드바 상세 정보 표시 및 구역 필터링 구현 2026-06-11 09:47:57 +09:00
29c7d5f3d8 fix: 서버 오류 수정 2026-06-10 17:53:52 +09:00
ce1ed40561 feat: 하드웨어 자산 관리 고도화 및 자동 이력 시스템 구축
- 통합 원격 접속 정보 UI 구현 (IP/MAC 및 계정 정보 통합)
- 서버 측 스냅샷 비교 기반 자동 이력(Log) 생성 로직 도입
- 타임라인 UI 개선 (이벤트별 색상 뱃지 및 변동 사항 강조)
- 자산 상세 필드 확장 (서비스 구분, 용도 등)
- 테스트 데이터 생성기 및 이력 계획서 추가
2026-06-10 09:51:03 +09:00
525dbd77d4 feat(nav): restrict admin menu to only display dashboard tab 2026-06-10 09:22:10 +09:00
35c5b1e0fa feat(nav): hide dashboard and admin settings from practitioner role 2026-06-10 09:20:37 +09:00
b87ca2854b feat(role): enable admin login, default Admin to Dashboard, and default Practitioner to Server list 2026-06-10 09:13:46 +09:00
2f88a0fae7 Merge origin/main into HW_Dashboard and resolve conflicts 2026-06-10 09:13:23 +09:00
9a2c35e652 feat(dashboard): update charts and styling on HW_Dashboard 2026-06-10 09:12:29 +09:00
25ebaf4685 refactor: rename asset_network to asset_remote
- DB 테이블명 변경 마이그레이션 스크립트 추가 (migrate_v5_rename_remote.js)

- Backend (server.js): 쿼리 및 매핑 로직을 asset_remote 및 remotes 속성으로 업데이트

- Frontend (HWModal.ts): 폼 필드와 데이터 바인딩을 remotes로 일괄 수정

- 유틸리티 스크립트의 레퍼런스 일괄 업데이트
2026-06-09 18:44:53 +09:00
2b9c965c91 feat: 동적 디스크 확장 기능 및 하드웨어 카테고리 필터링 고도화 2026-06-09 16:29:54 +09:00
4b408b0640 feat: HW 모달 UI 고도화 및 자산 분류 체계 개편 2026-06-09 13:56:05 +09:00
3ab587d342 feat: DB V3 정규화 및 용도 기반 동적 UI 구현
- 백엔드: asset_core(마스터), asset_spec(사양), asset_volume(스토리지), asset_location(위치), asset_network(네트워크/원격) 5개 테이블로 V3 정규화 완료

- 백엔드: /api/assets/master 단일 엔드포인트로 통합 및 서브쿼리 최적화를 통한 UI 하위 호환성 유지

- 백엔드: 저장 로직(save) V3 스키마 분산 저장 및 cascade 기반 삭제 로직 적용

- 프론트엔드(HWModal): '현 용도(current_role)' 필드 추가 및 서버/개인용에 따른 네트워크/위치 섹션 동적 렌더링 구현

- 프론트엔드(state): 분산된 API 호출을 단일 호출로 통합하여 렌더링 성능 최적화

- 레거시 백업 파일 및 불필요한 구형 테이블 완벽 정리 완료
2026-06-08 17:58:48 +09:00
3b9b2ea598 feat: 자산번호 4자리 일련번호 확장 및 날짜 기반 생성 로직 추가
- 백엔드(server.js): 자산번호 자동 생성 시 구매일자(YYYYMM)를 파싱하여 [접두사]-[YYYYMM]-[0000] 형태로 4자리 일련번호를 부여하도록 로직 전면 수정
- 프런트엔드(HWModal.ts): 자산번호 생성 API 호출 시 사용자가 입력한 구매일자 데이터를 파라미터로 함께 전송하도록 연동
- 전체 DB 및 로컬 마스터 데이터의 4자리 일련번호 및 날짜 복구 마이그레이션 반영
2026-06-08 15:18:39 +09:00
05c565552a feat: 자산 현황 고도화 및 데이터 표준화 작업 완료
- UI 개선: 모든 아이콘/이모지 제거(미니멀리즘), 목록 행 하이라이트 추가, 요약 레이아웃 최적화
- 경고 시스템: 위치 부적절/형식 부적절 사유별 세분화 및 상단 통계 배지 적용
- 정보 강화: 우측 패널 '상세 보기' 버튼 복구 및 '자산 유형' 정보 추가 노출
- 표준화: 위치명(기술개발센터, 한맥빌딩) 및 자산번호 접두사(STO/NAS/DAS -> DSS/STM) 통합
- 데이터: realServerData.ts 및 SharedData.ts 내 유형/접두사 표준 체계 전면 반영
- 레이아웃: 헤더 역할 스위처 및 가이드 버튼 일렬 정렬 수정
2026-06-08 11:40:27 +09:00
2ec9261c03 feat: 자산 현황 레이아웃 개선 및 위치 정보 가독성 최적화
- 박스형 디자인 배제 및 선 기반의 미니멀 레이아웃 적용
- 목록 클릭 시 우측 패널에 배치도 및 위치 마커 즉시 표시
- 사진 비율 유지 및 좌표 정밀 보정 (onload/resize 로직 도입)
- 총 보유 자산 통계에 외부(운영)/내부(테스트) 대수 세부 표시 추가
- 빌드 오류 수정을 위한 구문 정리
2026-06-08 09:44:15 +09:00
06f3baaa58 feat: 대시보드 및 자산현황 레이아웃 개편 및 디자인 복원
- 자산현황 대시보드의 그래프를 제거하고 표와 상세정보 패널(5:5 비율)로 레이아웃 개편
- 표에서 '비고' 컬럼을 제거하고 '담당자(정)', '담당자(부)' 컬럼으로 교체 및 너비 조정
- 이중 필터(위치 -> 상세위치) 도입으로 필터링 기능 강화
- 상세정보 패널의 사진 영역을 Flexbox로 최적화하여 위아래 잘림 현상 원천 차단
- 모달창 내 '수정 모드' 폰트 색상을 디자인 가이드(var(--color-dahong))에 맞게 붉은 계열로 원상 복구 및 누락 변수 추가
- ListFactory.ts의 ASSET_SCHEMA.SERVICE_TYPE 참조 시 발생하던 TypeError 픽스
2026-06-05 18:01:26 +09:00
eead43837d feat: PC 맞춤형 대시보드 구현 및 자산 현황 레이아웃 최적화
- PC 자산 관리 화면에 유형별(공용/서버/개인) 통계 및 차트 적용
- 자산 현황 대시보드의 위치 분류 체계 통일 (센터/IDC/한맥빌딩)
- 하단 요약 표의 자산번호 컬럼을 비고(Memo)로 교체 및 말줄임표 적용
- 차트 크기 확대 및 네비게이션 메뉴 레이아웃 안정화
- ListFactory.ts 내 formatInline 미정의 오류 수정
2026-06-05 10:51:29 +09:00
46422e8544 cleanup: remove database migration and utility scripts 2026-06-02 14:44:45 +09:00
a30f99f0ad feat: improve asset code generation and re-sequence assets by year
- Enhanced backend asset code generation logic to handle multiple tables
- Integrated asset code generation button in HWModal
- Included utility scripts for asset code migration and DB synchronization
- Resolved issues with missing purchase dates and duplicate asset codes
2026-06-02 14:40:06 +09:00
34d99dc4b6 feat: 서버 상세 모달 리소스 중심 개편 및 사양 컬럼 제외 2026-06-02 10:29:50 +09:00
bb859dddfc temp: save local progress before merge 2026-06-02 10:23:18 +09:00
9e8ab11f99 feat: implement role-based entry and navigation enhancements
- Replace credential login with Admin/Practitioner role selection
- Add role-switcher toggle in header with automatic reversion for Admin mode
- Implement immediate return to role selection via system logo click
- Integrate role state management into global app state
2026-06-01 17:56:22 +09:00
19d4222470 Merge branch 'main' into login 2026-06-01 16:52:17 +09:00
db5c7a96a6 fix: restore map editor layout and event binding logic 2026-06-01 16:34:57 +09:00
7d3d5ef281 feat: implement initial login UI and entry logic 2026-06-01 16:23:23 +09:00
9cd5d59bf8 refactor: complete modal class-based architecture, design system integration, and map editor modularization 2026-06-01 14:57:07 +09:00
590ddd0e85 feat: enhance map editor, refine location view, and update image assets
- Map Editor: Add box numbering (drawing/placed) and set default file
- Location View: Refine mouse interaction in view mode (readonly)
- Assets: Add MDF room support and update server room directory structure
- Backend: Add map configuration API for real-time saving
2026-06-01 14:00:45 +09:00
bf7fb0ffe6 refactor(ui): unify 14 list views into a single ListFactory component
- ListFactory.ts를 생성하여 중복되는 테이블 생성, 정렬, 필터 로직을 공통 컴포넌트화

- 14개의 ListView.ts 파일들을 ListFactory를 호출하는 설정 객체 형태로 리팩토링

- TypeScript 컴파일 에러(타입 불일치 및 누락된 속성) 수정 완료
2026-05-26 19:47:01 +09:00
2c67037fc4 refactor: cleanup temp files, centralize API URL, and dynamic routing
- 불필요한 마이그레이션 스크립트, JSON 덤프, 백업 폴더 일괄 삭제

- 프론트엔드 API_BASE_URL 상수 도입 및 하드코딩된 API 엔드포인트 통합

- 백엔드(server.js) GET/POST 라우팅 구조를 Map 기반 동적 라우팅으로 리팩토링

- 미사용 dummyDataGenerator 제거
2026-05-26 19:37:34 +09:00
b2713a142d feat: enhance HW modal layout and Server list view columns
- 상세 모달 레이아웃 개선: 모델명과 메인보드 동일 행 배치, 중복 메인보드 필드 제거

- OS 컬럼 스키마 매핑 및 상세 모달 입력 폼 추가

- 모든 하드웨어(서버 포함)에서 HDD 1~4 노출되도록 pc-only 속성 제거

- 서버 리스트 뷰 레이아웃 개선: 자산유형(asset_type) 컬럼 추가 및 너비 조정

- 서버 리스트 모델/메인보드 통합 컬럼 노출 로직 개선 (model_name 우선 표시)

- 자산코드 일괄 재부여 스크립트(batch_reformat_codes.js) 추가 및 유니크 제약조건 회피 로직 반영
2026-05-26 19:26:44 +09:00
82bbe85e23 feat: migrate ServerPC data to asset_pc, enhance filters with location, and standardize page headers
- 서버PC 자산을 asset_pc 테이블로 통합 마이그레이션 및 스키마 확장 (위치, IP 정보 복구 완료)

- 하드웨어 자산 페이지의 구매법인 필터를 자산위치 필터로 교체 및 동적 데이터 바인딩 적용

- 모든 자산 리스트 페이지 상단에 설명(Description) 필드 추가 및 헤더 표준화

- 상세 모달 내 삭제 버튼 기능 구현 및 서버PC 용도 필드 노출 오류 수정

- 현 사용조직 필터 리스트가 비어있던 DOM 셀렉터 버그 수정
2026-05-26 17:33:03 +09:00
d34ebb8500 feat: restructure navigation, customize list columns, and move action buttons to search bar
1. Restructured navigation hierarchy (Hardware, Software, Ops Support, etc.).
2. Customized table columns for all asset categories according to new specs.
3. Moved Template/Upload/Export/Add buttons to search bar with layout optimization.
4. Hidden Asset Code and Previous User from list views (Modal only).
5. Added Current/Previous User and detailed PC spec fields (GPU, HDD3/4).
2026-05-20 14:34:07 +09:00
2af79cdad3 refactor: integrate software assets into unified schema and optimize backend API 2026-04-30 09:34:29 +09:00
68cb5f9767 Fix: Excel upload logic, field mapping for servers, and date format synchronization 2026-04-27 11:12:20 +09:00
8f0508a7d0 Implement global table sorting, dashboard UI enhancements, and secret cloud access 2026-04-27 09:30:47 +09:00
171bcc772b feat: setup Filter branch and apply software management fixes 2026-04-27 09:11:22 +09:00
256 changed files with 37950 additions and 19081 deletions

6
.env Normal file
View File

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

View File

@@ -9,6 +9,17 @@
- 기존 동작 방식과 성능을 기준(Baseline)으로 삼고, 수정 후에도 **기존의 모든 기능이 무결하게 유지되는지 반드시 테스트하여 입증**한다.
- 검증 결과를 바탕으로 "무엇을, 왜, 어떻게" 바꿀지 상세 보고 후, 사용자로부터 **'진행시켜'** 승인을 얻은 뒤에만 집행한다.
4. **선보고 후승인**: 모든 기능 수정 및 코드 변경 전에는 예상 방안을 먼저 보고하고 승인 절차를 거친다.
5. **DB 삭제 및 초기화 절대 엄금 (Strict DB Deletion Policy)**:
- 어떠한 경우에도 `DELETE`, `DROP`, `TRUNCATE` 등 데이터를 삭제하거나 테이블을 초기화하는 작업은 사전에 사용자에게 상세 사유를 보고하고 **명시적 승인**을 얻은 후에만 시행한다.
- 기존 데이터의 가치를 최우선으로 하며, 작업 전 백업 여부를 반드시 확인한다.
6. **REDGREENRefactor 개발 원칙**:
- 모든 기능 개발과 버그 수정은 **RED → GREEN → Refactor** 순서로 진행한다.
- **RED**: 요구사항을 명확히 표현하는 테스트를 먼저 작성하고, 해당 테스트가 기능 미구현 또는 결함으로 인해 실패하는지 확인한다.
- **GREEN**: 실패한 테스트를 통과시키는 데 필요한 최소한의 코드만 구현하며, 불필요한 기능 추가나 구조 변경을 하지 않는다.
- **Refactor**: 관련 테스트와 기존 테스트가 모두 통과하는 상태에서만 중복 제거, 명칭 개선, 책임 분리 등 코드 구조를 개선하며 동작은 변경하지 않는다.
- 각 단계가 끝날 때마다 관련 테스트와 기존 기능의 회귀 여부를 검증한다.
- 테스트 작성이 현실적으로 불가능한 경우에는 그 사유와 대체 검증 방법을 먼저 보고하고 승인을 받은 후 진행한다.
- 본 원칙을 적용할 때에도 기존의 **선보고 후승인****외과 수술식 수정** 규칙을 준수한다.
---
@@ -28,29 +39,8 @@
### 🎨 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).
👉 **[디자인 가이드 바로가기 (design_rule.md)](./design_rule.md)**
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열 그리드 시스템을 권장하며, 하단 우측에 액션 버튼(닫기, 저장 등)을 배치합니다.

File diff suppressed because it is too large Load Diff

View File

@@ -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>

View File

@@ -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"
}
}

View File

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

View File

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

View File

@@ -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();
}
});
}

View File

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

View File

@@ -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);
}
}

View File

@@ -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();
}

View File

@@ -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);
}
}

View File

@@ -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();
}

View File

@@ -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: [] };
}

View File

@@ -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);
});
}

File diff suppressed because it is too large Load Diff

View 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);
}

View File

@@ -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);

View File

@@ -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"
}
]

View File

@@ -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; }

View File

@@ -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;
}

View File

@@ -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();
}

View File

@@ -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;
}

View File

@@ -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열 그리드 시스템을 권장하며, 하단 우측에 액션 버튼(닫기, 저장 등)을 배치합니다.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 195 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

View File

@@ -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>

View File

@@ -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 등)를 정규화하여 관리 효율을 극대화한다.

View File

@@ -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);
}

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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}>&times;</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

View File

@@ -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">&times;</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;

View File

@@ -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"
}
];

View File

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

View File

@@ -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%;
}

View File

@@ -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>,
)

View File

@@ -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번,,,,,,,,,,,,,,,,,,,,,,,,,
1 IDC
2 서버목록 한맥 LMS 서버 mdf
3 회사 서버번호 구분 비고 설치위치 담당자 IP 주소 원격접속 모니터링 여부 서버 이름 ID 일치 여부, 전 서버 이름 제조사 및 모델명 OS CPU RAM Storage1 Storage2 Storage3 계산서 삼안 XR플래그십 스토리지 20250414
4 IP IP2 접속도구 아이디 비빌번호 장헌 스토리지, 서버 mdf 추정
5 한맥 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
6 Remote Util 211.206.127.70 1234아이티!
7 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
8 삼안 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 추정 삼안
9 Remote Util 118.220.172.237 1234아이티!
10 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
11 Remote Util 678-605-383-130 1234아이티!
12 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
13 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
14 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
15 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 구매교체 삼안
16 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
17 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 설치 삼안
18 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 설치 삼안
19 한라 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
20 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
21 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
22 이전 : 하수도자산 소스+프로그램 현재 : 큰길 서비스용 xampp+ PostgreSQL, BEPs 원격데스크탑 administrator Hanmac2141!% src775d3e5df
23 장헌 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
24 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 추정 장헌
25 원격데스크탑 Administrator Hanmac2141!
26 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
27 원격데스크탑 User Hanmac2141!
28 (주)장헌 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
29 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
30 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 추정 장헌
31 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
32 바론 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 추정 바론
33 현타 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
34
35
36
37 스토리지 목록
38 회사 서버번호 구분 비고 설치위치 담당자 IP 주소 원격접속 모델명 용량
39 접속도구 아이디 비빌번호
40 삼안 sa-das-001 Satis01, Satis02 광케이블 연결 (물리연결) 서관 205번
41 sa-nas-001 인트라넷 백업 스토리지 서관 203번 (IDC) 118.220.172.246 원격 administrator sg11707808 Promiss R Series 36TB
42 sa-nas-002 성과품 스토리지 서관 205번 (IDC) 118.220.172.248 원격 administrator sg11707808 ENC_3U_16BAY_D // SEAGATE ST2000NM0045 23TB 20190603 추정 삼안
43 매니지먼트 접속 확인 불가 (콘솔 연결 후 페이지 오픈 필요) (매니지먼트) 118.220.172.247 원격 - -
44 sa-nas-003 성과품 백업 스토리지 서관 202번 (IDC) 118.220.172.241 원격 administrator saman1! Promiss R Series 48TB 20250313 삼안
45 (매지니먼트) 118.220.172.240 원격 admin0 Root1234
46 한라 hl-das-001 파일서버 정보 없음(접속 불가) 동관 54번 20190701 추정 한라 (한라 파일서버도 동일일자 추정)
47 hl-das-002 동관 54번

View File

@@ -1,58 +0,0 @@
# ITAM 프로젝트 브랜치별 변경 사항 및 이슈 정리
본 문서는 `setting` 브랜치를 기준으로 `SW_Table`, `Operation_Table`, `Upload` 브랜치의 주요 변경 사항을 정리한 내용입니다. Gitea 이슈 등록 시 참고하시기 바랍니다.
---
## 1. [SW_Table] 소프트웨어 자산 관리 고도화 및 대시보드 강화
**제목:** `[SW_Table] 소프트웨어 자산 관리 고도화 및 대시보드 강화`
### 주요 변경 사항
- **SW 상세 모달 리팩토링**
- 구독형, 영구형, 클라우드 자산 유형에 따른 동적 필드 전환 기능 구현
- 자산 유형 명칭 일원화 및 필드 매핑 로직 개선
- **데이터 표준화 및 확장**
- 시작일/만료일 'yyyy-mm-dd' 형식 통일 및 데이터 일관성 확보
- 클라우드 자산 통합 관리 및 관련 스키마 확장
- **대시보드 분석 기능 강화**
- 월별 누적 비용 분석 그래프 도입
- 카테고리별 자산 보유 현황 및 비용 통계 시각화 고도화
- **사용자 관리 개선**
- SW 사용자 할당 및 이력 관리 기능 강화 (`SWUserModal` 도입)
---
## 2. [Operation_Table] 운영 서비스 도메인 관리 모듈 및 UI 최적화
**제목:** `[Operation_Table] 운영 서비스 도메인 관리 모듈 및 UI 최적화`
### 주요 변경 사항
- **도메인 관리 모듈 신규 도입**
- `ops_domain_assets` 테이블 신규 생성 및 서버 API 연동
- 유형(호스팅/SSL/도메인/네임서버), 법인, 서비스명, 관리도메인 등 상세 필드 관리
- **도메인 전용 UI 구현**
- 도메인 전용 등록/수정 모달 및 리스트 뷰 인터페이스 구축
- **사용자 경험(UX) 및 스타일 최적화**
- 상단바와 본문 사이 간격 조정 (여백 최적화)
- 전역 스타일 가이드에 맞춘 UI 레이아웃 정밀 조정
- **기능 통합**
- SW_Table의 모든 고도화 사항을 포함하여 운영 환경에 맞춰 통합 완료
---
## 3. [Upload] 엑셀 대량 업로드 워크플로우 및 자산코드 자동 생성
**제목:** `[Upload] 엑셀 대량 업로드 워크플로우 및 자산코드 자동 생성`
### 주요 변경 사항
- **통합 엑셀 업로드 시스템**
- 9개 자산 카테고리(HW, SW, 클라우드, 도메인)를 아우르는 통합 엑셀 양식 파싱 엔진 구현
- **업로드 데이터 검토 프로세스 (`UploadPreviewModal`)**
- 업로드 전 데이터를 미리 확인하고 검증할 수 있는 중간 검토 모달 도입
- 시트별 데이터 요약 및 상세 내역 확인 기능 제공
- **자산코드 일괄 생성 기능**
- 하드웨어 자산 대상, 카테고리별 접두사 및 구매연월 기반 자동 번호 부여 시스템 구축
- 서버 API와 연동된 중복 방지 및 자동 증분 로직 적용
- **안정성 및 네트워크 최적화**
- 대량 데이터 처리를 위한 배치 저장 API(Port 3000) 연동 및 절대 경로 통신 적용

File diff suppressed because it is too large Load Diff

211
build/pc_agent/EXE-00.toc Normal file
View 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
View 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

Binary file not shown.

1193
build/pc_agent/PYZ-00.toc Normal file

File diff suppressed because it is too large Load Diff

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
build/pc_agent/pc_agent.pkg Normal file

Binary file not shown.

View 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)

File diff suppressed because it is too large Load Diff

View File

@@ -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!');

View File

@@ -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);
});

View File

@@ -1,177 +0,0 @@
import mysql from 'mysql2/promise';
import dotenv from 'dotenv';
dotenv.config();
const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
async function initDB() {
const connection = await mysql.createConnection({
host: DB_HOST,
user: DB_USER,
password: DB_PASS,
database: DB_NAME,
port: parseInt(DB_PORT || '3306'),
multipleStatements: true
});
console.log('🔄 DB 초기화 시작 (영문 표준 스키마 적용)...');
const tablesToDrop = [
'pc_assets', 'server_assets', 'storage_assets', 'equip_assets', 'mobile_assets',
'sw_sub_assets', 'sw_perm_assets', 'cloud_assets', 'sw_users', 'asset_logs'
];
for (const table of tablesToDrop) {
await connection.query(`DROP TABLE IF EXISTS ${table}`);
}
const createHardwareTable = (tableName, comment) => `
CREATE TABLE ${tableName} (
id VARCHAR(50) PRIMARY KEY,
corp VARCHAR(100),
asset_code VARCHAR(100),
purchase_date VARCHAR(50),
type VARCHAR(50),
detail_purpose VARCHAR(50),
purpose VARCHAR(255),
details TEXT,
current_org VARCHAR(255),
prev_org VARCHAR(255),
user_name VARCHAR(100) COMMENT '사용자',
location VARCHAR(255),
manager_main VARCHAR(100),
manager_sub VARCHAR(100),
ip_address VARCHAR(100),
remote_tool VARCHAR(100),
server_id VARCHAR(100),
server_pw VARCHAR(100),
model_name VARCHAR(255),
mainboard VARCHAR(255) COMMENT '메인보드',
os VARCHAR(100),
cpu VARCHAR(255),
ram VARCHAR(100),
gpu VARCHAR(100),
storage1 VARCHAR(255),
storage2 VARCHAR(255),
storage3 VARCHAR(255),
monitoring VARCHAR(100),
price VARCHAR(100),
remarks TEXT,
storage_location VARCHAR(255),
status VARCHAR(50),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`;
await connection.query(createHardwareTable('pc_assets', 'PC'));
await connection.query(createHardwareTable('server_assets', 'Server'));
await connection.query(createHardwareTable('storage_assets', 'Storage'));
await connection.query(createHardwareTable('equip_assets', 'Equipment'));
await connection.query(createHardwareTable('mobile_assets', 'Mobile'));
await connection.query(`
CREATE TABLE sw_sub_assets (
id VARCHAR(50) PRIMARY KEY,
corp VARCHAR(100) COMMENT '구매법인',
category VARCHAR(100) COMMENT '분야',
dept VARCHAR(100) COMMENT '부서',
product_name VARCHAR(255) COMMENT '제품명',
license_type VARCHAR(100) COMMENT '라이선스 유형',
quantity INT COMMENT '수량',
price VARCHAR(100) COMMENT '금액',
purchase_date VARCHAR(50) COMMENT '구매일',
start_date VARCHAR(50) COMMENT '시작일',
expiry_date VARCHAR(50) COMMENT '만료일',
vendor VARCHAR(255) COMMENT '납품업체',
remarks TEXT COMMENT '비고',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`);
await connection.query(`
CREATE TABLE sw_perm_assets (
id VARCHAR(50) PRIMARY KEY,
corp VARCHAR(100) COMMENT '구매법인',
category VARCHAR(100) COMMENT '분야',
dept VARCHAR(100) COMMENT '부서',
product_name VARCHAR(255) COMMENT '제품명',
license_key VARCHAR(255) COMMENT '라이선스 키',
quantity INT COMMENT '수량',
price VARCHAR(100) COMMENT '금액',
purchase_date VARCHAR(50) COMMENT '구매일',
start_date VARCHAR(50) COMMENT '시작일',
expiry_date VARCHAR(50) COMMENT '만료일',
vendor VARCHAR(255) COMMENT '납품업체',
remarks TEXT COMMENT '비고',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`);
await connection.query(`
CREATE TABLE cloud_assets (
id VARCHAR(50) PRIMARY KEY,
platform_name VARCHAR(100),
corp VARCHAR(100),
dept VARCHAR(100),
product_name VARCHAR(255),
account_name VARCHAR(255),
pay_method VARCHAR(100),
pay_day VARCHAR(50),
card_num VARCHAR(100),
monthly_fee VARCHAR(100),
remarks TEXT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`);
await connection.query(`
CREATE TABLE sw_users (
id INT AUTO_INCREMENT PRIMARY KEY,
sw_id VARCHAR(50),
corp VARCHAR(100),
dept VARCHAR(100),
position VARCHAR(50),
user_name VARCHAR(100),
usage_period VARCHAR(100),
doc_name VARCHAR(255),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`);
await connection.query(`
CREATE TABLE asset_logs (
id INT AUTO_INCREMENT PRIMARY KEY,
asset_id VARCHAR(50),
log_date VARCHAR(50),
log_user VARCHAR(100),
details TEXT,
cost DECIMAL(15,2) DEFAULT 0,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`);
await connection.query(`
CREATE TABLE ops_domain_assets (
id VARCHAR(50) PRIMARY KEY,
type VARCHAR(50) COMMENT '유형',
corp VARCHAR(100) COMMENT '법인',
service_name VARCHAR(255) COMMENT '서비스명',
domain_name VARCHAR(255) COMMENT '관리도메인',
start_date VARCHAR(50) COMMENT '시작일',
expiry_date VARCHAR(50) COMMENT '만료일',
price VARCHAR(100) COMMENT '금액',
manager_main VARCHAR(100) COMMENT '담당자',
manager_sub VARCHAR(100) COMMENT '담당자(부)',
remarks TEXT COMMENT '비고',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`);
console.log('✅ 모든 테이블이 영문 표준 스키마로 재생성되었습니다.');
await connection.end();
}
initDB().catch(err => {
console.error('❌ DB 초기화 실패:', err);
process.exit(1);
});

View File

@@ -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",
"이준하 차장"
]
]
}

View 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단계: 누적 데이터를 활용한 성능 분석 및 월간 운영 보고서 자동화

View 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의 자가 점검 기능과 관리자 추적 기능을 포함함으로써
규정 준수와 운영 효율성을 동시에 확보할 수 있습니다.

View File

@@ -0,0 +1,379 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=device-width, initial-scale=1.0">
<title>PC 사양 대시보드 시각화 개선 기획서</title>
<!-- Google Fonts: Pretendard 대체용 Outfit & Noto Sans KR -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
--primary: #4F46E5;
--primary-light: #EEF2FF;
--secondary: #10B981;
--secondary-light: #D1FAE5;
--text-dark: #0F172A;
--text-muted: #64748B;
--border-color: #E2E8F0;
--bg-light: #F8FAFC;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Outfit', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--text-dark);
background-color: #FFFFFF;
line-height: 1.6;
letter-spacing: -0.02em;
padding: 2rem 1.5rem;
}
.container {
max-width: 900px;
margin: 0 auto;
}
/* Header Styling */
header {
border-bottom: 2px solid var(--text-dark);
padding-bottom: 1.5rem;
margin-bottom: 2.5rem;
}
.doc-category {
font-size: 0.85rem;
font-weight: 700;
color: var(--primary);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.5rem;
}
h1 {
font-size: 2.25rem;
font-weight: 900;
color: var(--text-dark);
line-height: 1.2;
}
.meta-info {
display: flex;
gap: 1.5rem;
margin-top: 1rem;
font-size: 0.85rem;
color: var(--text-muted);
}
.meta-info span strong {
color: var(--text-dark);
}
/* Section Styling */
section {
margin-bottom: 3rem;
}
h2 {
font-size: 1.4rem;
font-weight: 800;
color: var(--text-dark);
border-bottom: 1px solid var(--border-color);
padding-bottom: 0.5rem;
margin-bottom: 1.25rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
h2::before {
content: '';
display: inline-block;
width: 4px;
height: 18px;
background-color: var(--primary);
border-radius: 2px;
}
p {
font-size: 1rem;
color: #334155;
margin-bottom: 1rem;
text-align: justify;
}
/* List & Card Styling */
ul {
list-style-position: inside;
margin-left: 0.5rem;
margin-bottom: 1.5rem;
}
li {
margin-bottom: 0.5rem;
color: #334155;
}
.spec-card {
background-color: var(--bg-light);
border-left: 4px solid var(--primary);
border-radius: 4px;
padding: 1.25rem;
margin: 1.5rem 0;
}
.spec-card h3 {
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--text-dark);
}
/* Table Styling */
.table-container {
width: 100%;
overflow-x: auto;
margin: 1.5rem 0;
border: 1px solid var(--border-color);
border-radius: 8px;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
text-align: left;
}
th {
background-color: var(--bg-light);
font-weight: 700;
color: var(--text-dark);
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border-color);
}
td {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border-color);
color: #334155;
}
tr:last-child td {
border-bottom: none;
}
.badge {
display: inline-block;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 700;
text-align: center;
}
.badge-primary {
color: var(--primary);
background-color: var(--primary-light);
}
.badge-secondary {
color: var(--secondary);
background-color: var(--secondary-light);
}
/* Highlight box */
.note-box {
background-color: #FFFBEB;
border: 1px solid #FCD34D;
border-radius: 6px;
padding: 1rem;
margin: 1.5rem 0;
font-size: 0.95rem;
color: #92400E;
}
.note-box strong {
color: #78350F;
}
footer {
border-top: 1px solid var(--border-color);
padding-top: 1.5rem;
margin-top: 4rem;
text-align: center;
font-size: 0.8rem;
color: var(--text-muted);
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="doc-category">기획 명세서 / Product Specification</div>
<h1>PC 사양 대시보드 시각화 개선 기획서</h1>
<div class="meta-info">
<span>기획부서: <strong>IT자산관리 태스크포스(TF)</strong></span>
<span>최종 수정일: <strong>2026. 05. 28</strong></span>
<span>문서 버전: <strong>v1.1 (실제 엑셀 데이터 반영)</strong></span>
</div>
</header>
<!-- 1. 개요 및 목적 -->
<section>
<h2>기획 개요 및 목적</h2>
<p>본 기획은 법인별/직무별 PC 자산 사양 현황의 시각적 피로도를 낮추고 데이터 전달력을 고도화하기 위한 개선 작업을 목적으로 합니다. 기존 대시보드 레이아웃의 비정형 비율을 재정립하고, 평균 점수와 권장 점수의 비교 방식을 '다중 막대' 형태에서 <strong>'혼합형(막대 + 꺾은선) 차트'</strong>로 변경하여 대조 직관성을 극대화합니다.</p>
</section>
<!-- 2. 주요 개선 사항 -->
<section>
<h2>주요 개선 내역</h2>
<div class="spec-card">
<h3>① 가족사별 PC 사양 현황 레이아웃 고도화</h3>
<ul>
<li><strong>가로 비율 정밀 제어 (1:2)</strong>: 평균 점수 리스트와 막대그래프의 가로 폭 비율을 <code>1 : 2</code>로 엄격하게 고정하여 반응형 레이아웃 환경에서도 깨짐 없는 균형미를 제공합니다.</li>
<li><strong>가독성 개선</strong>: 가족사 텍스트 크기를 <code>0.95rem</code>, 평균 사양 점수 텍스트 크기를 <code>1.05rem</code>으로 키우고 세로 행간 여백을 확보해 가시성을 향상시켰습니다.</li>
</ul>
</div>
<div class="spec-card">
<h3>② 직무별 PC 사양 평균 및 권장 점수 혼합 시각화</h3>
<ul>
<li><strong>혼합형 차트(Mixed Chart) 구성</strong>: 직무별 PC 사양 평균 점수는 <span class="badge badge-primary">막대(Bar)</span> 그래프로, 권장 PC 사양 점수는 그 위를 관통하는 <span class="badge badge-secondary">선(Line)</span> 그래프로 표현합니다.</li>
<li><strong>레이어 정렬 우선순위 적용</strong>: 차트 정의 시 권장 점수선(Line)이 평균 점수막대(Bar) 뒤에 가리지 않고 항상 맨 앞에 위치하도록 렌더링 우선순위(<code>order</code> 속성)를 명확히 지정합니다.</li>
<li><strong>정렬 원복</strong>: 수동 정렬을 지양하고, 직무별 실제 평균 PC 사양 점수가 높은 순으로 자동 내림차순 정렬되도록 하여 가장 자연스러운 시각화를 구축합니다.</li>
</ul>
</div>
</section>
<!-- 3. 데이터 정의 -->
<section>
<h2>직무별 평균 및 권장 사양 점수 스펙</h2>
<p>실제 PC 자산 데이터(CPU 및 RAM 점수 연산 결과)와 관리자의 권장 기준선이 아래 명시된 대소 조건 관계를 완벽히 만족하도록 더미 데이터 및 초기 권장 스펙 기준을 재정의했습니다.</p>
<div class="note-box">
<strong>대소 관계 정렬 순서 (실제 평균 점수 기준):</strong><br>
AI 개발자 ➔ 편집 디자이너 ➔ 3D 디자이너 ➔ UXUI 디자이너 ➔ 3D 개발자 ➔ 프로그램 개발자 ➔ BIM모델러 ➔ 엔지니어 ➔ 웹 개발자 ➔ 기획자 순서로 실제 평균 점수 순위가 자동 정렬되어 시각화됩니다. (감리원은 실제 자산 데이터 부재로 비교군에서 제외)
</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>정렬 순위</th>
<th>직무명</th>
<th>실제 평균 사양 점수 (Bar)</th>
<th>기본 권장 사양 점수 (기준)</th>
<th>대소 관계 평가</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><strong>AI 개발자</strong></td>
<td>88.0 점</td>
<td>95 점</td>
<td><span class="badge badge-secondary">미달 (교체 요망)</span></td>
</tr>
<tr>
<td>2</td>
<td><strong>편집 디자이너</strong></td>
<td>80.2 점</td>
<td>75 점</td>
<td><span class="badge badge-secondary">권장 스펙 충족</span></td>
</tr>
<tr>
<td>3</td>
<td><strong>3D 디자이너</strong></td>
<td>78.4 점</td>
<td>90 점</td>
<td><span class="badge badge-secondary">미달 (교체 요망)</span></td>
</tr>
<tr>
<td>4</td>
<td><strong>UXUI 디자이너</strong></td>
<td>72.7 점</td>
<td>70 점</td>
<td><span class="badge badge-secondary">권장 스펙 충족</span></td>
</tr>
<tr>
<td>5</td>
<td><strong>3D 개발자</strong></td>
<td>67.8 점</td>
<td>90 점</td>
<td><span class="badge badge-secondary">미달 (교체 요망)</span></td>
</tr>
<tr>
<td>6</td>
<td><strong>프로그램 개발자</strong></td>
<td>67.3 점</td>
<td>80 점</td>
<td><span class="badge badge-secondary">미달 (교체 요망)</span></td>
</tr>
<tr>
<td>7</td>
<td><strong>BIM모델러</strong></td>
<td>62.1 점</td>
<td>75 점</td>
<td><span class="badge badge-secondary">미달 (교체 요망)</span></td>
</tr>
<tr>
<td>8</td>
<td><strong>엔지니어</strong></td>
<td>42.9 점</td>
<td>60 점</td>
<td><span class="badge badge-secondary">미달 (교체 요망)</span></td>
</tr>
<tr>
<td>9</td>
<td><strong>웹 개발자</strong></td>
<td>39.2 점</td>
<td>75 점</td>
<td><span class="badge badge-secondary">미달 (교체 요망)</span></td>
</tr>
<tr>
<td>10</td>
<td><strong>기획자</strong></td>
<td>38.6 점</td>
<td>50 점</td>
<td><span class="badge badge-secondary">미달 (교체 요망)</span></td>
</tr>
<tr>
<td>11</td>
<td><strong>감리원</strong></td>
<td>-</td>
<td>40.0 점</td>
<td><span class="badge badge-secondary">데이터 없음</span></td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- 4. 기술 구현 세부사항 -->
<section>
<h2>기술 구현 세부 사양</h2>
<div class="spec-card" style="border-left-color: var(--secondary);">
<h3>차트 렌더링 옵션 (Chart.js v4.x+)</h3>
<p>평균 PC 사양 점수를 보여주는 데이터셋과 권장 PC 사양 점수를 보여주는 데이터셋을 하나의 Canvas 엘리먼트에 그리되, 레이어 겹침과 시인성을 확보하기 위해 다음 세부 옵션을 바인딩합니다.</p>
<ul>
<li><strong>Average Dataset</strong>: <code>type: 'bar', order: 2, backgroundColor: '#6366F1'</code></li>
<li><strong>Recommended Dataset</strong>: <code>type: 'line', order: 1, borderColor: '#10B981', borderWidth: 3, pointRadius: 4, fill: false</code></li>
<li><strong>정렬 로직</strong>: <code>Object.keys(jobScores).sort((a, b) => jobScores[b].avg - jobScores[a].avg)</code></li>
</ul>
</div>
</section>
<footer>
<p>&copy; 2026 HM ITAM Systems. All rights reserved.</p>
</footer>
</div>
</body>
</html>

View File

@@ -0,0 +1,60 @@
# 자산 이력 누적 관리 시스템 (Cumulative Asset History System) 구현 계획
본 문서는 자산의 라이프사이클(조직, 사용자, 용도, 상태 변동)을 체계적으로 추적하고 누적 관리하기 위한 기술적 설계 및 단계별 구현 계획을 담고 있습니다.
## 1. 목적
- 자산 정보 수정 시 중요 변경 사항을 자동으로 감지하여 이력(Log)화
- 과거부터 현재까지의 변동 사항을 타임라인 형태로 시각화하여 자산 흐름 파악
- 데이터 정합성을 위해 서버 측에서 변경 전/후 스냅샷 비교 방식 채택
## 2. 관리 대상 이력 (Watch Fields)
다음 항목의 변경이 발생할 경우 이력을 자동 생성합니다.
1. **조직 변동**: `current_dept` (현 사용조직) ↔ `previous_dept` 업데이트 포함
2. **사용자 변동**: `user_current` (현 사용자) ↔ `previous_user` 업데이트 포함
3. **용도 변경**: `asset_type`, `current_role` (예: 개인PC -> 공용PC)
4. **상태 변경**: `hw_status` (예: 운영 -> 수리, 재고 -> 폐기 등)
## 3. 기술 설계 (Technical Design)
### A. 데이터베이스 (DB)
- **대상 테이블**: `asset_history`
- **컬럼 구조 활용 및 보완**:
- `asset_id`: 대상 자산 식별자
- `event_type`: 변경 유형 (DEPT_CHANGE, USER_CHANGE, ROLE_CHANGE, STATUS_CHANGE)
- `details`: "상태 변경: 운영 -> 수리" 와 같이 읽기 쉬운 문자열 저장
- `cost`: 관련 비용 발생 시 기록 (수리비 등)
- `log_user`: 변경을 수행한 작업자
- `log_date`: 변경 발생 일시
### B. 백엔드 (Server-side Logic)
- **위치**: `server.js``POST /api/asset/:category/save` 엔드포인트
- **동작 흐름**:
1. **Snapshot**: 인서트/업데이트 수행 전, 기존 DB의 데이터를 `SELECT`하여 메모리에 저장.
2. **Comparison**: 요청된 신규 데이터와 기존 데이터를 필드별로 대조.
3. **Auto-logging**: 변경점이 발견되면 `asset_history` 테이블에 즉시 인서트.
4. **Transaction**: 모든 로그 생성이 자산 저장과 하나의 트랜잭션으로 묶여야 함.
### C. 프론트엔드 (UI/UX)
- **위치**: `HWModal.ts` 우측 `modal-history-area`
- **개선 사항**:
- `renderHistory()` 함수를 고도화하여 이벤트 타입별 아이콘/컬러 적용.
- "이전 값 ➔ 이후 값" 형태의 직관적인 레이아웃 도입.
- 스크롤을 통한 무제한 누적 이력 조회 지원.
## 4. 단계별 구현 로직
### 1단계: 서버 로직 고도화
- `server.js`에 비교 함수(`compareAndLog`) 구현.
- 각 자산 카테고리별 저장 로직에 비교 로직 삽입.
### 2단계: DB 데이터 마이그레이션 (필요시)
- 기존 자산의 `current_dept` 등을 `previous_dept`로 밀어내는 로직 점검.
### 3단계: UI 타임라인 렌더링 개선
- `modal.css`에 이력 전용 스타일(이벤트 뱃지 등) 추가.
- `HWModal.ts`에서 최신 로그를 실시간으로 다시 불러오는 로직 확인.
## 5. 검증 계획
- **자동 감지 테스트**: 상태 변경 후 저장 시 우측 이력에 즉시 한 줄이 추가되는지 확인.
- **다중 변경 테스트**: 조직과 사용자를 동시에 변경했을 때 두 개의 로그가 생성되는지 확인.
- **데이터 무결성**: 수정을 취소하거나 저장 실패 시 로그가 남지 않는지(Transaction) 확인.

48
docs/plans/design_rule.md Normal file
View File

@@ -0,0 +1,48 @@
# 🎨 ITAM 시스템 디자인 가이드 (Design Guide)
본 문서는 ITAM(IT Asset Management System)의 시각적 일관성과 사용자 경험을 유지하기 위한 핵심 디자인 원칙을 정의합니다.
---
### 1. 디자인 철학 (Design Philosophy)
* **Minimalist & Stark**: Vercel 스타일의 극도로 간결하고 현대적인 디자인을 지향합니다.
* **Achromatic Base**: 블랙(#171717)과 화이트를 기본으로 하며, 정보의 구분은 얇은 헤어라인(#ebebeb)을 사용합니다.
* **Fluid & Responsive**: 고정된 픽셀 대신 화면 크기에 비례하여 UI 밀도가 변하는 유동적 스케일링 시스템을 적용합니다.
### 2. 타이포그래피 및 자간 (Typography & Letter-spacing)
* **Font Family**: `Pretendard` 단일 폰트를 사용합니다.
* **Letter-spacing**: 모든 텍스트에 `-0.02em` (-2%) 자간을 적용하여 밀도 있는 가독성을 확보합니다.
* **Typography Scale**:
* **XS**: `clamp(10px, 1.2vmin + 0.2vw, 15px)` - 보조 텍스트
* **SM**: `clamp(12px, 1.4vmin + 0.3vw, 18px)` - 필터, 일반 라벨, 테이블 헤더
* **Base**: `clamp(14px, 1.6vmin + 0.4vw, 22px)` - 본문, 테이블 데이터
* **MD**: `clamp(18px, 2.5vmin + 0.5vw, 30px)` - 섹션 소제목
* **LG**: `clamp(24px, 4vmin + 0.6vw, 48px)` - 페이지 대제목
* **XL**: `clamp(32px, 6vmin + 0.8vw, 72px)` - 핵심 통계 지표
* **Layout Units**:
* **Header Height**: `clamp(50px, 8vmin, 90px)`
* **Base Spacing**: `clamp(0.75rem, 3vmin, 3rem)`
* **Radius**: `clamp(6px, 1.5vmin, 16px)`
### 3. 컬러 팔레트 (Vercel Stark Palette)
* **Primary**: `#171717` (Stark Black) - 텍스트, 주요 버튼, 강조 요소.
* **Secondary**: `#888888` (Mute) - 보조 텍스트, 비활성 아이콘.
* **Border**: `#ebebeb` (Hairline) - 정보 구분선.
* **Background**: `#ffffff` (Canvas), `#fafafa` (Soft), `#f5f5f5` (Soft 2).
* **Accents**: Blue(`#0070f3`), Orange(`#f5a623`), Danger(`#ee0000`).
### 4. 컴포넌트 및 레이아웃 규칙 (Component Rules)
* **Header & Navigation**:
* 상단 1열 통합 바 형태를 유지하며, GNB와 LNB를 동일 라인에 배치하여 공간을 효율적으로 사용합니다.
* **Unified Filter Bar**:
* 검색창과 필터는 상단 타이틀 바로 아래(기존 액션 버튼 라인)까지 올려서 배치합니다.
* **Action Group**: '자산 추가', '부품 마스터' 등의 주요 액션 버튼은 검색창과 같은 라인의 최우측에 정렬합니다.
* **Dashboard**:
* **Single-Screen View**: 1920*1080(또는 1920*919) 해상도에서 스크롤 없이 한 화면에 핵심 정보가 모두 보이도록 최적화합니다.
* **Fixed Charts**: 차트 내부 숫자나 요소에 애니메이션(`animation: false`) 및 플로팅 레이블을 배제하여 정적인 안정성을 확보합니다.
* **Footer**:
* 화면 최하단에 위치하며, 텍스트는 **우측 정렬(Right-aligned)**합니다.
* 상단에 1px 헤어라인 구분선을 가집니다.
* **Security & UX**:
* **Text Selection**: 사용자의 실수에 의한 UI 드래그 방지를 위해 입력창(`input`, `textarea`)을 제외한 전체 영역의 텍스트 선택을 차단합니다.
* **View Toggle**: '서버' 탭 등 특정 탭에서만 '목록보기' 체크박스를 통해 뷰를 전환하며, 그 외 화면은 리스트 중심의 UI를 제공합니다.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 135 KiB

View File

@@ -5,26 +5,21 @@
<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>
<title>한맥가족 자산관리시스템</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">
<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>
<h1>한맥자산관리시스템</h1>
</div>
<!-- Navigation (GNB + LNB in same row) -->
@@ -33,23 +28,18 @@
</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>
<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>
@@ -61,7 +51,7 @@
<!-- Footer -->
<footer class="main-footer">
<p>Powered by BARON Consultant Co,Ltd</p>
<p>&copy; 2026 BARON Consultant Co,Ltd. All rights reserved.</p>
</footer>
</div>

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
label/LabelPrinter.exe Normal file

Binary file not shown.

BIN
label/Newtonsoft.Json.dll Normal file

Binary file not shown.

BIN
label/WebQuery.dll Normal file

Binary file not shown.

4
label/config.ini Normal file
View File

@@ -0,0 +1,4 @@
[PRINT]
FONT=8
LEFT=143
TOP=40

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

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