feat: 엑셀 양식 고도화 및 DB/UI 연동 최적화 (드롭다운, 상세위치, 데이터 정합성)

1. exceljs 도입: 엑셀 파일 내 실제 드롭다운(건물-상세위치 연동) 구현\n2. 업로드 프리뷰: 위치/상세위치 Select Box 전환 및 실시간 동기화\n3. DB 마이그레이션: user_name, mainboard, detail_location 컬럼 자동화\n4. 양식 보강: 시트별 커스텀 유형 적용 및 누락 필드(모델명, 담당자 부, 용도/상세 등) 추가\n5. UI 개선: 편집 폰트 색상(#FF3D00) 고정 및 지능형 레드 박스 강조 로직 적용
2026-04-24 15:35:59 +09:00
246 changed files with 23296 additions and 27017 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,10 +0,0 @@
-node_modules
-dist
-build
-.git
-.gitignore
-.env
-npm-debug.log
-uploads
-*.xlsx
-*.log
--- a/.env.example
+++ b/.env.example
@@ -1,17 +0,0 @@
-# Database Configuration
-DB_HOST=172.16.8.151
-DB_PORT=3306
-DB_USER=itam_admin
-DB_PASS=itam1234
-DB_NAME=itam
-
-# Application Configuration
-NODE_ENV=development
-PORT=3000
-
-# Logging (optional)
-LOG_LEVEL=info
-
-# Security (for production)
-# API_KEY=your_api_key_here
-# JWT_SECRET=your_jwt_secret_here
--- a/.gitea/coverage.json
+++ b/.gitea/coverage.json
@@ -1,7 +0,0 @@
-{
-    "Path": "./backend/coverage.out",
-    "Thresholds": {
-        "baron-sso-backend/internal/handler": 10,
-        "baron-sso-backend/internal/service": 10
-    }
-}
--- a/.gitea/workflows/itam_code_check.yml
+++ b/.gitea/workflows/itam_code_check.yml
@@ -1,47 +0,0 @@
-name: ITAM Code Check
-
-on:
-  push:
-    branches:
-      - Dockerizing
-      - main
-  pull_request:
-  workflow_dispatch:
-
-jobs:
-  build-and-config-check:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Prepare CI env file
-        run: |
-          cat <<'EOF' > .env
-          DB_HOST=127.0.0.1
-          DB_PORT=3306
-          DB_USER=itam_ci
-          DB_PASS=itam_ci_password
-          DB_NAME=itam
-          NODE_ENV=production
-          PORT=3000
-          LOG_LEVEL=info
-          EOF
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: "20"
-          cache: "npm"
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Frontend TypeScript and Vite build
-        run: npm run build
-
-      - name: Validate test compose
-        run: docker compose -f docker-compose.test.yaml config
-
-      - name: Validate prod compose
-        run: docker compose -f docker-compose.prod.yaml config
--- a/.gitea/workflows/itam_docker_build_check.yml
+++ b/.gitea/workflows/itam_docker_build_check.yml
@@ -1,69 +0,0 @@
-name: ITAM Docker Build Check
-
-on:
-  push:
-    branches:
-      - Dockerizing
-      - main
-    paths:
-      - "Dockerfile.frontend.prod"
-      - "Dockerfile.backend.prod"
-      - "docker-compose.prod.yaml"
-      - "docker-compose.test.yaml"
-      - "docker/**"
-      - "src/**"
-      - "server.js"
-      - "package.json"
-      - "package-lock.json"
-      - "vite.config.ts"
-      - "index.html"
-      - "img/**"
-      - "public/**"
-  pull_request:
-    paths:
-      - "Dockerfile.frontend.prod"
-      - "Dockerfile.backend.prod"
-      - "docker-compose.prod.yaml"
-      - "docker-compose.test.yaml"
-      - "docker/**"
-      - "src/**"
-      - "server.js"
-      - "package.json"
-      - "package-lock.json"
-      - "vite.config.ts"
-      - "index.html"
-      - "img/**"
-      - "public/**"
-  workflow_dispatch:
-
-jobs:
-  docker-build-check:
-    runs-on: ubuntu-latest
-    env:
-      DOCKER_BUILDKIT: "1"
-      COMPOSE_DOCKER_CLI_BUILD: "1"
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Prepare CI env file
-        run: |
-          cat <<'EOF' > .env
-          DB_HOST=127.0.0.1
-          DB_PORT=3306
-          DB_USER=itam_ci
-          DB_PASS=itam_ci_password
-          DB_NAME=itam
-          NODE_ENV=production
-          PORT=3000
-          LOG_LEVEL=info
-          EOF
-
-      - name: Build backend production image
-        run: docker build -f Dockerfile.backend.prod -t itam-backend:ci .
-
-      - name: Build frontend production image
-        run: docker build -f Dockerfile.frontend.prod -t itam-frontend:ci .
-
-      - name: Validate production compose with CI env
-        run: docker compose -f docker-compose.prod.yaml config
--- a/.gitea/workflows/itam_production_deploy.yml
+++ b/.gitea/workflows/itam_production_deploy.yml
@@ -1,143 +0,0 @@
-name: ITAM Production Deploy
-
-on:
-  workflow_dispatch:
-    inputs:
-      target_branch:
-        description: "Branch to deploy"
-        required: true
-        default: "main"
-        type: string
-
-jobs:
-  deploy-production:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Setup SSH agent
-        uses: webfactory/ssh-agent@v0.9.0
-        with:
-          ssh-private-key: ${{ secrets.PROD_SSH_PRIVATE_KEY }}
-
-      - name: Validate required production variables
-        env:
-          PROD_HOST: ${{ vars.PROD_HOST }}
-          PROD_USER: ${{ vars.PROD_USER }}
-          PROD_DEPLOY_PATH: ${{ vars.PROD_DEPLOY_PATH }}
-          PROD_GIT_URL: ${{ vars.PROD_GIT_URL }}
-          DB_HOST: ${{ vars.PROD_DB_HOST }}
-          DB_PORT: ${{ vars.PROD_DB_PORT }}
-          DB_USER: ${{ vars.PROD_DB_USER }}
-          DB_PASS: ${{ secrets.PROD_DB_PASS }}
-          DB_NAME: ${{ vars.PROD_DB_NAME }}
-        run: |
-          set -euo pipefail
-          required_keys="PROD_HOST PROD_USER PROD_DEPLOY_PATH PROD_GIT_URL DB_HOST DB_PORT DB_USER DB_PASS DB_NAME"
-          for key in ${required_keys}; do
-            if [ -z "${!key:-}" ]; then
-              echo "::error::Missing required variable or secret: ${key}"
-              exit 1
-            fi
-          done
-
-      - name: Create production env file
-        env:
-          DB_HOST: ${{ vars.PROD_DB_HOST }}
-          DB_PORT: ${{ vars.PROD_DB_PORT }}
-          DB_USER: ${{ vars.PROD_DB_USER }}
-          DB_PASS: ${{ secrets.PROD_DB_PASS }}
-          DB_NAME: ${{ vars.PROD_DB_NAME }}
-          LOG_LEVEL: ${{ vars.PROD_LOG_LEVEL }}
-        run: |
-          set -euo pipefail
-          EFFECTIVE_LOG_LEVEL="${LOG_LEVEL:-info}"
-          cat > .env.deploy <<EOF
-          DB_HOST=${DB_HOST}
-          DB_PORT=${DB_PORT}
-          DB_USER=${DB_USER}
-          DB_PASS=${DB_PASS}
-          DB_NAME=${DB_NAME}
-          NODE_ENV=production
-          PORT=3000
-          LOG_LEVEL=${EFFECTIVE_LOG_LEVEL}
-          EOF
-
-      - name: Deploy to production host
-        env:
-          PROD_HOST: ${{ vars.PROD_HOST }}
-          PROD_USER: ${{ vars.PROD_USER }}
-          PROD_DEPLOY_PATH: ${{ vars.PROD_DEPLOY_PATH }}
-          PROD_BACKUP_ROOT: ${{ vars.PROD_BACKUP_ROOT }}
-          PROD_GIT_URL: ${{ vars.PROD_GIT_URL }}
-          DB_HOST: ${{ vars.PROD_DB_HOST }}
-          DB_PORT: ${{ vars.PROD_DB_PORT }}
-          DB_USER: ${{ vars.PROD_DB_USER }}
-          DB_PASS: ${{ secrets.PROD_DB_PASS }}
-          DB_NAME: ${{ vars.PROD_DB_NAME }}
-          TARGET_BRANCH: ${{ github.event.inputs.target_branch }}
-        run: |
-          set -euo pipefail
-          ssh-keyscan -H "${PROD_HOST}" >> ~/.ssh/known_hosts
-
-          ssh "${PROD_USER}@${PROD_HOST}" "mkdir -p '${PROD_DEPLOY_PATH}'"
-
-          ssh "${PROD_USER}@${PROD_HOST}" "if [ ! -d '${PROD_DEPLOY_PATH}/.git' ]; then git clone '${PROD_GIT_URL}' '${PROD_DEPLOY_PATH}'; else cd '${PROD_DEPLOY_PATH}' && git remote set-url origin '${PROD_GIT_URL}'; fi"
-
-          ssh "${PROD_USER}@${PROD_HOST}" "cd '${PROD_DEPLOY_PATH}' && git fetch origin '${TARGET_BRANCH}' && git checkout -B '${TARGET_BRANCH}' FETCH_HEAD && git reset --hard FETCH_HEAD"
-
-          EFFECTIVE_BACKUP_ROOT="${PROD_BACKUP_ROOT:-/home/user/dachs_backups}"
-
-          ssh "${PROD_USER}@${PROD_HOST}" "export DEPLOY_PATH='${PROD_DEPLOY_PATH}' BACKUP_ROOT='${EFFECTIVE_BACKUP_ROOT}'; sh -eu -s" <<'REMOTE_BACKUP'
-          case "$BACKUP_ROOT" in
-            "$DEPLOY_PATH"|"$DEPLOY_PATH"/*)
-              echo "Backup path must be outside deploy path: $BACKUP_ROOT"
-              exit 1
-              ;;
-          esac
-
-          if [ -d "$DEPLOY_PATH/.git" ]; then
-            mkdir -p "$BACKUP_ROOT"
-            echo "Starting pre-deploy backup..."
-            cd "$DEPLOY_PATH"
-            if [ -f Makefile ] && [ -f scripts/backup.sh ] && [ -f .env ]; then
-              make predeploy-backup ENV_FILE=.env BACKUP_ROOT="$BACKUP_ROOT"
-            else
-              echo "Skipping pre-deploy backup because required backup files are missing in current deployment."
-            fi
-          else
-            echo "Skipping pre-deploy backup because no existing deployment was found."
-          fi
-          REMOTE_BACKUP
-
-          ssh "${PROD_USER}@${PROD_HOST}" "cd '${PROD_DEPLOY_PATH}' && git clean -fd"
-
-          ssh "${PROD_USER}@${PROD_HOST}" "cd '${PROD_DEPLOY_PATH}' && mkdir -p uploads logs/nginx"
-
-          scp .env.deploy "${PROD_USER}@${PROD_HOST}:${PROD_DEPLOY_PATH}/.env"
-
-          ssh "${PROD_USER}@${PROD_HOST}" "cd '${PROD_DEPLOY_PATH}' && chmod 600 .env && docker compose -f docker-compose.prod.yaml config && docker compose -f docker-compose.prod.yaml up -d --build"
-
-      - name: Post-deploy status check
-        env:
-          PROD_HOST: ${{ vars.PROD_HOST }}
-          PROD_USER: ${{ vars.PROD_USER }}
-          PROD_DEPLOY_PATH: ${{ vars.PROD_DEPLOY_PATH }}
-        run: |
-          set -euo pipefail
-          ssh "${PROD_USER}@${PROD_HOST}" "cd '${PROD_DEPLOY_PATH}' && docker compose -f docker-compose.prod.yaml ps"
-
-      - name: Post-deploy smoke checks
-        env:
-          PROD_HOST: ${{ vars.PROD_HOST }}
-          PROD_USER: ${{ vars.PROD_USER }}
-          PROD_DEPLOY_PATH: ${{ vars.PROD_DEPLOY_PATH }}
-        run: |
-          set -euo pipefail
-          ssh "${PROD_USER}@${PROD_HOST}" "curl -fsS http://localhost:9090/health"
-          ssh "${PROD_USER}@${PROD_HOST}" "cd '${PROD_DEPLOY_PATH}' && docker compose -f docker-compose.prod.yaml exec -T backend curl -fsS http://localhost:3000/health"
-
-      - name: Cleanup generated env file
-        if: ${{ always() }}
-        run: rm -f .env.deploy
--- a/.gitignore
+++ b/.gitignore
@@ -1,8 +1,7 @@
-node_modules/
-.gemini
-.env
-dist/
-*.log
-.DS_Store
-Thumbs.db
-backups/
+node_modules/
+.gemini
+.env
+dist/
+*.log
+.DS_Store
+Thumbs.db
--- a/Dockerfile.backend
+++ b/Dockerfile.backend
@@ -1,12 +0,0 @@
-FROM node:20-alpine
-
-WORKDIR /app
-
-COPY package*.json ./
-RUN npm ci
-
-COPY . .
-
-EXPOSE 3000
-
-CMD ["npm", "run", "server"]
--- a/Dockerfile.backend.prod
+++ b/Dockerfile.backend.prod
@@ -1,48 +0,0 @@
-FROM node:20-alpine
-
-LABEL maintainer="ITAM Team <devops@itam.local>"
-
-# Set production environment
-ENV NODE_ENV=production
-
-WORKDIR /app
-
-# Install curl for health checks and dumb-init for proper signal handling
-RUN apk add --no-cache curl dumb-init mysql-client
-
-# Copy package files
-COPY package*.json ./
-
-# Install production dependencies only
-RUN npm ci --only=production
-
-# Copy application code
-COPY server.js ./
-COPY src ./src
-
-# Create non-root user 'appuser' with UID 1001 (1000 already in use by node image)
-RUN addgroup -g 1001 appuser && \
-    adduser -D -u 1001 -G appuser appuser
-
-# Set ownership of application files to appuser
-RUN chown -R appuser:appuser /app
-
-# Create logs directory
-RUN mkdir -p /app/logs && \
-    chown -R appuser:appuser /app/logs
-
-# Switch to non-root user
-USER appuser
-
-# Expose port
-EXPOSE 3000
-
-# Health check - backend should implement /health endpoint
-HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \
-    CMD curl -f http://localhost:3000/health || exit 1
-
-# Use dumb-init from PATH to avoid distro-specific absolute path issues
-ENTRYPOINT ["dumb-init", "--"]
-
-# Run application
-CMD ["npm", "run", "server"]
--- a/Dockerfile.frontend
+++ b/Dockerfile.frontend
@@ -1,12 +0,0 @@
-FROM node:20-alpine
-
-WORKDIR /app
-
-COPY package*.json ./
-RUN npm ci
-
-COPY . .
-
-EXPOSE 8080
-
-CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
--- a/Dockerfile.frontend.prod
+++ b/Dockerfile.frontend.prod
@@ -1,62 +0,0 @@
-# Stage 1: Build
-FROM node:20-alpine AS builder
-
-WORKDIR /app
-
-# Copy package files
-COPY package*.json ./
-COPY tsconfig*.json ./
-COPY vite.config.ts ./
-
-# Install all dependencies (including devDependencies for build)
-RUN npm ci
-
-# Copy source code
-COPY src ./src
-COPY public ./public
-COPY index.html map_editor.html ./
-
-# Build application
-RUN npm run build
-
-# Verify build output
-RUN ls -la dist/ && echo "Build completed successfully"
-
-# Stage 2: Runtime
-FROM nginx:stable-alpine
-
-LABEL maintainer="ITAM Team <devops@itam.local>"
-
-# Install curl for health checks
-RUN apk add --no-cache curl
-
-WORKDIR /usr/share/nginx/html
-
-# Copy built assets from builder
-COPY --from=builder /app/dist .
-
-# Copy static image assets referenced by literal /img/... paths (Obsolete: img folder is now public/img and copied via dist)
-# COPY img ./img
-
-# Copy root-level logo asset referenced directly by index.html
-# COPY ["image 92.png", "./image 92.png"]
-
-# Copy Nginx static file serving configuration (not reverse proxy)
-COPY docker/frontend/default.conf /etc/nginx/conf.d/default.conf
-
-# Create nginx runtime user and directories
-RUN mkdir -p /var/log/nginx && \
-    chown -R nginx:nginx /usr/share/nginx/html && \
-    chown -R nginx:nginx /var/log/nginx && \
-    chown -R nginx:nginx /var/cache/nginx && \
-    chown -R nginx:nginx /etc/nginx/conf.d
-
-# Expose port
-EXPOSE 80
-
-# Health check
-HEALTHCHECK --interval=30s --timeout=10s --start-period=20s --retries=3 \
-    CMD curl -f http://localhost:80/ || exit 1
-
-# Run nginx
-CMD ["nginx", "-g", "daemon off;"]
--- a/ITAM_임원보고_운영배포_요약.md
+++ b/ITAM_임원보고_운영배포_요약.md
@@ -1,103 +0,0 @@
-# 자산관리 시스템 운영 오픈 보고 요약
-
-## 1. 운영 방식
-
-```mermaid
-flowchart LR
-  A[개발 완료] --> B[개발 완료 검증]
-  B --> C[운영 서버 반영]
-  C --> D[최종 점검]
-  D --> E[서비스 오픈]
-
-  linkStyle default stroke:#d32f2f,stroke-width:2px;
-```
-
-| 구분 | 운영 방향 |
-| --- | --- |
-| 반영 기준 | 개발 완료 및 검증 후 운영에 반영 |
-| 반영 방식 | 운영 담당자 기준 통제 절차 |
-| 데이터 연계 | 기존 외부 DB와 연동 |
-| 안정성 확보 | 반영 전 점검, 반영 전 백업, 반영 후 확인 |
-
-임의 반영 배제, 개발 완료 및 검증 결과 기준 운영 반영 방식.
-
---
-
-## 2. 운영 배포 절차
-
-```mermaid
-flowchart TD
-  A[배포 준비 완료] --> B[사전 점검]
-  B --> C[백업 수행]
-  C --> D[운영 배포 실행]
-  D --> E[접속 및 기능 확인]
-  E --> F[오픈]
-
-  B1[환경 설정 확인]
-  B2[외부 DB 연결 확인]
-  B3[배포 파일 확인]
-
-  B --> B1
-  B --> B2
-  B --> B3
-
-  linkStyle default stroke:#d32f2f,stroke-width:2px;
-```
-
-| 단계 | 목적 | 담당 |
-| --- | --- | --- |
-| 사전 점검 | 운영 반영에 필요한 조건 확인 | 개발팀 + 운영 |
-| 백업 수행 | 문제 발생 시 신속 복구 대비 | 운영 |
-| 운영 배포 실행 | 운영 서버에 검증 완료 결과 반영 | 운영 |
-| 접속 및 기능 확인 | 주요 화면과 서비스 상태 확인 | 개발팀 + 운영 |
-| 오픈 | 사용자 대상 서비스 오픈 | 운영 |
-
---
-
-## 3. 예상 일정
-
-```mermaid
-gantt
-  title 자산관리 시스템 운영 오픈 일정
-  dateFormat  YYYY-MM-DD
-  axisFormat  %m/%d
-
-  section 준비 단계
-  배포 구성 정리 및 환경 보완      :done, a1, 2026-06-18, 2026-06-24
-
-  section 검증 단계
-  테스트 배포 및 점검             :a2, 2026-06-25, 2026-06-27
-  오픈 전 최종 확인               :a3, 2026-06-28, 2026-06-30
-
-  section 오픈
-  운영 오픈                       :milestone, a4, 2026-07-01, 1d
-```
-
-| 구간 | 일정 | 주요 내용 |
-| --- | --- | --- |
-| 준비 단계 | 6월 18일 ~ 6월 24일 | 운영 환경 정리 및 배포 준비 완료 |
-| 검증 단계 | 6월 25일 ~ 6월 30일 | 테스트 배포, 접속 확인, 최종 보완 |
-| 오픈 시점 | 7월 1일 | 운영 서비스 시작 |
-
-6월 30일까지 준비 및 검증 완료, 7월 1일 오픈.
-
---
-
-## 4. 보고 요약
-
-| 항목 | 보고 내용 |
-| --- | --- |
-| 통제된 배포 | 개발 완료 및 검증 후 운영 반영 |
-| 운영 안정성 | 점검과 백업 후 반영 |
-| 데이터 연속성 | 기존 외부 DB와 연계 유지 |
-| 오픈 목표 | 7월 1일 서비스 개시 |
-
-1. 통제 절차 기반 운영 반영.
-2. 오픈 전 점검 및 백업 기반 리스크 관리.
-3. 6월 30일까지 준비 완료, 7월 1일 오픈.
-
---
-
-## 5. 결론
-
-자산관리 시스템, 6월 30일까지 운영 배포 준비 및 검증 완료, 7월 1일 오픈.
--- a/33
+++ b/33
@@ -1,33 +0,0 @@
-SHELL := /bin/sh
-
-ENV_FILE ?= .env
-BACKUP_ROOT ?= backups
-RETENTION_DAYS ?= 14
-BACKUP_SCRIPT := scripts/backup.sh
-
-.PHONY: help db-dump files-backup full-backup predeploy-backup cleanup-backups
-
-help:
-	@echo "Usage: make <target> [ENV_FILE=.env BACKUP_ROOT=backups RETENTION_DAYS=14]"
-	@echo ""
-	@echo "Targets:"
-	@echo "  db-dump         Create a gzip-compressed MySQL dump from .env settings"
-	@echo "  files-backup    Archive runtime files such as uploads/, map_config.json, and .env"
-	@echo "  full-backup     Run both db-dump and files-backup"
-	@echo "  predeploy-backup Alias for the backup step executed before production deploy"
-	@echo "  cleanup-backups Delete backup files older than RETENTION_DAYS"
-
-db-dump:
-	@ENV_FILE="$(ENV_FILE)" BACKUP_ROOT="$(BACKUP_ROOT)" sh "$(BACKUP_SCRIPT)" db
-
-files-backup:
-	@ENV_FILE="$(ENV_FILE)" BACKUP_ROOT="$(BACKUP_ROOT)" sh "$(BACKUP_SCRIPT)" files
-
-full-backup:
-	@ENV_FILE="$(ENV_FILE)" BACKUP_ROOT="$(BACKUP_ROOT)" sh "$(BACKUP_SCRIPT)" full
-
-predeploy-backup:
-	@ENV_FILE="$(ENV_FILE)" BACKUP_ROOT="$(BACKUP_ROOT)" sh "$(BACKUP_SCRIPT)" full
-
-cleanup-backups:
-	@BACKUP_ROOT="$(BACKUP_ROOT)" RETENTION_DAYS="$(RETENTION_DAYS)" sh "$(BACKUP_SCRIPT)" cleanup
--- a/docs/plans/PROJECT_GUIDE.md
+++ b/docs/plans/PROJECT_GUIDE.md
@@ -1,49 +1,49 @@
-# 📗 ITAM 프로젝트 구성 및 협업 가이드
-
-본 문서는 ITAM(IT Asset Management System)의 프로젝트 구조와 공동 작업을 위한 가이드를 제공합니다.
-
-## 1. 프로젝트 아키텍처 개요
-ITAM은 **중앙 상태 관리(Centralized State)**와 **컴포넌트 기반 UI(Component-based UI)** 구조로 설계되었습니다. 모든 UI와 비즈니스 로직은 기능별로 독립된 파일로 분리되어 있어, 여러 작업자가 충돌 없이 동시에 개발할 수 있습니다.
-
-## 2. 핵심 디렉토리 구조 및 역할
-
-### 🏗️ 제어 로직 (Core)
-*   **`src/main.ts`**: 시스템 관제탑. 전체 컴포넌트 초기화 및 메인 렌더링 흐름을 제어합니다.
-*   **`src/state.ts`**: **전역 데이터 창고**. 자산 데이터(`masterData`)와 현재 탭 상태를 중앙에서 관리합니다. 데이터 구조 변경 시 가장 먼저 확인해야 할 파일입니다.
-
-### 🛠️ 상세 페이지 및 모달 (Modals)
-모든 자산의 추가/수정/삭제 로직은 `src/components/Modal/` 폴더 내에 독립적으로 구성되어 있습니다.
-
-*   **`BaseModal.ts`**: 모든 모달의 공통 기능(닫기, ESC 처리, 배경 클릭)을 담당합니다.
-*   **`PCModal.ts`**: 개인PC 전용 상세 정보 및 사양 관리.
-*   **`HWModal.ts`**: 서버, 전산비품 자산 상세 정보 관리.
-*   **`StorageModal.ts`**: 스토리지(NAS/DAS) 특화 필드 및 정보 관리.
-*   **`SWModal.ts`**: 소프트웨어 라이선스 기본 정보 관리.
-*   **`SWUserModal.ts`**: **복잡한 로직 영역**. 소프트웨어별 사용자 할당/해제 및 매핑 로직을 담당합니다.
-
-### 📊 화면 렌더링 (Views)
-*   **`src/views/DashboardView.ts`**: HW/SW 현황 통계 및 요약 차트 화면을 렌더링합니다.
-*   **`src/views/AssetTableView.ts`**: 각 카테고리별 자산 목록 테이블을 렌더링합니다.
-
-## 3. 공동 작업 가이드 (협업 전략)
-
-본 프로젝트는 파일 단위로 역할이 명확히 나뉘어 있어, **담당 영역에 따라 독립적인 작업이 가능**합니다.
-
-### 👤 담당자별 권장 작업 영역
-| 작업 대상 | 담당 파일 (Primary) | 설명 |
-| :--- | :--- | :--- |
-| **하드웨어(HW) 담당** | `PCModal.ts`, `HWModal.ts`, `StorageModal.ts` | 하드웨어 상세 페이지 및 사양 관리 로직 개발 |
-| **소프트웨어(SW) 담당** | `SWModal.ts`, `SWUserModal.ts` | 소프트웨어 정보 및 사용자 할당 시스템 개발 |
-
-### 🤝 공통 영역 및 주의사항
-아래 파일들은 두 담당자가 공통으로 사용하는 영역이므로, 수정 시 Git 충돌에 유의하고 소통이 필요합니다.
-1.  **`src/state.ts`**: 데이터 인터페이스(Interface)를 변경할 경우.
-2.  **`src/views/AssetTableView.ts`**: 목록 테이블의 공통 스타일이나 HW/SW 테이블 구조를 변경할 경우.
-3.  **`src/views/DashboardView.ts`**: 대시보드 통계 알고리즘을 변경할 경우.
-
-## 4. 데이터 흐름 (Data Flow)
-1.  **데이터 조회**: `AssetTableView`에서 항목 클릭 → 담당 모달의 `openModal(asset)` 호출 → 폼 바인딩.
-2.  **데이터 저장**: 모달에서 '저장' 버튼 클릭 → `state.ts`의 전역 상태 업데이트 → `main.ts`의 `renderContent()` 호출 → 전체 화면 즉시 갱신.
-
---
-**Tip**: 새로운 기능을 추가할 때는 `main.ts`에 코드를 직접 작성하지 말고, 적절한 폴더 아래에 새 파일을 만들어 `import` 하시기 바랍니다.
+# 📗 ITAM 프로젝트 구성 및 협업 가이드
+
+본 문서는 ITAM(IT Asset Management System)의 프로젝트 구조와 공동 작업을 위한 가이드를 제공합니다.
+
+## 1. 프로젝트 아키텍처 개요
+ITAM은 **중앙 상태 관리(Centralized State)**와 **컴포넌트 기반 UI(Component-based UI)** 구조로 설계되었습니다. 모든 UI와 비즈니스 로직은 기능별로 독립된 파일로 분리되어 있어, 여러 작업자가 충돌 없이 동시에 개발할 수 있습니다.
+
+## 2. 핵심 디렉토리 구조 및 역할
+
+### 🏗️ 제어 로직 (Core)
+*   **`src/main.ts`**: 시스템 관제탑. 전체 컴포넌트 초기화 및 메인 렌더링 흐름을 제어합니다.
+*   **`src/state.ts`**: **전역 데이터 창고**. 자산 데이터(`masterData`)와 현재 탭 상태를 중앙에서 관리합니다. 데이터 구조 변경 시 가장 먼저 확인해야 할 파일입니다.
+
+### 🛠️ 상세 페이지 및 모달 (Modals)
+모든 자산의 추가/수정/삭제 로직은 `src/components/Modal/` 폴더 내에 독립적으로 구성되어 있습니다.
+
+*   **`BaseModal.ts`**: 모든 모달의 공통 기능(닫기, ESC 처리, 배경 클릭)을 담당합니다.
+*   **`PCModal.ts`**: 개인PC 전용 상세 정보 및 사양 관리.
+*   **`HWModal.ts`**: 서버, 전산비품 자산 상세 정보 관리.
+*   **`StorageModal.ts`**: 스토리지(NAS/DAS) 특화 필드 및 정보 관리.
+*   **`SWModal.ts`**: 소프트웨어 라이선스 기본 정보 관리.
+*   **`SWUserModal.ts`**: **복잡한 로직 영역**. 소프트웨어별 사용자 할당/해제 및 매핑 로직을 담당합니다.
+
+### 📊 화면 렌더링 (Views)
+*   **`src/views/DashboardView.ts`**: HW/SW 현황 통계 및 요약 차트 화면을 렌더링합니다.
+*   **`src/views/AssetTableView.ts`**: 각 카테고리별 자산 목록 테이블을 렌더링합니다.
+
+## 3. 공동 작업 가이드 (협업 전략)
+
+본 프로젝트는 파일 단위로 역할이 명확히 나뉘어 있어, **담당 영역에 따라 독립적인 작업이 가능**합니다.
+
+### 👤 담당자별 권장 작업 영역
+| 작업 대상 | 담당 파일 (Primary) | 설명 |
+| :--- | :--- | :--- |
+| **하드웨어(HW) 담당** | `PCModal.ts`, `HWModal.ts`, `StorageModal.ts` | 하드웨어 상세 페이지 및 사양 관리 로직 개발 |
+| **소프트웨어(SW) 담당** | `SWModal.ts`, `SWUserModal.ts` | 소프트웨어 정보 및 사용자 할당 시스템 개발 |
+
+### 🤝 공통 영역 및 주의사항
+아래 파일들은 두 담당자가 공통으로 사용하는 영역이므로, 수정 시 Git 충돌에 유의하고 소통이 필요합니다.
+1.  **`src/state.ts`**: 데이터 인터페이스(Interface)를 변경할 경우.
+2.  **`src/views/AssetTableView.ts`**: 목록 테이블의 공통 스타일이나 HW/SW 테이블 구조를 변경할 경우.
+3.  **`src/views/DashboardView.ts`**: 대시보드 통계 알고리즘을 변경할 경우.
+
+## 4. 데이터 흐름 (Data Flow)
+1.  **데이터 조회**: `AssetTableView`에서 항목 클릭 → 담당 모달의 `openModal(asset)` 호출 → 폼 바인딩.
+2.  **데이터 저장**: 모달에서 '저장' 버튼 클릭 → `state.ts`의 전역 상태 업데이트 → `main.ts`의 `renderContent()` 호출 → 전체 화면 즉시 갱신.
+
+---
+**Tip**: 새로운 기능을 추가할 때는 `main.ts`에 코드를 직접 작성하지 말고, 적절한 폴더 아래에 새 파일을 만들어 `import` 하시기 바랍니다.
--- a/README.md
+++ b/README.md
@@ -1,46 +1,56 @@
-# 🛠️ 개발 및 관리 규칙 (Strict Development Rules)
-
-1. **언어 설정**: 영어로 생각하되, 모든 답변은 **한국어**로 작성한다.
-2. **임의 수정 절대 금지 (Zero-Arbitrary Change)**:
-    - 사용자가 명시적으로 지시한 부분 외에는 **단 한 줄의 코드도, 그 어떤 파일도 임의로 수정, 정리, 리팩토링하지 않는다.**
-    - 지시받지 않은 다른 파트의 코드는 절대 건드리지 않으며, 영향 범위가 요청 범위를 벗어나지 않도록 '외과 수술식(Surgical) 수정'을 원칙으로 한다.
-3. **개선 작업 절차 (Test-First Approach)**:
-    - 사용자가 개선(Refactoring, Optimization 등)을 지시한 경우, **수정 전 현재 시스템이 정상적으로 잘 작동하는지 먼저 전수 확인**한다.
-    - 기존 동작 방식과 성능을 기준(Baseline)으로 삼고, 수정 후에도 **기존의 모든 기능이 무결하게 유지되는지 반드시 테스트하여 입증**한다.
-    - 검증 결과를 바탕으로 "무엇을, 왜, 어떻게" 바꿀지 상세 보고 후, 사용자로부터 **'진행시켜'** 승인을 얻은 뒤에만 집행한다.
-4. **선보고 후승인**: 모든 기능 수정 및 코드 변경 전에는 예상 방안을 먼저 보고하고 승인 절차를 거친다.
-5. **DB 삭제 및 초기화 절대 엄금 (Strict DB Deletion Policy)**:
-    - 어떠한 경우에도 `DELETE`, `DROP`, `TRUNCATE` 등 데이터를 삭제하거나 테이블을 초기화하는 작업은 사전에 사용자에게 상세 사유를 보고하고 **명시적 승인**을 얻은 후에만 시행한다.
-    - 기존 데이터의 가치를 최우선으로 하며, 작업 전 백업 여부를 반드시 확인한다.
-6. **RED–GREEN–Refactor 개발 원칙**:
-    - 모든 기능 개발과 버그 수정은 **RED → GREEN → Refactor** 순서로 진행한다.
-    - **RED**: 요구사항을 명확히 표현하는 테스트를 먼저 작성하고, 해당 테스트가 기능 미구현 또는 결함으로 인해 실패하는지 확인한다.
-    - **GREEN**: 실패한 테스트를 통과시키는 데 필요한 최소한의 코드만 구현하며, 불필요한 기능 추가나 구조 변경을 하지 않는다.
-    - **Refactor**: 관련 테스트와 기존 테스트가 모두 통과하는 상태에서만 중복 제거, 명칭 개선, 책임 분리 등 코드 구조를 개선하며 동작은 변경하지 않는다.
-    - 각 단계가 끝날 때마다 관련 테스트와 기존 기능의 회귀 여부를 검증한다.
-    - 테스트 작성이 현실적으로 불가능한 경우에는 그 사유와 대체 검증 방법을 먼저 보고하고 승인을 받은 후 진행한다.
-    - 본 원칙을 적용할 때에도 기존의 **선보고 후승인** 및 **외과 수술식 수정** 규칙을 준수한다.
-
---
-
-### 🚀 서버 구동 및 외부 접속 규칙 (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)
-
-디자인 일관성 및 시각적 원칙에 관한 상세 내용은 아래 문서를 참조하십시오.
-
-👉 **[디자인 가이드 바로가기 (design_rule.md)](./design_rule.md)**
-
-
+# 🛠️ 개발 및 관리 규칙 (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).
+
+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열 그리드 시스템을 권장하며, 하단 우측에 액션 버튼(닫기, 저장 등)을 배치합니다.
+
--- a/TEST_LOCAL.md
+++ b/TEST_LOCAL.md
@@ -1,108 +0,0 @@
-# 로컬 Docker 테스트 가이드
-
-## 준비 사항
-
- Docker & Docker Compose 설치 (WSL2 Ubuntu 권장)
- Node.js 20 (로컬 빌드 테스트 시)
-
-## 테스트 단계
-
-### 1. 파일 구조 확인
-
-```bash
-# docker-compose.test.yaml이 다음을 사용 확인
-ls -la docker/nginx/default.conf
-ls -la docker/frontend/default.conf
-ls -la Dockerfile.backend.prod
-ls -la Dockerfile.frontend.prod
-ls -la package.json
-ls -la src/
-ls -la public/
-ls -la index.html
-```
-
-### 2. Compose 파일 검증
-
-```bash
-docker compose -f docker-compose.test.yaml config
-```
-
-### 3. 이미지 빌드 테스트
-
-```bash
-# 개별 빌드 테스트
-docker build -f Dockerfile.backend.prod -t itam-backend:test .
-docker build -f Dockerfile.frontend.prod -t itam-frontend:test .
-```
-
-### 4. 컨테이너 시작
-
-```bash
-# WSL 터미널에서
-cd /mnt/c/Users/user/Desktop/안건\ 파일/itam
-
-# 또는 docker-compose.test.yaml을 사용하여 전체 스택 시작
-docker compose -f docker-compose.test.yaml up --build
-
-# 백그라운드에서 실행
-docker compose -f docker-compose.test.yaml up -d --build
-```
-
-### 5. 컨테이너 상태 확인
-
-```bash
-docker compose -f docker-compose.test.yaml ps
-docker logs itam-backend-test
-docker logs itam-frontend-test
-docker logs itam-nginx-test
-```
-
-### 6. 브라우저 테스트
-
-```
-http://localhost:8080/      # Frontend 접근
-http://localhost:8080/api/  # Backend API 테스트
-http://localhost:3000/health # 직접 backend health check
-```
-
-### 7. 정리
-
-```bash
-docker compose -f docker-compose.test.yaml down
-```
-
-## 예상되는 포트 매핑
-
- 8080: Nginx reverse proxy (frontend route to static + /api to backend)
- 3000: Backend Express API (내부, frontend와 nginx를 통해 접근)
- 80: Frontend Nginx (내부, 정적 파일 서빙)
-
-## 테스트 체크리스트
-
- [ ] docker compose config 성공
- [ ] docker build 성공 (backend)
- [ ] docker build 성공 (frontend)
- [ ] 컨테이너 모두 실행 중 (ps 확인)
- [ ] http://localhost:8080 접근 가능 (frontend 페이지 로드)
- [ ] http://localhost:8080/api 응답 확인 (backend proxy 동작)
- [ ] backend health check 성공 (docker logs에서 /health 요청 확인)
-
-## 문제 해결
-
-### npm run build 실패
- Dockerfile.frontend.prod에서 tsc && vite build 실행
- package.json과 tsconfig.json 확인
-
-### nginx 포트 이미 사용 중
-```bash
-docker ps
-docker stop container_name
-```
-
-### DB 연결 실패
- 정상 동작 (NODE_ENV 때문에 /health는 200 반환)
- 실제 API 호출 시 DB 오류 예상
-
-### 권한 문제
- logs/ 디렉토리 소유권 확인
- 필요 시 mkdir -p logs/nginx && chmod 777 logs
--- a/WORK_LOG_20260615.md
+++ b/WORK_LOG_20260615.md
@@ -1,30 +0,0 @@
-# 📝 작업 보고서 (2026-06-15)
-
-## 1. 서버 및 개발 환경 설정
- **백엔드 서버 구동**: 3000번 포트(DB 서버) 정상 구동 완료.
- **프론트엔드 서버 구동**: 8080번 포트 정상 구동 완료.
- **브랜치 전환**: \`db_setting\` 브랜치로 전환 및 최신 코드 Pull 완료.
-
-## 2. 데이터베이스 정제 및 보강 (Surgical Update)
- **사용자 정보(system_users) 업데이트**:
-    - 엑셀(\`system_User (20260615).xlsx\`) 기반 987건 신규 입력.
-    - 기존 백업 데이터(212건)와 병합하여 총 1,199건의 사용자 DB 구축.
- **PC 자산(asset_pc) 데이터 입력**:
-    - 엑셀(\`asset_pc (2026.06.15).xlsx\`) 기반 1,030건 입력 완료.
-    - **용량 정제**: 괄호 제거 및 4자리 GB 단위를 TB로 자동 변환 (예: 1863GB -> 1.86TB).
-    - **구매일 보강**: 연도 데이터에 월/일 추가 (\`YYYY-12-01\` 형식으로 통일).
-    - **자산번호 재매핑**: \`PC-YYYY12-NNNN\` 형식으로 전수 재부여 및 기존 번호와의 연속성 유지.
-
-## 3. 부서 및 자산 유형 정상화
- **부서명 통합**: '총괄기획실', '기술개발센터', '한맥', '장헌', 'PTC', '현타' 등을 제외한 1,045건의 부서명을 **'삼안'**으로 일괄 통합.
- **자산 유형 교정 (핵심)**:
-    - 엑셀의 오기입과 상관없이 **사번(emp_no) 존재 여부**를 기준으로 자산 유형을 재분류.
-    - 사번이 있는 991건 -> **개인PC**로 정상화.
-    - 사번이 없는 39건 -> **공용PC**로 지정 및 사용자명 '공용'으로 정리.
-
-## 4. 운영 규칙 업데이트
- **README.md 수정**: 'DB 삭제 및 초기화 절대 엄금 (Rule 5)' 항목 추가.
-
---
-**보고자**: Gemini CLI
-**상태**: 소스 코드 수정 없음, 데이터베이스 정제 완료.
--- a/(2026.06.15).xlsx
+++ b/(2026.06.15).xlsx
--- a/backup_atam_data.json
+++ b/backup_atam_data.json
--- a/backup_refactor/index.html
+++ b/backup_refactor/index.html
@@ -0,0 +1,55 @@
+<!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>
--- a/backup_refactor/package.json
+++ b/backup_refactor/package.json
@@ -0,0 +1,25 @@
+{
+  "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"
+  }
+}
--- a/backup_refactor/src/components/Modal/BaseModal.ts
+++ b/backup_refactor/src/components/Modal/BaseModal.ts
@@ -0,0 +1,35 @@
+/**
+ * 모든 모달의 공통 기능 (닫기, 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');
+  }
+}
--- a/backup_refactor/src/components/Modal/DashboardDetailModal.ts
+++ b/backup_refactor/src/components/Modal/DashboardDetailModal.ts
@@ -0,0 +1,109 @@
+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');
+}
--- a/backup_refactor/src/components/Modal/HWModal.ts
+++ b/backup_refactor/src/components/Modal/HWModal.ts
@@ -0,0 +1,335 @@
+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();
+    }
+  });
+}
--- a/backup_refactor/src/components/Modal/PCModal.ts
+++ b/backup_refactor/src/components/Modal/PCModal.ts
@@ -0,0 +1,342 @@
+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('');
+}
--- a/backup_refactor/src/components/Modal/SWModal.ts
+++ b/backup_refactor/src/components/Modal/SWModal.ts
@@ -0,0 +1,222 @@
+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);
+  }
+}
--- a/backup_refactor/src/components/Modal/SWUserModal.ts
+++ b/backup_refactor/src/components/Modal/SWUserModal.ts
@@ -0,0 +1,241 @@
+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();
+}
--- a/backup_refactor/src/components/Modal/StorageModal.ts
+++ b/backup_refactor/src/components/Modal/StorageModal.ts
@@ -0,0 +1,161 @@
+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);
+  }
+}
--- a/backup_refactor/src/components/Navigation.ts
+++ b/backup_refactor/src/components/Navigation.ts
@@ -0,0 +1,80 @@
+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();
+}
--- a/backup_refactor/src/core/dummyDataGenerator.ts
+++ b/backup_refactor/src/core/dummyDataGenerator.ts
@@ -0,0 +1,232 @@
+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: [] };
+}
--- a/backup_refactor/src/core/excelHandler.ts
+++ b/backup_refactor/src/core/excelHandler.ts
@@ -0,0 +1,344 @@
+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);
+  });
+}
--- a/backup_refactor/src/core/realServerData.ts
+++ b/backup_refactor/src/core/realServerData.ts
--- a/backup_refactor/src/core/state.ts
+++ b/backup_refactor/src/core/state.ts
@@ -0,0 +1,87 @@
+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);
+}
--- a/backup_refactor/src/main.ts
+++ b/backup_refactor/src/main.ts
@@ -0,0 +1,108 @@
+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);
--- a/backup_refactor/src/server_data.json
+++ b/backup_refactor/src/server_data.json
@@ -0,0 +1,13 @@
+[
+  {
+    "법인": "(주)회사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"
+  }
+]
--- a/backup_refactor/src/styles/common.css
+++ b/backup_refactor/src/styles/common.css
@@ -0,0 +1,262 @@
+: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; }
--- a/backup_refactor/src/styles/modal.css
+++ b/backup_refactor/src/styles/modal.css
@@ -0,0 +1,267 @@
+/* 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;
+}
--- a/backup_refactor/src/views/AssetTableView.ts
+++ b/backup_refactor/src/views/AssetTableView.ts
@@ -0,0 +1,208 @@
+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();
+}
--- a/backup_refactor/src/views/DashboardView.ts
+++ b/backup_refactor/src/views/DashboardView.ts
@@ -0,0 +1,278 @@
+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;
+}
--- a/backup_temp/README.md
+++ b/backup_temp/README.md
@@ -0,0 +1,57 @@
+# 🛠️ 개발 및 관리 규칙 (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열 그리드 시스템을 권장하며, 하단 우측에 액션 버튼(닫기, 저장 등)을 배치합니다.
+
--- a/캡쳐/00.HW요약정보.png
+++ b/캡쳐/00.HW요약정보.png
--- a/캡쳐/00.SW요약정보.png
+++ b/캡쳐/00.SW요약정보.png
--- a/캡쳐/01.SW자산
+++ b/캡쳐/01.SW자산
--- a/캡쳐/02.개인PC프로그램설치현황.png
+++ b/캡쳐/02.개인PC프로그램설치현황.png
--- a/캡쳐/03.비인가프로그램실행찯안.png
+++ b/캡쳐/03.비인가프로그램실행찯안.png
--- a/캡쳐/04.개인PC사양정보수집.png
+++ b/캡쳐/04.개인PC사양정보수집.png
--- a/캡쳐/05.구독라이센스등록페이지.png
+++ b/캡쳐/05.구독라이센스등록페이지.png
--- a/캡쳐/05.영구라이센스등록페이지.png
+++ b/캡쳐/05.영구라이센스등록페이지.png
--- a/backup_temp/SAMQ
+++ b/backup_temp/SAMQ
--- a/캡쳐/07.실물자산관리페이지.png
+++ b/캡쳐/07.실물자산관리페이지.png
--- a/캡쳐/07.실물자산등록페이지.png
+++ b/캡쳐/07.실물자산등록페이지.png
--- a/캡쳐/08.변경내역페이지.png
+++ b/캡쳐/08.변경내역페이지.png
--- a/캡쳐/09.HW관리페이지.png
+++ b/캡쳐/09.HW관리페이지.png
--- a/backup_temp/[전산자산관리]
+++ b/backup_temp/[전산자산관리]
--- a/backup_temp/detail.png
+++ b/backup_temp/detail.png
--- a/backup_temp/index.html
+++ b/backup_temp/index.html
@@ -0,0 +1,13 @@
+<!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>
--- a/backup_temp/plan.md
+++ b/backup_temp/plan.md
@@ -0,0 +1,32 @@
+# 📑 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 등)를 정규화하여 관리 효율을 극대화한다.
--- a/backup_temp/src/App.css
+++ b/backup_temp/src/App.css
@@ -0,0 +1,295 @@
+: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);
+}
+
--- a/backup_temp/src/App.tsx
+++ b/backup_temp/src/App.tsx
@@ -0,0 +1,51 @@
+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
--- a/backup_temp/src/components/AssetManagementView.tsx
+++ b/backup_temp/src/components/AssetManagementView.tsx
@@ -0,0 +1,168 @@
+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
--- a/backup_temp/src/components/DashboardView.tsx
+++ b/backup_temp/src/components/DashboardView.tsx
@@ -0,0 +1,51 @@
+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
--- a/backup_temp/src/components/HardwareManagementView.tsx
+++ b/backup_temp/src/components/HardwareManagementView.tsx
@@ -0,0 +1,87 @@
+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
--- a/backup_temp/src/components/ServerDetailModal.tsx
+++ b/backup_temp/src/components/ServerDetailModal.tsx
@@ -0,0 +1,144 @@
+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;
--- a/backup_temp/src/data/idcData.ts
+++ b/backup_temp/src/data/idcData.ts
@@ -0,0 +1,608 @@
+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"
+  }
+];
--- a/backup_temp/src/data/mockData.ts
+++ b/backup_temp/src/data/mockData.ts
@@ -0,0 +1,84 @@
+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',
+  },
+];
--- a/backup_temp/src/index.css
+++ b/backup_temp/src/index.css
@@ -0,0 +1,26 @@
+: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%;
+}
--- a/backup_temp/src/main.tsx
+++ b/backup_temp/src/main.tsx
@@ -0,0 +1,10 @@
+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>,
+)
--- a/backup_temp/서버목록
+++ b/backup_temp/서버목록
@@ -0,0 +1,49 @@
+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번,,,,,,,,,,,,,,,,,,,,,,,,,
--- a/backup_temp/서버목록
+++ b/backup_temp/서버목록
--- a/branch_diff_issues.md
+++ b/branch_diff_issues.md
@@ -0,0 +1,58 @@
+# 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) 연동 및 절대 경로 통신 적용
--- a/create_db.js
+++ b/create_db.js
@@ -0,0 +1,24 @@
+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!');
--- a/db_fix_data.js
+++ b/db_fix_data.js
@@ -0,0 +1,49 @@
+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);
+});
--- a/db_init.js
+++ b/db_init.js
@@ -0,0 +1,177 @@
+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);
+});
--- a/debug_excel.json
+++ b/debug_excel.json
@@ -0,0 +1,140 @@
+{
+  "서버 관리대장(기술개발센터).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",
+      "이준하 차장"
+    ]
+  ]
+}
--- a/doc_readme.md
+++ b/doc_readme.md
@@ -1,940 +0,0 @@
-# ITAM 도커라이징 실전 가이드
-
-## 1. 문서 목적
-
-이 문서는 Gitea에 올라가 있는 현재 저장소를 기준으로, 개발 PC에 WSL2와 Ubuntu만 설치되어 있는 상태에서 지금의 Docker 실행 구조를 재현하는 방법을 처음부터 끝까지 설명하는 실전 가이드다.
-
-이 문서는 아래 상황을 가정한다.
-
-1. 소스 코드는 아직 로컬에 없거나, Gitea에서 막 받아올 예정이다.
-2. Windows에는 WSL2와 Ubuntu는 설치되어 있다.
-3. 그 외 Docker 관련 세팅은 아직 안 되어 있을 수 있다.
-4. 최종 목표는 현재 저장소 기준 `frontend + backend + external DB` 구조를 Docker로 재현하는 것이다.
-
-이 문서의 목적은 아래 네 가지다.
-
-1. 현재 시스템 구조와 Docker 구조를 먼저 이해하게 한다.
-2. 기존 파일 중 무엇이 새로 추가되었고 무엇이 수정되었는지 정리한다.
-3. 각 단계별로 정확히 어디에서 명령을 실행해야 하는지 명시한다.
-4. Gitea 소스만 받은 상태에서 지금과 같은 Docker 실행 상태까지 도달하게 한다.
-
---
-
-## 2. 현재 시스템 구조 개요
-
-## 2.1 애플리케이션 원래 구조
-
-현재 저장소의 본래 실행 구조는 다음과 같다.
-
-1. 프런트엔드: Vite 기반 TypeScript 앱
-2. 백엔드: Express 기반 Node.js API 서버
-3. 데이터베이스: 외부 MySQL 서버
-
-즉, 원래부터 MySQL이 Docker 안에 들어 있던 구조가 아니다.
-
-프런트와 백엔드는 각각 별도 프로세스로 실행되며, 프런트는 `/api` 상대 경로로 백엔드 API를 호출한다.
-
---
-
-## 2.2 현재 Docker 구조
-
-현재 최종 Docker 구조는 아래와 같다.
-
-1. `frontend` 컨테이너
-2. `backend` 컨테이너
-3. 외부 MySQL DB
-
-즉, 지금은 내부 `db` 컨테이너가 없고, 내부 `db-bootstrap` 컨테이너도 없다.
-
-현재 구조를 문장으로 풀면 다음과 같다.
-
-1. 브라우저는 `http://localhost:8080`으로 `frontend` 컨테이너에 접속한다.
-2. `frontend`는 `/api` 요청을 `backend:3000`으로 프록시한다.
-3. `backend`는 `.env`에 적힌 외부 DB 정보로 외부 MySQL에 직접 접속한다.
-4. 조회 결과 JSON을 프런트가 받아 화면에 렌더링한다.
-
-간단한 흐름은 아래와 같다.
-
-```text
-Browser
-  -> frontend container :8080
-  -> Vite proxy (/api)
-  -> backend container :3000
-  -> external MySQL (.env)
-```
-
---
-
-## 2.3 왜 이 구조가 맞는가
-
-현재 구조가 적절한 이유는 다음과 같다.
-
-1. 원래 시스템도 외부 MySQL을 쓰는 구조였다.
-2. 지금 목표는 운영형 단일 배포가 아니라 현재 개발형 구조를 Docker로 재현하는 것이다.
-3. 프런트는 Vite dev server 기반이라 운영형 nginx 정적 배포 구조로 억지로 바꾸는 것보다, 현 구조를 유지하는 편이 안전하다.
-4. 실무 표준 관점에서도 앱 컨테이너는 무상태로 유지하고, DB는 외부 인프라를 사용하는 구성이 더 일반적이다.
-
---
-
-## 3. 이번 도커라이징에서 추가되거나 수정된 파일 정리
-
-아래 파일들은 이번 Docker 재현 구조를 위해 새로 추가되었거나 수정된 핵심 파일이다.
-
-## 3.1 새로 추가된 파일
-
-1. `Dockerfile.frontend`
-2. `Dockerfile.backend`
-3. `.dockerignore`
-4. `docker-compose.yaml`
-5. `start_docker_wsl.ps1`
-6. `stop_docker_wsl.ps1`
-7. `start_docker_wsl.bat`
-8. `stop_docker_wsl.bat`
-9. `docker/mysql/init/README.md`
-10. `docker_task_plan.md`
-11. `doc_readme2.md`
-
---
-
-## 3.2 기존 파일 중 수정된 핵심 파일
-
-1. `server.js`
-2. `vite.config.ts`
-3. `doc_readme.md`
-
---
-
-## 3.3 각 파일의 역할
-
-### `Dockerfile.frontend`
-
-역할:
-
-1. 프런트 Vite 개발 서버 이미지를 만든다.
-2. 컨테이너 내부에서 `npm run dev -- --host 0.0.0.0`를 실행한다.
-
-### `Dockerfile.backend`
-
-역할:
-
-1. 백엔드 Express 서버 이미지를 만든다.
-2. 컨테이너 내부에서 `npm run server`를 실행한다.
-
-### `.dockerignore`
-
-역할:
-
-1. `node_modules`, `build`, `.git`, `.env`, `uploads` 같은 불필요한 파일을 Docker build context에서 제외한다.
-
-### `docker-compose.yaml`
-
-역할:
-
-1. `frontend`, `backend` 두 컨테이너를 동시에 띄운다.
-2. `backend`는 `.env`의 외부 DB를 사용한다.
-3. `frontend`는 `backend:3000`으로 프록시한다.
-
-### `start_docker_wsl.ps1`
-
-역할:
-
-1. Windows 경로를 WSL 경로로 안전하게 바꾼다.
-2. WSL 내부 Docker를 사용해 `docker compose up --build -d`를 실행한다.
-3. 한글 경로와 공백 경로에서도 안정적으로 실행되게 한다.
-
-### `stop_docker_wsl.ps1`
-
-역할:
-
-1. 같은 방식으로 WSL 내부에서 `docker compose down`을 실행한다.
-
-### `start_docker_wsl.bat`, `stop_docker_wsl.bat`
-
-역할:
-
-1. PowerShell 스크립트를 쉽게 실행하는 래퍼 역할을 한다.
-
-### `server.js`
-
-중요 수정 사항:
-
-1. `dotenv.config({ override: true })`가 아니라 `dotenv.config()`를 사용한다.
-
-이유:
-
-1. Compose나 실행 환경이 주는 환경변수를 `.env`가 덮어써 버리면 안 된다.
-2. 외부 DB 정보와 포트 설정 등 실행 환경 우선 구조를 유지해야 한다.
-
-### `vite.config.ts`
-
-중요 수정 사항:
-
-1. 프록시 타깃을 고정 `localhost:3000`이 아니라 환경변수 기반으로 받도록 바꿨다.
-
-현재 구조:
-
-```ts
-const proxyTarget = process.env.VITE_DEV_PROXY_TARGET || 'http://localhost:3000';
-```
-
-이유:
-
-1. 로컬에서 직접 프런트를 띄울 때는 `localhost:3000`이 맞다.
-2. Docker 안에서는 `frontend` 컨테이너에서 보는 `localhost`가 백엔드가 아니므로 `backend:3000`을 써야 한다.
-
---
-
-## 4. 현재 `docker-compose.yaml` 기준 실제 동작 구조
-
-현재 `docker-compose.yaml`은 아래 구조다.
-
-### `backend`
-
-1. `Dockerfile.backend`로 이미지를 빌드한다.
-2. `.env`를 읽는다.
-3. DB 관련 변수는 `${DB_HOST}`, `${DB_PORT}`, `${DB_USER}`, `${DB_PASS}`, `${DB_NAME}`를 그대로 사용한다.
-4. 포트 `3000:3000`으로 노출한다.
-5. `uploads`, `map_config.json`을 마운트한다.
-
-### `frontend`
-
-1. `Dockerfile.frontend`로 이미지를 빌드한다.
-2. `VITE_DEV_PROXY_TARGET: http://backend:3000` 환경변수를 사용한다.
-3. 포트 `8080:8080`으로 노출한다.
-4. 브라우저의 `/api` 요청을 `backend`로 프록시한다.
-
-즉, 현재 Compose는 DB를 띄우지 않고 앱 두 개만 띄운다.
-
---
-
-## 5. 사전 준비 사항
-
-이 섹션은 Gitea에서 코드를 받기 전 또는 받은 직후에 확인해야 한다.
-
-## 5.1 가정하는 기본 상태
-
-이미 설치되어 있다고 가정하는 것:
-
-1. Windows
-2. WSL2
-3. Ubuntu 배포판
-
-아직 없을 수 있는 것:
-
-1. Docker Desktop 또는 WSL 내부 Docker 사용 환경
-2. Git 클라이언트
-3. 프로젝트 `.env`
-
---
-
-## 5.2 권장 Docker 실행 방식
-
-현재 저장소 구조상 가장 권장하는 방식은 다음이다.
-
-1. Windows에 Docker Desktop 설치
-2. Docker Desktop에서 WSL2 통합 활성화
-3. Ubuntu WSL 내부에서 `docker` 명령을 사용할 수 있게 한다.
-
-이유:
-
-1. 현재 `start_docker_wsl.ps1`가 WSL 내부의 `docker`를 호출하는 구조다.
-2. 실제 검증도 WSL 내부 Docker 기준으로 이루어졌다.
-
---
-
-## 5.3 외부 DB 정보 준비
-
-현재 구조는 외부 MySQL을 사용하므로 `.env` 파일이 반드시 필요하다.
-
-최소한 아래 값이 필요하다.
-
-```env
-DB_HOST=<외부 MySQL 호스트>
-DB_PORT=3306
-DB_USER=<외부 MySQL 계정>
-DB_PASS=<외부 MySQL 비밀번호>
-DB_NAME=itam
-```
-
-필요 시 추가 환경변수는 현재 백엔드 코드 기준으로 함께 넣을 수 있다.
-
---
-
-## 6. Gitea에서 소스 받기
-
-## 6.1 작업 실행 위치
-
-이 단계는 **Windows PowerShell** 또는 **Windows 터미널의 PowerShell**에서 수행한다.
-
-실행 위치 이유:
-
-1. 이후 `start_docker_wsl.ps1`도 Windows PowerShell에서 실행하는 것이 가장 자연스럽다.
-2. 로컬 작업 폴더를 Windows 경로 기준으로 준비할 수 있다.
-
---
-
-## 6.2 소스 클론
-
-예시:
-
-```powershell
-git clone <Gitea 저장소 URL>
-cd <클론된 저장소 경로>
-```
-
-현재 프로젝트처럼 한글 경로를 사용할 수도 있지만, 가능하면 너무 복잡한 경로는 피하는 것이 좋다.
-
-현재 실제 프로젝트 경로 예시는 아래였다.
-
-```text
-c:\Users\user\Desktop\안건 파일\itam
-```
-
-이 경로도 현재 스크립트로는 동작 가능하다.
-
---
-
-## 7. Docker 환경 준비
-
-## 7.1 작업 실행 위치
-
-이 단계는 **Windows PowerShell**과 **WSL Ubuntu 터미널**을 둘 다 사용한다.
-
-1. 설치 확인은 Windows PowerShell에서 시작
-2. 실제 Docker 동작 확인은 WSL Ubuntu에서 수행
-
---
-
-## 7.2 Docker Desktop 설치 여부 확인
-
-**실행 위치: Windows PowerShell**
-
-```powershell
-docker version
-```
-
-만약 여기서 바로 안 잡혀도 현재 프로젝트는 WSL 내부 Docker를 쓰므로, 다음 단계로 넘어가 WSL 내부 확인을 한다.
-
---
-
-## 7.3 WSL 내부 Docker 확인
-
-**실행 위치: Windows PowerShell**
-
-```powershell
-wsl -l -v
-wsl sh -lc "docker --version"
-```
-
-정상 기대 결과:
-
-1. Ubuntu가 Running 상태
-2. `docker --version`이 정상 출력
-
-만약 `docker --version`이 실패하면, Docker Desktop 설치 및 WSL 통합을 먼저 완료해야 한다.
-
---
-
-## 8. `.env` 파일 준비
-
-## 8.1 작업 실행 위치
-
-이 단계는 **Windows PowerShell**, **VS Code**, 또는 아무 텍스트 편집기**에서 수행한다.
-
-즉, 프로젝트 루트에 `.env` 파일을 만드는 작업이다.
-
---
-
-## 8.2 `.env` 작성
-
-프로젝트 루트에 `.env`를 만든다.
-
-예시:
-
-```env
-DB_HOST=your-external-db-host
-DB_PORT=3306
-DB_USER=your-db-user
-DB_PASS=your-db-password
-DB_NAME=itam
-```
-
-주의:
-
-1. 현재 Compose는 내부 DB를 만들지 않는다.
-2. 따라서 이 값이 곧 실제 운영/개발 외부 DB 연결 정보다.
-3. 이 정보가 틀리면 `backend`는 기동해도 API에서 DB 오류가 난다.
-
---
-
-## 9. 현재 Docker 파일이 어떻게 동작하는지 이해하기
-
-## 9.1 `Dockerfile.frontend`
-
-**확인 위치: 프로젝트 루트 / VS Code**
-
-현재 내용 핵심:
-
-```dockerfile
-FROM node:20-alpine
-WORKDIR /app
-COPY package*.json ./
-RUN npm ci
-COPY . .
-EXPOSE 8080
-CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
-```
-
-의미:
-
-1. Node 20 Alpine 기반
-2. 의존성 설치 후 전체 소스 복사
-3. Vite 개발 서버 실행
-
---
-
-## 9.2 `Dockerfile.backend`
-
-**확인 위치: 프로젝트 루트 / VS Code**
-
-현재 내용 핵심:
-
-```dockerfile
-FROM node:20-alpine
-WORKDIR /app
-COPY package*.json ./
-RUN npm ci
-COPY . .
-EXPOSE 3000
-CMD ["npm", "run", "server"]
-```
-
-의미:
-
-1. Node 20 Alpine 기반
-2. Express 서버 실행
-
---
-
-## 9.3 `vite.config.ts`
-
-**확인 위치: 프로젝트 루트 / VS Code**
-
-현재 핵심:
-
-```ts
-const proxyTarget = process.env.VITE_DEV_PROXY_TARGET || 'http://localhost:3000';
-```
-
-그리고 `/api`, `/uploads`가 모두 `proxyTarget`으로 프록시된다.
-
-의미:
-
-1. 로컬 실행 시 기본값은 `localhost:3000`
-2. Docker 실행 시 Compose가 `http://backend:3000`을 주입
-
-이 수정이 있어야 Docker 안에서도 화면에 데이터가 표시된다.
-
---
-
-## 10. Docker Compose 기동
-
-## 10.1 작업 실행 위치
-
-이 단계는 반드시 **Windows PowerShell**에서 수행하는 것을 권장한다.
-
-이유:
-
-1. `start_docker_wsl.ps1`가 Windows 경로를 받아 WSL 경로로 바꾸는 구조다.
-2. 한글/공백 경로에서 가장 안전하다.
-
---
-
-## 10.2 권장 기동 방법
-
-**실행 위치: 프로젝트 루트의 Windows PowerShell**
-
-```powershell
-.\start_docker_wsl.ps1
-```
-
-또는
-
-```powershell
-.\start_docker_wsl.bat
-```
-
-이 스크립트는 내부적으로 아래를 수행한다.
-
-1. PowerShell 출력 인코딩을 UTF-8로 설정
-2. 현재 Windows 경로를 WSL 경로로 변환
-3. WSL 동작 확인
-4. WSL 내부 Docker 동작 확인
-5. `docker compose up --build -d` 수행
-
---
-
-## 10.3 직접 기동이 필요할 때
-
-**실행 위치: WSL Ubuntu 터미널**
-
-직접 실행 예시는 아래와 같다.
-
-```bash
-cd /mnt/c/Users/user/Desktop/안건\ 파일/itam
-docker compose up --build -d
-```
-
-하지만 현재 프로젝트는 한글 경로 이슈가 있었기 때문에, 특별한 이유가 없으면 `start_docker_wsl.ps1`를 우선 사용한다.
-
---
-
-## 11. 컨테이너 기동 후 검증
-
-## 11.1 컨테이너 상태 확인
-
-**실행 위치: Windows PowerShell**
-
-```powershell
-wsl sh -lc "docker ps -a --format 'table {{.Names}}\t{{.Status}}' | grep itam"
-```
-
-정상 기대 상태:
-
-1. `itam-backend` -> `Up`
-2. `itam-frontend` -> `Up`
-
-현재는 `itam-db`, `itam-db-bootstrap`가 없어야 정상이다.
-
---
-
-## 11.2 백엔드 API 확인
-
-**실행 위치: Windows PowerShell**
-
-```powershell
-Invoke-WebRequest -Uri http://localhost:3000/api/assets/master -UseBasicParsing | Select-Object -ExpandProperty StatusCode
-```
-
-정상 기대값:
-
-1. `200`
-
-이 검사는 `backend`가 외부 DB에 정상 연결됐는지 보는 가장 직접적인 검사다.
-
---
-
-## 11.3 프런트 경유 API 확인
-
-**실행 위치: Windows PowerShell**
-
-```powershell
-Invoke-WebRequest -Uri http://localhost:8080/api/assets/master -UseBasicParsing | Select-Object -ExpandProperty StatusCode
-```
-
-정상 기대값:
-
-1. `200`
-
-이 검사는 프런트 프록시가 정상인지 확인한다.
-
-예전에 화면에 데이터가 안 보였던 것은 외부 DB 자체가 아니라, 이 프록시 경로가 잘못돼 있었기 때문이다.
-
---
-
-## 11.4 브라우저 화면 확인
-
-**실행 위치: 브라우저**
-
-```text
-http://localhost:8080
-```
-
-확인 포인트:
-
-1. 화면이 열리는지
-2. 목록/대시보드/테이블 데이터가 비어 있지 않은지
-3. 모달 진입 시 데이터가 정상적으로 보이는지
-
---
-
-## 12. 지금 데이터가 표시되는 원리
-
-현재는 내부 DB로 데이터를 옮겨 담지 않는다.
-
-현재 실제 동작 원리는 다음과 같다.
-
-1. 브라우저가 `frontend`에 접속한다.
-2. 프런트가 `/api/...`로 요청한다.
-3. Vite 프록시가 `backend:3000`으로 요청을 넘긴다.
-4. `backend`가 `.env`의 외부 MySQL에 직접 접속한다.
-5. 조회 결과 JSON을 프런트가 받아 화면에 렌더링한다.
-
-즉, 현재는 아래 구조다.
-
-```text
-Browser -> frontend -> backend -> external MySQL
-```
-
-예전 외부 DB 구조에서 화면에 데이터가 안 보였던 이유는 외부 DB 때문이 아니라, 프런트 컨테이너가 `localhost:3000`을 잘못 바라보고 있었기 때문이다.
-
-지금은 `VITE_DEV_PROXY_TARGET: http://backend:3000`으로 수정되어 있기 때문에 정상 표시된다.
-
---
-
-## 13. 자주 헷갈리는 포인트
-
-## 13.1 현재는 내부 DB 컨테이너가 없다
-
-현재 `docker-compose.yaml`에는 아래가 없다.
-
-1. `db` 서비스
-2. `db-bootstrap` 서비스
-3. `itam_mysql_data` 볼륨
-
-즉, DB는 Docker 스택 밖에 있다.
-
---
-
-## 13.2 현재는 `.env`가 곧 실제 DB 연결 정보다
-
-현재 `backend`는 아래처럼 Compose에서 그대로 받는다.
-
-1. `DB_HOST: ${DB_HOST}`
-2. `DB_PORT: ${DB_PORT}`
-3. `DB_USER: ${DB_USER}`
-4. `DB_PASS: ${DB_PASS}`
-5. `DB_NAME: ${DB_NAME}`
-
-즉, `.env`를 틀리게 적으면 화면도 데이터가 안 뜬다.
-
---
-
-## 13.3 `server.js`는 여전히 중요하게 수정된 상태다
-
-현재 `server.js`는 `dotenv.config()`를 사용한다.
-
-이 구조는 이후 Compose나 실행 환경에서 변수를 주입할 때, 애플리케이션이 그 값을 받아들일 수 있게 하기 위해 유지해야 한다.
-
---
-
-## 14. 스택 중지 방법
-
-## 14.1 작업 실행 위치
-
-**Windows PowerShell / 프로젝트 루트**
-
---
-
-## 14.2 권장 종료 명령
-
-```powershell
-.\stop_docker_wsl.ps1
-```
-
-또는
-
-```powershell
-.\stop_docker_wsl.bat
-```
-
-이 스크립트는 내부적으로 WSL 경로 변환 후 `docker compose down`을 수행한다.
-
---
-
-## 15. 장애 발생 시 점검 순서
-
-## 15.1 `frontend` 화면은 뜨는데 데이터가 없을 때
-
-**실행 위치: Windows PowerShell**
-
-먼저 아래 두 API를 분리해서 본다.
-
-```powershell
-Invoke-WebRequest -Uri http://localhost:3000/api/assets/master -UseBasicParsing | Select-Object -ExpandProperty StatusCode
-Invoke-WebRequest -Uri http://localhost:8080/api/assets/master -UseBasicParsing | Select-Object -ExpandProperty StatusCode
-```
-
-판단 기준:
-
-1. `3000`은 200이고 `8080`만 실패 -> 프런트 프록시 문제
-2. 둘 다 실패 -> 백엔드 또는 외부 DB 연결 문제
-
---
-
-## 15.2 백엔드가 외부 DB에 연결되지 않을 때
-
-**실행 위치: Windows PowerShell**
-
-```powershell
-wsl sh -lc "docker logs --tail=200 itam-backend"
-```
-
-점검 항목:
-
-1. `.env`의 DB 정보가 정확한지
-2. 외부 DB 서버 접근이 가능한지
-3. 계정/비밀번호가 맞는지
-4. 방화벽 또는 네트워크 이슈가 없는지
-
---
-
-## 16. 운영 수동 배포 플로우
-
-이 섹션은 현재 ITAM 저장소 기준으로 운영 서버에 반영할 때의 전체 흐름을 설명한다.
-
-중요한 전제는 아래와 같다.
-
-1. 로컬 수정본을 서버에 직접 복사하지 않는다.
-2. 반드시 Gitea에 올라간 커밋을 기준으로 배포한다.
-3. 운영 반영은 자동 푸시 배포가 아니라 Gitea workflow 수동 실행으로 진행한다.
-4. 현재 기준 운영 배포 workflow는 `.gitea/workflows/itam_production_deploy.yml`이다.
-
---
-
-## 16.1 전체 운영/배포 분기 흐름
-
-운영 반영은 크게 세 상황으로 나뉜다.
-
-1. 최초 운영 서버 구축 후 첫 배포
-2. 코드 수정 후 일반 재배포
-3. 검증 실패 또는 배포 실패 후 수정 재배포
-
-아래 분기 구조로 이해하면 된다.
-
-```mermaid
-flowchart TD
-  START["배포 필요 발생"] --> CASE{"어떤 상황인가?"}
-
-  CASE -->|초기 구축| INIT["초기 운영 배포 준비"]
-  CASE -->|수정 반영| CHANGE["수정 후 재배포 준비"]
-  CASE -->|실패 후 재시도| RETRY["실패 원인 분석 후 재배포 준비"]
-
-  INIT --> INIT1["운영 서버 Docker / compose 확인"]
-  INIT1 --> INIT2["Gitea Variables / Secrets 등록"]
-  INIT2 --> INIT3["map_config.json / uploads 초기 데이터 준비"]
-  INIT3 --> MANUAL["Gitea에서 수동 배포 workflow 실행"]
-
-  CHANGE --> CHANGE1["로컬 수정 및 테스트"]
-  CHANGE1 --> CHANGE2["Gitea 커밋 / push"]
-  CHANGE2 --> CHANGE3["Code Check / Docker Build Check 통과"]
-  CHANGE3 --> MANUAL
-
-  RETRY --> RETRY1{"어디서 실패했는가?"}
-  RETRY1 -->|코드 체크 실패| FIX1["코드 또는 설정 수정"]
-  RETRY1 -->|배포 단계 실패| FIX2["서버 / 변수 / 권한 / 네트워크 수정"]
-  RETRY1 -->|Smoke Check 실패| FIX3["앱 기동 상태 / 프록시 / DB 상태 수정"]
-  FIX1 --> CHANGE2
-  FIX2 --> MANUAL
-  FIX3 --> MANUAL
-
-  MANUAL --> DEPLOY["운영 서버 반영 수행"]
-  DEPLOY --> RESULT{"최종 검증 통과?"}
-  RESULT -->|예| DONE["운영 반영 완료"]
-  RESULT -->|아니오| RETRY
-  linkStyle default stroke:#d32f2f,stroke-width:2px;
-```
-
-핵심은 아래와 같다.
-
-1. 초기 구축은 서버와 운영 데이터 준비가 먼저다.
-2. 수정 반영은 반드시 커밋과 push가 먼저다.
-3. 실패 후 재배포는 실패 지점에 따라 수정 위치가 달라진다.
-
---
-
-## 16.2 최초 운영 배포 플로우
-
-최초 배포에서는 코드보다 운영 환경 준비가 더 중요하다.
-
-순서는 아래와 같다.
-
-1. 운영 서버에 Docker Engine과 `docker compose`를 설치한다.
-2. 운영 서버에서 Gitea 저장소에 접근 가능한 SSH 키를 준비한다.
-3. Gitea repository Variables / Secrets를 등록한다.
-4. `PROD_DEPLOY_PATH` 경로를 정한다.
-5. `map_config.json`, `uploads/` 초기 데이터를 준비한다.
-6. Gitea에서 `itam_production_deploy.yml`을 수동 실행한다.
-7. 배포 후 `ps`, `/health`, `/`, `/ready`를 확인한다.
-
-즉 최초 배포는 아래 조건이 먼저 충족되어야 한다.
-
-```text
-서버 준비 완료
-> Gitea 변수 / 시크릿 등록 완료
-> 초기 데이터 준비 완료
-> 수동 배포 실행
-```
-
---
-
-## 16.3 수정 후 일반 재배포 플로우
-
-일반적인 수정 반영은 아래 흐름이다.
-
-1. 개발자가 로컬에서 코드 또는 설정을 수정한다.
-2. 로컬에서 필요한 테스트를 수행한다.
-3. 변경사항을 Gitea에 커밋 후 push 한다.
-4. `itam_code_check.yml`이 빌드와 compose 문법을 검사한다.
-5. `itam_docker_build_check.yml`이 운영용 이미지 빌드 가능 여부를 검사한다.
-6. 두 검증이 통과하면 운영자가 Gitea에서 `itam_production_deploy.yml`을 수동 실행한다.
-7. 운영 서버가 최신 커밋으로 동기화되고 컨테이너가 다시 올라온다.
-8. smoke check 통과 여부를 확인한다.
-
-아래 다이어그램은 이 일반 재배포 흐름을 보여준다.
-
-```mermaid
-flowchart LR
-  DEV["로컬 수정"] --> TEST["로컬 확인"]
-  TEST --> PUSH["커밋 / push"]
-  PUSH --> CODE["ITAM Code Check"]
-  CODE --> BUILD["ITAM Docker Build Check"]
-  BUILD --> GATE{"검증 통과?"}
-  GATE -->|예| RUN["Gitea에서 수동 배포 실행"]
-  GATE -->|아니오| FIX["로컬 수정 후 재커밋"]
-  FIX --> PUSH
-  RUN --> PROD["운영 서버 배포"]
-  PROD --> SMOKE{"Smoke Check 통과?"}
-  SMOKE -->|예| OK["배포 완료"]
-  SMOKE -->|아니오| FIXDEPLOY["원인 수정 후 재배포"]
-  FIXDEPLOY --> RUN
-  linkStyle default stroke:#d32f2f,stroke-width:2px;
-```
-
---
-
-## 16.4 수동 배포 workflow 내부 실행 순서
-
-Gitea에서 `itam_production_deploy.yml`을 수동 실행하면 내부적으로는 아래 순서로 진행된다.
-
-1. SSH agent를 설정한다.
-2. 필수 Variables / Secrets가 모두 있는지 확인한다.
-3. 운영용 `.env.deploy` 파일을 생성한다.
-4. 운영 서버에 접속한다.
-5. `PROD_DEPLOY_PATH`를 생성한다.
-6. 저장소를 clone 또는 fetch 한다.
-7. 선택한 브랜치의 최신 커밋으로 checkout, reset, clean 한다.
-8. `uploads`, `logs/nginx` 디렉토리를 준비한다.
-9. `.env.deploy`를 서버의 `.env`로 복사한다.
-10. `docker compose -f docker-compose.prod.yaml config`를 수행한다.
-11. `docker compose -f docker-compose.prod.yaml up -d --build`를 수행한다.
-12. `docker compose ps`를 확인한다.
-13. `/health`, `/`, backend `/ready` smoke check를 수행한다.
-
-아래 다이어그램은 workflow 내부 실행 순서다.
-
-```mermaid
-flowchart TD
-  A["수동 배포 시작"] --> B["SSH agent 설정"]
-  B --> C["Variables / Secrets 검증"]
-  C --> D{"필수 값 누락 여부"}
-  D -->|예| E["즉시 실패 후 설정 보완"]
-  D -->|아니오| F[".env.deploy 생성"]
-  F --> G["운영 서버 SSH 접속"]
-  G --> H["배포 경로 생성"]
-  H --> I["git clone 또는 fetch"]
-  I --> J["지정 브랜치 checkout / reset / clean"]
-  J --> K["uploads / logs/nginx 준비"]
-  K --> L[".env 업로드 및 권한 설정"]
-  L --> M["compose config 검증"]
-  M --> N{"compose config 성공?"}
-  N -->|아니오| O["설정 수정 후 재실행"]
-  N -->|예| P["compose up -d --build"]
-  P --> Q["docker compose ps 확인"]
-  Q --> R["/health, /, /ready smoke check"]
-  R --> S{"smoke check 성공?"}
-  S -->|예| T["운영 배포 완료"]
-  S -->|아니오| U["원인 분석 후 재배포"]
-  linkStyle default stroke:#d32f2f,stroke-width:2px;
-```
-
---
-
-## 16.5 실패 후 검증 및 재배포 플로우
-
-실패가 났다고 해서 항상 같은 방식으로 다시 배포하면 안 된다.
-
-실패 지점별 판단은 아래처럼 나눈다.
-
-1. Code Check 실패: TypeScript, build, compose 문법 문제를 먼저 수정한다.
-2. Docker Build Check 실패: Dockerfile, 정적 자산 복사, 운영 빌드 컨텍스트 문제를 수정한다.
-3. Deploy 단계 실패: SSH, Gitea 변수, 서버 권한, 경로, git 접근, Docker 권한을 수정한다.
-4. Smoke Check 실패: Nginx 프록시, backend readiness, 외부 DB 연결, 앱 런타임 오류를 수정한다.
-
-즉 재배포 전 판단 기준은 아래와 같다.
-
-```text
-CI 실패 -> 로컬 코드 / 설정 수정 후 재커밋
-배포 실패 -> 서버 환경 또는 배포 설정 수정 후 수동 재실행
-Smoke Check 실패 -> 앱 / 프록시 / DB 상태 수정 후 수동 재실행
-```
-
-운영 관점에서는 아래 순서를 지키는 것이 안전하다.
-
-1. 실패 지점 확인
-2. 원인 수정
-3. 같은 실패가 다시 나는지 좁은 범위로 재검증
-4. 그 다음에만 수동 배포 재실행
-
---
-
-## 16.6 문서 기준 요약
-
-현재 ITAM 운영 배포는 아래 원칙으로 이해하면 된다.
-
-1. 수정은 로컬에서 한다.
-2. 배포 기준점은 Gitea에 올라간 커밋이다.
-3. 운영 반영은 Gitea 수동 workflow 실행으로 한다.
-4. 초기 배포, 일반 재배포, 실패 후 재배포는 분기 기준이 다르다.
-5. 최종 성공 여부는 컨테이너 상태가 아니라 smoke check까지 통과했는지로 판단한다.
-
---
-
-## 15.3 프런트 프록시가 의심될 때
-
-**확인 위치: `vite.config.ts`, `docker-compose.yaml`**
-
-다음 두 설정이 유지되는지 확인한다.
-
-`vite.config.ts`
-
-```ts
-const proxyTarget = process.env.VITE_DEV_PROXY_TARGET || 'http://localhost:3000';
-```
-
-`docker-compose.yaml`
-
-```yaml
-VITE_DEV_PROXY_TARGET: http://backend:3000
-```
-
-이 둘 중 하나라도 바뀌면 Docker 안에서 화면 데이터가 다시 안 보일 수 있다.
-
---
-
-## 17. 현재 기준 재현 절차 요약
-
-가장 짧게 정리하면 아래 순서다.
-
-1. Gitea에서 소스를 클론한다.
-2. Windows PowerShell에서 프로젝트 루트로 이동한다.
-3. `.env`에 외부 MySQL 정보를 작성한다.
-4. Docker Desktop + WSL 통합 또는 WSL 내부 Docker 사용 가능 상태를 만든다.
-5. `start_docker_wsl.ps1`를 실행한다.
-6. `http://localhost:3000/api/assets/master`가 200인지 확인한다.
-7. `http://localhost:8080/api/assets/master`가 200인지 확인한다.
-8. 브라우저에서 `http://localhost:8080`을 열어 실제 데이터 표시를 확인한다.
-
---
-
-## 18. 현재 최종 결론
-
-현재 저장소의 도커라이징 구조는 실무 표준에 맞는 `무상태 앱 컨테이너 + 외부 DB` 구조다.
-
-현재 핵심은 아래 세 가지다.
-
-1. `backend`는 외부 MySQL에 직접 연결한다.
-2. `frontend`는 `backend:3000`으로 API 프록시한다.
-3. WSL 경로 변환 스크립트를 통해 Windows 한글 경로에서도 안정적으로 실행한다.
-
-즉, 이 문서대로 진행하면 Gitea 소스만 받은 상태에서 지금과 같은 Docker 실행 구조를 재현할 수 있다.
--- a/doc_readme2.md
+++ b/doc_readme2.md
@@ -1,730 +0,0 @@
-# ITAM 도커라이징 최종 재현 가이드
-
-## 1. 문서 목적
-
-이 문서는 현재 Git 저장소에 올라간 파일만 가지고, 지금과 동일한 수준으로 ITAM 시스템을 도커라이징하고 실행하는 절차를 처음부터 끝까지 정리한 최종 가이드다.
-
-이 문서만 읽어도 아래 목표를 달성할 수 있게 작성한다.
-
-1. 현재 저장소 구조를 이해한다.
-2. 왜 이렇게 도커라이징했는지 판단 근거를 안다.
-3. WSL2 기반으로 실제 스택을 기동한다.
-4. 외부 MySQL에서 내부 MySQL 컨테이너로 초기 데이터를 bootstrap 한다.
-5. 프런트 8080과 백엔드 3000이 모두 정상 동작하는지 검증한다.
-6. 재초기화, 재기동, 장애 확인까지 수행한다.
-
-이 문서는 최종 성공 구조 기준이다. 실패 기록은 `doc_readme.md`를 본다.
-
---
-
-## 2. 최종 목표 구조
-
-현재 최종 구조는 아래 4개 서비스/역할로 나뉜다.
-
-1. `frontend`: Vite 개발 서버 컨테이너, 포트 8080
-2. `backend`: Express API 서버 컨테이너, 포트 3000
-3. `db`: MySQL 8 컨테이너, 포트 3306
-4. `db-bootstrap`: 외부 MySQL -> 내부 MySQL로 1회성 복제 수행 후 종료되는 도우미 컨테이너
-
-논리 흐름은 다음과 같다.
-
-```text
-브라우저 -> frontend:8080 -> Vite proxy -> backend:3000 -> db:3306
-                                      \
-                                       -> /uploads -> backend 정적 경로
-
-초기 1회 기동 시
-외부 MySQL(.env) -> db-bootstrap -> 내부 MySQL(db)
-```
-
---
-
-## 3. 왜 이 구조를 선택했는가
-
-이 저장소는 처음부터 운영형 정적 배포 앱이 아니었다. 실제 구조는 다음과 같았다.
-
-1. 프런트는 Vite 개발 서버가 따로 돈다.
-2. 백엔드는 Express API가 따로 돈다.
-3. 프런트는 상대 경로 `/api`를 호출한다.
-4. 백엔드는 프런트의 `dist`를 서빙하지 않는다.
-
-따라서 내일 바로 시연 가능한 수준까지 빠르게 안정화하려면 아래 전략이 가장 맞다.
-
-1. 프런트를 Vite dev server 그대로 컨테이너화한다.
-2. 백엔드를 별도 컨테이너로 유지한다.
-3. DB는 MySQL 8 컨테이너로 묶되, 초기 데이터는 외부 DB에서 복제한다.
-4. 프런트 프록시는 컨테이너 네트워크 서비스명 `backend`로 붙게 한다.
-
-즉, 현재 구조는 "개발형 구조를 Docker로 재현한 시연/개발용 Compose"다.
-
---
-
-## 4. 저장소 내 최종 관련 파일 목록
-
-현재 도커라이징과 직접 관련된 핵심 파일은 아래와 같다.
-
-1. `.dockerignore`
-2. `Dockerfile.frontend`
-3. `Dockerfile.backend`
-4. `docker-compose.yaml`
-5. `start_docker_wsl.ps1`
-6. `stop_docker_wsl.ps1`
-7. `start_docker_wsl.bat`
-8. `stop_docker_wsl.bat`
-9. `docker/mysql/init/README.md`
-10. `server.js`
-11. `vite.config.ts`
-
-각 파일 역할은 다음과 같다.
-
-### 4.1 `.dockerignore`
-
-Docker build context에서 제외할 파일을 정의한다.
-
-주요 제외 대상은 다음과 같다.
-
-1. `node_modules`
-2. `dist`
-3. `build`
-4. `.git`
-5. `.env`
-6. `uploads`
-7. `*.xlsx`
-8. `*.log`
-
-### 4.2 `Dockerfile.frontend`
-
-프런트 컨테이너 이미지 정의다.
-
-```dockerfile
-FROM node:20-alpine
-
-WORKDIR /app
-
-COPY package*.json ./
-RUN npm ci
-
-COPY . .
-
-EXPOSE 8080
-
-CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
-```
-
-이 이미지는 Vite dev server를 컨테이너에서 띄우기 위한 것이다.
-
-### 4.3 `Dockerfile.backend`
-
-백엔드 컨테이너 이미지 정의다.
-
-```dockerfile
-FROM node:20-alpine
-
-WORKDIR /app
-
-COPY package*.json ./
-RUN npm ci
-
-COPY . .
-
-EXPOSE 3000
-
-CMD ["npm", "run", "server"]
-```
-
-### 4.4 `docker-compose.yaml`
-
-전체 스택의 핵심 파일이다.
-
-현재 최종 구성은 다음 논리를 가진다.
-
-1. `db`는 MySQL 8 내부 DB다.
-2. `db-bootstrap`은 외부 DB 데이터를 내부 DB로 1회 복제한다.
-3. `backend`는 내부 `db`에 붙는다.
-4. `frontend`는 `backend` 서비스명으로 프록시한다.
-
-### 4.5 `start_docker_wsl.ps1`
-
-Windows에서 WSL 경유로 Docker Compose를 안전하게 기동하는 진입점이다.
-
-핵심은 다음 두 가지다.
-
-1. 프로젝트 Windows 경로를 `wslpath`로 WSL 경로로 바꾼다.
-2. 그 경로로 이동한 뒤 `docker compose up --build -d`를 수행한다.
-
-### 4.6 `stop_docker_wsl.ps1`
-
-같은 방식으로 WSL 내부에서 `docker compose down`을 수행해 스택을 안전하게 내린다.
-
-### 4.7 `start_docker_wsl.bat`, `stop_docker_wsl.bat`
-
-더블클릭 또는 간단 실행용 래퍼다. 내부적으로 PowerShell 스크립트를 호출한다.
-
-### 4.8 `server.js`
-
-중요 포인트는 다음 두 가지다.
-
-1. `dotenv.config();`를 사용한다.
-2. `dotenv.config({ override: true })`를 사용하지 않는다.
-
-이 차이로 Compose 환경변수 `DB_HOST=db`가 `.env`보다 우선하도록 보장한다.
-
-### 4.9 `vite.config.ts`
-
-현재 프록시는 환경변수 기반으로 동작한다.
-
-```ts
-const proxyTarget = process.env.VITE_DEV_PROXY_TARGET || 'http://localhost:3000';
-```
-
-로컬 PC에서 직접 Vite를 띄우면 기본값 `http://localhost:3000`을 쓴다.
-컨테이너에서는 Compose가 `http://backend:3000`을 주입한다.
-
---
-
-## 5. 현재 최종 `docker-compose.yaml` 구조 설명
-
-아래는 실제 동작 관점에서 읽어야 할 핵심 내용이다.
-
-### 5.1 `db` 서비스
-
-역할:
-
-1. 내부 MySQL 데이터 저장소
-2. 앱이 최종적으로 붙는 DB
-
-핵심 설정:
-
-1. 이미지: `mysql:8.0`
-2. DB 이름: `itam`
-3. 앱 계정: `itam_admin`
-4. 데이터 볼륨: `itam_mysql_data`
-5. healthcheck 사용
-
-healthcheck는 `mysqladmin ping`으로 동작하며, `backend`와 `db-bootstrap`은 이 상태를 기다린다.
-
-### 5.2 `db-bootstrap` 서비스
-
-역할:
-
-1. 외부 원본 DB에서 내부 `db`로 초기 데이터 복제
-2. 1회성 작업 후 종료
-
-핵심 포인트:
-
-1. `.env`를 읽어 외부 DB 접속 정보를 가져온다.
-2. 내부 `db`에 `asset_core` 테이블이 이미 존재하면 아무 것도 하지 않고 종료한다.
-3. 그렇지 않으면 `mysqldump | mysql` 파이프라인으로 복제한다.
-4. `restart: "no"` 이므로 정상 종료 후 반복 실행하지 않는다.
-
-또한 source DB와 target DB 변수는 분리돼 있다.
-
-1. source: `SOURCE_DB_*`
-2. target: `TARGET_DB_*`
-
-이 구조로 외부 원본 DB 자격증명과 내부 컨테이너 DB 자격증명이 섞이지 않는다.
-
-### 5.3 `backend` 서비스
-
-역할:
-
-1. Express API 제공
-2. 내부 `db`에 연결
-3. `/uploads` 정적 제공
-
-핵심 포인트:
-
-1. `env_file: .env`를 유지하지만,
-2. Compose `environment`에서 `DB_HOST=db`, `DB_PORT=3306`, `DB_USER=itam_admin`, `DB_PASS=itam1234`, `DB_NAME=itam`를 다시 지정한다.
-3. `depends_on`은 `db` healthy와 `db-bootstrap` 성공 종료를 모두 기다린다.
-
-즉, 백엔드는 DB bootstrap이 끝난 뒤 시작한다.
-
-### 5.4 `frontend` 서비스
-
-역할:
-
-1. Vite dev server 제공
-2. 브라우저 요청 `/api`, `/uploads`를 `backend`로 프록시
-
-핵심 포인트:
-
-1. `VITE_DEV_PROXY_TARGET: http://backend:3000`
-2. `CHOKIDAR_USEPOLLING: "true"`
-3. `npm run dev -- --host 0.0.0.0`
-
-중요한 이유는 컨테이너 안의 `localhost`가 호스트의 `localhost`가 아니기 때문이다.
-
---
-
-## 6. 사전 준비 조건
-
-이 저장소를 지금처럼 기동하려면 다음 전제가 필요하다.
-
-### 6.1 운영체제와 런타임
-
-1. Windows
-2. WSL2 Ubuntu 설치 및 실행 중
-3. Docker CLI가 WSL 내부에서 동작 가능
-
-권장 확인 명령:
-
-```powershell
-wsl -l -v
-wsl sh -lc "docker --version"
-```
-
-### 6.2 `.env` 파일
-
-현재 최종 구조는 "첫 기동 시 외부 DB에서 내부 DB로 bootstrap" 하는 방식이므로 `.env`가 반드시 필요하다.
-
-최소한 다음 값은 외부 원본 DB를 가리켜야 한다.
-
-```env
-DB_HOST=<external-mysql-host>
-DB_PORT=3306
-DB_USER=<external-db-user>
-DB_PASS=<external-db-password>
-DB_NAME=itam
-```
-
-주의:
-
-1. `.env`는 `db-bootstrap`이 외부 원본 DB에 접속할 때 사용한다.
-2. `backend`는 최종적으로 내부 `db` 컨테이너를 쓰므로, 런타임에서는 Compose `environment`가 우선한다.
-
-### 6.3 한글 경로 주의
-
-현재 프로젝트 경로는 한글과 공백을 포함한다.
-
-```text
-c:\Users\user\Desktop\안건 파일\itam
-```
-
-이 때문에 Docker 관련 명령은 수동으로 경로를 조립하지 말고, `start_docker_wsl.ps1` / `stop_docker_wsl.ps1`을 우선 사용해야 한다.
-
---
-
-## 7. 첫 기동 절차
-
-이 절차는 "Git에서 소스를 받은 뒤 처음 올리는 경우" 기준이다.
-
-### 7.1 저장소 준비
-
-1. 저장소를 받는다.
-2. `.env`가 올바른 외부 원본 DB를 가리키는지 확인한다.
-3. WSL이 켜져 있는지 확인한다.
-
-### 7.2 권장 실행 방법
-
-Windows PowerShell에서 프로젝트 루트로 이동한 뒤 아래 중 하나를 사용한다.
-
-방법 A:
-
-```powershell
-.\start_docker_wsl.ps1
-```
-
-방법 B:
-
-```powershell
-.\start_docker_wsl.bat
-```
-
-### 7.3 내부 실행 순서
-
-스크립트는 내부적으로 다음 순서로 동작한다.
-
-1. 현재 Windows 경로를 WSL 경로로 변환한다.
-2. WSL 동작 여부를 확인한다.
-3. WSL 내부 Docker 사용 가능 여부를 확인한다.
-4. `docker compose up --build -d`를 수행한다.
-
-### 7.4 기대되는 컨테이너 순서
-
-정상이라면 다음 순서로 올라온다.
-
-1. `itam-db`
-2. `itam-db-bootstrap`
-3. `itam-backend`
-4. `itam-frontend`
-
-`itam-db-bootstrap`은 정상이라면 최종 상태가 `Exited (0)`이어야 한다.
-
---
-
-## 8. 첫 기동 후 검증 절차
-
-기동 후에는 반드시 아래 검증을 수행한다.
-
-### 8.1 컨테이너 상태 확인
-
-```powershell
-wsl sh -lc "docker ps -a --format 'table {{.Names}}\t{{.Status}}' | grep itam"
-```
-
-정상 기대 상태:
-
-1. `itam-db` -> `Up ... (healthy)`
-2. `itam-db-bootstrap` -> `Exited (0)`
-3. `itam-backend` -> `Up`
-4. `itam-frontend` -> `Up`
-
-### 8.2 백엔드 API 직접 확인
-
-```powershell
-Invoke-WebRequest -Uri http://localhost:3000/api/assets/master -UseBasicParsing | Select-Object -ExpandProperty StatusCode
-```
-
-정상 기대값:
-
-1. `200`
-
-### 8.3 프런트 경유 API 확인
-
-```powershell
-Invoke-WebRequest -Uri http://localhost:8080/api/assets/master -UseBasicParsing | Select-Object -ExpandProperty StatusCode
-```
-
-정상 기대값:
-
-1. `200`
-
-### 8.4 데이터가 실제로 들어왔는지 확인
-
-```powershell
-wsl sh -lc "docker exec itam-db mysql -uitam_admin -pitam1234 -D itam -e 'SHOW TABLES' | head -n 20"
-```
-
-정상이라면 아래와 같은 테이블들이 보여야 한다.
-
-1. `asset_core`
-2. `asset_remote`
-3. `asset_spec`
-4. `asset_location`
-5. `asset_history`
-6. `asset_software_perpetual`
-7. `asset_software_subscription`
-8. `hardware_components_master`
-9. `job_spec_standards`
-
-### 8.5 브라우저 화면 확인
-
-브라우저에서 아래 주소를 연다.
-
-```text
-http://localhost:8080
-```
-
-목록/대시보드 데이터가 보이면 화면까지 정상 연결된 것이다.
-
---
-
-## 9. 재기동 절차
-
-코드만 수정됐고 DB는 유지하고 싶다면 다음처럼 하면 된다.
-
-### 9.1 스택 종료
-
-```powershell
-.\stop_docker_wsl.ps1
-```
-
-또는
-
-```powershell
-.\stop_docker_wsl.bat
-```
-
-### 9.2 스택 재기동
-
-```powershell
-.\start_docker_wsl.ps1
-```
-
-이 경우 `itam_mysql_data` 볼륨이 유지되므로, `db-bootstrap`은 내부 DB에 `asset_core`가 이미 있음을 감지하고 빠르게 종료한다.
-
---
-
-## 10. DB를 완전히 다시 초기화하는 절차
-
-외부 원본 DB에서 다시 처음부터 내부 DB를 복제하고 싶다면, MySQL 볼륨을 제거해야 한다.
-
-### 10.1 스택 중지
-
-```powershell
-.\stop_docker_wsl.ps1
-```
-
-### 10.2 MySQL 데이터 볼륨 삭제
-
-```powershell
-wsl sh -lc "docker volume rm -f itam_itam_mysql_data"
-```
-
-### 10.3 다시 시작
-
-```powershell
-.\start_docker_wsl.ps1
-```
-
-이때 `db-bootstrap`이 외부 DB에서 내부 DB로 전체를 다시 복제한다.
-
---
-
-## 11. 현재 구조에서 꼭 알아야 할 설계 포인트
-
-### 11.1 `server.js`의 `dotenv.config()` 변경 이유
-
-백엔드가 내부 DB로 붙게 하려면 Compose가 준 환경변수가 `.env`보다 우선해야 한다.
-
-만약 아래처럼 `override: true`를 쓰면 안 된다.
-
-```js
-dotenv.config({ override: true });
-```
-
-이렇게 되면 내부 `db`가 아니라 `.env`의 외부 DB로 다시 붙을 수 있다.
-
-현재는 아래가 맞다.
-
-```js
-dotenv.config();
-```
-
-### 11.2 왜 `docker-entrypoint-initdb.d` 기반 dump 파일을 안 쓰는가
-
-처음에는 이 방식을 시도했지만, 실제 데이터의 긴 문자열/깨진 텍스트 때문에 import가 line 97에서 중단됐다.
-
-그래서 현재는 더 안정적인 아래 방식을 쓴다.
-
-1. 외부 DB에서 `mysqldump`
-2. 파이프로 내부 `db`에 즉시 `mysql` import
-
-즉, 파일 중간 생성물을 신뢰하지 않는 구조다.
-
-### 11.3 왜 프런트 프록시 타깃을 환경변수화했는가
-
-로컬 직접 실행과 컨테이너 실행의 네트워크 기준이 다르기 때문이다.
-
-1. 로컬 직접 실행: `localhost:3000`이 맞다.
-2. 컨테이너 내부 실행: `backend:3000`이 맞다.
-
-그래서 `vite.config.ts`는 둘 다 수용할 수 있게 작성됐다.
-
---
-
-## 12. 문제 발생 시 진단 순서
-
-이 프로젝트에서는 문제를 아래 순서로 자르면 가장 빠르다.
-
-### 12.1 브라우저 화면에 데이터가 없을 때
-
-먼저 다음 둘을 분리해서 본다.
-
-1. `http://localhost:3000/api/assets/master`
-2. `http://localhost:8080/api/assets/master`
-
-판단 기준:
-
-1. `3000`은 200이고 `8080`만 실패면 프런트 프록시 문제다.
-2. 둘 다 실패면 백엔드 또는 DB 문제다.
-
-### 12.2 DB bootstrap이 성공했는지 확인할 때
-
-```powershell
-wsl sh -lc "docker ps -a --format 'table {{.Names}}\t{{.Status}}' | grep itam"
-```
-
-여기서 `itam-db-bootstrap`이 `Exited (0)`인지 본다.
-
-### 12.3 내부 DB에 실제 데이터가 있는지 확인할 때
-
-```powershell
-wsl sh -lc "docker exec itam-db mysql -uitam_admin -pitam1234 -D itam -e 'SHOW TABLES'"
-```
-
-### 12.4 백엔드 로그 확인
-
-```powershell
-wsl sh -lc "docker logs --tail=200 itam-backend"
-```
-
-### 12.5 DB 로그 확인
-
-```powershell
-wsl sh -lc "docker logs --tail=200 itam-db"
-```
-
-### 12.6 프런트 로그 확인
-
-```powershell
-wsl sh -lc "docker logs --tail=200 itam-frontend"
-```
-
---
-
-## 13. 자주 나올 수 있는 장애와 해석
-
-### 13.1 `docker` 명령이 PowerShell에서 안 보임
-
-의미:
-
-1. Windows 셸이 아니라 WSL에서 Docker를 쓰는 환경이다.
-
-대응:
-
-1. `start_docker_wsl.ps1` 사용
-
-### 13.2 `asset_core` 테이블 없음
-
-의미:
-
-1. 내부 DB 초기화가 안 됐거나 bootstrap이 안 끝났다.
-
-대응:
-
-1. `db-bootstrap` 상태 확인
-2. `.env` 외부 DB 접속 정보 확인
-3. 필요하면 볼륨 삭제 후 재초기화
-
-### 13.3 `3000` API는 되는데 화면은 비어 있음
-
-의미:
-
-1. DB는 정상이고 프런트 프록시 또는 화면 렌더링 문제다.
-
-대응:
-
-1. `8080/api/assets/master` 상태 먼저 확인
-
-### 13.4 `db-bootstrap`가 실패 종료함
-
-의미 후보:
-
-1. `.env` 외부 DB 접속 정보 오류
-2. 외부 DB 네트워크 접근 불가
-3. 외부 계정 권한 문제
-
-대응:
-
-1. `docker logs itam-db-bootstrap` 확인
-
---
-
-## 14. 현재 최종 검증 완료 상태
-
-이 저장소는 아래 상태까지 검증이 완료됐다.
-
-1. WSL2 Ubuntu에서 Docker 실행 가능
-2. `start_docker_wsl.ps1`로 전체 스택 기동 가능
-3. `db` 컨테이너 healthcheck 통과
-4. `db-bootstrap`가 외부 DB에서 내부 DB로 데이터 복제 후 `Exited (0)` 종료
-5. `backend`가 내부 `db`를 사용해 API 응답 가능
-6. `frontend`가 `backend`를 프록시해 8080 기준 화면/API 동작 가능
-7. 내부 MySQL에 실데이터 적재 확인
-
-즉, 현재 Git에 올라간 상태만으로도 WSL2와 외부 원본 DB 정보만 있으면 지금과 같은 수준의 Docker 실행 재현이 가능하다.
-
---
-
-## 15. 현재 구조의 한계와 다음 단계
-
-현재 구조는 충분히 시연 가능하고 개발 재현도 가능하지만, 다음은 아직 별도 작업이 필요하다.
-
-1. 운영형 정적 배포 구조 전환
-2. 외부 DB 없이도 완전 독립 실행 가능한 정식 dump/backup 체계
-3. `.env.example` 정리
-4. DB bootstrap 전용 계정/권한 최소화
-5. 장기적으로 `map_config.json` 파일 저장 정책 정리
-
-하지만 "현재 저장소만으로 지금과 같은 Docker 실행 상태 재현"이라는 목표는 이미 충족한다.
-
---
-
-## 16. 빠른 실행 요약
-
-가장 짧게 요약하면 다음 순서다.
-
-1. `.env`에 외부 원본 MySQL 접속 정보를 넣는다.
-2. WSL2 Ubuntu와 WSL 내부 Docker가 살아 있는지 확인한다.
-3. `start_docker_wsl.ps1`를 실행한다.
-4. `itam-db-bootstrap`가 `Exited (0)`인지 확인한다.
-5. `http://localhost:3000/api/assets/master`와 `http://localhost:8080/api/assets/master`가 모두 200인지 확인한다.
-6. 브라우저에서 `http://localhost:8080`을 열어 데이터가 보이는지 확인한다.
-
-이 순서대로 진행하면 현재 저장소 기준 Dockerized ITAM 시연 환경을 재현할 수 있다.
-
---
-
-## 17. 2026-06-16 최신 정정
-
-이 문서의 상단 본문은 한동안 사용했던 `내부 db + db-bootstrap` 구조를 기준으로 작성됐다. 하지만 오늘 기준 현재 저장소의 실제 `docker-compose.yaml`은 다시 `무상태 앱 컨테이너 + 외부 DB` 구조로 되돌아가 있다.
-
-따라서 현재 시점의 정답 아키텍처는 아래다.
-
-1. `backend` 컨테이너
-2. `frontend` 컨테이너
-3. 외부 MySQL DB
-
-현재는 더 이상 아래 항목이 없다.
-
-1. `db` 서비스 없음
-2. `db-bootstrap` 서비스 없음
-3. `itam_mysql_data` 볼륨 없음
-
-### 17.1 현재 실제 `docker-compose.yaml` 기준 backend 동작
-
-현재 backend는 `.env`의 외부 DB 접속 정보를 그대로 사용한다.
-
-즉, 아래 환경변수 매핑이 현재 기준이다.
-
-1. `DB_HOST: ${DB_HOST}`
-2. `DB_PORT: ${DB_PORT}`
-3. `DB_USER: ${DB_USER}`
-4. `DB_PASS: ${DB_PASS}`
-5. `DB_NAME: ${DB_NAME}`
-
-`PORT: 3000`만 Compose에서 고정한다.
-
-### 17.2 현재 실제 기동 구조
-
-현재 스택 기동 순서는 단순하다.
-
-1. `backend` 기동
-2. `frontend` 기동
-3. backend는 외부 DB에 직접 접속
-4. frontend는 `http://backend:3000`으로 프록시
-
-즉, 현재는 DB 컨테이너 초기화 단계나 bootstrap 단계가 존재하지 않는다.
-
-### 17.3 현재 기준 첫 실행 체크리스트
-
-오늘 기준으로는 아래 순서가 맞다.
-
-1. `.env`에 외부 DB 접속 정보 입력
-2. `start_docker_wsl.ps1` 또는 `start_docker_wsl.bat` 실행
-3. `http://localhost:3000/api/assets/master`가 200인지 확인
-4. `http://localhost:8080/api/assets/master`가 200인지 확인
-5. 브라우저에서 `http://localhost:8080` 접속 후 데이터 표시 확인
-
-### 17.4 이 문서에서 현재 유효한 부분과 과거 이력 부분
-
-현재도 그대로 유효한 내용은 아래다.
-
-1. WSL2 기반 실행 방식
-2. `start_docker_wsl.ps1` / `stop_docker_wsl.ps1` 사용 방식
-3. `server.js`에서 Compose 환경변수가 `.env`보다 우선되도록 `dotenv.config()`를 유지해야 한다는 점
-4. `vite.config.ts`에서 프록시 타깃을 환경변수화해야 한다는 점
-
-현재는 과거 이력으로만 읽어야 하는 내용은 아래다.
-
-1. 내부 `db` 서비스 설명
-2. `db-bootstrap` 설명
-3. `itam_mysql_data` 볼륨 설명
-4. 내부 DB 재초기화 절차
-5. 내부 테이블 확인 절차
-
-### 17.5 현재 최종 한 줄 요약
-
-오늘 날짜 기준 현재 저장소의 실사용 Compose 구조는 `frontend + backend + external DB`이며, 이전의 내부 DB/bootstrap 구조는 역사적으로 한 번 사용했던 임시 해결책으로만 남아 있다.
--- a/doc_readme3.md
+++ b/doc_readme3.md
@@ -1,730 +0,0 @@
-# ITAM Linux 운영 배포 가이드
-
-## 1. 문서 목적
-
-이 문서는 현재 ITAM 저장소를 기준으로 Linux 환경에서 운영 배포하는 방법을 정리한 가이드다.
-
-핵심 전제는 아래와 같다.
-
-1. 저장소 구조를 크게 재편하지 않는다.
-2. 현재 워크스페이스 기준 파일 구조를 그대로 활용한다.
-3. `docker-compose.test.yaml`과 `docker-compose.prod.yaml` 모두 현재 저장소 루트 기준으로 동작한다.
-4. DB는 Docker 내부가 아니라 외부 MySQL을 사용한다.
-
-즉, 이 문서는 `/srv/itam` 같은 별도 운영 디렉터리 구조를 강제하는 문서가 아니라, 현재 저장소 구조를 기준으로 운영 전환하는 방법을 설명한다.
-
---
-
-## 2. 현재 운영 관련 파일
-
-현재 저장소에서 운영 전환과 직접 관련된 파일은 아래와 같다.
-
-1. `docker-compose.yaml`
-2. `docker-compose.test.yaml`
-3. `docker-compose.prod.yaml`
-4. `Dockerfile.frontend.prod`
-5. `Dockerfile.backend.prod`
-6. `docker/nginx/default.conf`
-7. `docker/frontend/default.conf`
-8. `.env.example`
-9. `server.js`
-
-각 파일의 역할은 아래와 같다.
-
-1. `docker-compose.yaml`: 개발 재현용 구성
-2. `docker-compose.test.yaml`: 운영형 Dockerfile과 reverse proxy 구조를 로컬에서 검증하는 테스트용 구성
-3. `docker-compose.prod.yaml`: 현재 저장소 기준 운영용 구성
-4. `Dockerfile.frontend.prod`: 프런트 정적 빌드 및 Nginx 서빙 이미지 정의
-5. `Dockerfile.backend.prod`: 백엔드 API 운영 이미지 정의
-6. `docker/nginx/default.conf`: reverse proxy 설정
-7. `docker/frontend/default.conf`: frontend 컨테이너 내부 정적 파일 서빙 설정
-8. `.env.example`: 운영/테스트 환경변수 템플릿
-9. `server.js`: `/health`, `/ready` 엔드포인트 포함
-
---
-
-## 3. 현재 기준 운영 아키텍처
-
-현재 구조에서의 요청 흐름은 아래와 같다.
-
-1. 외부 요청은 Nginx 컨테이너로 들어온다.
-2. `/` 요청은 frontend 컨테이너로 전달된다.
-3. `/api/`와 `/uploads/` 요청은 backend 컨테이너로 전달된다.
-4. backend는 외부 MySQL에 연결한다.
-5. `uploads`, `map_config.json`, `.env`, 로그는 현재 저장소 기준 상대 경로를 사용한다.
-
-```mermaid
-flowchart LR
-  U["User Browser"] --> RP["Reverse Proxy Nginx 80"]
-  RP -->|root| FE["Frontend Container Nginx Static 80"]
-  RP -->|api| BE["Backend Container Node 3000"]
-  RP -->|uploads| BE
-  BE --> DB["External MySQL 3306"]
-  BE --> UP["./uploads"]
-  BE --> CFG["./map_config.json"]
-  BE --> ENV["./.env"]
-  linkStyle default stroke:#d32f2f,stroke-width:2px;
-```
-
-현재 저장소 기준 파일/컨테이너 관계는 아래와 같다.
-
-```mermaid
-flowchart TB
-  subgraph REPO["Current Repository Root"]
-    ENV[".env"]
-    UP["uploads/"]
-    MAP["map_config.json"]
-    LOGS["logs/nginx/"]
-    CONF["docker/nginx/default.conf"]
-  end
-
-  subgraph CTR["Containers"]
-    NGINX["itam-nginx"]
-    FRONT["itam-frontend"]
-    BACK["itam-backend"]
-  end
-
-  DB["External MySQL"]
-
-  CONF --> NGINX
-  LOGS --> NGINX
-  ENV --> BACK
-  UP --> BACK
-  MAP --> BACK
-  NGINX --> FRONT
-  NGINX --> BACK
-  BACK --> DB
-  linkStyle default stroke:#d32f2f,stroke-width:2px;
-```
-
---
-
-## 4. 개발용, 테스트용, 운영용 차이
-
-### 4.1 `docker-compose.yaml`
-
-용도:
-
-1. 개발 재현
-2. 소스 수정과 빠른 확인
-3. Vite dev server 기반 실행
-
-특징:
-
-1. bind mount 중심
-2. 프런트는 개발 서버 기반
-3. 운영 배포보다는 개발 생산성에 초점
-
-### 4.2 `docker-compose.test.yaml`
-
-용도:
-
-1. 운영형 Dockerfile 테스트
-2. reverse proxy 동작 테스트
-3. 로컬/WSL에서 8080 포트 검증
-
-특징:
-
-1. frontend/backend를 `build`로 생성
-2. nginx는 8080 포트로 노출
-3. 현재 저장소 상대 경로를 그대로 사용
-
-### 4.3 `docker-compose.prod.yaml`
-
-용도:
-
-1. 현재 저장소 구조 기준 운영 배포
-2. 운영 모드 환경변수와 health check 사용
-3. 현재 구조를 바꾸지 않고 운영 전환
-
-특징:
-
-1. frontend/backend를 `build + image` 방식으로 정의
-2. `.env`, `uploads`, `map_config.json`, `logs/nginx`를 현재 저장소 기준 상대 경로로 사용
-3. nginx는 80 포트를 사용
-4. backend는 `NODE_ENV=production`으로 실행
-
---
-
-## 5. 운영 파일 구조 기준
-
-현재 운영 배포는 저장소 루트를 기준으로 아래 구조를 전제로 한다.
-
-```text
-itam/
-  .env
-  .env.example
-  docker-compose.prod.yaml
-  docker-compose.test.yaml
-  Dockerfile.frontend.prod
-  Dockerfile.backend.prod
-  map_config.json
-  uploads/
-  logs/
-    nginx/
-  docker/
-    nginx/
-      default.conf
-    frontend/
-      default.conf
-```
-
-운영에서 실제로 중요한 경로는 아래 네 가지다.
-
-1. `./.env`
-2. `./uploads`
-3. `./map_config.json`
-4. `./logs/nginx`
-
-즉, 현재 구조를 유지하려면 이 경로들이 항상 함께 관리되어야 한다.
-
---
-
-## 6. 운영 환경변수 정책
-
-현재 기준 운영 환경변수는 저장소 루트의 `.env`를 사용한다.
-
-`.env.example` 기준 예시는 아래와 같다.
-
-```env
-DB_HOST=172.16.8.151
-DB_PORT=3306
-DB_USER=itam_admin
-DB_PASS=change-this
-DB_NAME=itam
-
-NODE_ENV=production
-PORT=3000
-LOG_LEVEL=info
-```
-
-운영 원칙은 아래와 같다.
-
-1. 실제 운영 비밀번호가 들어간 `.env`는 Git에 올리지 않는다.
-2. `.env.example`은 템플릿으로만 사용한다.
-3. 운영 서버에서는 `.env` 파일 권한을 제한한다.
-4. 운영 DB 계정과 개발 DB 계정은 분리한다.
-
-권장 권한 예시는 아래와 같다.
-
-```bash
-chmod 600 .env
-```
-
---
-
-## 7. Frontend 운영 이미지 기준
-
-`Dockerfile.frontend.prod`는 multi-stage build를 사용한다.
-
-구성은 아래와 같다.
-
-1. builder 단계에서 `npm ci` 수행
-2. `npm run build` 수행
-3. 결과물을 Nginx 이미지에 복사
-4. `docker/frontend/default.conf`로 정적 파일 서빙
-
-운영 관점에서의 장점은 아래와 같다.
-
-1. runtime 이미지에 build 결과물만 포함된다.
-2. dev server 없이 정적 파일만 제공한다.
-3. frontend 컨테이너 자체도 health check 가능하다.
-
---
-
-## 8. Backend 운영 이미지 기준
-
-`Dockerfile.backend.prod`는 아래 기준으로 작성되어 있다.
-
-1. `NODE_ENV=production`
-2. production dependency만 설치
-3. `appuser` 비루트 사용자 사용
-4. `dumb-init` 사용
-5. `/health` health check 사용
-
-backend 컨테이너는 아래 자원을 사용한다.
-
-1. `./.env`
-2. `./uploads`
-3. `./map_config.json`
-4. 외부 MySQL
-
---
-
-## 9. Reverse Proxy 기준
-
-`docker/nginx/default.conf`는 현재 아래처럼 동작한다.
-
-1. `/` -> `frontend:80`
-2. `/api/` -> `backend:3000`
-3. `/uploads/` -> `backend:3000`
-
-추가로 아래 설정을 포함한다.
-
-1. 기본 보안 헤더
-2. access/error 로그
-3. gzip 설정
-4. health endpoint
-
-중요한 점은, 현재 운영 기준에서 외부 사용자가 직접 frontend 컨테이너에 붙는 것이 아니라 반드시 nginx를 통해 들어간다는 점이다.
-
---
-
-## 10. 현재 기준 운영 배포 절차
-
-### 10.1 사전 점검
-
-아래 항목을 먼저 확인한다.
-
-1. `.env` 파일 존재 여부
-2. `uploads/` 디렉터리 존재 여부
-3. `logs/nginx/` 디렉터리 존재 여부
-4. `map_config.json` 존재 여부
-5. 외부 DB 접근 가능 여부
-
-예시:
-
-```bash
-ls -la .env
-ls -la uploads
-ls -la logs/nginx
-ls -la map_config.json
-```
-
-### 10.2 Compose 검증
-
-```bash
-docker compose -f docker-compose.prod.yaml config
-```
-
-### 10.3 운영 기동
-
-```bash
-docker compose -f docker-compose.prod.yaml up -d --build
-docker compose -f docker-compose.prod.yaml ps
-```
-
-### 10.4 운영 중지
-
-```bash
-docker compose -f docker-compose.prod.yaml down
-```
-
-### 10.5 운영/배포 분기 흐름
-
-현재 운영 반영은 자동 push 배포가 아니라, Gitea에 올라간 커밋을 기준으로 수동 workflow를 실행하는 방식이다.
-
-즉 아래 원칙으로 이해하면 된다.
-
-1. 로컬 수정본을 서버에 직접 복사하지 않는다.
-2. 반드시 Gitea에 올라간 커밋을 기준으로 배포한다.
-3. 운영 반영은 `.gitea/workflows/itam_production_deploy.yml` 수동 실행으로 진행한다.
-4. 실패 후 재배포는 실패 지점에 따라 수정 위치가 달라진다.
-
-운영 반영은 크게 세 상황으로 나뉜다.
-
-1. 최초 운영 서버 구축 후 첫 배포
-2. 코드 수정 후 일반 재배포
-3. 배포 실패 또는 검증 실패 후 재배포
-
-```mermaid
-flowchart TD
-  START["배포 필요 발생"] --> CASE{"어떤 상황인가?"}
-
-  CASE -->|초기 구축| INIT["초기 운영 배포 준비"]
-  CASE -->|수정 반영| CHANGE["수정 후 재배포 준비"]
-  CASE -->|실패 후 재시도| RETRY["실패 원인 분석 후 재배포 준비"]
-
-  INIT --> INIT1["운영 서버 Docker / compose 확인"]
-  INIT1 --> INIT2["Gitea Variables / Secrets 등록"]
-  INIT2 --> INIT3["map_config.json / uploads 초기 데이터 준비"]
-  INIT3 --> MANUAL["Gitea에서 수동 배포 workflow 실행"]
-
-  CHANGE --> CHANGE1["로컬 수정 및 테스트"]
-  CHANGE1 --> CHANGE2["Gitea 커밋 / push"]
-  CHANGE2 --> CHANGE3["Code Check / Docker Build Check 통과"]
-  CHANGE3 --> MANUAL
-
-  RETRY --> RETRY1{"어디서 실패했는가?"}
-  RETRY1 -->|코드 체크 실패| FIX1["코드 또는 설정 수정"]
-  RETRY1 -->|배포 단계 실패| FIX2["서버 / 변수 / 권한 / 네트워크 수정"]
-  RETRY1 -->|Smoke Check 실패| FIX3["앱 기동 상태 / 프록시 / DB 상태 수정"]
-  FIX1 --> CHANGE2
-  FIX2 --> MANUAL
-  FIX3 --> MANUAL
-
-  MANUAL --> BACKUP["기존 운영 상태가 있으면 배포 전 백업"]
-  BACKUP --> DEPLOY["운영 서버 반영 수행"]
-  DEPLOY --> RESULT{"최종 검증 통과?"}
-  RESULT -->|예| DONE["운영 반영 완료"]
-  RESULT -->|아니오| RETRY
-  linkStyle default stroke:#d32f2f,stroke-width:2px;
-```
-
-### 10.6 최초 운영 배포 플로우
-
-최초 배포에서는 코드보다 운영 환경 준비가 먼저다.
-
-순서는 아래와 같다.
-
-1. 운영 서버에 Docker Engine과 `docker compose`를 설치한다.
-2. 운영 서버에서 Gitea 저장소에 접근 가능한 SSH 키를 준비한다.
-3. Gitea repository Variables / Secrets를 등록한다.
-4. `PROD_DEPLOY_PATH` 경로를 확정한다.
-5. `PROD_BACKUP_ROOT` 경로를 `PROD_DEPLOY_PATH` 바깥으로 확정한다.
-6. `map_config.json`, `uploads/` 초기 데이터를 준비한다.
-7. Gitea에서 `itam_production_deploy.yml`을 수동 실행한다.
-8. 배포 후 `docker compose ps`, `/health`, `/`, `/ready`를 확인한다.
-
-즉 최초 배포는 아래 순서다.
-
-```text
-서버 준비 완료
-> Gitea 변수 / 시크릿 등록 완료
-> 백업 경로 확정 완료
-> 초기 데이터 준비 완료
-> 수동 배포 실행
-```
-
-### 10.7 수정 후 일반 재배포 플로우
-
-일반적인 수정 반영은 아래 흐름이다.
-
-1. 개발자가 로컬에서 코드 또는 설정을 수정한다.
-2. 로컬에서 필요한 테스트를 수행한다.
-3. 변경사항을 Gitea에 커밋 후 push 한다.
-4. `itam_code_check.yml`이 빌드와 compose 문법을 검사한다.
-5. `itam_docker_build_check.yml`이 운영용 이미지 빌드 가능 여부를 검사한다.
-6. 두 검증이 통과하면 운영자가 Gitea에서 `itam_production_deploy.yml`을 수동 실행한다.
-7. 기존 운영 상태가 있으면 배포 전 백업을 먼저 수행한다.
-8. 운영 서버가 최신 커밋으로 동기화되고 컨테이너가 다시 올라온다.
-9. smoke check 통과 여부를 확인한다.
-
-```mermaid
-flowchart LR
-  DEV["로컬 수정"] --> TEST["로컬 확인"]
-  TEST --> PUSH["커밋 / push"]
-  PUSH --> CODE["ITAM Code Check"]
-  CODE --> BUILD["ITAM Docker Build Check"]
-  BUILD --> GATE{"검증 통과?"}
-  GATE -->|예| RUN["Gitea에서 수동 배포 실행"]
-  GATE -->|아니오| FIX["로컬 수정 후 재커밋"]
-  FIX --> PUSH
-  RUN --> BACKUP["배포 전 백업"]
-  BACKUP --> PROD["운영 서버 배포"]
-  PROD --> SMOKE{"Smoke Check 통과?"}
-  SMOKE -->|예| OK["배포 완료"]
-  SMOKE -->|아니오| FIXDEPLOY["원인 수정 후 재배포"]
-  FIXDEPLOY --> RUN
-  linkStyle default stroke:#d32f2f,stroke-width:2px;
-```
-
-### 10.8 수동 배포 workflow 내부 실행 순서
-
-Gitea에서 `itam_production_deploy.yml`을 수동 실행하면 내부적으로는 아래 순서로 진행된다.
-
-1. SSH agent를 설정한다.
-2. 필수 Variables / Secrets가 모두 있는지 확인한다.
-3. 운영용 `.env.deploy` 파일을 생성한다.
-4. 운영 서버에 접속한다.
-5. `PROD_DEPLOY_PATH`를 생성한다.
-6. 기존 운영 상태가 있으면 `make predeploy-backup`을 실행한다.
-7. 저장소를 clone 또는 fetch 한다.
-8. 선택한 브랜치의 최신 커밋으로 checkout, reset, clean 한다.
-9. `uploads`, `logs/nginx` 디렉토리를 준비한다.
-10. `.env.deploy`를 서버의 `.env`로 복사한다.
-11. `docker compose -f docker-compose.prod.yaml config`를 수행한다.
-12. `docker compose -f docker-compose.prod.yaml up -d --build`를 수행한다.
-13. `docker compose ps`를 확인한다.
-14. `/health`, `/`, backend `/ready` smoke check를 수행한다.
-
-```mermaid
-flowchart TD
-  A["수동 배포 시작"] --> B["SSH agent 설정"]
-  B --> C["Variables / Secrets 검증"]
-  C --> D{"필수 값 누락 여부"}
-  D -->|예| E["즉시 실패 후 설정 보완"]
-  D -->|아니오| F[".env.deploy 생성"]
-  F --> G["운영 서버 SSH 접속"]
-  G --> H["배포 경로 생성"]
-  H --> I["기존 운영 상태가 있으면 make predeploy-backup"]
-  I --> J["git clone 또는 fetch"]
-  J --> K["지정 브랜치 checkout / reset / clean"]
-  K --> L["uploads / logs/nginx 준비"]
-  L --> M[".env 업로드 및 권한 설정"]
-  M --> N["compose config 검증"]
-  N --> O{"compose config 성공?"}
-  O -->|아니오| P["설정 수정 후 재실행"]
-  O -->|예| Q["compose up -d --build"]
-  Q --> R["docker compose ps 확인"]
-  R --> S["/health, /, /ready smoke check"]
-  S --> T{"smoke check 성공?"}
-  T -->|예| U["운영 배포 완료"]
-  T -->|아니오| V["원인 분석 후 재배포"]
-  linkStyle default stroke:#d32f2f,stroke-width:2px;
-```
-
-### 10.9 실패 후 검증 및 재배포 플로우
-
-실패가 났다고 해서 같은 방식으로 바로 다시 배포하면 안 된다.
-
-실패 지점별 판단은 아래처럼 나눈다.
-
-1. Code Check 실패: TypeScript, build, compose 문법 문제를 먼저 수정한다.
-2. Docker Build Check 실패: Dockerfile, 정적 자산 복사, 운영 빌드 컨텍스트 문제를 수정한다.
-3. Deploy 단계 실패: SSH, Gitea 변수, 서버 권한, 경로, 백업 경로, git 접근, Docker 권한을 수정한다.
-4. Smoke Check 실패: Nginx 프록시, backend readiness, 외부 DB 연결, 앱 런타임 오류를 수정한다.
-
-즉 재배포 전 판단 기준은 아래와 같다.
-
-```text
-CI 실패 -> 로컬 코드 / 설정 수정 후 재커밋
-배포 실패 -> 서버 환경 또는 배포 설정 수정 후 수동 재실행
-Smoke Check 실패 -> 앱 / 프록시 / DB 상태 수정 후 수동 재실행
-```
-
-운영 관점에서는 아래 순서를 지키는 것이 안전하다.
-
-1. 실패 지점 확인
-2. 원인 수정
-3. 같은 실패가 다시 나는지 좁은 범위로 재검증
-4. 그 다음에만 수동 배포 재실행
-
---
-
-## 11. 테스트 배포 절차
-
-운영형 구성을 먼저 검증하려면 아래처럼 진행한다.
-
-```bash
-docker compose -f docker-compose.test.yaml up -d --build
-docker compose -f docker-compose.test.yaml ps
-```
-
-접속 기준은 아래와 같다.
-
-1. `http://localhost:8080` -> nginx reverse proxy
-2. `http://localhost:3000/health` -> backend health 확인
-
-테스트용은 운영과 매우 유사하지만, 외부 노출 포트와 일부 실행 목적이 다르다.
-
---
-
-## 12. Health Check 및 상태 판정
-
-backend에는 아래 두 엔드포인트가 있다.
-
-1. `/health`
-2. `/ready`
-
-판정 기준은 아래와 같다.
-
-1. `/health = 200`, `/ready = 200`: 정상 서비스 가능 상태
-2. `/health = 200`, `/ready = 503`: 프로세스는 살아 있으나 DB 또는 외부 의존성 미준비
-
-확인 예시는 아래와 같다.
-
-```bash
-curl http://localhost:3000/health
-curl http://localhost:3000/ready
-```
-
---
-
-## 13. 운영 점검 체크리스트
-
-### 13.1 애플리케이션
-
-1. `docker compose -f docker-compose.prod.yaml config` 통과 여부
-2. frontend 이미지 빌드 성공 여부
-3. backend 이미지 빌드 성공 여부
-4. 모든 컨테이너가 `Up` 상태인지
-5. 메인 화면이 정상 렌더링되는지
-6. 데이터 조회가 정상 동작하는지
-
-### 13.2 데이터 및 파일
-
-1. `uploads/`에 쓰기 가능한지
-2. `map_config.json`을 backend가 읽을 수 있는지
-3. `.env` 파일 권한이 적절한지
-4. `logs/nginx/`에 로그가 쌓이는지
-
-### 13.3 네트워크
-
-1. 외부 DB 접근 가능한지
-2. nginx에서 backend upstream 연결이 되는지
-3. `/api` 요청이 정상 응답하는지
-
---
-
-## 14. 로그 및 장애 대응
-
-기본 점검 명령은 아래와 같다.
-
-```bash
-docker compose -f docker-compose.prod.yaml ps
-docker compose -f docker-compose.prod.yaml logs --tail=200 nginx
-docker compose -f docker-compose.prod.yaml logs --tail=200 backend
-docker compose -f docker-compose.prod.yaml logs --tail=200 frontend
-```
-
-장애 확인 순서는 아래가 좋다.
-
-1. 컨테이너가 살아 있는지
-2. nginx가 frontend/backend로 프록시하는지
-3. backend가 DB에 붙는지
-4. 업로드/설정 파일 권한 문제는 없는지
-
-추가 확인 예시는 아래와 같다.
-
-```bash
-curl -I http://localhost/
-curl http://localhost:3000/health
-curl http://localhost:3000/ready
-```
-
---
-
-## 15. 백업 기준
-
-현재 구조 기준 최소 백업 대상은 아래와 같다.
-
-1. `.env`
-2. `uploads/`
-3. `map_config.json`
-4. 외부 MySQL 데이터베이스
-
-현재 저장소에는 운영 백업을 직접 실행할 수 있도록 `Makefile`과 `scripts/backup.sh`가 추가되어 있다.
-
-기본 원칙은 아래와 같다.
-
-1. DB dump와 런타임 파일 백업을 분리해서 실행할 수 있어야 한다.
-2. 기본 백업 산출물은 `backups/` 디렉터리에 쌓는다.
-3. DB 접속 정보는 `.env`를 기준으로 읽는다.
-4. 오래된 백업 파일은 보존 주기에 따라 정리한다.
-
-백업 실행 흐름은 아래와 같다.
-
-```mermaid
-flowchart TD
-  START["운영 백업 실행"] --> TARGET{"무엇을 백업할 것인가?"}
-  TARGET -->|DB| DB["make db-dump"]
-  TARGET -->|운영 파일| FILES["make files-backup"]
-  TARGET -->|전체| FULL["make full-backup"]
-  DB --> OUT1["backups/db/*.sql.gz"]
-  FILES --> OUT2["backups/files/*.tar.gz"]
-  FULL --> OUT1
-  FULL --> OUT2
-  OUT1 --> CLEAN["make cleanup-backups"]
-  OUT2 --> CLEAN
-  linkStyle default stroke:#d32f2f,stroke-width:2px;
-```
-
-### 15.1 Make 명령 기준
-
-사용 가능한 기본 명령은 아래와 같다.
-
-```bash
-make db-dump
-make files-backup
-make full-backup
-make cleanup-backups
-```
-
-각 명령의 역할은 아래와 같다.
-
-1. `make db-dump`: `.env` 기준 MySQL dump를 `backups/db/`에 `.sql.gz`로 저장
-2. `make files-backup`: `.env`, `uploads/`, `map_config.json`을 `backups/files/`에 `.tar.gz`로 저장
-3. `make full-backup`: DB dump와 파일 백업을 한 번에 수행
-4. `make cleanup-backups`: 기본 14일이 지난 백업 파일 정리
-
-### 15.2 실행 예시
-
-가장 단순한 전체 백업 예시는 아래와 같다.
-
-```bash
-make full-backup
-```
-
-DB dump만 별도로 실행하려면 아래처럼 사용한다.
-
-```bash
-make db-dump
-```
-
-운영 파일만 묶으려면 아래처럼 사용한다.
-
-```bash
-make files-backup
-```
-
-보존 주기를 30일로 바꿔 정리하려면 아래처럼 사용한다.
-
-```bash
-make cleanup-backups RETENTION_DAYS=30
-```
-
-백업 경로를 별도 디스크나 마운트 경로로 바꾸려면 아래처럼 사용한다.
-
-```bash
-make full-backup BACKUP_ROOT=/opt/itam-backups
-```
-
-### 15.3 현재 스크립트가 실제로 백업하는 대상
-
-현재 `scripts/backup.sh`는 아래 규칙으로 동작한다.
-
-1. `.env` 파일에서 `DB_HOST`, `DB_PORT`, `DB_USER`, `DB_PASS`, `DB_NAME`을 읽는다.
-2. `mysqldump --single-transaction --quick --routines --triggers` 옵션으로 dump를 생성한다.
-3. DB dump는 gzip 압축본으로 저장한다.
-4. 파일 백업은 `.env`, `uploads/`, `map_config.json` 중 실제로 존재하는 항목만 묶는다.
-5. 백업 정리는 `find ... -mtime` 기준으로 수행한다.
-
-즉 현재 스크립트는 운영 서버 또는 백업 서버에서 바로 실행 가능한 최소 백업 도구로 보면 된다.
-
-### 15.4 운영 사용 권장 방식
-
-운영에서는 아래 방식이 가장 현실적이다.
-
-1. 매일 새벽 cron 또는 systemd timer로 `make full-backup` 실행
-2. 백업 완료 후 `make cleanup-backups` 실행
-3. `backups/` 또는 별도 `BACKUP_ROOT` 경로를 NAS 또는 외부 백업 스토리지로 추가 복사
-4. 최소 월 1회 restore 테스트 수행
-
-가장 단순한 예시는 아래와 같다.
-
-```bash
-make full-backup BACKUP_ROOT=/opt/itam-backups
-make cleanup-backups BACKUP_ROOT=/opt/itam-backups RETENTION_DAYS=30
-```
-
-DB 백업 자체는 여전히 DB 서버 정책과 함께 관리하는 것이 가장 안전하지만, 현재 저장소 기준 운영 자동화 진입점은 위 `make` 명령으로 통일해도 된다.
-
---
-
-## 16. 롤백 기준
-
-현재 구조에서는 가장 단순한 롤백 방식이 아래와 같다.
-
-1. 이전 정상 커밋 또는 파일 상태 확보
-2. 이미지 재빌드 또는 이전 이미지 재사용
-3. `docker compose -f docker-compose.prod.yaml up -d --build` 재실행
-4. `/health`, `/ready`, 메인 화면, 핵심 API 재검증
-
-즉, 현재 구조에서는 별도 디렉터리 재배치보다 현재 저장소 상태 관리와 compose 재기동이 롤백의 중심이 된다.
-
---
-
-## 17. 결론
-
-현재 ITAM 저장소는 별도 `/srv/itam` 구조로 옮기지 않아도, 지금 파일 구조를 유지한 채 운영형 배포 흐름으로 전환할 수 있다.
-
-정리하면 아래와 같다.
-
-1. test와 prod 모두 현재 저장소 구조 기준으로 통일한다.
-2. `.env`, `uploads`, `map_config.json`, `logs/nginx`를 운영 핵심 경로로 본다.
-3. reverse proxy는 현재 `docker/nginx/default.conf`를 기준으로 운영한다.
-4. backend는 production 모드, health check, 외부 DB 연결 구조를 유지한다.
-5. 큰 구조 변경 없이도 운영 전환이 가능하다.
-
-남은 작업은 TLS, 로그 로테이션, CI/CD, 보안 점검을 현재 구조 기준으로 계속 보강하는 것이다.
--- a/docker-compose.prod.yaml
+++ b/docker-compose.prod.yaml
@@ -1,57 +0,0 @@
-services:
-  backend:
-    image: itam-backend:prod
-    build:
-      context: .
-      dockerfile: Dockerfile.backend.prod
-    container_name: itam-backend
-    working_dir: /app
-    env_file:
-      - .env
-    environment:
-      NODE_ENV: production
-      PORT: 3000
-    volumes:
-      - ./uploads:/app/uploads
-      - ./map_config.json:/app/map_config.json:ro
-    expose:
-      - "3000"
-    restart: unless-stopped
-    healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:3000/health"]
-      interval: 30s
-      timeout: 10s
-      retries: 3
-      start_period: 40s
-
-  frontend:
-    image: itam-frontend:prod
-    build:
-      context: .
-      dockerfile: Dockerfile.frontend.prod
-    container_name: itam-frontend
-    expose:
-      - "80"
-    restart: unless-stopped
-
-  nginx:
-    image: nginx:stable-alpine
-    container_name: itam-nginx
-    ports:
-      - "9090:80"
-    volumes:
-      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf:ro
-      - ./logs/nginx:/var/log/nginx
-    depends_on:
-      backend:
-        condition: service_healthy
-      frontend:
-        condition: service_started
-    restart: unless-stopped
-    healthcheck:
-      test: ["CMD", "wget", "--quiet", "--tries=1", "--spider", "http://localhost:80/"]
-      interval: 30s
-      timeout: 10s
-      retries: 3
-      start_period: 20s
-
--- a/docker-compose.test.yaml
+++ b/docker-compose.test.yaml
@@ -1,62 +0,0 @@
-# Local testing compose file - uses relative paths and build contexts
-# Usage: docker compose -f docker-compose.test.yaml up --build
-
-services:
-  backend:
-    build:
-      context: .
-      dockerfile: Dockerfile.backend.prod
-    container_name: itam-backend-test
-    working_dir: /app
-    env_file:
-      - .env
-    environment:
-      NODE_ENV: development
-      PORT: 3000
-      DB_HOST: ${DB_HOST:-172.16.8.151}
-      DB_PORT: ${DB_PORT:-3306}
-      DB_USER: ${DB_USER:-root}
-      DB_PASS: ${DB_PASS:-}
-      DB_NAME: ${DB_NAME:-itam}
-    ports:
-      - "3000:3000"
-    volumes:
-      - ./uploads:/app/uploads
-      - ./map_config.json:/app/map_config.json:ro
-    restart: unless-stopped
-    healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:3000/health"]
-      interval: 30s
-      timeout: 10s
-      retries: 3
-      start_period: 40s
-
-  frontend:
-    build:
-      context: .
-      dockerfile: Dockerfile.frontend.prod
-    container_name: itam-frontend-test
-    expose:
-      - "80"
-    restart: unless-stopped
-
-  nginx:
-    image: nginx:stable-alpine
-    container_name: itam-nginx-test
-    ports:
-      - "8080:80"
-    volumes:
-      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf:ro
-      - ./logs/nginx:/var/log/nginx
-    depends_on:
-      backend:
-        condition: service_healthy
-      frontend:
-        condition: service_started
-    restart: unless-stopped
-    healthcheck:
-      test: ["CMD", "wget", "--quiet", "--tries=1", "--spider", "http://localhost:80/"]
-      interval: 30s
-      timeout: 10s
-      retries: 3
-      start_period: 20s
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -1,48 +0,0 @@
-services:
-  backend:
-    build:
-      context: .
-      dockerfile: Dockerfile.backend
-    container_name: dachs-backend
-    working_dir: /app
-    env_file:
-      - .env
-    environment:
-      DB_HOST: ${DB_HOST}
-      DB_PORT: ${DB_PORT}
-      DB_USER: ${DB_USER}
-      DB_PASS: ${DB_PASS}
-      DB_NAME: ${DB_NAME}
-      PORT: 3000
-    ports:
-      - "3000:3000"
-    volumes:
-      - ./:/app
-      - backend_node_modules:/app/node_modules
-      - ./uploads:/app/uploads
-      - ./map_config.json:/app/map_config.json
-    command: npm run server
-    restart: unless-stopped
-
-  frontend:
-    build:
-      context: .
-      dockerfile: Dockerfile.frontend
-    container_name: dachs-frontend
-    working_dir: /app
-    depends_on:
-      - backend
-    environment:
-      CHOKIDAR_USEPOLLING: "true"
-      VITE_DEV_PROXY_TARGET: http://backend:3000
-    ports:
-      - "8080:8080"
-    volumes:
-      - ./:/app
-      - frontend_node_modules:/app/node_modules
-    command: npm run dev -- --host 0.0.0.0
-    restart: unless-stopped
-
-volumes:
-  backend_node_modules:
-  frontend_node_modules:
--- a/docker/frontend/default.conf
+++ b/docker/frontend/default.conf
@@ -1,55 +0,0 @@
-server {
-    listen 80;
-    listen [::]:80;
-    server_name _;
-
-    root /usr/share/nginx/html;
-
-    # Logging
-    access_log /var/log/nginx/frontend-access.log main;
-    error_log /var/log/nginx/frontend-error.log warn;
-
-    # Security headers
-    add_header X-Frame-Options "SAMEORIGIN" always;
-    add_header X-Content-Type-Options "nosniff" always;
-    add_header X-XSS-Protection "1; mode=block" always;
-    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
-
-    # Gzip compression
-    gzip on;
-    gzip_types text/plain text/css text/xml text/javascript 
-               application/x-javascript application/xml+rss 
-               application/json application/javascript;
-    gzip_min_length 1000;
-
-    # Serve static files with SPA fallback
-    location / {
-        try_files $uri $uri/ /index.html;
-    }
-
-    # Cache static assets (60 days)
-    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|webp|woff|woff2|ttf|eot)$ {
-        expires 60d;
-        add_header Cache-Control "public, immutable";
-    }
-
-    # Don't cache HTML files
-    location ~* \.html$ {
-        expires -1;
-        add_header Cache-Control "no-cache, no-store, must-revalidate";
-    }
-
-    # Health check
-    location /health {
-        access_log off;
-        return 200 "OK\n";
-        add_header Content-Type text/plain;
-    }
-
-    # Deny access to sensitive files
-    location ~ /\. {
-        deny all;
-        access_log off;
-        log_not_found off;
-    }
-}
--- a/docker/mysql/init/README.md
+++ b/docker/mysql/init/README.md
@@ -1,16 +0,0 @@
-# MySQL init directory
-
-This directory is kept as a legacy hook for file-based MySQL initialization.
-
-Current production path in this repository is not file-based import.
-The live Docker flow uses the `db-bootstrap` service in `docker-compose.yaml` to stream data from the external source DB into the internal `db` container.
-
-Use this directory only if you intentionally switch back to `docker-entrypoint-initdb.d` style initialization.
-
-If you do that, typical naming would be:
-
- `01_schema.sql`
- `02_seed.sql`
- or a single `01_itam_dump.sql`
-
-Remember that files in this directory are executed automatically by the MySQL container only on the first initialization of the data volume.
--- a/docker/nginx/default.conf
+++ b/docker/nginx/default.conf
@@ -1,101 +0,0 @@
-upstream backend {
-    server backend:3000;
-}
-
-upstream frontend {
-    server frontend:80;
-}
-
-server {
-    listen 80;
-    listen [::]:80;
-    server_name _;
-
-    # Client upload size limit (adjust as needed)
-    client_max_body_size 100M;
-
-    # Logging
-    access_log /var/log/nginx/access.log main;
-    error_log /var/log/nginx/error.log warn;
-
-    # Security headers
-    add_header X-Frame-Options "SAMEORIGIN" always;
-    add_header X-Content-Type-Options "nosniff" always;
-    add_header X-XSS-Protection "1; mode=block" always;
-    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
-
-    # Gzip compression
-    gzip on;
-    gzip_types text/plain text/css text/xml text/javascript 
-               application/x-javascript application/xml+rss 
-               application/json application/javascript;
-    gzip_min_length 1000;
-
-    # Forward all app requests to the frontend container
-    location / {
-        proxy_pass http://frontend;
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
-        proxy_http_version 1.1;
-    }
-
-    # API proxy to backend
-    location /api/ {
-        proxy_pass http://backend/api/;
-        
-        # Preserve original request information
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
-        proxy_set_header X-Forwarded-Host $server_name;
-        proxy_set_header X-Forwarded-Port $server_port;
-        
-        # Connection settings
-        proxy_connect_timeout 60s;
-        proxy_send_timeout 60s;
-        proxy_read_timeout 60s;
-        
-        # Buffering settings
-        proxy_buffering on;
-        proxy_buffer_size 4k;
-        proxy_buffers 8 4k;
-        proxy_busy_buffers_size 8k;
-    }
-
-    # Uploads proxy to backend
-    location /uploads/ {
-        proxy_pass http://backend/uploads/;
-        
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
-        
-        # Cache uploads
-        expires 30d;
-        add_header Cache-Control "public";
-    }
-
-    # Health check endpoint (for monitoring)
-    location /health {
-        access_log off;
-        return 200 "OK\n";
-        add_header Content-Type text/plain;
-    }
-
-    # Deny access to sensitive files
-    location ~ /\. {
-        deny all;
-        access_log off;
-        log_not_found off;
-    }
-
-    location ~ ~$ {
-        deny all;
-        access_log off;
-        log_not_found off;
-    }
-}
--- a/docker_task_plan.md
+++ b/docker_task_plan.md
@@ -1,330 +0,0 @@
-# ITAM 도커라이징 작업 태스크 정리
-
-## 1. 문서 목적
-
-이 문서는 ITAM 자산관리 시스템의 도커라이징 작업을 실제 실행 단위로 쪼개서 정리한 태스크 문서다.
-
-이 문서의 목표는 아래와 같다.
-
-1. 내일까지 보여줄 시연 범위를 기준으로 우선순위를 정한다.
-2. 시연용 작업과 운영형 전환 작업을 분리한다.
-3. 개발 담당자가 바로 실행할 수 있는 체크리스트를 제공한다.
-
-관련 배경과 구조 분석은 [doc_readme.md](c:/Users/user/Desktop/안건%20파일/itam/doc_readme.md) 문서를 기준으로 한다.
-
-현재 구현/검증 상태:
-
- `Dockerfile.frontend` 생성 완료
- `Dockerfile.backend` 생성 완료
- `docker-compose.yaml` 생성 완료
- `.dockerignore` 생성 완료
- WSL2 Ubuntu에서 `docker compose up --build -d` 검증 완료
- frontend 8080 응답 확인 완료
- backend `/api/assets/master` 응답 확인 완료
- 현재 DB는 external MySQL 기준이며, DB 컨테이너 추가 작업은 다음 단계로 남아 있음
-
-## 2. 이번 작업의 최우선 목표
-
-이번 도커라이징의 1차 목표는 "운영 배포 완료"가 아니라 아래 상태를 재현하는 것이다.
-
-1. frontend 컨테이너가 정상 기동한다.
-2. backend 컨테이너가 정상 기동한다.
-3. backend가 기존 외부 MySQL 또는 MySQL 컨테이너에 정상 연결된다.
-4. 브라우저에서 화면이 열린다.
-5. 핵심 API 호출이 정상 동작한다.
-6. 업로드 저장 경로가 유지된다.
-7. 필요 시 DB까지 함께 포함된 재현 가능한 스택을 제공한다.
-
-## 3. 작업 범위 구분
-
-### 3.1 이번 시연 범위에 포함
-
- Dockerfile.frontend 초안 작성
- Dockerfile.backend 초안 작성
- docker-compose.yaml 작성
- `.dockerignore` 작성
- MySQL 컨테이너 추가 설계
- 초기 SQL dump 또는 init SQL 적재 방식 정의
- `uploads` 볼륨 처리
- `map_config.json` 영속성 처리 방식 반영
- 컨테이너 기동 및 접속 확인
- 핵심 API 및 화면 확인
-
-### 3.2 이번 시연 범위에서 제외
-
- DB 전체 마이그레이션 자동화
- nginx 기반 운영 배포 구조
- 단일 이미지 운영 구조 전환
- CI/CD 연계
-
-## 4. 선행 확인 태스크
-
-아래 태스크는 실제 Docker 파일 작성 전에 먼저 확인해야 한다.
-
-### Task 1. 외부 MySQL 접근 가능 여부 확인
-
- 목적: 컨테이너에서 외부 DB 접속이 가능한지 확인
- 확인 항목:
-  - DB_HOST 접근 가능 여부
-  - DB_PORT 3306 접속 가능 여부
-  - 계정 권한 정상 여부
- 완료 기준:
-  - backend 컨테이너 기준 DB 연결 에러가 발생하지 않음
-
-### Task 2. 기준 스키마 상태 확인
-
- 목적: 현재 앱이 요구하는 테이블 구조가 실제 DB와 맞는지 확인
- 확인 항목:
-  - `asset_core`
-  - `asset_spec`
-  - `asset_location`
-  - `asset_remote`
-  - `asset_history`
-  - `hardware_components_master`
-  - `job_spec_standards`
- 완료 기준:
-  - `/api/assets/master` 호출 시 쿼리 에러가 발생하지 않음
-
-### Task 3. 파일 영속성 대상 확인
-
- 목적: 컨테이너 재시작 이후에도 유지되어야 할 파일/폴더 식별
- 대상:
-  - `uploads`
-  - `map_config.json`
- 완료 기준:
-  - 볼륨 설계 대상이 명확하게 문서화됨
-
-### Task 4. DB 기준 데이터 소스 확정
-
- 목적: MySQL 컨테이너 최초 기동 시 어떤 데이터로 초기화할지 결정
- 선택지:
-  - 기존 사내 DB에서 추출한 SQL dump 사용
-  - 정리된 스키마 SQL + seed SQL 사용
-  - 수동 import 절차 사용
- 완료 기준:
-  - `docker/mysql/init` 기준 적재 전략 또는 수동 복원 절차가 확정됨
-
-## 5. 시연용 도커라이징 태스크
-
-### Task 5. 프런트 Dockerfile 작성
-
- 목적: Vite 개발 서버를 컨테이너에서 구동
- 작업 내용:
-  - Node 20 계열 이미지 사용
-  - `package*.json` 복사 후 `npm install`
-  - 8080 포트 노출
-  - `npm run dev -- --host 0.0.0.0` 실행
- 산출물:
-  - `Dockerfile.frontend`
- 완료 기준:
-  - 컨테이너에서 8080 포트가 정상 listen 상태가 됨
-
-### Task 6. 백엔드 Dockerfile 작성
-
- 목적: Express API 서버를 컨테이너에서 구동
- 작업 내용:
-  - Node 20 계열 이미지 사용
-  - `package*.json` 복사 후 `npm install`
-  - 3000 포트 노출
-  - `npm run server` 실행
- 산출물:
-  - `Dockerfile.backend`
- 완료 기준:
-  - 컨테이너에서 3000 포트가 정상 listen 상태가 됨
-
-### Task 7. MySQL Docker 구성 추가
-
- 목적: DB까지 포함한 재현 가능한 스택 구성
- 작업 내용:
-  - `mysql:8.0` 서비스 정의
-  - `MYSQL_DATABASE`, `MYSQL_USER`, `MYSQL_PASSWORD` 설정
-  - utf8mb4 문자셋 옵션 반영
-  - MySQL 데이터 volume 연결
-  - 초기 SQL 적재용 `docker/mysql/init` 디렉터리 설계
- 산출물:
-  - `docker-compose.yaml` 내 `db` 서비스 또는 별도 DB compose 확장안
- 완료 기준:
-  - MySQL 컨테이너가 정상 기동하고 3306 포트에서 응답 가능
-
-### Task 8. backend DB 연결 전환
-
- 목적: backend가 external MySQL 대신 DB 컨테이너를 바라보도록 변경
- 작업 내용:
-  - `DB_HOST`를 `db`로 전환
-  - 필요 시 `.env.docker` 또는 compose 내부 환경변수 사용
-  - backend `depends_on`에 db 추가
- 산출물:
-  - DB 컨테이너용 backend 환경 정의
- 완료 기준:
-  - backend 로그에서 DB 연결 성공 확인
-
-### Task 9. docker-compose.yaml 확장
-
- 목적: frontend/backend를 함께 기동
- 작업 내용:
-  - frontend 서비스 정의
-  - backend 서비스 정의
-  - db 서비스 정의
-  - 포트 매핑 추가
-  - `.env` 또는 docker 전용 환경변수 연결
-  - MySQL 데이터 볼륨 연결
-  - `uploads` 볼륨 연결
-  - `map_config.json` 처리 방식 반영
- 산출물:
-  - `docker-compose.yaml`
- 완료 기준:
-  - `docker compose up --build` 한 번으로 세 서비스가 모두 올라옴
-
-### Task 10. `.dockerignore` 작성
-
- 목적: 불필요한 빌드 컨텍스트 제외
- 제외 권장 항목:
-  - `node_modules`
-  - `dist`
-  - `build`
-  - `.git`
-  - `uploads`
-  - `*.xlsx`
- 산출물:
-  - `.dockerignore`
- 완료 기준:
-  - 이미지 빌드 컨텍스트가 과도하게 커지지 않음
-
-## 6. 시연 검증 태스크
-
-### Task 11. WSL 컨테이너 기동 검증
-
- 실행 명령:
-
-```bash
-powershell -ExecutionPolicy Bypass -File .\start_docker_wsl.ps1
-```
-
- 확인 항목:
-  - frontend 로그 에러 여부
-  - backend 로그 에러 여부
-  - db 로그 에러 여부
-  - backend와 db 연결 성공 여부
- 완료 기준:
-  - 세 컨테이너 모두 종료 없이 유지됨
-
-### Task 12. 웹 접속 검증
-
- 확인 항목:
-  - `http://localhost:8080` 접속 가능 여부
-  - 첫 화면 로딩 여부
-  - 콘솔 에러 여부
- 완료 기준:
-  - 브라우저에서 초기 화면이 정상 표시됨
-
-### Task 13. API 검증
-
- 확인 항목:
-  - `http://localhost:3000/api/assets/master`
-  - 프런트에서 `/api/assets/master` 호출 정상 여부
- 완료 기준:
-  - 200 응답 또는 정상 데이터 응답 확인
-
-### Task 14. DB 초기 데이터 검증
-
- 확인 항목:
-  - MySQL 컨테이너 내부에 목표 DB가 생성되었는지
-  - 기준 테이블이 존재하는지
-  - 샘플 데이터 또는 실데이터가 적재되었는지
- 완료 기준:
-  - backend가 기대하는 최소 테이블과 데이터가 실제로 조회됨
-
-### Task 15. 업로드/파일 저장 검증
-
- 확인 항목:
-  - `/api/upload` 호출 정상 여부
-  - 업로드 파일이 `uploads`에 실제 저장되는지
-  - `map_config.json` 수정 내용이 유지되는지
- 완료 기준:
-  - 컨테이너 재시작 후에도 저장 데이터가 유지됨
-
-## 7. 시연 후 후속 태스크
-
-### Task 16. 운영형 프런트 배포 구조 전환
-
- 목표: Vite dev server 대신 정적 빌드 기반 구조로 전환
- 후보:
-  - nginx 정적 서빙
-  - Express 정적 서빙
-
-### Task 17. DB 초기화/마이그레이션 전략 통합
-
- 목표: 기준 스키마와 실행 순서를 단일 정책으로 통일
- 필요 작업:
-  - 기준 스키마 선정
-  - 초기화 스크립트 확정
-  - 마이그레이션 순서 정의
-
-### Task 18. `.env.example` 및 배포 환경 분리
-
- 목표: 민감정보를 저장소에서 분리하고 배포별 설정 체계화
-
-### Task 19. 운영 볼륨 및 백업 전략 정리
-
- 목표: 업로드 파일과 설정 파일, MySQL 데이터의 장기 보존 정책 정리
-
-### Task 20. DB 백업/복원 절차 문서화
-
- 목표: 컨테이너 DB를 기준으로 dump/restore 절차를 문서화
-
-## 8. 우선순위 정리
-
-### P0: 내일까지 반드시 필요한 작업
-
-1. Task 1. 외부 MySQL 접근 가능 여부 확인
-2. Task 2. 기준 스키마 상태 확인
-3. Task 4. DB 기준 데이터 소스 확정
-4. Task 7. MySQL Docker 구성 추가
-5. Task 8. backend DB 연결 전환
-6. Task 9. docker-compose.yaml 확장
-7. Task 11. WSL 컨테이너 기동 검증
-8. Task 12. 웹 접속 검증
-9. Task 13. API 검증
-10. Task 14. DB 초기 데이터 검증
-
-### P1: 시연 안정화를 위해 권장되는 작업
-
-1. Task 3. 파일 영속성 대상 확인
-2. Task 10. `.dockerignore` 작성
-3. Task 15. 업로드/파일 저장 검증
-
-### P2: 시연 이후 진행할 작업
-
-1. Task 16. 운영형 프런트 배포 구조 전환
-2. Task 17. DB 초기화/마이그레이션 전략 통합
-3. Task 18. `.env.example` 및 배포 환경 분리
-4. Task 19. 운영 볼륨 및 백업 전략 정리
-5. Task 20. DB 백업/복원 절차 문서화
-
-## 9. 개발자용 최종 작업 순서 제안
-
-개발 담당자에게는 아래 순서로 진행하라고 전달하면 된다.
-
-1. 외부 DB 연결 가능 여부부터 확인
-2. 현재 DB 스키마가 앱 요구사항과 맞는지 확인
-3. DB 기준 dump 또는 init SQL 확보
-4. MySQL 컨테이너 구성 추가
-5. backend의 DB 연결 대상을 `db`로 전환
-6. WSL에서 `docker compose config` 확인
-7. WSL에서 컨테이너 기동 테스트
-8. 웹 접속 및 API 확인
-9. 업로드 및 파일 영속성 확인
-10. 시연 완료 후 운영형 구조로 분리 작업 진행
-
-## 10. 완료 판단 기준
-
-이번 도커라이징 1차 작업은 아래 조건을 만족하면 완료로 본다.
-
-1. `docker compose up --build`로 프런트, 백엔드, DB가 모두 기동한다.
-2. 브라우저에서 8080 화면이 열린다.
-3. `/api/assets/master`가 정상 응답한다.
-4. backend가 DB 컨테이너와 정상 연결된다.
-5. DB 초기 테이블과 데이터가 기대 상태로 적재된다.
-6. `uploads`, `map_config.json`, MySQL 데이터가 재시작 후에도 유지된다.
-
-이 문서는 실제 구현 작업의 체크리스트로 사용한다.
--- a/docs/issues/issue_dashboard_and_modal_optimization.md
+++ b/docs/issues/issue_dashboard_and_modal_optimization.md
@@ -1,45 +1,45 @@
-# [Issue] 소프트웨어 자산 관리 체계 개편 및 클라우드(Cloud) 서비스 관리 신설
-
-## 1. 개요
-기존의 단일 소프트웨어(SW) 분류 체계를 비즈니스 모델에 맞춰 **구독형, 영구형, 클라우드형**으로 삼원화하고, 특히 비용 변동이 잦은 클라우드 서비스를 독립적으로 관리할 수 있는 전용 시스템을 신설함.
-
---
-
-## 2. 주요 작업 내용
-
-### 📂 소프트웨어 관리 프레임워크 재구조화
- **분류 체계 개편**: 소프트웨어를 아래 세 가지 유형으로 재정의하여 관리 효율성을 높임.
-  1. **구독형 (Subscription)**: 연/월 정액제로 운영되는 SW
-  2. **영구형 (Perpetual)**: 구매 후 영구 소유하는 SW (유지보수 중심 관리)
-  3. **클라우드형 (Cloud)**: 플랫폼 기반 종량제(AWS, Azure 등) 서비스
- **내비게이션 통합**: 상단 탭을 유형별로 분리하여 각 자산 특성에 맞는 리스트 뷰를 제공함.
-
-### ☁️ 클라우드(Cloud) 서비스 관리 페이지 신설
- **전용 리스트 뷰 (`CloudListView.ts`)**: 
-  - 플랫폼명, 담당 부서, 프로젝트(사용용도), 결제 수단, 결제일 등 클라우드 특화 항목 중심의 테이블 구성함.
-  - **결제수단별 필터링 기능** (법인카드, 인보이스) 및 통합 검색 기능을 추가함.
- **클라우드 전문 모달 (`CloudModal.ts`)**:
-  - 클라우드 요금 및 결제 정보 입력을 위한 2분할 레이아웃 배치함.
-  - **업데이트 이력(History Logs)** 시스템을 도입하여 매월 변동되는 비용을 히스토리 형식으로 기록/추적 가능하게 함.
-
-### 📊 대시보드(Dashboard) 리팩토링 및 고도화
- **카드 레이아웃 최적화**: 사용율, 만료 예정, 클라우드 현황(전월/당월 비교) 정보를 2열 그리드로 정돈함.
- **데이터 시각화**: 
-  - **클라우드 결제 규모 추이**: 최근 4개월간의 비용 변동을 꺾은선 그래프로 구현함.
-  - **실시간 데이터 연동**: 자산 업데이트 이력(Logs)에 기록된 비용이 대시보드 차트에 실시간 합산 반영되도록 로그 분석 엔진을 구축함.
- **상세 팝업 연동**: 대시보드 요약 카드를 클릭하면 해당하는 자산의 상세 목록이 뜨는 모달 연동 기능을 추가함.
-
-### 🪟 UX 및 데이터 정합성 강화
- **수정 저장 워크플로우 (Edit-to-Save)**: 실수로 인한 데이터 변경을 막기 위해 모든 상세 모달에 '조회 모드'를 기본으로 하고, [수정] 버튼 클릭 시에만 입력이 활성화되도록 제어함.
- **금액 자동 포맷팅**: 콤마 표시 오류를 해결하고 천 단위 포맷팅을 표준화함.
- **결제 임박 알림**: 각 서비스의 결제일을 계산하여 14일 이내 결제가 필요한 항목을 대시보드에서 즉시 파악할 수 있게 함.
-
---
-
-## 3. 향후 과제
- 클라우드 플랫폼 간 비용 비교 통계 기능 확장 검토
- 결제 수단(법인카드) 만료일에 기초한 알림 서비스 추가 검토
-
---
-**작업자**: Antigravity (AI Assistant)
-**상태**: 완료 (2026-04-17)
+# [Issue] 소프트웨어 자산 관리 체계 개편 및 클라우드(Cloud) 서비스 관리 신설
+
+## 1. 개요
+기존의 단일 소프트웨어(SW) 분류 체계를 비즈니스 모델에 맞춰 **구독형, 영구형, 클라우드형**으로 삼원화하고, 특히 비용 변동이 잦은 클라우드 서비스를 독립적으로 관리할 수 있는 전용 시스템을 신설함.
+
+---
+
+## 2. 주요 작업 내용
+
+### 📂 소프트웨어 관리 프레임워크 재구조화
+- **분류 체계 개편**: 소프트웨어를 아래 세 가지 유형으로 재정의하여 관리 효율성을 높임.
+  1. **구독형 (Subscription)**: 연/월 정액제로 운영되는 SW
+  2. **영구형 (Perpetual)**: 구매 후 영구 소유하는 SW (유지보수 중심 관리)
+  3. **클라우드형 (Cloud)**: 플랫폼 기반 종량제(AWS, Azure 등) 서비스
+- **내비게이션 통합**: 상단 탭을 유형별로 분리하여 각 자산 특성에 맞는 리스트 뷰를 제공함.
+
+### ☁️ 클라우드(Cloud) 서비스 관리 페이지 신설
+- **전용 리스트 뷰 (`CloudListView.ts`)**: 
+  - 플랫폼명, 담당 부서, 프로젝트(사용용도), 결제 수단, 결제일 등 클라우드 특화 항목 중심의 테이블 구성함.
+  - **결제수단별 필터링 기능** (법인카드, 인보이스) 및 통합 검색 기능을 추가함.
+- **클라우드 전문 모달 (`CloudModal.ts`)**:
+  - 클라우드 요금 및 결제 정보 입력을 위한 2분할 레이아웃 배치함.
+  - **업데이트 이력(History Logs)** 시스템을 도입하여 매월 변동되는 비용을 히스토리 형식으로 기록/추적 가능하게 함.
+
+### 📊 대시보드(Dashboard) 리팩토링 및 고도화
+- **카드 레이아웃 최적화**: 사용율, 만료 예정, 클라우드 현황(전월/당월 비교) 정보를 2열 그리드로 정돈함.
+- **데이터 시각화**: 
+  - **클라우드 결제 규모 추이**: 최근 4개월간의 비용 변동을 꺾은선 그래프로 구현함.
+  - **실시간 데이터 연동**: 자산 업데이트 이력(Logs)에 기록된 비용이 대시보드 차트에 실시간 합산 반영되도록 로그 분석 엔진을 구축함.
+- **상세 팝업 연동**: 대시보드 요약 카드를 클릭하면 해당하는 자산의 상세 목록이 뜨는 모달 연동 기능을 추가함.
+
+### 🪟 UX 및 데이터 정합성 강화
+- **수정 저장 워크플로우 (Edit-to-Save)**: 실수로 인한 데이터 변경을 막기 위해 모든 상세 모달에 '조회 모드'를 기본으로 하고, [수정] 버튼 클릭 시에만 입력이 활성화되도록 제어함.
+- **금액 자동 포맷팅**: 콤마 표시 오류를 해결하고 천 단위 포맷팅을 표준화함.
+- **결제 임박 알림**: 각 서비스의 결제일을 계산하여 14일 이내 결제가 필요한 항목을 대시보드에서 즉시 파악할 수 있게 함.
+
+---
+
+## 3. 향후 과제
+- 클라우드 플랫폼 간 비용 비교 통계 기능 확장 검토
+- 결제 수단(법인카드) 만료일에 기초한 알림 서비스 추가 검토
+
+---
+**작업자**: Antigravity (AI Assistant)
+**상태**: 완료 (2026-04-17)
--- a/docs/issues/issue_sw_modal_refactor.md
+++ b/docs/issues/issue_sw_modal_refactor.md
@@ -1,33 +1,33 @@
-# [이슈] S/W 자산 관리 고도화 및 이력 추적 기능 구현
-
-## 1. 개요
-소프트웨어 자산의 라이프사이클을 체계적으로 관리하기 위해 상세 정보 모달을 개편하고, 갱신(업데이트) 이력을 추적할 수 있는 기능을 구현하였습니다. 또한, 사용자의 가독성을 위해 상태를 나타내는 자동 뱃지를 도입하고 날짜 입력 편의성을 개선하였습니다.
-
-## 2. 작업 상세 내용
-
-### A. S/W 목록(Table) 개선
- **상태 자동 계산 시스템 도입**:
-    - 구독 S/W: 만료일 기준 **[사용중] / [만료]** 자동 표시.
-    - 영구 S/W: 유지보수 대상 여부에 따라 **[유효] / [없음]** 표시.
- **UI 뱃지 적용**: 테이블 좌측에 상태 뱃지를 추가하여 시각적 인지도를 높임.
-
-### B. 상세 정보 모달 개편 (`SWModal.ts`)
- **2단 분할 레이아웃 적용**: 좌측(기본 정보), 우측(업데이트 타임라인)으로 UI 재설계.
- **날짜 입력 필드 개선**: 
-    - '구매일' 필드에 캘린더 피커(Calendar Picker) 적용.
-    - '구독 기간' 필드를 **시작일**과 **종료일**로 분리하여 각각 캘린더 적용.
-    - 직접 입력("yyyy-mm-dd") 형식도 동시 지원.
-
-### C. 계약 업데이트(갱신) 관리 기능
- **[업데이트 추가]** 버튼 및 전용 서브 팝업 구현.
- 갱신 시 발생하는 비용, 기간 연장, 메모를 기록하여 타임라인(Log)에 누적.
- 업데이트 반영 시 메인 자산 정보의 구독 기한 및 누적 금액이 자동으로 최신화되도록 연동.
-
-## 3. 관련 파일
- `src/views/SW_Table.ts`: 테이블 상태 로직 및 뱃지 렌더링.
- `src/components/Modal/SWModal.ts`: 모달 UI 및 날짜 처리, 업데이트 로직.
- `src/styles/modal.css`: 분할 레이아웃 및 타임라인 스타일.
-
-## 4. 확인 사항
- 엑셀 업로드/다운로드 시 기존 '구독일' 문자열 형식과의 호환성 유지 확인.
- 브라우저 테스트를 통한 캘린더 작동 및 테이블 상태 연동 확인 완료.
+# [이슈] S/W 자산 관리 고도화 및 이력 추적 기능 구현
+
+## 1. 개요
+소프트웨어 자산의 라이프사이클을 체계적으로 관리하기 위해 상세 정보 모달을 개편하고, 갱신(업데이트) 이력을 추적할 수 있는 기능을 구현하였습니다. 또한, 사용자의 가독성을 위해 상태를 나타내는 자동 뱃지를 도입하고 날짜 입력 편의성을 개선하였습니다.
+
+## 2. 작업 상세 내용
+
+### A. S/W 목록(Table) 개선
+- **상태 자동 계산 시스템 도입**:
+    - 구독 S/W: 만료일 기준 **[사용중] / [만료]** 자동 표시.
+    - 영구 S/W: 유지보수 대상 여부에 따라 **[유효] / [없음]** 표시.
+- **UI 뱃지 적용**: 테이블 좌측에 상태 뱃지를 추가하여 시각적 인지도를 높임.
+
+### B. 상세 정보 모달 개편 (`SWModal.ts`)
+- **2단 분할 레이아웃 적용**: 좌측(기본 정보), 우측(업데이트 타임라인)으로 UI 재설계.
+- **날짜 입력 필드 개선**: 
+    - '구매일' 필드에 캘린더 피커(Calendar Picker) 적용.
+    - '구독 기간' 필드를 **시작일**과 **종료일**로 분리하여 각각 캘린더 적용.
+    - 직접 입력("yyyy-mm-dd") 형식도 동시 지원.
+
+### C. 계약 업데이트(갱신) 관리 기능
+- **[업데이트 추가]** 버튼 및 전용 서브 팝업 구현.
+- 갱신 시 발생하는 비용, 기간 연장, 메모를 기록하여 타임라인(Log)에 누적.
+- 업데이트 반영 시 메인 자산 정보의 구독 기한 및 누적 금액이 자동으로 최신화되도록 연동.
+
+## 3. 관련 파일
+- `src/views/SW_Table.ts`: 테이블 상태 로직 및 뱃지 렌더링.
+- `src/components/Modal/SWModal.ts`: 모달 UI 및 날짜 처리, 업데이트 로직.
+- `src/styles/modal.css`: 분할 레이아웃 및 타임라인 스타일.
+
+## 4. 확인 사항
+- 엑셀 업로드/다운로드 시 기존 '구독일' 문자열 형식과의 호환성 유지 확인.
+- 브라우저 테스트를 통한 캘린더 작동 및 테이블 상태 연동 확인 완료.
--- a/docs/itam_cicd_setup.md
+++ b/docs/itam_cicd_setup.md
@@ -1,226 +0,0 @@
-# ITAM CI/CD 설정 가이드
-
-## 1. 문서 목적
-
-이 문서는 현재 ITAM 저장소에 구성된 CI/CD 파일을 실제 운영에 연결하기 위해 필요한 기준을 정리한 가이드다.
-
-대상 범위는 아래와 같다.
-
-1. Gitea Actions workflow 역할
-2. Gitea Variables / Secrets 설정값
-3. 운영 서버 배포 디렉토리 기준
-4. 운영 영속 경로 기준
-5. production deploy 실행 전 확인 사항
-
---
-
-## 2. 현재 CI/CD 구성
-
-현재 `.gitea/workflows`에는 ITAM 관련 workflow만 남겨둔 상태다.
-
-1. `itam_code_check.yml`
-2. `itam_docker_build_check.yml`
-3. `itam_production_deploy.yml`
-
-각 workflow의 역할은 아래와 같다.
-
-1. `itam_code_check.yml`: TypeScript/Vite build와 compose 문법 검증
-2. `itam_docker_build_check.yml`: 운영용 Docker 이미지 빌드 가능 여부 검증
-3. `itam_production_deploy.yml`: 운영 서버에 SSH 접속 후 실제 배포 수행
-
-현재 배포 흐름은 아래와 같다.
-
-```mermaid
-flowchart LR
-  DEV["Developer Push or Manual Run"] --> CODE["ITAM Code Check"]
-  CODE --> BUILD["ITAM Docker Build Check"]
-  BUILD --> DEPLOY["ITAM Production Deploy"]
-  DEPLOY --> HOST["Production Host"]
-  HOST --> APP["docker compose up -d --build"]
-  linkStyle default stroke:#d32f2f,stroke-width:2px;
-```
-
---
-
-## 3. Gitea Variables / Secrets 기준
-
-`itam_production_deploy.yml`이 정상 동작하려면 아래 값이 필요하다.
-
-### 3.1 Variables
-
-아래 항목은 Gitea repository Variables에 등록한다.
-
-| Key | 설명 | 예시 |
-| --- | --- | --- |
-| `PROD_HOST` | 운영 서버 SSH 접속 호스트 | `10.0.0.25` |
-| `PROD_USER` | 운영 서버 SSH 사용자 | `deploy` |
-| `PROD_DEPLOY_PATH` | 서버에서 저장소를 배포할 경로 | `/opt/itam` |
-| `PROD_BACKUP_ROOT` | 배포 전 백업 저장 경로, 배포 경로 바깥이어야 함 | `/opt/itam-backups` |
-| `PROD_GIT_URL` | 운영 서버에서 pull 가능한 저장소 주소 | `git@gitea.example.com:team/itam.git` |
-| `PROD_DB_HOST` | 외부 MySQL 호스트 | `172.16.8.151` |
-| `PROD_DB_PORT` | 외부 MySQL 포트 | `3306` |
-| `PROD_DB_USER` | 운영 DB 계정 | `itam_admin` |
-| `PROD_DB_NAME` | 운영 DB 이름 | `itam` |
-| `PROD_LOG_LEVEL` | 애플리케이션 로그 레벨 | `info` |
-
-### 3.2 Secrets
-
-아래 항목은 Gitea repository Secrets에 등록한다.
-
-| Key | 설명 |
-| --- | --- |
-| `PROD_SSH_PRIVATE_KEY` | 운영 서버 접속용 개인키 |
-| `PROD_DB_PASS` | 운영 DB 비밀번호 |
-
-### 3.3 운영 원칙
-
-1. `PROD_DB_PASS`는 Variables가 아니라 Secrets에만 둔다.
-2. `PROD_SSH_PRIVATE_KEY`는 배포 전용 계정 키를 사용한다.
-3. `PROD_GIT_URL`은 운영 서버에서 직접 pull 가능한 주소여야 한다.
-4. 운영 서버의 `known_hosts`는 workflow에서 자동 등록되지만, 최초 운영 전 수동 접속 검증도 함께 수행하는 것이 안전하다.
-5. `PROD_BACKUP_ROOT`는 `PROD_DEPLOY_PATH` 내부가 아니라 바깥 경로를 사용해야 한다.
-
---
-
-## 4. 운영 서버 배포 디렉토리 기준
-
-현재 `itam_production_deploy.yml`은 운영 서버에서 아래 흐름으로 배포를 수행한다.
-
-1. `PROD_DEPLOY_PATH` 디렉토리를 생성한다.
-2. 기존 운영 상태가 있으면 배포 전 백업을 수행한다.
-3. 해당 경로에 저장소를 clone 또는 fetch 한다.
-4. 지정 브랜치로 checkout 한다.
-5. `uploads`, `logs/nginx` 디렉토리를 생성한다.
-6. `.env.deploy`를 서버의 `.env`로 복사한다.
-7. `docker compose -f docker-compose.prod.yaml up -d --build`를 실행한다.
-
-권장 디렉토리 구조는 아래와 같다.
-
-```text
-/opt/itam/
-  .env
-  docker-compose.prod.yaml
-  Dockerfile.frontend.prod
-  Dockerfile.backend.prod
-  map_config.json
-  uploads/
-  logs/
-    nginx/
-  docker/
-    nginx/
-      default.conf
-    frontend/
-      default.conf
-  src/
-  public/
-  img/
-
-/opt/itam-backups/
-  db/
-  files/
-```
-
-현재 구조 기준 배포 관계는 아래와 같다.
-
-```mermaid
-flowchart TB
-  subgraph HOST["Production Host"]
-    REPO["PROD_DEPLOY_PATH"]
-    ENV[".env"]
-    UP["uploads/"]
-    LOGS["logs/nginx/"]
-    MAP["map_config.json"]
-  end
-
-  subgraph CTR["Docker Services"]
-    NGINX["itam-nginx"]
-    FRONT["itam-frontend"]
-    BACK["itam-backend"]
-  end
-
-  DB["External MySQL"]
-
-  REPO --> NGINX
-  ENV --> BACK
-  UP --> BACK
-  MAP --> BACK
-  LOGS --> NGINX
-  REPO --> BAK["PROD_BACKUP_ROOT"]
-  NGINX --> FRONT
-  NGINX --> BACK
-  BACK --> DB
-  linkStyle default stroke:#d32f2f,stroke-width:2px;
-```
-
---
-
-## 5. 영속 경로 기준
-
-현재 `docker-compose.prod.yaml` 기준으로 운영에서 유지되어야 하는 경로는 아래와 같다.
-
-1. `.env`
-2. `uploads/`
-3. `map_config.json`
-4. `logs/nginx/`
-5. `PROD_BACKUP_ROOT`
-
-각 경로의 의미는 아래와 같다.
-
-1. `.env`: backend 런타임 환경변수
-2. `uploads/`: 업로드 파일 데이터
-3. `map_config.json`: 위치/맵 구성 데이터
-4. `logs/nginx/`: reverse proxy 접근 로그 및 에러 로그
-5. `PROD_BACKUP_ROOT`: 배포 전 DB dump와 운영 파일 아카이브 저장 위치
-
-운영 기준으로 보면 `uploads/`와 `map_config.json`은 애플리케이션 데이터이고, `.env`는 환경 설정이며, `logs/nginx/`는 운영 추적 데이터다.
-
-즉 서버 운영 시 컨테이너만 다시 띄우면 되는 구조가 아니라, 이 경로들이 유지되는 것을 전제로 배포가 성립한다.
-
---
-
-## 6. 배포 전 체크리스트
-
-`itam_production_deploy.yml` 실행 전 아래 항목을 먼저 확인한다.
-
-1. 운영 서버에 Docker Engine과 `docker compose`가 설치되어 있어야 한다.
-2. 운영 서버의 배포 계정이 Docker 실행 권한을 가져야 한다.
-3. 운영 서버에서 `PROD_GIT_URL`로 직접 `git fetch`가 가능해야 한다.
-4. 외부 MySQL 접속 정보가 실제 운영망 기준으로 열려 있어야 한다.
-5. 운영 서버에 `map_config.json` 초기 파일이 존재해야 한다.
-6. 방화벽 또는 보안 장비에서 80 포트 접근 정책이 정리되어 있어야 한다.
-
-권장 확인 명령 예시는 아래와 같다.
-
-```bash
-docker --version
-docker compose version
-git ls-remote <PROD_GIT_URL>
-test -f map_config.json
-test -d uploads
-```
-
---
-
-## 7. 현재 구조에서의 해석
-
-현재 ITAM CI/CD는 staging 없이도 운영 배포가 가능한 최소 구조로 정리되어 있다.
-
-이 구조의 장점은 아래와 같다.
-
-1. workflow 수가 적어서 관리가 단순하다.
-2. 운영 배포에 필요한 변수와 시크릿 범위가 명확하다.
-3. staging이 필요해지면 production deploy workflow를 복제해 별도 환경으로 확장하기 쉽다.
-
-즉, 지금 단계에서는 production 기준을 먼저 고정하고, staging은 동일 패턴으로 추후 추가하는 전략이 적절하다.
-
---
-
-## 8. 다음 권장 작업
-
-현재 문서 기준으로 바로 이어서 할 작업은 아래 순서가 적절하다.
-
-1. `PROD_DEPLOY_PATH` 실제 서버 경로 확정
-2. 운영 서버 배포 계정 생성 및 SSH 키 등록
-3. `map_config.json`, `uploads/` 초기 데이터 준비
-4. production deploy workflow에 smoke check 추가
-5. 로그 로테이션과 백업/복구 절차 문서화
--- a/docs/plans/ITAM_RMM_Integration_Plan.md
+++ b/docs/plans/ITAM_RMM_Integration_Plan.md
@@ -1,64 +0,0 @@
-# [보고서] 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단계: 누적 데이터를 활용한 성능 분석 및 월간 운영 보고서 자동화
--- a/docs/plans/IT_Asset_RMM_System_Report_Detailed.md
+++ b/docs/plans/IT_Asset_RMM_System_Report_Detailed.md
@@ -1,318 +0,0 @@
-# 전산자산 원격 점검 및 관리 시스템(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의 자가 점검 기능과 관리자 추적 기능을 포함함으로써
-규정 준수와 운영 효율성을 동시에 확보할 수 있습니다.
--- a/docs/plans/PC_사양_개선_기획서.html
+++ b/docs/plans/PC_사양_개선_기획서.html
@@ -1,379 +0,0 @@
-<!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>
--- a/docs/plans/PLAN_ASSET_HISTORY.md
+++ b/docs/plans/PLAN_ASSET_HISTORY.md
@@ -1,60 +0,0 @@
-# 자산 이력 누적 관리 시스템 (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) 확인.
--- a/docs/plans/design_rule.md
+++ b/docs/plans/design_rule.md
@@ -1,48 +0,0 @@
-# 🎨 ITAM 시스템 디자인 가이드 (Design Guide)
-
-본 문서는 ITAM(IT Asset Management System)의 시각적 일관성과 사용자 경험을 유지하기 위한 핵심 디자인 원칙을 정의합니다.
-
---
-
-### 1. 디자인 철학 (Design Philosophy)
-*   **Minimalist & Stark**: Vercel 스타일의 극도로 간결하고 현대적인 디자인을 지향합니다.
-*   **Achromatic Base**: 블랙(#171717)과 화이트를 기본으로 하며, 정보의 구분은 얇은 헤어라인(#ebebeb)을 사용합니다.
-*   **Fluid & Responsive**: 고정된 픽셀 대신 화면 크기에 비례하여 UI 밀도가 변하는 유동적 스케일링 시스템을 적용합니다.
-
-### 2. 타이포그래피 및 자간 (Typography & Letter-spacing)
-*   **Font Family**: `Pretendard` 단일 폰트를 사용합니다.
-*   **Letter-spacing**: 모든 텍스트에 `-0.02em` (-2%) 자간을 적용하여 밀도 있는 가독성을 확보합니다.
-*   **Typography Scale**:
-    *   **XS**: `clamp(10px, 1.2vmin + 0.2vw, 15px)` - 보조 텍스트
-    *   **SM**: `clamp(12px, 1.4vmin + 0.3vw, 18px)` - 필터, 일반 라벨, 테이블 헤더
-    *   **Base**: `clamp(14px, 1.6vmin + 0.4vw, 22px)` - 본문, 테이블 데이터
-    *   **MD**: `clamp(18px, 2.5vmin + 0.5vw, 30px)` - 섹션 소제목
-    *   **LG**: `clamp(24px, 4vmin + 0.6vw, 48px)` - 페이지 대제목
-    *   **XL**: `clamp(32px, 6vmin + 0.8vw, 72px)` - 핵심 통계 지표
-*   **Layout Units**:
-    *   **Header Height**: `clamp(50px, 8vmin, 90px)`
-    *   **Base Spacing**: `clamp(0.75rem, 3vmin, 3rem)`
-    *   **Radius**: `clamp(6px, 1.5vmin, 16px)`
-
-### 3. 컬러 팔레트 (Vercel Stark Palette)
-*   **Primary**: `#171717` (Stark Black) - 텍스트, 주요 버튼, 강조 요소.
-*   **Secondary**: `#888888` (Mute) - 보조 텍스트, 비활성 아이콘.
-*   **Border**: `#ebebeb` (Hairline) - 정보 구분선.
-*   **Background**: `#ffffff` (Canvas), `#fafafa` (Soft), `#f5f5f5` (Soft 2).
-*   **Accents**: Blue(`#0070f3`), Orange(`#f5a623`), Danger(`#ee0000`).
-
-### 4. 컴포넌트 및 레이아웃 규칙 (Component Rules)
-*   **Header & Navigation**:
-    *   상단 1열 통합 바 형태를 유지하며, GNB와 LNB를 동일 라인에 배치하여 공간을 효율적으로 사용합니다.
-*   **Unified Filter Bar**:
-    *   검색창과 필터는 상단 타이틀 바로 아래(기존 액션 버튼 라인)까지 올려서 배치합니다.
-    *   **Action Group**: '자산 추가', '부품 마스터' 등의 주요 액션 버튼은 검색창과 같은 라인의 최우측에 정렬합니다.
-*   **Dashboard**:
-    *   **Single-Screen View**: 1920*1080(또는 1920*919) 해상도에서 스크롤 없이 한 화면에 핵심 정보가 모두 보이도록 최적화합니다.
-    *   **Fixed Charts**: 차트 내부 숫자나 요소에 애니메이션(`animation: false`) 및 플로팅 레이블을 배제하여 정적인 안정성을 확보합니다.
-*   **Footer**:
-    *   화면 최하단에 위치하며, 텍스트는 **우측 정렬(Right-aligned)**합니다.
-    *   상단에 1px 헤어라인 구분선을 가집니다.
-*   **Security & UX**:
-    *   **Text Selection**: 사용자의 실수에 의한 UI 드래그 방지를 위해 입력창(`input`, `textarea`)을 제외한 전체 영역의 텍스트 선택을 차단합니다.
-    *   **View Toggle**: '서버' 탭 등 특정 탭에서만 '목록보기' 체크박스를 통해 뷰를 전환하며, 그 외 화면은 리스트 중심의 UI를 제공합니다.
--- a/92.png
+++ b/92.png
--- a/docs/plans/implementation_plan.md
+++ b/docs/plans/implementation_plan.md
@@ -1,77 +1,77 @@
-# H/W 자산관리 시스템 프로토타입 구현 계획 (Excel 기반 DB)
-
-현재 프로젝트는 DB 연동 없이 프로토타입으로 개발되며, 초기 H/W 자산을 엑셀 파일로 관리할 수 있도록 설계합니다. 지정된 디자인 가이드라인(`README.md`)에 따라 세련되고 전문적인 UI를 Vite + Vanilla JS (또는 TS) 기반으로 구축합니다.
-
-## User Review Required
-
-> [!IMPORTANT]
-> **엑셀을 DB처럼 사용하는 방식**에 대한 주요 동작 흐름은 다음과 같습니다. 해당 방식이 의도하신 바와 맞는지 확인 부탁드립니다.
-> 1. 화면 진입 시 제공되는 **템플릿 엑셀 파일 다운로드**
-> 2. 해당 양식에 맞춰 데이터 입력 후 브라우저에 **엑셀 파일 업로드(Import)**
-> 3. 웹 상에서 **Data Table 형태로 렌더링** (편집/추가/삭제 기능 제공)
-> 4. 수정이 완료된 후 **엑셀 파일로 다시 다운로드(Export)** 하여 로컬에 저장
-
-## 데이터 스키마 설계 (H/W 자산)
-
-요청하신 항목에 맞춘 필수 H/W 자산 데이터 필드입니다. 엑셀의 열(Column)로 활용됩니다.
-
- **법인 (Company)**: 소속 법인
- **자산코드 (AssetCode)**: 자산의 고유 식별자
- **명칭 (DeviceName)**: 모델명 또는 기기명
- **위치 (Location)**: 현재 파악된 물리적 위치
- **관리자 (Manager)**: 실 사용자 또는 담당자
- **IP주소 (IPAddress)**: 할당된 IP
- **MAC address (MacAddress)**: 기기 고유 MAC 주소
- **H/W 사양 (HWSpecs)**: CPU, RAM, Storage 등 사양 요약
- **OS (OperatingSystem)**: 설치된 운영체제 정보
-
-## Proposed Changes
-
-### 1. 개발 환경 설정 (Vite 기반)
- `npx create-vite` 를 사용하여 `vanilla-ts` (또는 `vanilla`) 프로젝트를 현재 디렉토리에 초기화합니다.
- `package.json` 및 `vite.config.ts` 설정 (포트 8080 및 host 허용)
- Excel 제어를 위해 `xlsx` (SheetJS) 라이브러리를 설치합니다.
-
-#### [NEW] package.json
-#### [NEW] vite.config.ts
-
---
-
-### 2. UI 및 디자인 컴포넌트 (`README.md` 가이드라인 준수)
- 디자인: Box-less Design, Line-based Division 적용
- 컬러: `#1E5149`(Point), `#E5E7EB`(Border), `#F9FAFB`(Background)
- 폰트: `Pretendard`, `Letter Spacing: -0.02em` 적용
- 테이블 요소: 구분선만 사용하는 미니멀 테이블
-
-#### [NEW] index.css
-
---
-
-### 3. 메인 HTML 및 로직 구현
- **File Upload Area**: 엑셀 파일을 불러오거나 템플릿을 다운로드 할 수 있는 상단 컨트롤 영역.
- **Data Table**: 파싱된 H/W 자산 리스트를 출력.
- **Modal Component**: `README.md`에 정의된 2열 그리드와 우측 상단 닫기, 하단 저장 버튼이 포함된 정보 수정/생성 모달.
- **Excel Logic**: 업로드된 Excel 데이터를 파싱하여 JSON 형태로 브라우저 메모리에 들고 처리한 후 다시 Excel로 내보내는 기능.
-
-#### [NEW] index.html
-#### [NEW] src/main.ts
-#### [NEW] src/excelHandler.ts
-
-## Open Questions
-
-> [!WARNING]
-> 1. 프론트엔드 프레임워크 강제 규정이 없다면, 경량화 및 설정 편의를 위해 `Vite + Vanilla TypeScript` 를 사용하는 것이 괜찮으신가요? (원하신다면 React나 Vue로도 가능합니다.)
-> 2. 추가적인 검색 필터(예: 법인별, 관리자별 검색)가 당장 도입되어야 하는 필수 기능인가요?
-
-## Verification Plan
-
-### Automated Tests
- `npm run dev` 를 통해 `http://localhost:8080` 포트 개방 성공 여부 확인.
- 브라우저 기능 테스트:
-    - 템플릿 다운로드 클릭 -> 정상적인 `hw_assets.xlsx` 다운로드 여부
-    - 샘플 엑셀 파일 업로드 -> 데이터 테이블에 행(Row) 생성 여부
-    - 항목 더블 클릭 혹은 [수정] 버튼 클릭 시 -> 모달 팝업 및 데이터 연동 확인
-    - [저장 후 내보내기] 클릭 -> 업데이트된 데이터가 포함된 새 엑셀 파일 다운로드 확인
-
-### Manual Verification
- 디자인 요구사항(`Pretendard`, `#1E5149`, Border-less 컨셉) 반영 확인을 스크린샷 렌더링으로 사용자와 상호작용합니다.
+# H/W 자산관리 시스템 프로토타입 구현 계획 (Excel 기반 DB)
+
+현재 프로젝트는 DB 연동 없이 프로토타입으로 개발되며, 초기 H/W 자산을 엑셀 파일로 관리할 수 있도록 설계합니다. 지정된 디자인 가이드라인(`README.md`)에 따라 세련되고 전문적인 UI를 Vite + Vanilla JS (또는 TS) 기반으로 구축합니다.
+
+## User Review Required
+
+> [!IMPORTANT]
+> **엑셀을 DB처럼 사용하는 방식**에 대한 주요 동작 흐름은 다음과 같습니다. 해당 방식이 의도하신 바와 맞는지 확인 부탁드립니다.
+> 1. 화면 진입 시 제공되는 **템플릿 엑셀 파일 다운로드**
+> 2. 해당 양식에 맞춰 데이터 입력 후 브라우저에 **엑셀 파일 업로드(Import)**
+> 3. 웹 상에서 **Data Table 형태로 렌더링** (편집/추가/삭제 기능 제공)
+> 4. 수정이 완료된 후 **엑셀 파일로 다시 다운로드(Export)** 하여 로컬에 저장
+
+## 데이터 스키마 설계 (H/W 자산)
+
+요청하신 항목에 맞춘 필수 H/W 자산 데이터 필드입니다. 엑셀의 열(Column)로 활용됩니다.
+
+- **법인 (Company)**: 소속 법인
+- **자산코드 (AssetCode)**: 자산의 고유 식별자
+- **명칭 (DeviceName)**: 모델명 또는 기기명
+- **위치 (Location)**: 현재 파악된 물리적 위치
+- **관리자 (Manager)**: 실 사용자 또는 담당자
+- **IP주소 (IPAddress)**: 할당된 IP
+- **MAC address (MacAddress)**: 기기 고유 MAC 주소
+- **H/W 사양 (HWSpecs)**: CPU, RAM, Storage 등 사양 요약
+- **OS (OperatingSystem)**: 설치된 운영체제 정보
+
+## Proposed Changes
+
+### 1. 개발 환경 설정 (Vite 기반)
+- `npx create-vite` 를 사용하여 `vanilla-ts` (또는 `vanilla`) 프로젝트를 현재 디렉토리에 초기화합니다.
+- `package.json` 및 `vite.config.ts` 설정 (포트 8080 및 host 허용)
+- Excel 제어를 위해 `xlsx` (SheetJS) 라이브러리를 설치합니다.
+
+#### [NEW] package.json
+#### [NEW] vite.config.ts
+
+---
+
+### 2. UI 및 디자인 컴포넌트 (`README.md` 가이드라인 준수)
+- 디자인: Box-less Design, Line-based Division 적용
+- 컬러: `#1E5149`(Point), `#E5E7EB`(Border), `#F9FAFB`(Background)
+- 폰트: `Pretendard`, `Letter Spacing: -0.02em` 적용
+- 테이블 요소: 구분선만 사용하는 미니멀 테이블
+
+#### [NEW] index.css
+
+---
+
+### 3. 메인 HTML 및 로직 구현
+- **File Upload Area**: 엑셀 파일을 불러오거나 템플릿을 다운로드 할 수 있는 상단 컨트롤 영역.
+- **Data Table**: 파싱된 H/W 자산 리스트를 출력.
+- **Modal Component**: `README.md`에 정의된 2열 그리드와 우측 상단 닫기, 하단 저장 버튼이 포함된 정보 수정/생성 모달.
+- **Excel Logic**: 업로드된 Excel 데이터를 파싱하여 JSON 형태로 브라우저 메모리에 들고 처리한 후 다시 Excel로 내보내는 기능.
+
+#### [NEW] index.html
+#### [NEW] src/main.ts
+#### [NEW] src/excelHandler.ts
+
+## Open Questions
+
+> [!WARNING]
+> 1. 프론트엔드 프레임워크 강제 규정이 없다면, 경량화 및 설정 편의를 위해 `Vite + Vanilla TypeScript` 를 사용하는 것이 괜찮으신가요? (원하신다면 React나 Vue로도 가능합니다.)
+> 2. 추가적인 검색 필터(예: 법인별, 관리자별 검색)가 당장 도입되어야 하는 필수 기능인가요?
+
+## Verification Plan
+
+### Automated Tests
+- `npm run dev` 를 통해 `http://localhost:8080` 포트 개방 성공 여부 확인.
+- 브라우저 기능 테스트:
+    - 템플릿 다운로드 클릭 -> 정상적인 `hw_assets.xlsx` 다운로드 여부
+    - 샘플 엑셀 파일 업로드 -> 데이터 테이블에 행(Row) 생성 여부
+    - 항목 더블 클릭 혹은 [수정] 버튼 클릭 시 -> 모달 팝업 및 데이터 연동 확인
+    - [저장 후 내보내기] 클릭 -> 업데이트된 데이터가 포함된 새 엑셀 파일 다운로드 확인
+
+### Manual Verification
+- 디자인 요구사항(`Pretendard`, `#1E5149`, Border-less 컨셉) 반영 확인을 스크린샷 렌더링으로 사용자와 상호작용합니다.
--- a/51
+++ b/51
@@ -0,0 +1,51 @@
+# 구조 개선 및 다중 탭(Depth 2) 도입 계획
+
+사용자 요청에 따라 H/W와 S/W를 구분하고, 그 하위에 각각 대시보드 및 상세 항목(개인PC, 서버 등) 탭을 나누는 네비게이션 구조를 도입합니다. 바닐라 JS 기반에서 각 탭마다 다른 데이터 테이블을 그려내는 아키텍처로 개선합니다.
+
+## User Review Required
+
+> [!IMPORTANT]
+> 1. **엑셀 관리 방식 (Sheets 분리)**: 단일 엑셀 파일 안에 여러 개의 시트(Sheet)를 나누어 관리하는 방식으로 제안합니다. 한 번 엑셀을 업로드하면, `개인PC`, `서버`, `스토리지`, `전산비품` 등 각각의 시트를 한방에 파싱하여 각 탭에 적용하도록 구성하겠습니다. 
+> 2. **S/W 스키마**: 현재 H/W 기반 데이터 스키마만 정의되어 있습니다. [구독 소프트웨어]와 [영구 소프트웨어] 탭 개발을 위한 데이터 항목들(예: 사용기간, 라이선스키, 결제방식 등)은 아직 정해지지 않았으므로 일단 공통 S/W 데이터 스키마 임시 템플릿(S/W명, 유형, 라이선스키, 할당된 사용자 등)으로 만들어 두고 추후 수정할 수 있도록 개발해도 될까요?
+
+## Proposed Changes
+
+### 1. UI/UX: 2 Depth 네비게이션 (`index.html`, `style.css`)
+- **좌측(또는 상단) GNB (Global Navigation Bar)**: H/W 와 S/W 를 스위치할 수 있는 메인 탭 생성.
+- **LNB (Local Navigation Bar)**: 메인 탭 전환 시 나타나는 서브 탭(H/W: 대시보드/PC/서버/스토리지/비품, S/W: 대시보드/구독/영구).
+- `README.md` 가이드라인에 따라 화면을 분할하고 정보 밀도를 높이기 위해 Box-less, Line-based Layout 유지.
+
+#### [MODIFY] index.html
+#### [MODIFY] src/style.css
+
+---
+
+### 2. 다중 데이터 구조 및 상태 관리 (`main.ts`)
+- 현재 선택된 메뉴 뎁스(예: `activeCategory = 'HW'`, `activeSubTab = '개인PC'`)에 따라 렌더링 함수가 동기화되도록 라우팅/상태 관리 로직 추가.
+- `Dashboard` 탭 진입 시, 모든 서브 탭 데이터의 갯수(Total PCs, Total Servers 등)를 한눈에 볼 수 있는 요약 영역(Summary Cards/Charts 영역) 예약 및 구현.
+
+#### [MODIFY] src/main.ts
+
+---
+
+### 3. 멀티-시트(Multi-sheet) 엑셀 파싱 (`excelHandler.ts`)
+- `SheetJS` 기능을 확장하여 다운로드/데이터 추출 시 다중 시트 생성.
+- **H/W 템플릿 시트명**: `[개인PC, 서버, 스토리지, 전산비품]`
+- **S/W 템플릿 시트명**: `[구독SW, 영구SW]`
+
+#### [MODIFY] src/excelHandler.ts
+
+## Open Questions
+
+> [!WARNING]
+> * 왼쪽 사이드바로 메뉴를 구성하는 것이 좋을까요, 상단 가로바(Top Nav) 2단으로 구성하는 것이 좋을까요? Reference 이미지가 따로 없다면 범용적으로 관리하기 편한 **왼쪽 사이드바 구조(Sidebar Menu)** 를 제안합니다. (진행 승인 시 사이드바 형태로 구현합니다.)
+
+## Verification Plan
+
+### Automated Tests
+- 좌측 `H/W`, `S/W` 클릭 시 서브 메뉴가 정상 토글되는지 검증(`main.ts` DOM class toggle 확인).
+- 서브 메뉴 `서버` 클릭 시 빈 테이블(또는 서버 자산 테이블)이 그려지는지 확인.
+- 달라진 구조로 `엑셀 템플릿 양식`을 다운로드했을 때 파일에 다수의 시트(Sheet)가 정상 분류되어 있는지 확인.
+
+### Manual Verification
+- 브라우저 에이전트를 통해 바뀐 화면의 스크린샷(LNB 사이드바, Dashboard 화면 등)을 찍어 사용자에게 보고.
--- a/47
+++ b/47
@@ -0,0 +1,47 @@
+# 임시 DB 생성 및 S/W 사용자 관리 개편
+
+임시 DB 엑셀 파일 생성과 S/W 목록의 '할당자' 속성 UI 개편에 대한 기술 구현 계획입니다.
+
+## User Review Required
+> [!IMPORTANT]
+> **사용자 관리 데이터 저장 방식에 대한 피드백이 필요합니다.**
+> 엑셀을 임시 DB로 사용하고 있기 때문에, "사용자 관리" 팝업에서 추가/삭제된 사용자 목록을 엑셀에 저장할 때 **쉼표(,)로 구분된 하나의 문자열**(예: `홍길동, 김철수, 이영희`)로 기존 `할당자` 컬럼에 업데이트 하는 방식을 제안합니다. 이 방식이 괜찮으신가요?
+
+## Proposed Changes
+
+### 1. 임시 DB 연동
+임시로 사용할 초기 엑셀 파일(`temp_db.xlsx`)을 프로젝트 루트에 스크립트를 통해 생성합니다.
+- 개인PC, 서버, 구독SW, 영구SW 시트에 각각 구성을 확인할 수 있는 dummy 데이터 1~2개씩을 포함하여 생성합니다.
+- 향후 화면에서 '엑셀 업로드'를 통해 이 파일을 업로드하여 데이터를 화면에 뿌려볼 수 있습니다. (원하시면 페이지 로드 시 이 파일을 임포트하도록 로직을 변경할 수도 있으나, 브라우저 단에서 로컬 파일을 자동 리딩하는 것은 제한이 있으므로 기본적으로는 파일을 제공만 합니다.)
+
+---
+
+### 2. 컴포넌트: HTML 구조 변경
+#### [MODIFY] [index.html](file:///c:/Project/HM%20ITAM/index.html)
+- `sw-asset-modal`의 폼 내용 중 "할당자" 입력 폼(<label> 및 <input>) 제거
+- 관리 팝업을 위한 `sw-user-modal` 모달 오버레이 마크업 추가
+  기존 유저 목록을 보여주고, 새 사용자를 추가하거나 기존 사용자를 삭제할 수 있는 UI (리스트, 추가 인풋, 추가 버튼 기반) 작성
+
+---
+
+### 3. 컴포넌트: 로직 및 스타일
+#### [MODIFY] [src/main.ts](file:///c:/Project/HM%20ITAM/src/main.ts)
+- S/W 렌더링 영역(`renderTable`)에서 데스크탑 뷰의 `<th>할당자</th>` 및 해당하는 셀(`<td>`) 제거
+- S/W `관리` 탭(`<td>`)에 수정 버튼(`btn-edit`) 옆에 사용자 관리 아이콘 (Lucide의 `Users` 또는 `UserCog` 아이콘 활용) 추가
+- 사용자 관리 아이콘 클릭 시 `sw-user-modal` 팝업 띄우는 이벤트 리스너 추가
+- `sw-user-modal` 팝업 내에서 사용자를 추가/삭제하고 '저장' 시, 해당 S/W 자산의 `할당자` 데이터를 갱신하도록 처리 (쉼표 구분 형태)
+
+#### [MODIFY] [src/excelHandler.ts](file:///c:/Project/HM%20ITAM/src/excelHandler.ts)
+- (선택 사항) `SW_HEADERS`나 엑셀 파싱 로직은 그대로 두어 하위 호환성 유지. 사용자가 데이터를 쉼표 형태로 주고 받을 것이므로 별도의 인터페이스 변경은 없음.
+
+## Open Questions
+- 사용자 관리 팝업에서 저장할 때, 이름 말고 '부서'나 '직급' 같은 추가적인 정보도 관리가 필요하신가요? (기본적으로는 엑셀에 단일 텍스트로 보존되므로 '이름'만 관리하는 것으로 설계했습니다.)
+- 개발 환경(Vite)에서 초기 로딩 시 `temp_db.xlsx`를 자동으로 불러오도록 Vite의 플러그인 또는 fetch 로직을 추가하는 것을 원하시나요? 아니면 엑셀 파일만 만들어 드리고 사용자가 '엑셀 업로드' 버튼으로 직접 연동해 쓰는 방식이 좋으신가요?
+
+## Verification Plan
+### Manual Verification
+1. `npm run dev` 후 브라우저 접속
+2. 프로젝트 폴더에 `temp_db.xlsx` 파일이 생성되었는지 확인
+3. 소프트웨어 > 영구/구독 탭 진입 시 "할당자" 테이블 헤더가 사라진 것 확인
+4. 관리 탭의 "사용자 관리" 아이콘 클릭 시, 해당 소프트웨어의 사용자를 등록하고 삭제할 수 있는 팝업 등장하는지 확인
+5. 사용자 아이콘을 클릭해 홍길동, 김철수 등록 후, 전체 엑셀 저장 혹은 다운로드 시 엑셀 파일 내의 '할당자' 열에 `홍길동,김철수` 로 잘 들어가는지 확인
--- a/index.html
+++ b/index.html
@@ -1,61 +1,72 @@
-<!DOCTYPE html>
-<html lang="ko">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>한맥가족 자산관리시스템</title>
-  <link rel="stylesheet"
-    href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.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" 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>한맥자산관리시스템</h1>
-        </div>
-
-        <!-- Navigation (GNB + LNB in same row) -->
-        <nav class="integrated-nav" id="main-nav">
-          <!-- JS will render main items and sub items here side-by-side -->
-        </nav>
-
-        <div class="header-actions">
-          <div class="role-switcher" id="role-switcher">
-            <span class="role-label user active">실무자</span>
-            <label class="switch">
-              <input type="checkbox" id="role-toggle-checkbox">
-              <span class="slider round"></span>
-            </label>
-            <span class="role-label admin">관리자</span>
-          </div>
-          <button id="btn-admin-page" class="hidden"></button> <!-- JS 호환용 숨김 -->
-          <button id="btn-open-guide-header" class="btn btn-outline" title="프로세스 가이드">
-            <i data-lucide="book-open"></i> 가이드
-          </button>
-        </div>
-      </div>
-    </header>
-
-    <!-- Main Content Area -->
-    <main class="content-area" id="main-content">
-      <!-- Components inject views here -->
-    </main>
-
-    <!-- Footer -->
-    <footer class="main-footer">
-      <p>&copy; 2026 BARON Consultant Co,Ltd. All rights reserved.</p>
-    </footer>
-  </div>
-
-  <!-- All modals are injected dynamically -->
-  <script type="module" src="/src/main.ts"></script>
-</body>
-
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ITAM 자산관리 ERP</title>
+  <link rel="stylesheet"
+    href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
+  <link rel="stylesheet" href="/src/styles/common.css" />
+  <link rel="stylesheet" href="/src/styles/guide.css" />
+  <link rel="stylesheet" href="/src/styles/modal.css" />
+  <link rel="stylesheet" href="/src/styles/dashboard.css" />
+  <link rel="stylesheet" href="/src/styles/table.css" />
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
+</head>
+
+<body>
+  <div class="app-layout">
+    <!-- Single-Line Integrated Header -->
+    <header class="main-header">
+      <div class="header-container" id="nav-container">
+        <div class="brand">
+          <img src="/image 92.png" alt="Logo" class="main-logo" />
+          <h1>자산관리시스템<span class="sub-title">(Digital Asset Control Hub System)</span></h1>
+        </div>
+
+        <!-- Navigation (GNB + LNB in same row) -->
+        <nav class="integrated-nav" id="main-nav">
+          <!-- JS will render main items and sub items here side-by-side -->
+        </nav>
+
+        <div class="header-actions">
+          <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>
+
+    <!-- Main Content Area -->
+    <main class="content-area" id="main-content">
+      <!-- Components inject views here -->
+    </main>
+
+    <!-- Footer -->
+    <footer class="main-footer">
+      <p>Powered by BARON Consultant Co,Ltd</p>
+    </footer>
+  </div>
+
+  <!-- All modals are injected dynamically -->
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
 </html>
--- a/map_config.json
+++ b/map_config.json
@@ -1,726 +0,0 @@
-{
-  "img/location_photo/IDC/서관205.png": [
-    {
-      "x": "50.78",
-      "y": "1.53",
-      "w": "46.10",
-      "h": "6.27",
-      "asset_id": null
-    },
-    {
-      "x": "50.78",
-      "y": "10.35",
-      "w": "46.10",
-      "h": "6.27",
-      "asset_id": null
-    },
-    {
-      "x": "50.78",
-      "y": "19.06",
-      "w": "46.10",
-      "h": "6.50",
-      "asset_id": null
-    },
-    {
-      "x": "50.78",
-      "y": "27.89",
-      "w": "46.10",
-      "h": "6.50",
-      "asset_id": "server_1779761946023_14"
-    },
-    {
-      "x": "50.78",
-      "y": "36.71",
-      "w": "46.10",
-      "h": "6.50",
-      "asset_id": "server_1779761946023_18"
-    },
-    {
-      "x": "50.78",
-      "y": "45.64",
-      "w": "46.10",
-      "h": "6.32",
-      "asset_id": "server_1779761946023_23"
-    },
-    {
-      "x": "50.78",
-      "y": "54.25",
-      "w": "46.10",
-      "h": "6.54",
-      "asset_id": "server_1779761946023_24"
-    },
-    {
-      "x": "50.78",
-      "y": "63.29",
-      "w": "46.10",
-      "h": "6.50",
-      "asset_id": "server_1779761946023_1"
-    },
-    {
-      "x": "50.78",
-      "y": "72.00",
-      "w": "46.10",
-      "h": "6.32",
-      "asset_id": "server_1779761946023_21"
-    },
-    {
-      "x": "50.78",
-      "y": "81.92",
-      "w": "18.40",
-      "h": "15.58",
-      "asset_id": "server_1779761946023_17"
-    },
-    {
-      "x": "78.62",
-      "y": "81.92",
-      "w": "18.31",
-      "h": "15.58",
-      "asset_id": "server_1779761946023_20"
-    }
-  ],
-  "img/location_photo/IDC/서관202.png": [
-    {
-      "x": "56.35",
-      "y": "64.02",
-      "w": "40.87",
-      "h": "6.24",
-      "asset_id": "server_1779761946023_9"
-    },
-    {
-      "x": "56.35",
-      "y": "71.57",
-      "w": "40.87",
-      "h": "6.24",
-      "asset_id": "server_1779761946023_10"
-    },
-    {
-      "x": "56.35",
-      "y": "79.17",
-      "w": "40.87",
-      "h": "6.24",
-      "asset_id": "server_1779761946023_26"
-    },
-    {
-      "x": "56.35",
-      "y": "86.66",
-      "w": "40.87",
-      "h": "6.24",
-      "asset_id": "server_1779761946023_8"
-    },
-    {
-      "x": "56.35",
-      "y": "32.01",
-      "w": "40.87",
-      "h": "6.24",
-      "asset_id": null
-    }
-  ],
-  "img/location_photo/IDC/서관203.png": [
-    {
-      "x": "56.07",
-      "y": "2.54",
-      "w": "41.11",
-      "h": "6.52",
-      "asset_id": null
-    },
-    {
-      "x": "56.07",
-      "y": "10.12",
-      "w": "41.11",
-      "h": "6.52",
-      "asset_id": null
-    },
-    {
-      "x": "56.07",
-      "y": "17.80",
-      "w": "41.11",
-      "h": "6.52",
-      "asset_id": null
-    },
-    {
-      "x": "56.07",
-      "y": "63.51",
-      "w": "41.11",
-      "h": "6.52",
-      "asset_id": null
-    },
-    {
-      "x": "56.07",
-      "y": "71.19",
-      "w": "41.11",
-      "h": "6.52",
-      "asset_id": null
-    },
-    {
-      "x": "56.07",
-      "y": "87.70",
-      "w": "41.11",
-      "h": "6.52",
-      "asset_id": "server_1779761946023_25"
-    }
-  ],
-  "img/location_photo/IDC/서관204.png": [
-    {
-      "x": "48.87",
-      "y": "2.73",
-      "w": "47.80",
-      "h": "6.27",
-      "asset_id": null
-    },
-    {
-      "x": "48.87",
-      "y": "10.38",
-      "w": "47.80",
-      "h": "6.27",
-      "asset_id": "server_1779761946023_3"
-    },
-    {
-      "x": "48.87",
-      "y": "17.93",
-      "w": "47.80",
-      "h": "6.50",
-      "asset_id": "server_1779761946023_6"
-    },
-    {
-      "x": "48.87",
-      "y": "25.49",
-      "w": "47.80",
-      "h": "6.50",
-      "asset_id": null
-    },
-    {
-      "x": "48.87",
-      "y": "33.17",
-      "w": "47.80",
-      "h": "6.50",
-      "asset_id": "server_1779761946023_5"
-    },
-    {
-      "x": "48.87",
-      "y": "40.59",
-      "w": "47.80",
-      "h": "6.50",
-      "asset_id": "server_1779761946023_4"
-    },
-    {
-      "x": "48.87",
-      "y": "48.40",
-      "w": "47.80",
-      "h": "6.50",
-      "asset_id": null
-    },
-    {
-      "x": "48.87",
-      "y": "55.95",
-      "w": "47.80",
-      "h": "6.50",
-      "asset_id": "server_1779761946023_19"
-    },
-    {
-      "x": "48.87",
-      "y": "63.63",
-      "w": "47.80",
-      "h": "6.50",
-      "asset_id": "server_1779761946023_2"
-    },
-    {
-      "x": "48.87",
-      "y": "71.06",
-      "w": "47.80",
-      "h": "6.50",
-      "asset_id": "server_1779761946023_0"
-    },
-    {
-      "x": "48.87",
-      "y": "78.74",
-      "w": "47.80",
-      "h": "6.50",
-      "asset_id": "server_1779761946023_7"
-    },
-    {
-      "x": "48.87",
-      "y": "86.68",
-      "w": "18.99",
-      "h": "12.62",
-      "asset_id": "server_1779761946023_29"
-    }
-  ],
-  "img/location_photo/IDC/동관53.png": [
-    {
-      "x": "61.62",
-      "y": "3.08",
-      "w": "35.96",
-      "h": "7.90",
-      "asset_id": "server_1779761946023_13"
-    },
-    {
-      "x": "61.62",
-      "y": "12.68",
-      "w": "35.96",
-      "h": "7.90",
-      "asset_id": "server_1779761946023_15"
-    },
-    {
-      "x": "61.62",
-      "y": "21.75",
-      "w": "35.96",
-      "h": "7.90",
-      "asset_id": "server_1779761946023_22"
-    }
-  ],
-  "img/location_photo/IDC/동관54.png": [
-    {
-      "x": "54.71",
-      "y": "2.57",
-      "w": "42.42",
-      "h": "6.50",
-      "asset_id": null
-    },
-    {
-      "x": "54.71",
-      "y": "10.38",
-      "w": "42.42",
-      "h": "6.50",
-      "asset_id": null
-    },
-    {
-      "x": "54.71",
-      "y": "27.15",
-      "w": "42.42",
-      "h": "6.62",
-      "asset_id": "server_1779761946023_12"
-    },
-    {
-      "x": "54.71",
-      "y": "43.54",
-      "w": "42.42",
-      "h": "6.50",
-      "asset_id": "server_1779761946023_11"
-    },
-    {
-      "x": "54.71",
-      "y": "54.93",
-      "w": "42.42",
-      "h": "6.50",
-      "asset_id": null
-    },
-    {
-      "x": "54.71",
-      "y": "70.16",
-      "w": "42.42",
-      "h": "6.50",
-      "asset_id": "server_1779761946023_27"
-    },
-    {
-      "x": "54.71",
-      "y": "79.51",
-      "w": "42.42",
-      "h": "6.50",
-      "asset_id": "server_1779761946023_28"
-    }
-  ],
-  "img/location_photo/한맥빌딩/MDF실/MDF_1.png": [
-    {
-      "x": "49.33",
-      "y": "14.99",
-      "w": "7.35",
-      "h": "11.22",
-      "asset_id": "cdp0e0c"
-    },
-    {
-      "x": "59.23",
-      "y": "14.99",
-      "w": "7.35",
-      "h": "11.22",
-      "asset_id": "emys9gb"
-    },
-    {
-      "x": "69.22",
-      "y": "14.99",
-      "w": "7.35",
-      "h": "11.22",
-      "asset_id": "vmbv3pj"
-    },
-    {
-      "x": "79.12",
-      "y": "14.99",
-      "w": "7.35",
-      "h": "11.22",
-      "asset_id": "4fysk40"
-    },
-    {
-      "x": "88.97",
-      "y": "14.99",
-      "w": "7.35",
-      "h": "11.22",
-      "asset_id": "x6jaehn"
-    },
-    {
-      "x": "48.57",
-      "y": "34.11",
-      "w": "7.52",
-      "h": "11.44",
-      "asset_id": "t87p0l0"
-    },
-    {
-      "x": "56.80",
-      "y": "34.11",
-      "w": "7.52",
-      "h": "11.44",
-      "asset_id": "ywosxiv"
-    },
-    {
-      "x": "64.94",
-      "y": "34.11",
-      "w": "7.52",
-      "h": "11.44",
-      "asset_id": null
-    },
-    {
-      "x": "72.89",
-      "y": "34.11",
-      "w": "7.56",
-      "h": "11.44",
-      "asset_id": null
-    },
-    {
-      "x": "81.22",
-      "y": "34.06",
-      "w": "7.52",
-      "h": "11.44",
-      "asset_id": null
-    },
-    {
-      "x": "89.36",
-      "y": "34.06",
-      "w": "7.52",
-      "h": "11.44",
-      "asset_id": "tormk2l"
-    },
-    {
-      "x": "48.57",
-      "y": "53.06",
-      "w": "9.06",
-      "h": "20.99",
-      "asset_id": null
-    },
-    {
-      "x": "58.48",
-      "y": "53.06",
-      "w": "9.06",
-      "h": "20.99",
-      "asset_id": "server_1779761946023_30"
-    },
-    {
-      "x": "68.55",
-      "y": "53.06",
-      "w": "9.06",
-      "h": "20.99",
-      "asset_id": "server_1779761946023_31"
-    },
-    {
-      "x": "78.54",
-      "y": "53.06",
-      "w": "9.01",
-      "h": "20.99",
-      "asset_id": "server_1779761946023_32"
-    },
-    {
-      "x": "89.36",
-      "y": "53.22",
-      "w": "7.45",
-      "h": "10.11",
-      "asset_id": "TEMP-03g59cx"
-    },
-    {
-      "x": "89.36",
-      "y": "64.92",
-      "w": "7.45",
-      "h": "9.81",
-      "asset_id": "TEMP-06l8zjx"
-    },
-    {
-      "x": "48.57",
-      "y": "77.41",
-      "w": "9.18",
-      "h": "21.45",
-      "asset_id": "server_1779761946023_34"
-    },
-    {
-      "x": "58.56",
-      "y": "77.41",
-      "w": "9.23",
-      "h": "21.45",
-      "asset_id": "server_1779761946023_35"
-    },
-    {
-      "x": "68.63",
-      "y": "77.41",
-      "w": "9.06",
-      "h": "21.45",
-      "asset_id": "server_1779761946023_36"
-    },
-    {
-      "x": "78.71",
-      "y": "77.41",
-      "w": "8.98",
-      "h": "21.45",
-      "asset_id": "server_1779761946023_37"
-    }
-  ],
-  "img/location_photo/한맥빌딩/MDF실/MDF_2.png": [
-    {
-      "x": "56.59",
-      "y": "44.53",
-      "w": "40.65",
-      "h": "6.90",
-      "asset_id": "1vbkbzr"
-    },
-    {
-      "x": "56.59",
-      "y": "54.80",
-      "w": "40.65",
-      "h": "6.90",
-      "asset_id": "0ru63ay"
-    },
-    {
-      "x": "56.59",
-      "y": "65.94",
-      "w": "40.65",
-      "h": "6.90",
-      "asset_id": "server_1779761946023_40"
-    }
-  ],
-  "img/location_photo/한맥빌딩/MDF실/MDF_3.png": [
-    {
-      "x": "56.71",
-      "y": "13.20",
-      "w": "40.58",
-      "h": "6.90",
-      "asset_id": null
-    },
-    {
-      "x": "56.71",
-      "y": "23.57",
-      "w": "40.58",
-      "h": "6.90",
-      "asset_id": "8aeog58"
-    },
-    {
-      "x": "56.71",
-      "y": "34.57",
-      "w": "40.58",
-      "h": "6.90",
-      "asset_id": "ywosxiv"
-    },
-    {
-      "x": "56.71",
-      "y": "44.69",
-      "w": "40.58",
-      "h": "6.90",
-      "asset_id": "1vbkbzr"
-    },
-    {
-      "x": "56.71",
-      "y": "54.80",
-      "w": "40.58",
-      "h": "6.90",
-      "asset_id": "0ru63ay"
-    },
-    {
-      "x": "56.71",
-      "y": "65.81",
-      "w": "40.58",
-      "h": "6.90",
-      "asset_id": "server_1779761946023_40"
-    },
-    {
-      "x": "56.71",
-      "y": "76.05",
-      "w": "40.58",
-      "h": "6.90",
-      "asset_id": null
-    }
-  ],
-  "img/location_photo/한맥빌딩/MDF실/MDF_4.png": [
-    {
-      "x": "52.36",
-      "y": "64.02",
-      "w": "44.60",
-      "h": "6.73",
-      "asset_id": "5tbpuy4"
-    }
-  ],
-  "img/location_photo/기술개발센터/서버실/서버실_1.png": [
-    {
-      "x": "69.45",
-      "y": "3.30",
-      "w": "8.58",
-      "h": "11.45",
-      "asset_id": "server_1779761946023_41"
-    },
-    {
-      "x": "79.05",
-      "y": "3.30",
-      "w": "12.02",
-      "h": "11.45",
-      "asset_id": "server_1779761946023_42"
-    },
-    {
-      "x": "90.16",
-      "y": "26.04",
-      "w": "8.43",
-      "h": "21.11",
-      "asset_id": "server_1779761946023_43"
-    },
-    {
-      "x": "53.04",
-      "y": "52.91",
-      "w": "8.43",
-      "h": "21.11",
-      "asset_id": "server_1779761946023_44"
-    },
-    {
-      "x": "62.36",
-      "y": "52.91",
-      "w": "8.43",
-      "h": "21.11",
-      "asset_id": "server_1779761946023_45"
-    },
-    {
-      "x": "71.65",
-      "y": "52.91",
-      "w": "8.43",
-      "h": "21.11",
-      "asset_id": "server_1779761946023_46"
-    },
-    {
-      "x": "80.87",
-      "y": "52.91",
-      "w": "8.43",
-      "h": "21.11",
-      "asset_id": "server_1779761946023_47"
-    },
-    {
-      "x": "90.08",
-      "y": "52.91",
-      "w": "8.43",
-      "h": "21.11",
-      "asset_id": "server_1779761946023_48"
-    },
-    {
-      "x": "43.78",
-      "y": "78.00",
-      "w": "8.50",
-      "h": "21.23",
-      "asset_id": "19kai41"
-    },
-    {
-      "x": "53.15",
-      "y": "78.00",
-      "w": "8.43",
-      "h": "21.23",
-      "asset_id": "server_1779761946023_50"
-    },
-    {
-      "x": "62.36",
-      "y": "78.00",
-      "w": "8.43",
-      "h": "21.23",
-      "asset_id": "server_1779761946023_51"
-    },
-    {
-      "x": "71.36",
-      "y": "78.00",
-      "w": "8.43",
-      "h": "21.23",
-      "asset_id": "server_1779761946023_52"
-    },
-    {
-      "x": "80.53",
-      "y": "78.00",
-      "w": "8.43",
-      "h": "21.23",
-      "asset_id": "srlmyar"
-    },
-    {
-      "x": "89.77",
-      "y": "78.00",
-      "w": "8.50",
-      "h": "21.23",
-      "asset_id": "server_1779761946023_54"
-    }
-  ],
-  "img/location_photo/기술개발센터/서버실/서버실_2.png": [
-    {
-      "x": "49.60",
-      "y": "1.93",
-      "w": "47.19",
-      "h": "6.75",
-      "asset_id": "server_1779761946023_55"
-    },
-    {
-      "x": "49.60",
-      "y": "12.04",
-      "w": "47.19",
-      "h": "6.75",
-      "asset_id": "server_1779761946023_56"
-    },
-    {
-      "x": "49.60",
-      "y": "21.39",
-      "w": "47.19",
-      "h": "6.75",
-      "asset_id": "server_1779761946023_57"
-    },
-    {
-      "x": "49.60",
-      "y": "30.73",
-      "w": "47.19",
-      "h": "6.75",
-      "asset_id": "server_1779761946023_58"
-    },
-    {
-      "x": "49.60",
-      "y": "39.82",
-      "w": "47.19",
-      "h": "6.75",
-      "asset_id": "server_1779761946023_59"
-    },
-    {
-      "x": "49.60",
-      "y": "50.13",
-      "w": "47.19",
-      "h": "6.75",
-      "asset_id": "server_1779761946023_60"
-    },
-    {
-      "x": "49.60",
-      "y": "59.28",
-      "w": "47.19",
-      "h": "6.75",
-      "asset_id": "server_1779761946023_53"
-    },
-    {
-      "x": "49.60",
-      "y": "68.63",
-      "w": "47.19",
-      "h": "6.75",
-      "asset_id": "server_1779761946023_62"
-    },
-    {
-      "x": "49.60",
-      "y": "77.84",
-      "w": "47.19",
-      "h": "6.75",
-      "asset_id": "server_1779761946023_63"
-    },
-    {
-      "x": "49.60",
-      "y": "86.93",
-      "w": "47.19",
-      "h": "6.75",
-      "asset_id": "server_1779761946023_64"
-    }
-  ]
-}
--- a/map_editor.html
+++ b/map_editor.html
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>ITAM Map Coordinate Editor v3.0</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
-</head>
-<body class="editor-body">
-
-  <!-- Left: File Selector -->
-  <div class="file-sidebar" id="file-sidebar">
-    <!-- Rendered by MapEditor.ts -->
-  </div>
-
-  <!-- Center: Main Editor -->
-  <div class="editor-container" id="container">
-    <div class="img-wrapper" id="wrapper">
-      <img src="" id="target-img" alt="Map Image">
-    </div>
-  </div>
-
-  <!-- Right: Control Panel -->
-  <div class="sidebar">
-    <h2>Map Editor <small class="editor-version">v3.0</small></h2>
-    <div class="current-path" id="current-path">파일을 선택하세요</div>
-    <p>
-      드래그하여 구역을 정의하세요. 저장 버튼을 누르면 즉시 시스템에 반영됩니다.
-    </p>
-
-    <div class="box-list" id="box-list"></div>
-
-    <div class="actions">
-      <button id="btn-clear-all" class="btn btn-outline">전체 삭제</button>
-      <button id="btn-save-server" class="btn btn-primary">서버에 즉시 저장</button>
-      <div id="save-status"></div>
-    </div>
-  </div>
-
-  <script type="module" src="/src/map-editor-main.ts"></script>
-</body>
-</html>
--- a/migrate_to_korean.js
+++ b/migrate_to_korean.js
@@ -0,0 +1,77 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
+
+// 영문 -> 한글 필드 매핑 테이블
+const FIELD_MAPPING = {
+  corp: '법인',
+  asset_code: '자산코드',
+  type: '유형',
+  purpose: '용도',
+  detail_purpose: '상세용도',
+  details: '상세',
+  current_org: '현사용조직',
+  prev_org: '이전사용조직',
+  location: '위치',
+  manager_main: '담당자_정',
+  manager_sub: '담당자_부',
+  ip_address: 'IP주소',
+  remote_tool: '원격접속',
+  server_id: '서버ID',
+  server_pw: '서버PW',
+  model_name: '모델명',
+  os: 'OS',
+  cpu: 'CPU',
+  ram: 'RAM',
+  storage1: 'SSD1',
+  storage2: 'SSD2',
+  status: '상태'
+};
+
+async function migrateData() {
+  const connection = await mysql.createConnection({
+    host: DB_HOST,
+    user: DB_USER,
+    password: DB_PASS,
+    database: DB_NAME,
+    port: parseInt(DB_PORT || '3306')
+  });
+
+  console.log('🔄 데이터 필드 영문 -> 한글 마이그레이션 시작...');
+
+  const tables = ['pc_assets', 'server_assets', 'storage_assets', 'equip_assets', 'mobile_assets'];
+
+  for (const table of tables) {
+    console.log(`📦 ${table} 처리 중...`);
+    const [rows] = await connection.query(`SELECT * FROM ${table}`);
+    
+    for (const row of rows) {
+      const updatedRow = { ...row };
+      // 영문 키의 값을 한글 키로 복사
+      Object.entries(FIELD_MAPPING).forEach(([eng, kor]) => {
+        if (row[eng] !== undefined && row[eng] !== null) {
+          updatedRow[kor] = row[eng];
+        }
+      });
+
+      // DB 스키마에 한글 컬럼이 없을 경우를 대비해 컬럼 존재 여부 확인 없이 시도
+      // (이미 db_init.js가 한글 컬럼을 생성했을 가능성 확인 필요)
+      try {
+        await connection.query(`UPDATE ${table} SET ? WHERE id = ?`, [updatedRow, row.id]);
+      } catch (err) {
+        // 컬럼이 없어서 실패하는 경우 무시 (나중에 수동 추가)
+      }
+    }
+  }
+
+  console.log('✨ 마이그레이션 완료.');
+  await connection.end();
+}
+
+migrateData().catch(err => {
+  console.error('❌ 마이그레이션 실패:', err);
+  process.exit(1);
+});
--- a/Show More
+++ b/Show More