Merge remote-tracking branch 'origin/main'

# Conflicts:
#	README.md

.dockerignore

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

.env.example

@@ -0,0 +1,17 @@
+# 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

.gitea/coverage.json

@@ -0,0 +1,7 @@
+{
+    "Path": "./backend/coverage.out",
+    "Thresholds": {
+        "baron-sso-backend/internal/handler": 10,
+        "baron-sso-backend/internal/service": 10
+    }
+}

.gitea/workflows/itam_code_check.yml

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

.gitea/workflows/itam_docker_build_check.yml

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

.gitea/workflows/itam_production_deploy.yml

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

.gitignore

@@ -5,3 +5,4 @@ dist/
 *.log
 .DS_Store
 Thumbs.db
+backups/

Dockerfile.backend

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

Dockerfile.backend.prod

@@ -0,0 +1,48 @@
+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"]

Dockerfile.frontend

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

Dockerfile.frontend.prod

@@ -0,0 +1,62 @@
+# 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 ./
+
+# 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
+COPY public/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;"]

ITAM_임원보고_운영배포_요약.md

@@ -0,0 +1,103 @@
+# 자산관리 시스템 운영 오픈 보고 요약
+
+## 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일 오픈.

Makefile

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

README.md

@@ -9,6 +9,17 @@
     - 기존 동작 방식과 성능을 기준(Baseline)으로 삼고, 수정 후에도 **기존의 모든 기능이 무결하게 유지되는지 반드시 테스트하여 입증**한다.
     - 검증 결과를 바탕으로 "무엇을, 왜, 어떻게" 바꿀지 상세 보고 후, 사용자로부터 **'진행시켜'** 승인을 얻은 뒤에만 집행한다.
 4. **선보고 후승인**: 모든 기능 수정 및 코드 변경 전에는 예상 방안을 먼저 보고하고 승인 절차를 거친다.
+5. **DB 삭제 및 초기화 절대 엄금 (Strict DB Deletion Policy)**:
+    - 어떠한 경우에도 `DELETE`, `DROP`, `TRUNCATE` 등 데이터를 삭제하거나 테이블을 초기화하는 작업은 사전에 사용자에게 상세 사유를 보고하고 **명시적 승인**을 얻은 후에만 시행한다.
+    - 기존 데이터의 가치를 최우선으로 하며, 작업 전 백업 여부를 반드시 확인한다.
+6. **RED–GREEN–Refactor 개발 원칙**:
+    - 모든 기능 개발과 버그 수정은 **RED → GREEN → Refactor** 순서로 진행한다.
+    - **RED**: 요구사항을 명확히 표현하는 테스트를 먼저 작성하고, 해당 테스트가 기능 미구현 또는 결함으로 인해 실패하는지 확인한다.
+    - **GREEN**: 실패한 테스트를 통과시키는 데 필요한 최소한의 코드만 구현하며, 불필요한 기능 추가나 구조 변경을 하지 않는다.
+    - **Refactor**: 관련 테스트와 기존 테스트가 모두 통과하는 상태에서만 중복 제거, 명칭 개선, 책임 분리 등 코드 구조를 개선하며 동작은 변경하지 않는다.
+    - 각 단계가 끝날 때마다 관련 테스트와 기존 기능의 회귀 여부를 검증한다.
+    - 테스트 작성이 현실적으로 불가능한 경우에는 그 사유와 대체 검증 방법을 먼저 보고하고 승인을 받은 후 진행한다.
+    - 본 원칙을 적용할 때에도 기존의 **선보고 후승인** 및 **외과 수술식 수정** 규칙을 준수한다.
 
 ---
 
@@ -28,29 +39,8 @@
 
 ### 🎨 ITAM 시스템 디자인 가이드 (Design Guide)
 
-1.  **디자인 철학 (Design Philosophy)**
-    *   **Minimalist & Border-based**: 불필요한 박스(Card) 사용을 최소화하고, 정보의 구분은 간결한 라인(Border/Divider)을 활용하여 시각적 피로도를 낮춥니다.
-    *   **Professional Achromatic**: 무채색(Black, White, Grey)을 기본으로 하여 정돈된 업무 환경을 제공합니다.
-    *   **Green Accent**: 블루 대신 짙은 그린(`#1E5149`)을 포인트 컬러로 사용하여 차분한 전문성을 강조합니다.
+디자인 일관성 및 시각적 원칙에 관한 상세 내용은 아래 문서를 참조하십시오.
 
-2.  **타이포그래피 (Typography)**
-    *   **Font Family**: `Pretendard` (전역 적용)
-    *   **Letter Spacing**: `-0.02em` (약 -2%) 적용. 자간을 좁게 설정하여 밀도 있고 세련된 가독성을 확보합니다.
-    *   **Weights**: 400(Regular), 500(Medium), 600(SemiBold), 700(Bold).
+👉 **[디자인 가이드 바로가기 (design_rule.md)](./design_rule.md)**
 
-3.  **컬러 팔레트 (Color Palette)**
-    *   **Point Color**: `#1E5149` (Deep Green) - 강조, 활성화 상태, 주요 액션 버튼.
-    *   **Text**: Main(`#111827` - Near Black), Muted(`#6B7280` - Grey).
-    *   **Border/Divider**: `#E5E7EB` (Light Grey) - 정보 구분을 위한 얇은 실선.
-    *   **Background**: `#FFFFFF` (White) / `#F9FAFB` (Off White).
-
-4.  **레이아웃 및 컴포넌트 규칙 (Layout Rules)**
-    *   **Box-less Design**: 꼭 필요한 정보 묶음(데이터 그룹화 등)이 아니면 박스 형태의 테두리나 배경 사용을 지양합니다.
-    *   **Line-based Division**: 섹션 간의 구분은 1px 두께의 얇은 실선(Border)을 통해 명확히 합니다.
-    *   **Table**: 배경색이나 화려한 효과 없이 행(Row) 간의 얇은 구분선만 사용하여 데이터 본연에 집중하게 합니다.
-    *   **Input/Button**: 입력 필드와 버튼은 최소한의 보더와 포인트 컬러만 사용하여 정갈하게 표현합니다.
-    *   **Modal (모달 공통 규칙)**:
-        *   **Header**: 짙은 그린(`#1E5149`) 배경에 화이트 텍스트를 사용하며, 우측 상단에 명확한 'X' 닫기 버튼을 배치합니다.
-        *   **Interaction**: 사용자의 편의를 위해 `ESC` 키를 누르거나 모달 바깥 영역(Overlay)을 클릭하면 모달이 닫히도록 구현합니다.
-        *   **Layout**: `detail.png` 기준의 2열 그리드 시스템을 권장하며, 하단 우측에 액션 버튼(닫기, 저장 등)을 배치합니다.
 

TEST_LOCAL.md

@@ -0,0 +1,108 @@
+# 로컬 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

WORK_LOG_20260615.md

@@ -0,0 +1,30 @@
+# 📝 작업 보고서 (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
+**상태**: 소스 코드 수정 없음, 데이터베이스 정제 완료.

backup_refactor/index.html

@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>ITAM 자산관리 ERP</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
-    <link rel="stylesheet" href="/src/styles/common.css" />
-    <link rel="stylesheet" href="/src/styles/modal.css" />
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
-  </head>
-  <body>
-    <div class="app-layout">
-      <!-- Single-Line Integrated Header -->
-      <header class="main-header">
-        <div class="header-container" id="nav-container">
-          <div class="brand">
-            <h1>HM <span>ITAM</span></h1>
-          </div>
-          
-          <!-- Navigation (GNB + LNB in same row) -->
-          <nav class="integrated-nav" id="main-nav">
-            <!-- JS will render main items and sub items here side-by-side -->
-          </nav>
-
-          <div class="header-actions">
-            <button id="btn-download-template" class="btn btn-outline" title="통합 양식 다운로드">
-              <i data-lucide="download"></i> 양식
-            </button>
-            <label for="excel-upload" class="btn btn-outline" title="엑셀 파일 업로드">
-              <i data-lucide="upload"></i> 업로드
-            </label>
-            <input type="file" id="excel-upload" accept=".xlsx, .xls" style="display: none;" />
-            <button id="btn-export-excel" class="btn btn-primary" title="일괄 엑셀 저장">
-              <i data-lucide="file-spreadsheet"></i> 엑셀저장
-            </button>
-            <button id="btn-add-asset" class="btn btn-primary hidden">
-              <i data-lucide="plus"></i> 자산추가
-            </button>
-          </div>
-        </div>
-      </header>
-
-      <!-- Main Content Area -->
-      <main class="content-area" id="main-content">
-        <!-- Components inject views here -->
-      </main>
-    </div>
-
-    <!-- All modals are injected dynamically -->
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>

backup_refactor/package.json

@@ -1,25 +0,0 @@
-{
-  "name": "hm-itam",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview",
-    "server": "node server.js",
-    "db-init": "node db_init.js"
-  },
-  "devDependencies": {
-    "typescript": "^5.2.2",
-    "vite": "^5.2.0"
-  },
-  "dependencies": {
-    "cors": "^2.8.6",
-    "dotenv": "^17.4.2",
-    "express": "^5.2.1",
-    "lucide": "^0.364.0",
-    "mysql2": "^3.22.1",
-    "xlsx": "^0.18.5"
-  }
-}

backup_refactor/src/components/Modal/BaseModal.ts

@@ -1,35 +0,0 @@
-/**
- * 모든 모달의 공통 기능 (닫기, ESC 처리, 배경 클릭 등)을 관리하는 베이스 모듈입니다.
- */
-export function initBaseModal() {
-  const closeAllModals = () => {
-    const modals = document.querySelectorAll('.modal-overlay');
-    modals.forEach(modal => modal.classList.add('hidden'));
-  };
-
-  // ESC 키로 닫기
-  window.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape') closeAllModals();
-  });
-
-  // 배경(Overlay) 클릭 시 닫기 (동적 생성된 모달 대응을 위해 이벤트 위임 고려 가능하나 일단 단순 구현)
-  document.addEventListener('click', (e) => {
-    const target = e.target as HTMLElement;
-    if (target.classList.contains('modal-overlay')) {
-      closeAllModals();
-    }
-  });
-
-  return { closeAllModals };
-}
-
-/**
- * 특정 모달을 엽니다.
- * @param modalId 모달 엘리먼트의 ID
- */
-export function openModal(modalId: string) {
-  const modal = document.getElementById(modalId);
-  if (modal) {
-    modal.classList.remove('hidden');
-  }
-}

backup_refactor/src/components/Modal/DashboardDetailModal.ts

@@ -1,109 +0,0 @@
-import { HardwareAsset, SoftwareAsset } from '../../core/excelHandler';
-import { state } from '../../core/state';
-
-const DASHBOARD_DETAIL_MODAL_HTML = `
-  <div id="dashboard-detail-modal" class="modal-overlay hidden">
-    <div class="modal-content wide" style="max-width: 1000px;">
-      <div class="modal-header">
-        <h2 id="dashboard-detail-modal-title">상세 목록</h2>
-        <button id="btn-close-dashboard-detail-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
-      </div>
-      <div class="modal-body">
-        <div class="table-container">
-          <table style="width:100%;">
-            <thead></thead>
-            <tbody id="dashboard-detail-tbody"></tbody>
-          </table>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <div></div>
-        <button id="btn-cancel-dashboard-detail-modal" class="btn btn-outline">닫기</button>
-      </div>
-    </div>
-  </div>
-`;
-
-export function initDashboardDetailModal() {
-  if (!document.getElementById('dashboard-detail-modal')) {
-    document.body.insertAdjacentHTML('beforeend', DASHBOARD_DETAIL_MODAL_HTML);
-  }
-
-  const modal = document.getElementById('dashboard-detail-modal')!;
-  const closeBtn = document.getElementById('btn-close-dashboard-detail-modal')!;
-  const cancelBtn = document.getElementById('btn-cancel-dashboard-detail-modal')!;
-  
-  const closeModal = () => modal.classList.add('hidden');
-  closeBtn.addEventListener('click', closeModal);
-  cancelBtn.addEventListener('click', closeModal);
-  modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });
-}
-
-export function openDashboardDetail(title: string, list: HardwareAsset[]) {
-  const modal = document.getElementById('dashboard-detail-modal');
-  if (!modal) return;
-  const titleEl = document.getElementById('dashboard-detail-modal-title');
-  const tbody = document.getElementById('dashboard-detail-tbody');
-  if (!titleEl || !tbody) return;
-  const thead = tbody.closest('table')?.querySelector('thead');
-  if (!thead) return;
-
-  titleEl.textContent = title;
-  thead.innerHTML = `<tr><th>No</th><th>유형</th><th>자산코드</th><th>명칭/모델</th><th>위치</th><th>담당/사용자</th><th>구매일</th><th>금액</th></tr>`;
-  tbody.innerHTML = '';
-  if (list.length === 0) {
-    tbody.innerHTML = `<tr><td colspan="8" style="text-align:center; padding: 2rem;">해당 조건의 자산이 없습니다.</td></tr>`;
-  } else {
-    list.forEach((asset, idx) => {
-      let manager = asset.관리자 || asset.사용자 || asset.담당자_정 || '-';
-      let name = asset.명칭 || asset.모델명 || '-';
-      const tr = document.createElement('tr');
-      tr.innerHTML = `<td>${idx+1}</td><td>${asset.type}</td><td>${asset.자산코드}</td><td>${name}</td><td>${asset.위치||'-'}</td><td>${manager}</td><td>${asset.구매일||'-'}</td><td>${asset.금액||'-'}</td>`;
-      tbody.appendChild(tr);
-    });
-  }
-  modal.classList.remove('hidden');
-}
-
-export function openSwDashboardDetail(title: string, list: SoftwareAsset[]) {
-  const modal = document.getElementById('dashboard-detail-modal');
-  if (!modal) return;
-  const titleEl = document.getElementById('dashboard-detail-modal-title');
-  const tbody = document.getElementById('dashboard-detail-tbody');
-  if (!titleEl || !tbody) return;
-  const thead = tbody.closest('table')?.querySelector('thead');
-  if (!thead) return;
-
-  titleEl.textContent = title;
-  thead.innerHTML = `<tr><th>No</th><th>유형</th><th>법인</th><th>제품명</th><th>수량</th><th>금액</th></tr>`;
-  tbody.innerHTML = '';
-  list.forEach((sw, idx) => {
-    const tr = document.createElement('tr');
-    tr.innerHTML = `<td>${idx+1}</td><td>${sw.type}</td><td>${sw.법인}</td><td>${sw.제품명}</td><td>${sw.수량}</td><td>${sw.금액}</td>`;
-    tbody.appendChild(tr);
-  });
-  modal.classList.remove('hidden');
-}
-
-export function openSwUsageDetail(title: string, list: SoftwareAsset[]) {
-  const modal = document.getElementById('dashboard-detail-modal');
-  if (!modal) return;
-  const titleEl = document.getElementById('dashboard-detail-modal-title');
-  const tbody = document.getElementById('dashboard-detail-tbody');
-  if (!titleEl || !tbody) return;
-  const thead = tbody.closest('table')?.querySelector('thead');
-  if (!thead) return;
-
-  titleEl.textContent = title;
-  thead.innerHTML = `<tr><th>No</th><th>법인</th><th>제품명</th><th>수량</th><th>사용중</th><th>사용가능</th></tr>`;
-  tbody.innerHTML = '';
-  list.forEach((sw, idx) => {
-    const assigned = state.masterData.swUsers.filter(u => u.swId === sw.id).length;
-    const qty = typeof sw.수량 === 'number' ? sw.수량 : parseInt(sw.수량||'0', 10);
-    const avail = qty - assigned;
-    const tr = document.createElement('tr');
-    tr.innerHTML = `<td>${idx+1}</td><td>${sw.법인}</td><td>${sw.제품명}</td><td>${qty}</td><td>${assigned}</td><td>${avail}</td>`;
-    tbody.appendChild(tr);
-  });
-  modal.classList.remove('hidden');
-}

backup_refactor/src/components/Modal/HWModal.ts

@@ -1,335 +0,0 @@
-import { state } from '../../core/state';
-import { HardwareAsset } from '../../core/excelHandler';
-import { renderTable } from '../../views/AssetTableView';
-import { createIcons, Paperclip } from 'lucide';
-
-let currentAsset: HardwareAsset | null = null;
-let isEditMode = false;
-
-const HW_MODAL_HTML = `
-  <div id="hw-asset-modal" class="modal-overlay hidden">
-    <div class="modal-content wide">
-      <div class="modal-header">
-        <h2 id="hw-modal-title">자산 상세 정보</h2>
-        <button id="btn-close-hw-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
-      </div>
-      <div class="modal-body">
-        <form id="hw-asset-form" class="grid-form">
-          <input type="hidden" id="hw-asset-id" />
-          <input type="hidden" id="hw-asset-type" />
-
-          <!-- Group 1: 기본 정보 -->
-          <div class="form-section-title">기본 정보 (Identity)</div>
-          <div class="form-group">
-            <label for="hw-법인">법인</label>
-            <input type="text" id="hw-법인" required />
-          </div>
-          <div class="form-group">
-            <label for="hw-자산코드">자산번호/코드</label>
-            <input type="text" id="hw-자산코드" required />
-          </div>
-          <div class="form-group server-only">
-            <label for="hw-용도">용도</label>
-            <input type="text" id="hw-용도" />
-          </div>
-          <div class="form-group server-only">
-            <label for="hw-상세">상세 내용</label>
-            <input type="text" id="hw-상세" />
-          </div>
-          <div class="form-group non-server">
-            <label for="hw-명칭">명칭</label>
-            <input type="text" id="hw-명칭" />
-          </div>
-          <div class="form-group full-width server-only">
-            <label for="hw-비고">비고</label>
-            <input type="text" id="hw-비고" />
-          </div>
-
-          <!-- Group 2: 네트워크 정보 -->
-          <div class="form-section-title server-only">네트워크 정보 (Connectivity)</div>
-          <div class="form-group server-only">
-            <label for="hw-IP주소">IP 주소 1</label>
-            <input type="text" id="hw-IP주소" />
-          </div>
-          <div class="form-group server-only">
-            <label for="hw-IP2">IP 주소 2</label>
-            <input type="text" id="hw-IP2" />
-          </div>
-          <div class="form-group server-only">
-            <label for="hw-원격접속">원격 도구 (Anydesk/Chrome 등)</label>
-            <input type="text" id="hw-원격접속" />
-          </div>
-          <div class="form-group server-only">
-            <label for="hw-서버ID">서버 ID</label>
-            <input type="text" id="hw-서버ID" />
-          </div>
-          <div class="form-group server-only">
-            <label for="hw-서버PW">서버 PW</label>
-            <input type="text" id="hw-서버PW" />
-          </div>
-          <div class="form-group non-server" id="hw-IP주소-group">
-            <label for="hw-IP주소-non-server">IP 주소</label>
-            <input type="text" id="hw-IP주소-non-server" />
-          </div>
-
-          <!-- Group 3: 시스템 사양 -->
-          <div class="form-section-title">시스템 사양 (Specifications)</div>
-          <div class="form-group">
-            <label for="hw-모델명">모델명</label>
-            <input type="text" id="hw-모델명" />
-          </div>
-          <div class="form-group">
-            <label for="hw-OS">운영체제 (OS)</label>
-            <input type="text" id="hw-OS" />
-          </div>
-          <div class="form-group">
-            <label for="hw-CPU">CPU 사양</label>
-            <input type="text" id="hw-CPU" />
-          </div>
-          <div class="form-group">
-            <label for="hw-RAM">RAM 용량</label>
-            <input type="text" id="hw-RAM" />
-          </div>
-          <div class="form-group">
-            <label for="hw-SSD1">Storage 1 (SSD/HDD)</label>
-            <input type="text" id="hw-SSD1" />
-          </div>
-          <div class="form-group">
-            <label for="hw-SSD2">Storage 2 (SSD/HDD)</label>
-            <input type="text" id="hw-SSD2" />
-          </div>
-          <div class="form-group server-only">
-            <label for="hw-모니터링">모니터링 여부</label>
-            <input type="text" id="hw-모니터링" />
-          </div>
-          <div class="form-group" id="hw-비품유형-group" style="display:none;">
-            <label for="hw-비품유형">비품유형</label>
-            <select id="hw-비품유형">
-              <option value="노트북">노트북</option><option value="태블릿">태블릿</option><option value="휴대폰">휴대폰</option>
-            </select>
-          </div>
-          <div class="form-group full-width non-server">
-            <label for="hw-HW사양">H/W 사양 상세</label>
-            <textarea id="hw-HW사양" rows="2"></textarea>
-          </div>
-
-          <!-- Group 4: 관리 및 운영 -->
-          <div class="form-section-title">관리 및 운영 (Operation)</div>
-          <div class="form-group">
-            <label for="hw-위치">설치위치</label>
-            <input type="text" id="hw-위치" />
-          </div>
-          <div class="form-group">
-            <label for="hw-담당자_정">담당자 (정)</label>
-            <input type="text" id="hw-담당자_정" />
-          </div>
-          <div class="form-group">
-            <label for="hw-담당자_부">담당자 (부)</label>
-            <input type="text" id="hw-담당자_부" />
-          </div>
-          <div class="form-group non-server">
-            <label for="hw-구매일">구매일</label>
-            <input type="text" id="hw-구매일" />
-          </div>
-          <div class="form-group non-server">
-            <label for="hw-금액">금액</label>
-            <input type="text" id="hw-금액" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\d))/g, ',')" />
-          </div>
-          <div class="form-group full-width">
-            <label>품의서 (파일 증빙)</label>
-            <div style="display:flex; align-items:center; gap:0.5rem;">
-              <input type="file" id="hw-품의서" />
-              <span id="hw-품의서명" style="font-size:0.75rem; color:var(--text-light)"></span>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div class="modal-footer">
-        <button id="btn-delete-hw-asset" class="btn btn-outline btn-danger">삭제</button>
-        <div class="footer-actions">
-          <button id="btn-revert-hw-edit" class="btn btn-outline hidden">수정 취소</button>
-          <button id="btn-cancel-hw-modal" class="btn btn-outline">닫기</button>
-          <button id="btn-save-hw-asset" class="btn btn-primary">수정</button>
-        </div>
-      </div>
-    </div>
-  </div>
-`;
-
-export function openHwModal(asset: HardwareAsset) {
-  currentAsset = asset;
-  isEditMode = false; 
-  
-  const modal = document.getElementById('hw-asset-modal')!;
-  const form = document.getElementById('hw-asset-form') as HTMLFormElement;
-  const saveBtn = document.getElementById('btn-save-hw-asset')!;
-  const revertBtn = document.getElementById('btn-revert-hw-edit')!;
-  
-  form.reset();
-  form.classList.remove('is-edit-mode');
-  form.classList.add('is-view-mode');
-  saveBtn.textContent = '수정'; 
-  revertBtn.classList.add('hidden'); 
-  
-  fillHwFormData(asset);
-
-  modal.classList.remove('hidden');
-  createIcons({ icons: { Paperclip } });
-}
-
-function fillHwFormData(asset: HardwareAsset) {
-  (document.getElementById('hw-asset-id') as HTMLInputElement).value = asset.id;
-  (document.getElementById('hw-asset-type') as HTMLInputElement).value = asset.type;
-  (document.getElementById('hw-법인') as HTMLInputElement).value = asset.법인;
-  (document.getElementById('hw-자산코드') as HTMLInputElement).value = asset.자산코드;
-  (document.getElementById('hw-위치') as HTMLInputElement).value = asset.위치;
-  (document.getElementById('hw-모델명') as HTMLInputElement).value = asset.모델명 || '';
-  (document.getElementById('hw-OS') as HTMLInputElement).value = asset.OS || '';
-  (document.getElementById('hw-CPU') as HTMLInputElement).value = asset.CPU || '';
-  (document.getElementById('hw-RAM') as HTMLInputElement).value = asset.RAM || '';
-  (document.getElementById('hw-SSD1') as HTMLInputElement).value = asset.SSD1 || '';
-  (document.getElementById('hw-SSD2') as HTMLInputElement).value = asset.SSD2 || '';
-  (document.getElementById('hw-담당자_정') as HTMLInputElement).value = asset.담당자_정 || asset.관리자 || '';
-  (document.getElementById('hw-담당자_부') as HTMLInputElement).value = asset.담당자_부 || '';
-  (document.getElementById('hw-품의서명') as HTMLElement).textContent = asset.품의서명 || '';
-
-  const serverOnly = document.querySelectorAll('.server-only');
-  const nonServer = document.querySelectorAll('.non-server');
-  const equipGroup = document.getElementById('hw-비품유형-group')!;
-
-  if (asset.type === '서버') {
-    serverOnly.forEach(el => (el as HTMLElement).style.display = 'flex');
-    nonServer.forEach(el => (el as HTMLElement).style.display = 'none');
-    equipGroup.style.display = 'none';
-
-    (document.getElementById('hw-용도') as HTMLInputElement).value = asset.용도 || '';
-    (document.getElementById('hw-상세') as HTMLInputElement).value = asset.상세 || '';
-    (document.getElementById('hw-비고') as HTMLInputElement).value = asset.비고 || '';
-    (document.getElementById('hw-IP주소') as HTMLInputElement).value = asset.IP주소 || '';
-    (document.getElementById('hw-IP2') as HTMLInputElement).value = (asset as any).IP2 || '';
-    (document.getElementById('hw-원격접속') as HTMLInputElement).value = asset.원격접속 || '';
-    (document.getElementById('hw-서버ID') as HTMLInputElement).value = (asset as any).서버ID || '';
-    (document.getElementById('hw-서버PW') as HTMLInputElement).value = (asset as any).서버PW || '';
-    (document.getElementById('hw-모니터링') as HTMLInputElement).value = asset.모니터링 || '';
-  } else {
-    serverOnly.forEach(el => (el as HTMLElement).style.display = 'none');
-    nonServer.forEach(el => (el as HTMLElement).style.display = 'flex');
-    
-    (document.getElementById('hw-명칭') as HTMLInputElement).value = asset.명칭 || '';
-    (document.getElementById('hw-구매일') as HTMLInputElement).value = asset.구매일 || '';
-    (document.getElementById('hw-금액') as HTMLInputElement).value = asset.금액 || '';
-    (document.getElementById('hw-HW사양') as HTMLTextAreaElement).value = asset.HW사양 || '';
-    (document.getElementById('hw-IP주소-non-server') as HTMLInputElement).value = asset.IP주소 || '';
-
-    if (asset.type === '전산비품') {
-      equipGroup.style.display = 'flex';
-      (document.getElementById('hw-비품유형') as HTMLSelectElement).value = asset.비품유형 || '노트북';
-    } else {
-      equipGroup.style.display = 'none';
-    }
-  }
-}
-
-export function initHwModal() {
-  // HTML 주입
-  if (!document.getElementById('hw-asset-modal')) {
-    document.body.insertAdjacentHTML('beforeend', HW_MODAL_HTML);
-  }
-
-  const modal = document.getElementById('hw-asset-modal')!;
-  const form = document.getElementById('hw-asset-form') as HTMLFormElement;
-  const closeBtn = document.getElementById('btn-close-hw-modal')!;
-  const cancelBtn = document.getElementById('btn-cancel-hw-modal')!;
-  const saveBtn = document.getElementById('btn-save-hw-asset')!;
-  const revertBtn = document.getElementById('btn-revert-hw-edit')!;
-  const deleteBtn = document.getElementById('btn-delete-hw-asset')!;
-
-  const closeModal = () => {
-    modal.classList.add('hidden');
-    isEditMode = false;
-  };
-
-  const switchToViewMode = () => {
-    isEditMode = false;
-    form.classList.remove('is-edit-mode');
-    form.classList.add('is-view-mode');
-    saveBtn.textContent = '수정';
-    revertBtn.classList.add('hidden');
-    if (currentAsset) fillHwFormData(currentAsset); 
-  };
-
-  closeBtn.addEventListener('click', closeModal);
-  cancelBtn.addEventListener('click', closeModal);
-  modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });
-  revertBtn.addEventListener('click', () => { switchToViewMode(); });
-
-  saveBtn.addEventListener('click', () => {
-    if (!currentAsset) return;
-
-    if (!isEditMode) {
-      isEditMode = true;
-      form.classList.remove('is-view-mode');
-      form.classList.add('is-edit-mode');
-      saveBtn.textContent = '저장';
-      revertBtn.classList.remove('hidden'); 
-      return;
-    }
-    
-    const assetId = (document.getElementById('hw-asset-id') as HTMLInputElement).value;
-    const type = (document.getElementById('hw-asset-type') as HTMLInputElement).value;
-    
-    const updated: HardwareAsset = {
-      ...currentAsset,
-      법인: (document.getElementById('hw-법인') as HTMLInputElement).value,
-      자산코드: (document.getElementById('hw-자산코드') as HTMLInputElement).value,
-      위치: (document.getElementById('hw-위치') as HTMLInputElement).value,
-      모델명: (document.getElementById('hw-모델명') as HTMLInputElement).value,
-      OS: (document.getElementById('hw-OS') as HTMLInputElement).value,
-      CPU: (document.getElementById('hw-CPU') as HTMLInputElement).value,
-      RAM: (document.getElementById('hw-RAM') as HTMLInputElement).value,
-      SSD1: (document.getElementById('hw-SSD1') as HTMLInputElement).value,
-      SSD2: (document.getElementById('hw-SSD2') as HTMLInputElement).value,
-      담당자_정: (document.getElementById('hw-담당자_정') as HTMLInputElement).value,
-      관리자: (document.getElementById('hw-담당자_정') as HTMLInputElement).value,
-      담당자_부: (document.getElementById('hw-담당자_부') as HTMLInputElement).value,
-    };
-
-    if (type === '서버') {
-      updated.용도 = (document.getElementById('hw-용도') as HTMLInputElement).value;
-      updated.상세 = (document.getElementById('hw-상세') as HTMLInputElement).value;
-      updated.비고 = (document.getElementById('hw-비고') as HTMLInputElement).value;
-      updated.IP주소 = (document.getElementById('hw-IP주소') as HTMLInputElement).value;
-      (updated as any).IP2 = (document.getElementById('hw-IP2') as HTMLInputElement).value;
-      updated.원격접속 = (document.getElementById('hw-원격접속') as HTMLInputElement).value;
-      (updated as any).서버ID = (document.getElementById('hw-서버ID') as HTMLInputElement).value;
-      (updated as any).서버PW = (document.getElementById('hw-서버PW') as HTMLInputElement).value;
-      updated.모니터링 = (document.getElementById('hw-모니터링') as HTMLInputElement).value;
-    } else {
-      updated.명칭 = (document.getElementById('hw-명칭') as HTMLInputElement).value;
-      updated.구매일 = (document.getElementById('hw-구매일') as HTMLInputElement).value;
-      updated.금액 = (document.getElementById('hw-금액') as HTMLInputElement).value;
-      updated.HW사양 = (document.getElementById('hw-HW사양') as HTMLTextAreaElement).value;
-      updated.IP주소 = (document.getElementById('hw-IP주소-non-server') as HTMLInputElement).value;
-      
-      if (type === '전산비품') {
-        updated.비품유형 = (document.getElementById('hw-비품유형') as HTMLSelectElement).value;
-      }
-    }
-
-    const idx = state.masterData.hw.findIndex(a => a.id === assetId);
-    if (idx > -1) {
-      state.masterData.hw[idx] = updated;
-      renderTable(document.getElementById('main-content')!);
-      switchToViewMode(); 
-    }
-  });
-
-  deleteBtn.addEventListener('click', () => {
-    if (!currentAsset) return;
-    if (confirm('정말로 이 자산을 삭제하시겠습니까?')) {
-      state.masterData.hw = state.masterData.hw.filter(a => a.id !== currentAsset!.id);
-      renderTable(document.getElementById('main-content')!);
-      closeModal();
-    }
-  });
-}

backup_refactor/src/components/Modal/PCModal.ts

@@ -1,342 +0,0 @@
-import { state } from '../../core/state';
-import { HardwareAsset, HardwareLog } from '../../core/excelHandler';
-import { openModal } from './BaseModal';
-
-const PC_MODAL_HTML = `
-  <div id="pc-asset-modal" class="modal-overlay hidden">
-    <div class="modal-content wide">
-      <div class="modal-header">
-        <h2 id="pc-modal-title">개인PC 상세 정보</h2>
-        <button id="btn-close-pc-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
-      </div>
-      <div class="modal-body">
-        <div class="modal-body-split">
-          <div class="modal-form-area">
-            <form id="pc-asset-form" class="grid-form">
-              <input type="hidden" id="pc-asset-id" />
-              <input type="hidden" id="pc-asset-type" value="개인PC" />
-              <div class="form-group">
-                <label for="pc-법인">법인</label>
-                <select id="pc-법인" required>
-                  <option value="한맥">한맥 (HM)</option><option value="삼안">삼안 (SM)</option><option value="바론">바론 (BR)</option>
-                </select>
-              </div>
-              
-              <div class="form-group">
-                <label for="pc-자산코드">자산코드</label>
-                <input type="text" id="pc-자산코드" placeholder="ex) HM-PC-2018-001" required />
-              </div>
-              
-              <div class="form-group">
-                <label for="pc-사용자">사용자</label>
-                <input type="text" id="pc-사용자" required />
-              </div>
-              
-              <div class="form-group">
-                <label for="pc-위치">위치</label>
-                <input type="text" id="pc-위치" />
-              </div>
-
-              <div class="form-group">
-                <label for="pc-CPU">CPU</label>
-                <input type="text" id="pc-CPU" />
-              </div>
-
-              <div class="form-group">
-                <label for="pc-GPU">GPU</label>
-                <input type="text" id="pc-GPU" />
-              </div>
-
-              <div class="form-group">
-                <label for="pc-RAM">RAM</label>
-                <input type="text" id="pc-RAM" />
-              </div>
-
-              <div class="form-group">
-                <label for="pc-SSD1">SSD1</label>
-                <input type="text" id="pc-SSD1" />
-              </div>
-
-              <div class="form-group">
-                <label for="pc-SSD2">SSD2</label>
-                <input type="text" id="pc-SSD2" />
-              </div>
-
-              <div class="form-group">
-                <label for="pc-HDD1">HDD1</label>
-                <input type="text" id="pc-HDD1" />
-              </div>
-
-              <div class="form-group">
-                <label for="pc-HDD2">HDD2</label>
-                <input type="text" id="pc-HDD2" />
-              </div>
-
-              <div class="form-group">
-                <label for="pc-구매일">구매일</label>
-                <input type="text" id="pc-구매일" placeholder="ex) 2024-01-01" />
-              </div>
-
-              <div class="form-group">
-                <label for="pc-금액">금액</label>
-                <input type="text" id="pc-금액" placeholder="ex) 1,000,000" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\d))/g, ',')" />
-              </div>
-
-              <div class="form-group">
-                <label for="pc-납품업체">납품업체</label>
-                <input type="text" id="pc-납품업체" />
-              </div>
-
-              <div class="form-group full-width">
-                <label>품의서 (파일)</label>
-                <div style="display:flex; align-items:center; gap:0.5rem;">
-                  <input type="file" id="pc-품의서" />
-                  <span id="pc-품의서명" style="font-size:0.75rem; color:var(--text-light)"></span>
-                </div>
-              </div>
-            </form>
-          </div>
-          <div class="modal-history-area">
-            <div class="history-header">
-              <h3><i data-lucide="history" style="width:16px; height:16px;"></i> 수정 이력</h3>
-            </div>
-            <div id="pc-history-list" class="history-timeline">
-              <div class="empty-history">이력이 없습니다.</div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button id="btn-delete-pc-asset" class="btn btn-outline btn-danger">삭제</button>
-        <div class="footer-actions">
-          <button id="btn-revert-pc-edit" class="btn btn-outline hidden">수정 취소</button>
-          <button id="btn-close-pc-footer" class="btn btn-outline">닫기</button>
-          <button id="btn-save-pc-asset" class="btn btn-primary">수정</button>
-        </div>
-      </div>
-    </div>
-  </div>
-`;
-
-export function initPcModal(renderContent: () => void, closeModals: () => void) {
-  if (!document.getElementById('pc-asset-modal')) {
-    document.body.insertAdjacentHTML('beforeend', PC_MODAL_HTML);
-  }
-
-  const pcForm = document.getElementById('pc-asset-form') as HTMLFormElement;
-  const btnRevertEdit = document.getElementById('btn-revert-pc-edit') as HTMLButtonElement;
-  const btnSavePc = document.getElementById('btn-save-pc-asset') as HTMLButtonElement;
-  const btnDeletePc = document.getElementById('btn-delete-pc-asset') as HTMLButtonElement;
-  const btnCloseHeader = document.getElementById('btn-close-pc-modal') as HTMLButtonElement;
-  const btnCloseFooter = document.getElementById('btn-close-pc-footer') as HTMLButtonElement;
-
-  let isEditMode = false;
-  let currentAsset: HardwareAsset | null = null;
-
-  const setEditMode = (edit: boolean) => {
-    isEditMode = edit;
-    if (edit) {
-      pcForm.classList.add('is-edit-mode');
-      pcForm.classList.remove('is-view-mode');
-      btnSavePc.textContent = '저장';
-      btnRevertEdit.classList.remove('hidden');
-      btnCloseFooter.classList.add('hidden');
-    } else {
-      pcForm.classList.add('is-view-mode');
-      pcForm.classList.remove('is-edit-mode');
-      btnSavePc.textContent = '수정';
-      btnRevertEdit.classList.add('hidden');
-      btnCloseFooter.classList.remove('hidden');
-      if (currentAsset) fillFormData(currentAsset);
-    }
-  };
-
-  function fillFormData(asset: HardwareAsset) {
-    (document.getElementById('pc-asset-id') as HTMLInputElement).value = asset.id;
-    (document.getElementById('pc-법인') as HTMLSelectElement).value = asset.법인;
-    (document.getElementById('pc-자산코드') as HTMLInputElement).value = asset.자산코드;
-    (document.getElementById('pc-사용자') as HTMLInputElement).value = asset.사용자 || '';
-    (document.getElementById('pc-위치') as HTMLInputElement).value = asset.위치 || '';
-    (document.getElementById('pc-CPU') as HTMLInputElement).value = asset.CPU || '';
-    (document.getElementById('pc-GPU') as HTMLInputElement).value = asset.GPU || '';
-    (document.getElementById('pc-RAM') as HTMLInputElement).value = asset.RAM || '';
-    (document.getElementById('pc-SSD1') as HTMLInputElement).value = asset.SSD1 || '';
-    (document.getElementById('pc-SSD2') as HTMLInputElement).value = asset.SSD2 || '';
-    (document.getElementById('pc-HDD1') as HTMLInputElement).value = asset.HDD1 || '';
-    (document.getElementById('pc-HDD2') as HTMLInputElement).value = asset.HDD2 || '';
-    (document.getElementById('pc-구매일') as HTMLInputElement).value = asset.구매일 || '';
-    (document.getElementById('pc-금액') as HTMLInputElement).value = asset.금액 || '';
-    (document.getElementById('pc-납품업체') as HTMLInputElement).value = asset.납품업체 || '';
-    (document.getElementById('pc-품의서명') as HTMLElement).innerText = asset.품의서명 ? `첨부: ${asset.품의서명}` : '';
-  }
-
-  btnRevertEdit?.addEventListener('click', () => setEditMode(false));
-  btnCloseHeader?.addEventListener('click', closeModals);
-  btnCloseFooter?.addEventListener('click', closeModals);
-
-  btnSavePc?.addEventListener('click', (e) => {
-    e.preventDefault();
-    if (!isEditMode) {
-      setEditMode(true);
-      return;
-    }
-    
-    if (!pcForm.checkValidity()) { pcForm.reportValidity(); return; }
-    
-    // ... (저장 로직 유지)
-    e.preventDefault();
-    if (!pcForm.checkValidity()) { pcForm.reportValidity(); return; }
-    
-    const id = (document.getElementById('pc-asset-id') as HTMLInputElement).value;
-    const fileInput = document.getElementById('pc-품의서') as HTMLInputElement;
-    const 품의서명 = fileInput.files && fileInput.files.length > 0 ? fileInput.files[0].name : (document.getElementById('pc-품의서명') as HTMLElement).innerText.replace('첨부: ', '');
-
-    const newAsset: HardwareAsset = {
-      id: id || Math.random().toString(36).substring(2, 9),
-      type: '개인PC',
-      법인: (document.getElementById('pc-법인') as HTMLSelectElement).value,
-      자산코드: (document.getElementById('pc-자산코드') as HTMLInputElement).value,
-      명칭: '',
-      위치: (document.getElementById('pc-위치') as HTMLInputElement).value,
-      관리자: '', IP주소: '', MACaddress: '', HW사양: '', OS: '', 납품업체: (document.getElementById('pc-납품업체') as HTMLInputElement).value,
-      사용자: (document.getElementById('pc-사용자') as HTMLInputElement).value,
-      CPU: (document.getElementById('pc-CPU') as HTMLInputElement).value,
-      GPU: (document.getElementById('pc-GPU') as HTMLInputElement).value,
-      RAM: (document.getElementById('pc-RAM') as HTMLInputElement).value,
-      SSD1: (document.getElementById('pc-SSD1') as HTMLInputElement).value,
-      SSD2: (document.getElementById('pc-SSD2') as HTMLInputElement).value,
-      HDD1: (document.getElementById('pc-HDD1') as HTMLInputElement).value,
-      HDD2: (document.getElementById('pc-HDD2') as HTMLInputElement).value,
-      구매일: (document.getElementById('pc-구매일') as HTMLInputElement).value,
-      금액: (document.getElementById('pc-금액') as HTMLInputElement).value,
-      품의서명
-    };
-
-    if (id) {
-      const idx = state.masterData.hw.findIndex(a => a.id === id);
-      if(idx !== -1) {
-        const oldAsset = state.masterData.hw[idx];
-        const changes = getChangeDetails(oldAsset, newAsset);
-        if (changes) {
-          state.masterData.logs.push({
-            id: Math.random().toString(36).substring(2, 9),
-            assetId: id,
-            date: new Date().toLocaleString(),
-            details: changes,
-            user: '관리자'
-          });
-        }
-        state.masterData.hw[idx] = newAsset;
-      }
-    } else {
-      state.masterData.hw.push(newAsset);
-    }
-    
-    closeModals();
-    renderContent();
-  });
-
-  btnDeletePc?.addEventListener('click', (e) => {
-    e.preventDefault();
-    const id = (document.getElementById('pc-asset-id') as HTMLInputElement).value;
-    if (confirm('삭제하시겠습니까?')) {
-      state.masterData.hw = state.masterData.hw.filter(a => a.id !== id);
-      closeModals();
-      renderContent();
-    }
-  });
-}
-
-export function openPcModal(asset?: HardwareAsset) {
-  const pcForm = document.getElementById('pc-asset-form') as HTMLFormElement;
-  const deleteBtn = document.getElementById('btn-delete-pc-asset')!;
-  const historyArea = document.querySelector('.modal-history-area') as HTMLElement;
-  
-  openModal('pc-asset-modal');
-  pcForm.reset();
-  
-  if (asset) {
-    document.getElementById('pc-modal-title')!.textContent = '개인PC 상세 정보 수정';
-    deleteBtn.style.display = 'block';
-    if (historyArea) historyArea.style.display = 'flex';
-    
-    (document.getElementById('pc-asset-id') as HTMLInputElement).value = asset.id;
-    (document.getElementById('pc-법인') as HTMLSelectElement).value = asset.법인;
-    (document.getElementById('pc-자산코드') as HTMLInputElement).value = asset.자산코드;
-    (document.getElementById('pc-사용자') as HTMLInputElement).value = asset.사용자 || '';
-    (document.getElementById('pc-위치') as HTMLInputElement).value = asset.위치 || '';
-    (document.getElementById('pc-CPU') as HTMLInputElement).value = asset.CPU || '';
-    (document.getElementById('pc-GPU') as HTMLInputElement).value = asset.GPU || '';
-    (document.getElementById('pc-RAM') as HTMLInputElement).value = asset.RAM || '';
-    (document.getElementById('pc-SSD1') as HTMLInputElement).value = asset.SSD1 || '';
-    (document.getElementById('pc-SSD2') as HTMLInputElement).value = asset.SSD2 || '';
-    (document.getElementById('pc-HDD1') as HTMLInputElement).value = asset.HDD1 || '';
-    (document.getElementById('pc-HDD2') as HTMLInputElement).value = asset.HDD2 || '';
-    (document.getElementById('pc-구매일') as HTMLInputElement).value = asset.구매일 || '';
-    (document.getElementById('pc-금액') as HTMLInputElement).value = asset.금액 || '';
-    (document.getElementById('pc-납품업체') as HTMLInputElement).value = asset.납품업체 || '';
-    (document.getElementById('pc-품의서명') as HTMLElement).innerText = asset.품의서명 ? `첨부: ${asset.품의서명}` : '';
-    
-    renderHistory(asset.id);
-  } else {
-    document.getElementById('pc-modal-title')!.textContent = '신규 개인PC 자산 추가';
-    deleteBtn.style.display = 'none';
-    if (historyArea) historyArea.style.display = 'none';
-    
-    (document.getElementById('pc-asset-id') as HTMLInputElement).value = '';
-    (document.getElementById('pc-법인') as HTMLSelectElement).value = '한맥';
-    (document.getElementById('pc-품의서명') as HTMLElement).innerText = '';
-  }
-}
-
-function getChangeDetails(oldAsset: HardwareAsset, newAsset: HardwareAsset): string {
-  const changes: string[] = [];
-  const fields = [
-    { key: '법인', label: '법인' },
-    { key: '자산코드', label: '자산코드' },
-    { key: '사용자', label: '사용자' },
-    { key: '위치', label: '위치' },
-    { key: 'CPU', label: 'CPU' },
-    { key: 'GPU', label: 'GPU' },
-    { key: 'RAM', label: 'RAM' },
-    { key: 'SSD1', label: 'SSD1' },
-    { key: 'SSD2', label: 'SSD2' },
-    { key: 'HDD1', label: 'HDD1' },
-    { key: 'HDD2', label: 'HDD2' },
-    { key: '구매일', label: '구매일' },
-    { key: '금액', label: '금액' },
-    { key: '납품업체', label: '납품업체' },
-    { key: '품의서명', label: '품의서' },
-  ];
-
-  fields.forEach(field => {
-    const oldVal = (oldAsset as any)[field.key] || '';
-    const newVal = (newAsset as any)[field.key] || '';
-    if (oldVal !== newVal) {
-      changes.push(`${field.label}: ${oldVal || '없음'} → ${newVal || '없음'}`);
-    }
-  });
-  return changes.join('\n');
-}
-
-function renderHistory(assetId: string) {
-  const historyList = document.getElementById('pc-history-list');
-  if (!historyList) return;
-
-  const logs = state.masterData.logs
-    .filter(l => l.assetId === assetId)
-    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
-
-  if (logs.length === 0) {
-    historyList.innerHTML = '<div class="empty-history">이력이 없습니다.</div>';
-    return;
-  }
-
-  historyList.innerHTML = logs.map(log => `
-    <div class="history-item">
-      <div class="history-date">${log.date}</div>
-      <div class="history-user">수정자: ${log.user}</div>
-      <div class="history-details">${log.details.replace(/\\n/g, '<br>')}</div>
-    </div>
-  `).join('');
-}

backup_refactor/src/components/Modal/SWModal.ts

@@ -1,222 +0,0 @@
-import { state } from '../../core/state';
-import { SoftwareAsset } from '../../core/excelHandler';
-import { openModal } from './BaseModal';
-
-const SW_MODAL_HTML = `
-  <div id="sw-asset-modal" class="modal-overlay hidden">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h2 id="sw-modal-title">S/W 상세 정보</h2>
-        <button id="btn-close-sw-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
-      </div>
-      <div class="modal-body">
-        <form id="sw-asset-form" class="grid-form">
-          <input type="hidden" id="sw-asset-id" />
-          <input type="hidden" id="sw-asset-type" />
-          <div class="form-group">
-            <label for="sw-분야">분야</label>
-            <select id="sw-분야" required>
-              <option value="업무공통">업무공통</option>
-              <option value="개발S/W">개발S/W</option>
-              <option value="디자인">디자인</option>
-              <option value="설계S/W">설계S/W</option>
-            </select>
-          </div>
-          <div class="form-group">
-            <label for="sw-법인">법인</label>
-            <select id="sw-법인" required>
-              <option value="한맥">한맥 (HM)</option>
-              <option value="삼안 (SM)">삼안 (SM)</option>
-              <option value="바론 (BR)">바론 (BR)</option>
-            </select>
-          </div>
-          <div class="form-group">
-            <label for="sw-부서">부서</label>
-            <input type="text" id="sw-부서" placeholder="ex) 경영지원팀" required />
-          </div>
-          <div class="form-group">
-            <label for="sw-제품명">제품명</label>
-            <input type="text" id="sw-제품명" required />
-          </div>
-          <div class="form-group">
-            <label for="sw-구매일">구매일</label>
-            <input type="text" id="sw-구매일" placeholder="ex) 2024-01-01" />
-          </div>
-          <div class="form-group" id="sw-구독일-group">
-            <label for="sw-구독일">구독일(시작~끝)</label>
-            <input type="text" id="sw-구독일" placeholder="ex) 2024-01-01 ~ 2024-12-31" />
-          </div>
-          <div class="form-group" id="sw-유지보수-group" style="display:none;">
-            <label for="sw-유지보수여부">유지보수 여부</label>
-            <label style="display:flex; align-items:center; gap:0.5rem; height: 38px; cursor: pointer;">
-              <input type="checkbox" id="sw-유지보수여부" /> 대상 여부
-            </label>
-          </div>
-          <div class="form-group">
-            <label for="sw-금액">금액</label>
-            <input type="text" id="sw-금액" placeholder="ex) 1,000,000" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\d))/g, ',')" />
-          </div>
-          <div class="form-group">
-            <label for="sw-수량">수량 (보유량)</label>
-            <input type="number" id="sw-수량" min="1" value="1" />
-          </div>
-          <div class="form-group">
-            <label for="sw-계정명">계정명</label>
-            <input type="text" id="sw-계정명" />
-          </div>
-          <div class="form-group">
-            <label for="sw-납품업체">납품업체</label>
-            <input type="text" id="sw-납품업체" />
-          </div>
-          <div class="form-group">
-            <label for="sw-비고">비고</label>
-            <input type="text" id="sw-비고" />
-          </div>
-        </form>
-      </div>
-      <div class="modal-footer">
-        <button id="btn-delete-sw-asset" class="btn btn-outline btn-danger">삭제</button>
-        <div class="footer-actions">
-          <button id="btn-revert-sw-edit" class="btn btn-outline hidden">수정 취소</button>
-          <button id="btn-close-sw-footer" class="btn btn-outline">닫기</button>
-          <button id="btn-save-sw-asset" class="btn btn-primary">수정</button>
-        </div>
-      </div>
-    </div>
-  </div>
-`;
-
-export function initSwModal(renderContent: () => void, closeModals: () => void) {
-  if (!document.getElementById('sw-asset-modal')) {
-    document.body.insertAdjacentHTML('beforeend', SW_MODAL_HTML);
-  }
-
-  const swForm = document.getElementById('sw-asset-form') as HTMLFormElement;
-  const btnRevertEdit = document.getElementById('btn-revert-sw-edit') as HTMLButtonElement;
-  const btnSaveSw = document.getElementById('btn-save-sw-asset') as HTMLButtonElement;
-  const btnDeleteSw = document.getElementById('btn-delete-sw-asset') as HTMLButtonElement;
-  const btnCloseHeader = document.getElementById('btn-close-sw-modal') as HTMLButtonElement;
-  const btnCloseFooter = document.getElementById('btn-close-sw-footer') as HTMLButtonElement;
-
-  let isEditMode = false;
-  let currentAsset: SoftwareAsset | null = null;
-
-  const setEditMode = (edit: boolean) => {
-    isEditMode = edit;
-    if (edit) {
-      swForm.classList.add('is-edit-mode');
-      swForm.classList.remove('is-view-mode');
-      btnSaveSw.textContent = '저장';
-      btnRevertEdit.classList.remove('hidden');
-      btnCloseFooter.classList.add('hidden');
-    } else {
-      swForm.classList.add('is-view-mode');
-      swForm.classList.remove('is-edit-mode');
-      btnSaveSw.textContent = '수정';
-      btnRevertEdit.classList.add('hidden');
-      btnCloseFooter.classList.remove('hidden');
-      if (currentAsset) fillFormData(currentAsset);
-    }
-  };
-
-  function fillFormData(asset: SoftwareAsset) {
-    (document.getElementById('sw-asset-id') as HTMLInputElement).value = asset.id;
-    (document.getElementById('sw-asset-type') as HTMLInputElement).value = asset.type;
-    (document.getElementById('sw-분야') as HTMLSelectElement).value = asset.분야 || '업무공통';
-    (document.getElementById('sw-법인') as HTMLSelectElement).value = asset.법인;
-    (document.getElementById('sw-부서') as HTMLInputElement).value = asset.부서 || '';
-    (document.getElementById('sw-제품명') as HTMLInputElement).value = asset.제품명;
-    (document.getElementById('sw-구매일') as HTMLInputElement).value = asset.구매일 || '';
-    (document.getElementById('sw-구독일') as HTMLInputElement).value = asset.구독일 || '';
-    (document.getElementById('sw-유지보수여부') as HTMLInputElement).checked = !!asset.유지보수여부;
-    (document.getElementById('sw-금액') as HTMLInputElement).value = asset.금액 || '';
-    (document.getElementById('sw-수량') as HTMLInputElement).value = String(asset.수량);
-    (document.getElementById('sw-계정명') as HTMLInputElement).value = asset.계정명 || '';
-    (document.getElementById('sw-납품업체') as HTMLInputElement).value = asset.납품업체 || '';
-    (document.getElementById('sw-비고') as HTMLInputElement).value = asset.비고 || '';
-  }
-
-  btnRevertEdit?.addEventListener('click', () => setEditMode(false));
-  btnCloseHeader?.addEventListener('click', closeModals);
-  btnCloseFooter?.addEventListener('click', closeModals);
-
-  btnSaveSw?.addEventListener('click', (e) => {
-    e.preventDefault();
-    if (!isEditMode) {
-      setEditMode(true);
-      return;
-    }
-    
-    if (!swForm.checkValidity()) { swForm.reportValidity(); return; }
-    
-    const id = (document.getElementById('sw-asset-id') as HTMLInputElement).value;
-    const newAsset: SoftwareAsset = {
-      id: id || Math.random().toString(36).substring(2, 9),
-      type: (document.getElementById('sw-asset-type') as HTMLInputElement).value,
-      분야: (document.getElementById('sw-분야') as HTMLSelectElement).value,
-      법인: (document.getElementById('sw-법인') as HTMLSelectElement).value,
-      부서: (document.getElementById('sw-부서') as HTMLInputElement).value,
-      제품명: (document.getElementById('sw-제품명') as HTMLInputElement).value,
-      구매일: (document.getElementById('sw-구매일') as HTMLInputElement).value,
-      구독일: (document.getElementById('sw-구독일') as HTMLInputElement).value,
-      유지보수여부: (document.getElementById('sw-유지보수여부') as HTMLInputElement).checked,
-      금액: (document.getElementById('sw-금액') as HTMLInputElement).value,
-      수량: parseInt((document.getElementById('sw-수량') as HTMLInputElement).value || '1', 10),
-      계정명: (document.getElementById('sw-계정명') as HTMLInputElement).value,
-      납품업체: (document.getElementById('sw-납품업체') as HTMLInputElement).value,
-      비고: (document.getElementById('sw-비고') as HTMLInputElement).value,
-    };
-
-    if (id) {
-      const idx = state.masterData.sw.findIndex(a => a.id === id);
-      if(idx !== -1) state.masterData.sw[idx] = newAsset;
-    } else {
-      state.masterData.sw.push(newAsset);
-    }
-    
-    closeModals();
-    renderContent();
-  });
-
-  btnDeleteSw?.addEventListener('click', (e) => {
-    e.preventDefault();
-    const id = (document.getElementById('sw-asset-id') as HTMLInputElement).value;
-    if (confirm('삭제하시겠습니까?')) {
-      state.masterData.sw = state.masterData.sw.filter(a => a.id !== id);
-      closeModals();
-      renderContent();
-    }
-  });
-}
-
-export function openSwModal(asset?: SoftwareAsset) {
-  currentAsset = asset || null;
-  const swForm = document.getElementById('sw-asset-form') as HTMLFormElement;
-  const deleteBtn = document.getElementById('btn-delete-sw-asset')!;
-  
-  openModal('sw-asset-modal');
-  swForm.reset();
-
-  const subGroup = document.getElementById('sw-구독일-group')!;
-  const permGroup = document.getElementById('sw-유지보수-group')!;
-  if (state.activeSubTab === '구독SW') {
-    subGroup.style.display = 'flex';
-    permGroup.style.display = 'none';
-  } else {
-    subGroup.style.display = 'none';
-    permGroup.style.display = 'flex';
-  }
-
-  if (asset) {
-    document.getElementById('sw-modal-title')!.textContent = `${state.activeSubTab} 상세 정보 수정`;
-    deleteBtn.style.display = 'block';
-    fillFormData(asset);
-    setEditMode(false);
-  } else {
-    document.getElementById('sw-modal-title')!.textContent = `신규 ${state.activeSubTab} 자산 추가`;
-    deleteBtn.style.display = 'none';
-    (document.getElementById('sw-asset-id') as HTMLInputElement).value = '';
-    (document.getElementById('sw-asset-type') as HTMLInputElement).value = state.activeSubTab;
-    setEditMode(true);
-  }
-}

backup_refactor/src/components/Modal/SWUserModal.ts

@@ -1,241 +0,0 @@
-import { state } from '../../core/state';
-import { SoftwareAsset, SWUser } from '../../core/excelHandler';
-import { openModal } from './BaseModal';
-import { createIcons, Edit2, X, Paperclip } from 'lucide';
-
-let currentSwUserAssetId: string = '';
-let tempSwUsers: SWUser[] = [];
-
-const SW_USER_MODAL_HTML = `
-  <!-- S/W 할당 사용자 목록 모달 -->
-  <div id="sw-user-modal" class="modal-overlay hidden">
-    <div class="modal-content" style="max-width: 800px;">
-      <div class="modal-header">
-        <h2 id="sw-user-modal-title">S/W 할당 사용자 목록</h2>
-        <button id="btn-close-sw-user-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
-      </div>
-      <div class="modal-body">
-        <input type="hidden" id="sw-user-asset-id" />
-        <div style="text-align: right; margin-bottom: 0.75rem;">
-          <button type="button" id="btn-open-add-user" class="btn btn-primary btn-sm"><i data-lucide="plus"></i> 사용자 추가</button>
-        </div>
-        <div class="table-container">
-          <table style="width:100%;">
-            <thead>
-              <tr>
-                <th>법인</th>
-                <th>부서/팀</th>
-                <th>직위</th>
-                <th>이름</th>
-                <th>사용기간</th>
-                <th>증빙</th>
-                <th style="text-align:center;">관리</th>
-              </tr>
-            </thead>
-            <tbody id="user-list-body"></tbody>
-          </table>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <div></div>
-        <div class="footer-actions">
-          <button id="btn-save-sw-user-mapping" class="btn btn-primary">변경사항 저장</button>
-          <button id="btn-cancel-sw-user-modal" class="btn btn-outline">닫기</button>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- 사용자 추가/수정 서브 모달 -->
-  <div id="sw-user-edit-modal" class="modal-overlay hidden" style="z-index: 1100;">
-    <div class="modal-content" style="max-width: 500px;">
-      <div class="modal-header">
-        <h2 id="sw-user-edit-modal-title">사용자 정보</h2>
-        <button id="btn-close-sw-user-edit" class="btn-icon"><i data-lucide="x"></i></button>
-      </div>
-      <div class="modal-body">
-        <input type="hidden" id="edit-user-idx" />
-        <div class="grid-form" style="grid-template-columns: 1fr;">
-          <div class="form-group">
-            <label>법인</label>
-            <select id="new-user-법인">
-              <option value="한맥">한맥</option><option value="삼안">삼안</option><option value="바론">바론</option>
-            </select>
-          </div>
-          <div class="form-group">
-            <label>부서</label>
-            <input type="text" id="new-user-부서" />
-          </div>
-          <div class="form-group">
-            <label>팀</label>
-            <input type="text" id="new-user-팀" />
-          </div>
-          <div class="form-group">
-            <label>직위</label>
-            <input type="text" id="new-user-직위" />
-          </div>
-          <div class="form-group">
-            <label>이름</label>
-            <input type="text" id="new-user-이름" required />
-          </div>
-          <div class="form-group">
-            <label>사용기간</label>
-            <input type="text" id="new-user-사용기간" placeholder="ex) 2024.01 ~ 2024.12" />
-          </div>
-          <div class="form-group">
-            <label>신청서 (증빙파일)</label>
-            <input type="file" id="new-user-신청서" />
-            <span id="new-user-신청서명" style="font-size:0.75rem; color:var(--text-muted);"></span>
-          </div>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button id="btn-cancel-sw-user-edit" class="btn btn-outline">취소</button>
-        <button id="btn-save-edit-user" class="btn btn-primary">확인</button>
-      </div>
-    </div>
-  </div>
-`;
-
-export function initSwUserModal(renderContent: () => void, closeModals: () => void) {
-  if (!document.getElementById('sw-user-modal')) {
-    document.body.insertAdjacentHTML('beforeend', SW_USER_MODAL_HTML);
-  }
-
-  const btnOpenAddUser = document.getElementById('btn-open-add-user');
-  const btnSaveEditUser = document.getElementById('btn-save-edit-user');
-  const btnSaveSwUserMapping = document.getElementById('btn-save-sw-user-mapping');
-  const btnCancelUserEdit = document.getElementById('btn-cancel-sw-user-edit');
-  const btnCloseUserEdit = document.getElementById('btn-close-sw-user-edit');
-  const btnCancelUserModal = document.getElementById('btn-cancel-sw-user-modal');
-  const btnCloseUserModal = document.getElementById('btn-close-sw-user-modal');
-
-  btnOpenAddUser?.addEventListener('click', () => openUserEditModal(-1));
-  btnSaveEditUser?.addEventListener('click', () => saveUserEdit());
-  
-  btnSaveSwUserMapping?.addEventListener('click', () => {
-    state.masterData.swUsers = state.masterData.swUsers.filter(u => u.swId !== currentSwUserAssetId);
-    state.masterData.swUsers.push(...tempSwUsers);
-    document.getElementById('sw-user-modal')?.classList.add('hidden');
-    renderContent();
-  });
-
-  btnCancelUserEdit?.addEventListener('click', () => document.getElementById('sw-user-edit-modal')?.classList.add('hidden'));
-  btnCloseUserEdit?.addEventListener('click', () => document.getElementById('sw-user-edit-modal')?.classList.add('hidden'));
-  btnCancelUserModal?.addEventListener('click', () => document.getElementById('sw-user-modal')?.classList.add('hidden'));
-  btnCloseUserModal?.addEventListener('click', () => document.getElementById('sw-user-modal')?.classList.add('hidden'));
-}
-
-function renderUserList() {
-  const tbody = document.getElementById('user-list-body')!;
-  tbody.innerHTML = '';
-  if (tempSwUsers.length === 0) {
-    tbody.innerHTML = '<tr><td colspan="7" style="padding: 2rem; text-align: center; color: var(--text-muted);">할당된 사용자가 없습니다.</td></tr>';
-    return;
-  }
-  
-  tempSwUsers.forEach((user, idx) => {
-    const tr = document.createElement('tr');
-    const deptTeam = [user.부서, user.팀].filter(Boolean).join(' / ') || '-';
-    const attachIcon = user.신청서명 ? `<i data-lucide="paperclip" class="text-primary" style="width:16px; height:16px;" title="${user.신청서명}"></i>` : '-';
-    
-    tr.innerHTML = `
-      <td>${user.법인}</td>
-      <td>${deptTeam}</td>
-      <td>${user.직위 || '-'}</td>
-      <td><strong>${user.이름}</strong></td>
-      <td style="text-align:center;">${user.사용기간 || '-'}</td>
-      <td style="text-align:center;">${attachIcon}</td>
-      <td style="text-align:center;">
-        <button type="button" class="btn-icon btn-edit-user" data-idx="${idx}" style="color: var(--primary-color);"><i data-lucide="edit-2" style="width:14px; height:14px;"></i></button>
-        <button type="button" class="btn-icon btn-remove-user" data-idx="${idx}" style="color: var(--danger);"><i data-lucide="x" style="width:14px; height:14px;"></i></button>
-      </td>
-    `;
-    tbody.appendChild(tr);
-  });
-  
-  createIcons({ icons: { Edit2, X, Paperclip } });
-  
-  tbody.querySelectorAll('.btn-edit-user').forEach(btn => {
-    btn.addEventListener('click', (e) => {
-      const idx = parseInt((e.currentTarget as HTMLElement).getAttribute('data-idx')!);
-      openUserEditModal(idx);
-    });
-  });
-  
-  tbody.querySelectorAll('.btn-remove-user').forEach(btn => {
-    btn.addEventListener('click', (e) => {
-      const idx = parseInt((e.currentTarget as HTMLButtonElement).getAttribute('data-idx')!);
-      tempSwUsers.splice(idx, 1);
-      renderUserList();
-    });
-  });
-}
-
-export function openSwUserModal(asset: SoftwareAsset) {
-  openModal('sw-user-modal');
-  currentSwUserAssetId = asset.id;
-  tempSwUsers = state.masterData.swUsers.filter(u => u.swId === asset.id).map(u => ({...u}));
-  renderUserList();
-}
-
-function openUserEditModal(idx: number) {
-  const editModal = document.getElementById('sw-user-edit-modal')!;
-  editModal.classList.remove('hidden');
-  (document.getElementById('edit-user-idx') as HTMLInputElement).value = String(idx);
-  
-  if (idx === -1) {
-    document.getElementById('sw-user-edit-modal-title')!.innerText = '새 사용자 추가';
-    (document.getElementById('new-user-법인') as HTMLSelectElement).value = '한맥';
-    (document.getElementById('new-user-부서') as HTMLInputElement).value = '';
-    (document.getElementById('new-user-팀') as HTMLInputElement).value = '';
-    (document.getElementById('new-user-직위') as HTMLInputElement).value = '';
-    (document.getElementById('new-user-이름') as HTMLInputElement).value = '';
-    (document.getElementById('new-user-사용기간') as HTMLInputElement).value = '';
-    (document.getElementById('new-user-신청서') as HTMLInputElement).value = '';
-    document.getElementById('new-user-신청서명')!.innerText = '';
-  } else {
-    document.getElementById('sw-user-edit-modal-title')!.innerText = '사용자 정보 수정';
-    const u = tempSwUsers[idx];
-    (document.getElementById('new-user-법인') as HTMLSelectElement).value = u.법인;
-    (document.getElementById('new-user-부서') as HTMLInputElement).value = u.부서;
-    (document.getElementById('new-user-팀') as HTMLInputElement).value = u.팀;
-    (document.getElementById('new-user-직위') as HTMLInputElement).value = u.직위;
-    (document.getElementById('new-user-이름') as HTMLInputElement).value = u.이름;
-    (document.getElementById('new-user-사용기간') as HTMLInputElement).value = u.사용기간;
-    (document.getElementById('new-user-신청서') as HTMLInputElement).value = '';
-    document.getElementById('new-user-신청서명')!.innerText = u.신청서명 ? `첨부: ${u.신청서명}` : '';
-  }
-}
-
-function saveUserEdit() {
-  const idx = parseInt((document.getElementById('edit-user-idx') as HTMLInputElement).value);
-  const 이름 = (document.getElementById('new-user-이름') as HTMLInputElement).value.trim();
-  if (!이름) { alert('이름을 입력해주세요.'); return; }
-
-  const fileInput = document.getElementById('new-user-신청서') as HTMLInputElement;
-  let 신청서명 = '';
-  if (fileInput.files && fileInput.files.length > 0) {
-    신청서명 = fileInput.files[0].name;
-  } else if (idx !== -1) {
-    신청서명 = tempSwUsers[idx].신청서명;
-  }
-
-  const userData: SWUser = {
-    id: idx === -1 ? Math.random().toString(36).substring(2, 9) : tempSwUsers[idx].id,
-    swId: currentSwUserAssetId,
-    법인: (document.getElementById('new-user-법인') as HTMLSelectElement).value,
-    부서: (document.getElementById('new-user-부서') as HTMLInputElement).value,
-    팀: (document.getElementById('new-user-팀') as HTMLInputElement).value,
-    직위: (document.getElementById('new-user-직위') as HTMLInputElement).value,
-    이름,
-    사용기간: (document.getElementById('new-user-사용기간') as HTMLInputElement).value,
-    신청서명
-  };
-  
-  if (idx === -1) tempSwUsers.push(userData);
-  else tempSwUsers[idx] = userData;
-  
-  document.getElementById('sw-user-edit-modal')?.classList.add('hidden');
-  renderUserList();
-}

backup_refactor/src/components/Modal/StorageModal.ts

@@ -1,161 +0,0 @@
-import { state } from '../../core/state';
-import { HardwareAsset } from '../../core/excelHandler';
-import { openModal } from './BaseModal';
-
-const STORAGE_MODAL_HTML = `
-  <div id="storage-asset-modal" class="modal-overlay hidden">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h2 id="storage-modal-title">스토리지 상세 정보</h2>
-        <button id="btn-close-storage-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
-      </div>
-      <div class="modal-body">
-        <form id="storage-asset-form" class="grid-form">
-          <input type="hidden" id="storage-asset-id" />
-          <input type="hidden" id="storage-asset-type" value="스토리지" />
-          <div class="form-group"><label for="storage-법인">법인</label><input type="text" id="storage-법인" required /></div>
-          <div class="form-group"><label for="storage-유형">유형</label><input type="text" id="storage-유형" required /></div>
-          <div class="form-group"><label for="storage-자산코드">자산코드</label><input type="text" id="storage-자산코드" required /></div>
-          <div class="form-group"><label for="storage-명칭">명칭</label><input type="text" id="storage-명칭" required /></div>
-          <div class="form-group"><label for="storage-위치">위치</label><input type="text" id="storage-위치" /></div>
-          <div class="form-group"><label for="storage-모델명">모델명</label><input type="text" id="storage-모델명" /></div>
-          <div class="form-group"><label for="storage-용량">용량</label><input type="text" id="storage-용량" /></div>
-          <div class="form-group"><label for="storage-담당자_정">담당자(정)</label><input type="text" id="storage-담당자_정" /></div>
-          <div class="form-group"><label for="storage-IP주소">IP주소</label><input type="text" id="storage-IP주소" /></div>
-          <div class="form-group"><label for="storage-구매일">구매일</label><input type="text" id="storage-구매일" /></div>
-          <div class="form-group"><label for="storage-금액">금액</label><input type="text" id="storage-금액" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\d))/g, ',')" /></div>
-        </form>
-      </div>
-      <div class="modal-footer">
-        <button id="btn-delete-storage-asset" class="btn btn-outline btn-danger">삭제</button>
-        <div class="footer-actions">
-          <button id="btn-revert-storage-edit" class="btn btn-outline hidden">수정 취소</button>
-          <button id="btn-close-storage-footer" class="btn btn-outline">닫기</button>
-          <button id="btn-save-storage-asset" class="btn btn-primary">수정</button>
-        </div>
-      </div>
-    </div>
-  </div>
-`;
-
-export function initStorageModal(renderContent: () => void, closeModals: () => void) {
-  if (!document.getElementById('storage-asset-modal')) {
-    document.body.insertAdjacentHTML('beforeend', STORAGE_MODAL_HTML);
-  }
-
-  const storageForm = document.getElementById('storage-asset-form') as HTMLFormElement;
-  const btnRevertEdit = document.getElementById('btn-revert-storage-edit') as HTMLButtonElement;
-  const btnSaveStorage = document.getElementById('btn-save-storage-asset') as HTMLButtonElement;
-  const btnDeleteStorage = document.getElementById('btn-delete-storage-asset') as HTMLButtonElement;
-  const btnCloseHeader = document.getElementById('btn-close-storage-modal') as HTMLButtonElement;
-  const btnCloseFooter = document.getElementById('btn-close-storage-footer') as HTMLButtonElement;
-
-  let isEditMode = false;
-  let currentAsset: HardwareAsset | null = null;
-
-  const setEditMode = (edit: boolean) => {
-    isEditMode = edit;
-    if (edit) {
-      storageForm.classList.add('is-edit-mode');
-      storageForm.classList.remove('is-view-mode');
-      btnSaveStorage.textContent = '저장';
-      btnRevertEdit.classList.remove('hidden');
-      btnCloseFooter.classList.add('hidden');
-    } else {
-      storageForm.classList.add('is-view-mode');
-      storageForm.classList.remove('is-edit-mode');
-      btnSaveStorage.textContent = '수정';
-      btnRevertEdit.classList.add('hidden');
-      btnCloseFooter.classList.remove('hidden');
-      if (currentAsset) fillFormData(currentAsset);
-    }
-  };
-
-  function fillFormData(asset: HardwareAsset) {
-    (document.getElementById('storage-asset-id') as HTMLInputElement).value = asset.id;
-    (document.getElementById('storage-법인') as HTMLInputElement).value = asset.법인;
-    (document.getElementById('storage-유형') as HTMLInputElement).value = asset.storage유형 || 'NAS';
-    (document.getElementById('storage-자산코드') as HTMLInputElement).value = asset.자산코드;
-    (document.getElementById('storage-명칭') as HTMLInputElement).value = asset.명칭;
-    (document.getElementById('storage-위치') as HTMLInputElement).value = asset.위치 || '';
-    (document.getElementById('storage-모델명') as HTMLInputElement).value = asset.모델명 || '';
-    (document.getElementById('storage-용량') as HTMLInputElement).value = asset.용량 || '';
-    (document.getElementById('storage-담당자_정') as HTMLInputElement).value = asset.담당자_정 || '';
-    (document.getElementById('storage-IP주소') as HTMLInputElement).value = asset.IP주소 || '';
-    (document.getElementById('storage-구매일') as HTMLInputElement).value = asset.구매일 || '';
-    (document.getElementById('storage-금액') as HTMLInputElement).value = asset.금액 || '';
-  }
-
-  btnRevertEdit?.addEventListener('click', () => setEditMode(false));
-  btnCloseHeader?.addEventListener('click', closeModals);
-  btnCloseFooter?.addEventListener('click', closeModals);
-
-  btnSaveStorage?.addEventListener('click', (e) => {
-    e.preventDefault();
-    if (!isEditMode) {
-      setEditMode(true);
-      return;
-    }
-    
-    if (!storageForm.checkValidity()) { storageForm.reportValidity(); return; }
-    
-    const id = (document.getElementById('storage-asset-id') as HTMLInputElement).value;
-    const newAsset: HardwareAsset = {
-      id: id || Math.random().toString(36).substring(2, 9),
-      type: '스토리지',
-      법인: (document.getElementById('storage-법인') as HTMLInputElement).value,
-      storage유형: (document.getElementById('storage-유형') as HTMLInputElement).value,
-      자산코드: (document.getElementById('storage-자산코드') as HTMLInputElement).value,
-      명칭: (document.getElementById('storage-명칭') as HTMLInputElement).value,
-      위치: (document.getElementById('storage-위치') as HTMLInputElement).value,
-      모델명: (document.getElementById('storage-모델명') as HTMLInputElement).value,
-      용량: (document.getElementById('storage-용량') as HTMLInputElement).value,
-      담당자_정: (document.getElementById('storage-담당자_정') as HTMLInputElement).value,
-      IP주소: (document.getElementById('storage-IP주소') as HTMLInputElement).value,
-      구매일: (document.getElementById('storage-구매일') as HTMLInputElement).value,
-      금액: (document.getElementById('storage-금액') as HTMLInputElement).value,
-      관리자: '', MACaddress: '', HW사양: '', OS: '', 납품업체: '', 품의서명: ''
-    };
-
-    if (id) {
-      const idx = state.masterData.hw.findIndex(a => a.id === id);
-      if(idx !== -1) state.masterData.hw[idx] = newAsset;
-    } else {
-      state.masterData.hw.push(newAsset);
-    }
-    
-    closeModals();
-    renderContent();
-  });
-
-  btnDeleteStorage?.addEventListener('click', (e) => {
-    e.preventDefault();
-    const id = (document.getElementById('storage-asset-id') as HTMLInputElement).value;
-    if (confirm('삭제하시겠습니까?')) {
-      state.masterData.hw = state.masterData.hw.filter(a => a.id !== id);
-      closeModals();
-      renderContent();
-    }
-  });
-}
-
-export function openStorageModal(asset?: HardwareAsset) {
-  currentAsset = asset || null;
-  const storageForm = document.getElementById('storage-asset-form') as HTMLFormElement;
-  const deleteBtn = document.getElementById('btn-delete-storage-asset')!;
-  
-  openModal('storage-asset-modal');
-  storageForm.reset();
-  
-  if (asset) {
-    document.getElementById('storage-modal-title')!.textContent = '스토리지 상세 정보 수정';
-    deleteBtn.style.display = 'block';
-    fillFormData(asset);
-    setEditMode(false);
-  } else {
-    document.getElementById('storage-modal-title')!.textContent = '신규 스토리지 자산 추가';
-    deleteBtn.style.display = 'none';
-    (document.getElementById('storage-asset-id') as HTMLInputElement).value = '';
-    setEditMode(true);
-  }
-}

backup_refactor/src/components/Navigation.ts

@@ -1,80 +0,0 @@
-import { state } from '../core/state';
-
-const MENU_CONFIG = {
-  hw: {
-    label: '하드웨어',
-    tabs: ['대시보드', '개인PC', '서버', '스토리지', '전산비품']
-  },
-  sw: {
-    label: '소프트웨어',
-    tabs: ['대시보드', '구독SW', '영구SW']
-  },
-  ops: {
-    label: '운영 서비스',
-    tabs: ['대시보드', '서비스현황', '백업관리', '보안점검']
-  }
-};
-
-export function renderNavigation(onTabChange: (tab: string) => void) {
-  const navContainer = document.getElementById('main-nav')!;
-  const btnAddAsset = document.getElementById('btn-add-asset') as HTMLButtonElement;
-
-  const render = () => {
-    navContainer.innerHTML = '';
-    
-    (Object.keys(MENU_CONFIG) as Array<keyof typeof MENU_CONFIG>).forEach(catKey => {
-      const config = MENU_CONFIG[catKey];
-      const isActive = state.activeCategory === catKey;
-
-      const group = document.createElement('div');
-      group.className = `nav-group ${isActive ? 'active is-showing-shelf' : ''}`;
-      
-      // 메인 카테고리 트리거
-      const trigger = document.createElement('div');
-      trigger.className = 'gnb-trigger';
-      trigger.textContent = config.label;
-      
-      trigger.addEventListener('click', () => {
-        if (state.activeCategory !== catKey) {
-          state.activeCategory = catKey;
-          state.activeSubTab = '대시보드';
-          if (btnAddAsset) btnAddAsset.classList.add('hidden');
-          render();
-          onTabChange('대시보드');
-        }
-      });
-      group.appendChild(trigger);
-
-      // 하위 탭 선반 (Shelf)
-      const shelf = document.createElement('div');
-      shelf.className = 'lnb-shelf';
-      
-      config.tabs.forEach(tab => {
-        const item = document.createElement('div');
-        item.className = `lnb-item ${isActive && state.activeSubTab === tab ? 'active' : ''}`;
-        item.textContent = tab;
-        
-        item.addEventListener('click', (e) => {
-          e.stopPropagation();
-          state.activeCategory = catKey;
-          state.activeSubTab = tab;
-          
-          if (btnAddAsset) {
-            if (tab === '대시보드') btnAddAsset.classList.add('hidden');
-            else btnAddAsset.classList.remove('hidden');
-          }
-          
-          render();
-          onTabChange(tab);
-        });
-        shelf.appendChild(item);
-      });
-      group.appendChild(shelf);
-
-      // 마우스 오버 시 다른 그룹의 선반은 가리고 내 것만 보여주는 스타일은 CSS에서 처리함
-      navContainer.appendChild(group);
-    });
-  };
-
-  render();
-}

backup_refactor/src/core/dummyDataGenerator.ts

@@ -1,232 +0,0 @@
-import { MasterAssetData, HardwareAsset, SoftwareAsset, SWUser } from './excelHandler';
-
-const corps = ['한맥', '삼안', '바론'];
-const users = ['홍길동', '김철수', '이영희', '박지훈', '김팀장', '신유진', '윤대웅', '마리아'];
-const depts = ['설계팀', '기술팀', '경영지원팀', '영업팀'];
-
-function rand(arr: any[]) {
-  return arr[Math.floor(Math.random() * arr.length)];
-}
-
-function randDate(startYear: number, endYear: number) {
-  const y = Math.floor(Math.random() * (endYear - startYear + 1)) + startYear;
-  const m = String(Math.floor(Math.random() * 12) + 1).padStart(2, '0');
-  const d = String(Math.floor(Math.random() * 28) + 1).padStart(2, '0');
-  return `${y}-${m}-${d}`;
-}
-
-function randUser() { // 25% 확률로 유휴자산 할당
-  return Math.random() < 0.25 ? '' : rand(users);
-}
-
-export function generateDummyData(): MasterAssetData {
-  const hw: HardwareAsset[] = [];
-  const sw: SoftwareAsset[] = [];
-  const swUsers: SWUser[] = [];
-  
-  // 1. 개인PC 50개
-  for (let i = 1; i <= 50; i++) {
-    const purchaseYear = Math.floor(Math.random() * 10) + 2017; // 2017~2026
-    hw.push({
-      id: Math.random().toString(36).substring(2, 9),
-      type: '개인PC',
-      법인: rand(corps),
-      자산코드: `HM-PC-${purchaseYear}-${String(i).padStart(3, '0')}`,
-      명칭: '',
-      위치: `${rand(['본사', '지사'])} ${Math.floor(Math.random()*5)+1}층`,
-      사용자: randUser(),
-      CPU: rand(['i5-10400', 'i7-12700', 'Ryzen 5', 'Ryzen 7']),
-      GPU: rand(['-', 'GTX 1660', 'RTX 3060', 'RTX 4070']),
-      RAM: rand(['16GB', '32GB']),
-      SSD1: rand(['256GB', '512GB', '1TB']),
-      SSD2: '',
-      HDD1: rand(['-', '1TB', '2TB']),
-      HDD2: '',
-      구매일: randDate(purchaseYear, purchaseYear),
-      금액: String(Math.floor(Math.random()*100 + 50) * 10000).replace(/\B(?=(\d{3})+(?!\d))/g, ','),
-      납품업체: rand(['다나와', '컴퓨존', '오피스디포']),
-      품의서명: '',
-      관리자: '', IP주소: '', MACaddress: '', OS: '', HW사양: ''
-    });
-  }
-
-  // 2. 서버 20개
-  for (let i = 1; i <= 20; i++) {
-    const purchaseYear = Math.floor(Math.random() * 10) + 2017; // 2017~2026
-    hw.push({
-      id: Math.random().toString(36).substring(2, 9),
-      type: '서버',
-      법인: rand(corps),
-      자산코드: `HM-SV-${purchaseYear}-${String(i).padStart(3, '0')}`,
-      명칭: `웹/DB 서버 #${i}`,
-      용도: rand(['웹 서버', 'DB 서버', '백업 서버', '개발 서버']),
-      storage유형: rand(['물리', 'VM']),
-      위치: rand(['IDC 1센터', 'IDC 2센터', '본사 전산실']),
-      관리자: rand(users),
-      담당자_정: rand(users),
-      담당자_부: rand(users),
-      IP주소: `192.168.10.${i}`,
-      원격접속: `ssh://192.168.10.${i}:22`,
-      MACaddress: '00:11:22:33:44:' + String(i).padStart(2, '0'),
-      OS: rand(['Windows Server 2019', 'Ubuntu 22.04 LTS', 'CentOS 7']),
-      모델명: rand(['Dell PowerEdge R740', 'HP ProLiant DL380', 'Lenovo ThinkSystem']),
-      CPU: rand(['Xeon Silver 4210', 'Xeon Gold 6248', 'EPYC 7702']),
-      RAM: rand(['64GB', '128GB', '256GB']),
-      GPU: rand(['-', 'RTX A4000', 'Tesla V100']),
-      SSD1: rand(['512GB SSD', '1TB NVMe']),
-      SSD2: rand(['-', '1TB SSD', '2TB SSD']),
-      HDD1: rand(['-', '4TB HDD', '8TB HDD']),
-      모니터링: rand(['Zabbix', 'Grafana', 'PRTG']),
-      비고: i % 5 === 0 ? '정기 점검 대상' : '-',
-      HW사양: 'Xeon 16Core, 64GB RAM',
-      구매일: randDate(purchaseYear, purchaseYear),
-      금액: '5,000,000',
-      납품업체: '서버뱅크',
-      품의서명: ''
-    });
-  }
-
-  // 3. 스토리지 20개
-  for (let i = 1; i <= 20; i++) {
-    const purchaseYear = Math.floor(Math.random() * 10) + 2017; // 2017~2026
-    hw.push({
-      id: Math.random().toString(36).substring(2, 9),
-      type: '스토리지',
-      법인: rand(corps),
-      storage유형: rand(['NAS', 'DAS']),
-      자산코드: `HM-ST-${purchaseYear}-${String(i).padStart(3, '0')}`,
-      명칭: `백업 스토리지 #${i}`,
-      위치: '전산실',
-      모델명: rand(['Synology DS920+', 'QNAP TS-453D']),
-      용량: rand(['16TB', '32TB', '64TB']),
-      담당자_정: randUser(),
-      담당자_부: rand(users),
-      IP주소: `192.168.20.${i}`,
-      MACaddress: '',
-      구매일: randDate(purchaseYear, purchaseYear),
-      금액: '1,500,000',
-      납품업체: '스토리지넷',
-      품의서명: '',
-      관리자: '', OS: '', HW사양: ''
-    });
-  }
-
-  // 4. 전산비품 (노트북, 태블릿, 휴대폰 각각 5개씩)
-  const equips = [
-    { type: '노트북', code: 'NB', name: 'LG 그램 16인치', price: '1,800,000' },
-    { type: '태블릿', code: 'TB', name: '아이패드 프로 12.9', price: '1,500,000' },
-    { type: '휴대폰', code: 'PH', name: '갤럭시 S24', price: '1,200,000' }
-  ];
-  equips.forEach((eq) => {
-    for (let i = 1; i <= 5; i++) {
-      const purchaseYear = Math.floor(Math.random() * 8) + 2019; // 2019~2026
-      hw.push({
-        id: Math.random().toString(36).substring(2, 9),
-        type: '전산비품',
-        법인: rand(corps),
-        비품유형: eq.type,
-        자산코드: `HM-${eq.code}-${purchaseYear}-${String(i).padStart(3, '0')}`,
-        명칭: eq.name,
-        위치: rand(['본사', '지사']),
-        관리자: randUser(),
-        구매일: randDate(purchaseYear, purchaseYear),
-        금액: eq.price,
-        납품업체: '브랜드 총판',
-        품의서명: '',
-        IP주소: '', MACaddress: '', OS: '', HW사양: ''
-      });
-    }
-  });
-
-  // 5. 구독형 S/W 40개
-  for (let i = 1; i <= 40; i++) {
-    const swId = Math.random().toString(36).substring(2, 9);
-    const purchaseYear = Math.random() < 0.3 ? 2026 : 2024;
-    
-    let isExpiring = Math.random() < 0.25;
-    let endDt = new Date();
-    if (isExpiring) {
-      endDt.setDate(endDt.getDate() + Math.floor(Math.random() * 25) + 1); // 1~25일 뒤 만료
-    } else {
-      endDt.setMonth(endDt.getMonth() + Math.floor(Math.random() * 11) + 2); // 넉넉히 남음
-    }
-    const endStr = `${endDt.getFullYear()}.${String(endDt.getMonth()+1).padStart(2,'0')}.${String(endDt.getDate()).padStart(2,'0')}`;
-    
-    sw.push({
-      id: swId,
-      type: '구독SW',
-      분야: rand(['업무공통', '개발S/W', '디자인', '설계S/W']),
-      법인: rand(corps),
-      부서: rand(depts),
-      제품명: rand(['Adobe CC All Apps', 'Microsoft 365', 'Slack Pro', 'Notion Team']),
-      구매일: `${purchaseYear}-01-01`,
-      구독일: `${purchaseYear}.01.01 ~ ${endStr}`,
-      금액: String(Math.floor(Math.random() * 100 + 10) * 10000).replace(/\B(?=(\d{3})+(?!\d))/g, ','),
-      수량: Math.floor(Math.random() * 5) + 3, // 3~7
-      계정명: `user${i}@hm.com`,
-      납품업체: '총판',
-      비고: '연간구독'
-    });
-    
-    const assignCount = Math.floor(Math.random() * 2) + 1;
-    for (let j=0; j<assignCount; j++) {
-      swUsers.push({
-        id: Math.random().toString(36).substring(2, 9),
-        swId: swId,
-        법인: rand(corps),
-        부서: rand(depts),
-        팀: rand(['1팀', '2팀', '기획팀']),
-        직위: rand(['사원', '대리', '과장']),
-        이름: rand(users),
-        사용기간: '2024.01~12',
-        신청서명: ''
-      });
-    }
-  }
-
-  // 6. 영구형 S/W 40개
-  for (let i = 1; i <= 40; i++) {
-    const swId = Math.random().toString(36).substring(2, 9);
-
-    let isExpiring = Math.random() < 0.25;
-    let endDt = new Date();
-    if (isExpiring) {
-      endDt.setDate(endDt.getDate() + Math.floor(Math.random() * 25) + 1); // 1~25일 뒤 만료
-    } else {
-      endDt.setMonth(endDt.getMonth() + Math.floor(Math.random() * 11) + 2); // 넉넉히 남음
-    }
-    const endStr = `${endDt.getFullYear()}.${String(endDt.getMonth()+1).padStart(2,'0')}.${String(endDt.getDate()).padStart(2,'0')}`;
-
-    sw.push({
-      id: swId,
-      type: '영구SW',
-      분야: rand(['업무공통', '개발S/W', '디자인', '설계S/W']),
-      법인: rand(corps),
-      부서: rand(depts),
-      제품명: rand(['AutoCAD 2024', 'Windows 10 Pro', '한컴오피스 2022', 'Visual Studio 2022']),
-      구매일: '2020-05-15',
-      유지보수여부: true,
-      비고: `유지보수: ~ ${endStr}`,
-      금액: '1,500,000',
-      수량: Math.floor(Math.random() * 3) + 2, // 2~4
-      계정명: `sn-2020-${i}`,
-      납품업체: '오토데스크 / MS'
-    });
-    const assignCount = Math.floor(Math.random() * 2) + 1;
-    for (let j=0; j<assignCount; j++) {
-      swUsers.push({
-        id: Math.random().toString(36).substring(2, 9),
-        swId: swId,
-        법인: rand(corps),
-        부서: rand(depts),
-        팀: rand(['1팀', '2팀']),
-        직위: rand(['과장', '차장', '부장']),
-        이름: rand(users),
-        사용기간: '영구',
-        신청서명: ''
-      });
-    }
-  }
-
-  return { hw, sw, swUsers, logs: [] };
-}

backup_refactor/src/core/excelHandler.ts

@@ -1,344 +0,0 @@
-import * as XLSX from 'xlsx';
-
-export interface HardwareAsset {
-  id: string;
-  type: string; // '개인PC', '서버', '스토리지', '전산비품'
-  법인: string;
-  자산코드: string;
-  명칭: string;
-  위치: string;
-  관리자: string;
-  IP주소: string;
-  IP2?: string;
-  MACaddress: string;
-  HW사양: string;
-  OS: string;
-  사용자?: string;
-  CPU?: string;
-  GPU?: string;
-  RAM?: string;
-  SSD1?: string;
-  SSD2?: string;
-  HDD1?: string;
-  HDD2?: string;
-  storage유형?: string;
-  비품유형?: string;
-  모델명?: string;
-  용량?: string;
-  담당자_정?: string;
-  담당자_부?: string;
-  구매일?: string;
-  금액?: string;
-  납품업체: string;
-  품의서명: string;
-  용도?: string;
-  상세?: string;
-  원격접속?: string;
-  서버ID?: string;
-  서버PW?: string;
-  모니터링?: string;
-  비고?: string;
-}
-
-
-export interface SoftwareAsset {
-  id: string;
-  type: string; // '구독SW', '영구SW'
-  분야?: string;
-  법인: string;
-  부서?: string;
-  제품명: string;
-  구매일: string;
-  구독일?: string;
-  유지보수여부?: boolean;
-  금액: string;
-  수량: number;
-  계정명: string;
-  납품업체: string;
-  비고: string;
-}
-
-export interface SWUser {
-  id: string;
-  swId: string;
-  법인: string;
-  부서: string;
-  팀: string;
-  직위: string;
-  이름: string;
-  사용기간: string;
-  신청서명: string;
-}
-
-export interface HardwareLog {
-  id: string;
-  assetId: string;
-  date: string;
-  details: string;
-  user: string;
-}
-
-export interface MasterAssetData {
-  hw: HardwareAsset[];
-  sw: SoftwareAsset[];
-  swUsers: SWUser[];
-  logs: HardwareLog[];
-}
-
-const HW_TABS = ['개인PC', '서버', '스토리지', '전산비품'];
-const SW_TABS = ['구독SW', '영구SW'];
-
-const HW_HEADERS = ['법인', '자산코드', '명칭', '위치', '관리자', 'IP주소', 'MACaddress', 'HW사양', 'OS', '구매일', '금액', '납품업체', '품의서명'];
-const PC_HEADERS = ['법인', '자산코드', '사용자', '위치', 'CPU', 'GPU', 'RAM', 'SSD1', 'SSD2', 'HDD1', 'HDD2', '구매일', '금액', '납품업체', '품의서명'];
-const SERVER_HEADERS = ['법인', '자산번호', '유형', '용도', '설치위치', '담당자(정)', '담당자(부)', 'IP 주소', '원격접속', '모델명', 'OS', 'CPU', 'RAM', 'GPU', 'Storage1', 'Storage2', 'Storage3', '모니터링', '비고'];
-const STORAGE_HEADERS = ['법인', '유형', '자산코드', '명칭', '위치', '모델명', '용량', '담당자(정)', '담당자(부)', 'IP주소', 'MAC주소', '구매일', '금액', '납품업체', '품의서명'];
-const SUB_SW_HEADERS = ['ID', '분야', '법인', '부서', '제품명', '구매일', '구독일', '금액', '수량', '계정명', '납품업체', '비고'];
-const PERM_SW_HEADERS = ['ID', '분야', '법인', '부서', '제품명', '구매일', '유지보수여부', '금액', '수량', '계정명', '납품업체', '비고'];
-const SW_USER_HEADERS = ['id', 'swId', '법인', '부서', '팀', '직위', '이름', '사용기간', '신청서명'];
-const HISTORY_HEADERS = ['id', 'assetId', 'date', 'details', 'user'];
-
-/**
- * 템플릿 엑셀 다중 시트로 다운로드
- */
-export function downloadTemplate() {
-  const wb = XLSX.utils.book_new();
-
-  HW_TABS.forEach(tab => {
-    let hd = HW_HEADERS;
-    let wscols: any[] = [];
-
-    if (tab === '개인PC') {
-      hd = PC_HEADERS;
-      wscols = [{wch:15}, {wch:25}, {wch:15}, {wch:20}, {wch:20}, {wch:20}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
-    } else if (tab === '서버') {
-      hd = SERVER_HEADERS;
-      wscols = [{wch:15}, {wch:20}, {wch:15}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:20}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:30}];
-    } else if (tab === '스토리지') {
-      hd = STORAGE_HEADERS;
-      wscols = [{wch:15}, {wch:15}, {wch:25}, {wch:25}, {wch:20}, {wch:25}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
-    } else {
-      hd = HW_HEADERS;
-      wscols = [{wch:15}, {wch:20}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:40}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
-    }
-
-    const ws = XLSX.utils.aoa_to_sheet([hd]);
-    ws['!cols'] = wscols;
-    XLSX.utils.book_append_sheet(wb, ws, tab);
-  });
-
-  SW_TABS.forEach(tab => {
-    let hd = tab === '구독SW' ? SUB_SW_HEADERS : PERM_SW_HEADERS;
-    const ws = XLSX.utils.aoa_to_sheet([hd]);
-    ws['!cols'] = [{wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:30}, {wch:15}, {wch:20}, {wch:15}, {wch:10}, {wch:20}, {wch:20}, {wch:30}];
-    XLSX.utils.book_append_sheet(wb, ws, tab);
-  });
-
-  const swUserWs = XLSX.utils.aoa_to_sheet([SW_USER_HEADERS]);
-  swUserWs['!cols'] = [{wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
-  XLSX.utils.book_append_sheet(wb, swUserWs, 'SW_사용자');
-
-  const historyWs = XLSX.utils.aoa_to_sheet([HISTORY_HEADERS]);
-  historyWs['!cols'] = [{wch:15}, {wch:20}, {wch:20}, {wch:50}, {wch:15}];
-  XLSX.utils.book_append_sheet(wb, historyWs, 'History');
-
-  XLSX.writeFile(wb, 'itam_assets_template.xlsx');
-}
-
-/**
- * 마스터 데이터를 여러 시트로 쪼개서 내보내기
- */
-export function exportToExcel(masterData: MasterAssetData) {
-  const wb = XLSX.utils.book_new();
-
-  HW_TABS.forEach(tab => {
-    const targetAssets = masterData.hw.filter(a => a.type === tab);
-    let wsData;
-    let colsConfig;
-
-    if (tab === '개인PC') {
-      wsData = [
-        PC_HEADERS,
-        ...targetAssets.map(a => [a.법인, a.자산코드, a.사용자, a.위치, a.CPU, a.GPU, a.RAM, a.SSD1, a.SSD2, a.HDD1, a.HDD2, a.구매일, a.금액, a.납품업체, a.품의서명])
-      ];
-      colsConfig = [{wch:15}, {wch:25}, {wch:15}, {wch:20}, {wch:20}, {wch:20}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
-    } else if (tab === '서버') {
-      wsData = [
-        SERVER_HEADERS,
-        ...targetAssets.map(a => [a.법인, a.자산코드, a.storage유형 || '물리', a.용도 || '', a.위치, a.담당자_정 || '', a.담당자_부 || '', a.IP주소, a.원격접속 || '', a.모델명 || '', a.OS, a.CPU, a.RAM, a.GPU || '', a.SSD1 || '', a.SSD2 || '', a.HDD1 || '', a.모니터링 || '', a.비고 || ''])
-      ];
-      colsConfig = [{wch:15}, {wch:20}, {wch:15}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:20}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:30}];
-    } else if (tab === '스토리지') {
-      wsData = [
-        STORAGE_HEADERS,
-        ...targetAssets.map(a => [a.법인, a.storage유형, a.자산코드, a.명칭, a.위치, a.모델명, a.용량, a.담당자_정, a.담당자_부, a.IP주소, a.MACaddress, a.구매일, a.금액, a.납품업체, a.품의서명])
-      ];
-      colsConfig = [{wch:15}, {wch:15}, {wch:25}, {wch:25}, {wch:20}, {wch:25}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
-    } else {
-      wsData = [
-        HW_HEADERS,
-        ...targetAssets.map(a => [a.법인, a.자산코드, a.명칭, a.위치, a.관리자, a.IP주소, a.MACaddress, a.HW사양, a.OS, a.구매일, a.금액, a.납품업체, a.품의서명])
-      ];
-      colsConfig = [{wch:15}, {wch:20}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:40}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
-    }
-    
-    const ws = XLSX.utils.aoa_to_sheet(wsData);
-    ws['!cols'] = colsConfig;
-    XLSX.utils.book_append_sheet(wb, ws, tab);
-  });
-
-  SW_TABS.forEach(tab => {
-    const targetAssets = masterData.sw.filter(a => a.type === tab);
-    let wsData;
-    if (tab === '구독SW') {
-      wsData = [
-        SUB_SW_HEADERS,
-        ...targetAssets.map(a => [a.id, a.분야||'', a.법인, a.부서||'', a.제품명, a.구매일, a.구독일, a.금액, a.수량, a.계정명, a.납품업체, a.비고])
-      ];
-    } else {
-      wsData = [
-        PERM_SW_HEADERS,
-        ...targetAssets.map(a => [a.id, a.분야||'', a.법인, a.부서||'', a.제품명, a.구매일, a.유지보수여부 ? 'Y' : 'N', a.금액, a.수량, a.계정명, a.납품업체, a.비고])
-      ];
-    }
-    const ws = XLSX.utils.aoa_to_sheet(wsData);
-    ws['!cols'] = [{wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:30}, {wch:15}, {wch:20}, {wch:15}, {wch:10}, {wch:20}, {wch:20}, {wch:30}];
-    XLSX.utils.book_append_sheet(wb, ws, tab);
-  });
-
-  const swUserWsData = [
-    SW_USER_HEADERS,
-    ...masterData.swUsers.map(u => [u.id, u.swId, u.법인, u.부서, u.팀, u.직위, u.이름, u.사용기간, u.신청서명])
-  ];
-  const swUserWs = XLSX.utils.aoa_to_sheet(swUserWsData);
-  swUserWs['!cols'] = [{wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
-  XLSX.utils.book_append_sheet(wb, swUserWs, 'SW_사용자');
-
-  const historyWsData = [
-    HISTORY_HEADERS,
-    ...masterData.logs.map(l => [l.id, l.assetId, l.date, l.details, l.user])
-  ];
-  const historyWs = XLSX.utils.aoa_to_sheet(historyWsData);
-  historyWs['!cols'] = [{wch:15}, {wch:20}, {wch:20}, {wch:50}, {wch:15}];
-  XLSX.utils.book_append_sheet(wb, historyWs, 'History');
-  
-  const dateStr = new Date().toISOString().split('T')[0];
-  XLSX.writeFile(wb, `itam_assets_master_${dateStr}.xlsx`);
-}
-
-export async function parseExcel(file: File): Promise<MasterAssetData> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      try {
-        const data = e.target?.result;
-        const workbook = XLSX.read(data, { type: 'binary' });
-        const hwAssets: HardwareAsset[] = [];
-        const swAssets: SoftwareAsset[] = [];
-        const swUsers: SWUser[] = [];
-        const logs: HardwareLog[] = [];
-
-        workbook.SheetNames.forEach(sheetName => {
-          const worksheet = workbook.Sheets[sheetName];
-          const json = XLSX.utils.sheet_to_json(worksheet) as any[];
-
-          if (HW_TABS.includes(sheetName)) {
-            json.forEach(row => {
-              if (sheetName === '개인PC') {
-                hwAssets.push({
-                  id: Math.random().toString(36).substring(2, 9),
-                  type: sheetName,
-                  법인: row['법인'] || '',
-                  자산코드: row['자산코드'] || '',
-                  명칭: '',
-                  위치: row['위치'] || '',
-                  사용자: row['사용자'] || '',
-                  관리자: '', IP주소: '', MACaddress: '', HW사양: '', OS: '',
-                  CPU: row['CPU'] || '', GPU: row['GPU'] || '', RAM: row['RAM'] || '',
-                  SSD1: row['SSD1'] || '', SSD2: row['SSD2'] || '', HDD1: row['HDD1'] || '', HDD2: row['HDD2'] || '',
-                  구매일: row['구매일'] || '', 금액: row['금액'] ? String(row['금액']) : '',
-                  납품업체: row['납품업체'] || '', 품의서명: row['품의서명'] || '',
-                });
-              } else if (sheetName === '서버') {
-                hwAssets.push({
-                  id: Math.random().toString(36).substring(2, 9),
-                  type: sheetName,
-                  법인: row['법인'] || '',
-                  자산코드: row['자산번호'] || row['자산코드'] || '',
-                  명칭: row['용도'] || row['명칭'] || '',
-                  용도: row['용도'] || '', 위치: row['설치위치'] || row['위치'] || '',
-                  관리자: row['담당자(정)'] || '', 담당자_정: row['담당자(정)'] || '', 담당자_부: row['담당자(부)'] || '',
-                  IP주소: row['IP 주소'] || row['IP주소'] || '', IP2: row['IP2'] || '',
-                  원격접속: row['원격접속'] || '', 서버ID: row['서버ID'] || '', 서버PW: row['서버PW'] || '',
-                  모델명: row['모델명'] || '', OS: row['OS'] || '',
-                  CPU: row['CPU'] || '', RAM: row['RAM'] || '', GPU: row['GPU'] || '',
-                  SSD1: row['Storage1'] || row['SSD1'] || '', SSD2: row['Storage2'] || row['SSD2'] || '', HDD1: row['Storage3'] || row['HDD1'] || '',
-                  모니터링: row['모니터링'] || '', 비고: row['비고'] || '', storage유형: row['유형'] || '물리',
-                  MACaddress: '', HW사양: '', 구매일: '', 금액: '', 납품업체: '', 품의서명: '',
-                });
-              } else if (sheetName === '스토리지') {
-                hwAssets.push({
-                  id: Math.random().toString(36).substring(2, 9),
-                  type: sheetName,
-                  법인: row['법인'] || '', 자산코드: row['자산코드'] || '', 명칭: row['명칭'] || '', 위치: row['위치'] || '',
-                  관리자: '', IP주소: row['IP주소'] || '', MACaddress: row['MAC주소'] || '', HW사양: '', OS: '',
-                  storage유형: row['유형'] || '', 모델명: row['모델명'] || '', 용량: row['용량'] || '',
-                  담당자_정: row['담당자(정)'] || '', 담당자_부: row['담당자(부)'] || '',
-                  구매일: row['구매일'] || '', 금액: row['금액'] ? String(row['금액']) : '',
-                  납품업체: row['납품업체'] || '', 품의서명: row['품의서명'] || '',
-                });
-              } else {
-                hwAssets.push({
-                  id: Math.random().toString(36).substring(2, 9),
-                  type: sheetName,
-                  법인: row['법인'] || '', 자산코드: row['자산코드'] || '', 명칭: row['명칭'] || '', 위치: row['위치'] || '',
-                  관리자: row['관리자'] || '', IP주소: row['IP주소'] || '', MACaddress: row['MACaddress'] || '',
-                  HW사양: row['HW사양'] || '', OS: row['OS'] || '',
-                  구매일: row['구매일'] || '', 금액: row['금액'] ? String(row['금액']) : '',
-                  납품업체: row['납품업체'] || '', 품의서명: row['품의서명'] || '',
-                });
-              }
-            });
-          }
-
-          if (SW_TABS.includes(sheetName)) {
-            json.forEach(row => {
-              swAssets.push({
-                id: row['ID'] ? String(row['ID']) : Math.random().toString(36).substring(2, 9),
-                type: sheetName, 분야: row['분야'] || '', 법인: row['법인'] || '', 부서: row['부서'] || '', 제품명: row['제품명'] || '',
-                구매일: row['구매일'] || '', 구독일: row['구독일'] || '', 유지보수여부: row['유지보수여부'] === 'Y' || row['유지보수여부'] === true,
-                금액: row['금액'] ? String(row['금액']) : '', 수량: parseInt(row['수량'] || '1', 10),
-                계정명: row['계정명'] || '', 납품업체: row['납품업체'] || '', 비고: row['비고'] || '',
-              });
-            });
-          }
-
-          if (sheetName === 'SW_사용자') {
-            json.forEach(row => {
-              swUsers.push({
-                id: row['id'] ? String(row['id']) : Math.random().toString(36).substring(2, 9),
-                swId: row['swId'] ? String(row['swId']) : '', 법인: row['법인'] || '', 부서: row['부서'] || '',
-                팀: row['팀'] || '', 직위: row['직위'] || '', 이름: row['이름'] || '',
-                사용기간: row['사용기간'] || '', 신청서명: row['신청서명'] || '',
-              });
-            });
-          }
-
-          if (sheetName === 'History') {
-            json.forEach(row => {
-              logs.push({
-                id: row['id'] ? String(row['id']) : Math.random().toString(36).substring(2, 9),
-                assetId: row['assetId'] ? String(row['assetId']) : '',
-                date: row['date'] || '', details: row['details'] || '', user: row['user'] || '',
-              });
-            });
-          }
-        });
-        resolve({ hw: hwAssets, sw: swAssets, swUsers, logs });
-      } catch (err) {
-        reject(err);
-      }
-    };
-    reader.onerror = (err) => reject(err);
-    reader.readAsBinaryString(file);
-  });
-}

backup_refactor/src/core/state.ts

@@ -1,87 +0,0 @@
-import { MasterAssetData, HardwareAsset } from './excelHandler';
-import { generateDummyData } from './dummyDataGenerator';
-import { realServerData } from './realServerData';
-
-// --- State Definitions ---
-export interface AppState {
-  masterData: MasterAssetData;
-  activeCategory: 'hw' | 'sw' | 'ops';
-  activeSubTab: string;
-  activeCharts: any[];
-}
-
-const dummy = generateDummyData();
-// 서버 데이터만 실제 데이터로 교체
-const mergedHw: HardwareAsset[] = [
-  ...dummy.hw.filter(a => a.type !== '서버'),
-  ...realServerData.map(s => ({
-    id: s.id || Math.random().toString(36).substring(2, 9),
-    type: '서버',
-    법인: s.법인,
-    자산코드: s.자산코드,
-    명칭: s.용도 || '',
-    위치: s.위치,
-    관리자: s.담당자_정 || '홍길동', 
-    담당자_정: s.담당자_정 || '홍길동',
-    담당자_부: s.담당자_부 || '김철수',
-    IP주소: s.IP주소,
-    IP2: s.IP2 || '',
-    MACaddress: s.MACaddress || '', 
-    HW사양: s.HW사양 || '',
-    OS: s.OS,
-    CPU: s.CPU,
-    RAM: s.RAM,
-    SSD1: s.SSD1,
-    SSD2: s.SSD2,
-    HDD1: s.HDD1,
-    storage유형: s.storage유형,
-    모델명: s.모델명,
-    구매일: s.구매일 || '',
-    금액: s.금액 || '',
-    납품업체: s.납품업체 || '',
-    품의서명: s.품의서명 || '',
-    용도: s.용도,
-    상세: s.상세,
-    원격접속: s.원격접속 || '',
-    서버ID: s.서버ID || '',
-    서버PW: s.서버PW || '',
-    모니터링: s.모니터링 || '',
-    비고: s.비고 || ''
-  }))
-];
-
-// --- Initial State ---
-export const state: AppState = {
-  masterData: {
-    ...dummy,
-    hw: mergedHw, // 기본적으로 하드코딩된 데이터를 가지고 시작
-    logs: [] 
-  },
-  activeCategory: 'hw',
-  activeSubTab: '대시보드',
-  activeCharts: []
-};
-
-/**
- * DB에서 데이터 로드
- */
-export async function loadMasterDataFromDB() {
-  try {
-    const response = await fetch('http://localhost:3000/api/hw');
-    if (!response.ok) throw new Error('DB 로드 실패');
-    const data = await response.json();
-    if (data && data.length > 0) {
-      state.masterData.hw = data;
-      console.log('✅ DB 데이터 로드 완료');
-      return true;
-    }
-  } catch (err) {
-    console.warn('⚠️ 백엔드 서버 연결 실패. 로컬 데이터를 유지합니다.');
-  }
-  return false;
-}
-
-// --- State Helpers ---
-export function updateState(newState: Partial<AppState>) {
-  Object.assign(state, newState);
-}

backup_refactor/src/main.ts

@@ -1,108 +0,0 @@
-import { state, loadMasterDataFromDB } from './core/state';
-import { renderNavigation } from './components/Navigation';
-import { renderDashboard } from './views/DashboardView';
-import { renderTable } from './views/AssetTableView';
-import { downloadTemplate, exportToExcel, parseExcel, HardwareAsset } from './core/excelHandler';
-import { initBaseModal } from './components/Modal/BaseModal';
-import { initPcModal } from './components/Modal/PCModal';
-import { initHwModal, openHwModal } from './components/Modal/HWModal';
-import { initStorageModal } from './components/Modal/StorageModal';
-import { initSwModal } from './components/Modal/SWModal';
-import { initSwUserModal } from './components/Modal/SWUserModal';
-import { initDashboardDetailModal } from './components/Modal/DashboardDetailModal';
-import { createIcons, Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, History, RefreshCcw } from 'lucide';
-
-// --- DB 저장을 위한 헬퍼 함수 ---
-async function saveAllHwToDB(assets: HardwareAsset[]) {
-  try {
-    const response = await fetch('http://localhost:3000/api/hw/batch', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(assets)
-    });
-    if (!response.ok) throw new Error('DB 저장 실패');
-    console.log('✅ DB 저장 완료');
-  } catch (err) {
-    console.error('❌ DB 저장 실패:', err);
-  }
-}
-
-// --- App Initialization ---
-function initApp() {
-  console.log('🚀 ITAM System Initializing...');
-  const mainContent = document.getElementById('main-content')!;
-  if (!mainContent) return;
-
-  // 1. 전역 모달 및 내비게이션 초기화
-  const { closeAllModals } = initBaseModal(); 
-  
-  try {
-    renderNavigation((tab) => {
-      if (tab === '대시보드') {
-        renderDashboard(mainContent);
-      } else {
-        renderTable(mainContent);
-      }
-    });
-
-    initPcModal(() => {
-      saveAllHwToDB(state.masterData.hw);
-      renderTable(mainContent);
-    }, closeAllModals);
-
-    initHwModal(); 
-    
-    initStorageModal(() => {
-      saveAllHwToDB(state.masterData.hw);
-      renderTable(mainContent);
-    }, closeAllModals);
-
-    initSwModal(() => renderTable(mainContent), closeAllModals);
-    initSwUserModal(() => renderTable(mainContent), closeAllModals);
-    initDashboardDetailModal();
-  } catch (e) {
-    console.error('❌ Initialization failed:', e);
-  }
-
-  // 2. 초기 렌더링
-  renderDashboard(mainContent);
-
-  // 3. 비동기 데이터 로드
-  loadMasterDataFromDB().then((success) => {
-    if (success) {
-      if (state.activeSubTab === '대시보드') renderDashboard(mainContent);
-      else renderTable(mainContent);
-    }
-  });
-
-  // 4. 이벤트 바인딩
-  document.getElementById('btn-download-template')?.addEventListener('click', () => downloadTemplate());
-  document.getElementById('btn-export-excel')?.addEventListener('click', () => exportToExcel(state.masterData));
-  
-  const uploadInput = document.getElementById('excel-upload') as HTMLInputElement;
-  uploadInput?.addEventListener('change', async (e) => {
-    const file = (e.target as HTMLInputElement).files?.[0];
-    if (file) {
-      const data = await parseExcel(file);
-      state.masterData = data;
-      await saveAllHwToDB(data.hw);
-      renderTable(mainContent);
-    }
-  });
-
-  document.getElementById('btn-add-asset')?.addEventListener('click', () => {
-    if (state.activeSubTab === '서버' || state.activeSubTab === '전산비품' || state.activeSubTab === '스토리지') {
-      openHwModal({
-        id: Math.random().toString(36).substring(2, 9),
-        type: state.activeSubTab,
-        법인: '한맥', 자산코드: '', 명칭: '', 위치: '', 관리자: '', IP주소: '', MACaddress: '', HW사양: '', OS: '', 납품업체: '', 품의서명: ''
-      } as any);
-    }
-  });
-
-  createIcons({
-    icons: { Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, History, RefreshCcw }
-  });
-}
-
-document.addEventListener('DOMContentLoaded', initApp);

backup_refactor/src/server_data.json

@@ -1,13 +0,0 @@
-[
-  {
-    "법인": "(주)회사1",
-    "자산코드": "ASSET-100",
-    "명칭": "서버 모델A",
-    "위치": "본사 1층",
-    "관리자": "관리자A",
-    "IP주소": "192.168.0.1",
-    "MACaddress": "00:00:00:00:00:01",
-    "HW사양": "Core i7, 16GB RAM",
-    "OS": "Windows 10"
-  }
-]

backup_refactor/src/styles/common.css

@@ -1,262 +0,0 @@
-:root {
-  --primary-color: #1E5149;
-  --primary-hover: #153c36;
-  --primary-light: #edf2f1;
-  --text-main: #111827;
-  --text-muted: #6B7280;
-  --border-color: #E5E7EB;
-  --bg-color: #F9FAFB;
-  --white: #FFFFFF;
-  --danger: #dc2626;
-
-  --header-height: 52px;
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: 'Pretendard Variable', Pretendard, sans-serif;
-  color: var(--text-main);
-  background-color: var(--bg-color);
-  line-height: 1.5;
-  letter-spacing: -0.02em;
-  font-size: 14px;
-  overflow: hidden;
-}
-
-.app-layout {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  width: 100%;
-}
-
-/* --- Integrated Header Style --- */
-.main-header {
-  background-color: var(--white);
-  border-bottom: 1px solid var(--border-color);
-  z-index: 100;
-  height: var(--header-height);
-}
-
-.header-container {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  padding: 0 1.5rem;
-  gap: 1.5rem;
-}
-
-.brand h1 {
-  font-size: 1.2rem;
-  font-weight: 800;
-  color: var(--text-main);
-  white-space: nowrap;
-  margin-right: 1rem;
-}
-.brand h1 span { color: var(--primary-color); }
-
-/* --- Integrated Nav --- */
-.integrated-nav {
-  flex: 1;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.nav-group {
-  display: flex;
-  align-items: center;
-  height: 100%;
-}
-
-.gnb-trigger {
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--text-main);
-  padding: 0 1rem;
-  cursor: pointer;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-}
-
-.lnb-shelf {
-  display: none; 
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0 0.75rem;
-  height: 60%;
-  border-left: 1px solid var(--border-color);
-  margin-left: 0.25rem;
-  animation: fadeIn 0.2s ease-out;
-}
-
-.nav-group:hover .lnb-shelf,
-.nav-group.is-showing-shelf .lnb-shelf {
-  display: flex;
-}
-
-.lnb-item {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--text-muted);
-  cursor: pointer;
-  padding: 0.2rem 0.6rem;
-  border-radius: 4px;
-  white-space: nowrap;
-}
-
-.lnb-item.active {
-  color: var(--primary-color);
-  background-color: var(--primary-light);
-  font-weight: 700;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateX(-5px); }
-  to { opacity: 1; transform: translateX(0); }
-}
-
-/* --- Header Actions --- */
-.header-actions { display: flex; gap: 0.3rem; align-items: center; }
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.35rem;
-  padding: 0 0.8rem;
-  font-size: 12px;
-  font-weight: 600;
-  border-radius: 4px;
-  cursor: pointer;
-  height: 28px;
-  line-height: 1;
-}
-
-.btn i, .btn svg { width: 12px !important; height: 12px !important; }
-
-.btn-primary { background-color: var(--primary-color); color: var(--white); border: 1px solid var(--primary-color); }
-.btn-outline { background-color: transparent; color: var(--text-muted); border: 1px solid var(--border-color); }
-
-/* --- Content Area & Standardized Layout --- */
-.content-area {
-  flex: 1;
-  padding: 2rem; /* benchmark: 좌, 우, 하단 2rem 공백 통일 */
-  overflow-y: auto;
-  background-color: var(--bg-color);
-}
-
-.view-container {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-/* --- Search Filter Bar --- */
-.search-bar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1.25rem;
-  background-color: var(--white);
-  padding: 1.5rem;
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  align-items: flex-end;
-}
-
-.search-item { display: flex; flex-direction: column; gap: 0.4rem; }
-.search-item.flex-1 { flex: 1; }
-.search-item label { font-size: 11px; font-weight: 800; color: var(--text-muted); }
-.search-item input, 
-.search-item select {
-  height: 32px;
-  padding: 0 2.5rem 0 0.75rem; /* Increased right padding for arrow */
-  border: 1px solid var(--border-color);
-  border-radius: 3px;
-  font-size: 13px;
-  outline: none;
-  appearance: none; /* Modern arrow styling */
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-9'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 0.75rem center;
-}
-
-.search-item input {
-  padding-right: 0.75rem;
-}
-
-.btn-reset {
-  height: 32px !important;
-  padding: 0 0.8rem !important;
-  font-size: 12px !important;
-  display: inline-flex !important;
-  align-items: center !important;
-  gap: 0.35rem !important;
-  border-radius: 4px !important;
-}
-
-/* --- Table (Box-less Design) --- */
-.table-container {
-  background-color: var(--white);
-  border-top: 1px solid var(--border-color);
-  border-bottom: 1px solid var(--border-color);
-  border-left: none;
-  border-right: none;
-  overflow: auto;
-  max-height: calc(100vh - 240px); /* Adjusting for bottom spacing */
-}
-
-table { width: 100%; border-collapse: collapse; }
-th, td {
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid var(--border-color);
-  text-align: left;
-  white-space: nowrap; /* Force single line for all info */
-}
-th {
-  background-color: #FAFAFA;
-  font-weight: 700;
-  color: var(--text-muted);
-  font-size: 12px;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  box-shadow: inset 0 -1px 0 var(--border-color);
-  text-transform: uppercase;
-}
-td { font-size: 14px; }
-tbody tr:hover { background-color: #F9FAFB; }
-
-/* --- Dashboard Style --- */
-.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
-.stat-card { background-color: var(--white); padding: 1.5rem; border: 1px solid var(--border-color); border-radius: 8px; }
-.stat-card .value { font-size: 2.2rem; font-weight: 800; color: var(--primary-color); margin-top: 0.5rem; }
-.dashboard-layout-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
-.dashboard-card { 
-  background-color: var(--white); 
-  border: 1px solid var(--border-color); 
-  border-radius: 8px; 
-  padding: 1.5rem; 
-  display: flex; 
-  flex-direction: column; 
-  min-height: 360px; /* Increased height for better chart view */
-}
-.dashboard-card canvas {
-  flex: 1;
-  width: 100% !important;
-  max-height: 280px;
-}
-.dashboard-section-title { padding: 0 0 1rem 0; font-size: 1.1rem; font-weight: 700; color: var(--text-main); }
-
-.hidden { display: none !important; }
-.text-nowrap { white-space: nowrap; }
-.btn-sm { padding: 0.25rem 0.5rem; font-size: 11px; height: 24px; }

backup_refactor/src/styles/modal.css

@@ -1,267 +0,0 @@
-/* Modal */
-.modal-overlay {
-  position: fixed;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background-color: rgba(0, 0, 0, 0.4);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.2s ease, visibility 0.2s ease;
-}
-
-.modal-overlay:not(.hidden) { opacity: 1; visibility: visible; }
-
-.modal-content {
-  background-color: var(--white);
-  width: 100%; 
-  max-width: 600px;
-  max-height: 90vh;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
-  transform: translateY(20px);
-  transition: transform 0.2s ease;
-  display: flex;
-  flex-direction: column;
-}
-
-.modal-overlay:not(.hidden) .modal-content { transform: translateY(0); }
-
-.modal-header {
-  background-color: var(--primary-color);
-  color: var(--white);
-  padding: 1rem 1.5rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.modal-header h2 { 
-  font-size: 1.125rem; 
-  font-weight: 600; 
-  letter-spacing: -0.02em;
-}
-
-.modal-header .btn-icon {
-  color: #FFFFFF !important;
-  cursor: pointer;
-  background: none !important;
-  border: none !important;
-}
-
-.modal-header .btn-icon i,
-.modal-header .btn-icon svg {
-  width: 20px !important; /* Original natural size */
-  height: 20px !important;
-  stroke: #FFFFFF !important;
-}
-
-.modal-header .btn-icon:hover {
-  background: none !important;
-}
-
-.modal-body { 
-  padding: 1.5rem; 
-  overflow-y: auto;
-  flex: 1;
-}
-
-.grid-form { 
-  display: grid; 
-  grid-template-columns: 1fr 1fr; 
-  gap: 1.25rem; 
-}
-
-.form-group { 
-  display: flex; 
-  flex-direction: column; 
-  gap: 0.375rem; 
-}
-
-.form-group.full-width { 
-  grid-column: span 2; 
-}
-
-/* Section Title for Grouping */
-.form-section-title {
-  grid-column: span 2;
-  font-size: 0.875rem;
-  font-weight: 700;
-  color: var(--primary-color);
-  padding: 1.5rem 0 0.5rem 0; /* 패딩 조정 */
-  border-bottom: 1px solid var(--border-color);
-  margin-bottom: 0.5rem;
-  display: flex;
-  align-items: center;
-}
-
-/* Modal Readonly/Edit Mode Interaction */
-.grid-form.is-view-mode input,
-.grid-form.is-view-mode select,
-.grid-form.is-view-mode textarea {
-  border-color: transparent !important;
-  background-color: transparent !important;
-  padding-left: 0;
-  padding-right: 0;
-  pointer-events: none;
-  color: var(--text-main);
-  font-weight: 500;
-}
-
-.grid-form.is-edit-mode input,
-.grid-form.is-edit-mode select,
-.grid-form.is-edit-mode textarea {
-  color: #FF3D00; /* 수정 시 글자색 변경 */
-  border: 1px solid var(--border-color);
-}
-
-.grid-form.is-edit-mode input:focus,
-.grid-form.is-edit-mode select:focus,
-.grid-form.is-edit-mode textarea:focus {
-  border-color: #FF3D00;
-  box-shadow: 0 0 0 2px rgba(255, 61, 0, 0.1);
-}
-
-.form-section-title:first-child {
-  padding-top: 0.5rem;
-}
-
-.form-group label { 
-  font-size: 0.8125rem; 
-  font-weight: 600; 
-  color: var(--text-muted);
-}
-
-.form-group input, 
-.form-group select, 
-.form-group textarea {
-  padding: 0.625rem;
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  font-family: inherit; 
-  font-size: 0.875rem;
-  outline: none; 
-  transition: all 0.2s;
-  background-color: var(--white);
-}
-
-.form-group input:focus, 
-.form-group select:focus, 
-.form-group textarea:focus { 
-  border-color: var(--primary-color);
-  box-shadow: 0 0 0 2px rgba(30, 81, 73, 0.1);
-}
-
-.modal-footer {
-  padding: 1rem 1.5rem; 
-  border-top: 1px solid var(--border-color);
-  display: flex; 
-  justify-content: space-between; 
-  align-items: center;
-  background-color: #FAFAFA;
-  flex-shrink: 0;
-}
-
-.footer-actions { 
-  display: flex; 
-  gap: 0.5rem; 
-}
-
-/* Wide Modal for History/Detail */
-.modal-content.wide {
-  max-width: 950px;
-}
-
-.modal-body-split {
-  display: flex;
-  gap: 2rem;
-  min-height: 480px;
-}
-
-.modal-form-area {
-  flex: 1.2;
-}
-
-.modal-history-area {
-  flex: 0.8;
-  border-left: 1px solid var(--border-color);
-  padding-left: 1.5rem;
-  display: flex;
-  flex-direction: column;
-}
-
-.history-header {
-  margin-bottom: 1rem;
-}
-
-.history-header h3 {
-  font-size: 0.9375rem;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: var(--text-main);
-}
-
-.history-timeline {
-  flex: 1;
-  overflow-y: auto;
-  max-height: 500px;
-  padding-right: 0.5rem;
-}
-
-.history-item {
-  position: relative;
-  padding-left: 1.25rem;
-  padding-bottom: 1.5rem;
-  border-left: 2px solid var(--border-color);
-}
-
-.history-item::before {
-  content: '';
-  position: absolute;
-  left: -7px;
-  top: 0;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background-color: var(--white);
-  border: 2px solid var(--primary-color);
-}
-
-.history-item:last-child {
-  border-left: 2px solid transparent;
-}
-
-.history-date {
-  font-size: 0.75rem;
-  color: var(--text-muted);
-  font-weight: 500;
-  margin-bottom: 0.25rem;
-}
-
-.history-user {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--primary-color);
-  margin-bottom: 0.25rem;
-}
-
-.history-details {
-  font-size: 0.8125rem;
-  color: var(--text-main);
-  line-height: 1.4;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
-.empty-history {
-  padding: 2rem 0;
-  text-align: center;
-  color: var(--text-muted);
-  font-size: 0.8125rem;
-}

backup_refactor/src/views/AssetTableView.ts

@@ -1,208 +0,0 @@
-import { state } from '../core/state';
-import { createIcons, Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw } from 'lucide';
-import { openPcModal } from '../components/Modal/PCModal';
-import { openHwModal } from '../components/Modal/HWModal';
-import { openStorageModal } from '../components/Modal/StorageModal';
-import { openSwModal } from '../components/Modal/SWModal';
-import { openSwUserModal } from '../components/Modal/SWUserModal';
-
-/**
- * 자산 목록 테이블 렌더링 메인 함수
- */
-export function renderTable(mainContent: HTMLElement) {
-  mainContent.innerHTML = ''; 
-  const container = document.createElement('div');
-  container.className = 'view-container'; 
-  const table = document.createElement('table');
-
-  if (state.activeCategory === 'hw') {
-    renderHwTable(table, container, mainContent);
-  } else {
-    renderSwTable(table, container, mainContent);
-  }
-
-  createIcons({
-    icons: { Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2 }
-  });
-}
-
-function renderHwTable(table: HTMLTableElement, container: HTMLElement, mainContent: HTMLElement) {
-  const fullList = state.masterData.hw.filter(a => a.type === state.activeSubTab);
-  container.innerHTML = ''; 
-
-  // --- 1. Search Bar (Unified Style) ---
-  const filterBar = document.createElement('div');
-  filterBar.className = 'search-bar';
-  
-  const corps = Array.from(new Set(fullList.map(a => a.법인))).filter(Boolean).sort();
-  const orgUnits = Array.from(new Set(fullList.map(a => a.현사용조직))).filter(Boolean).sort();
-
-  filterBar.innerHTML = `
-    <div class="search-item flex-1">
-      <label>통합 검색 (자산코드/조직/모델명)</label>
-      <input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
-    </div>
-    <div class="search-item">
-      <label>법인</label>
-      <select id="filter-corp">
-        <option value="">전체 법인</option>
-        ${corps.map(c => `<option value="${c}">${c}</option>`).join('')}
-      </select>
-    </div>
-    ${state.activeSubTab === '서버' ? `
-    <div class="search-item">
-      <label>현 사용조직</label>
-      <select id="filter-org-unit">
-        <option value="">전체 조직</option>
-        ${orgUnits.map(o => `<option value="${o}">${o}</option>`).join('')}
-      </select>
-    </div>` : ''}
-    <button id="btn-reset-filters" class="btn btn-outline btn-reset" title="초기화">
-      <i data-lucide="refresh-ccw" style="width:14px; height:14px;"></i> 필터 초기화
-    </button>
-  `;
-  container.appendChild(filterBar);
-
-  // --- 2. Table Structure (Unified Style) ---
-  const tableWrapper = document.createElement('div');
-  tableWrapper.className = 'table-container';
-  
-  if (state.activeSubTab === '개인PC') {
-    table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>자산코드</th><th>사용자</th><th>위치</th><th>CPU</th><th>RAM</th><th>Storage</th><th>구매일</th><th>금액</th><th>품의서</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
-  } else if (state.activeSubTab === '서버') {
-    table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>현 사용조직</th><th>자산번호</th><th>용도</th><th>상세</th><th>설치위치</th><th>담당자</th><th>IP주소</th><th>모델명</th><th>OS</th><th>CPU/RAM</th><th>Storage</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
-  } else if (state.activeSubTab === '스토리지') {
-    table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>유형</th><th>자산코드</th><th>명칭</th><th>위치</th><th>모델명</th><th>용량</th><th>IP주소</th><th>구매일</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
-  } else {
-    table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>자산코드</th><th>명칭</th><th>위치</th><th>관리자</th><th>구매일</th><th>금액</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
-  }
-
-  tableWrapper.appendChild(table);
-  container.appendChild(tableWrapper);
-  mainContent.appendChild(container);
-
-  const tbody = document.getElementById('dynamic-tbody')!;
-
-  const updateTable = () => {
-    const keyword = (document.getElementById('filter-keyword') as HTMLInputElement).value.toLowerCase().trim();
-    const corp = (document.getElementById('filter-corp') as HTMLSelectElement).value;
-    const orgUnit = (document.getElementById('filter-org-unit') as HTMLSelectElement)?.value || '';
-
-    const filtered = fullList.filter(asset => {
-      const matchKeyword = !keyword || String(asset.자산코드||'').toLowerCase().includes(keyword) || String(asset.현사용조직||'').toLowerCase().includes(keyword) || String(asset.모델명||'').toLowerCase().includes(keyword);
-      const matchCorp = !corp || asset.법인 === corp;
-      const matchOrg = !orgUnit || asset.현사용조직 === orgUnit;
-      return matchKeyword && matchCorp && matchOrg;
-    });
-
-    tbody.innerHTML = '';
-    if (filtered.length === 0) {
-      const colSpan = table.querySelectorAll('th').length;
-      tbody.innerHTML = `<tr><td colspan="${colSpan}" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</td></tr>`;
-      return;
-    }
-
-    filtered.forEach((asset, idx) => {
-      const tr = document.createElement('tr');
-      tr.style.cursor = 'pointer';
-      const formatInline = (v: any) => String(v || '').replace(/\n/g, ' / ').trim();
-
-      if (state.activeSubTab === '개인PC') {
-        const storage = [asset.SSD1, asset.SSD2, asset.HDD1].filter(v => v).join(' / ');
-        tr.innerHTML = `<td>${idx+1}</td><td>${asset.법인}</td><td>${asset.자산코드}</td><td>${asset.사용자||''}</td><td>${asset.위치||''}</td><td>${asset.CPU||''}</td><td>${asset.RAM||''}</td><td>${formatInline(storage)}</td><td>${asset.구매일||''}</td><td>${asset.금액||''}</td><td style="text-align:center;">${asset.품의서명 ? '<i data-lucide="paperclip" class="text-primary"></i>' : '-'}</td><td><button class="btn btn-outline btn-sm btn-edit">수정</button></td>`;
-        tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openPcModal(asset); });
-      } else if (state.activeSubTab === '서버') {
-        const cpuRam = [asset.CPU, asset.RAM].filter(v => v).join(' / ');
-        const storage = [asset.SSD1, asset.SSD2].filter(v => v).join(' / ');
-        const ipInfo = [asset.IP주소, asset.IP2].filter(v => v).join(' / ');
-        tr.innerHTML = `<td>${idx+1}</td><td>${asset.법인}</td><td>${asset.현사용조직||''}</td><td>${asset.자산코드}</td><td>${formatInline(asset.용도)}</td><td>${formatInline(asset.상세)}</td><td>${formatInline(asset.위치)}</td><td>${asset.담당자_정||''}</td><td>${formatInline(ipInfo)}</td><td>${asset.모델명||''}</td><td>${asset.OS||''}</td><td>${formatInline(cpuRam)}</td><td>${formatInline(storage)}</td><td><button class="btn btn-outline btn-sm btn-edit">수정</button></td>`;
-        tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset); });
-      } else if (state.activeSubTab === '스토리지') {
-        tr.innerHTML = `<td>${idx+1}</td><td>${asset.법인}</td><td>${asset.storage유형||''}</td><td>${asset.자산코드}</td><td>${asset.명칭}</td><td>${asset.위치||''}</td><td>${asset.모델명||''}</td><td>${asset.용량||''}</td><td>${asset.IP주소||''}</td><td>${asset.구매일||''}</td><td><button class="btn btn-outline btn-sm btn-edit">수정</button></td>`;
-        tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openStorageModal(asset); });
-      } else {
-        tr.innerHTML = `<td>${idx+1}</td><td>${asset.법인}</td><td>${asset.자산코드}</td><td>${asset.명칭}</td><td>${asset.위치}</td><td>${asset.관리자}</td><td>${asset.구매일||''}</td><td>${asset.금액||''}</td><td><button class="btn btn-outline btn-sm btn-edit">수정</button></td>`;
-        tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset); });
-      }
-      tbody.appendChild(tr);
-    });
-    createIcons({ icons: { Paperclip, Edit2, RefreshCcw } });
-  };
-
-  const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
-  const corpSelect = document.getElementById('filter-corp') as HTMLSelectElement;
-  const orgSelect = document.getElementById('filter-org-unit') as HTMLSelectElement;
-  const resetBtn = document.getElementById('btn-reset-filters') as HTMLButtonElement;
-
-  keywordInput.addEventListener('input', updateTable);
-  corpSelect.addEventListener('change', updateTable);
-  orgSelect?.addEventListener('change', updateTable);
-  resetBtn.addEventListener('click', () => {
-    keywordInput.value = ''; corpSelect.value = ''; if(orgSelect) orgSelect.value = '';
-    updateTable();
-  });
-
-  updateTable();
-}
-
-function renderSwTable(table: HTMLTableElement, container: HTMLElement, mainContent: HTMLElement) {
-  const fullList = state.masterData.sw.filter(a => a.type === state.activeSubTab);
-  const isSub = state.activeSubTab === '구독SW';
-  container.innerHTML = ''; 
-  const filterBar = document.createElement('div');
-  filterBar.className = 'search-bar';
-  filterBar.innerHTML = `<div class="search-item flex-1"><label>통합 검색 (제품명/부서)</label><input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off"></div><div class="search-item"><label>분야</label><select id="filter-field"><option value="">전체 분야</option><option value="업무공통">업무공통</option><option value="개발S/W">개발S/W</option><option value="디자인">디자인</option><option value="설계S/W">설계S/W</option></select></div><div class="search-item"><label>법인</label><select id="filter-corp"><option value="">전체 법인</option><option value="한맥">한맥</option><option value="삼안">삼안</option><option value="바론">바론</option></select></div><button id="btn-reset-filters" class="btn btn-outline btn-reset" title="검색 조건 초기화"><i data-lucide="refresh-ccw" style="width:14px; height:14px;"></i> 필터 초기화</button>`;
-  container.appendChild(filterBar);
-
-  const tableWrapper = document.createElement('div');
-  tableWrapper.className = 'table-container';
-  table.classList.add('sw-table');
-  table.innerHTML = `<thead><tr><th style="text-align:center;">No.</th><th style="text-align:center;">분야</th><th style="text-align:center;">법인</th><th style="text-align:center;">부서</th><th style="text-align:center;">제품명</th><th style="text-align:center;">구매일</th>${isSub ? '<th style="text-align:center;">구독일</th>' : ''}<th style="text-align:center;">금액</th><th style="text-align:center;">수량</th><th style="text-align:center;">사용가능</th><th style="text-align:center;">관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
-  tableWrapper.appendChild(table);
-  container.appendChild(tableWrapper);
-  mainContent.appendChild(container);
-  
-  const tbody = document.getElementById('dynamic-tbody')!;
-  const updateTable = () => {
-    const keyword = (document.getElementById('filter-keyword') as HTMLInputElement).value.toLowerCase().trim();
-    const field = (document.getElementById('filter-field') as HTMLSelectElement).value;
-    const corp = (document.getElementById('filter-corp') as HTMLSelectElement).value;
-    const filtered = fullList.filter(asset => {
-      const matchKeyword = !keyword || (asset.제품명 || '').toLowerCase().includes(keyword) || (asset.부서 || '').toLowerCase().includes(keyword);
-      const matchField = !field || asset.분야 === field;
-      const matchCorp = !corp || asset.법인 === corp;
-      return matchKeyword && matchField && matchCorp;
-    });
-    tbody.innerHTML = '';
-    if (filtered.length === 0) {
-      tbody.innerHTML = `<tr><td colspan="${isSub ? 11 : 10}" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</td></tr>`;
-      return;
-    }
-    filtered.forEach((asset, idx) => {
-      const assigned = state.masterData.swUsers.filter(u => u.swId === asset.id).length;
-      const qty = typeof asset.수량 === 'number' ? asset.수량 : parseInt(asset.수량||'0', 10);
-      const avail = qty - assigned;
-      const tr = document.createElement('tr');
-      tr.style.cursor = 'pointer';
-      tr.innerHTML = `<td>${idx+1}</td><td>${asset.분야||''}</td><td>${asset.법인}</td><td>${asset.부서||''}</td><td>${asset.제품명}</td><td>${asset.구매일||''}</td>${isSub ? `<td>${asset.구독일||''}</td>` : ''}<td>${asset.금액||'0'}</td><td>${qty}</td><td><strong style="color: ${avail > 0 ? 'var(--primary-color)' : 'var(--danger)'}">${avail}</strong></td><td style="display:flex; justify-content:center; align-items:center; gap:0.5rem;"><button type="button" class="btn-icon btn-edit" title="수정" style="color: var(--text-muted);"><i data-lucide="edit-2" style="width:18px; height:18px;"></i></button><button type="button" class="btn-icon btn-users" title="사용자 관리" style="color: var(--primary-color);"><i data-lucide="users" style="width:18px; height:18px;"></i></button></td>`;
-      tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openSwModal(asset); });
-      tr.querySelector('.btn-edit')?.addEventListener('click', () => openSwModal(asset));
-      tr.querySelector('.btn-users')?.addEventListener('click', () => openSwUserModal(asset));
-      tbody.appendChild(tr);
-    });
-    createIcons({ icons: { Edit2, Users, RefreshCcw } });
-  };
-
-  const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
-  const fieldSelect = document.getElementById('filter-field') as HTMLSelectElement;
-  const corpSelect = document.getElementById('filter-corp') as HTMLSelectElement;
-  const resetBtn = document.getElementById('btn-reset-filters') as HTMLButtonElement;
-  keywordInput.addEventListener('input', updateTable);
-  fieldSelect.addEventListener('change', updateTable);
-  corpSelect.addEventListener('change', updateTable);
-  resetBtn.addEventListener('click', () => {
-    keywordInput.value = ''; fieldSelect.value = ''; corpSelect.value = '';
-    updateTable();
-  });
-  updateTable();
-}

backup_refactor/src/views/DashboardView.ts

@@ -1,278 +0,0 @@
-import { state } from '../core/state';
-import { HardwareAsset, SoftwareAsset } from '../core/excelHandler';
-import { openDashboardDetail, openSwDashboardDetail, openSwUsageDetail } from '../components/Modal/DashboardDetailModal';
-
-declare var Chart: any;
-
-/**
- * 대시보드 렌더링 메인 함수
- */
-export function renderDashboard(mainContent: HTMLElement) {
-  if (!mainContent) return;
-  mainContent.innerHTML = '';
-
-  // 기존 차트 리소스 해제
-  if (state.activeCharts) {
-    state.activeCharts.forEach(c => {
-      if (c && typeof c.destroy === 'function') c.destroy();
-    });
-  }
-  state.activeCharts = [];
-
-  if (state.activeCategory === 'hw') {
-    renderHwDashboard(mainContent);
-  } else if (state.activeCategory === 'sw') {
-    renderSwDashboard(mainContent);
-  } else {
-    mainContent.innerHTML = `<div class="dashboard-section-title">운영 서비스 대시보드는 준비 중입니다.</div>`;
-  }
-}
-
-// --- 하드웨어 대시보드 ---
-function renderHwDashboard(container: HTMLElement) {
-  const types = ['개인PC', '서버', '스토리지', '전산비품'];
-  const units = ['대', '대', '대', '개'];
-  const groups: any = {};
-  
-  types.forEach(t => { groups[t] = { idle: [], active: [], aged: [], normal: [] }; });
-
-  state.masterData.hw.forEach(a => {
-    if (!groups[a.type]) return;
-    if (isHwIdle(a)) groups[a.type].idle.push(a);
-    else groups[a.type].active.push(a);
-
-    const ageY = getHwAgeYears(a);
-    const isAged = a.type === '전산비품' ? ageY >= 3 : ageY >= 5;
-    if (isAged) groups[a.type].aged.push(a);
-    else groups[a.type].normal.push(a);
-  });
-
-  let usageCards = '';
-  types.forEach((t, i) => {
-    const total = groups[t].idle.length + groups[t].active.length;
-    const used = groups[t].active.length;
-    const per = total > 0 ? Math.round((used / total) * 100) : 0;
-    const barColor = per >= 50 ? 'var(--dash-primary)' : 'var(--dash-danger)';
-    
-    usageCards += `
-      <div class="dashboard-card" data-action="idle" data-type="${t}" style="padding: 1.25rem 1.5rem; cursor:pointer; min-height:auto;">
-        <span style="font-size:1rem; font-weight:700; color:var(--text-main);">${t} 사용현황</span>
-        <div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">
-          ${total}${units[i]} 중 ${used}${units[i]} 사용 중
-        </div>
-        <div style="font-size: 2rem; font-weight:700; color:${barColor}; line-height:1;">${per}%</div>
-        <div style="width:100%; height:4px; background-color:var(--border-color); border-radius:2px; overflow:hidden; margin-top:0.75rem;">
-          <div style="width:${per}%; height:100%; background-color:${barColor};"></div>
-        </div>
-      </div>`;
-  });
-
-  container.innerHTML = `
-    <div class="view-container">
-      <h3 class="dashboard-section-title">자산 사용현황 요약</h3>
-      <div class="dashboard-grid">${usageCards}</div>
-      
-      <h3 class="dashboard-section-title">하드웨어 보유 통계</h3>
-      <div class="dashboard-layout-2col">
-        <div class="dashboard-card">
-          <h4 style="margin-bottom:1rem; font-size:0.9rem; color:var(--text-muted);">자산 유형별 보유 현황</h4>
-          <canvas id="chart-hw-types"></canvas>
-        </div>
-        <div class="dashboard-card">
-          <h4 style="margin-bottom:1rem; font-size:0.9rem; color:var(--text-muted);">법인별 자산 분포</h4>
-          <canvas id="chart-hw-corps"></canvas>
-        </div>
-      </div>
-    </div>
-  `;
-
-  setTimeout(() => {
-    if (typeof Chart === 'undefined') return;
-    const ctxType = (document.getElementById('chart-hw-types') as HTMLCanvasElement)?.getContext('2d');
-    const ctxCorp = (document.getElementById('chart-hw-corps') as HTMLCanvasElement)?.getContext('2d');
-    if (ctxType) {
-      const chart = new Chart(ctxType, {
-        type: 'doughnut',
-        data: { labels: types, datasets: [{ data: types.map(t => state.masterData.hw.filter(a => a.type === t).length), backgroundColor: ['#1E5149', '#3b82f6', '#10b981', '#f59e0b'] }] },
-        options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'right' } } }
-      });
-      state.activeCharts.push(chart);
-    }
-    if (ctxCorp) {
-      const corps = ['한맥', '삼안', '바론'];
-      const chart = new Chart(ctxCorp, {
-        type: 'bar',
-        data: { labels: corps, datasets: [{ label: '보유 수량', data: corps.map(c => state.masterData.hw.filter(a => a.법인 === c).length), backgroundColor: 'rgba(30, 81, 73, 0.7)', borderRadius: 4 }] },
-        options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }
-      });
-      state.activeCharts.push(chart);
-    }
-  }, 100);
-
-  container.querySelectorAll('[data-action="idle"]').forEach(card => {
-    card.addEventListener('click', () => {
-      const t = card.getAttribute('data-type')!;
-      openDashboardDetail(`[${t}] 유휴 자산 목록`, groups[t].idle);
-    });
-  });
-}
-
-// --- 소프트웨어 대시보드 ---
-function renderSwDashboard(container: HTMLElement) {
-  let subQty = 0, subUsed = 0, subExp = 0, subTotal = 0;
-  let permQty = 0, permUsed = 0, permExp = 0, permTotal = 0;
-
-  const currentYear = new Date().getFullYear().toString();
-  const corps = ['한맥', '삼안', '바론'];
-  const categories = ['업무공통', '개발S/W', '디자인', '설계S/W'];
-  
-  const costByCorp: Record<string, number> = { '한맥': 0, '삼안': 0, '바론': 0 };
-  const costByCat: Record<string, number> = {};
-  categories.forEach(c => costByCat[c] = 0);
-
-  state.masterData.sw.forEach(sw => {
-     const assigned = state.masterData.swUsers.filter(u => u.swId === sw.id).length;
-     const qty = typeof sw.수량 === 'number' ? sw.수량 : parseInt(sw.수량||'0', 10);
-     const priceStr = sw.금액 ? String(sw.금액).replace(/,/g, '') : '0';
-     const price = parseInt(priceStr, 10) || 0;
-
-     if (sw.type === '구독SW') {
-       subQty += qty; subUsed += assigned; subTotal++;
-       if (isSWExpiring(sw)) subExp++;
-     } else {
-       permQty += qty; permUsed += assigned; permTotal++;
-       if (isSWExpiring(sw)) permExp++;
-     }
-
-     if (sw.구매일 && sw.구매일.startsWith(currentYear)) {
-       if (costByCorp[sw.법인] !== undefined) costByCorp[sw.법인] += price;
-       if (sw.분야 && costByCat[sw.분야] !== undefined) costByCat[sw.분야] += price;
-     }
-  });
-
-  const subPer = subQty > 0 ? Math.round((subUsed/subQty)*100) : 0;
-  const permPer = permQty > 0 ? Math.round((permUsed/permQty)*100) : 0;
-  const subExpPer = subTotal > 0 ? Math.round((subExp/subTotal)*100) : 0;
-  const permExpPer = permTotal > 0 ? Math.round((permExp/permTotal)*100) : 0;
-
-  container.innerHTML = `
-    <div class="view-container">
-      <h3 class="dashboard-section-title">소프트웨어 라이선스 현황</h3>
-      <div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">
-        <div class="dashboard-card" data-action="sub-usage" style="cursor:pointer; min-height:auto;">
-          <span style="font-size:1rem; font-weight:700; color:var(--text-main);">구독 소프트웨어 사용율</span>
-          <div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">${subQty}카피 중 ${subUsed}개 할당</div>
-          <div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">${subPer}%</div>
-          <div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
-            <div style="width: ${subPer}%; height: 100%; background-color: var(--dash-primary);"></div>
-          </div>
-        </div>
-        <div class="dashboard-card" data-action="perm-usage" style="cursor:pointer; min-height:auto;">
-          <span style="font-size:1rem; font-weight:700; color:var(--text-main);">영구 소프트웨어 사용율</span>
-          <div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">${permQty}카피 중 ${permUsed}개 할당</div>
-          <div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">${permPer}%</div>
-          <div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
-            <div style="width: ${permPer}%; height: 100%; background-color: var(--dash-primary);"></div>
-          </div>
-        </div>
-      </div>
-      
-      <div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">
-        <div class="dashboard-card" data-action="sub-exp" style="flex-direction:row; justify-content:space-between; align-items:center; cursor:pointer; min-height:auto;">
-          <div style="flex:1;">
-            <span style="font-size:1rem; font-weight:700; color:var(--text-main);">구독 SW 만료 예정 (30일 이내)</span>
-            <div style="font-size: 1.5rem; font-weight:700; color:${subExp > 0 ? 'var(--dash-danger)' : 'var(--text-main)'}; margin-top:0.5rem;">${subExp}개 제품</div>
-          </div>
-          <div style="width: 60px; height: 60px; border-radius: 50%; background: conic-gradient(var(--dash-danger) ${subExpPer}%, var(--border-color) 0); display:flex; justify-content:center; align-items:center;">
-            <div style="width: 48px; height: 48px; border-radius: 50%; background: var(--white); display:flex; justify-content:center; align-items:center;">
-              <span style="font-size: 0.875rem; color:var(--text-muted); font-weight:600;">${subExpPer}%</span>
-            </div>
-          </div>
-        </div>
-        <div class="dashboard-card" data-action="perm-exp" style="flex-direction:row; justify-content:space-between; align-items:center; cursor:pointer; min-height:auto;">
-          <div style="flex:1;">
-            <span style="font-size:1rem; font-weight:700; color:var(--text-main);">유지보수 만료 예정 (30일 이내)</span>
-            <div style="font-size: 1.5rem; font-weight:700; color:${permExp > 0 ? 'var(--dash-danger)' : 'var(--text-main)'}; margin-top:0.5rem;">${permExp}개 제품</div>
-          </div>
-          <div style="width: 60px; height: 60px; border-radius: 50%; background: conic-gradient(var(--dash-danger) ${permExpPer}%, var(--border-color) 0); display:flex; justify-content:center; align-items:center;">
-            <div style="width: 48px; height: 48px; border-radius: 50%; background: var(--white); display:flex; justify-content:center; align-items:center;">
-              <span style="font-size: 0.875rem; color:var(--text-muted); font-weight:600;">${permExpPer}%</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <h3 class="dashboard-section-title">${currentYear}년 도입 비용 분석</h3>
-      <div class="dashboard-layout-2col">
-        <div class="dashboard-card">
-          <h4 style="margin-bottom:1rem; font-size:0.9rem; color:var(--text-muted);">법인별 도입 금액 (원)</h4>
-          <canvas id="chart-sw-corp"></canvas>
-        </div>
-        <div class="dashboard-card">
-          <h4 style="margin-bottom:1rem; font-size:0.9rem; color:var(--text-muted);">분야별 도입 금액 (원)</h4>
-          <canvas id="chart-sw-cat"></canvas>
-        </div>
-      </div>
-    </div>
-  `;
-
-  setTimeout(() => {
-    if (typeof Chart === 'undefined') return;
-    const ctxCorp = (document.getElementById('chart-sw-corp') as HTMLCanvasElement)?.getContext('2d');
-    const ctxCat = (document.getElementById('chart-sw-cat') as HTMLCanvasElement)?.getContext('2d');
-    if (ctxCorp) {
-      const chart = new Chart(ctxCorp, {
-        type: 'bar',
-        data: { labels: corps, datasets: [{ data: corps.map(c => costByCorp[c]), backgroundColor: 'rgba(30, 81, 73, 0.8)', borderRadius: 4 }] },
-        options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }
-      });
-      state.activeCharts.push(chart);
-    }
-    if (ctxCat) {
-      const chart = new Chart(ctxCat, {
-        type: 'bar',
-        data: { labels: categories, datasets: [{ data: categories.map(c => costByCat[c]), backgroundColor: 'rgba(59, 130, 246, 0.8)', borderRadius: 4 }] },
-        options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }
-      });
-      state.activeCharts.push(chart);
-    }
-  }, 100);
-
-  container.querySelector('[data-action="sub-usage"]')?.addEventListener('click', () => openSwUsageDetail('구독 소프트웨어 사용 목록', state.masterData.sw.filter(sw => sw.type === '구독SW')));
-  container.querySelector('[data-action="perm-usage"]')?.addEventListener('click', () => openSwUsageDetail('영구 소프트웨어 사용 목록', state.masterData.sw.filter(sw => sw.type === '영구SW')));
-  container.querySelector('[data-action="sub-exp"]')?.addEventListener('click', () => openSwDashboardDetail('구독 SW 만료 예정 목록', state.masterData.sw.filter(sw => sw.type === '구독SW' && isSWExpiring(sw))));
-  container.querySelector('[data-action="perm-exp"]')?.addEventListener('click', () => openSwDashboardDetail('유지보수 만료 예정 목록', state.masterData.sw.filter(sw => sw.type === '영구SW' && isSWExpiring(sw))));
-}
-
-function isHwIdle(a: HardwareAsset) {
-  if (a.type === '개인PC') return !a.사용자 || a.사용자.trim() === '' || a.사용자.trim() === '-';
-  if (a.type === '스토리지') return !a.담당자_정 || a.담당자_정.trim() === '' || a.담당자_정.trim() === '-';
-  return !a.관리자 || a.관리자.trim() === '' || a.관리자.trim() === '-';
-}
-
-function getHwAgeYears(a: HardwareAsset) {
-  if (!a.구매일) return 0;
-  try {
-    const buyDate = new Date(a.구매일.replace(/\./g, '-'));
-    if (isNaN(buyDate.getTime())) return 0;
-    return (Date.now() - buyDate.getTime()) / (1000 * 60 * 60 * 24 * 365.25);
-  } catch { return 0; }
-}
-
-function isSWExpiring(sw: SoftwareAsset) {
-  if (sw.type === '구독SW' && sw.구독일) {
-    const parts = sw.구독일.split('~');
-    if (parts.length > 1) {
-      const endMs = new Date(parts[1].trim().replace(/\./g, '-')).getTime();
-      const diffDays = (endMs - Date.now()) / (1000 * 60 * 60 * 24);
-      return diffDays >= 0 && diffDays <= 30;
-    }
-  } else if (sw.type === '영구SW' && sw.비고 && sw.비고.includes('유지보수: ~')) {
-    try {
-      const endMs = new Date(sw.비고.split('~')[1].trim().replace(/\./g, '-')).getTime();
-      const diffDays = (endMs - Date.now()) / (1000 * 60 * 60 * 24);
-      return diffDays >= 0 && diffDays <= 30;
-    } catch { return false; }
-  }
-  return false;
-}

backup_temp/README.md

@@ -1,57 +0,0 @@
-# 🛠️ 개발 및 관리 규칙 (Strict Development Rules)
-
-1. **언어 설정**: 영어로 생각하되, 모든 답변은 **한국어**로 작성한다.
-2. **임의 수정 절대 금지 (Zero-Arbitrary Change)**:
-    - 사용자가 명시적으로 지시한 부분 외에는 **단 한 줄의 코드도, 그 어떤 파일도 임의로 수정, 정리, 리팩토링하지 않는다.**
-    - 지시받지 않은 다른 파트의 코드는 절대 건드리지 않으며, 영향 범위가 요청 범위를 벗어나지 않도록 '외과 수술식(Surgical) 수정'을 원칙으로 한다.
-3. **개선 작업 절차 (Test-First Approach)**:
-    - 사용자가 개선(Refactoring, Optimization 등)을 지시한 경우, **수정 전 현재 시스템이 정상적으로 잘 작동하는지 먼저 전수 확인**한다.
-    - 기존 동작 방식과 성능을 기준(Baseline)으로 삼고, 수정 후에도 **기존의 모든 기능이 무결하게 유지되는지 반드시 테스트하여 입증**한다.
-    - 검증 결과를 바탕으로 "무엇을, 왜, 어떻게" 바꿀지 상세 보고 후, 사용자로부터 **'진행시켜'** 승인을 얻은 뒤에만 집행한다.
-4. **선보고 후승인**: 모든 기능 수정 및 코드 변경 전에는 예상 방안을 먼저 보고하고 승인 절차를 거친다.
-
----
-
-### 🚀 서버 구동 및 외부 접속 규칙 (Server Run & External Access)
-
-1.  **포트 고정**: 개발 서버는 반드시 **8080** 포트를 사용한다. (`vite.config.ts` 설정 준수)
-2.  **외부 접속 허용 (Host)**: 사무실 내 타 직원이 접속할 수 있도록 `--host` 모드로 구동한다.
-3.  **구동 명령어**:
-    ```bash
-    npm run dev
-    ```
-    *   해당 명령어 실행 시 `0.0.0.0` 또는 `Network: http://[내-IP]:8080/` 경로로 타인 접속이 가능하다.
-4.  **IP 확인 방법**:
-    *   Windows: `ipconfig` 명령어로 'IPv4 주소' 확인 후 공유.
-
----
-
-### 🎨 ITAM 시스템 디자인 가이드 (Design Guide)
-
-1.  **디자인 철학 (Design Philosophy)**
-    *   **Minimalist & Border-based**: 불필요한 박스(Card) 사용을 최소화하고, 정보의 구분은 간결한 라인(Border/Divider)을 활용하여 시각적 피로도를 낮춥니다.
-    *   **Professional Achromatic**: 무채색(Black, White, Grey)을 기본으로 하여 정돈된 업무 환경을 제공합니다.
-    *   **Green Accent**: 블루 대신 짙은 그린(`#1E5149`)을 포인트 컬러로 사용하여 차분한 전문성을 강조합니다.
-
-2.  **타이포그래피 (Typography)**
-    *   **Font Family**: `Pretendard` (전역 적용)
-    *   **Letter Spacing**: `-0.02em` (약 -2%) 적용. 자간을 좁게 설정하여 밀도 있고 세련된 가독성을 확보합니다.
-    *   **Weights**: 400(Regular), 500(Medium), 600(SemiBold), 700(Bold).
-    *   **Date Format (날짜 표기 규칙)**: 시스템 내 모든 날짜는 `YYYY.MM.DD` 형식을 기본으로 사용합니다. (예: 2026.04.10)
-
-3.  **컬러 팔레트 (Color Palette)**
-    *   **Point Color**: `#1E5149` (Deep Green) - 강조, 활성화 상태, 주요 액션 버튼.
-    *   **Text**: Main(`#111827` - Near Black), Muted(`#6B7280` - Grey).
-    *   **Border/Divider**: `#E5E7EB` (Light Grey) - 정보 구분을 위한 얇은 실선.
-    *   **Background**: `#FFFFFF` (White) / `#F9FAFB` (Off White).
-
-4.  **레이아웃 및 컴포넌트 규칙 (Layout Rules)**
-    *   **Box-less Design**: 꼭 필요한 정보 묶음(데이터 그룹화 등)이 아니면 박스 형태의 테두리나 배경 사용을 지양합니다.
-    *   **Line-based Division**: 섹션 간의 구분은 1px 두께의 얇은 실선(Border)을 통해 명확히 합니다.
-    *   **Table**: 배경색이나 화려한 효과 없이 행(Row) 간의 얇은 구분선만 사용하여 데이터 본연에 집중하게 합니다.
-    *   **Input/Button**: 입력 필드와 버튼은 최소한의 보더와 포인트 컬러만 사용하여 정갈하게 표현합니다.
-    *   **Modal (모달 공통 규칙)**:
-        *   **Header**: 짙은 그린(`#1E5149`) 배경에 화이트 텍스트를 사용하며, 우측 상단에 명확한 'X' 닫기 버튼을 배치합니다.
-        *   **Interaction**: 사용자의 편의를 위해 `ESC` 키를 누르거나 모달 바깥 영역(Overlay)을 클릭하면 모달이 닫히도록 구현합니다.
-        *   **Layout**: `detail.png` 기준의 2열 그리드 시스템을 권장하며, 하단 우측에 액션 버튼(닫기, 저장 등)을 배치합니다.
-

backup_temp/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css" />
-    <title>ITAM - IT Asset Management</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

backup_temp/plan.md

@@ -1,32 +0,0 @@
-# 📑 ITAM 시스템 통합 구축 기획서 (plan.md)
-
-## 1. 프로젝트 목적 (Objective)
-본 시스템은 **'전산자산번호 부여방안'** 표준 가이드에 따라 사내 모든 전산 자산을 통합 관리하는 것을 목적으로 한다. 분산된 자산 정보를 일원화된 번호 체계로 시스템화하여 직관적인 식별과 정밀한 이력 추적이 가능한 플랫폼을 지향한다.
-
-## 2. 자산번호 체계 적용 (Standardization)
-검토안에 따라 모든 자산은 다음과 같은 규칙으로 고유 번호를 부여받으며, 시스템의 핵심 Key로 활용된다.
-
-*   **번호 생성 규칙**: `[구매법인]-[설치위치]-[자산종류]-[일련번호(구매연월+3자리)]`
-    *   *예시: 삼안에서 2025년 4월에 구매한 IDC 서버 → `SM-IDC-SVR-202504001`*
-*   **코드 정의**:
-    *   **구매법인**: BR(바론), SM(삼안), HM(한맥), JH(장헌), HL(한라), PTC(PTC) 등
-    *   **설치위치**: TDC(센터 서버실), HBD(한맥빌딩), IDC(IDC), UBD(유니온 빌딩), NBD(뉴코아 빌딩) 등
-    *   **자산종류**: SVR(서버), PC(PC), STO(스토리지), NAS(NAS), DAS(DAS), HDD(하드) 등
-
-## 3. 기획 의도 및 시스템 가치 (Core Intent)
-1.  **식별 용이성 확보**: 번호만으로도 법인, 위치, 종류, 도입 시기를 즉시 파악할 수 있는 시스템 UI를 제공한다.
-2.  **전사 통합 관리 로드맵**:
-    *   **Phase 1**: IDC 서버 및 스토리지 데이터 마이그레이션 (현재 완료 단계)
-    *   **Phase 2**: 센터 서버실(TDC) 및 빌딩별 네트워크 장비 확장
-    *   **Phase 3**: 전사 개인 PC(PC) 및 하드웨어 부품(HDD 등) 통합
-    *   **Phase 4**: 소프트웨어 라이선스와 하드웨어 자산의 매핑 관리
-3.  **데이터 무결성 유지**: 자산 위치 변경 시 기존 번호를 폐기하고 신규 번호를 부여하는 이력 관리 원칙을 시스템상에서 강제 및 기록한다.
-
-## 4. 시스템 주요 기능 (Key Features)
-*   **자산 자동 번호 부여**: 입력 폼에서 법인/위치/종류 선택 시 가이드에 따른 자산번호 자동 생성 기능.
-*   **상세 이력 카드**: 자산번호를 클릭하면 상세 사양, 취득일, 사용자, 현재 상태 및 과거 이동 이력을 모달로 표시.
-*   **통합 필터링**: 법인별, 위치별, 종류별로 자산을 즉시 분류하여 조회할 수 있는 고성능 테이블 제공.
-
-## 5. 기술 및 디자인 원칙 (Engineering Standards)
-*   **Design**: `README.md` 가이드를 준수하며, 자산번호가 가장 강조되는 레이아웃을 유지한다.
-*   **Data Structure**: 향후 DB 전환 시 자산번호의 각 코드(SM, IDC 등)를 정규화하여 관리 효율을 극대화한다.

backup_temp/src/App.css

@@ -1,295 +0,0 @@
-:root {
-  --primary-color: #1E5149;
-  --primary-hover: #163d37;
-  --bg-default: #FFFFFF;
-  --bg-muted: #F9FAFB;
-  --info-color: #4B5563; /* 무채색 계열로 변경 */
-  --text-main: #111827;
-  --text-muted: #6B7280;
-  --border-color: #E5E7EB;
-}
-
-.app-container {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  width: 100%;
-  background-color: var(--bg-default);
-  color: var(--text-main);
-  letter-spacing: -0.02em;
-}
-
-.top-bar {
-  height: 50px;
-  background-color: var(--primary-color);
-  color: white;
-  display: flex;
-  align-items: center;
-  padding: 0 40px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  box-sizing: border-box;
-}
-
-.top-bar-brand {
-  font-size: 1rem;
-  font-weight: 700;
-  margin-right: 48px;
-  color: white;
-}
-
-.top-bar-menu {
-  display: flex;
-  gap: 4px;
-  height: 100%;
-}
-
-.menu-item {
-  display: flex;
-  align-items: center;
-  padding: 0 16px;
-  cursor: pointer;
-  transition: all 0.2s;
-  color: rgba(255, 255, 255, 0.7);
-  font-weight: 500;
-  font-size: 0.875rem;
-  height: 100%;
-  border-bottom: 3px solid transparent;
-}
-
-.menu-item:hover {
-  color: white;
-}
-
-.menu-item.active {
-  color: white;
-  border-bottom: 3px solid white;
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-.main-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  height: calc(100vh - 50px);
-  overflow: hidden; /* 전체 페이지 스크롤 방지 */
-  padding: 0; /* 패딩은 내부 요소에서 관리 */
-}
-
-.content-header {
-  padding: 32px 40px 16px 40px;
-  margin-bottom: 0;
-  border-bottom: 1px solid var(--border-color);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: var(--bg-default);
-  flex-shrink: 0;
-}
-
-.table-container {
-  flex: 1;
-  overflow: auto;
-  padding: 0 40px 40px 40px;
-}
-
-.content-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--text-main);
-}
-
-/* Common Table Styles */
-.data-table {
-  width: 100%;
-  border-collapse: separate; /* sticky border 유지를 위해 separate 사용 */
-  border-spacing: 0;
-  font-size: 0.875rem;
-}
-
-.data-table th, .data-table td {
-  padding: 14px 12px;
-  text-align: left;
-  border-bottom: 1px solid var(--border-color);
-  white-space: nowrap;
-}
-
-.data-table th {
-  font-weight: 600;
-  color: var(--text-muted);
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  background-color: #F8FAFC; /* 헤더 전용 배경색 */
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  border-bottom: 2px solid var(--border-color);
-}
-
-.data-table tr:hover {
-  background-color: var(--bg-muted);
-}
-
-/* Buttons */
-.btn {
-  padding: 8px 16px;
-  border-radius: 4px;
-  cursor: pointer;
-  border: 1px solid transparent;
-  font-weight: 600;
-  font-size: 0.875rem;
-  transition: all 0.2s;
-}
-
-.btn-primary {
-  background-color: var(--primary-color);
-  color: white;
-}
-
-.btn-primary:hover {
-  background-color: var(--primary-hover);
-}
-
-.btn-outline {
-  background-color: transparent;
-  border: 1px solid var(--border-color);
-  color: var(--text-main);
-}
-
-.btn-outline:hover {
-  background-color: var(--bg-muted);
-}
-
-/* Dashboard Stats - Border based */
-.dashboard-stats {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 0;
-  margin-bottom: 48px;
-  border-top: 1px solid var(--border-color);
-  border-bottom: 1px solid var(--border-color);
-}
-
-.stat-card {
-  padding: 24px;
-  display: flex;
-  flex-direction: column;
-  border-right: 1px solid var(--border-color);
-}
-
-.stat-card:last-child {
-  border-right: none;
-}
-
-.stat-label {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--text-muted);
-  margin-bottom: 12px;
-}
-
-.stat-value {
-  font-size: 2rem;
-  font-weight: 700;
-  color: var(--primary-color);
-}
-
-/* Modal Styles */
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-  padding: 20px;
-}
-
-.modal-content {
-  background-color: var(--bg-default);
-  width: 100%;
-  max-width: 800px;
-  border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  max-height: 90vh;
-}
-
-.modal-header {
-  background-color: var(--primary-color);
-  color: white;
-  padding: 16px 24px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.modal-close-btn {
-  background: none;
-  border: none;
-  color: white;
-  font-size: 1.5rem;
-  line-height: 1;
-  cursor: pointer;
-  padding: 4px;
-  opacity: 0.8;
-  transition: opacity 0.2s;
-}
-
-.modal-close-btn:hover {
-  opacity: 1;
-}
-
-.modal-body {
-  padding: 24px;
-  overflow-y: auto;
-  flex: 1;
-}
-
-.detail-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px 24px;
-}
-
-.detail-item {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.detail-item.full-width {
-  grid-column: 1 / -1;
-}
-
-.detail-item label {
-  font-size: 0.8125rem;
-  font-weight: 600;
-  color: var(--text-main);
-}
-
-.detail-value {
-  padding: 10px 12px;
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  font-size: 0.875rem;
-  color: var(--text-muted);
-  background-color: var(--bg-default);
-  min-height: 20px;
-}
-
-.modal-footer {
-  padding: 16px 24px;
-  border-top: 1px solid var(--border-color);
-  display: flex;
-  justify-content: flex-end;
-  background-color: var(--bg-muted);
-}
-

backup_temp/src/App.tsx

@@ -1,51 +0,0 @@
-import { useState } from 'react'
-import './App.css'
-import AssetManagementView from './components/AssetManagementView'
-import HardwareManagementView from './components/HardwareManagementView'
-
-function App() {
-  const [activeMenu, setActiveMenu] = useState('assets')
-
-  const renderContent = () => {
-    switch (activeMenu) {
-      case 'assets':
-        return <AssetManagementView />
-      case 'hardware':
-        return <HardwareManagementView />
-      default:
-        return <AssetManagementView />
-    }
-  }
-
-  return (
-    <div className="app-container">
-      <header className="top-bar">
-        <div className="top-bar-brand">
-          ITAM System
-        </div>
-        <nav className="top-bar-menu">
-          <div 
-            className={`menu-item ${activeMenu === 'assets' ? 'active' : ''}`}
-            onClick={() => setActiveMenu('assets')}
-          >
-            전산자산관리대장
-          </div>
-          <div 
-            className={`menu-item ${activeMenu === 'hardware' ? 'active' : ''}`}
-            onClick={() => setActiveMenu('hardware')}
-          >
-            H/W 사양 정보
-          </div>
-          <div className="menu-item">S/W 설치 현황</div>
-          <div className="menu-item">라이선스 관리</div>
-          <div className="menu-item">실물 자산 관리</div>
-        </nav>
-      </header>
-      <main className="main-content">
-        {renderContent()}
-      </main>
-    </div>
-  )
-}
-
-export default App

backup_temp/src/components/AssetManagementView.tsx

@@ -1,168 +0,0 @@
-import { useState } from 'react'
-import { idcServers, idcStorages, IdcServer } from '../data/idcData'
-import ServerDetailModal from './ServerDetailModal'
-
-const AssetManagementView = () => {
-  const [viewMode, setViewMode] = useState<'server' | 'storage'>('server')
-  const [selectedServer, setSelectedServer] = useState<IdcServer | null>(null)
-
-  return (
-    <div className="asset-management" style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-      <div className="content-header">
-        <div className="content-title">전산자산관리대장 (IDC)</div>
-        <div style={{ display: 'flex', gap: '12px' }}>
-          <button 
-            className={`btn ${viewMode === 'server' ? 'btn-primary' : 'btn-outline'}`}
-            onClick={() => setViewMode('server')}
-          >
-            서버 목록
-          </button>
-          <button 
-            className={`btn ${viewMode === 'storage' ? 'btn-primary' : 'btn-outline'}`}
-            onClick={() => setViewMode('storage')}
-          >
-            스토리지 목록
-          </button>
-        </div>
-      </div>
-
-      <div className="table-container">
-        <div style={{ padding: '24px 0 16px 0' }}>
-          <h3 style={{ fontSize: '1.125rem', fontWeight: 600, color: 'var(--primary-color)', margin: 0 }}>
-            {viewMode === 'server' ? 'IDC 서버 상세 정보' : 'IDC 스토리지 상세 정보'}
-          </h3>
-        </div>
-        
-        {viewMode === 'server' ? (
-          <table className="data-table">
-            <thead>
-              <tr>
-                <th>회사</th>
-                <th>서버번호</th>
-                <th>구분</th>
-                <th>설치위치</th>
-                <th>관리자</th>
-                <th>IP 주소</th>
-                <th>접속 정보</th>
-                <th>H/W 사양</th>
-                <th>OS</th>
-                <th>구매일</th>
-              </tr>
-            </thead>
-            <tbody>
-              {idcServers.map((server) => (
-                <tr key={server.serverNo} onClick={() => setSelectedServer(server)} style={{ cursor: 'pointer' }}>
-                  <td style={{ fontWeight: 600 }}>{server.company}</td>
-                  <td style={{ color: 'var(--primary-color)', fontWeight: 500 }}>{server.serverNo}</td>
-                  <td>
-                    <div>{server.category}</div>
-                    {server.remarks && <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{server.remarks}</div>}
-                  </td>
-                  <td>{server.location}</td>
-                  <td>
-                    <div style={{ fontWeight: 500 }}>{server.managerPrimary ? `정: ${server.managerPrimary}` : '정: -'}</div>
-                    <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{server.managerSecondary ? `부: ${server.managerSecondary}` : '부: -'}</div>
-                  </td>
-                  <td>
-                    <div>{server.ip1}</div>
-                    {server.ip2 && <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{server.ip2}</div>}
-                  </td>
-                  <td>
-                    {server.remoteAccess.map((access, idx) => (
-                      <div key={idx} style={{ 
-                        marginBottom: idx < server.remoteAccess.length - 1 ? '8px' : 0,
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: '2px'
-                      }}>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
-                          <span style={{ fontSize: '0.7rem', backgroundColor: '#f3f4f6', padding: '1px 4px', borderRadius: '2px', color: 'var(--text-muted)', fontWeight: 600 }}>{access.tool}</span>
-                          <span style={{ fontSize: '0.8125rem', fontWeight: 500 }}>{access.id}</span>
-                        </div>
-                        <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)', paddingLeft: '4px', borderLeft: '1px solid var(--border-color)', marginLeft: '4px' }}>
-                          PW: <span style={{ color: 'var(--text-main)' }}>{access.pw}</span>
-                        </div>
-                      </div>
-                    ))}
-                  </td>
-                  <td style={{ fontSize: '0.8125rem' }}>
-                    <div style={{ fontWeight: 500 }}>{server.model}</div>
-                    <div style={{ color: 'var(--text-muted)' }}>{server.cpu} / {server.ram}</div>
-                    <div style={{ color: 'var(--text-muted)' }}>{server.storage.join(' + ')}</div>
-                  </td>
-                  <td style={{ fontSize: '0.8125rem' }}>{server.os}</td>
-                  <td style={{ fontSize: '0.8125rem' }}>{server.purchaseDate}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        ) : (
-          <table className="data-table">
-            <thead>
-              <tr>
-                <th>회사</th>
-                <th>서버번호</th>
-                <th>구분</th>
-                <th>설치위치</th>
-                <th>관리자</th>
-                <th>IP 주소</th>
-                <th>접속 정보</th>
-                <th>모델명</th>
-                <th>용량</th>
-                <th>구매일</th>
-              </tr>
-            </thead>
-            <tbody>
-              {idcStorages.map((storage) => (
-                <tr key={storage.serverNo}>
-                  <td style={{ fontWeight: 600 }}>{storage.company}</td>
-                  <td style={{ color: 'var(--primary-color)', fontWeight: 500 }}>{storage.serverNo}</td>
-                  <td>
-                    <div>{storage.category}</div>
-                    {storage.remarks && <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{storage.remarks}</div>}
-                  </td>
-                  <td>{storage.location}</td>
-                  <td>
-                    <span style={{ fontWeight: 500 }}>정: {storage.managerPrimary}</span>
-                    <span style={{ fontSize: '0.75rem', color: 'var(--text-muted)', marginLeft: '8px' }}>부: {storage.managerSecondary}</span>
-                  </td>
-                  <td>{storage.ip}</td>
-                  <td>
-                    {storage.remoteAccess.map((access, idx) => (
-                      <div key={idx} style={{ 
-                        marginBottom: idx < storage.remoteAccess.length - 1 ? '8px' : 0,
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: '2px'
-                      }}>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
-                          <span style={{ fontSize: '0.7rem', backgroundColor: '#f3f4f6', padding: '1px 4px', borderRadius: '2px', color: 'var(--text-muted)', fontWeight: 600 }}>{access.tool}</span>
-                          <span style={{ fontSize: '0.8125rem', fontWeight: 500 }}>{access.id}</span>
-                        </div>
-                        <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)', paddingLeft: '4px', borderLeft: '1px solid var(--border-color)', marginLeft: '4px' }}>
-                          PW: <span style={{ color: 'var(--text-main)' }}>{access.pw}</span>
-                        </div>
-                      </div>
-                    ))}
-                  </td>
-                  <td>{storage.model}</td>
-                  <td style={{ fontWeight: 600 }}>{storage.capacity}</td>
-                  <td>{storage.purchaseDate}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        )}
-      </div>
-
-      {selectedServer && (
-        <ServerDetailModal 
-          server={selectedServer} 
-          onClose={() => setSelectedServer(null)} 
-        />
-      )}
-    </div>
-  )
-}
-
-export default AssetManagementView

backup_temp/src/components/DashboardView.tsx

@@ -1,51 +0,0 @@
-import { mockCategories } from '../data/mockData'
-
-const DashboardView = () => {
-  return (
-    <div>
-      <div className="content-header">
-        <div className="content-title">대시보드</div>
-      </div>
-      
-      <div className="dashboard-stats">
-        <div className="stat-card">
-          <div className="stat-label">전체 자산</div>
-          <div className="stat-value">8개</div>
-        </div>
-        {mockCategories.map(cat => (
-          <div key={cat.id} className="stat-card">
-            <div className="stat-label">{cat.name}</div>
-            <div className="stat-value">{cat.count}개</div>
-          </div>
-        ))}
-      </div>
-
-      <div className="card">
-        <h3>최근 변경 내역</h3>
-        <table className="data-table">
-          <thead>
-            <tr>
-              <th>날짜</th>
-              <th>내용</th>
-              <th>사용자</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>2023-04-11</td>
-              <td>PC 신규 등록</td>
-              <td>이관형</td>
-            </tr>
-            <tr>
-              <td>2023-04-10</td>
-              <td>모니터 부서 할당 변경</td>
-              <td>관리자</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  )
-}
-
-export default DashboardView

backup_temp/src/components/HardwareManagementView.tsx

@@ -1,87 +0,0 @@
-import { useState } from 'react'
-import { mockHardwareSpecs, HardwareSpec } from '../data/mockData'
-
-const SpecModal = ({ spec, onClose }: { spec: HardwareSpec, onClose: () => void }) => {
-  return (
-    <div style={{
-      position: 'fixed', top: 0, left: 0, width: '100%', height: '100%',
-      backgroundColor: 'rgba(0,0,0,0.5)', display: 'flex', justifyContent: 'center', alignItems: 'center',
-      zIndex: 1000
-    }}>
-      <div className="card" style={{ width: '600px', maxWidth: '90%' }}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '20px' }}>
-          <h2>상세 사양 정보</h2>
-          <button className="btn" onClick={onClose}>&times;</button>
-        </div>
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: '10px' }}>
-          <strong>PC명:</strong> <span>{spec.pcName}</span>
-          <strong>사용자:</strong> <span>{spec.userName}</span>
-          <strong>부서:</strong> <span>{spec.department}</span>
-          <strong>OS:</strong> <span>{spec.os}</span>
-          <strong>CPU:</strong> <span>{spec.cpu}</span>
-          <strong>Memory:</strong> <span>{spec.memory}</span>
-          <strong>Disk:</strong> <span>{spec.disk}</span>
-          <strong>MAC:</strong> <span>{spec.macAddress}</span>
-          <strong>IP:</strong> <span>{spec.ipAddress}</span>
-          <strong>Graphic:</strong> <span>{spec.graphicCard}</span>
-        </div>
-        <div style={{ marginTop: '20px', textAlign: 'right' }}>
-          <button className="btn btn-primary" onClick={onClose}>닫기</button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-const HardwareManagementView = () => {
-  const [selectedSpec, setSelectedSpec] = useState<HardwareSpec | null>(null)
-
-  return (
-    <div>
-      <div className="content-header">
-        <div className="content-title">H/W 사양 정보</div>
-      </div>
-
-      <table className="data-table">
-        <thead>
-          <tr>
-            <th>PC명</th>
-            <th>부서</th>
-            <th>사용자</th>
-            <th>OS</th>
-            <th>CPU</th>
-            <th>IP주소</th>
-            <th>상세</th>
-          </tr>
-        </thead>
-        <tbody>
-          {mockHardwareSpecs.map(spec => (
-            <tr key={spec.id}>
-              <td>{spec.pcName}</td>
-              <td>{spec.department}</td>
-              <td>{spec.userName}</td>
-              <td>{spec.os.split(' ')[2]}</td>
-              <td title={spec.cpu}>{spec.cpu.split('@')[0]}</td>
-              <td>{spec.ipAddress}</td>
-              <td>
-                <button 
-                  className="btn btn-primary" 
-                  style={{ padding: '4px 8px', fontSize: '0.8rem' }}
-                  onClick={() => setSelectedSpec(spec)}
-                >
-                  보기
-                </button>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-
-      {selectedSpec && (
-        <SpecModal spec={selectedSpec} onClose={() => setSelectedSpec(null)} />
-      )}
-    </div>
-  )
-}
-
-export default HardwareManagementView

backup_temp/src/components/ServerDetailModal.tsx

@@ -1,144 +0,0 @@
-import React, { useEffect } from 'react';
-import { IdcServer } from '../data/idcData';
-
-interface ServerDetailModalProps {
-  server: IdcServer;
-  onClose: () => void;
-}
-
-const ServerDetailModal: React.FC<ServerDetailModalProps> = ({ server, onClose }) => {
-  // ESC 키로 모달 닫기
-  useEffect(() => {
-    const handleEsc = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onClose();
-      }
-    };
-    window.addEventListener('keydown', handleEsc);
-    return () => {
-      window.removeEventListener('keydown', handleEsc);
-    };
-  }, [onClose]);
-
-  return (
-    <div className="modal-overlay" onClick={onClose}>
-      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
-        <div className="modal-header">
-          <h2 style={{ margin: 0, fontSize: '1.125rem', fontWeight: 600 }}>{server.category} ({server.serverNo})</h2>
-          <button className="modal-close-btn" onClick={onClose} aria-label="Close modal">&times;</button>
-        </div>
-        
-        <div className="modal-body">
-          <div className="detail-grid">
-            {/* Row 1 */}
-            <div className="detail-item">
-              <label>회사 구분</label>
-              <div className="detail-value">{server.company}</div>
-            </div>
-            <div className="detail-item">
-              <label>서버 번호</label>
-              <div className="detail-value" style={{ color: 'var(--primary-color)', fontWeight: 600 }}>{server.serverNo}</div>
-            </div>
-
-            {/* Row 2 */}
-            <div className="detail-item">
-              <label>자산명(용도)</label>
-              <div className="detail-value">{server.category}</div>
-            </div>
-            <div className="detail-item">
-              <label>설치 위치</label>
-              <div className="detail-value">{server.location}</div>
-            </div>
-
-            {/* Row 3: 관리자 추가 */}
-            <div className="detail-item full-width">
-              <label>관리 담당자</label>
-              <div className="detail-value">
-                <span style={{ fontWeight: 600, color: 'var(--text-main)' }}>정: {server.managerPrimary}</span>
-                <span style={{ marginLeft: '16px', color: 'var(--text-muted)' }}>부: {server.managerSecondary}</span>
-              </div>
-            </div>
-
-            {/* Row 4 */}
-            <div className="detail-item">
-              <label>IP 주소 1</label>
-              <div className="detail-value">{server.ip1 || '-'}</div>
-            </div>
-            <div className="detail-item">
-              <label>IP 주소 2</label>
-              <div className="detail-value">{server.ip2 || '-'}</div>
-            </div>
-
-            {/* Row 5 */}
-            <div className="detail-item full-width">
-              <label>원격 접속 정보</label>
-              <div className="detail-value">
-                {server.remoteAccess.length > 0 ? (
-                  <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
-                    {server.remoteAccess.map((access, idx) => (
-                      <div key={idx} style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '4px 8px', backgroundColor: 'var(--bg-muted)', borderRadius: '4px', border: '1px solid var(--border-color)' }}>
-                        <span style={{ fontSize: '0.75rem', fontWeight: 600, color: 'var(--text-muted)' }}>{access.tool}</span>
-                        <span style={{ fontWeight: 500 }}>{access.id}</span>
-                        <span style={{ color: 'var(--border-color)' }}>|</span>
-                        <span>PW: <span style={{ color: 'var(--text-main)' }}>{access.pw}</span></span>
-                      </div>
-                    ))}
-                  </div>
-                ) : '-'}
-              </div>
-            </div>
-
-            {/* Row 6 */}
-            <div className="detail-item">
-              <label>제조사 및 모델명</label>
-              <div className="detail-value">{server.model || '-'}</div>
-            </div>
-            <div className="detail-item">
-              <label>OS</label>
-              <div className="detail-value">{server.os || '-'}</div>
-            </div>
-
-            {/* Row 7 */}
-            <div className="detail-item">
-              <label>CPU</label>
-              <div className="detail-value">{server.cpu || '-'}</div>
-            </div>
-            <div className="detail-item">
-              <label>RAM</label>
-              <div className="detail-value">{server.ram || '-'}</div>
-            </div>
-
-            {/* Row 8 */}
-            <div className="detail-item full-width">
-              <label>Storage (디스크 구성)</label>
-              <div className="detail-value">{server.storage.length > 0 ? server.storage.join(' + ') : '-'}</div>
-            </div>
-
-            {/* Row 9 */}
-            <div className="detail-item">
-              <label>구매일자</label>
-              <div className="detail-value">{server.purchaseDate || '-'}</div>
-            </div>
-            <div className="detail-item">
-              <label>모니터링 여부</label>
-              <div className="detail-value">{server.monitoring || '-'}</div>
-            </div>
-
-            {/* Row 10 */}
-            <div className="detail-item full-width">
-              <label>비고 및 특이사항</label>
-              <div className="detail-value" style={{ minHeight: '40px' }}>{server.remarks || '-'}</div>
-            </div>
-          </div>
-        </div>
-
-        <div className="modal-footer">
-          <button className="btn btn-outline" onClick={onClose} style={{ marginRight: '8px' }}>닫기</button>
-          <button className="btn btn-primary" onClick={onClose}>수정(저장)</button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ServerDetailModal;

backup_temp/src/data/idcData.ts

@@ -1,608 +0,0 @@
-export interface RemoteAccess {
-  tool: string;
-  ip?: string;
-  id: string;
-  pw: string;
-}
-
-export interface IdcServer {
-  company: string;
-  serverNo: string;
-  category: string;
-  remarks: string;
-  location: string;
-  managerPrimary: string;
-  managerSecondary: string;
-  ip1: string;
-  ip2: string;
-  remoteAccess: RemoteAccess[];
-  monitoring: string;
-  serverIdMatch: string;
-  model: string;
-  os: string;
-  cpu: string;
-  ram: string;
-  storage: string[];
-  purchaseDate: string;
-}
-
-export interface IdcStorage {
-  company: string;
-  serverNo: string;
-  category: string;
-  remarks: string;
-  location: string;
-  managerPrimary: string;
-  managerSecondary: string;
-  ip: string;
-  managementIp?: string;
-  remoteAccess: RemoteAccess[];
-  model: string;
-  capacity: string;
-  purchaseDate: string;
-}
-
-export const idcServers: IdcServer[] = [
-  {
-    company: "한맥",
-    serverNo: "hm-idc-001",
-    category: "한맥 인트라넷",
-    remarks: "",
-    location: "서관 204번",
-    managerPrimary: "김철수",
-    managerSecondary: "홍길동",
-    ip1: "211.206.127.70",
-    ip2: "192.168.10.5",
-    remoteAccess: [
-      { tool: "원격데스크탑", id: "administrator", pw: "samanerp1!" },
-      { tool: "Remote Util", id: "211.206.127.70", pw: "1234아이티!" }
-    ],
-    monitoring: "win exp, raid X",
-    serverIdMatch: "srv07d330084",
-    model: "HPE ProLiant DL360 Gen10",
-    os: "Windows Server 2016",
-    cpu: "intel xeon silver4110 CPU @2.10GHz",
-    ram: "32GB",
-    storage: ["280GB", "2.7TB"],
-    purchaseDate: "2020.12.10"
-  },
-  {
-    company: "한맥",
-    serverNo: "hm-idc-002",
-    category: "한맥 인트라넷 예비",
-    remarks: "단가, 입사자지원 서버 (스마트 건설 용도 구매)",
-    location: "서관 205번",
-    managerPrimary: "김철수",
-    managerSecondary: "홍길동",
-    ip1: "211.206.127.78",
-    ip2: "192.168.10.13",
-    remoteAccess: [
-      { tool: "원격데스크탑", id: "administrator", pw: "Hanmac2141!" }
-    ],
-    monitoring: "win exp, raid X",
-    serverIdMatch: "srcff5294c84",
-    model: "HPE ProLiant DL360 Gen10",
-    os: "Windows Server 2019",
-    cpu: "intel xeon silver4214R CPU @2.40GHz",
-    ram: "32GB",
-    storage: ["280GB", "2.7TB"],
-    purchaseDate: ""
-  },
-  {
-    company: "삼안",
-    serverNo: "sa-idc-001",
-    category: "삼안 인트라넷",
-    remarks: "",
-    location: "서관 204번",
-    managerPrimary: "김철수",
-    managerSecondary: "홍길동",
-    ip1: "118.220.172.237",
-    ip2: "erp.samaneng.com",
-    remoteAccess: [
-      { tool: "원격데스크탑", id: "administrator", pw: "samanerp1!" },
-      { tool: "Remote Util", id: "118.220.172.237", pw: "1234아이티!" }
-    ],
-    monitoring: "O",
-    serverIdMatch: "newSmintranet",
-    model: "HPE ProLiant DL360 Gen10",
-    os: "Windows Server 2016",
-    cpu: "intel xeon silver4214R CPU @2.40GHz",
-    ram: "32GB",
-    storage: ["280GB", "3.27TB"],
-    purchaseDate: "2019.12.20"
-  },
-  {
-    company: "삼안",
-    serverNo: "sa-idc-002",
-    category: "삼안 인트라넷 예비",
-    remarks: "",
-    location: "서관 204번",
-    managerPrimary: "김철수",
-    managerSecondary: "홍길동",
-    ip1: "118.220.172.249",
-    ip2: "",
-    remoteAccess: [
-      { tool: "원격데스크탑", id: "administrator", pw: "samanerp1!" },
-      { tool: "Remote Util", id: "678-605-383-130", pw: "1234아이티!" }
-    ],
-    monitoring: "설치 X",
-    serverIdMatch: "INTRANET",
-    model: "HPE ProLiant DL360 GEN9",
-    os: "Windows Server 2008 R2",
-    cpu: "Intel(R) Xeon(R) CPU E5-2630 v3 @ 2.40GHz",
-    ram: "32GB",
-    storage: ["279GB", "2.72TB"],
-    purchaseDate: ""
-  },
-  {
-    company: "삼안",
-    serverNo: "sa-idc-003",
-    category: "SATIS 01",
-    remarks: "구 SATIS 서버, 세금계산서 발행(회계)",
-    location: "서관 204번",
-    managerPrimary: "김철수",
-    managerSecondary: "홍길동",
-    ip1: "118.220.172.228",
-    ip2: "",
-    remoteAccess: [
-      { tool: "원격데스크탑", id: "administrator", pw: "satissg11707808" }
-    ],
-    monitoring: "설치 X",
-    serverIdMatch: "satis01",
-    model: "HPE ProLiant DL380p GEN8",
-    os: "Windows Server 2008 R2",
-    cpu: "Intel(R) Xeon(R) CPU E5-2643 0 @ 3.30GHz",
-    ram: "20GB",
-    storage: ["100GB", "458GB"],
-    purchaseDate: ""
-  },
-  {
-    company: "삼안",
-    serverNo: "sa-idc-004",
-    category: "SATIS 02",
-    remarks: "SATIS 리뉴얼 버전 (ERP 서버)",
-    location: "서관 204번",
-    managerPrimary: "김철수",
-    managerSecondary: "홍길동",
-    ip1: "118.220.172.229",
-    ip2: "",
-    remoteAccess: [
-      { tool: "원격데스크탑", id: "administrator", pw: "satissg11707808" }
-    ],
-    monitoring: "설치 X",
-    serverIdMatch: "satis02",
-    model: "HPE ProLiant DL380p GEN8",
-    os: "Windows Server 2008 R2",
-    cpu: "Intel(R) Xeon(R) CPU E5-2643 0 @ 3.30GHz",
-    ram: "20GB",
-    storage: ["100GB", "458GB", "18.1TB"],
-    purchaseDate: ""
-  },
-  {
-    company: "삼안",
-    serverNo: "sa-idc-005",
-    category: "웹 서버",
-    remarks: "남양주 테스트 서버 (도메인 관리 기능 제거 2026.03.11)",
-    location: "서관 204번",
-    managerPrimary: "김철수",
-    managerSecondary: "홍길동",
-    ip1: "samanweb.cafe24.com",
-    ip2: "118.220.172.195",
-    remoteAccess: [
-      { tool: "원격데스크탑", id: "administrator", pw: "saman+2013+web" }
-    ],
-    monitoring: "win exp, 포트 안열림",
-    serverIdMatch: "www",
-    model: "HPE ProLiant DL380p GEN8",
-    os: "Windwos Server 2012",
-    cpu: "Intel(R) Xeon(R) CPU E5-2609 0 @ 2.40GHz",
-    ram: "16GB",
-    storage: ["100GB", "230GB", "230GB"],
-    purchaseDate: ""
-  },
-  {
-    company: "삼안",
-    serverNo: "sa-idc-006",
-    category: "PQ DB 서버",
-    remarks: "",
-    location: "서관 204번",
-    managerPrimary: "김철수",
-    managerSecondary: "홍길동",
-    ip1: "118.220.172.231",
-    ip2: "",
-    remoteAccess: [
-      { tool: "원격데스크탑", id: "administrator", pw: "7013ddj10235!" }
-    ],
-    monitoring: "O",
-    serverIdMatch: "src5dd67f2ed",
-    model: "HPE ProLiant DL360 Gen10",
-    os: "Windows Server 2019",
-    cpu: "intel xeon silver4210R CPU @2.40GHz",
-    ram: "32GB",
-    storage: ["278GB", "2.18TB"],
-    purchaseDate: "2024.12.16"
-  },
-  {
-    company: "삼안",
-    serverNo: "sa-idc-007",
-    category: "Oracle DB 서버",
-    remarks: "",
-    location: "서관 202번",
-    managerPrimary: "김철수",
-    managerSecondary: "홍길동",
-    ip1: "118.220.172.225",
-    ip2: "",
-    remoteAccess: [
-      { tool: "원격데스크탑", id: "administrator", pw: "7013ddj10235!" }
-    ],
-    monitoring: "win exp, raid X",
-    serverIdMatch: "SAMAN-DB",
-    model: "HPE ProLiant DL380 GEN9",
-    os: "Windows Server 2012",
-    cpu: "Intel(R) Xeon(R) CPU E5-2650 v4 @ 2.20GHz",
-    ram: "64GB",
-    storage: ["558GB", "1.09TB", "1.09TB"],
-    purchaseDate: ""
-  },
-  {
-    company: "삼안",
-    serverNo: "sa-idc-008",
-    category: "안전관리",
-    remarks: "삼안 개발서버2 - AI, SSL, 장헌TBM, 노드",
-    location: "서관 202번",
-    managerPrimary: "김철수",
-    managerSecondary: "홍길동",
-    ip1: "1.234.37.171",
-    ip2: "",
-    remoteAccess: [
-      { tool: "원격데스크탑", id: "administrator", pw: "samanerp1!" }
-    ],
-    monitoring: "연결 X",
-    serverIdMatch: "",
-    model: "HPE ProLiant DL380 GEN10",
-    os: "Windwos Server 2022",
-    cpu: "Intel Xeon(R) Silver 4210R CPU @ 2.40GHz",
-    ram: "128GB",
-    storage: ["278GB", "3.27TB"],
-    purchaseDate: "2025.04.10"
-  },
-  {
-    company: "삼안",
-    serverNo: "sa-idc-009",
-    category: "가족사 공통메뉴",
-    remarks: "삼안 개발서버1 - QNA, 급여명세서",
-    location: "서관 202번",
-    managerPrimary: "김철수",
-    managerSecondary: "홍길동",
-    ip1: "118.220.172.233",
-    ip2: "",
-    remoteAccess: [
-      { tool: "원격데스크탑", id: "administrator", pw: "samanerp1!" }
-    ],
-    monitoring: "O",
-    serverIdMatch: "srcc9ac928ee",
-    model: "HPE ProLiant DL380 GEN10",
-    os: "Windwos Server 2022",
-    cpu: "Intel Xeon(R) Silver 4210R CPU @ 2.40GHz",
-    ram: "128GB",
-    storage: ["278GB", "3.27TB"],
-    purchaseDate: "2025.04.10"
-  },
-  {
-    company: "한라",
-    serverNo: "hl-idc-001",
-    category: "한라 인트라넷",
-    remarks: "인트라넷,안전, 운영, MISO 서버로 운영 중(win 2008)",
-    location: "동관 54번",
-    managerPrimary: "김철수",
-    managerSecondary: "홍길동",
-    ip1: "1.234.37.143",
-    ip2: "",
-    remoteAccess: [
-      { tool: "Remote Util", id: "1.234.37.143", pw: "1234dkdlxl!" }
-    ],
-    monitoring: "설치 X",
-    serverIdMatch: "",
-    model: "HPE ProLiant DL360 GEN9",
-    os: "Windows Server 2008 R2",
-    cpu: "Intel(R) Xeon(R) CPU E5-2603 v4 @ 1.70GHz",
-    ram: "8GB",
-    storage: ["299GB", "631GB"],
-    purchaseDate: ""
-  },
-  {
-    company: "한라",
-    serverNo: "hl-idc-002",
-    category: "안전전산화 서버 (디자인팀 웹)",
-    remarks: "인트라넷 서버 다운 시 백업용 대기",
-    location: "동관 54번",
-    managerPrimary: "김철수",
-    managerSecondary: "홍길동",
-    ip1: "1.234.37.144",
-    ip2: "192.168.20.49",
-    remoteAccess: [
-      { tool: "Remote Util", id: "1.234.37.144", pw: "1234dkdlxl!" }
-    ],
-    monitoring: "O",
-    serverIdMatch: "",
-    model: "HPE ProLiant DL360 GEN9",
-    os: "Windows Server 2012",
-    cpu: "Intel(R) Xeon(R) CPU E5-2603 v4 @ 1.70GHz",
-    ram: "8GB",
-    storage: ["299GB", "631GB"],
-    purchaseDate: ""
-  },
-  {
-    company: "한라",
-    serverNo: "hl-idc-003",
-    category: "개발서버2",
-    remarks: "PTC 연구비로 구매한 예비서버2",
-    location: "동관 53번",
-    managerPrimary: "김철수",
-    managerSecondary: "홍길동",
-    ip1: "192.168.20.171",
-    ip2: "1.234.37.171",
-    remoteAccess: [
-      { tool: "Remote Util", id: "1.234.37.171", pw: "1234dkdlxl!" }
-    ],
-    monitoring: "O",
-    serverIdMatch: "",
-    model: "HPE ProLiant DL380 Gen10",
-    os: "Windows Server 2019 Standard",
-    cpu: "Intel(R) Xeon(R) Silver 4214R CPU @ 2.40GHz",
-    ram: "32GB",
-    storage: ["280GB", "1TB"],
-    purchaseDate: "2022.09.21"
-  },
-  {
-    company: "장헌",
-    serverNo: "jh-idc-001",
-    category: "장헌인트라넷",
-    remarks: "BEPs",
-    location: "서관 205번",
-    managerPrimary: "김철수",
-    managerSecondary: "홍길동",
-    ip1: "211.206.127.71",
-    ip2: "192.168.10.6",
-    remoteAccess: [
-      { tool: "Remote Util", id: "211.206.127.71", pw: "1234dkdlxl!" },
-      { tool: "원격데스크탑", id: "administrator", pw: "Hanmac2141!%" }
-    ],
-    monitoring: "잠금 걸려있음",
-    serverIdMatch: "src775d3e5df",
-    model: "HPE ProLiant DL380 GEN10",
-    os: "Windows Server 2019",
-    cpu: "Intel(R) Xeon(R) Silver 4214R CPU @ 2.40GHz",
-    ram: "32GB",
-    storage: ["280GB", "1TB"],
-    purchaseDate: "2022.09.21"
-  },
-  {
-    company: "장헌",
-    serverNo: "jh-idc-002",
-    category: "장헌 인트라넷 예비",
-    remarks: "",
-    location: "동관 53번",
-    managerPrimary: "김철수",
-    managerSecondary: "홍길동",
-    ip1: "1.234.37.170",
-    ip2: "192.168.20.170",
-    remoteAccess: [
-      { tool: "Remote Util", id: "1.234.37.170", pw: "1234dkdlxl!" },
-      { tool: "원격데스크탑", id: "Administrator", pw: "Hanmac2141!" }
-    ],
-    monitoring: "원격 X, O",
-    serverIdMatch: "",
-    model: "HPE ProLiant DL360 Gen10",
-    os: "Windows Server 2019",
-    cpu: "Intel(R) Xeon(R) Silver 4214R CPU @ 2.40GHz",
-    ram: "32GB",
-    storage: ["280GB", "1TB"],
-    purchaseDate: "2022.04.01"
-  },
-  {
-    company: "장헌",
-    serverNo: "jh-idc-003",
-    category: "인트라넷(구)",
-    remarks: "현재는 GIT 백업 으로 사용",
-    location: "서관 205번",
-    managerPrimary: "김철수",
-    managerSecondary: "홍길동",
-    ip1: "211.206.127.110",
-    ip2: "192.168.10.40",
-    remoteAccess: [
-      { tool: "Remote Util", id: "211.206.127.110", pw: "1234dkdlxl!" },
-      { tool: "원격데스크탑", id: "User", pw: "Hanmac2141!" }
-    ],
-    monitoring: "",
-    serverIdMatch: "",
-    model: "",
-    os: "Windows Server 2019",
-    cpu: "Intel(R) Xeon(R) Silver 4214R CPU @ 2.40GHz",
-    ram: "",
-    storage: [],
-    purchaseDate: ""
-  },
-  {
-    company: "(주)장헌",
-    serverNo: "jh-idc-004",
-    category: "(주) 장헌 인트라넷",
-    remarks: "2025.12.23 IDC 이전 설치",
-    location: "서관 205번",
-    managerPrimary: "김철수",
-    managerSecondary: "홍길동",
-    ip1: "211.206.127.76",
-    ip2: "",
-    remoteAccess: [
-      { tool: "원격데스크탑", id: "User", pw: "Hanmac2141!%" }
-    ],
-    monitoring: "win exp, raid X",
-    serverIdMatch: "DESKTOP-5IL75B7",
-    model: "",
-    os: "Windows 10",
-    cpu: "12th Gen Intel(R) Core(TM) i7-12700F",
-    ram: "32GB",
-    storage: ["465GB", "1.81TB"],
-    purchaseDate: ""
-  },
-  {
-    company: "PTC",
-    serverNo: "ptc-idc-001",
-    category: "PTC인트라넷",
-    remarks: "2024.05.22 인트라넷서버로 교체",
-    location: "서관 205번",
-    managerPrimary: "김철수",
-    managerSecondary: "홍길동",
-    ip1: "211.206.127.72",
-    ip2: "192.168.10.7",
-    remoteAccess: [
-      { tool: "Remote Util", id: "211.206.127.72", pw: "1234dkdlxl!" }
-    ],
-    monitoring: "설치 X",
-    serverIdMatch: "",
-    model: "SYSTEM X3650 M2",
-    os: "Windows Server 2008 R2",
-    cpu: "Intel(R) Xeon(R) CPU E5520 @ 2.27GHz",
-    ram: "16GB",
-    storage: ["556GB"],
-    purchaseDate: ""
-  },
-  {
-    company: "PTC",
-    serverNo: "ptc-idc-002",
-    category: "예비서버",
-    remarks: "PTC 인트라넷 예비서버",
-    location: "서관 204번",
-    managerPrimary: "김철수",
-    managerSecondary: "홍길동",
-    ip1: "192.168.10.8",
-    ip2: "",
-    remoteAccess: [
-      { tool: "원격데스크탑", id: "administrator", pw: "1234dkdlxl!" }
-    ],
-    monitoring: "O",
-    serverIdMatch: "",
-    model: "HPE ProLiant DL360 GEN10",
-    os: "Windows Server 2019",
-    cpu: "Intel Xeon(R) Silver 4210R CPU @ 2.40GHz",
-    ram: "32GB",
-    storage: ["278GB", "1.09TB"],
-    purchaseDate: "2022.04.01"
-  },
-  {
-    company: "PTC",
-    serverNo: "ptc-idc-003",
-    category: "DB 백업 서버",
-    remarks: "2024.05.22 변경 (데스크탑)",
-    location: "서관 205번",
-    managerPrimary: "김철수",
-    managerSecondary: "홍길동",
-    ip1: "211.206.127.74",
-    ip2: "192.168.10.9",
-    remoteAccess: [
-      { tool: "Remote Util", id: "211.206.127.74", pw: "1234dkdlxl!" }
-    ],
-    monitoring: "설치 X",
-    serverIdMatch: "",
-    model: "",
-    os: "Window 7",
-    cpu: "Intel(R) Core(TM)2 CPU 6400 @ 2.13GHz",
-    ram: "4GB",
-    storage: ["593GB", "1.23TB"],
-    purchaseDate: ""
-  },
-  {
-    company: "바론",
-    serverNo: "br-idc-001",
-    category: "인트라넷",
-    remarks: "",
-    location: "서관 205번",
-    managerPrimary: "김철수",
-    managerSecondary: "홍길동",
-    ip1: "211.206.127.75",
-    ip2: "192.168.10.10",
-    remoteAccess: [
-      { tool: "원격데스크탑", id: "administrator", pw: "Hanmac2141!%" }
-    ],
-    monitoring: "O",
-    serverIdMatch: "srcf0136042d",
-    model: "HPE ProLiant DL360 GEN10",
-    os: "Windows Server 2022",
-    cpu: "Intel Xeon(R) Silver 4210R CPU @ 2.40GHz",
-    ram: "32GB",
-    storage: ["280GB", "2.18TB"],
-    purchaseDate: "2025.04.14"
-  },
-  {
-    company: "현타",
-    serverNo: "ht-idc-001",
-    category: "인트라넷",
-    remarks: "",
-    location: "동관 53번",
-    managerPrimary: "김철수",
-    managerSecondary: "홍길동",
-    ip1: "1.234.37.172",
-    ip2: "192.168.20.172",
-    remoteAccess: [
-      { tool: "원격데스크탑", id: "administrator", pw: "Hanmac2141!" }
-    ],
-    monitoring: "O",
-    serverIdMatch: "src901e49933",
-    model: "HPE ProLiant DL380 GEN10",
-    os: "Windows Server 2019",
-    cpu: "Intel Xeon Silver 4210R CPU @ 2.40GHz",
-    ram: "32GB",
-    storage: ["280GB", "1TB"],
-    purchaseDate: "2022.09.21"
-  }
-];
-
-export const idcStorages: IdcStorage[] = [
-  {
-    company: "삼안",
-    serverNo: "sa-nas-001",
-    category: "인트라넷 백업 스토리지",
-    remarks: "",
-    location: "서관 203번",
-    managerPrimary: "김철수",
-    managerSecondary: "홍길동",
-    ip: "118.220.172.246",
-    remoteAccess: [{ tool: "원격", id: "administrator", pw: "sg11707808" }],
-    model: "Promiss R Series",
-    capacity: "36TB",
-    purchaseDate: ""
-  },
-  {
-    company: "삼안",
-    serverNo: "sa-nas-002",
-    category: "성과품 스토리지",
-    remarks: "매니지먼트 접속 확인 불가",
-    location: "서관 205번",
-    managerPrimary: "김철수",
-    managerSecondary: "홍길동",
-    ip: "118.220.172.248",
-    managementIp: "118.220.172.247",
-    remoteAccess: [{ tool: "원격", id: "administrator", pw: "sg11707808" }],
-    model: "ENC_3U_16BAY_D",
-    capacity: "23TB",
-    purchaseDate: "2019.06.03"
-  },
-  {
-    company: "삼안",
-    serverNo: "sa-nas-003",
-    category: "성과품 백업 스토리지",
-    remarks: "",
-    location: "서관 202번",
-    managerPrimary: "김철수",
-    managerSecondary: "홍길동",
-    ip: "118.220.172.241",
-    managementIp: "118.220.172.240",
-    remoteAccess: [
-      { tool: "원격", id: "administrator", pw: "saman1!" },
-      { tool: "원격", id: "admin0", pw: "Root1234" }
-    ],
-    model: "Promiss R Series",
-    capacity: "48TB",
-    purchaseDate: "2025.03.13"
-  }
-];

backup_temp/src/data/mockData.ts

@@ -1,84 +0,0 @@
-export interface Category {
-  id: string;
-  name: string;
-  count: number;
-}
-
-export interface Asset {
-  id: string;
-  categoryName: string;
-  name: string;
-  quantity: number;
-  internalCode: string;
-  serialNumber: string;
-  department: string;
-  user: string;
-  acquisitionDate: string;
-  status: string;
-  location: string;
-}
-
-export interface HardwareSpec {
-  id: string;
-  pcName: string;
-  department: string;
-  userName: string;
-  os: string;
-  cpu: string;
-  memory: string;
-  disk: string;
-  macAddress: string;
-  ipAddress: string;
-  graphicCard: string;
-}
-
-export const mockCategories: Category[] = [
-  { id: '1', name: 'PC', count: 1 },
-  { id: '2', name: '모니터', count: 5 },
-  { id: '3', name: '노트북', count: 2 },
-];
-
-export const mockAssets: Asset[] = [
-  {
-    id: '1',
-    categoryName: 'PC',
-    name: 'PC',
-    quantity: 1,
-    internalCode: 'PC20230411001',
-    serialNumber: 'SN-001-A1',
-    department: '한맥기술',
-    user: '이관형',
-    acquisitionDate: '2023-04-11',
-    status: '정상',
-    location: '본사 3층',
-  },
-];
-
-export const mockHardwareSpecs: HardwareSpec[] = [
-  {
-    id: '1',
-    pcName: 'DESKTOP-G1DVL26',
-    department: '한맥기술',
-    userName: '이준권',
-    os: 'Microsoft Windows 10 Pro 10.0.19044',
-    cpu: 'Intel(R) Core(TM) i5-4590 CPU @ 3.30GHz',
-    memory: 'Samsung 4 GB / Samsung 4 GB',
-    disk: 'ST2000DM001-1CH164 1.82 TB / Samsung SSD 850 EVO 120GB',
-    macAddress: '0862664B98A3',
-    ipAddress: '172.16.9.68',
-    graphicCard: 'NVIDIA GeForce GTX 750',
-  },
-  {
-    id: '2',
-    pcName: 'DESKTOP-BNBPOUP',
-    department: '한맥기술',
-    userName: '주완기 연구원',
-    os: 'Microsoft Windows 10 Pro 10.0.19045',
-    cpu: 'Intel(R) Core(TM) i5-4570 CPU @ 3.20GHz',
-    memory: 'Samsung 8 GB / Samsung 8 GB',
-    disk: 'ST1000DM003-1CH162 931.51 GB / Samsung SSD 840 EVO 120GB',
-    macAddress: 'E03F4948ECC6',
-    ipAddress: '172.16.9.23',
-    graphicCard: 'Intel(R) HD Graphics 4600',
-  },
-];

backup_temp/src/index.css

@@ -1,26 +0,0 @@
-:root {
-  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-  letter-spacing: -0.02em;
-
-  color-scheme: light;
-  color: #111827;
-  background-color: #F9FAFB;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-#root {
-  width: 100%;
-}

backup_temp/src/main.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)

backup_temp/서버목록 및 IDC 서버 위치 - 서버 및 스토리지 목록(IDC).csv

@@ -1,49 +0,0 @@
-IDC,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
-서버목록,,,,,,,,,,,,,,,,,,,,,,,,,,한맥,LMS 서버,mdf,
-회사,서버번호,구분,비고,설치위치,담당자,,IP 주소,,원격접속,,,모니터링 여부,"서버 이름 ID
- 일치 여부, 전 서버 이름",제조사 및 모델명,OS,CPU,RAM,Storage1,Storage2,Storage3,계산서,,,,,삼안,XR플래그십 스토리지,,20250414
-,,,,,정,부,IP,IP2,접속도구,아이디,비빌번호,,,,,,,,,,,,,,,장헌,"스토리지, 서버",mdf 추정,
-한맥,hm-idc-001,한맥 인트라넷,,서관 204번,,,211.206.127.70,192.168.10.5,원격데스크탑,administrator,samanerp1!,"win exp, raid X",srv07d330084,HPE ProLiant DL360 Gen10,Windows Server 2016,intel xeon silver4110 CPU @2.10GHz 2.10GHZ,32GB,280GB,2.7TB,,20201210 추정,한맥,,,,한라,백업서버,mdf,
-,,,,,,,,,Remote Util,211.206.127.70,1234아이티!,,,,,,,,,,,,,,,,,,
-,hm-idc-002,한맥 인트라넷 예비,"단가, 입사자지원 서버 (4/1 장헌산업 이름으로 스마트 건설 용도 구매)",서관 205번,,,211.206.127.78,192.168.10.13,원격데스크탑,administrator,Hanmac2141!,"win exp, raid X",srcff5294c84,HPE ProLiant DL360 Gen10,Windows Server 2019,intel xeon silver4214R CPU @2.40GHz 2.39GHZ,32GB,280GB,2.7TB,,,,,,,,,,
-삼안,sa-idc-001,삼안 인트라넷,,서관 204번,,,118.220.172.237,erp.samaneng.com,원격데스크탑,administrator,samanerp1!,O,newSmintranet,HPE ProLiant DL360 Gen10,Windows Server 2016,intel xeon silver4214R CPU @2.40GHz 2.39GHZ,32GB,280GB,3.27TB,,20191220 추정,삼안,,,,,,,
-,,,,,,,,,Remote Util,118.220.172.237,1234아이티!,,,,,,,,,,,,,,,,,,
-,sa-idc-002,삼안 인트라넷 예비,,서관 204번,,,118.220.172.249,,원격데스크탑,administrator,samanerp1!,설치 X,INTRANET,HPE ProLiant DL360 GEN9,Windows Server 2008 R2,Intel(R) Xeon(R) CPU E5-2630 v3 @ 2.40GHz 2.40GHz,32GB,279GB,2.72TB,,,,,,,,,,
-,,,,,,,,,Remote Util,678-605-383-130,1234아이티!,,,,,,,,,,,,,,,,,,
-,sa-idc-003,SATIS 01,"구 SATIS 서버, 세금계산서 발행(회계)",서관 204번,,,118.220.172.228,,원격데스크탑,administrator,satissg11707808,설치 X,satis01,HPE ProLiant DL380p GEN8,Windows Server 2008 R2,Intel(R) Xeon(R) CPU E5-2643 0 @ 3.30GHz 3.30GHz,20GB,100GB,458GB,,,,,,,,,,
-,sa-idc-004,SATIS 02,SATIS 리뉴얼 버전 (ERP 서버),서관 204번,,,118.220.172.229,,원격데스크탑,administrator,satissg11707808,설치 X,satis02,HPE ProLiant DL380p GEN8,Windows Server 2008 R2,Intel(R) Xeon(R) CPU E5-2643 0 @ 3.30GHz 3.30GHz,20GB,100GB,458GB,18.1TB,,,,,,,,,
-,sa-idc-005,웹 서버,남양주 테스트 서버 (도메인 관리 기능 제거 2026.03.11),서관 204번,,,samanweb.cafe24.com,118.220.172.195,원격데스크탑,administrator,saman+2013+web,"win exp, 포트 안열림",www,HPE ProLiant DL380p GEN8,Windwos Server 2012,Intel(R) Xeon(R) CPU E5-2609 0 @ 2.40GHz 2.40GHz,16GB,100GB,230GB,230GB,,,,,,,,,
-,sa-idc-006,PQ DB 서버,,서관 204번,,,118.220.172.231,,원격데스크탑,administrator,7013ddj10235!, O,src5dd67f2ed,HPE ProLiant DL360 Gen10,Windows Server 2019,intel xeon silver4210R CPU @2.40GHz 2.39GHZ,32GB,278GB,2.18TB,,20241216 구매교체,삼안,,,,,,,
-,sa-idc-007,Oracle DB 서버,,서관 202번,,,118.220.172.225,,원격데스크탑,administrator,7013ddj10235!,"win exp, raid X",SAMAN-DB,HPE ProLiant DL380 GEN9,Windows Server 2012,Intel(R) Xeon(R) CPU E5-2650 v4 @ 2.20GHz 2.20GHz,64GB,558GB,1.09TB,1.09TB,,,,,,,,,
-,sa-idc-008,안전관리,"삼안 개발서버2 - AI, SSL, 장헌TBM, 노드",서관 202번,,,1.234.37.171,,원격데스크탑,administrator,samanerp1!,연결 X,,HPE ProLiant DL380 GEN10,Windwos Server 2022,Intel Xeon(R) Silver 4210R CPU @ 2.40GHz,128GB,278GB,3.27TB,,20250410 설치,삼안,,,,,,,
-,sa-idc-009,가족사 공통메뉴,"삼안 개발서버1 - QNA, 급여명세서",서관 202번,,,118.220.172.233,,원격데스크탑,administrator,samanerp1!,O,srcc9ac928ee,HPE ProLiant DL380 GEN10,Windwos Server 2022,Intel Xeon(R) Silver 4210R CPU @ 2.40GHz,128GB,278GB,3.27TB,,20250410 설치,삼안,,,,,,,
-한라,hl-idc-001,한라 인트라넷,"인트라넷,안전, 운영, MISO 서버로 운영 중(win 2008)",동관 54번,,,1.234.37.143,,Remote Util,1.234.37.143,1234dkdlxl!,설치 X,,HPE ProLiant DL360 GEN9,Windows Server 2008 R2,Intel(R) Xeon(R) CPU E5-2603 v4 @ 1.70GHz 1.70GHz,8GB,299GB,631GB,,,,,,,,,,
-,hl-idc-002,안전전산화 서버 (디자인팀 웹),"인트라넷 서버 다운 시 백업용 대기, (임시) 디자인팀 웹 퍼블리싱 서버",동관 54번,,,1.234.37.144,192.168.20.49,Remote Util,1.234.37.144,1234dkdlxl!,O,,HPE ProLiant DL360 GEN9,Windows Server 2012,Intel(R) Xeon(R) CPU E5-2603 v4 @ 1.70GHz 1.70GHz,8GB,299GB,631GB,,,,,,,,,,
-,hl-idc-003,개발서버2,PTC 연구비로 구매한 예비서버2 ,동관 53번,,,192.168.20.171,1.234.37.171,Remote Util,1.234.37.171,1234dkdlxl!,O,,HPE ProLiant DL380 Gen10,Windows Server 2019 Standard,Intel(R) Xeon(R) Silver 4214R CPU @ 2.40GHz,32GB,280GB,1TB,,20220921 추정,ptc,,,,,,,
-,,,"이전 : 하수도자산 소스+프로그램 현재 : 큰길 서비스용 xampp+ PostgreSQL, BEPs",,,,,,원격데스크탑,administrator,Hanmac2141!%,,src775d3e5df,,,,,,,,,,,,,,,,
-장헌,jh-idc-001,장헌인트라넷,,서관 205번,,,211.206.127.71,192.168.10.6,Remote Util,211.206.127.71,1234dkdlxl!,잠금 걸려있음,,HPE ProLiant DL380 GEN10,Windows Server 2019,Intel(R) Xeon(R) Silver 4214R CPU @ 2.40GHz 2.39GHz,32GB,280GB,1TB,,20220921 추정,ptc,,,,,,,
-,jh-idc-002,장헌 인트라넷 예비,,동관 53번,,,1.234.37.170,192.168.20.170,Remote Util,1.234.37.170,1234dkdlxl!,"원격 X, O
-",,HPE ProLiant DL360 Gen10,Windows Server 2019,Intel(R) Xeon(R) Silver 4214R CPU @ 2.40GHz 2.39GHz,32GB,280GB,1TB,,20220401 추정,장헌,,,,,,,
-,,,,,,,,,원격데스크탑,Administrator,Hanmac2141!,,,,,,,,,,,,,,,,,,
-,jh-idc-003,인트라넷(구),현재는 GIT 백업 으로 사용,서관 205번,,,211.206.127.110,192.168.10.40,Remote Util,211.206.127.110,1234dkdlxl!,,,,Windows Server 2019,Intel(R) Xeon(R) Silver 4214R CPU @ 2.40GHz,,,,,,,,,,,,,
-,,,,,,,,,원격데스크탑,User,Hanmac2141!,,,,,,,,,,,,,,,,,,
-(주)장헌,jh-idc-004,(주) 장헌 인트라넷,2025.12.23 (주) 장헌 센터 MDF에서 IDC로 이전 설치,서관 205번,,,211.206.127.76,,원격데스크탑,User,Hanmac2141!%,"win exp, raid X",DESKTOP-5IL75B7,,Windows 10,12th Gen Intel(R) Core(TM) i7-12700F,32GB,465GB,1.81TB,,,,,,,,,,
-PTC,ptc-idc-001,PTC인트라넷,"구 파일 서버(부서자료 백업용), 2024.05.22 인트라넷서버로 교체",서관 205번,,,211.206.127.72,192.168.10.7,Remote Util,211.206.127.72,1234dkdlxl!,설치 X,,SYSTEM X3650 M2,Windows Server 2008 R2,Intel(R) Xeon(R) CPU E5520 @ 2.27GHz 2.26GHz,16GB,556GB,,,,,,,,,,,
-,ptc-idc-002,예비서버,PTC 인트라넷 예비서버,서관 204번,,,192.168.10.8,,원격데스크탑,administrator,1234dkdlxl!,O,,HPE ProLiant DL360 GEN10,Windows Server 2019,Intel Xeon(R) Silver 4210R CPU @ 2.40GHz,32GB,278GB,1.09TB,,20220401 추정,장헌,,,,,,,
-,ptc-idc-003,DB 백업 서버,"구 파일 인트라넷, 2024.05.22에 DB 백업 테스트 서버로 변경 (데스크탑)",서관 205번,,,211.206.127.74,192.168.10.9,Remote Util,211.206.127.74,1234dkdlxl!,설치 X,,,Window 7,Intel(R) Core(TM)2 CPU 6400 @ 2.13GHz 2.13GHz,4GB,593GB,1.23TB,,,,,,,,,,
-바론,br-idc-001,인트라넷,,서관 205번,,,211.206.127.75,192.168.10.10,원격데스크탑,administrator,Hanmac2141!%,O,srcf0136042d,HPE ProLiant DL360 GEN10,Windows Server 2022,Intel Xeon(R) Silver 4210R CPU @ 2.40GHz,32GB,280GB,2.18TB,,20250414 추정,바론,,,,,,,
-현타,ht-idc-001,인트라넷,,동관 53번,,,1.234.37.172,192.168.20.172,원격데스크탑,administrator,Hanmac2141!,O,src901e49933,HPE ProLiant DL380 GEN10,Windows Server 2019,Intel Xeon Silver 4210R CPU @ 2.40GHz 2.39GHz,32GB,280GB,1TB,,20220921 추정,ptc,,,,,,,
-,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
-,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
-,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
-스토리지 목록,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
-회사,서버번호,구분,비고,설치위치,담당자,,IP 주소,,원격접속,,,,,,모델명,용량,,,,,,,,,,,,,
-,,,,,정,부,,,접속도구,아이디,비빌번호,,,,,,,,,,,,,,,,,,
-삼안,sa-das-001,,"Satis01, Satis02 광케이블 연결 (물리연결)",서관 205번,,,,,,,,,,,,,,,,,,,,,,,,,
-,sa-nas-001,인트라넷 백업 스토리지,,서관 203번,,,(IDC)           118.220.172.246,,원격,administrator,sg11707808,,,,Promiss R Series,36TB,,,,,,,,,,,,,
-,sa-nas-002,성과품 스토리지,,서관 205번,,,(IDC)           118.220.172.248,,원격,administrator,sg11707808,,,,ENC_3U_16BAY_D // SEAGATE ST2000NM0045,23TB,,,,,20190603 추정,삼안,,,,,,,
-,,,매니지먼트 접속 확인 불가 (콘솔 연결 후 페이지 오픈 필요),,,,(매니지먼트) 118.220.172.247,,원격,-,-,,,,,,,,,,,,,,,,,,
-,sa-nas-003,성과품 백업 스토리지,,서관 202번,,,(IDC)            118.220.172.241,,원격,administrator,saman1!,,,,Promiss R Series,48TB,,,,,20250313,삼안,,,,,,,
-,,,,,,,(매지니먼트) 118.220.172.240,,원격,admin0,Root1234,,,,,,,,,,,,,,,,,,
-한라,hl-das-001,,파일서버 정보 없음(접속 불가),동관 54번,,,,,,,,,,,,,,,,,20190701 추정,한라,(한라 파일서버도 동일일자 추정),,,,,,
-,hl-das-002,,,동관 54번,,,,,,,,,,,,,,,,,,,,,,,,,

branch_diff_issues.md

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

build/pc_agent/EXE-00.toc

@@ -0,0 +1,211 @@
+('D:\\이태훈\\22전산자산조사\\ITAM\\dist\\pc_agent.exe',
+ True,
+ False,
+ False,
+ 'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\PyInstaller\\bootloader\\images\\icon-console.ico',
+ None,
+ False,
+ False,
+ b'<?xml version="1.0" encoding="UTF-8" standalone="yes"?>\n<assembly xmlns='
+ b'"urn:schemas-microsoft-com:asm.v1" manifestVersion="1.0">\n  <trustInfo x'
+ b'mlns="urn:schemas-microsoft-com:asm.v3">\n    <security>\n      <requested'
+ b'Privileges>\n        <requestedExecutionLevel level="asInvoker" uiAccess='
+ b'"false"/>\n      </requestedPrivileges>\n    </security>\n  </trustInfo>\n  '
+ b'<compatibility xmlns="urn:schemas-microsoft-com:compatibility.v1">\n    <'
+ b'application>\n      <supportedOS Id="{e2011457-1546-43c5-a5fe-008deee3d3f'
+ b'0}"/>\n      <supportedOS Id="{35138b9a-5d96-4fbd-8e2d-a2440225f93a}"/>\n '
+ b'     <supportedOS Id="{4a2f28e3-53b9-4441-ba9c-d69d4a4a6e38}"/>\n      <s'
+ b'upportedOS Id="{1f676c76-80e1-4239-95bb-83d0f6d0da78}"/>\n      <supporte'
+ b'dOS Id="{8e0f7a12-bfb3-4fe8-b9a5-48fd50a15a9a}"/>\n    </application>\n  <'
+ b'/compatibility>\n  <application xmlns="urn:schemas-microsoft-com:asm.v3">'
+ b'\n    <windowsSettings>\n      <longPathAware xmlns="http://schemas.micros'
+ b'oft.com/SMI/2016/WindowsSettings">true</longPathAware>\n    </windowsSett'
+ b'ings>\n  </application>\n  <dependency>\n    <dependentAssembly>\n      <ass'
+ b'emblyIdentity type="win32" name="Microsoft.Windows.Common-Controls" version='
+ b'"6.0.0.0" processorArchitecture="*" publicKeyToken="6595b64144ccf1df" langua'
+ b'ge="*"/>\n    </dependentAssembly>\n  </dependency>\n</assembly>',
+ True,
+ False,
+ None,
+ None,
+ None,
+ 'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\pc_agent.pkg',
+ [('pyi-contents-directory _internal', '', 'OPTION'),
+  ('PYZ-00.pyz', 'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\PYZ-00.pyz', 'PYZ'),
+  ('struct',
+   'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\localpycs\\struct.pyc',
+   'PYMODULE'),
+  ('pyimod01_archive',
+   'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\localpycs\\pyimod01_archive.pyc',
+   'PYMODULE'),
+  ('pyimod02_importers',
+   'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\localpycs\\pyimod02_importers.pyc',
+   'PYMODULE'),
+  ('pyimod03_ctypes',
+   'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\localpycs\\pyimod03_ctypes.pyc',
+   'PYMODULE'),
+  ('pyimod04_pywin32',
+   'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\localpycs\\pyimod04_pywin32.pyc',
+   'PYMODULE'),
+  ('pyiboot01_bootstrap',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\PyInstaller\\loader\\pyiboot01_bootstrap.py',
+   'PYSOURCE'),
+  ('pyi_rth_inspect',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\PyInstaller\\hooks\\rthooks\\pyi_rth_inspect.py',
+   'PYSOURCE'),
+  ('pyi_rth_pkgutil',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\PyInstaller\\hooks\\rthooks\\pyi_rth_pkgutil.py',
+   'PYSOURCE'),
+  ('pyi_rth_multiprocessing',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\PyInstaller\\hooks\\rthooks\\pyi_rth_multiprocessing.py',
+   'PYSOURCE'),
+  ('pyi_rth_cryptography_openssl',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\_pyinstaller_hooks_contrib\\rthooks\\pyi_rth_cryptography_openssl.py',
+   'PYSOURCE'),
+  ('pyi_rth_pywintypes',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\_pyinstaller_hooks_contrib\\rthooks\\pyi_rth_pywintypes.py',
+   'PYSOURCE'),
+  ('pyi_rth_pythoncom',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\_pyinstaller_hooks_contrib\\rthooks\\pyi_rth_pythoncom.py',
+   'PYSOURCE'),
+  ('pc_agent', 'D:\\이태훈\\22전산자산조사\\ITAM\\pc_agent.py', 'PYSOURCE'),
+  ('python312.dll',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\python312.dll',
+   'BINARY'),
+  ('pywin32_system32\\pywintypes312.dll',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\pywin32_system32\\pywintypes312.dll',
+   'BINARY'),
+  ('pywin32_system32\\pythoncom312.dll',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\pywin32_system32\\pythoncom312.dll',
+   'BINARY'),
+  ('select.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\select.pyd',
+   'EXTENSION'),
+  ('_multiprocessing.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_multiprocessing.pyd',
+   'EXTENSION'),
+  ('pyexpat.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\pyexpat.pyd',
+   'EXTENSION'),
+  ('_ssl.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_ssl.pyd',
+   'EXTENSION'),
+  ('_hashlib.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_hashlib.pyd',
+   'EXTENSION'),
+  ('unicodedata.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\unicodedata.pyd',
+   'EXTENSION'),
+  ('_decimal.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_decimal.pyd',
+   'EXTENSION'),
+  ('_lzma.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_lzma.pyd',
+   'EXTENSION'),
+  ('_bz2.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_bz2.pyd',
+   'EXTENSION'),
+  ('_ctypes.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_ctypes.pyd',
+   'EXTENSION'),
+  ('_queue.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_queue.pyd',
+   'EXTENSION'),
+  ('_wmi.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_wmi.pyd',
+   'EXTENSION'),
+  ('_socket.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_socket.pyd',
+   'EXTENSION'),
+  ('_overlapped.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_overlapped.pyd',
+   'EXTENSION'),
+  ('_asyncio.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_asyncio.pyd',
+   'EXTENSION'),
+  ('_cffi_backend.cp312-win_amd64.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\_cffi_backend.cp312-win_amd64.pyd',
+   'EXTENSION'),
+  ('cryptography\\hazmat\\bindings\\_rust.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography\\hazmat\\bindings\\_rust.pyd',
+   'EXTENSION'),
+  ('charset_normalizer\\md__mypyc.cp312-win_amd64.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\charset_normalizer\\md__mypyc.cp312-win_amd64.pyd',
+   'EXTENSION'),
+  ('charset_normalizer\\md.cp312-win_amd64.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\charset_normalizer\\md.cp312-win_amd64.pyd',
+   'EXTENSION'),
+  ('win32\\_win32sysloader.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\win32\\_win32sysloader.pyd',
+   'EXTENSION'),
+  ('win32\\win32api.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\win32\\win32api.pyd',
+   'EXTENSION'),
+  ('Pythonwin\\win32ui.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\Pythonwin\\win32ui.pyd',
+   'EXTENSION'),
+  ('win32\\win32event.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\win32\\win32event.pyd',
+   'EXTENSION'),
+  ('win32\\win32trace.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\win32\\win32trace.pyd',
+   'EXTENSION'),
+  ('VCRUNTIME140.dll',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\VCRUNTIME140.dll',
+   'BINARY'),
+  ('VCRUNTIME140_1.dll',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\VCRUNTIME140_1.dll',
+   'BINARY'),
+  ('libssl-3.dll',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\libssl-3.dll',
+   'BINARY'),
+  ('libcrypto-3.dll',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\libcrypto-3.dll',
+   'BINARY'),
+  ('libffi-8.dll',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\libffi-8.dll',
+   'BINARY'),
+  ('python3.dll',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\python3.dll',
+   'BINARY'),
+  ('Pythonwin\\mfc140u.dll',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\Pythonwin\\mfc140u.dll',
+   'BINARY'),
+  ('certifi\\cacert.pem',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\certifi\\cacert.pem',
+   'DATA'),
+  ('certifi\\py.typed',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\certifi\\py.typed',
+   'DATA'),
+  ('cryptography-45.0.2.dist-info\\licenses\\LICENSE.BSD',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\licenses\\LICENSE.BSD',
+   'DATA'),
+  ('cryptography-45.0.2.dist-info\\licenses\\LICENSE',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\licenses\\LICENSE',
+   'DATA'),
+  ('cryptography-45.0.2.dist-info\\RECORD',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\RECORD',
+   'DATA'),
+  ('cryptography-45.0.2.dist-info\\METADATA',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\METADATA',
+   'DATA'),
+  ('cryptography-45.0.2.dist-info\\WHEEL',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\WHEEL',
+   'DATA'),
+  ('cryptography-45.0.2.dist-info\\INSTALLER',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\INSTALLER',
+   'DATA'),
+  ('cryptography-45.0.2.dist-info\\licenses\\LICENSE.APACHE',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\licenses\\LICENSE.APACHE',
+   'DATA'),
+  ('base_library.zip',
+   'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\base_library.zip',
+   'DATA')],
+ [],
+ False,
+ False,
+ 1779102721,
+ [('run.exe',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\PyInstaller\\bootloader\\Windows-64bit-intel\\run.exe',
+   'EXECUTABLE')],
+ 'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\python312.dll')

build/pc_agent/PKG-00.toc

@@ -0,0 +1,189 @@
+('D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\pc_agent.pkg',
+ {'BINARY': True,
+  'DATA': True,
+  'EXECUTABLE': True,
+  'EXTENSION': True,
+  'PYMODULE': True,
+  'PYSOURCE': True,
+  'PYZ': False,
+  'SPLASH': True,
+  'SYMLINK': False},
+ [('pyi-contents-directory _internal', '', 'OPTION'),
+  ('PYZ-00.pyz', 'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\PYZ-00.pyz', 'PYZ'),
+  ('struct',
+   'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\localpycs\\struct.pyc',
+   'PYMODULE'),
+  ('pyimod01_archive',
+   'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\localpycs\\pyimod01_archive.pyc',
+   'PYMODULE'),
+  ('pyimod02_importers',
+   'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\localpycs\\pyimod02_importers.pyc',
+   'PYMODULE'),
+  ('pyimod03_ctypes',
+   'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\localpycs\\pyimod03_ctypes.pyc',
+   'PYMODULE'),
+  ('pyimod04_pywin32',
+   'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\localpycs\\pyimod04_pywin32.pyc',
+   'PYMODULE'),
+  ('pyiboot01_bootstrap',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\PyInstaller\\loader\\pyiboot01_bootstrap.py',
+   'PYSOURCE'),
+  ('pyi_rth_inspect',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\PyInstaller\\hooks\\rthooks\\pyi_rth_inspect.py',
+   'PYSOURCE'),
+  ('pyi_rth_pkgutil',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\PyInstaller\\hooks\\rthooks\\pyi_rth_pkgutil.py',
+   'PYSOURCE'),
+  ('pyi_rth_multiprocessing',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\PyInstaller\\hooks\\rthooks\\pyi_rth_multiprocessing.py',
+   'PYSOURCE'),
+  ('pyi_rth_cryptography_openssl',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\_pyinstaller_hooks_contrib\\rthooks\\pyi_rth_cryptography_openssl.py',
+   'PYSOURCE'),
+  ('pyi_rth_pywintypes',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\_pyinstaller_hooks_contrib\\rthooks\\pyi_rth_pywintypes.py',
+   'PYSOURCE'),
+  ('pyi_rth_pythoncom',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\_pyinstaller_hooks_contrib\\rthooks\\pyi_rth_pythoncom.py',
+   'PYSOURCE'),
+  ('pc_agent', 'D:\\이태훈\\22전산자산조사\\ITAM\\pc_agent.py', 'PYSOURCE'),
+  ('python312.dll',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\python312.dll',
+   'BINARY'),
+  ('pywin32_system32\\pywintypes312.dll',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\pywin32_system32\\pywintypes312.dll',
+   'BINARY'),
+  ('pywin32_system32\\pythoncom312.dll',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\pywin32_system32\\pythoncom312.dll',
+   'BINARY'),
+  ('select.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\select.pyd',
+   'EXTENSION'),
+  ('_multiprocessing.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_multiprocessing.pyd',
+   'EXTENSION'),
+  ('pyexpat.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\pyexpat.pyd',
+   'EXTENSION'),
+  ('_ssl.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_ssl.pyd',
+   'EXTENSION'),
+  ('_hashlib.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_hashlib.pyd',
+   'EXTENSION'),
+  ('unicodedata.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\unicodedata.pyd',
+   'EXTENSION'),
+  ('_decimal.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_decimal.pyd',
+   'EXTENSION'),
+  ('_lzma.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_lzma.pyd',
+   'EXTENSION'),
+  ('_bz2.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_bz2.pyd',
+   'EXTENSION'),
+  ('_ctypes.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_ctypes.pyd',
+   'EXTENSION'),
+  ('_queue.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_queue.pyd',
+   'EXTENSION'),
+  ('_wmi.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_wmi.pyd',
+   'EXTENSION'),
+  ('_socket.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_socket.pyd',
+   'EXTENSION'),
+  ('_overlapped.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_overlapped.pyd',
+   'EXTENSION'),
+  ('_asyncio.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\_asyncio.pyd',
+   'EXTENSION'),
+  ('_cffi_backend.cp312-win_amd64.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\_cffi_backend.cp312-win_amd64.pyd',
+   'EXTENSION'),
+  ('cryptography\\hazmat\\bindings\\_rust.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography\\hazmat\\bindings\\_rust.pyd',
+   'EXTENSION'),
+  ('charset_normalizer\\md__mypyc.cp312-win_amd64.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\charset_normalizer\\md__mypyc.cp312-win_amd64.pyd',
+   'EXTENSION'),
+  ('charset_normalizer\\md.cp312-win_amd64.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\charset_normalizer\\md.cp312-win_amd64.pyd',
+   'EXTENSION'),
+  ('win32\\_win32sysloader.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\win32\\_win32sysloader.pyd',
+   'EXTENSION'),
+  ('win32\\win32api.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\win32\\win32api.pyd',
+   'EXTENSION'),
+  ('Pythonwin\\win32ui.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\Pythonwin\\win32ui.pyd',
+   'EXTENSION'),
+  ('win32\\win32event.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\win32\\win32event.pyd',
+   'EXTENSION'),
+  ('win32\\win32trace.pyd',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\win32\\win32trace.pyd',
+   'EXTENSION'),
+  ('VCRUNTIME140.dll',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\VCRUNTIME140.dll',
+   'BINARY'),
+  ('VCRUNTIME140_1.dll',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\VCRUNTIME140_1.dll',
+   'BINARY'),
+  ('libssl-3.dll',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\libssl-3.dll',
+   'BINARY'),
+  ('libcrypto-3.dll',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\libcrypto-3.dll',
+   'BINARY'),
+  ('libffi-8.dll',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\DLLs\\libffi-8.dll',
+   'BINARY'),
+  ('python3.dll',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\python3.dll',
+   'BINARY'),
+  ('Pythonwin\\mfc140u.dll',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\Pythonwin\\mfc140u.dll',
+   'BINARY'),
+  ('certifi\\cacert.pem',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\certifi\\cacert.pem',
+   'DATA'),
+  ('certifi\\py.typed',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\certifi\\py.typed',
+   'DATA'),
+  ('cryptography-45.0.2.dist-info\\licenses\\LICENSE.BSD',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\licenses\\LICENSE.BSD',
+   'DATA'),
+  ('cryptography-45.0.2.dist-info\\licenses\\LICENSE',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\licenses\\LICENSE',
+   'DATA'),
+  ('cryptography-45.0.2.dist-info\\RECORD',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\RECORD',
+   'DATA'),
+  ('cryptography-45.0.2.dist-info\\METADATA',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\METADATA',
+   'DATA'),
+  ('cryptography-45.0.2.dist-info\\WHEEL',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\WHEEL',
+   'DATA'),
+  ('cryptography-45.0.2.dist-info\\INSTALLER',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\INSTALLER',
+   'DATA'),
+  ('cryptography-45.0.2.dist-info\\licenses\\LICENSE.APACHE',
+   'C:\\Users\\User\\AppData\\Local\\Programs\\Python\\Python312\\Lib\\site-packages\\cryptography-45.0.2.dist-info\\licenses\\LICENSE.APACHE',
+   'DATA'),
+  ('base_library.zip',
+   'D:\\이태훈\\22전산자산조사\\ITAM\\build\\pc_agent\\base_library.zip',
+   'DATA')],
+ 'python312.dll',
+ False,
+ False,
+ False,
+ [],
+ None,
+ None,
+ None)

build/pc_agent/warn-pc_agent.txt

@@ -0,0 +1,58 @@
+
+This file lists modules PyInstaller was not able to find. This does not
+necessarily mean these modules are required for running your program. Both
+Python's standard library and 3rd-party Python packages often conditionally
+import optional modules, some of which may be available only on certain
+platforms.
+
+Types of import:
+* top-level: imported at the top-level - look at these first
+* conditional: imported within an if-statement
+* delayed: imported within a function
+* optional: imported within a try-except-statement
+
+IMPORTANT: Do NOT post this list to the issue-tracker. Use it as a basis for
+            tracking down the missing module yourself. Thanks!
+
+missing module named pwd - imported by posixpath (delayed, conditional, optional), shutil (delayed, optional), tarfile (optional), pathlib (delayed, optional), subprocess (delayed, conditional, optional), netrc (delayed, conditional), getpass (delayed)
+missing module named grp - imported by shutil (delayed, optional), tarfile (optional), pathlib (delayed, optional), subprocess (delayed, conditional, optional)
+missing module named _posixsubprocess - imported by subprocess (conditional), multiprocessing.util (delayed)
+missing module named fcntl - imported by subprocess (optional)
+missing module named _posixshmem - imported by multiprocessing.resource_tracker (conditional), multiprocessing.shared_memory (conditional)
+missing module named _scproxy - imported by urllib.request (conditional)
+missing module named termios - imported by getpass (optional)
+missing module named multiprocessing.BufferTooShort - imported by multiprocessing (top-level), multiprocessing.connection (top-level)
+missing module named multiprocessing.AuthenticationError - imported by multiprocessing (top-level), multiprocessing.connection (top-level)
+missing module named _frozen_importlib_external - imported by importlib._bootstrap (delayed), importlib (optional), importlib.abc (optional), zipimport (top-level)
+excluded module named _frozen_importlib - imported by importlib (optional), importlib.abc (optional), zipimport (top-level)
+missing module named posix - imported by os (conditional, optional), posixpath (optional), shutil (conditional), importlib._bootstrap_external (conditional)
+missing module named resource - imported by posix (top-level)
+missing module named multiprocessing.get_context - imported by multiprocessing (top-level), multiprocessing.pool (top-level), multiprocessing.managers (top-level), multiprocessing.sharedctypes (top-level)
+missing module named multiprocessing.TimeoutError - imported by multiprocessing (top-level), multiprocessing.pool (top-level)
+missing module named multiprocessing.set_start_method - imported by multiprocessing (top-level), multiprocessing.spawn (top-level)
+missing module named multiprocessing.get_start_method - imported by multiprocessing (top-level), multiprocessing.spawn (top-level)
+missing module named pyimod02_importers - imported by C:\Users\User\AppData\Local\Programs\Python\Python312\Lib\site-packages\PyInstaller\hooks\rthooks\pyi_rth_pkgutil.py (delayed)
+missing module named collections.Callable - imported by collections (optional), socks (optional)
+missing module named vms_lib - imported by platform (delayed, optional)
+missing module named 'java.lang' - imported by platform (delayed, optional)
+missing module named java - imported by platform (delayed)
+missing module named _winreg - imported by platform (delayed, optional)
+missing module named simplejson - imported by requests.compat (conditional, optional)
+missing module named dummy_threading - imported by requests.cookies (optional)
+missing module named asyncio.DefaultEventLoopPolicy - imported by asyncio (delayed, conditional), asyncio.events (delayed, conditional)
+missing module named annotationlib - imported by typing_extensions (conditional)
+missing module named 'h2.events' - imported by urllib3.http2.connection (top-level)
+missing module named 'h2.connection' - imported by urllib3.http2.connection (top-level)
+missing module named h2 - imported by urllib3.http2.connection (top-level)
+missing module named zstandard - imported by urllib3.util.request (optional), urllib3.response (optional)
+missing module named brotli - imported by urllib3.util.request (optional), urllib3.response (optional)
+missing module named brotlicffi - imported by urllib3.util.request (optional), urllib3.response (optional)
+missing module named win_inet_pton - imported by socks (conditional, optional)
+missing module named bcrypt - imported by cryptography.hazmat.primitives.serialization.ssh (optional)
+missing module named cryptography.x509.UnsupportedExtension - imported by cryptography.x509 (optional), urllib3.contrib.pyopenssl (optional)
+missing module named 'OpenSSL.crypto' - imported by urllib3.contrib.pyopenssl (delayed, conditional)
+missing module named OpenSSL - imported by urllib3.contrib.pyopenssl (top-level)
+missing module named 'pyodide.ffi' - imported by urllib3.contrib.emscripten.fetch (delayed, optional)
+missing module named pyodide - imported by urllib3.contrib.emscripten.fetch (top-level)
+missing module named js - imported by urllib3.contrib.emscripten.fetch (top-level)
+missing module named 'win32com.gen_py' - imported by win32com (conditional, optional)

create_db.js

@@ -1,24 +0,0 @@
-import * as XLSX from 'xlsx';
-
-const hwTabs = ['개인PC', '서버', '스토리지', '전산비품'];
-const swTabs = ['구독SW', '영구SW'];
-
-const hwHeaders = ['법인', '자산코드', '명칭', '위치', '관리자', 'IP주소', 'MACaddress', 'HW사양', 'OS'];
-const swHeaders = ['법인', 'SW명', '라이선스키', '할당자', '사용기간', '비고'];
-
-const wb = XLSX.utils.book_new();
-
-hwTabs.forEach((tab, i) => {
-  const wsData = [hwHeaders, [`(주)회사${i}`, `ASSET-${i}00`, `${tab} 모델A`, '본사 1층', '관리자A', '192.168.0.1', '00:00:00:00:00:01', 'Core i7, 16GB RAM', 'Windows 10']];
-  const ws = XLSX.utils.aoa_to_sheet(wsData);
-  XLSX.utils.book_append_sheet(wb, ws, tab);
-});
-
-swTabs.forEach((tab, i) => {
-  const wsData = [swHeaders, [`(주)회사${i}`, `${tab} Adobe CC`, '1234-5678-ABCD', '홍길동,김철수', '2024.01~2024.12', '본사 전용']];
-  const ws = XLSX.utils.aoa_to_sheet(wsData);
-  XLSX.utils.book_append_sheet(wb, ws, tab);
-});
-
-XLSX.writeFile(wb, 'temp_db.xlsx');
-console.log('temp_db.xlsx created!');

db_fix_data.js

@@ -1,49 +0,0 @@
-import mysql from 'mysql2/promise';
-import dotenv from 'dotenv';
-
-dotenv.config();
-
-const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
-
-async function migrateData() {
-  const connection = await mysql.createConnection({
-    host: DB_HOST,
-    user: DB_USER,
-    password: DB_PASS,
-    database: DB_NAME,
-    port: parseInt(DB_PORT || '3306')
-  });
-
-  console.log('🔄 기존 데이터 보정 시작 (상세유형 = 유형)...');
-
-  const tables = ['pc_assets', 'server_assets', 'storage_assets', 'equip_assets', 'mobile_assets'];
-  
-  for (const table of tables) {
-    // 1. 유형(type)이 비어있는 경우 기본값 채우기 (보정 전 단계)
-    let defaultType = '기타';
-    if (table === 'server_assets') defaultType = '서버';
-    else if (table === 'pc_assets') defaultType = '개인PC';
-    else if (table === 'storage_assets') defaultType = '스토리지';
-    else if (table === 'equip_assets') defaultType = '전산비품';
-    else if (table === 'mobile_assets') defaultType = '모바일기기';
-
-    await connection.query(`UPDATE ${table} SET type = ? WHERE type IS NULL OR type = ''`, [defaultType]);
-
-    // 2. 개인PC가 아닌 데이터들에 대해 상세유형 = 유형 업데이트
-    const [result] = await connection.query(`
-      UPDATE ${table} 
-      SET detail_purpose = type 
-      WHERE type NOT IN ('개인PC', 'PC')
-    `);
-    
-    console.log(`✅ ${table}: ${result.affectedRows}개 데이터 보정 완료`);
-  }
-
-  console.log('✨ 모든 기존 데이터 보정이 완료되었습니다.');
-  await connection.end();
-}
-
-migrateData().catch(err => {
-  console.error('❌ 데이터 보정 실패:', err);
-  process.exit(1);
-});

db_init.js

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

debug_excel.json

@@ -1,140 +0,0 @@
-{
-  "서버 관리대장(기술개발센터).xlsx": [
-    [
-      "마천사무실"
-    ],
-    [
-      "실사진",
-      "구성",
-      "자산번호",
-      "명칭(주기)",
-      "상세",
-      "유형",
-      "담당자",
-      null,
-      "IP",
-      "원격접속",
-      null,
-      null,
-      "모델명",
-      "OS",
-      "CPU",
-      "RAM",
-      "GPU",
-      "Storage1",
-      "Storage2",
-      "Storage3"
-    ],
-    [
-      null,
-      null,
-      null,
-      null,
-      null,
-      null,
-      "정",
-      "부",
-      null,
-      "접속도구",
-      "아이디",
-      "비밀번호"
-    ],
-    [
-      null,
-      null,
-      "",
-      "GSIM NAS",
-      "팀 내부 자료 저장 , 정사영상 및 지도 데이터 저장 , Gitea 및 Git 내장 NAS",
-      "NAS",
-      null,
-      null,
-      null,
-      null,
-      null,
-      null,
-      "Synology DS923+"
-    ],
-    [
-      null,
-      null,
-      "",
-      "그래픽스개발팀\r\n데이터 백업 NAS",
-      "그래픽스 개발팀 데이터 백업용 NAS",
-      "NAS",
-      null,
-      null,
-      null,
-      null,
-      null,
-      null,
-      "Synology DS923+"
-    ]
-  ],
-  "서버 관리대장(한맥빌딩).xlsx": [
-    [
-      "한맥빌딩(MDF 실)"
-    ],
-    [
-      "실사진",
-      "구성",
-      null,
-      null,
-      null,
-      null,
-      null,
-      null,
-      null,
-      "서버번호",
-      "명칭(주기)",
-      "유형",
-      "IP",
-      "모델명",
-      "용도",
-      "담당자",
-      "OS",
-      "CPU",
-      "RAM",
-      "GPU",
-      "Storage1",
-      "Storage2",
-      "Storage3"
-    ],
-    [],
-    [
-      null,
-      null,
-      null,
-      null,
-      null,
-      null,
-      null,
-      null,
-      null,
-      1,
-      "NAS 2",
-      "NAS",
-      "192.168.9.23",
-      "DS414j",
-      "한라 기업부설연구소 공용 NAS",
-      "이준하 차장"
-    ],
-    [
-      null,
-      null,
-      "NAS2",
-      "NAS 1\r\n(DS224+)",
-      "NAS4",
-      "NAS 5\r\n(DS923+)",
-      "NAS 6\r\n(DS923+)",
-      null,
-      null,
-      2,
-      "NAS 1",
-      "NAS",
-      "192.168.9.32",
-      "DS224+",
-      "한라 사업지원, 경영지원, 업무, 안전품질, 운영 공용 NAS",
-      "이준하 차장"
-    ]
-  ]
-}

doc_readme.md

@@ -0,0 +1,940 @@
+# 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 실행 구조를 재현할 수 있다.

doc_readme2.md

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

doc_readme3.md

@@ -0,0 +1,730 @@
+# 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, 보안 점검을 현재 구조 기준으로 계속 보강하는 것이다.

docker-compose.prod.yaml

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

docker-compose.test.yaml

@@ -0,0 +1,62 @@
+# 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

docker-compose.yaml

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

docker/frontend/default.conf

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

docker/mysql/init/README.md

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

docker/nginx/default.conf

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

docker_task_plan.md

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

docs/itam_cicd_setup.md

@@ -0,0 +1,226 @@
+# 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. 로그 로테이션과 백업/복구 절차 문서화

docs/plans/ITAM_RMM_Integration_Plan.md

@@ -0,0 +1,64 @@
+# [보고서] IT 자산 실시간 통합 관리 시스템(RMM) 도입 계획서
+
+## 1. 도입 배경 및 목적
+- **현황**: 현재 시스템은 수동 입력 기반의 정적 자산 대장으로 운영되어, 실제 장비의 가동 상태나 장애 여부를 실시간으로 파악하는 데 한계가 있음.
+- **목적**: 전산자산(서버, PC)의 실시간 상태 정보를 자동 수집하고 장애 징후를 사전에 탐지하여, 선제적 유지보수 체계를 구축하고 운영 효율성을 극대화함.
+
+## 2. 시스템 주요 기능
+### 2.1 실시간 가동 상태 모니터링
+- 주요 자원(CPU, Memory, Disk) 사용률 실시간 수집
+- 운영체제(OS) 및 주요 시스템 서비스의 정상 작동 여부 확인
+- 자산 리스트 내 상태 인디케이터(정상/주의/장애) 표시
+
+### 2.2 원격 제어 및 지원 통합
+- **기술적 구현 방식 (원클릭 자동 연결)**: 웹사이트에서 전화번호를 누르면 전화 앱이 켜지거나, 이메일 주소를 누르면 메일 창이 뜨는 것과 동일한 원리인 'URL 프로토콜 핸들러' 기술을 적용함. 
+    - **자동화 프로세스**: 관리자가 화면의 [연결] 버튼을 클릭하면, 시스템이 팀뷰어나 애니데스크에 "A장비로 연결해줘"라는 신호를 직접 보냄.
+    - **편의성**: 관리자가 대상 장비의 ID나 비밀번호를 직접 복사해서 프로그램에 입력할 필요 없이, 클릭 한 번으로 내 PC에 설치된 원격 소프트웨어가 자동 실행되며 즉시 화면이 연결되도록 구현함.
+- **유연한 접속 모드 지원**:
+    - **무인 접속(Unattended Access)**: 서버 및 공용 장비의 경우, 사전에 등록된 자격 증명을 통해 관리자 승인만으로 즉시 접속하여 야간 또는 긴급 장애에 대응함.
+    - **사용자 승인 접속(Attended Access)**: 개인용 PC의 경우, 사용자의 화면에 접속 요청 팝업을 띄우고 승인 시에만 화면 공유를 시작하여 개인정보 보호 및 보안 규정을 준수함.
+- **보안 및 감사 로그 자동화**: 
+    - 원격 접속이 시작되는 시점에 관리자 정보, 접속 목적, 대상 장비 정보를 DB에 자동 기록함.
+    - 세션 종료 후 총 작업 시간 및 조치 내역을 입력하도록 유도하여 투명한 유지보수 이력을 관리함.
+
+### 2.3 원격 지원 상세 워크플로우 (Remote Support Workflow)
+관리자가 장애를 인지하고 조치를 완료하기까지의 표준 프로세스는 다음과 같습니다.
+
+1.  **지원 요청 및 대상 선택**: 관리자가 ITAM 대시보드 또는 리스트에서 장애가 발생한 자산을 선택하고 '원격 지원 시작' 버튼을 클릭함.
+2.  **접속 모드 자동 판별**:
+    - **서버(무인)**: 시스템이 저장된 자격 증명을 확인하고 관리자에게 '즉시 연결' 팝업을 띄움.
+    - **PC(유인)**: 관리자가 '접속 요청' 버튼을 누르면, 대상 PC 화면에 "관리자가 원격 제어를 요청했습니다. 승인하시겠습니까?" 팝업이 전송됨.
+3.  **세션 초기화 및 로그 생성**: 접속 시도가 승인되면 서버는 즉시 [접속 일시, 관리자 ID, 대상 자산 번호]를 포함한 '세션 로그'를 생성하고 상태를 '진행 중'으로 변경함.
+4.  **프로토콜 핸들러 실행**: 브라우저가 관리자 PC의 원격 제어 앱(TeamViewer 등)을 자동으로 실행하며, 대상 장비의 ID와 패스워드 정보를 암호화된 인자로 전달하여 즉시 화면이 연결됨.
+5.  **조치 및 지원 수행**: 관리자가 실시간으로 장비를 제어하여 장애를 복구함.
+6.  **세션 종료 및 결과 기록**:
+    - 관리자가 원격 제어 앱을 종료하면, ITAM 웹 화면에 '조치 결과 입력' 창이 활성화됨.
+    - 관리자가 조치 내용(예: 서비스 재시작, 패치 적용 등)을 입력하고 저장하면 세션 로그가 최종 확정됨.
+7.  **이력 보관**: 완료된 모든 이력은 '자산 상세 정보 > 유지보수 이력' 탭에서 언제든지 열람 및 보고서 출력이 가능함.
+
+### 3.3 장애 사전 탐지 및 알림
+- 설정된 임계치(예: 디스크 잔량 10% 미만) 초과 시 즉시 알림 발송
+- 장기 미접속 또는 점검 누락 장비의 실시간 식별
+
+## 3. 운영 프로세스 및 메커니즘
+1. **데이터 수집 (Collection)**: 각 자산에 배치된 에이전트가 시스템 정보를 주기적으로 추출함.
+2. **분석 및 판별 (Analysis)**: 수집된 데이터를 중앙 서버에서 분석하여 장비의 상태 등급을 판정함.
+3. **가시화 (Visualization)**: 통합 관리 대시보드를 통해 전체 자산의 헬스 상태를 실시간으로 출력함.
+4. **대응 (Action)**: 장애 감지 시 원격 제어 기능을 호출하여 즉각적인 기술 지원을 수행함.
+
+## 4. 핵심 기술 및 도구
+- **에이전트**: PowerShell 기반의 경량 스크립트를 활용하여 별도의 상용 소프트웨어 설치 없이 시스템 정보 수집.
+- **백엔드**: Node.js 환경에서 대용량 점검 데이터를 효율적으로 처리하고 데이터베이스화함.
+- **프론트엔드**: TypeScript를 활용하여 직관적이고 반응성이 뛰어난 관리자 대시보드 구현.
+- **원격 솔루션**: 보안성이 검증된 TeamViewer/AnyDesk의 프로토콜 연동을 통한 안전한 원격 접속 환경 구축.
+
+## 5. 기대 효과
+- **가용성 증대**: 장애 발생 전 사전 조치를 통해 시스템 다운타임을 최소화하고 업무 연속성 확보.
+- **비용 절감**: 현장 방문 점검 최소화 및 원격 조치를 통한 IT 운영 관리 비용 및 시간 절감.
+- **데이터 기반 의무**: 객관적인 성능 지표 및 점검 이력을 바탕으로 정밀한 자산 교체 주기 산정 및 감사 대응.
+- **관리 생산성 향상**: 자산 정보 조회와 실시간 관리를 단일 플랫폼으로 통합하여 업무 프로세스 간소화.
+
+## 6. 향후 계획
+- 1단계: 서버 자산 중심의 실시간 모니터링 및 대시보드 구축
+- 2단계: 전사 PC 대상 원격 지원 및 보안 점검 기능 확대 적용
+- 3단계: 누적 데이터를 활용한 성능 분석 및 월간 운영 보고서 자동화

docs/plans/IT_Asset_RMM_System_Report_Detailed.md

@@ -0,0 +1,318 @@
+# 전산자산 원격 점검 및 관리 시스템(RMM) 구축 조사 보고서 (상세판)
+
+## 1. RMM(Remote Monitoring & Management) 개요
+
+RMM(Remote Monitoring & Management)은 서버, 업무용 PC, 노트북 등 IT 자산에 에이전트를 설치하여
+중앙 관리 서버에서 상태를 자동 수집하고, 이상 발생 시 경고를 발송하며, 필요 시 원격 접속으로 문제를 해결하는
+기업용 IT 운영 관리 체계입니다.
+
+### 주요 기능
+- CPU, 메모리, 디스크 상태 모니터링
+- Windows 서비스 및 프로세스 상태 점검
+- OS 패치 및 백신 상태 확인
+- 자동 점검 스케줄링 (1일 1~2회 이상)
+- 이상 발생 시 이메일/메신저 알림
+- 원격 접속을 통한 장애 조치
+- 점검 이력 및 감사 로그 보관
+
+---
+
+## 2. 구축 목표
+
+### 서버 및 서버용 PC
+- 하루 1~2회 자동 점검
+- 주요 시스템 자원 및 서비스 상태 수집
+- 이상 발생 시 관리자 즉시 통보
+
+### 업무용 PC
+- 중앙 관리 서버에서 정기 점검
+- 패치 및 보안 상태 확인
+
+### 개인 PC
+- 사용자가 직접 점검 실행
+- 결과를 중앙 서버에 업로드
+
+### 관리자
+- 마지막 점검 일시 확인
+- 성공/실패 여부 확인
+- 미실행 장비 식별
+- 필요 시 즉시 원격 접속
+
+---
+
+## 3. 기대 효과
+
+- 장애 조기 탐지 및 사전 예방
+- 현장 방문 최소화
+- 점검 누락 방지
+- 감사 대응 자료 자동 확보
+- 자산 운영 현황 실시간 가시화
+- 사용자 점검 이행 여부 관리
+
+---
+
+## 4. 전체 시스템 아키텍처
+
+```text
+[관리자 웹 포털]
+  ├─ 대시보드
+  ├─ 점검 결과 조회
+  ├─ 원격 접속 버튼
+  ├─ 알림 관리
+  └─ 사용자 수행 현황
+
+           │
+           ▼
+
+[중앙 관리 서버]
+  ├─ 스케줄러
+  ├─ 데이터 수집 API
+  ├─ 분석 엔진
+  ├─ 알림 시스템
+  └─ 데이터베이스
+
+           │
+           ▼
+
+[에이전트 설치 대상]
+  ├─ 서버
+  ├─ 서버용 PC
+  ├─ 업무용 PC
+  └─ 개인 PC
+```
+
+---
+
+## 5. 주요 구성 요소
+
+### 5.1 중앙 관리 서버
+- 스케줄 실행
+- 상태 분석
+- 데이터 저장
+- 알림 전송
+- 웹 서비스 제공
+
+### 5.2 에이전트 프로그램
+- PowerShell 또는 Python 기반
+- 상태 수집
+- 중앙 서버 전송
+
+### 5.3 관리자 웹 대시보드
+- 실시간 현황 조회
+- 점검 이력 확인
+- 원격 접속 실행
+
+### 5.4 원격 접속 솔루션
+- TeamViewer Tensor
+- AnyDesk
+- Microsoft Remote Help
+
+### 5.5 데이터베이스
+- SQL Server 또는 PostgreSQL
+
+### 5.6 알림 시스템
+- 이메일
+- Microsoft Teams
+- Slack
+
+---
+
+## 6. 점검 항목
+
+### 공통 점검 항목
+- CPU 사용률
+- 메모리 사용률
+- 디스크 여유 공간
+- 네트워크 연결 상태
+- 시스템 부팅 시간
+- 재부팅 필요 여부
+
+### 서버 추가 항목
+- 주요 서비스 실행 여부
+- 이벤트 로그 오류
+- 백업 결과
+- DB 상태
+
+### PC 추가 항목
+- 백신 업데이트 여부
+- Windows Update 상태
+- BitLocker 상태
+
+### 개인 PC
+- 기본 시스템 상태
+- 점검 수행 여부 및 시간 기록
+
+---
+
+## 7. 운영 프로세스
+
+### 정상 운영
+1. 스케줄러가 하루 1~2회 자동 실행
+2. 에이전트가 점검 수행
+3. 결과를 중앙 서버로 전송
+4. 분석 엔진이 정상 여부 판정
+5. 대시보드에 저장
+
+### 이상 발생 시
+1. 임계치 초과 또는 서비스 중지 감지
+2. 관리자에게 알림 발송
+3. 관리자가 원격 접속
+4. 조치 내용 기록
+
+### 개인 PC
+1. 사용자가 '점검 실행' 버튼 클릭
+2. 스크립트 수행
+3. 결과 업로드
+4. 관리자가 이행 여부 확인
+
+---
+
+## 8. 개인 PC 자가 점검 기능
+
+### 사용자 화면
+- 점검 실행 버튼
+- 결과 요약 표시
+- 마지막 점검 시간 표시
+
+### 관리자 확인 항목
+- 마지막 점검 일시
+- 성공/실패 여부
+- 미실행 기간
+- 이상 발생 내역
+
+---
+
+## 9. 관리자 대시보드 구성
+
+- 전체 자산 현황
+- 정상/경고/장애 통계
+- 최근 점검 성공률
+- 미점검 장비 목록
+- 개인 PC 수행 현황
+- 원격 접속 바로가기
+- 월간 보고서
+
+---
+
+## 10. 솔루션 비교
+
+| 솔루션 | 특징 | 적합도 |
+|------|------|------|
+| Microsoft Intune | 엔드포인트 관리 및 규정 준수 | 매우 높음 |
+| TeamViewer Tensor | 기업용 원격 접속 및 RMM 연동 | 매우 높음 |
+| ManageEngine Endpoint Central | 자산, 패치, 원격 관리 통합 | 매우 높음 |
+| Zabbix | 오픈소스 모니터링 | 높음 |
+| Splashtop Remote Support | 원격 지원 + RMM | 높음 |
+| Power BI | 대시보드 및 보고 | 매우 높음 |
+
+---
+
+## 11. 권장 구축 방안
+
+### 권장 아키텍처
+- Microsoft Intune
+- TeamViewer Tensor
+- PowerShell 자동 점검 스크립트
+- Microsoft SQL Server
+- Power BI
+- Microsoft Teams 알림
+
+### 권장 이유
+- Windows 환경과 높은 호환성
+- 보안 및 감사 기능 우수
+- 사용자 PC까지 통합 관리 가능
+- 경영진 보고 자동화 가능
+
+---
+
+## 12. 보안 요구사항
+
+- MFA(다중 인증)
+- RBAC(역할 기반 권한 관리)
+- TLS 암호화
+- 감사 로그 저장
+- 승인된 관리자만 원격 접속
+- 사용자 동의 기반 개인 PC 점검
+
+---
+
+## 13. 구축 일정 (예시)
+
+| 단계 | 기간 |
+|------|------|
+| 요구사항 분석 | 2주 |
+| 솔루션 선정 | 2주 |
+| PoC | 4주 |
+| 설계 및 개발 | 6주 |
+| 시범 운영 | 4주 |
+| 전사 확대 | 4주 |
+
+총 예상 기간: 약 4~6개월
+
+---
+
+## 14. 예상 비용 (예시)
+
+| 항목 | 비용 수준 |
+|------|----------|
+| Intune 라이선스 | 사용자당 월 과금 |
+| TeamViewer Tensor | 동시 세션 기준 |
+| 개발 비용 | 중~고 |
+| 운영 비용 | 중간 |
+
+---
+
+## 15. 구축 우선순위
+
+### 1단계
+- 핵심 서버 모니터링
+- 관리자 대시보드
+
+### 2단계
+- 원격 접속 통합
+- 자동 알림
+
+### 3단계
+- 개인 PC 자가 점검
+
+### 4단계
+- Power BI 경영 보고
+
+---
+
+## 16. 최종 권장안
+
+> Microsoft Intune + TeamViewer Tensor + PowerShell + SQL Server + Power BI
+
+이 조합은 다음 요구사항을 모두 충족합니다.
+- 자동 점검
+- 이상 탐지
+- 원격 접속
+- 사용자 자가 점검
+- 이력 관리
+- 감사 대응
+- 경영진 보고
+
+---
+
+## 17. 공식 출처 및 링크
+
+- Microsoft Intune: https://intune.microsoft.com
+- TeamViewer Tensor: https://www.teamviewer.com/en/tensor/
+- TeamViewer RMM 소개: https://www.teamviewer.com/en/solutions/use-cases/rmm-remote-monitoring-management/
+- ManageEngine Endpoint Central: https://www.manageengine.com/products/endpoint-central/
+- Zabbix: https://www.zabbix.com
+- Power BI: https://powerbi.microsoft.com
+- Microsoft SQL Server: https://www.microsoft.com/sql-server
+- Splashtop RMM 설명: https://www.splashtop.com/blog/what-is-remote-monitoring-and-management
+
+---
+
+## 18. 결론
+
+본 시스템은 서버, 업무용 PC, 개인 PC를 통합 관리하여
+정기적인 자동 점검과 이상 탐지, 원격 접속, 사용자 자가 점검, 점검 이력 관리까지 지원하는
+기업용 IT 운영 플랫폼입니다.
+
+특히 개인 PC의 자가 점검 기능과 관리자 추적 기능을 포함함으로써
+규정 준수와 운영 효율성을 동시에 확보할 수 있습니다.