자산관리 시스템 도커라이징

1. 자산 저장 시 500 에러 해결: V3 정규화 스키마에 맞춰 테이블 매핑 최신화 및 저장 로직 안정화
2. 자산 번호 체계 개편: 구매일자(YYYYMM)와 유형을 기반으로 PREFIX-YYYYMM-NNNN 규칙 적용 (코드 로직 수정 및 기존 데이터 전량 갱신)
3. 구매일자 표준화: 모든 purchase_date를 YYYY-MM-DD 형식으로 통일
4. HWModal 기능 복원: 위치 등록 시 다중 사진 페이지네이션(좌우 버튼) 기능 복구
5. 위치 지도 고도화: HTML 인터랙티브 지도 지원 및 이미지 지도 내 좌석 스내핑 로직 추가

.dockerignore

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

.env

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

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.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"]

doc_readme.md

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

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 구조는 역사적으로 한 번 사용했던 임시 해결책으로만 남아 있다.

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/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_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 데이터가 재시작 후에도 유지된다.
+
+이 문서는 실제 구현 작업의 체크리스트로 사용한다.

index.html

@@ -19,36 +19,6 @@
 </head>
 
 <body>
-  <!-- Login Screen -->
-  <div id="login-container" class="login-layout">
-    <div class="login-card">
-      <div class="login-header">
-        <img src="/image 92.png" alt="Logo" class="login-logo" />
-        <h2>ITAM 시스템</h2>
-        <p>자산 관리 포털에 오신 것을 환영합니다</p>
-      </div>
-      <div id="login-selection" class="login-selection">
-        <div class="role-card" data-role="admin">
-          <div class="role-icon">
-            <i data-lucide="settings"></i>
-          </div>
-          <h3>관리자</h3>
-          <p>시스템 설정 및 자산 마스터 관리</p>
-        </div>
-        <div class="role-card" data-role="user">
-          <div class="role-icon">
-            <i data-lucide="monitor"></i>
-          </div>
-          <h3>실무자</h3>
-          <p>자산 조회 및 현황 확인</p>
-        </div>
-      </div>
-      <div class="login-footer">
-        <p>&copy; 2026 BARON Consultant Co,Ltd. All rights reserved.</p>
-      </div>
-    </div>
-  </div>
-
   <div class="app-layout" id="app-layout" style="display: none;">
     <!-- Single-Line Integrated Header -->
     <header class="main-header">

migrate_v6_parts_master.js

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

server.js

@@ -4,7 +4,22 @@ import cors from 'cors';
 import dotenv from 'dotenv';
 import fs from 'fs';
 
-dotenv.config({ override: true });
+dotenv.config();
+
+const dbConfig = {
+  host: process.env.DB_HOST,
+  user: process.env.DB_USER,
+  password: process.env.DB_PASS,
+  database: process.env.DB_NAME,
+  port: parseInt(process.env.DB_PORT || '3306')
+};
+
+const getDbConnectionSummary = () => ({
+  host: dbConfig.host || '(missing)',
+  port: dbConfig.port,
+  user: dbConfig.user || '(missing)',
+  database: dbConfig.database || '(missing)'
+});
 
 const app = express();
 app.use(cors());
@@ -18,43 +33,84 @@ if (!fs.existsSync('uploads')) {
 
 // MySQL Pool Configuration
 const pool = mysql.createPool({
-  host: process.env.DB_HOST,
-  user: process.env.DB_USER,
-  password: process.env.DB_PASS,
-  database: process.env.DB_NAME,
-  port: parseInt(process.env.DB_PORT || '3306'),
+  host: dbConfig.host,
+  user: dbConfig.user,
+  password: dbConfig.password,
+  database: dbConfig.database,
+  port: dbConfig.port,
   waitForConnections: true,
   connectionLimit: 10,
   queueLimit: 0
 });
 
+// Database startup check (ensure job_spec_standards table exists)
+(async () => {
+  let connection;
+  try {
+    connection = await pool.getConnection();
+    await connection.query(`
+      CREATE TABLE IF NOT EXISTS job_spec_standards (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        job_name VARCHAR(100) UNIQUE NOT NULL,
+        cpu_standard VARCHAR(255),
+        ram_standard VARCHAR(100),
+        gpu_standard VARCHAR(100),
+        min_score INT DEFAULT 0,
+        remarks TEXT,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+    `);
+    console.log('✅ job_spec_standards table verification completed.');
+  } catch (err) {
+    console.error('❌ Failed to verify/create job_spec_standards table:', {
+      db: getDbConnectionSummary(),
+      code: err.code,
+      errno: err.errno,
+      syscall: err.syscall,
+      address: err.address,
+      port: err.port,
+      message: err.message
+    });
+  } finally {
+    if (connection) connection.release();
+  }
+})();
+
 // Error Handler
 const handleError = (res, err, label) => {
-  console.error(`❌ [${label}] Error:`, err);
+  console.error(`❌ [${label}] Error:`, {
+    db: getDbConnectionSummary(),
+    code: err.code,
+    errno: err.errno,
+    syscall: err.syscall,
+    address: err.address,
+    port: err.port,
+    message: err.message
+  });
   res.status(500).json({ error: err.message });
 };
 
 // --- Global Constants ---
 const CATEGORY_TABLE_MAP = {
-  pc: 'asset_pc',
-  server: 'asset_server',
-  storage: 'asset_storage',
-  network: 'asset_remote',
-  equipment: 'asset_equipment',
-  officeSupplies: 'asset_office_supplies',
-  survey: 'asset_survey',
-  vip: 'asset_vip',
-  swInternal: 'sw_internal',
-  swExternal: 'sw_external',
-  cloud: 'asset_cloud',
+  pc: 'asset_core',
+  server: 'asset_core',
+  storage: 'asset_core',
+  network: 'asset_core',
+  equipment: 'asset_core',
+  officeSupplies: 'asset_core',
+  survey: 'asset_core',
+  vip: 'asset_core',
+  pcParts: 'asset_core',
+  swInternal: 'asset_software_perpetual',
+  swExternal: 'asset_software_subscription',
+  swUsers: 'asset_software_assignment',
   users: 'system_users',
-  swUsers: 'sw_assignment',
   logs: 'asset_history'
 };
 
 const ASSET_TABLES = [
-  'asset_pc', 'asset_server', 'asset_storage', 'asset_remote', 
-  'asset_equipment', 'asset_office_supplies', 'asset_survey', 'asset_vip'
+  'asset_core'
 ];
 
 // --- API Endpoints ---
@@ -101,15 +157,17 @@ app.post('/api/:table/batch', async (req, res) => {
 
 // 2. Get All Assets (Integrated Master Data from Normalized V3 Schema)
 app.get('/api/assets/master', async (req, res) => {
+  let connection;
   try {
-    const connection = await pool.getConnection();
+    connection = await pool.getConnection();
 
     const masterData = {
       pc: [], server: [], storage: [], network: [],
       equipment: [], officeSupplies: [], survey: [], vip: [], pcParts: [],
-      swInternal: [], swExternal: [], swUsers: [], users: [], logs: []
+      swInternal: [], swExternal: [], swUsers: [], users: [], logs: [], partsMaster: []
     };
 
+    // Load from V3 Normalized Schema
     const [rows] = await connection.query(`
       SELECT 
         c.*, 
@@ -149,17 +207,22 @@ app.get('/api/assets/master', async (req, res) => {
     const [swUsers] = await connection.query('SELECT * FROM asset_software_assignment');
     const [users] = await connection.query('SELECT * FROM system_users');
     const [logs] = await connection.query('SELECT * FROM asset_history ORDER BY created_at DESC');
+    const [partsMaster] = await connection.query('SELECT * FROM hardware_components_master ORDER BY category, component_name');
+    const [jobSpecs] = await connection.query('SELECT * FROM job_spec_standards ORDER BY job_name');
     
     masterData.swInternal = swInternal;
     masterData.swExternal = swExternal;
     masterData.swUsers = swUsers;
     masterData.users = users;
     masterData.logs = logs;
+    masterData.partsMaster = partsMaster;
+    masterData.jobSpecs = jobSpecs;
 
-    connection.release();
     res.json(masterData);
   } catch (err) {
     handleError(res, err, 'MASTER DATA');
+  } finally {
+    if (connection) connection.release();
   }
 });
 
@@ -177,15 +240,11 @@ app.post('/api/asset/:category/save', async (req, res) => {
     const oldCore = oldCoreRows[0] || {};
     const oldSpec = oldSpecRows[0] || {};
 
-    console.log(`🔍 [History Check] ID: ${asset.id}`);
-    console.log(`   - Dept: [${oldCore.current_dept}] -> [${asset.current_dept}]`);
-    console.log(`   - User: [${oldCore.user_current}] -> [${asset.user_current}]`);
-
     const historyLogs = [];
     const logDate = new Date().toISOString().split('T')[0]; // YYYY-MM-DD
     const logUser = '관리자';
 
-    // 조직 변동 감지 (null/undefined/empty string 세이프 처리)
+    // 3.0.1 Core 변동 감지 (Dept, User)
     const oldDept = oldCore.current_dept || '';
     const newDept = asset.current_dept || '';
     if (newDept !== '' && oldDept !== newDept) {
@@ -198,7 +257,6 @@ app.post('/api/asset/:category/save', async (req, res) => {
         });
     }
 
-    // 사용자 변동 감지
     const oldUser = oldCore.user_current || '';
     const newUser = asset.user_current || '';
     if (newUser !== '' && oldUser !== newUser) {
@@ -211,26 +269,27 @@ app.post('/api/asset/:category/save', async (req, res) => {
         });
     }
 
-    // 유형/용도 변경 감지
-    const oldType = oldCore.asset_type || '';
-    const newType = asset.asset_type || '';
-    if (newType !== '' && oldType !== newType) {
-        historyLogs.push({
-            event_type: 'ROLE_CHANGE',
-            details: `[유형 변경] ${oldType || '(없음)'} -> ${newType}`
-        });
-    }
+    // 3.0.2 Spec 변동 감지 (CPU, RAM, GPU, OS, Mainboard 등)
+    const specFieldsToTrack = [
+        { key: 'cpu', label: 'CPU' },
+        { key: 'ram', label: 'RAM' },
+        { key: 'gpu', label: 'GPU' },
+        { key: 'os', label: 'OS' },
+        { key: 'mainboard', label: '메인보드' }
+    ];
 
-    const oldRole = oldCore.current_role || '';
-    const newRole = asset.current_role || '';
-    if (newRole !== '' && oldRole !== newRole) {
-        historyLogs.push({
-            event_type: 'ROLE_CHANGE',
-            details: `[용도 변경] ${oldRole || '(없음)'} -> ${newRole}`
-        });
-    }
+    specFieldsToTrack.forEach(field => {
+        const oldVal = String(oldSpec[field.key] || '').trim();
+        const newVal = String(asset[field.key] || '').trim();
+        if (newVal !== '' && oldVal !== newVal) {
+            historyLogs.push({
+                event_type: 'SPEC_CHANGE',
+                details: `[사양 변경] ${field.label}: ${oldVal || '(없음)'} -> ${newVal}`
+            });
+        }
+    });
 
-    // 상태 변경 감지
+    // 3.0.3 상태 변경 감지
     const oldStatus = oldSpec.hw_status || '';
     const newStatus = asset.hw_status || '';
     if (newStatus !== '' && oldStatus !== newStatus) {
@@ -240,8 +299,6 @@ app.post('/api/asset/:category/save', async (req, res) => {
         });
     }
 
-    console.log(`   - Logs Generated: ${historyLogs.length}`);
-
     // 로그 일괄 삽입
     for (const log of historyLogs) {
         await connection.query(
@@ -256,8 +313,23 @@ app.post('/api/asset/:category/save', async (req, res) => {
     const coreData = {};
     coreFields.forEach(f => { if (asset[f] !== undefined) coreData[f] = asset[f]; });
     const coreKeys = Object.keys(coreData);
-    const coreSql = `INSERT INTO asset_core (${coreKeys.join(', ')}) VALUES (${coreKeys.map(() => '?').join(', ')}) ON DUPLICATE KEY UPDATE ${coreKeys.map(k => `${k} = VALUES(${k})`).join(', ')}`;
-    await connection.query(coreSql, Object.values(coreData));
+
+    console.log(`[DEBUG] Saving Asset ID: ${asset.id}, Code: ${asset.asset_code}`);
+    const [existingCore] = await connection.query('SELECT id FROM asset_core WHERE id = ?', [asset.id]);
+    console.log(`[DEBUG] Existing Core Check for ${asset.id}: Found ${existingCore.length}`);
+
+    if (existingCore.length > 0) {
+        // UPDATE
+        const updateKeys = coreKeys.filter(k => k !== 'id');
+        const coreSql = `UPDATE asset_core SET ${updateKeys.map(k => `${k} = ?`).join(', ')} WHERE id = ?`;
+        const [updRes] = await connection.query(coreSql, [...updateKeys.map(k => coreData[k]), asset.id]);
+        console.log(`[DEBUG] Core UPDATE result: affectedRows=${updRes.affectedRows}`);
+    } else {
+        // INSERT
+        const coreSql = `INSERT INTO asset_core (${coreKeys.join(', ')}) VALUES (${coreKeys.map(() => '?').join(', ')})`;
+        const [insRes] = await connection.query(coreSql, Object.values(coreData));
+        console.log(`[DEBUG] Core INSERT result: affectedRows=${insRes.affectedRows}`);
+    }
 
     // 3.2 asset_spec
     const specFields = ['hw_status', 'model_name', 'mainboard', 'os', 'cpu', 'ram', 'gpu', 'monitoring', 'price', 'monitor_inch', 'serial_num'];
@@ -362,19 +434,19 @@ app.post('/api/pc/flow', async (req, res) => {
         [userName, empNo, dept, position, assetId]
       );
       await connection.query(
-        `UPDATE asset_spec SET hw_status = '사용중' WHERE asset_id = ?`,
+        `UPDATE asset_spec SET hw_status = '운영' WHERE asset_id = ?`,
         [assetId]
       );
     } else if (action === 'return') {
       await connection.query(
         `UPDATE asset_core 
          SET previous_user = user_current, previous_dept = current_dept, 
-             user_current = '', emp_no = '', current_dept = '재고창고', user_position = '' 
+             user_current = '', emp_no = '', user_position = '' 
          WHERE id = ?`,
         [assetId]
       );
       await connection.query(
-        `UPDATE asset_spec SET hw_status = '대기' WHERE asset_id = ?`,
+        `UPDATE asset_spec SET hw_status = '재고' WHERE asset_id = ?`,
         [assetId]
       );
     } else if (action === 'move') {
@@ -386,7 +458,7 @@ app.post('/api/pc/flow', async (req, res) => {
         [userName, empNo, dept, position, assetId]
       );
       await connection.query(
-        `UPDATE asset_spec SET hw_status = '사용중' WHERE asset_id = ?`,
+        `UPDATE asset_spec SET hw_status = '운영' WHERE asset_id = ?`,
         [assetId]
       );
     } else {
@@ -483,6 +555,157 @@ app.get('/api/maps', (req, res) => {
   } catch (err) { handleError(res, err, 'GET MAPS'); }
 });
 
+// 6.5. Get Hardware Components Master List
+app.get('/api/hardware-components', async (req, res) => {
+  try {
+    const [rows] = await pool.query('SELECT * FROM hardware_components_master ORDER BY category, component_name');
+    res.json(rows);
+  } catch (err) {
+    handleError(res, err, 'GET HARDWARE COMPONENTS');
+  }
+});
+
+// 6.6. Save Hardware Component (Add or Update)
+app.post('/api/hardware-components/save', async (req, res) => {
+  const { id, category, component_name, score_tier, deduction } = req.body;
+  let connection;
+  try {
+    connection = await pool.getConnection();
+    if (id) {
+      await connection.query(
+        'UPDATE hardware_components_master SET category = ?, component_name = ?, score_tier = ?, deduction = ? WHERE id = ?',
+        [category, component_name, score_tier, deduction, id]
+      );
+    } else {
+      await connection.query(
+        'INSERT INTO hardware_components_master (category, component_name, score_tier, deduction) VALUES (?, ?, ?, ?)',
+        [category, component_name, score_tier, deduction]
+      );
+    }
+    res.json({ success: true });
+  } catch (err) {
+    handleError(res, err, 'SAVE HARDWARE COMPONENT');
+  } finally {
+    if (connection) connection.release();
+  }
+});
+
+// 6.7. Delete Hardware Component
+app.delete('/api/hardware-components/:id', async (req, res) => {
+  const { id } = req.params;
+  let connection;
+  try {
+    connection = await pool.getConnection();
+    await connection.query('DELETE FROM hardware_components_master WHERE id = ?', [id]);
+    res.json({ success: true });
+  } catch (err) {
+    handleError(res, err, 'DELETE HARDWARE COMPONENT');
+  } finally {
+    if (connection) connection.release();
+  }
+});
+
+// 6.7.1. Get Job Spec Standards
+app.get('/api/job-specs', async (req, res) => {
+  try {
+    const [rows] = await pool.query('SELECT * FROM job_spec_standards ORDER BY job_name');
+    res.json(rows);
+  } catch (err) {
+    handleError(res, err, 'GET JOB SPECS');
+  }
+});
+
+// 6.7.2. Save Job Spec Standard (Add or Update)
+app.post('/api/job-specs/save', async (req, res) => {
+  const { id, job_name, cpu_standard, ram_standard, gpu_standard, min_score, remarks } = req.body;
+  let connection;
+  try {
+    connection = await pool.getConnection();
+    if (id) {
+      await connection.query(
+        'UPDATE job_spec_standards SET job_name = ?, cpu_standard = ?, ram_standard = ?, gpu_standard = ?, min_score = ?, remarks = ? WHERE id = ?',
+        [job_name, cpu_standard, ram_standard, gpu_standard, min_score, remarks, id]
+      );
+    } else {
+      await connection.query(
+        'INSERT INTO job_spec_standards (job_name, cpu_standard, ram_standard, gpu_standard, min_score, remarks) VALUES (?, ?, ?, ?, ?, ?)',
+        [job_name, cpu_standard, ram_standard, gpu_standard, min_score, remarks]
+      );
+    }
+    res.json({ success: true });
+  } catch (err) {
+    handleError(res, err, 'SAVE JOB SPEC');
+  } finally {
+    if (connection) connection.release();
+  }
+});
+
+// 6.7.3. Delete Job Spec Standard
+app.delete('/api/job-specs/:id', async (req, res) => {
+  const { id } = req.params;
+  let connection;
+  try {
+    connection = await pool.getConnection();
+    await connection.query('DELETE FROM job_spec_standards WHERE id = ?', [id]);
+    res.json({ success: true });
+  } catch (err) {
+    handleError(res, err, 'DELETE JOB SPEC');
+  } finally {
+    if (connection) connection.release();
+  }
+});
+
+// 6.8. Get System Users List
+app.get('/api/system-users', async (req, res) => {
+  try {
+    const [rows] = await pool.query('SELECT * FROM system_users ORDER BY user_name');
+    res.json(rows);
+  } catch (err) {
+    handleError(res, err, 'GET SYSTEM USERS');
+  }
+});
+
+// 6.9. Save System User (Add or Update)
+app.post('/api/system-users/save', async (req, res) => {
+  const { id, emp_no, user_name, dept_name, position, status } = req.body;
+  let connection;
+  try {
+    connection = await pool.getConnection();
+    if (id) {
+      await connection.query(
+        'UPDATE system_users SET emp_no = ?, user_name = ?, dept_name = ?, position = ?, status = ? WHERE id = ?',
+        [emp_no, user_name, dept_name, position, status, id]
+      );
+    } else {
+      const newId = 'USER-' + Math.random().toString(36).substring(2, 9).toUpperCase();
+      await connection.query(
+        'INSERT INTO system_users (id, emp_no, user_name, dept_name, position, status) VALUES (?, ?, ?, ?, ?, ?)',
+        [newId, emp_no, user_name, dept_name, position, status]
+      );
+    }
+    res.json({ success: true });
+  } catch (err) {
+    handleError(res, err, 'SAVE SYSTEM USER');
+  } finally {
+    if (connection) connection.release();
+  }
+});
+
+// 6.10. Delete System User
+app.delete('/api/system-users/:id', async (req, res) => {
+  const { id } = req.params;
+  let connection;
+  try {
+    connection = await pool.getConnection();
+    await connection.query('DELETE FROM system_users WHERE id = ?', [id]);
+    res.json({ success: true });
+  } catch (err) {
+    handleError(res, err, 'DELETE SYSTEM USER');
+  } finally {
+    if (connection) connection.release();
+  }
+});
+
 app.post('/api/maps/save', (req, res) => {
   try {
     const { path, boxes } = req.body;

src/components/Modal/HWModal.ts

@@ -1,5 +1,6 @@
 import { state, saveAsset, deleteAsset } from '../../core/state';
 import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
+import { calculatePcScoreDeductive, getPcGrade } from '../../core/utils';
 import { 
   generateOptionsHTML, 
   setFieldValue, 
@@ -13,6 +14,7 @@ import { BaseModal } from './BaseModal';
 
 class HwAssetModal extends BaseModal {
   private dynamicMapConfig: Record<string, any[]> = {};
+  private masterComponents: any[] = [];
 
   constructor() {
     super('hw', '자산 상세 정보');
@@ -24,6 +26,39 @@ class HwAssetModal extends BaseModal {
     const btnStyle = `padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; white-space: nowrap; cursor: pointer; ${sharedStyle}`;
 
     return `
+      <style>
+        .autocomplete-list {
+          position: absolute;
+          top: 100%;
+          left: 0;
+          right: 0;
+          max-height: 150px;
+          overflow-y: auto;
+          background-color: white;
+          border: 1px solid var(--border-color, #E2E8F0);
+          border-top: none;
+          border-radius: 0 0 4px 4px;
+          z-index: 1000;
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+        .autocomplete-item {
+          padding: 8px 12px;
+          font-size: 13px;
+          color: #334155;
+          cursor: pointer;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .autocomplete-item:hover {
+          background-color: #F1F5F9;
+          color: #1E5149;
+          font-weight: 600;
+        }
+        .hidden {
+          display: none !important;
+        }
+      </style>
       <div id="hw-asset-modal" class="modal-overlay hidden">
         <div class="modal-content wide">
           <div class="modal-header">
@@ -131,22 +166,31 @@ class HwAssetModal extends BaseModal {
                     <label>${ASSET_SCHEMA.OS.ui}</label>
                     <input type="text" id="hw-os" name="os" style="${inputStyle}" />
                   </div>
-                  <div class="form-group spec-only">
+                  <div class="form-group spec-only" style="position: relative;">
                     <label>${ASSET_SCHEMA.CPU.ui}</label>
-                    <input type="text" id="hw-cpu" name="cpu" style="${inputStyle}" />
+                    <input type="text" id="hw-cpu" name="cpu" autocomplete="off" placeholder="CPU 부품 검색..." style="${inputStyle}" />
+                    <div id="hw-cpu-autocomplete" class="autocomplete-list hidden"></div>
                   </div>
-                  <div class="form-group spec-only">
+                  <div class="form-group spec-only" style="position: relative;">
                     <label>${ASSET_SCHEMA.RAM.ui}</label>
-                    <input type="text" id="hw-ram" name="ram" style="${inputStyle}" />
+                    <input type="text" id="hw-ram" name="ram" autocomplete="off" placeholder="RAM 부품 검색..." style="${inputStyle}" />
+                    <div id="hw-ram-autocomplete" class="autocomplete-list hidden"></div>
                   </div>
-                  <div class="form-group spec-only">
+                  <div class="form-group spec-only" style="position: relative;">
                     <label>${ASSET_SCHEMA.GPU.ui}</label>
-                    <input type="text" id="hw-gpu" name="gpu" style="${inputStyle}" />
+                    <input type="text" id="hw-gpu" name="gpu" autocomplete="off" placeholder="GPU 부품 검색..." style="${inputStyle}" />
+                    <div id="hw-gpu-autocomplete" class="autocomplete-list hidden"></div>
                   </div>
                   <div class="form-group spec-only">
                     <label>${ASSET_SCHEMA.MAINBOARD.ui}</label>
                     <input type="text" id="hw-mainboard" name="mainboard" style="${inputStyle}" />
                   </div>
+                  <div class="form-group spec-only">
+                    <label>성능 등급</label>
+                    <div id="hw-pc-grade-container" style="display: flex; align-items: center; height: 38px;">
+                      <span class="badge b-yellow" id="hw-pc-grade-badge">-</span>
+                    </div>
+                  </div>
                   <div class="form-group monitor-only">
                     <label>${ASSET_SCHEMA.MONITOR_INCH.ui}</label>
                     <input type="text" id="hw-monitor_inch" name="monitor_inch" style="${inputStyle}" />
@@ -257,6 +301,18 @@ class HwAssetModal extends BaseModal {
     bindLocationEvents('hw-bldg-select', 'hw-location_detail', '', '');
     applyDateMask(document.getElementById('hw-purchase_date') as HTMLInputElement);
 
+    this.fetchMasterComponents().then(() => {
+      this.bindAutocomplete('hw-cpu', 'hw-cpu-autocomplete', 'CPU');
+      this.bindAutocomplete('hw-ram', 'hw-ram-autocomplete', 'RAM');
+      this.bindAutocomplete('hw-gpu', 'hw-gpu-autocomplete', 'GPU');
+    });
+
+    const specInputs = ['hw-cpu', 'hw-ram', 'hw-gpu', 'hw-purchase_date'];
+    specInputs.forEach(id => {
+      document.getElementById(id)?.addEventListener('input', () => this.updatePcGradeBadge());
+      document.getElementById(id)?.addEventListener('change', () => this.updatePcGradeBadge());
+    });
+
     categorySelect.addEventListener('change', () => {
       const types = CATEGORY_TYPE_MAP[categorySelect.value] || [];
       typeSelect.innerHTML = types.length > 0 ? generateOptionsHTML(types, '', true) : '<option value="">구분을 먼저 선택하세요</option>';
@@ -268,10 +324,21 @@ class HwAssetModal extends BaseModal {
     });
 
     document.getElementById('btn-gen-hw-code')?.addEventListener('click', async () => {
+      const type = typeSelect.value;
       const cat = categorySelect.value;
-      if (!cat) { alert('구분을 먼저 선택해주세요.'); return; }
-      const prefix = TYPE_PREFIX_MAP[cat] || 'ETC';
-      const purchaseDate = (document.getElementById('hw-purchase_date') as HTMLInputElement)?.value || '';
+      if (!type) { alert('유형을 먼저 선택해주세요.'); return; }
+      
+      const purchaseDateEl = document.getElementById('hw-purchase_date') as HTMLInputElement;
+      const purchaseDate = purchaseDateEl?.value || '';
+
+      if (!purchaseDate) {
+        alert('구매일자를 먼저 입력해야 자산번호 생성이 가능합니다.');
+        purchaseDateEl?.focus();
+        return;
+      }
+      
+      // 유형 기반 매핑 우선, 없으면 구분 기반, 그래도 없으면 ETC
+      const prefix = TYPE_PREFIX_MAP[type] || TYPE_PREFIX_MAP[cat] || 'ETC';
       try {
         const res = await fetch(`http://${location.hostname}:3000/api/generate-asset-code?prefix=${prefix}&purchaseDate=${purchaseDate}`);
         const data = await res.json();
@@ -362,6 +429,35 @@ class HwAssetModal extends BaseModal {
         return;
       }
 
+      // CPU, RAM, GPU 마스터 테이블 기반 유효성 검사 (완전 강제 방식)
+      const category = categorySelect.value;
+      const type = typeSelect.value;
+      const specCategories = ['PC', '서버', '노트북', '스토리지', '워크스테이션'];
+      const hasSpec = specCategories.includes(category) || type.includes('서버PC');
+
+      if (hasSpec) {
+        const cpuVal = (document.getElementById('hw-cpu') as HTMLInputElement)?.value || '';
+        const ramVal = (document.getElementById('hw-ram') as HTMLInputElement)?.value || '';
+        const gpuVal = (document.getElementById('hw-gpu') as HTMLInputElement)?.value || '';
+
+        const cpuMaster = this.masterComponents.filter(c => c.category === 'CPU').map(c => c.component_name);
+        const ramMaster = this.masterComponents.filter(c => c.category === 'RAM').map(c => c.component_name);
+        const gpuMaster = this.masterComponents.filter(c => c.category === 'GPU').map(c => c.component_name);
+
+        if (cpuVal && !cpuMaster.includes(cpuVal)) {
+          alert(`[입력 오류] '${cpuVal}'은(는) 마스터 테이블에 존재하지 않는 CPU 부품명입니다. 자동완성 추천 목록에서 올바른 부품명을 골라 선택해 주세요.`);
+          return;
+        }
+        if (ramVal && !ramMaster.includes(ramVal)) {
+          alert(`[입력 오류] '${ramVal}'은(는) 마스터 테이블에 존재하지 않는 RAM 부품명입니다. 자동완성 추천 목록에서 올바른 부품명을 골라 선택해 주세요.`);
+          return;
+        }
+        if (gpuVal && !gpuMaster.includes(gpuVal)) {
+          alert(`[입력 오류] '${gpuVal}'은(는) 마스터 테이블에 존재하지 않는 GPU 부품명입니다. 자동완성 추천 목록에서 올바른 부품명을 골라 선택해 주세요.`);
+          return;
+        }
+      }
+
       // 동적 볼륨 데이터 수집
       const vols: any[] = [];
       document.querySelectorAll('#hw-volume-container .volume-row').forEach((row, idx) => {
@@ -603,6 +699,7 @@ class HwAssetModal extends BaseModal {
     parseAndSetLocation(asset.location || '', asset.location_detail || '', 'hw-bldg-select', 'hw-location_detail');
     this.renderHistory(asset.id);
     this.applyRoleVisibility();
+    this.updatePcGradeBadge();
   }
 
   protected onAfterOpen(asset: any, mode: string): void {
@@ -690,29 +787,110 @@ class HwAssetModal extends BaseModal {
     overlay.className = 'image-picker-overlay';
     const renderContent = () => {
       const imgPath = imagePaths[currentIdx];
-      const digitalMap = this.generateDynamicSVG(imgPath);
+      const isMulti = imagePaths.length > 1;
+      const isHtmlMap = imgPath.toLowerCase().endsWith('.html');
+      const digitalMap = isHtmlMap ? '' : this.generateDynamicSVG(imgPath);
+      
       overlay.innerHTML = `
-        <div class="image-picker-header"><h3>${title}</h3><button class="btn-close-picker" style="background:none; border:none; color:white; font-size:24px; cursor:pointer;">&times;</button></div>
-        <div class="image-picker-content"><div class="layout-map-container" id="picker-container"><img src="${imgPath}" class="layout-map-img" /><div id="picker-marker" class="layout-marker hidden"></div><div class="digital-overlay-layer">${digitalMap}</div></div></div>
+        <div class="image-picker-header">
+          <h3>${title} ${isMulti ? `(${currentIdx + 1}/${imagePaths.length})` : ''}</h3>
+          <button class="btn-close-picker" style="background:none; border:none; color:white; font-size:24px; cursor:pointer;">&times;</button>
+        </div>
+        <div class="image-picker-content">
+          ${isMulti ? `
+            <div class="picker-nav prev ${currentIdx === 0 ? 'disabled' : ''}" style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); z-index: 100; cursor: pointer; background: rgba(0,0,0,0.5); color: white; padding: 20px 10px; border-radius: 5px; font-size: 24px; user-select: none;">◀</div>
+            <div class="picker-nav next ${currentIdx === imagePaths.length - 1 ? 'disabled' : ''}" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 100; cursor: pointer; background: rgba(0,0,0,0.5); color: white; padding: 20px 10px; border-radius: 5px; font-size: 24px; user-select: none;">▶</div>
+          ` : ''}
+          <div class="layout-map-container" id="picker-container">
+            ${isHtmlMap 
+              ? `<iframe src="${imgPath}" style="width:100%; height:100%; border:none; display:block;"></iframe>`
+              : `<img src="${imgPath}" class="layout-map-img" /><div id="picker-marker" class="layout-marker hidden"></div><div class="digital-overlay-layer">${digitalMap}</div>`
+            }
+          </div>
+        </div>
         <div class="image-picker-footer"><button id="btn-picker-cancel" class="btn btn-outline" style="color:white; border-color:white;">취소</button><button id="btn-picker-save" class="btn btn-primary">위치 확정</button></div>`;
+      
       let selectedX = ''; let selectedY = '';
-      const container = overlay.querySelector('#picker-container') as HTMLElement;
-      const marker = overlay.querySelector('#picker-marker') as HTMLElement;
-      container.addEventListener('click', (e) => {
-        const rect = container.getBoundingClientRect();
-        const x = ((e.clientX - rect.left) / rect.width) * 100;
-        const y = ((e.clientY - rect.top) / rect.height) * 100;
-        selectedX = x.toFixed(2); selectedY = y.toFixed(2);
-        marker.style.left = `${selectedX}%`; marker.style.top = `${selectedY}%`; marker.classList.remove('hidden');
-      });
-      overlay.querySelector('.btn-close-picker')?.addEventListener('click', () => overlay.remove());
-      overlay.querySelector('#btn-picker-cancel')?.addEventListener('click', () => overlay.remove());
-      overlay.querySelector('#btn-picker-save')?.addEventListener('click', () => {
-        if (!selectedX || !selectedY) { alert('위치를 선택해주세요.'); return; }
-        setFieldValue('hw-loc_x', selectedX); setFieldValue('hw-loc_y', selectedY);
-        setFieldValue('hw-location_photo', imagePaths[currentIdx]);
-        this.updateMapButtonVisibility(); overlay.remove();
-      });
+
+      if (isMulti) {
+        overlay.querySelector('.picker-nav.prev')?.addEventListener('click', (e) => { e.stopPropagation(); if (currentIdx > 0) { currentIdx--; renderContent(); } });
+        overlay.querySelector('.picker-nav.next')?.addEventListener('click', (e) => { e.stopPropagation(); if (currentIdx < imagePaths.length - 1) { currentIdx++; renderContent(); } });
+      }
+
+      if (isHtmlMap) {
+        // HTML 지도 메시지 리스너
+        const handleMessage = (e: MessageEvent) => {
+          if (e.data.type === 'PICK_LOCATION') {
+            selectedX = e.data.x;
+            selectedY = e.data.y;
+          }
+        };
+        window.addEventListener('message', handleMessage);
+        overlay.querySelector('.btn-close-picker')?.addEventListener('click', () => { window.removeEventListener('message', handleMessage); overlay.remove(); });
+        overlay.querySelector('#btn-picker-cancel')?.addEventListener('click', () => { window.removeEventListener('message', handleMessage); overlay.remove(); });
+        overlay.querySelector('#btn-picker-save')?.addEventListener('click', () => {
+          if (!selectedX || !selectedY) { alert('위치를 선택해주세요.'); return; }
+          setFieldValue('hw-loc_x', selectedX); setFieldValue('hw-loc_y', selectedY);
+          setFieldValue('hw-location_photo', imagePaths[currentIdx]);
+          this.updateMapButtonVisibility(); 
+          window.removeEventListener('message', handleMessage);
+          overlay.remove();
+        });
+      } else {
+        const container = overlay.querySelector('#picker-container') as HTMLElement;
+        const marker = overlay.querySelector('#picker-marker') as HTMLElement;
+        container.addEventListener('click', (e) => {
+          const rectBound = container.getBoundingClientRect();
+          const clickX = ((e.clientX - rectBound.left) / rectBound.width) * 100;
+          const clickY = ((e.clientY - rectBound.top) / rectBound.height) * 100;
+          
+          let snapped = false;
+          overlay.querySelectorAll('rect').forEach(rect => {
+            const rx = parseFloat(rect.getAttribute('x') || '0');
+            const ry = parseFloat(rect.getAttribute('y') || '0');
+            const rw = parseFloat(rect.getAttribute('width') || '0');
+            const rh = parseFloat(rect.getAttribute('height') || '0');
+
+            if (clickX >= rx && clickX <= rx + rw && clickY >= ry && clickY <= ry + rh) {
+              overlay.querySelectorAll('rect').forEach(r => {
+                  r.style.fill = 'rgba(30,81,73,0.05)'; 
+                  r.style.stroke = 'rgba(30,81,73,0.2)'; 
+                  r.style.strokeWidth = '0.2';
+              });
+              rect.style.fill = 'rgba(255, 61, 0, 0.4)';
+              rect.style.stroke = '#FF3D00';
+              rect.style.strokeWidth = '0.8';
+
+              selectedX = rx.toFixed(2);
+              selectedY = ry.toFixed(2);
+              
+              marker.style.left = `${rx + rw/2}%`;
+              marker.style.top = `${ry + rh/2}%`;
+              marker.classList.remove('hidden');
+              snapped = true;
+            }
+          });
+
+          if (!snapped) {
+              selectedX = '';
+              selectedY = '';
+              marker.classList.add('hidden');
+              overlay.querySelectorAll('rect').forEach(r => {
+                  r.style.fill = 'rgba(30,81,73,0.05)'; 
+                  r.style.stroke = 'rgba(30,81,73,0.2)'; 
+                  r.style.strokeWidth = '0.2';
+              });
+          }
+        });
+        overlay.querySelector('.btn-close-picker')?.addEventListener('click', () => overlay.remove());
+        overlay.querySelector('#btn-picker-cancel')?.addEventListener('click', () => overlay.remove());
+        overlay.querySelector('#btn-picker-save')?.addEventListener('click', () => {
+          if (!selectedX || !selectedY) { alert('위치를 선택해주세요.'); return; }
+          setFieldValue('hw-loc_x', selectedX); setFieldValue('hw-loc_y', selectedY);
+          setFieldValue('hw-location_photo', imagePaths[currentIdx]);
+          this.updateMapButtonVisibility(); overlay.remove();
+        });
+      }
     };
     renderContent(); document.body.appendChild(overlay);
   }
@@ -720,13 +898,26 @@ class HwAssetModal extends BaseModal {
   private openImagePreview(imagePath: string, title: string, x: string, y: string) {
     const overlay = document.createElement('div');
     overlay.className = 'image-picker-overlay';
-    const digitalMap = this.generateDynamicSVG(imagePath);
+    const isHtmlMap = imagePath.toLowerCase().endsWith('.html');
+    const digitalMap = isHtmlMap ? '' : this.generateDynamicSVG(imagePath);
+    
+    // HTML 지도인 경우 좌표를 쿼리 파라미터로 전달
+    const finalPath = isHtmlMap ? `${imagePath}?markerX=${x}&markerY=${y}` : imagePath;
+
     overlay.innerHTML = `
       <div class="image-picker-header"><h3>${title}</h3><button class="btn-close-picker" style="background:none; border:none; color:white; font-size:24px; cursor:pointer;">&times;</button></div>
-      <div class="image-picker-content"><div class="layout-map-container readonly"><img src="${imagePath}" class="layout-map-img" /><div id="preview-marker" class="layout-marker pulse-marker" style="left:${x}%; top:${y}%;"></div><div class="digital-overlay-layer">${digitalMap}</div></div></div>
+      <div class="image-picker-content">
+        <div class="layout-map-container readonly">
+          ${isHtmlMap 
+            ? `<iframe src="${finalPath}" style="width:100%; height:100%; border:none; display:block;"></iframe>`
+            : `<img src="${imagePath}" class="layout-map-img" /><div id="preview-marker" class="layout-marker pulse-marker" style="left:${x}%; top:${y}%;"></div><div class="digital-overlay-layer">${digitalMap}</div>`
+          }
+        </div>
+      </div>
       <div class="image-picker-footer"><button id="btn-preview-close" class="btn btn-primary">확인</button></div>`;
+    
     document.body.appendChild(overlay);
-    if (digitalMap) {
+    if (!isHtmlMap && digitalMap) {
       const curX = parseFloat(x || '0'); const curY = parseFloat(y || '0');
       overlay.querySelectorAll('rect').forEach(rect => {
         const sx = parseFloat(rect.getAttribute('x') || '0');
@@ -751,7 +942,7 @@ class HwAssetModal extends BaseModal {
     // state.masterData.logs에서 해당 자산의 이력 필터링 (최신순)
     const logs = (state.masterData.logs || [])
       .filter(l => l.asset_id === assetId)
-      .sort((a, b) => new Date(b.created_at || b.log_date).getTime() - new Date(a.created_at || a.log_date).getTime());
+      .sort((a, b) => new Date(b.created_at || b.log_date || '').getTime() - new Date(a.created_at || a.log_date || '').getTime());
 
     if (logs.length === 0) { 
       container.innerHTML = '<div class="empty-history">기록된 변동 이력이 없습니다.</div>'; 
@@ -806,6 +997,77 @@ class HwAssetModal extends BaseModal {
     if (cat === 'PC부품') return 'pcParts';
     return (cat === 'PC' || code.startsWith('PC')) ? 'pc' : 'officeSupplies';
   }
+
+  private async fetchMasterComponents(): Promise<void> {
+    try {
+      const res = await fetch(`http://${location.hostname}:3000/api/hardware-components`);
+      this.masterComponents = await res.json();
+    } catch (err) {
+      console.error('Failed to fetch master components:', err);
+    }
+  }
+
+  private bindAutocomplete(inputId: string, autocompleteId: string, category: string) {
+    const input = document.getElementById(inputId) as HTMLInputElement;
+    const list = document.getElementById(autocompleteId) as HTMLDivElement;
+    if (!input || !list) return;
+
+    const showList = (filterText: string = '') => {
+      if (!this.isEditMode) return;
+      const items = this.masterComponents.filter(c => c.category === category);
+      const filtered = filterText 
+        ? items.filter(c => c.component_name.toLowerCase().includes(filterText.toLowerCase()))
+        : items;
+
+      if (filtered.length === 0) {
+        list.innerHTML = '<div class="autocomplete-item" style="color: #94a3b8; cursor: default;">검색 결과 없음</div>';
+      } else {
+        list.innerHTML = filtered.map(c => `<div class="autocomplete-item" data-val="${c.component_name}">${c.component_name}</div>`).join('');
+      }
+      list.classList.remove('hidden');
+    };
+
+    input.addEventListener('focus', () => {
+      showList(input.value);
+    });
+
+    input.addEventListener('input', () => {
+      showList(input.value);
+    });
+
+    // 아이템 클릭 이벤트 위임
+    list.addEventListener('mousedown', (e) => {
+      const item = (e.target as HTMLElement).closest('.autocomplete-item');
+      if (item && item.getAttribute('data-val')) {
+        input.value = item.getAttribute('data-val') || '';
+        list.classList.add('hidden');
+        this.updatePcGradeBadge(); // 뱃지 즉시 업데이트
+      }
+    });
+
+    // 아웃사이드 클릭 시 닫기
+    document.addEventListener('mousedown', (e) => {
+      if (e.target !== input && !list.contains(e.target as Node)) {
+        list.classList.add('hidden');
+      }
+    });
+  }
+
+  private updatePcGradeBadge(): void {
+    const cpu = (document.getElementById('hw-cpu') as HTMLInputElement)?.value || '';
+    const ram = (document.getElementById('hw-ram') as HTMLInputElement)?.value || '';
+    const gpu = (document.getElementById('hw-gpu') as HTMLInputElement)?.value || '';
+    const date = (document.getElementById('hw-purchase_date') as HTMLInputElement)?.value || '';
+
+    const score = calculatePcScoreDeductive(cpu, ram, gpu, date);
+    const grade = getPcGrade(score);
+
+    const badge = document.getElementById('hw-pc-grade-badge');
+    if (badge) {
+      badge.textContent = `${grade.name} (${score}점)`;
+      badge.className = `badge ${grade.class}`;
+    }
+  }
 }
 
 export const hwModal = new HwAssetModal();

src/components/Modal/JobSpecModal.ts

@@ -0,0 +1,284 @@
+import { state, saveJobSpec, deleteJobSpec } from '../../core/state';
+import { BaseModal } from './BaseModal';
+import { setFieldValue } from './ModalUtils';
+import { UI_TEXT } from '../../core/schema';
+import { calculatePcScoreDeductive } from '../../core/utils';
+
+class JobSpecModal extends BaseModal {
+  constructor() {
+    super('job-spec', '직무별 기준 사양');
+  }
+
+  protected renderFrameHTML(): string {
+    const sharedStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0;';
+    const inputStyle = sharedStyle;
+
+    return `
+      <div id="job-spec-asset-modal" class="modal-overlay hidden">
+        <style>
+          .autocomplete-list {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            max-height: 150px;
+            overflow-y: auto;
+            background-color: white;
+            border: 1px solid var(--border-color, #E2E8F0);
+            border-top: none;
+            border-radius: 0 0 4px 4px;
+            z-index: 1000;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+          }
+          .autocomplete-item {
+            padding: 8px 12px;
+            font-size: 13px;
+            color: #334155;
+            cursor: pointer;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+          .autocomplete-item:hover {
+            background-color: #F1F5F9;
+            color: #1E5149;
+            font-weight: 600;
+          }
+          .hidden {
+            display: none !important;
+          }
+        </style>
+        <div class="modal-content" style="max-width: 500px; width: 100%;">
+          <div class="modal-header">
+            <h2 id="job-spec-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">\${this.title}</h2>
+            <button id="btn-close-job-spec-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">&times;</button>
+          </div>
+          <div class="modal-body" style="padding: 24px; overflow-y: auto;">
+            <form id="job-spec-asset-form" class="grid-form" style="display: flex; flex-direction: column; gap: 16px;">
+              <input type="hidden" id="job-spec-id" name="id" />
+              
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">직무명</label>
+                <input type="text" id="job-spec-job-name" name="job_name" placeholder="예: BIM 모델러, 개발자, 엔지니어" required style="\${inputStyle} width: 100%;" />
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px; position: relative;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 CPU 사양</label>
+                <input type="text" id="job-spec-cpu-standard" name="cpu_standard" placeholder="CPU 검색..." required style="\${inputStyle} width: 100%;" autocomplete="off" />
+                <div id="job-spec-cpu-autocomplete" class="autocomplete-list hidden"></div>
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px; position: relative;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 RAM 사양</label>
+                <input type="text" id="job-spec-ram-standard" name="ram_standard" placeholder="RAM 검색..." required style="\${inputStyle} width: 100%;" autocomplete="off" />
+                <div id="job-spec-ram-autocomplete" class="autocomplete-list hidden"></div>
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px; position: relative;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 GPU 사양</label>
+                <input type="text" id="job-spec-gpu-standard" name="gpu_standard" placeholder="GPU 검색..." required style="\${inputStyle} width: 100%;" autocomplete="off" />
+                <div id="job-spec-gpu-autocomplete" class="autocomplete-list hidden"></div>
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">성능 기준 점수 (이상, 자동 계산됨)</label>
+                <input type="number" id="job-spec-min-score" name="min_score" placeholder="자동 계산 대기..." required style="\${inputStyle} width: 100%;" readonly />
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">비고 (메모)</label>
+                <textarea id="job-spec-remarks" name="remarks" placeholder="기타 필요 사양 및 안내 사항" style="box-sizing: border-box !important; font-size: 13px; margin: 0; min-height: 80px; width: 100%; padding: 8px; border: 1px solid var(--border-color); border-radius: 4px; resize: vertical;"></textarea>
+              </div>
+            </form>
+          </div>
+          <div class="modal-footer" style="display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #f8fafc; border-top: 1px solid var(--border-color);">
+            <button id="btn-delete-job-spec-asset" class="btn btn-outline btn-danger" style="height: 42px;">삭제</button>
+            <div class="footer-actions" style="display: flex; gap: 8px;">
+              <button id="btn-revert-job-spec-edit" class="btn btn-outline hidden" style="height: 42px;">수정 취소</button>
+              <button id="btn-cancel-job-spec-modal" class="btn btn-outline" style="height: 42px;">닫기</button>
+              <button id="btn-save-job-spec-asset" class="btn btn-primary" style="height: 42px;">수정</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  protected initChildLogic(onSave: () => void, closeModals: () => void): void {
+    const saveBtn = document.getElementById('btn-save-job-spec-asset')!;
+    const revertBtn = document.getElementById('btn-revert-job-spec-edit')!;
+    const deleteBtn = document.getElementById('btn-delete-job-spec-asset')!;
+
+    saveBtn.addEventListener('click', async () => {
+      if (!this.currentAsset) return;
+      if (!this.isEditMode) {
+        this.setEditLockMode('edit');
+        this.isEditMode = true;
+        return;
+      }
+
+      const jobName = (document.getElementById('job-spec-job-name') as HTMLInputElement).value.trim();
+      const cpuStd = (document.getElementById('job-spec-cpu-standard') as HTMLInputElement).value.trim();
+      const ramStd = (document.getElementById('job-spec-ram-standard') as HTMLInputElement).value.trim();
+      const gpuStd = (document.getElementById('job-spec-gpu-standard') as HTMLInputElement).value.trim();
+      const minScoreStr = (document.getElementById('job-spec-min-score') as HTMLInputElement).value;
+      const remarks = (document.getElementById('job-spec-remarks') as HTMLTextAreaElement).value.trim();
+
+      if (!jobName) {
+        alert('직무명을 입력해 주세요.');
+        return;
+      }
+
+      const updated = {
+        id: this.currentAsset.id || null,
+        job_name: jobName,
+        cpu_standard: cpuStd,
+        ram_standard: ramStd,
+        gpu_standard: gpuStd,
+        min_score: minScoreStr !== '' ? parseInt(minScoreStr, 10) : 0,
+        remarks: remarks
+      };
+
+      if (await saveJobSpec(updated)) {
+        alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
+        onSave(); this.close(); closeModals();
+      }
+    });
+
+    revertBtn.addEventListener('click', () => {
+      this.setEditLockMode('view');
+      if (this.currentAsset) this.fillFormData(this.currentAsset);
+    });
+
+    deleteBtn.addEventListener('click', async () => {
+      if (!this.currentAsset || !this.currentAsset.id) return;
+      if (!confirm('정말로 이 직무별 기준 사양을 삭제하시겠습니까?')) return;
+
+      if (await deleteJobSpec(this.currentAsset.id)) {
+        alert('성공적으로 삭제되었습니다.');
+        onSave(); this.close(); closeModals();
+      }
+    });
+
+    // 자동완성 바인딩
+    this.bindAutocomplete('job-spec-cpu-standard', 'job-spec-cpu-autocomplete', 'CPU');
+    this.bindAutocomplete('job-spec-ram-standard', 'job-spec-ram-autocomplete', 'RAM');
+    this.bindAutocomplete('job-spec-gpu-standard', 'job-spec-gpu-autocomplete', 'GPU');
+
+    // 실시간 점수 계산 이벤트 바인딩
+    const inputs = ['job-spec-cpu-standard', 'job-spec-ram-standard', 'job-spec-gpu-standard'];
+    inputs.forEach(id => {
+      const el = document.getElementById(id);
+      el?.addEventListener('input', () => this.updateMinScore());
+      el?.addEventListener('change', () => this.updateMinScore());
+    });
+  }
+
+  private bindAutocomplete(inputId: string, autocompleteId: string, category: string) {
+    const input = document.getElementById(inputId) as HTMLInputElement;
+    const list = document.getElementById(autocompleteId) as HTMLDivElement;
+    if (!input || !list) return;
+
+    const showList = (filterText: string = '') => {
+      if (!this.isEditMode) return;
+      const items = (state.masterData.partsMaster || []).filter((c: any) => c.category === category);
+      const filtered = filterText 
+        ? items.filter((c: any) => c.component_name.toLowerCase().includes(filterText.toLowerCase()))
+        : items;
+
+      if (filtered.length === 0) {
+        list.innerHTML = '<div class="autocomplete-item" style="color: #94a3b8; cursor: default;">검색 결과 없음</div>';
+      } else {
+        list.innerHTML = filtered.map((c: any) => `<div class="autocomplete-item" data-val="${c.component_name}">${c.component_name}</div>`).join('');
+      }
+      list.classList.remove('hidden');
+    };
+
+    input.addEventListener('focus', () => {
+      showList(input.value);
+    });
+
+    input.addEventListener('input', () => {
+      showList(input.value);
+    });
+
+    list.addEventListener('mousedown', (e) => {
+      const item = (e.target as HTMLElement).closest('.autocomplete-item');
+      if (item && item.getAttribute('data-val')) {
+        input.value = item.getAttribute('data-val') || '';
+        list.classList.add('hidden');
+        this.updateMinScore();
+      }
+    });
+
+    document.addEventListener('mousedown', (e) => {
+      if (e.target !== input && !list.contains(e.target as Node)) {
+        list.classList.add('hidden');
+      }
+    });
+  }
+
+  private updateMinScore(): void {
+    const cpu = (document.getElementById('job-spec-cpu-standard') as HTMLInputElement)?.value || '';
+    const ram = (document.getElementById('job-spec-ram-standard') as HTMLInputElement)?.value || '';
+    const gpu = (document.getElementById('job-spec-gpu-standard') as HTMLInputElement)?.value || '';
+    
+    const score = calculatePcScoreDeductive(cpu, ram, gpu, '');
+    
+    const minScoreEl = document.getElementById('job-spec-min-score') as HTMLInputElement;
+    if (minScoreEl) {
+      minScoreEl.value = score.toString();
+    }
+  }
+
+  protected fillFormData(asset: any): void {
+    setFieldValue('job-spec-id', asset.id || '');
+    setFieldValue('job-spec-job-name', asset.job_name || '');
+    setFieldValue('job-spec-cpu-standard', asset.cpu_standard || '');
+    setFieldValue('job-spec-ram-standard', asset.ram_standard || '');
+    setFieldValue('job-spec-gpu-standard', asset.gpu_standard || '');
+    setFieldValue('job-spec-min-score', asset.min_score !== undefined ? asset.min_score.toString() : '100');
+    setFieldValue('job-spec-remarks', asset.remarks || '');
+  }
+
+  protected onAfterOpen(asset: any, mode: string): void {
+    const titleEl = document.getElementById('job-spec-modal-title');
+
+    if (titleEl) {
+      if (mode === 'add') {
+        titleEl.textContent = '신규 직무별 기준 사양 등록';
+      } else {
+        titleEl.textContent = '직무별 기준 사양 상세 편집';
+      }
+    }
+
+    const deleteBtn = document.getElementById('btn-delete-job-spec-asset')!;
+    const saveBtn = document.getElementById('btn-save-job-spec-asset')!;
+    
+    deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
+
+    if (mode === 'add') {
+      this.setEditLockMode('edit');
+      this.isEditMode = true;
+      saveBtn.textContent = '등록';
+      saveBtn.style.display = 'block';
+    } else {
+      this.setEditLockMode('view');
+      this.isEditMode = false;
+      saveBtn.textContent = '수정';
+      saveBtn.style.display = 'block';
+    }
+    
+    this.updateMinScore();
+  }
+}
+
+export const jobSpecModal = new JobSpecModal();
+
+export function initJobSpecModal(onSave: () => void, closeModals: () => void) {
+  jobSpecModal.init(onSave, closeModals);
+}
+
+export function openJobSpecModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
+  jobSpecModal.open(asset, mode);
+}

src/components/Modal/PCFlowModal.ts

@@ -201,7 +201,7 @@ export class PCFlowModal {
     const showStockSuggestions = () => {
       const query = stockSearch.value.trim().toLowerCase();
 
-      // Filter available PCs (category PC, status '대기' or '재고창고')
+      // Filter available PCs (category PC, status '대기', '미할당', or '재고')
       const pcs = state.masterData.pc || [];
       const filtered = pcs.filter((p: any) => {
         const status = (p.hw_status || '').trim();
@@ -210,7 +210,7 @@ export class PCFlowModal {
           (p.model_name && p.model_name.toLowerCase().includes(query)) ||
           (p.cpu && p.cpu.toLowerCase().includes(query));
         
-        return (status === '대기' || status === '재고창고' || status === '미할당') && matchesQuery;
+        return (status === '대기' || status === '미할당' || status === '재고') && matchesQuery;
       });
 
       this.renderPCSuggestions(filtered, stockSuggestions, (pc) => {

src/components/Modal/PartsMasterModal.ts

@@ -0,0 +1,166 @@
+import { state, savePartsMaster, deletePartsMaster } from '../../core/state';
+import { BaseModal } from './BaseModal';
+import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
+import { createIcons, X, Save, Database, Edit2, Plus } from 'lucide';
+import { UI_TEXT } from '../../core/schema';
+
+class PartsMasterModal extends BaseModal {
+  constructor() {
+    super('parts-master', '부품 표준 정보');
+  }
+
+  protected renderFrameHTML(): string {
+    const sharedStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0;';
+    const inputStyle = sharedStyle;
+    const selectStyle = sharedStyle;
+
+    return `
+      <div id="parts-master-asset-modal" class="modal-overlay hidden">
+        <div class="modal-content" style="max-width: 500px; width: 100%;">
+          <div class="modal-header">
+            <h2 id="parts-master-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">${this.title}</h2>
+            <button id="btn-close-parts-master-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">&times;</button>
+          </div>
+          <div class="modal-body" style="padding: 24px; overflow-y: auto;">
+            <form id="parts-master-asset-form" class="grid-form" style="display: flex; flex-direction: column; gap: 16px;">
+              <input type="hidden" id="parts-master-id" name="id" />
+              
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">부품 분류</label>
+                <select id="parts-master-category" name="category" style="${selectStyle}">
+                  <option value="CPU">CPU</option>
+                  <option value="GPU">GPU</option>
+                  <option value="RAM">RAM</option>
+                </select>
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">부품 표준 명칭</label>
+                <input type="text" id="parts-master-component-name" name="component_name" placeholder="예: Intel Core i7-14700K" required style="${inputStyle} width: 100%;" />
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">성능 등급</label>
+                <input type="text" id="parts-master-score-tier" name="score_tier" placeholder="예: i7 / S / 최적" required style="${inputStyle} width: 100%;" />
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">감점 점수 (양수로 입력)</label>
+                <input type="number" id="parts-master-deduction" name="deduction" placeholder="예: 5" required style="${inputStyle} width: 100%;" />
+              </div>
+            </form>
+          </div>
+          <div class="modal-footer" style="display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #f8fafc; border-top: 1px solid var(--border-color);">
+            <button id="btn-delete-parts-master-asset" class="btn btn-outline btn-danger" style="height: 42px;">삭제</button>
+            <div class="footer-actions" style="display: flex; gap: 8px;">
+              <button id="btn-revert-parts-master-edit" class="btn btn-outline hidden" style="height: 42px;">수정 취소</button>
+              <button id="btn-cancel-parts-master-modal" class="btn btn-outline" style="height: 42px;">닫기</button>
+              <button id="btn-save-parts-master-asset" class="btn btn-primary" style="height: 42px;">수정</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  protected initChildLogic(onSave: () => void, closeModals: () => void): void {
+    const saveBtn = document.getElementById('btn-save-parts-master-asset')!;
+    const revertBtn = document.getElementById('btn-revert-parts-master-edit')!;
+    const deleteBtn = document.getElementById('btn-delete-parts-master-asset')!;
+
+    saveBtn.addEventListener('click', async () => {
+      if (!this.currentAsset) return;
+      if (!this.isEditMode) {
+        this.setEditLockMode('edit');
+        this.isEditMode = true;
+        return;
+      }
+
+      const category = (document.getElementById('parts-master-category') as HTMLSelectElement).value;
+      const compName = (document.getElementById('parts-master-component-name') as HTMLInputElement).value.trim();
+      const tier = (document.getElementById('parts-master-score-tier') as HTMLInputElement).value.trim();
+      const deductStr = (document.getElementById('parts-master-deduction') as HTMLInputElement).value;
+
+      if (!compName || !tier || deductStr === '') {
+        alert('모든 필드를 올바르게 입력해 주세요.');
+        return;
+      }
+
+      const updated = {
+        id: this.currentAsset.id || null,
+        category,
+        component_name: compName,
+        score_tier: tier,
+        deduction: parseInt(deductStr, 10)
+      };
+
+      if (await savePartsMaster(updated)) {
+        alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
+        onSave(); this.close(); closeModals();
+      }
+    });
+
+    revertBtn.addEventListener('click', () => {
+      this.setEditLockMode('view');
+      if (this.currentAsset) this.fillFormData(this.currentAsset);
+    });
+
+    deleteBtn.addEventListener('click', async () => {
+      if (!this.currentAsset || !this.currentAsset.id) return;
+      if (!confirm('정말로 이 부품 마스터 정보를 삭제하시겠습니까?\n삭제 시 기존 등록 PC 중 이 부품명을 사용하는 PC의 자동완성 정합성 체크에 영향을 줄 수 있습니다.')) return;
+
+      if (await deletePartsMaster(this.currentAsset.id)) {
+        alert('성공적으로 삭제되었습니다.');
+        onSave(); this.close(); closeModals();
+      }
+    });
+  }
+
+  protected fillFormData(asset: any): void {
+    setFieldValue('parts-master-id', asset.id || '');
+    setFieldValue('parts-master-category', asset.category || 'CPU');
+    setFieldValue('parts-master-component-name', asset.component_name || '');
+    setFieldValue('parts-master-score-tier', asset.score_tier || '');
+    setFieldValue('parts-master-deduction', asset.deduction !== undefined ? asset.deduction.toString() : '0');
+  }
+
+  protected onAfterOpen(asset: any, mode: string): void {
+    const titleEl = document.getElementById('parts-master-modal-title');
+
+    if (titleEl) {
+      if (mode === 'add') {
+        titleEl.textContent = '신규 부품 마스터 등록';
+      } else {
+        titleEl.textContent = '부품 마스터 상세 편집';
+      }
+    }
+
+    const deleteBtn = document.getElementById('btn-delete-parts-master-asset')!;
+    const saveBtn = document.getElementById('btn-save-parts-master-asset')!;
+    
+    // 추가 모드일 때는 삭제 버튼 숨김
+    deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
+
+    if (mode === 'add') {
+      this.setEditLockMode('edit');
+      this.isEditMode = true;
+      saveBtn.textContent = '등록';
+      saveBtn.style.display = 'block';
+    } else {
+      this.setEditLockMode('view');
+      this.isEditMode = false;
+      saveBtn.textContent = '수정';
+      saveBtn.style.display = 'block';
+    }
+  }
+}
+
+export const partsMasterModal = new PartsMasterModal();
+
+export function initPartsMasterModal(onSave: () => void, closeModals: () => void) {
+  partsMasterModal.init(onSave, closeModals);
+}
+
+export function openPartsMasterModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
+  partsMasterModal.open(asset, mode);
+}

src/components/Modal/SharedData.ts

@@ -30,7 +30,7 @@ export const CATEGORY_TYPE_MAP: Record<string, string[]> = {
 // 설치위치 종속성 데이터
 export const LOCATION_DATA: Record<string, string[]> = {
   '한맥빌딩': ['MDF실', '1층', '2층', '3층', '4층', '5층', '6층', '7층', '파고라'],
-  '기술개발센터': ['서버실', 'BLUE ZONE', 'GREEN ZONE', 'ORANGE ZONE', '회의실2', '회의실3', '회의실5', '회의실6', '회의실7', '사이니지룸'],
+  '기술개발센터': ['서버실', '센터내부'],
   '유니온빌딩': ['4층', '5층', '6층'],
   '뉴코아빌딩': ['4층', '6층', '7층'],
   'IDC': ['서관202', '서관203', '서관204', '서관205', '동관53', '동관54']
@@ -60,10 +60,17 @@ export const IMAGE_LOCATIONS: Record<string, Record<string, string[]>> = {
     '서버실': [
       'img/location_photo/기술개발센터/서버실/서버실_1.png',
       'img/location_photo/기술개발센터/서버실/서버실_2.png'
-    ]
+    ],
+    '센터내부': ['img/location_photo/기술개발센터/센터내부/센터내부.png']
   },
   '한맥빌딩': {
-    '7층': ['img/location_photo/한맥빌딩/7층_로비.png'],
+    '1층': ['img/location_photo/한맥빌딩/1층.png'],
+    '2층': ['img/location_photo/한맥빌딩/2층.png'],
+    '3층': ['img/location_photo/한맥빌딩/3층.png'],
+    '4층': ['img/location_photo/한맥빌딩/4층.png'],
+    '5층': ['img/location_photo/한맥빌딩/5층.png'],
+    '6층': ['img/location_photo/한맥빌딩/6층.png'],
+    '7층': ['img/location_photo/한맥빌딩/7층.png'],
     'MDF실': [
       'img/location_photo/한맥빌딩/MDF실/MDF_1.png',
       'img/location_photo/한맥빌딩/MDF실/MDF_2.png',

src/components/Modal/UserModal.ts

@@ -0,0 +1,171 @@
+import { state, saveSystemUser, deleteSystemUser } from '../../core/state';
+import { BaseModal } from './BaseModal';
+import { setFieldValue } from './ModalUtils';
+import { createIcons, X, Save } from 'lucide';
+import { UI_TEXT } from '../../core/schema';
+
+class UserModal extends BaseModal {
+  constructor() {
+    super('user', '임직원 정보');
+  }
+
+  protected renderFrameHTML(): string {
+    const sharedStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0;';
+    const inputStyle = sharedStyle;
+
+    return `
+      <div id="user-asset-modal" class="modal-overlay hidden">
+        <div class="modal-content" style="max-width: 500px; width: 100%;">
+          <div class="modal-header">
+            <h2 id="user-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">\${this.title}</h2>
+            <button id="btn-close-user-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">&times;</button>
+          </div>
+          <div class="modal-body" style="padding: 24px; overflow-y: auto;">
+            <form id="user-asset-form" class="grid-form" style="display: flex; flex-direction: column; gap: 16px;">
+              <input type="hidden" id="user-id" name="id" />
+              
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">사번</label>
+                <input type="text" id="user-emp-no" name="emp_no" placeholder="예: HM202601" required style="\${inputStyle} width: 100%;" />
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">사용자명</label>
+                <input type="text" id="user-name-input" name="user_name" placeholder="예: 홍길동" required style="\${inputStyle} width: 100%;" />
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">사용조직 (부서)</label>
+                <input type="text" id="user-dept" name="dept_name" placeholder="예: 기술개발센터" required style="\${inputStyle} width: 100%;" />
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">직무 (직급)</label>
+                <input type="text" id="user-position-input" name="position" placeholder="예: BIM모델러" required style="\${inputStyle} width: 100%;" />
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">상태</label>
+                <select id="user-status" name="status" style="\${sharedStyle}">
+                  <option value="재직">재직</option>
+                  <option value="퇴직">퇴직</option>
+                </select>
+              </div>
+            </form>
+          </div>
+          <div class="modal-footer" style="display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #f8fafc; border-top: 1px solid var(--border-color);">
+            <button id="btn-delete-user-asset" class="btn btn-outline btn-danger" style="height: 42px;">삭제</button>
+            <div class="footer-actions" style="display: flex; gap: 8px;">
+              <button id="btn-revert-user-edit" class="btn btn-outline hidden" style="height: 42px;">수정 취소</button>
+              <button id="btn-cancel-user-modal" class="btn btn-outline" style="height: 42px;">닫기</button>
+              <button id="btn-save-user-asset" class="btn btn-primary" style="height: 42px;">수정</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  protected initChildLogic(onSave: () => void, closeModals: () => void): void {
+    const saveBtn = document.getElementById('btn-save-user-asset')!;
+    const revertBtn = document.getElementById('btn-revert-user-edit')!;
+    const deleteBtn = document.getElementById('btn-delete-user-asset')!;
+
+    saveBtn.addEventListener('click', async () => {
+      if (!this.currentAsset) return;
+      if (!this.isEditMode) {
+        this.setEditLockMode('edit');
+        this.isEditMode = true;
+        return;
+      }
+
+      const empNo = (document.getElementById('user-emp-no') as HTMLInputElement).value.trim();
+      const userName = (document.getElementById('user-name-input') as HTMLInputElement).value.trim();
+      const deptName = (document.getElementById('user-dept') as HTMLInputElement).value.trim();
+      const position = (document.getElementById('user-position-input') as HTMLInputElement).value.trim();
+      const status = (document.getElementById('user-status') as HTMLSelectElement).value;
+
+      if (!empNo || !userName || !deptName || !position) {
+        alert('모든 필수 입력 필드를 채워주세요.');
+        return;
+      }
+
+      const updated = {
+        id: this.currentAsset.id || null,
+        emp_no: empNo,
+        user_name: userName,
+        dept_name: deptName,
+        position: position,
+        status: status
+      };
+
+      if (await saveSystemUser(updated)) {
+        alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
+        onSave(); this.close(); closeModals();
+      }
+    });
+
+    revertBtn.addEventListener('click', () => {
+      this.setEditLockMode('view');
+      if (this.currentAsset) this.fillFormData(this.currentAsset);
+    });
+
+    deleteBtn.addEventListener('click', async () => {
+      if (!this.currentAsset || !this.currentAsset.id) return;
+      if (!confirm('정말로 이 임직원 정보를 삭제하시겠습니까?')) return;
+
+      if (await deleteSystemUser(this.currentAsset.id)) {
+        alert('성공적으로 삭제되었습니다.');
+        onSave(); this.close(); closeModals();
+      }
+    });
+  }
+
+  protected fillFormData(asset: any): void {
+    setFieldValue('user-id', asset.id || '');
+    setFieldValue('user-emp-no', asset.emp_no || '');
+    setFieldValue('user-name-input', asset.user_name || '');
+    setFieldValue('user-dept', asset.dept_name || '');
+    setFieldValue('user-position-input', asset.position || '');
+    setFieldValue('user-status', asset.status || '재직');
+  }
+
+  protected onAfterOpen(asset: any, mode: string): void {
+    const titleEl = document.getElementById('user-modal-title');
+
+    if (titleEl) {
+      if (mode === 'add') {
+        titleEl.textContent = '신규 임직원 등록';
+      } else {
+        titleEl.textContent = '임직원 정보 수정';
+      }
+    }
+
+    const deleteBtn = document.getElementById('btn-delete-user-asset')!;
+    const saveBtn = document.getElementById('btn-save-user-asset')!;
+    
+    deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
+
+    if (mode === 'add') {
+      this.setEditLockMode('edit');
+      this.isEditMode = true;
+      saveBtn.textContent = '등록';
+      saveBtn.style.display = 'block';
+    } else {
+      this.setEditLockMode('view');
+      this.isEditMode = false;
+      saveBtn.textContent = '수정';
+      saveBtn.style.display = 'block';
+    }
+  }
+}
+
+export const userModal = new UserModal();
+
+export function initUserModal(onSave: () => void, closeModals: () => void) {
+  userModal.init(onSave, closeModals);
+}
+
+export function openUserModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
+  userModal.open(asset, mode);
+}

src/components/Navigation.ts

@@ -3,7 +3,7 @@ import { state } from '../core/state';
 const MENU_CONFIG: any = {
   hw: {
     label: '하드웨어',
-    tabs: ['대시보드', '서버', 'PC', '스토리지', '공간정보장비', 'PC부품', '네트워크', '업무지원장비']
+    tabs: ['대시보드', '서버', 'PC', '스토리지', '공간정보장비', 'PC부품', '부품 마스터', '네트워크', '업무지원장비']
   },
   sw: {
     label: '소프트웨어',
@@ -11,7 +11,7 @@ const MENU_CONFIG: any = {
   },
   ops: {
     label: '운영지원',
-    tabs: ['클라우드', '도메인', '비용관리']
+    tabs: ['클라우드', '도메인', '비용관리', '사용자']
   },
   vip: {
     label: '내빈/외빈',
@@ -73,6 +73,7 @@ export function renderNavigation(onTabChange: (tab: string) => void) {
       shelf.className = 'lnb-shelf';
       
       visibleTabs.forEach((tab: string) => {
+        if (tab === '부품 마스터') return; // 메뉴바에서 표시 생략
         const item = document.createElement('div');
         item.className = `lnb-item ${isActive && state.activeSubTab === tab ? 'active' : ''}`;
         item.textContent = tab;

src/core/excelHandler.ts

@@ -27,10 +27,15 @@ export interface SWUser {
 
 export interface HardwareLog {
   id: string;
-  assetId: string;
-  date: string;
+  assetId?: string;
+  asset_id?: string;
+  date?: string;
+  log_date?: string;
+  created_at?: string;
   details: string;
-  user: string;
+  user?: string;
+  log_user?: string;
+  event_type?: string;
 }
 
 export interface MasterAssetData {

src/core/filterHandler.ts

@@ -15,17 +15,30 @@ export interface FilterOptions {
   showLoc?: boolean;
   showField?: boolean;
   showType?: boolean;
+  showStatus?: boolean;
   extraHTML?: string;
   onFilterChange: (filters: any) => void;
+  initialFilters?: any;
 }
 
 export function renderFilterBar(container: HTMLElement, options: FilterOptions) {
-  const { keywordLabel = '통합 검색', showCorp = false, showDept = false, showLoc = false, showField = false, showType = false, extraHTML = '', onFilterChange } = options;
+  const { 
+    keywordLabel = '통합 검색', 
+    showCorp = false, 
+    showDept = false, 
+    showLoc = false, 
+    showField = false, 
+    showType = false, 
+    showStatus = false,
+    extraHTML = '', 
+    onFilterChange,
+    initialFilters = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '', status: '' }
+  } = options;
 
   container.innerHTML = `
     <div class="search-item flex-1">
       <label>${keywordLabel}</label>
-      <input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
+      <input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off" value="${initialFilters.keyword || ''}">
     </div>
     ${showType ? `
     <div class="search-item">
@@ -34,21 +47,28 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
         <option value="">전체 유형</option>
       </select>
     </div>` : ''}
+    ${showStatus ? `
+    <div class="search-item">
+      <label>${ASSET_SCHEMA.HW_STATUS.ui}</label>
+      <select id="filter-status">
+        <option value="">전체 상태</option>
+      </select>
+    </div>` : ''}
     ${showField ? `
     <div class="search-item">
       <label>${ASSET_SCHEMA.SW_FIELD.ui}</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>
+        <option value="업무공통" ${initialFilters.field === '업무공통' ? 'selected' : ''}>업무공통</option>
+        <option value="개발S/W" ${initialFilters.field === '개발S/W' ? 'selected' : ''}>개발S/W</option>
+        <option value="디자인" ${initialFilters.field === '디자인' ? 'selected' : ''}>디자인</option>
+        <option value="설계S/W" ${initialFilters.field === '설계S/W' ? 'selected' : ''}>설계S/W</option>
       </select>
     </div>` : ''}
     ${showCorp ? `
     <div class="search-item">
       <label>${ASSET_SCHEMA.PURCHASE_CORP.ui}</label>
-      <select id="filter-corp">${generateOptionsHTML(CORP_LIST, '', true)}</select>
+      <select id="filter-corp">${generateOptionsHTML(CORP_LIST, initialFilters.corp || '', true)}</select>
     </div>` : ''}
     ${showLoc ? `
     <div class="search-item">
@@ -75,7 +95,8 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
       dept: (container.querySelector('#filter-dept') as HTMLSelectElement)?.value || '',
       loc: (container.querySelector('#filter-loc') as HTMLSelectElement)?.value || '',
       field: (container.querySelector('#filter-field') as HTMLSelectElement)?.value || '',
-      type: (container.querySelector('#filter-type') as HTMLSelectElement)?.value || ''
+      type: (container.querySelector('#filter-type') as HTMLSelectElement)?.value || '',
+      status: (container.querySelector('#filter-status') as HTMLSelectElement)?.value || ''
     };
     onFilterChange(filters);
   };
@@ -86,9 +107,10 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
   container.querySelector('#filter-loc')?.addEventListener('change', triggerChange);
   container.querySelector('#filter-field')?.addEventListener('change', triggerChange);
   container.querySelector('#filter-type')?.addEventListener('change', triggerChange);
+  container.querySelector('#filter-status')?.addEventListener('change', triggerChange);
 
   container.querySelector('#btn-reset-filters')?.addEventListener('click', () => {
-    ['filter-keyword', 'filter-corp', 'filter-dept', 'filter-loc', 'filter-field', 'filter-type'].forEach(id => {
+    ['filter-keyword', 'filter-corp', 'filter-dept', 'filter-loc', 'filter-field', 'filter-type', 'filter-status'].forEach(id => {
       const el = container.querySelector(`#${id}`);
       if (el) (el as any).value = '';
     });
@@ -109,7 +131,8 @@ export function applyCommonFilters(list: any[], filters: any, searchKeys: (keyof
     const matchLoc = !filters.loc || (item[ASSET_SCHEMA.LOCATION.key] || item[ASSET_SCHEMA.LOCATION.db]) === filters.loc;
     const matchField = !filters.field || (item[ASSET_SCHEMA.SW_FIELD.key] || item[ASSET_SCHEMA.SW_FIELD.db]) === filters.field;
     const matchType = !filters.type || (item[ASSET_SCHEMA.ASSET_TYPE.key] || item[ASSET_SCHEMA.ASSET_TYPE.db]) === filters.type;
+    const matchStatus = !filters.status || (item[ASSET_SCHEMA.HW_STATUS.key] || item[ASSET_SCHEMA.HW_STATUS.db]) === filters.status;
 
-    return matchKeyword && matchCorp && matchDept && matchLoc && matchField && matchType;
+    return matchKeyword && matchCorp && matchDept && matchLoc && matchField && matchType && matchStatus;
   });
 }

src/core/schema.ts

@@ -155,6 +155,21 @@ export const PAGE_DESCRIPTIONS: Record<string, { title: string; description: str
     title: '사무용 가구 관리',
     description: '책상, 의자, 캐비닛 등 사무 환경 구성을 위한 가구 자산의 배치 현황을 관리합니다.',
     icon: 'armchair'
+  },
+  '사용자': {
+    title: '임직원 사용자 관리',
+    description: 'IT 자산 할당 및 관리의 기준이 되는 사내 임직원(사용자) 정보를 데이터베이스 기반으로 직접 등록하고 수정합니다.',
+    icon: 'users'
+  },
+  '부품 마스터': {
+    title: '부품 표준 정보 관리',
+    description: 'PC 사양 적정성 평가의 기준이 되는 부품 표준 정보 및 등급별 감점 점수를 관리합니다.',
+    icon: 'cpu'
+  },
+  '직무별 기준 사양': {
+    title: '직무별 기준 사양 관리',
+    description: 'BIM 모델러, 개발자, 엔지니어 등 사내 직무별 권장 하드웨어 기준 및 성능 합격 점수를 관리합니다.',
+    icon: 'sliders'
   }
 };
 

src/core/state.ts

@@ -11,6 +11,7 @@ export interface MasterAssetData {
   network: any[];
   survey: any[];
   pcParts: any[];
+  partsMaster: any[];
   equipment: any[];
   officeSupplies: any[];
   swInternal: any[];
@@ -21,6 +22,7 @@ export interface MasterAssetData {
   vip: any[];
   mobile?: any[]; // Legacy mobile support
   equip?: any[];  // Backward compat
+  jobSpecs?: any[];
   
   // Backward compatibility
   subSw: any[];
@@ -41,6 +43,7 @@ export interface AppState {
   masterData: MasterAssetData;
   activeCharts: any[];
   currentUserRole: 'admin' | 'user';
+  listFilters?: Record<string, any>;
 }
 
 // 초기 상태
@@ -50,15 +53,17 @@ export const state: AppState = {
   viewMode: 'location',
   activeCharts: [],
   currentUserRole: 'user',
+  listFilters: {},
   masterData: {
     users: [],
     pc: [], server: [], storage: [], network: [],
-    survey: [], pcParts: [], equipment: [], officeSupplies: [],
+    survey: [], pcParts: [], partsMaster: [], equipment: [], officeSupplies: [],
     swInternal: [], swExternal: [], cloud: [], domain: [],
     cost: [], vip: [],
     subSw: [], permSw: [],
     hw: [], sw: [],
-    swUsers: [], logs: []
+    swUsers: [], logs: [],
+    jobSpecs: []
   }
 };
 
@@ -76,6 +81,7 @@ export async function loadMasterDataFromDB() {
     state.masterData = {
       ...state.masterData,
       ...data,
+      jobSpecs: data.jobSpecs || [],
       logs: (data.logs || []).map((l: any) => ({
         ...l,
         assetId: l.asset_id || l.assetId,
@@ -160,3 +166,104 @@ export async function deleteAsset(category: string, assetId: string) {
   }
   return false;
 }
+
+export async function savePartsMaster(component: any) {
+  try {
+    const url = `${API_BASE_URL}/api/hardware-components/save`;
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(component)
+    });
+    
+    if (response.ok) {
+        await loadMasterDataFromDB(); // 전역 상태 갱신
+        return true;
+    }
+  } catch (err) {
+    console.error('부품 마스터 저장 실패:', err);
+  }
+  return false;
+}
+
+export async function deletePartsMaster(id: number) {
+  try {
+    const url = `${API_BASE_URL}/api/hardware-components/${id}`;
+    const response = await fetch(url, { method: 'DELETE' });
+    
+    if (response.ok) {
+        await loadMasterDataFromDB(); // 전역 상태 갱신
+        return true;
+    }
+  } catch (err) {
+    console.error('부품 마스터 삭제 실패:', err);
+  }
+  return false;
+}
+
+export async function saveSystemUser(user: any) {
+  try {
+    const url = `${API_BASE_URL}/api/system-users/save`;
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(user)
+    });
+    if (response.ok) {
+      await loadMasterDataFromDB(); // 전역 상태 갱신
+      return true;
+    }
+  } catch (err) {
+    console.error('사용자 정보 저장 실패:', err);
+  }
+  return false;
+}
+
+export async function deleteSystemUser(id: string) {
+  try {
+    const url = `${API_BASE_URL}/api/system-users/${id}`;
+    const response = await fetch(url, { method: 'DELETE' });
+    if (response.ok) {
+      await loadMasterDataFromDB(); // 전역 상태 갱신
+      return true;
+    }
+  } catch (err) {
+    console.error('사용자 정보 삭제 실패:', err);
+  }
+  return false;
+}
+
+export async function saveJobSpec(spec: any) {
+  try {
+    const url = `${API_BASE_URL}/api/job-specs/save`;
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(spec)
+    });
+    
+    if (response.ok) {
+        await loadMasterDataFromDB(); // 전역 상태 갱신
+        return true;
+    }
+  } catch (err) {
+    console.error('직무별 기준 사양 저장 실패:', err);
+  }
+  return false;
+}
+
+export async function deleteJobSpec(id: number) {
+  try {
+    const url = `${API_BASE_URL}/api/job-specs/${id}`;
+    const response = await fetch(url, { method: 'DELETE' });
+    
+    if (response.ok) {
+        await loadMasterDataFromDB(); // 전역 상태 갱신
+        return true;
+    }
+  } catch (err) {
+    console.error('직무별 기준 사양 삭제 실패:', err);
+  }
+  return false;
+}
+

src/core/utils.ts

@@ -17,7 +17,7 @@ export function renderPageHeader(container: HTMLElement, pageId: string) {
   header.className = 'page-header';
   header.innerHTML = `
     <div class="page-title-group">
-      <h2 class="page-title"><i data-lucide="${config.icon}"></i> ${config.title}</h2>
+      <h2 class="page-title">${config.title}</h2>
       <p class="page-description">${config.description}</p>
     </div>
   `;
@@ -158,3 +158,202 @@ export function dynamicSort<T>(list: T[], key: string, direction: 'asc' | 'desc'
 export function getActionButtonsHTML(): string {
   return '';
 }
+
+/**
+ * 100점 만점 감점형 PC 성능 점수 계산 (CPU + RAM + GPU + 연식)
+ */
+export function calculatePcScoreDeductive(cpu: string, ram: string, gpu: string, purchaseDate: string): number {
+  let score = 100;
+  if (!cpu) cpu = '';
+  if (!ram) ram = '';
+  if (!gpu) gpu = '';
+
+  const cpuUpper = cpu.toUpperCase();
+  const ramUpper = ram.toUpperCase();
+  const gpuUpper = gpu.toUpperCase();
+
+  // 1. CPU 등급 감점 (최대 -30점)
+  let cpuDeduction = 0;
+  if (cpuUpper.includes('I9') || cpuUpper.includes('RYZEN 9') || cpuUpper.includes('RYZEN9')) {
+    cpuDeduction = 0;
+  } else if (cpuUpper.includes('I7') || cpuUpper.includes('RYZEN 7') || cpuUpper.includes('RYZEN7')) {
+    cpuDeduction = 5;
+  } else if (cpuUpper.includes('I5') || cpuUpper.includes('RYZEN 5') || cpuUpper.includes('RYZEN5')) {
+    cpuDeduction = 15;
+  } else if (cpuUpper.includes('I3') || cpuUpper.includes('RYZEN 3') || cpuUpper.includes('RYZEN3')) {
+    cpuDeduction = 25;
+  } else {
+    cpuDeduction = 30;
+  }
+  score -= cpuDeduction;
+
+  // 2. CPU 세대 노후 감점 (최대 -15점)
+  let genDeduction = 0;
+  const intelMatch = cpuUpper.match(/I\d-?(\d+)/);
+  let gen = 0;
+  if (intelMatch && intelMatch[1]) {
+    const numStr = intelMatch[1];
+    if (numStr.length === 5) gen = parseInt(numStr.substring(0, 2), 10);
+    else if (numStr.length === 4) gen = parseInt(numStr.substring(0, 1), 10);
+  }
+
+  const amdMatch = cpuUpper.match(/RYZEN\s?\d\s?-?(\d+)/);
+  let amdGen = 0;
+  if (amdMatch && amdMatch[1] && !intelMatch) {
+    const numStr = amdMatch[1];
+    if (numStr.length === 4) amdGen = parseInt(numStr.substring(0, 1), 10);
+  }
+
+  if (intelMatch) {
+    if (gen >= 12) genDeduction = 0;
+    else if (gen >= 10) genDeduction = 5;
+    else if (gen >= 8) genDeduction = 10;
+    else genDeduction = 15;
+  } else if (amdMatch) {
+    if (amdGen >= 5) genDeduction = 0;
+    else if (amdGen >= 3) genDeduction = 5;
+    else genDeduction = 10;
+  } else {
+    genDeduction = 15;
+  }
+  score -= genDeduction;
+
+  // 3. RAM 용량 감점 (최대 -25점)
+  const ramMatch = ramUpper.match(/(\d+)\s*GB/);
+  let ramDeduction = 25;
+  if (ramMatch && ramMatch[1]) {
+    const ramVal = parseInt(ramMatch[1], 10);
+    if (ramVal >= 32) ramDeduction = 0;
+    else if (ramVal >= 16) ramDeduction = 10;
+    else if (ramVal >= 8) ramDeduction = 20;
+    else ramDeduction = 25;
+  }
+  score -= ramDeduction;
+
+  // 4. GPU 성능 감점 (최대 -25점)
+  let gpuDeduction = 25;
+  if (!gpuUpper || gpuUpper === '-' || gpuUpper.trim() === '') {
+    gpuDeduction = 25;
+  } else if (
+    gpuUpper.includes('RTX 4090') || gpuUpper.includes('RTX 4080') || gpuUpper.includes('RTX 4070') ||
+    gpuUpper.includes('RTX 3090') || gpuUpper.includes('RTX 3080') ||
+    gpuUpper.includes('RTX A5000') || gpuUpper.includes('RTX A6000') || gpuUpper.includes('RTX A4000')
+  ) {
+    gpuDeduction = 0;
+  } else if (
+    gpuUpper.includes('RTX 3070') || gpuUpper.includes('RTX 3060') || gpuUpper.includes('RTX 2060') ||
+    gpuUpper.includes('RTX A2000') || gpuUpper.includes('RTX A3000') || gpuUpper.includes('QUADRO')
+  ) {
+    gpuDeduction = 5;
+  } else if (
+    gpuUpper.includes('GTX 1660') || gpuUpper.includes('GTX 1080') || gpuUpper.includes('GTX 1070') ||
+    gpuUpper.includes('GTX 1060') || gpuUpper.includes('RX 6700') || gpuUpper.includes('RX 6600')
+  ) {
+    gpuDeduction = 15;
+  } else {
+    gpuDeduction = 25;
+  }
+  score -= gpuDeduction;
+
+  // 5. 연식(노후도) 감점 (최대 -15점)
+  let age = 0;
+  if (purchaseDate && purchaseDate !== '-') {
+    let normalized = purchaseDate.replace(/\./g, '-').trim();
+    if (/^\d{6}$/.test(normalized)) {
+      normalized = `${normalized.substring(0, 4)}-${normalized.substring(4, 6)}`;
+    }
+    const purchase = new Date(normalized);
+    if (!isNaN(purchase.getTime())) {
+      // 2026년 5월 31일 기준 경과연수 계산
+      const mockToday = new Date('2026-05-31');
+      const diffMs = mockToday.getTime() - purchase.getTime();
+      age = diffMs / (1000 * 60 * 60 * 24 * 365.25);
+      age = Math.max(0, parseFloat(age.toFixed(1)));
+    }
+  }
+
+  let ageDeduction = 0;
+  if (age < 1) ageDeduction = 0;
+  else if (age < 2) ageDeduction = 3;
+  else if (age < 3) ageDeduction = 6;
+  else if (age < 4) ageDeduction = 9;
+  else if (age < 5) ageDeduction = 12;
+  else ageDeduction = 15;
+
+  score -= ageDeduction;
+
+  return Math.max(10, score);
+}
+
+/**
+ * 성능 점수 기준 등급 뱃지 메타 정보 가져오기
+ */
+export function getPcGrade(score: number, isWin11Incompatible?: boolean): { name: string; class: string; color: string } {
+  if (score >= 85) return { name: '최상급', class: 'b-purple', color: '#7C3AED' };
+  if (score >= 70) return { name: '상급', class: 'b-primary', color: '#4F46E5' };
+  if (score >= 40) return { name: '중급', class: 'b-green', color: '#10B981' };
+  if (score >= 20 && !isWin11Incompatible) return { name: '보급', class: 'b-yellow', color: '#F59E0B' };
+  return { name: '교체 대상', class: 'badge-danger', color: '#EF4444' };
+}
+
+/**
+ * Windows 11 업그레이드 지원 불가능한 하드웨어 조건인지 판별
+ */
+export function isWindows11Incompatible(cpu: string, ram: string): boolean {
+  if (!cpu) return true;
+  const cpuUpper = cpu.toUpperCase();
+
+  // 1. RAM 4GB 미만은 공식 미지원
+  if (ram) {
+    const ramMatch = ram.toUpperCase().match(/(\d+)\s*GB/);
+    if (ramMatch && ramMatch[1]) {
+      const ramVal = parseInt(ramMatch[1], 10);
+      if (ramVal < 4) return true;
+    }
+  }
+
+  // 2. CPU 세대 검사
+  // Intel CPU 세대 판정
+  const intelMatch = cpuUpper.match(/I\d-?(\d+)/);
+  if (intelMatch && intelMatch[1]) {
+    const numStr = intelMatch[1];
+    let gen = 0;
+    if (numStr.length === 5) gen = parseInt(numStr.substring(0, 2), 10);
+    else if (numStr.length === 4) gen = parseInt(numStr.substring(0, 1), 10);
+    else if (numStr.length === 3) gen = parseInt(numStr.substring(0, 1), 10); // 3자리수 구형 세대 (예: i5-750)
+    
+    if (gen > 0 && gen < 8) return true; // 8세대 미만 불가
+    return false;
+  }
+
+  // AMD Ryzen CPU 세대 판정
+  const amdMatch = cpuUpper.match(/RYZEN\s?\d\s?-?(\d+)/);
+  if (amdMatch && amdMatch[1]) {
+    const numStr = amdMatch[1];
+    let amdGen = 0;
+    if (numStr.length === 4) amdGen = parseInt(numStr.substring(0, 1), 10); // 1xxx, 2xxx 등
+    
+    if (amdGen > 0 && amdGen < 2) return true; // Ryzen 1세대 이하는 불가
+    return false;
+  }
+
+  // Apple Silicon은 지원
+  if (cpuUpper.includes('APPLE') || cpuUpper.includes('M1') || cpuUpper.includes('M2') || cpuUpper.includes('M3') || cpuUpper.includes('M4')) {
+    return false;
+  }
+
+  // 그 외 확실한 구형 CPU 제품군
+  const knownOldCpus = ['CORE2', 'CORE 2', 'PENTIUM', 'CELERON', 'ATHLON', 'PHENOM', 'XEON'];
+  if (knownOldCpus.some(name => cpuUpper.includes(name))) {
+    return true;
+  }
+
+  // 세대 매칭은 안되었으나 Intel Core i 시리즈 구조이면 구형(1세대 등)으로 간주
+  if (cpuUpper.includes('I3') || cpuUpper.includes('I5') || cpuUpper.includes('I7') || cpuUpper.includes('I9')) {
+    // i5-620M 처럼 옛날 구형 모바일 칩 등
+    return true;
+  }
+
+  return false;
+}
+

src/main.ts

@@ -8,6 +8,10 @@ import { initHwModal, openHwModal } from './components/Modal/HWModal';
 import { initSwModal, openSwModal } from './components/Modal/SWModal';
 import { initSwUserModal } from './components/Modal/SWUserModal';
 import { initDomainModal, openDomainModal } from './components/Modal/DomainModal';
+import { initPartsMasterModal, openPartsMasterModal } from './components/Modal/PartsMasterModal';
+import { initJobSpecModal, openJobSpecModal } from './components/Modal/JobSpecModal';
+import { initUserModal, openUserModal } from './components/Modal/UserModal';
+import { activePartsMasterSubTab } from './views/List/PartsMasterListView';
 import { initDashboardDetailModal } from './components/Modal/DashboardDetailModal';
 import { initGuide } from './components/Guide';
 import { pcFlowModal } from './components/Modal/PCFlowModal';
@@ -19,6 +23,11 @@ function refreshView() {
   const mainContent = document.getElementById('main-content')!;
   if (!mainContent) return;
 
+  if (state.activeSubTab === '대시보드') {
+    renderDashboard(mainContent);
+    return;
+  }
+
   // 서버 탭이 아닐 경우 '자산현황(위치)' 뷰 진입 방지 및 강제 리스트 모드 전환
   if (state.activeSubTab !== '서버' && state.viewMode === 'location') {
     state.viewMode = 'list';
@@ -77,6 +86,9 @@ function initApp() {
         loadMasterDataFromDB().then(() => refreshView());
     }, closeAllModals);
     initDomainModal(() => refreshAllData(), closeAllModals);
+    initPartsMasterModal(() => refreshAllData(), closeAllModals);
+    initJobSpecModal(() => refreshAllData(), closeAllModals);
+    initUserModal(() => refreshAllData(), closeAllModals);
     
     initDashboardDetailModal();
     initGuide();
@@ -103,23 +115,35 @@ function initApp() {
       const cat = state.activeCategory;
       const newId = Math.random().toString(36).substring(2, 9);
       
-      if (cat === 'users') {
-          // 사용자 추가는 renderUserList 내부에서 별도로 처리하거나 여기서 호출 가능
-          // 현재 renderUserList에서 별도로 핸들링하고 있으므로 중복 실행 방지
-          return;
-      }
-
       if (cat === 'hw') {
-        openHwModal({ id: newId, asset_code: '', category: tab } as any, 'add');
+        if (tab === '부품 마스터') {
+          if (activePartsMasterSubTab === 'job-spec') {
+            openJobSpecModal({ id: '' } as any, 'add');
+          } else {
+            openPartsMasterModal({ id: '' } as any, 'add');
+          }
+        } else {
+          openHwModal({ id: newId, asset_code: '', category: tab } as any, 'add');
+        }
       } else if (cat === 'sw') {
         const swType = tab === '외부SW' ? '외부SW' : (tab === '내부SW' ? '내부SW' : '외부SW');
         openSwModal({ id: newId, asset_type: swType } as any, 'add');
       } else if (cat === 'ops') {
         if (tab === '도메인') openDomainModal(null);
+        else if (tab === '사용자') openUserModal({ id: '' }, 'add');
       }
       return;
     }
 
+    // 부품 마스터 탭으로 바로가기 연동
+    if (target.closest('#btn-goto-parts-master')) {
+      state.activeCategory = 'hw';
+      state.activeSubTab = '부품 마스터';
+      renderNavigation((tab) => { refreshView(); });
+      refreshView();
+      return;
+    }
+
     // PC 이동/반납 모달 열기
     if (target.closest('#btn-pc-flow')) {
       pcFlowModal.open();
@@ -184,66 +208,40 @@ function initRoleSwitcher() {
 }
 
 /**
- * 로그인 처리 로직
+ * 앱 초기화 (로그인 과정 없이 즉시 시작)
  */
-function handleLogin() {
+function initializeAppDirectly() {
   const loginContainer = document.getElementById('login-container');
   const appLayout = document.getElementById('app-layout');
-  const roleCards = document.querySelectorAll('.role-card');
+  const checkbox = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
   const userLabel = document.querySelector('.role-label.user');
   const adminLabel = document.querySelector('.role-label.admin');
 
-  if (!loginContainer || !appLayout || roleCards.length === 0) return;
+  // 기본 권한 설정: 실무자 (User)
+  state.currentUserRole = 'user';
+  state.activeCategory = 'hw';
+  state.activeSubTab = '서버'; // 실무자 기본 탭
 
-  roleCards.forEach(card => {
-    card.addEventListener('click', () => {
-      const role = card.getAttribute('data-role');
-      const checkbox = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
-      
-      if (role === 'admin') {
-        console.log('🔓 Entering as Admin');
-        
-        state.currentUserRole = 'admin';
-        state.activeCategory = 'hw';
-        state.activeSubTab = '대시보드'; // 관리자는 대시보드로 진입
-        
-        if (checkbox) checkbox.checked = true;
-        if (userLabel) userLabel.classList.remove('active');
-        if (adminLabel) adminLabel.classList.add('active');
-        document.body.classList.add('admin-mode');
-      } else if (role === 'user') {
-        console.log('🔓 Entering as Practitioner');
-        
-        state.currentUserRole = 'user';
-        state.activeCategory = 'hw';
-        state.activeSubTab = '서버'; // 실무자는 서버 목록으로 진입
-        
-        if (checkbox) checkbox.checked = false;
-        if (userLabel) userLabel.classList.add('active');
-        if (adminLabel) adminLabel.classList.remove('active');
-        document.body.classList.remove('admin-mode');
-      } else {
-        return;
-      }
+  // UI 상태 동기화
+  if (checkbox) checkbox.checked = false;
+  if (userLabel) userLabel.classList.add('active');
+  if (adminLabel) adminLabel.classList.remove('active');
+  document.body.classList.remove('admin-mode');
 
-      // UI 전환
-      loginContainer.style.display = 'none';
-      appLayout.style.display = 'flex';
-      
-      // 역할 스위처 및 앱 초기화 시작
-      initRoleSwitcher();
-      initApp();
-      
-      // 로고 클릭 시 초기화면 복귀 로직 (한 번만 등록)
-      const brand = document.querySelector('.brand') as HTMLElement;
-      if (brand) {
-        brand.style.cursor = 'pointer';
-        brand.onclick = () => {
-          location.reload(); // 즉시 초기화면으로 복귀
-        };
-      }
-    });
-  });
+  // 화면 전환
+  if (loginContainer) loginContainer.style.display = 'none';
+  if (appLayout) appLayout.style.display = 'flex';
+
+  // 앱 초기화
+  initRoleSwitcher();
+  initApp();
+
+  // 로고 클릭 시 새로고침 (초기 화면 복귀 효과)
+  const brand = document.querySelector('.brand') as HTMLElement;
+  if (brand) {
+    brand.style.cursor = 'pointer';
+    brand.onclick = () => location.reload();
+  }
 }
 
-document.addEventListener('DOMContentLoaded', handleLogin);
+document.addEventListener('DOMContentLoaded', initializeAppDirectly);

src/styles/common.css

@@ -60,7 +60,7 @@ body {
   color: var(--text-main);
   background-color: var(--bg-color);
   line-height: 1.5;
-  font-size: 19px;
+  font-size: 14px;
   overflow: hidden;
 }
 
@@ -240,6 +240,36 @@ input:checked + .slider:before { transform: translateX(16px); }
   border: 1px solid var(--border-color);
 }
 
+/* PC 성능 등급 뱃지 컬러 스타일 */
+.badge.b-purple {
+  background-color: #EDE9FE;
+  color: #7C3AED;
+  border: 1px solid #DDD6FE;
+  font-size: 11px;
+  padding: 2px 6px;
+}
+.badge.b-primary {
+  background-color: #DBEAFE;
+  color: #1D4ED8;
+  border: 1px solid #BFDBFE;
+  font-size: 11px;
+  padding: 2px 6px;
+}
+.badge.b-green {
+  background-color: #D1FAE5;
+  color: #047857;
+  border: 1px solid #A7F3D0;
+  font-size: 11px;
+  padding: 2px 6px;
+}
+.badge.b-yellow {
+  background-color: #FEF3C7;
+  color: #D97706;
+  border: 1px solid #FDE68A;
+  font-size: 11px;
+  padding: 2px 6px;
+}
+
 .text-tag {
   color: var(--text-muted);
   font-size: 16px;

src/styles/dashboard.css

@@ -1,10 +1,13 @@
 /* --- Premium Executive Dashboard View Specific Styles --- */
 .dashboard-section-title {
-  padding: 0 0 1rem 0;
+  padding: 0 0 0 8px;
   font-size: 1.55rem;
   font-weight: 800;
   color: var(--text-main);
   letter-spacing: -0.02em;
+  border-left: 4px solid var(--primary-color);
+  margin-bottom: 1rem;
+  line-height: 1.2;
 }
 
 .dashboard-grid {
@@ -14,23 +17,25 @@
   margin-bottom: 2rem;
 }
 
-/* Premium Glassmorphism Card Style */
+/* Premium Executive Divider-based Style (Line-based Division) */
 .dashboard-card, .stat-card {
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.5);
-  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.07);
-  border-radius: 12px;
-  padding: 1.5rem;
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  border: none;
+  border-bottom: 1px solid var(--border-color);
+  box-shadow: none;
+  border-radius: 0;
+  padding: 1.5rem 0.5rem;
   display: flex;
   flex-direction: column;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  transition: opacity 0.2s ease;
 }
 
 .dashboard-card:hover, .stat-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 12px 40px rgba(31, 38, 135, 0.12);
+  transform: none;
+  box-shadow: none;
+  opacity: 0.85;
 }
 
 .dashboard-layout-2col {
@@ -57,7 +62,7 @@
 
 /* Premium KPI Value Styling */
 .stat-value {
-  font-size: 2.2rem;
+  font-size: 2.41rem;
   font-weight: 800;
   background: linear-gradient(135deg, #1E5149 0%, #3B82F6 100%);
   -webkit-background-clip: text;
@@ -75,7 +80,7 @@
 }
 
 .stat-label {
-  font-size: 1.15rem;
+  font-size: 1.36rem;
   color: var(--text-muted);
   font-weight: 700;
   text-transform: uppercase;
@@ -115,7 +120,7 @@
   font-weight: 700;
   padding: 1rem;
   text-transform: uppercase;
-  font-size: 0.75rem;
+  font-size: 0.96rem;
   letter-spacing: 0.05em;
 }
 
@@ -123,7 +128,7 @@
   padding: 1rem;
   border-bottom: 1px solid #E2E8F0;
   color: #1E293B;
-  font-size: 13px;
+  font-size: 16px;
 }
 
 .table-premium tr:hover td {
@@ -171,7 +176,7 @@
 }
 
 .page-info {
-  font-size: 0.75rem;
+  font-size: 0.96rem;
   color: var(--text-muted);
   font-weight: 600;
 }
@@ -181,7 +186,7 @@
   border: 1px solid var(--border-color);
   background: var(--white);
   border-radius: 4px;
-  font-size: 0.75rem;
+  font-size: 0.96rem;
   cursor: pointer;
 }
 
@@ -193,7 +198,7 @@
 .slider-indicator {
   font-weight: 700;
   color: var(--text-muted);
-  font-size: 1.2rem;
+  font-size: 1.41rem;
 }
 
 .dashboard-slider-viewport {
@@ -518,5 +523,4 @@
   flex: 1;
   font-size: 0.95rem;
   font-weight: 700;
->>>>>>> origin/main
 }

src/styles/table.css

@@ -10,27 +10,19 @@
 }
 
 .page-title {
-  font-size: 21px;
+  font-size: 16px;
   font-weight: 700;
   color: var(--primary-color);
   display: flex;
   align-items: center;
-  gap: 0.5rem;
   margin: 0;
-}
-
-.page-title i {
-  display: flex;
-  align-items: center;
-}
-
-.page-title svg {
-  width: 18px;
-  height: 18px;
+  border-left: 4px solid var(--primary-color);
+  padding-left: 8px;
+  line-height: 1.2;
 }
 
 .page-description {
-  font-size: 17px;
+  font-size: 12px;
   color: var(--text-muted);
   margin: 0;
   line-height: 1.4;
@@ -72,7 +64,7 @@
 }
 
 .search-item label {
-  font-size: 16px;
+  font-size: 11px;
   font-weight: 700;
   color: var(--text-muted);
 }
@@ -83,7 +75,7 @@
   padding: 0 1rem;
   border: 1px solid var(--border-color);
   border-radius: 4px;
-  font-size: 19px;
+  font-size: 14px;
   outline: none;
   background-color: var(--white);
 }
@@ -141,7 +133,7 @@ thead {
 
 th {
   background-color: var(--bg-light) !important;
-  font-size: 18px;
+  font-size: 13px;
   font-weight: 600;
   color: var(--text-muted);
   position: sticky;
@@ -152,7 +144,7 @@ th {
 }
 
 td {
-  font-size: 18px;
+  font-size: 13px;
   color: var(--text-main);
   font-weight: 400;
 }

src/views/Dashboard/SwDashboard.ts

@@ -38,17 +38,17 @@ export function renderSwDashboard(container: HTMLElement) {
       
       <div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">
         <div class="dashboard-card" data-action="ext-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;">${extQty}카피 중 ${extUsed}개 할당</div>
-          <div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">${extPer}%</div>
+          <span style="font-size:1.21rem; font-weight:700; color:var(--text-main);">외부 소프트웨어 사용율</span>
+          <div style="font-size: 1.02rem; color:var(--text-muted); margin-bottom: 1rem;">${extQty}카피 중 ${extUsed}개 할당</div>
+          <div style="font-size: 2.21rem; font-weight:700; color:var(--dash-primary);">${extPer}%</div>
           <div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
             <div style="width: ${extPer}%; height: 100%; background-color: var(--dash-primary);"></div>
           </div>
         </div>
         <div class="dashboard-card" data-action="int-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;">등록된 내부 솔루션: ${intTotal}개</div>
-          <div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">${intPer}%</div>
+          <span style="font-size:1.21rem; font-weight:700; color:var(--text-main);">내부 소프트웨어 현황</span>
+          <div style="font-size: 1.02rem; color:var(--text-muted); margin-bottom: 1rem;">등록된 내부 솔루션: ${intTotal}개</div>
+          <div style="font-size: 2.21rem; font-weight:700; color:var(--dash-primary);">${intPer}%</div>
            <div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
             <div style="width: ${intPer}%; height: 100%; background-color: var(--dash-primary);"></div>
           </div>
@@ -59,12 +59,12 @@ export function renderSwDashboard(container: HTMLElement) {
       
       <div style="display:grid; grid-template-columns: repeat(2, 1fr); gap:1.5rem; margin-bottom:1.5rem;">
         <div class="dashboard-card" style="min-height:auto;">
-          <span style="font-size:1rem; font-weight:700; color:var(--text-main);">외부 SW 누적 비용 (2026)</span>
-          <div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">₩ ${extCost2026.toLocaleString()}</div>
+          <span style="font-size:1.21rem; font-weight:700; color:var(--text-main);">외부 SW 누적 비용 (2026)</span>
+          <div style="font-size: 2.21rem; font-weight:700; color:var(--dash-primary);">₩ ${extCost2026.toLocaleString()}</div>
         </div>
         <div class="dashboard-card" style="min-height:auto;">
-          <span style="font-size:1rem; font-weight:700; color:var(--text-main);">내부 SW 누적 비용 (2026)</span>
-          <div style="font-size: 2rem; font-weight:700; color:#3b82f6;">₩ ${intCost2026.toLocaleString()}</div>
+          <span style="font-size:1.21rem; font-weight:700; color:var(--text-main);">내부 SW 누적 비용 (2026)</span>
+          <div style="font-size: 2.21rem; font-weight:700; color:#3b82f6;">₩ ${intCost2026.toLocaleString()}</div>
         </div>
       </div>
     </div>

src/views/List/ListFactory.ts

@@ -1,5 +1,5 @@
 import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
-import { dynamicSort, renderPageHeader, calculateAssetAge, formatInline } from '../../core/utils';
+import { dynamicSort, renderPageHeader, calculateAssetAge, formatInline, isWindows11Incompatible } from '../../core/utils';
 import { setupTableSorting, SortState } from '../../core/tableHandler';
 import { renderFilterBar, applyCommonFilters } from '../../core/filterHandler';
 import { state } from '../../core/state';
@@ -83,6 +83,7 @@ function calculatePcScoreDeductive(cpu: string, ram: string, gpu: string, purcha
     gpuDeduction = 25;
   } else if (
     gpuUpper.includes('RTX 4090') || gpuUpper.includes('RTX 4080') || gpuUpper.includes('RTX 4070') ||
+    gpuUpper.includes('RTX 3090') || gpuUpper.includes('RTX 3080') ||
     gpuUpper.includes('RTX A5000') || gpuUpper.includes('RTX A6000') || gpuUpper.includes('RTX A4000')
   ) {
     gpuDeduction = 0;
@@ -151,6 +152,7 @@ export interface ListViewConfig {
     showLoc?: boolean;
     showField?: boolean;
     showType?: boolean;
+    showStatus?: boolean;
   };
   columns: ColumnDef[];
   onRowClick?: (asset: any) => void;
@@ -165,9 +167,17 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
 
   const fullList = config.dataSource();
   let sortState: SortState = config.persistentSortState || { key: '', direction: 'asc' };
-  let currentFilters: any = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '' };
   
-  // 서버 탭이 아닐 경우 '자산 현황(대시보드)' 뷰 진입 방지 및 강제 'asset' 모드
+  if (!(state as any).listFilters) {
+    (state as any).listFilters = {};
+  }
+  const filterKey = config.title;
+  if (!(state as any).listFilters[filterKey]) {
+    (state as any).listFilters[filterKey] = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '', status: '' };
+  }
+  let currentFilters: any = (state as any).listFilters[filterKey];
+  
+  // 서버 탭이 아닐 경우 '자산 현황' 뷰 진입 방지 및 강제 'asset' 모드 (PC 탭은 자산 현황 숨김)
   const isServer = config.title === '서버';
   if (!isServer) {
     (state as any).currentViewMode = 'asset';
@@ -188,6 +198,9 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
       </div>
       <div style="display: flex; gap: 8px;">
         ${showPcFlowBtn ? `
+          <button id="btn-goto-parts-master" style="padding: 6px 14px !important; font-size: 12px !important; font-weight: 700 !important; background: white !important; color: var(--primary-color) !important; border: 1px solid var(--primary-color) !important; border-radius: 4px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: fit-content !important; min-width: 0 !important; white-space: nowrap !important;">
+            <i data-lucide="settings" style="width: 14px; height: 14px;"></i> 부품 마스터
+          </button>
           <button id="btn-pc-flow" style="padding: 6px 14px; font-size: 12px; font-weight: 700; background: white; color: var(--primary-color); border: 1px solid var(--primary-color); border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 6px;">
             PC 이동/반납
           </button>
@@ -474,6 +487,7 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
                   <div id="detail-photo-wrapper" style="width: 100%; flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; border: 1px solid var(--border-color); background: #f0f0f0;">
                     <div class="layout-map-container readonly" style="position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;">
                       <img id="detail-photo" src="" style="display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; pointer-events: none;" />
+                      <iframe id="detail-html-map" src="" style="display: none; width: 100%; height: 100%; border: none;"></iframe>
                       <div id="detail-marker" class="layout-marker pulse-marker" style="display: none; position: absolute; z-index: 20;"></div>
                       <div id="detail-overlay-layer" class="digital-overlay-layer" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; display: flex; align-items: center; justify-content: center;"></div>
                     </div>
@@ -529,60 +543,86 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
       const locImgs = IMAGE_LOCATIONS[bldg.trim()]?.[detail.trim()] || null;
       const imgPath = (savedImg && locImgs?.includes(savedImg)) ? savedImg : (locImgs ? locImgs[0] : null);
 
+      const htmlMap = document.getElementById('detail-html-map') as HTMLIFrameElement;
+      const isHtmlMap = imgPath?.toLowerCase().endsWith('.html');
+
       // 좌표가 없으면 사진이 있어도 '정보 없음' 상태로 유도 (사용자 요청)
       if (imgPath && hasCoords) {
-        photo.src = imgPath;
-        photo.style.display = 'block';
+        if (isHtmlMap) {
+          // HTML 지도 처리
+          photo.style.display = 'none';
+          if (marker) marker.style.display = 'none';
+          if (overlayLayer) overlayLayer.innerHTML = '';
+          if (htmlMap) {
+            htmlMap.src = `${imgPath}?markerX=${x}&markerY=${y}`;
+            htmlMap.style.display = 'block';
+          }
+        } else {
+          // 일반 이미지 지도 처리
+          if (htmlMap) {
+            htmlMap.src = '';
+            htmlMap.style.display = 'none';
+          }
+          photo.src = imgPath;
+          photo.style.display = 'block';
+        }
+        
         if (noPhoto) noPhoto.style.display = 'none';
         
-        photo.onload = () => {
-          const updateMarkerPos = () => {
-              const imgW = photo.clientWidth;
-              const imgH = photo.clientHeight;
+        if (!isHtmlMap) {
+          photo.onload = () => {
+            const updateMarkerPos = () => {
+                const imgW = photo.clientWidth;
+                const imgH = photo.clientHeight;
 
-              if (marker) {
-                marker.style.left = `calc(50% - ${imgW/2}px + ${ (parseFloat(x as string) * imgW) / 100 }px)`;
-                marker.style.top = `calc(50% - ${imgH/2}px + ${ (parseFloat(y as string) * imgH) / 100 }px)`;
-                marker.style.display = 'block';
-              }
-
-              if (overlayLayer) {
-                overlayLayer.style.width = `${imgW}px`;
-                overlayLayer.style.height = `${imgH}px`;
-                overlayLayer.style.left = `calc(50% - ${imgW/2}px)`;
-                overlayLayer.style.top = `calc(50% - ${imgH/2}px)`;
-
-                const boxes = dynamicMapConfig[imgPath] || [];
-                if (boxes.length > 0) {
-                  overlayLayer.innerHTML = `
-                    <svg viewBox="0 0 100 100" preserveAspectRatio="none" style="width:100%; height:100%;">
-                      <g class="seat-group">
-                        ${boxes.map((b, i) => {
-                          const isSelected = b.x === x && b.y === y;
-                          const fill = isSelected ? 'rgba(255, 61, 0, 0.4)' : 'rgba(30, 81, 73, 0.02)';
-                          const stroke = isSelected ? '#FF3D00' : 'rgba(30, 81, 73, 0.15)';
-                          const strokeWidth = isSelected ? '0.8' : '0.2';
-                          
-                          if (isSelected && marker) {
-                              marker.style.left = `calc(50% - ${imgW/2}px + ${ (parseFloat(b.x) + parseFloat(b.w)/2) * imgW / 100 }px)`;
-                              marker.style.top = `calc(50% - ${imgH/2}px + ${ (parseFloat(b.y) + parseFloat(b.h)/2) * imgH / 100 }px)`;
-                          }
-
-                          return `<rect class="map-seat-obj" x="${b.x}" y="${b.y}" width="${b.w}" height="${b.h}" rx="0.5" style="fill:${fill}; stroke:${stroke}; stroke-width:${strokeWidth};" />`;
-                        }).join('')}
-                      </g>
-                    </svg>
-                  `;
-                } else {
-                  overlayLayer.innerHTML = '';
+                if (marker) {
+                  marker.style.left = `calc(50% - ${imgW/2}px + ${ (parseFloat(x as string) * imgW) / 100 }px)`;
+                  marker.style.top = `calc(50% - ${imgH/2}px + ${ (parseFloat(y as string) * imgH) / 100 }px)`;
+                  marker.style.display = 'block';
                 }
-              }
+
+                if (overlayLayer) {
+                  overlayLayer.style.width = `${imgW}px`;
+                  overlayLayer.style.height = `${imgH}px`;
+                  overlayLayer.style.left = `calc(50% - ${imgW/2}px)`;
+                  overlayLayer.style.top = `calc(50% - ${imgH/2}px)`;
+
+                  const boxes = dynamicMapConfig[imgPath] || [];
+                  if (boxes.length > 0) {
+                    overlayLayer.innerHTML = `
+                      <svg viewBox="0 0 100 100" preserveAspectRatio="none" style="width:100%; height:100%;">
+                        <g class="seat-group">
+                          ${boxes.map((b, i) => {
+                            const isSelected = b.x === x && b.y === y;
+                            const fill = isSelected ? 'rgba(255, 61, 0, 0.4)' : 'rgba(30, 81, 73, 0.02)';
+                            const stroke = isSelected ? '#FF3D00' : 'rgba(30, 81, 73, 0.15)';
+                            const strokeWidth = isSelected ? '0.8' : '0.2';
+                            
+                            if (isSelected && marker) {
+                                marker.style.left = `calc(50% - ${imgW/2}px + ${ (parseFloat(b.x) + parseFloat(b.w)/2) * imgW / 100 }px)`;
+                                marker.style.top = `calc(50% - ${imgH/2}px + ${ (parseFloat(b.y) + parseFloat(b.h)/2) * imgH / 100 }px)`;
+                            }
+
+                            return `<rect class="map-seat-obj" x="${b.x}" y="${b.y}" width="${b.w}" height="${b.h}" rx="0.5" style="fill:${fill}; stroke:${stroke}; stroke-width:${strokeWidth};" />`;
+                          }).join('')}
+                        </g>
+                      </svg>
+                    `;
+                  } else {
+                    overlayLayer.innerHTML = '';
+                  }
+                }
+            };
+            updateMarkerPos();
+            window.addEventListener('resize', updateMarkerPos);
           };
-          updateMarkerPos();
-          window.addEventListener('resize', updateMarkerPos);
-        };
+        }
       } else {
         photo.style.display = 'none';
+        if (htmlMap) {
+          htmlMap.src = '';
+          htmlMap.style.display = 'none';
+        }
         if (marker) marker.style.display = 'none';
         if (overlayLayer) overlayLayer.innerHTML = '';
         if (noPhoto) {
@@ -850,8 +890,8 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
           const status = a[ASSET_SCHEMA.HW_STATUS.key] || '';
           const user = a[ASSET_SCHEMA.CURRENT_USER.key] || '';
           
-          // 사용 중이고 사용자가 할당되어 있으며, 직무가 재고PC가 아닌 실사용 기기 대상
-          return job !== '재고PC' && status === '사용중' && user.trim() !== '';
+          // 운영 중이고 사용자가 할당되어 있으며, 직무가 재고PC가 아닌 실사용 기기 대상
+          return job !== '재고PC' && status === '운영' && user.trim() !== '';
         });
 
         // 직무별 평균 점수 산출
@@ -874,30 +914,62 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
           jobScores[job].avg = jobScores[job].count > 0 ? jobScores[job].totalScore / jobScores[job].count : 0;
         });
 
+        // DB 기준 사양 데이터 맵핑 (state.masterData.jobSpecs 이용)
+        const jobSpecsMap: Record<string, number> = {};
+        if (state.masterData.jobSpecs) {
+          state.masterData.jobSpecs.forEach((s: any) => {
+            jobSpecsMap[s.job_name] = s.min_score;
+          });
+        }
+
         // 기준 대비 사양 부족/오버스펙 분류
         const criticalPcList: any[] = [];
         pcs.forEach((pc: any) => {
           const job = pc[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
           const score = pc['_pc_score'];
-          const avg = jobScores[job].avg;
+          const standardScore = jobSpecsMap[job] !== undefined ? jobSpecsMap[job] : (jobScores[job]?.avg || 0);
           
-          if (avg > 0) {
-            if (score < avg * 0.8) {
+          const cpu = pc[ASSET_SCHEMA.CPU.key] || '';
+          const ram = pc[ASSET_SCHEMA.RAM.key] || '';
+          const win11Incompatible = isWindows11Incompatible(cpu, ram);
+          
+          let isUnder = false;
+          if (standardScore > 0) {
+            if (score < standardScore * 0.6) {
+              isUnder = true;
               pc['_spec_status'] = '사양 부족';
-              criticalPcList.push(pc);
-            } else if (score > avg * 1.3) {
+            } else if (score > standardScore * 1.5 && !win11Incompatible) {
               pc['_spec_status'] = '오버스펙';
               criticalPcList.push(pc);
+            } else if (win11Incompatible) {
+              isUnder = true;
+              pc['_spec_status'] = '사양 부족';
+            } else {
+              pc['_spec_status'] = '적정';
             }
+          } else {
+            if (win11Incompatible) {
+              isUnder = true;
+              pc['_spec_status'] = '사양 부족';
+            } else {
+              pc['_spec_status'] = '적정';
+            }
+          }
+
+          if (isUnder) {
+            criticalPcList.push(pc);
           }
         });
 
-        // 정렬: 직무 평균 대비 사양 부족이 심한 순(비율이 낮은 순)으로 정렬
+        // 정렬: 기준 점수 대비 사양 부족이 심한 순(비율이 낮은 순)으로 정렬
         criticalPcList.sort((a: any, b: any) => {
           const jobA = a[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
           const jobB = b[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
-          const ratioA = jobScores[jobA].avg > 0 ? a['_pc_score'] / jobScores[jobA].avg : 1;
-          const ratioB = jobScores[jobB].avg > 0 ? b['_pc_score'] / jobScores[jobB].avg : 1;
+          const stdA = jobSpecsMap[jobA] !== undefined ? jobSpecsMap[jobA] : (jobScores[jobA]?.avg || 0);
+          const stdB = jobSpecsMap[jobB] !== undefined ? jobSpecsMap[jobB] : (jobScores[jobB]?.avg || 0);
+          
+          const ratioA = stdA > 0 ? a['_pc_score'] / stdA : 1;
+          const ratioB = stdB > 0 ? b['_pc_score'] / stdB : 1;
           return ratioA - ratioB;
         });
 
@@ -920,7 +992,7 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
                 <td style="padding: 10px 0; font-weight: 600; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${user}">${user}</td>
                 <td style="padding: 10px 0; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${dept} (${job})">${dept} (${job})</td>
                 <td style="padding: 10px 0; white-space: nowrap; text-align: center;">
-                  <span style="padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; ${badgeColor}">${status}</span>
+                  <span style="padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; ${badgeColor}">${status === '오버스펙' ? '오버 스펙' : status}</span>
                 </td>
                 <td style="padding: 10px 0; font-family: monospace; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${assetCode}">${assetCode}</td>
               </tr>
@@ -1055,14 +1127,15 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
   // 필터 바 초기화
   renderFilterBar(filterBar, {
     ...config.filterOptions,
+    initialFilters: currentFilters,
     onFilterChange: (filters) => {
-      currentFilters = { ...currentFilters, ...filters };
+      Object.assign(currentFilters, filters);
       updateTable();
     }
   });
 
   // 셀렉트 박스 채우기
-  const populateSelect = (selector: string, dataKey: string) => {
+  const populateSelect = (selector: string, dataKey: string, initialValue?: string) => {
     const select = container.querySelector(selector) as HTMLSelectElement;
     if (select) {
       const getVal = (a: any) => dataKey === ASSET_SCHEMA.CURRENT_DEPT.key ? (a[dataKey] || a['현사용부서'] || a['현사용조직']) : a[dataKey];
@@ -1071,15 +1144,19 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
         const opt = document.createElement('option');
         opt.value = String(val);
         opt.textContent = String(val);
+        if (initialValue && String(val) === initialValue) {
+          opt.selected = true;
+        }
         select.appendChild(opt);
       });
     }
   };
 
-  if (config.filterOptions.showLoc) populateSelect('#filter-loc', ASSET_SCHEMA.LOCATION.key);
-  if (config.filterOptions.showDept) populateSelect('#filter-dept', ASSET_SCHEMA.CURRENT_DEPT.key);
-  if (config.filterOptions.showCorp) populateSelect('#filter-corp', ASSET_SCHEMA.PURCHASE_CORP.key);
-  if (config.filterOptions.showType) populateSelect('#filter-type', ASSET_SCHEMA.ASSET_TYPE.key);
+  if (config.filterOptions.showLoc) populateSelect('#filter-loc', ASSET_SCHEMA.LOCATION.key, currentFilters.loc);
+  if (config.filterOptions.showDept) populateSelect('#filter-dept', ASSET_SCHEMA.CURRENT_DEPT.key, currentFilters.dept);
+  if (config.filterOptions.showCorp) populateSelect('#filter-corp', ASSET_SCHEMA.PURCHASE_CORP.key, currentFilters.corp);
+  if (config.filterOptions.showType) populateSelect('#filter-type', ASSET_SCHEMA.ASSET_TYPE.key, currentFilters.type);
+  if (config.filterOptions.showStatus) populateSelect('#filter-status', ASSET_SCHEMA.HW_STATUS.key, currentFilters.status);
 
   // 초기 실행
   switchView();

src/views/List/PartsMasterListView.ts

@@ -0,0 +1,171 @@
+import { state } from '../../core/state';
+import { openPartsMasterModal } from '../../components/Modal/PartsMasterModal';
+import { openJobSpecModal } from '../../components/Modal/JobSpecModal';
+import { formatInline } from '../../core/utils';
+import { createListView } from './ListFactory';
+
+export let activePartsMasterSubTab: 'parts-master' | 'job-spec' = 'parts-master';
+
+export function renderPartsMasterList(container: HTMLElement) {
+  if (activePartsMasterSubTab === 'parts-master') {
+    createListView(container, {
+      title: '부품 마스터',
+      dataSource: () => state.masterData.partsMaster || [],
+      searchKeys: ['component_name', 'category', 'score_tier'],
+      filterOptions: {
+        keywordLabel: '부품명 / 등급 검색',
+        showLoc: false,
+        showDept: false,
+        showType: false
+      },
+      onRowClick: (component) => openPartsMasterModal(component, 'view'),
+      columns: [
+        {
+          header: 'ID',
+          sortKey: 'id',
+          align: 'center',
+          width: '5%',
+          render: c => c.id.toString()
+        },
+        {
+          header: '분류',
+          sortKey: 'category',
+          align: 'center',
+          width: '15%',
+          render: c => {
+            let badgeClass = 'badge-primary';
+            if (c.category === 'CPU') badgeClass = 'b-primary';
+            else if (c.category === 'GPU') badgeClass = 'b-purple';
+            else if (c.category === 'RAM') badgeClass = 'b-green';
+            return `<span class="badge ${badgeClass}">${c.category}</span>`;
+          }
+        },
+        {
+          header: '부품 표준 명칭',
+          sortKey: 'component_name',
+          render: c => formatInline(c.component_name || '-')
+        },
+        {
+          header: '성능 등급',
+          sortKey: 'score_tier',
+          align: 'center',
+          width: '15%',
+          render: c => c.score_tier || '-'
+        },
+        {
+          header: '감점 점수',
+          sortKey: 'deduction',
+          align: 'center',
+          width: '15%',
+          render: c => {
+            const score = c.deduction || 0;
+            let color = '#3b82f6'; // blue
+            if (score >= 20) color = '#ef4444'; // red
+            else if (score >= 10) color = '#f59e0b'; // orange
+            return `<strong style="color: ${color}; font-size: 14px;">-${score}점</strong>`;
+          }
+        }
+      ]
+    });
+  } else {
+    createListView(container, {
+      title: '직무별 기준 사양',
+      dataSource: () => state.masterData.jobSpecs || [],
+      searchKeys: ['job_name', 'cpu_standard', 'ram_standard', 'gpu_standard', 'remarks'],
+      filterOptions: {
+        keywordLabel: '직무명 / 사양 검색',
+        showLoc: false,
+        showDept: false,
+        showType: false
+      },
+      onRowClick: (jobSpec) => openJobSpecModal(jobSpec, 'view'),
+      columns: [
+        {
+          header: 'ID',
+          sortKey: 'id',
+          align: 'center',
+          width: '5%',
+          render: j => j.id.toString()
+        },
+        {
+          header: '직무명',
+          sortKey: 'job_name',
+          width: '15%',
+          render: j => `<strong style="color: var(--primary-color); font-size: 14px;">${formatInline(j.job_name || '-')}</strong>`
+        },
+        {
+          header: '권장 CPU 사양',
+          sortKey: 'cpu_standard',
+          render: j => formatInline(j.cpu_standard || '-')
+        },
+        {
+          header: '권장 RAM 사양',
+          sortKey: 'ram_standard',
+          width: '12%',
+          render: j => formatInline(j.ram_standard || '-')
+        },
+        {
+          header: '권장 GPU 사양',
+          sortKey: 'gpu_standard',
+          render: j => formatInline(j.gpu_standard || '-')
+        },
+        {
+          header: '기준 점수',
+          sortKey: 'min_score',
+          align: 'center',
+          width: '10%',
+          render: j => `<span style="font-weight: 700;">${j.min_score || 0}점 이상</span>`
+        },
+        {
+          header: '비고',
+          sortKey: 'remarks',
+          width: '20%',
+          render: j => formatInline(j.remarks || '-')
+        }
+      ]
+    });
+  }
+
+  renderSubTabs(container);
+}
+
+function renderSubTabs(container: HTMLElement) {
+  const header = container.querySelector('.page-header');
+  if (!header) return;
+
+  const tabContainer = document.createElement('div');
+  tabContainer.className = 'sub-tab-container';
+  tabContainer.style.cssText = 'display: flex; gap: 16px; margin-top: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border-color); padding-bottom: 0;';
+
+  const tab1Active = activePartsMasterSubTab === 'parts-master';
+  const tab2Active = activePartsMasterSubTab === 'job-spec';
+
+  tabContainer.innerHTML = `
+    <button id="tab-parts-master" class="sub-tab-btn ${tab1Active ? 'active' : ''}" style="padding: 10px 16px; border: none; background: none; font-size: 14px; font-weight: 600; cursor: pointer; color: ${tab1Active ? 'var(--primary-color)' : 'var(--text-muted)'}; position: relative; border-bottom: 3px solid ${tab1Active ? 'var(--primary-color)' : 'transparent'};">
+      부품 표준 등급
+    </button>
+    <button id="tab-job-spec" class="sub-tab-btn ${tab2Active ? 'active' : ''}" style="padding: 10px 16px; border: none; background: none; font-size: 14px; font-weight: 600; cursor: pointer; color: ${tab2Active ? 'var(--primary-color)' : 'var(--text-muted)'}; position: relative; border-bottom: 3px solid ${tab2Active ? 'var(--primary-color)' : 'transparent'};">
+      직무별 기준 사양
+    </button>
+  `;
+
+  header.parentNode!.insertBefore(tabContainer, header.nextSibling);
+
+  const tabPartsMaster = tabContainer.querySelector('#tab-parts-master')!;
+  const tabJobSpec = tabContainer.querySelector('#tab-job-spec')!;
+
+  tabPartsMaster.addEventListener('click', () => {
+    if (activePartsMasterSubTab !== 'parts-master') {
+      activePartsMasterSubTab = 'parts-master';
+      renderPartsMasterList(container);
+    }
+  });
+
+  tabJobSpec.addEventListener('click', () => {
+    if (activePartsMasterSubTab !== 'job-spec') {
+      activePartsMasterSubTab = 'job-spec';
+      renderPartsMasterList(container);
+    }
+  });
+}
+

src/views/List/PcListView.ts

@@ -1,14 +1,114 @@
 import { state } from '../../core/state';
 import { openHwModal } from '../../components/Modal/HWModal';
-import { sortAssets, formatInline } from '../../core/utils';
+import { sortAssets, formatInline, calculatePcScoreDeductive, getPcGrade, isWindows11Incompatible } from '../../core/utils';
 import { ASSET_SCHEMA } from '../../core/schema';
 import { createListView } from './ListFactory';
+import { SortState } from '../../core/tableHandler';
+
+let persistentSortState: SortState = { key: 'updated_at', direction: 'desc' };
 
 export function renderPcList(container: HTMLElement) {
-  container.innerHTML = `
-    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-muted);">
-      <div style="font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem;">PC 관리</div>
-      <p>해당 페이지는 다른 작업자에 의해 개발 중입니다.</p>
-    </div>
-  `;
+  createListView(container, {
+    title: 'PC',
+    persistentSortState,
+    dataSource: () => {
+      const list = (state.masterData.pc || []).filter((a: any) => a.asset_type !== '서버PC');
+      list.forEach((a: any) => {
+        a['_pc_score'] = calculatePcScoreDeductive(a[ASSET_SCHEMA.CPU.key], a[ASSET_SCHEMA.RAM.key], a[ASSET_SCHEMA.GPU.key], a.purchase_date);
+      });
+      // 변경일시(updated_at) 내림차순 정렬 (최신 변경 항목이 맨 위로)
+      return list.sort((a: any, b: any) => {
+        const dateA = a.updated_at || a.created_at || '';
+        const dateB = b.updated_at || b.created_at || '';
+        if (dateA < dateB) return 1;
+        if (dateA > dateB) return -1;
+        return 0;
+      });
+    },
+    searchKeys: ['CURRENT_DEPT', 'CURRENT_USER', 'MODEL_NAME', 'MAC_ADDR', 'MANAGER_MAIN', 'ASSET_TYPE'],
+    filterOptions: {
+      keywordLabel: `통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui}/${ASSET_SCHEMA.MANAGER_MAIN.ui}/${ASSET_SCHEMA.CURRENT_USER.ui})`,
+      showLoc: true,
+      showDept: true,
+      showType: true,
+      showStatus: true
+    },
+    onRowClick: (asset) => openHwModal(asset, 'view'),
+    columns: [
+      { 
+        header: ASSET_SCHEMA.HW_STATUS.ui, 
+        sortKey: ASSET_SCHEMA.HW_STATUS.key, 
+        align: 'center', 
+        width: '8%',
+        render: a => {
+          const status = a[ASSET_SCHEMA.HW_STATUS.key] || '재고';
+          let badgeClass = 'badge-light';
+          if (status === '운영') badgeClass = 'b-green';
+          else if (status === '재고') badgeClass = 'b-yellow';
+          else if (status === '수리') badgeClass = 'b-purple';
+          else if (status === '폐기') badgeClass = 'badge-muted';
+          return `<span class="badge ${badgeClass}">${status}</span>`;
+        }
+      },
+      { header: ASSET_SCHEMA.CURRENT_USER.ui, sortKey: ASSET_SCHEMA.CURRENT_USER.key, align: 'center', render: a => a[ASSET_SCHEMA.CURRENT_USER.key] || '-' },
+      { header: ASSET_SCHEMA.USER_POSITION.ui, sortKey: ASSET_SCHEMA.USER_POSITION.key, align: 'center', render: a => a[ASSET_SCHEMA.USER_POSITION.key] || '-' },
+      { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
+      { header: ASSET_SCHEMA.CPU.ui, sortKey: ASSET_SCHEMA.CPU.key, align: 'center', render: a => a[ASSET_SCHEMA.CPU.key] || '' },
+      { header: ASSET_SCHEMA.MAINBOARD.ui, sortKey: ASSET_SCHEMA.MAINBOARD.key, align: 'center', render: a => a[ASSET_SCHEMA.MAINBOARD.key] || '-' },
+      { header: ASSET_SCHEMA.RAM.ui, sortKey: ASSET_SCHEMA.RAM.key, align: 'center', render: a => a[ASSET_SCHEMA.RAM.key] || '' },
+      { header: ASSET_SCHEMA.GPU.ui, sortKey: ASSET_SCHEMA.GPU.key, align: 'center', render: a => a[ASSET_SCHEMA.GPU.key] || '-' },
+      { 
+        header: 'SSD', 
+        align: 'center', 
+        width: '8%',
+        render: a => {
+          try {
+            const vols = a.volumes ? (typeof a.volumes === 'string' ? JSON.parse(a.volumes) : a.volumes) : [];
+            if (Array.isArray(vols)) {
+              const ssds = vols.filter((v: any) => v && String(v.type).toUpperCase() === 'SSD');
+              if (ssds.length > 0) {
+                return ssds.map((v: any) => `${v.capacity || ''}${v.unit || 'GB'}`).join(' / ');
+              }
+            }
+          } catch (e) {}
+          return '-';
+        }
+      },
+      { 
+        header: 'HDD', 
+        align: 'center', 
+        width: '12%',
+        render: a => {
+          try {
+            const vols = a.volumes ? (typeof a.volumes === 'string' ? JSON.parse(a.volumes) : a.volumes) : [];
+            if (Array.isArray(vols)) {
+              const hdds = vols.filter((v: any) => v && String(v.type).toUpperCase() === 'HDD');
+              if (hdds.length > 0) {
+                return hdds.map((v: any) => `${v.capacity || ''}${v.unit || 'GB'}`).join(' / ');
+              }
+            }
+          } catch (e) {}
+          return '-';
+        }
+      },
+      { 
+        header: ASSET_SCHEMA.MAC_ADDR.ui, 
+        sortKey: ASSET_SCHEMA.MAC_ADDR.key, 
+        align: 'center', 
+        render: a => `<span style="font-family:monospace; font-size:11px;">${a[ASSET_SCHEMA.MAC_ADDR.key] || '-'}</span>` 
+      },
+      {
+        header: '성능 등급',
+        sortKey: '_pc_score',
+        align: 'center',
+        width: '8%',
+        render: a => {
+          const score = a._pc_score !== undefined ? a._pc_score : calculatePcScoreDeductive(a[ASSET_SCHEMA.CPU.key], a[ASSET_SCHEMA.RAM.key], a[ASSET_SCHEMA.GPU.key], a.purchase_date);
+          const isWin11Incompatible = isWindows11Incompatible(a[ASSET_SCHEMA.CPU.key], a[ASSET_SCHEMA.RAM.key]);
+          const grade = getPcGrade(score, isWin11Incompatible);
+          return `<span class="badge ${grade.class}" title="성능 점수: ${score}점">${grade.name}</span>`;
+        }
+      }
+    ]
+  });
 }

src/views/List/UserListView.ts

@@ -0,0 +1,60 @@
+import { state } from '../../core/state';
+import { openUserModal } from '../../components/Modal/UserModal';
+import { formatInline } from '../../core/utils';
+import { createListView } from './ListFactory';
+
+export function renderUserList(container: HTMLElement) {
+  createListView(container, {
+    title: '사용자',
+    dataSource: () => state.masterData.users || [],
+    searchKeys: ['emp_no', 'user_name', 'dept_name', 'position', 'status'],
+    filterOptions: {
+      keywordLabel: '사번/이름/부서/직급 검색',
+      showCorp: false,
+      showDept: true,
+      showType: false
+    },
+    onRowClick: (user) => openUserModal(user, 'view'),
+    columns: [
+      {
+        header: '사번',
+        sortKey: 'emp_no',
+        align: 'center',
+        width: '15%',
+        render: u => formatInline(u.emp_no || '-')
+      },
+      {
+        header: '이름',
+        sortKey: 'user_name',
+        align: 'center',
+        width: '15%',
+        render: u => formatInline(u.user_name || '-')
+      },
+      {
+        header: '조직 (부서)',
+        sortKey: 'dept_name',
+        align: 'left',
+        width: '25%',
+        render: u => formatInline(u.dept_name || '-')
+      },
+      {
+        header: '직급 (직무)',
+        sortKey: 'position',
+        align: 'left',
+        width: '25%',
+        render: u => formatInline(u.position || '-')
+      },
+      {
+        header: '상태',
+        sortKey: 'status',
+        align: 'center',
+        width: '10%',
+        render: u => {
+          const status = u.status || '재직';
+          const badgeClass = status === '퇴직' ? 'badge-danger' : 'badge-success';
+          return `<span class="badge ${badgeClass}">${status}</span>`;
+        }
+      }
+    ]
+  });
+}

src/views/SW_Table.ts

@@ -9,11 +9,13 @@ import { renderCloudList } from './List/CloudListView';
 import { renderDomainList } from './List/DomainListView';
 import { renderNetworkList } from './List/NetworkListView';
 import { renderPcPartList } from './List/PcPartListView';
+import { renderPartsMasterList } from './List/PartsMasterListView';
 import { renderSpaceInfoList } from './List/SpaceInfoListView';
 import { renderGiftList } from './List/GiftListView';
 import { renderFacilityList } from './List/FacilityListView';
 import { renderCostList } from './List/CostListView';
-import { createIcons, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw } from 'lucide';
+import { renderUserList } from './List/UserListView';
+import { createIcons, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw, Settings } from 'lucide';
 
 /**
  * 자산 목록 테이블 렌더링 통합 허브
@@ -36,6 +38,7 @@ export function renderSWTable(mainContent: HTMLElement) {
       else if (tab === '업무지원장비') renderEquipmentList(container);
       else if (tab === '네트워크') renderNetworkList(container);
       else if (tab === 'PC부품') renderPcPartList(container);
+      else if (tab === '부품 마스터') renderPartsMasterList(container);
       else if (tab === '공간정보장비') renderSpaceInfoList(container);
       else {
         container.innerHTML = `<div style="padding:2rem; color:var(--text-muted);">"${tab}" 탭에 대한 하드웨어 리스트 뷰가 정의되지 않았습니다.</div>`;
@@ -50,6 +53,7 @@ export function renderSWTable(mainContent: HTMLElement) {
       if (tab === '도메인') renderDomainList(container);
       else if (tab === '클라우드') renderCloudList(container);
       else if (tab === '비용관리') renderCostList(container);
+      else if (tab === '사용자') renderUserList(container);
       else {
         container.innerHTML = `<div style="padding:2rem; color:var(--text-muted);">"${tab}" 탭에 대한 운영지원 리스트 뷰가 정의되지 않았습니다.</div>`;
       }
@@ -69,7 +73,7 @@ export function renderSWTable(mainContent: HTMLElement) {
     
     // 전역 아이콘 초기화 (한 번 더 실행하여 누락 방지)
     createIcons({
-      icons: { Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw }
+      icons: { Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw, Settings }
     });
   } catch (err: any) {
     console.error('❌ Error rendering table view:', err);

start_docker_wsl.bat

@@ -0,0 +1,10 @@
+@echo off
+chcp 65001 >nul
+cd /d "%~dp0"
+powershell -ExecutionPolicy Bypass -File "%~dp0start_docker_wsl.ps1"
+if errorlevel 1 (
+	echo.
+	echo [ERROR] start_docker_wsl.ps1 failed.
+	pause
+	exit /b %errorlevel%
+)

start_docker_wsl.ps1

@@ -0,0 +1,107 @@
+[Console]::OutputEncoding = [System.Text.Encoding]::UTF8
+
+$projectWindowsPath = $PSScriptRoot
+$wslProjectPath = (wsl wslpath $projectWindowsPath).Trim()
+$envFilePath = Join-Path $PSScriptRoot '.env'
+
+function Get-EnvValue {
+    param(
+        [string]$FilePath,
+        [string]$Key
+    )
+
+    if (-not (Test-Path $FilePath)) {
+        return $null
+    }
+
+    $line = Get-Content $FilePath | Where-Object { $_ -match "^$Key=" } | Select-Object -First 1
+    if (-not $line) {
+        return $null
+    }
+
+    return ($line -split '=', 2)[1].Trim()
+}
+
+function Test-TcpPortFast {
+    param(
+        [string]$HostName,
+        [int]$Port,
+        [int]$TimeoutMs = 3000
+    )
+
+    $client = New-Object System.Net.Sockets.TcpClient
+    try {
+        $asyncResult = $client.BeginConnect($HostName, $Port, $null, $null)
+        if (-not $asyncResult.AsyncWaitHandle.WaitOne($TimeoutMs, $false)) {
+            $client.Close()
+            return $false
+        }
+
+        $client.EndConnect($asyncResult)
+        $client.Close()
+        return $true
+    }
+    catch {
+        $client.Close()
+        return $false
+    }
+}
+
+Write-Host "============================================" -ForegroundColor Cyan
+Write-Host "   HM ITAM WSL Docker Start" -ForegroundColor Cyan
+Write-Host "============================================" -ForegroundColor Cyan
+Write-Host ""
+
+Write-Host "[INFO] Checking WSL..."
+wsl -l -v
+if ($LASTEXITCODE -ne 0) {
+    Write-Host "[ERROR] WSL is not available." -ForegroundColor Red
+    exit 1
+}
+
+Write-Host "[INFO] Checking Docker in WSL..."
+wsl sh -lc "docker --version"
+if ($LASTEXITCODE -ne 0) {
+    Write-Host "[ERROR] Docker is not available inside WSL." -ForegroundColor Red
+    exit 1
+}
+
+$dbHost = Get-EnvValue -FilePath $envFilePath -Key 'DB_HOST'
+$dbPort = Get-EnvValue -FilePath $envFilePath -Key 'DB_PORT'
+
+if (-not $dbPort) {
+    $dbPort = '3306'
+}
+
+if (-not $dbHost) {
+    Write-Host "[WARN] .env is missing DB_HOST. Containers will still start, but backend DB calls will fail until DB settings are fixed." -ForegroundColor Yellow
+}
+
+if ($dbHost) {
+    Write-Host "[INFO] Checking external DB reachability..."
+    $dbReachable = Test-TcpPortFast -HostName $dbHost -Port ([int]$dbPort)
+    if (-not $dbReachable) {
+        Write-Host "[WARN] External DB is unreachable: $dbHost`:$dbPort" -ForegroundColor Yellow
+        Write-Host "[HINT] Containers will still start. Check VPN/private network connection, firewall rules, DB host/port in .env, or whether the DB server is running." -ForegroundColor Yellow
+    }
+}
+
+Write-Host "[INFO] Starting ITAM containers in WSL..."
+wsl sh -lc "cd '$wslProjectPath' && docker compose up --build -d --remove-orphans"
+if ($LASTEXITCODE -ne 0) {
+    Write-Host "[WARN] Build-based startup failed. Retrying with cached images/containers..." -ForegroundColor Yellow
+    wsl sh -lc "cd '$wslProjectPath' && docker compose up -d --remove-orphans"
+    if ($LASTEXITCODE -ne 0) {
+        Write-Host "[ERROR] Failed to start containers." -ForegroundColor Red
+        exit 1
+    }
+}
+
+Write-Host ""
+Write-Host "============================================" -ForegroundColor Green
+Write-Host " [OK] WSL Docker stack started." -ForegroundColor Green
+Write-Host " [INFO] Frontend: http://localhost:8080"
+Write-Host " [INFO] Backend : http://localhost:3000/api/assets/master"
+Write-Host "============================================" -ForegroundColor Green
+
+Start-Process "http://localhost:8080"

start_server.ps1

@@ -1,6 +1,49 @@
 # HM ITAM Server Start Script
 [Console]::OutputEncoding = [System.Text.Encoding]::UTF8
 
+function Get-EnvValue {
+    param(
+        [string]$FilePath,
+        [string]$Key
+    )
+
+    if (-not (Test-Path $FilePath)) {
+        return $null
+    }
+
+    $line = Get-Content $FilePath | Where-Object { $_ -match "^$Key=" } | Select-Object -First 1
+    if (-not $line) {
+        return $null
+    }
+
+    return ($line -split '=', 2)[1].Trim()
+}
+
+function Test-TcpPortFast {
+    param(
+        [string]$HostName,
+        [int]$Port,
+        [int]$TimeoutMs = 3000
+    )
+
+    $client = New-Object System.Net.Sockets.TcpClient
+    try {
+        $asyncResult = $client.BeginConnect($HostName, $Port, $null, $null)
+        if (-not $asyncResult.AsyncWaitHandle.WaitOne($TimeoutMs, $false)) {
+            $client.Close()
+            return $false
+        }
+
+        $client.EndConnect($asyncResult)
+        $client.Close()
+        return $true
+    }
+    catch {
+        $client.Close()
+        return $false
+    }
+}
+
 Write-Host "============================================" -ForegroundColor Cyan
 Write-Host "   HM ITAM System Start" -ForegroundColor Cyan
 Write-Host "============================================" -ForegroundColor Cyan
@@ -21,6 +64,13 @@ if (-not (Test-Path "node_modules")) {
 Write-Host "[INFO] Checking ports..."
 $backendPort = 3000
 $frontendPort = 8080
+$envFilePath = Join-Path $PSScriptRoot '.env'
+$dbHost = Get-EnvValue -FilePath $envFilePath -Key 'DB_HOST'
+$dbPort = Get-EnvValue -FilePath $envFilePath -Key 'DB_PORT'
+
+if (-not $dbPort) {
+    $dbPort = '3306'
+}
 
 if (Get-NetTCPConnection -LocalPort $backendPort -ErrorAction SilentlyContinue) {
     Write-Host "[WARNING] Port $backendPort [Backend] is already in use." -ForegroundColor Yellow
@@ -30,6 +80,21 @@ if (Get-NetTCPConnection -LocalPort $frontendPort -ErrorAction SilentlyContinue)
     Write-Host "[WARNING] Port $frontendPort [Frontend] is already in use." -ForegroundColor Yellow
 }
 
+if (-not $dbHost) {
+    Write-Host "[WARNING] .env is missing DB_HOST. Backend and frontend will still start, but DB calls will fail until DB settings are fixed." -ForegroundColor Yellow
+}
+else {
+    Write-Host "[INFO] Checking external DB reachability..."
+    $dbReachable = Test-TcpPortFast -HostName $dbHost -Port ([int]$dbPort)
+    if ($dbReachable) {
+        Write-Host "[INFO] External DB reachable: $dbHost`:$dbPort"
+    }
+    else {
+        Write-Host "[WARNING] External DB is unreachable: $dbHost`:$dbPort" -ForegroundColor Yellow
+        Write-Host "[WARNING] Backend and frontend will still start, but DB-backed screens and APIs may fail." -ForegroundColor Yellow
+    }
+}
+
 Write-Host ""
 Write-Host "[INFO] Starting Backend [Port: 3000]..."
 Start-Process cmd -ArgumentList "/k npm run server"

stop_docker_wsl.bat

@@ -0,0 +1,4 @@
+@echo off
+chcp 65001 >nul
+cd /d "%~dp0"
+powershell -ExecutionPolicy Bypass -File "%~dp0stop_docker_wsl.ps1"

stop_docker_wsl.ps1

@@ -0,0 +1,13 @@
+[Console]::OutputEncoding = [System.Text.Encoding]::UTF8
+
+$projectWindowsPath = $PSScriptRoot
+$wslProjectPath = (wsl wslpath $projectWindowsPath).Trim()
+
+Write-Host "[INFO] Stopping ITAM WSL Docker stack..."
+wsl sh -lc "cd '$wslProjectPath' && docker compose down --remove-orphans"
+if ($LASTEXITCODE -ne 0) {
+    Write-Host "[ERROR] Failed to stop containers." -ForegroundColor Red
+    exit 1
+}
+
+Write-Host "[OK] WSL Docker stack stopped." -ForegroundColor Green

vite.config.ts

@@ -1,16 +1,18 @@
 import { defineConfig } from 'vite';
 
+const proxyTarget = process.env.VITE_DEV_PROXY_TARGET || 'http://localhost:3000';
+
 export default defineConfig({
   server: {
     port: 8080,
     host: true, // Listen on all local IPs
     proxy: {
       '/api': {
-        target: 'http://localhost:3000',
+        target: proxyTarget,
         changeOrigin: true,
       },
       '/uploads': {
-        target: 'http://localhost:3000',
+        target: proxyTarget,
         changeOrigin: true,
       }
     }