refactor: 프로젝트 정리 및 최적화 (미사용 파일 제거, 코드 중복 제거, 정적 이미지 빌드 경로 수정)

- 미사용 목업 파일(dummyData.ts, realServerData.ts, server_data.json) 및 중복 기획서 제거

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

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

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

- 정적 이미지 폴더(img/)를 public/img/로 이동하여 프로덕션 빌드 시 로고 및 장비 사진 엑박 오류 해결

DESIGN-vercel.md

@@ -1,736 +0,0 @@
----
-version: alpha
-name: Vercel-design-analysis
-description: An inspired interpretation of Vercel's design language — a developer-platform brand whose surface is a stark black-and-ink duet on near-white canvas, broken at hero scale by a multi-color mesh gradient (cyan / blue / magenta / amber) that acts as the entire decorative system, paired with a custom geometric sans for headlines and a monospaced caption face for technical labels.
-
-colors:
-  primary: "#171717"
-  on-primary: "#ffffff"
-  ink: "#171717"
-  body: "#4d4d4d"
-  mute: "#888888"
-  hairline: "#ebebeb"
-  hairline-strong: "#a1a1a1"
-  canvas: "#ffffff"
-  canvas-soft: "#fafafa"
-  canvas-soft-2: "#f5f5f5"
-  link: "#0070f3"
-  link-deep: "#0761d1"
-  link-bg-soft: "#d3e5ff"
-  success: "#0070f3"
-  error: "#ee0000"
-  error-soft: "#f7d4d6"
-  error-deep: "#c50000"
-  warning: "#f5a623"
-  warning-soft: "#ffefcf"
-  warning-deep: "#ab570a"
-  violet: "#7928ca"
-  violet-soft: "#d8ccf1"
-  violet-deep: "#4c2889"
-  cyan: "#50e3c2"
-  cyan-soft: "#aaffec"
-  cyan-deep: "#29bc9b"
-  highlight-pink: "#ff0080"
-  highlight-magenta: "#eb367f"
-  gradient-develop-start: "#007cf0"
-  gradient-develop-end: "#00dfd8"
-  gradient-preview-start: "#7928ca"
-  gradient-preview-end: "#ff0080"
-  gradient-ship-start: "#ff4d4d"
-  gradient-ship-end: "#f9cb28"
-  selection-bg: "#171717"
-  selection-fg: "#f2f2f2"
-
-typography:
-  display-xl:
-    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
-    fontSize: 48px
-    fontWeight: 600
-    lineHeight: 48px
-    letterSpacing: -2.4px
-  display-lg:
-    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
-    fontSize: 32px
-    fontWeight: 600
-    lineHeight: 40px
-    letterSpacing: -1.28px
-  display-md:
-    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
-    fontSize: 24px
-    fontWeight: 600
-    lineHeight: 32px
-    letterSpacing: -0.96px
-  display-sm:
-    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
-    fontSize: 20px
-    fontWeight: 600
-    lineHeight: 28px
-    letterSpacing: -0.6px
-  body-lg:
-    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
-    fontSize: 18px
-    fontWeight: 400
-    lineHeight: 28px
-    letterSpacing: 0px
-  body-md:
-    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
-    fontSize: 16px
-    fontWeight: 400
-    lineHeight: 24px
-  body-md-strong:
-    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
-    fontSize: 16px
-    fontWeight: 500
-    lineHeight: 24px
-  body-sm:
-    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
-    fontSize: 14px
-    fontWeight: 400
-    lineHeight: 20px
-    letterSpacing: -0.28px
-  body-sm-strong:
-    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
-    fontSize: 14px
-    fontWeight: 500
-    lineHeight: 20px
-    letterSpacing: -0.28px
-  caption:
-    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
-    fontSize: 12px
-    fontWeight: 400
-    lineHeight: 16px
-  caption-mono:
-    fontFamily: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace
-    fontSize: 12px
-    fontWeight: 400
-    lineHeight: 16px
-  code:
-    fontFamily: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace
-    fontSize: 13px
-    fontWeight: 400
-    lineHeight: 20px
-  button-md:
-    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
-    fontSize: 14px
-    fontWeight: 500
-    lineHeight: 20px
-  button-lg:
-    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
-    fontSize: 16px
-    fontWeight: 500
-    lineHeight: 24px
-
-rounded:
-  none: 0px
-  xs: 4px
-  sm: 6px
-  md: 8px
-  lg: 12px
-  xl: 16px
-  pill-sm: 64px
-  pill: 100px
-  full: 9999px
-
-spacing:
-  xxs: 4px
-  xs: 8px
-  sm: 12px
-  md: 16px
-  lg: 24px
-  xl: 32px
-  2xl: 40px
-  3xl: 48px
-  4xl: 64px
-  5xl: 96px
-  6xl: 128px
-  section: 192px
-
-components:
-  nav-bar:
-    backgroundColor: "{colors.canvas}"
-    textColor: "{colors.ink}"
-    typography: "{typography.body-sm}"
-    height: 64px
-    padding: "{spacing.sm} {spacing.lg}"
-  nav-link:
-    textColor: "{colors.body}"
-    typography: "{typography.body-sm}"
-    rounded: "{rounded.full}"
-    padding: "{spacing.xs} {spacing.sm}"
-  nav-cta-signup:
-    backgroundColor: "{colors.primary}"
-    textColor: "{colors.on-primary}"
-    typography: "{typography.body-sm-strong}"
-    rounded: "{rounded.sm}"
-    padding: "0px {spacing.xs}"
-    height: 28px
-  nav-cta-login:
-    backgroundColor: "{colors.canvas}"
-    textColor: "{colors.ink}"
-    typography: "{typography.body-sm-strong}"
-    rounded: "{rounded.sm}"
-    padding: "0px {spacing.xs}"
-    height: 28px
-  nav-cta-ask-ai:
-    backgroundColor: "{colors.canvas}"
-    textColor: "{colors.ink}"
-    borderColor: "{colors.hairline}"
-    typography: "{typography.body-sm-strong}"
-    rounded: "{rounded.sm}"
-    padding: "0px {spacing.xs}"
-    height: 28px
-  button-primary:
-    backgroundColor: "{colors.primary}"
-    textColor: "{colors.on-primary}"
-    typography: "{typography.button-lg}"
-    rounded: "{rounded.pill}"
-    padding: "0px {spacing.sm}"
-  button-secondary:
-    backgroundColor: "{colors.canvas}"
-    textColor: "{colors.ink}"
-    typography: "{typography.button-lg}"
-    rounded: "{rounded.pill}"
-    padding: "0px {spacing.sm}"
-  button-primary-sm:
-    backgroundColor: "{colors.primary}"
-    textColor: "{colors.on-primary}"
-    typography: "{typography.button-md}"
-    rounded: "{rounded.pill}"
-    padding: "0px {spacing.xs}"
-  button-secondary-sm:
-    backgroundColor: "{colors.canvas}"
-    textColor: "{colors.ink}"
-    typography: "{typography.button-md}"
-    rounded: "{rounded.pill}"
-    padding: "0px {spacing.xs}"
-  tab-ghost:
-    backgroundColor: "{colors.canvas}"
-    textColor: "{colors.ink}"
-    typography: "{typography.body-sm}"
-    rounded: "{rounded.pill-sm}"
-    padding: "0px {spacing.md}"
-  icon-button-circular:
-    backgroundColor: "{colors.canvas}"
-    textColor: "{colors.ink}"
-    borderColor: "{colors.hairline}"
-    rounded: "{rounded.full}"
-  card-marketing:
-    backgroundColor: "{colors.canvas}"
-    textColor: "{colors.ink}"
-    typography: "{typography.body-md}"
-    rounded: "{rounded.md}"
-    padding: "{spacing.lg}"
-  card-marketing-large:
-    backgroundColor: "{colors.canvas}"
-    textColor: "{colors.ink}"
-    typography: "{typography.body-md}"
-    rounded: "{rounded.lg}"
-    padding: "{spacing.xl}"
-  card-soft:
-    backgroundColor: "{colors.canvas-soft}"
-    textColor: "{colors.ink}"
-    typography: "{typography.body-md}"
-    rounded: "{rounded.md}"
-    padding: "{spacing.lg}"
-  template-card:
-    backgroundColor: "{colors.canvas}"
-    textColor: "{colors.ink}"
-    typography: "{typography.body-md}"
-    rounded: "{rounded.md}"
-    padding: "{spacing.md}"
-  code-editor-mockup:
-    backgroundColor: "{colors.primary}"
-    textColor: "{colors.on-primary}"
-    typography: "{typography.code}"
-    rounded: "{rounded.md}"
-    padding: "{spacing.lg}"
-  form-input:
-    backgroundColor: "{colors.canvas}"
-    textColor: "{colors.ink}"
-    borderColor: "{colors.hairline}"
-    typography: "{typography.body-sm}"
-    rounded: "{rounded.sm}"
-    padding: "0px {spacing.sm}"
-    height: 40px
-  form-input-sm:
-    backgroundColor: "{colors.canvas}"
-    textColor: "{colors.ink}"
-    borderColor: "{colors.hairline}"
-    typography: "{typography.body-sm}"
-    rounded: "{rounded.sm}"
-    padding: "0px {spacing.sm}"
-    height: 32px
-  form-input-lg:
-    backgroundColor: "{colors.canvas}"
-    textColor: "{colors.ink}"
-    borderColor: "{colors.hairline}"
-    typography: "{typography.body-md}"
-    rounded: "{rounded.sm}"
-    padding: "0px {spacing.sm}"
-    height: 48px
-  badge-secondary:
-    backgroundColor: "{colors.canvas-soft}"
-    textColor: "{colors.body}"
-    typography: "{typography.caption}"
-    rounded: "{rounded.full}"
-    padding: "0px {spacing.xs}"
-  pricing-card:
-    backgroundColor: "{colors.canvas}"
-    textColor: "{colors.ink}"
-    typography: "{typography.body-md}"
-    rounded: "{rounded.lg}"
-    padding: "{spacing.xl}"
-  pricing-card-featured:
-    backgroundColor: "{colors.primary}"
-    textColor: "{colors.on-primary}"
-    typography: "{typography.body-md}"
-    rounded: "{rounded.lg}"
-    padding: "{spacing.xl}"
-  logo-strip:
-    backgroundColor: "{colors.canvas}"
-    textColor: "{colors.body}"
-    typography: "{typography.body-sm}"
-    padding: "{spacing.lg} {spacing.xl}"
-  hero-band:
-    backgroundColor: "{colors.canvas}"
-    textColor: "{colors.ink}"
-    typography: "{typography.display-xl}"
-    padding: "{spacing.4xl} {spacing.lg}"
-  feature-mesh-band:
-    backgroundColor: "{colors.canvas}"
-    textColor: "{colors.ink}"
-    typography: "{typography.display-lg}"
-    padding: "{spacing.5xl} {spacing.lg}"
-  showcase-band-light:
-    backgroundColor: "{colors.canvas-soft}"
-    textColor: "{colors.ink}"
-    typography: "{typography.display-lg}"
-    padding: "{spacing.5xl} {spacing.lg}"
-  showcase-band-dark:
-    backgroundColor: "{colors.primary}"
-    textColor: "{colors.on-primary}"
-    typography: "{typography.display-lg}"
-    padding: "{spacing.5xl} {spacing.lg}"
-  footer:
-    backgroundColor: "{colors.canvas}"
-    textColor: "{colors.body}"
-    typography: "{typography.body-sm}"
-    padding: "{spacing.4xl} {spacing.lg}"
-  link-inline:
-    textColor: "{colors.link}"
-    typography: "{typography.body-md}"
-  banner-marketing:
-    backgroundColor: "{colors.canvas-soft}"
-    textColor: "{colors.body}"
-    typography: "{typography.body-sm}"
-    rounded: "{rounded.full}"
-    padding: "{spacing.xs} {spacing.sm}"
-
-  # ─── Examples (illustrative) — auto-derived; resolve any TO_FILL markers below ───
-  ex-pricing-tier:
-    description: "Default tier card. Mirrors pricing-card chrome on canvas-soft surface with a hairline border."
-    backgroundColor: "{colors.canvas-soft}"
-    textColor: "{colors.ink}"
-    borderColor: "{colors.hairline}"
-    rounded: "{rounded.lg}"
-    padding: "{spacing.xl}"
-  ex-pricing-tier-featured:
-    description: "Featured tier — polarity-flipped to ink primary with white text and white CTA."
-    backgroundColor: "{colors.ink}"
-    textColor: "{colors.on-primary}"
-    rounded: "{rounded.lg}"
-    padding: "{spacing.xl}"
-  ex-product-selector:
-    description: "What's Included summary card — repurposed for the brand's GPU / inference / Pro feature tiers."
-    backgroundColor: "{colors.canvas-soft}"
-    rounded: "{rounded.md}"
-    padding: "{spacing.lg}"
-  ex-cart-drawer:
-    description: "Subscription summary — line items per add-on (NOT a literal e-commerce cart)."
-    backgroundColor: "{colors.canvas}"
-    rounded: "{rounded.md}"
-    padding: "{spacing.lg}"
-    item-divider: "{colors.hairline}"
-  ex-app-shell-row:
-    description: "Sidebar nav row. Active state uses brand primary as a left-edge indicator bar."
-    backgroundColor: "{colors.canvas}"
-    activeIndicator: "{colors.primary}"
-    rounded: "{rounded.sm}"
-    padding: "{spacing.xs} {spacing.sm}"
-  ex-data-table-cell:
-    description: "Mirrors the brand's table chrome. Header uses caption-mono uppercase mono; body uses body-sm."
-    headerBackground: "{colors.canvas-soft}"
-    headerTypography: "{typography.caption-mono}"
-    bodyTypography: "{typography.body-sm}"
-    cellPadding: "{spacing.xs} {spacing.sm}"
-    rowBorder: "{colors.hairline}"
-  ex-auth-form-card:
-    description: "Sign-in / sign-up card. Mirrors card-marketing-large chrome with form-input primitives inside."
-    backgroundColor: "{colors.canvas-soft}"
-    rounded: "{rounded.lg}"
-    padding: "{spacing.xl}"
-  ex-modal-card:
-    description: "Modal dialog surface — same chrome as card-marketing-large with Level 5 modal shadow."
-    backgroundColor: "{colors.canvas}"
-    rounded: "{rounded.lg}"
-    padding: "{spacing.xl}"
-  ex-empty-state-card:
-    description: "Empty-state illustration frame. Generous padding on canvas-soft."
-    backgroundColor: "{colors.canvas-soft}"
-    rounded: "{rounded.lg}"
-    padding: "{spacing.3xl}"
-    captionTypography: "{typography.body-md}"
-  ex-toast:
-    description: "Toast notification surface — flat-cornered card-marketing chrome with Level 4 shadow."
-    backgroundColor: "{colors.canvas}"
-    rounded: "{rounded.md}"
-    padding: "{spacing.sm} {spacing.md}"
-    typography: "{typography.body-sm}"
-
----
-
-
-## Overview
-
-Vercel is a developer-platform brand — the page is a deployment dashboard's marketing surface, written for engineers who already know the syntax. It earns that posture with one of the cleanest stark systems on the web: near-white `{colors.canvas-soft}` body background, ink-near-black `{colors.ink}` text, a 200-step gray scale that gives every divider, border, and disabled state its own deliberate step. The only place the brand introduces colour at marketing scale is the multi-stop mesh gradient (`{colors.gradient-develop-start}` → `{colors.gradient-preview-end}` → `{colors.gradient-ship-start}` → cyan / magenta / amber) that floats in atmospheric backdrops, never miniaturised to a swatch. That gradient is the entire decoration system.
-
-Type is the second decisive voice. The brand's own custom geometric sans (Geist) carries display, body, button — everything narrative — at weight 600 for display, 500 for buttons, 400 for body. A matching monospaced face (Geist Mono) carries technical labels: terminal mockups, code blocks, sometimes filename captions. Headlines are sentence-case with aggressive negative letter-spacing (`-2.4px` at 48 px hero) — the brand never letter-spaces positively, never goes uppercase outside of mono labels.
-
-Surfaces use a four-step ladder: `{colors.canvas}` (pure white for cards), `{colors.canvas-soft}` 98% (the page body), `{colors.canvas-soft-2}` 95% (occasional inset region), `{colors.primary}` (the deep ink-near-black used as the polarity-flipped band when a section needs the dark mode treatment). Shadows are exceptionally subtle — every elevated card carries a stacked shadow built from `0px 1px 1px #00000005` + `0px 2px 2px #0000000a` + an inset border. Cards never float on heavy drop-shadow; they sit on the page held by hairline + soft glow.
-
-**Key Characteristics:**
-- A single black-ink primary CTA `{colors.primary}` carries every conversion target, paired with white-on-white `button-secondary` for the secondary action. The brand uses 100 px pill shape for marketing CTAs and a tight 6 px square shape for in-app nav buttons.
-- A multi-stop mesh gradient (cyan-blue-magenta-amber) is the only decorative chrome — used at hero scale and inside feature-band atmospheric backdrops. It is the brand.
-- Every section eyebrow and small label uses the monospace face `{typography.caption-mono}` or `{typography.code}`; everything else is in the geometric sans.
-- Subtle stacked-shadow elevation — three offsets layered with 4-12 % black opacity — never a single heavy drop-shadow.
-- A complete 100–1000 gray + blue + red + amber + green + teal + purple + pink colour scale exists as a system token set, but the marketing surface uses only the `100`, `1000`, and `700`-level tones; the rest stay in the design-system tokens for in-product surfaces.
-- An "Active CPU" pricing rhythm: `pricing-card` lays out 3-up on the pricing page with `pricing-card-featured` (Pro tier) polarity-flipped to `{colors.primary}` against white-card siblings.
-
-## Colors
-
-### Brand & Accent
-- **Ink** (`{colors.primary}` — `#171717`): The single primary CTA color. Black-near-pure ink that carries every Sign Up pill, every footer CTA, the dark-band polarity-flip. Used as text color throughout the page on light surfaces. (Resolved from `--ds-gray-1000`.)
-- **Cyan** (`{colors.cyan}` — `#50e3c2`): A signature mint-cyan used in the brand gradient and inside Geist-system spotlight tokens. Visible inside the hero gradient stops.
-- **Highlight Pink** (`{colors.highlight-pink}` — `#ff0080`): The brand's highlight magenta, used as the high-saturation stop in the preview-gradient pair.
-- **Violet** (`{colors.violet}` — `#7928ca`): The deep purple used as the start of the preview-gradient and inside developer-console highlights.
-- **Link Blue** (`{colors.link}` — `#0070f3`): The brand's primary link color and the legacy `--geist-success` semantic.
-
-### Surface
-- **Canvas** (`{colors.canvas}` — `#ffffff`): The pure-white card / dialog / modal surface.
-- **Canvas Soft** (`{colors.canvas-soft}` — `#fafafa`): The default page background — 98 % white. Almost every section sits on this tone.
-- **Canvas Soft 2** (`{colors.canvas-soft-2}` — `#f5f5f5`): A slightly deeper inset surface for "code editor inner background", template-card hover states, and dropdown menus.
-- **Hairline** (`{colors.hairline}` — `#ebebeb`): 1 px dividers — table rows, card borders, input borders.
-- **Hairline Strong** (`{colors.hairline-strong}` — `#a1a1a1`): The 500-level gray, used as the slightly-stronger divider on light bands and as the deemphasised text color.
-
-### Text
-- **Ink** (`{colors.ink}` — `#171717`): Every heading and body paragraph on light surfaces.
-- **Body** (`{colors.body}` — `#4d4d4d`): Secondary text — sub-headings, body captions, nav-link inactive text, footer column body.
-- **Mute** (`{colors.mute}` — `#888888`): Lowest-priority text — placeholder text, fine print, low-key labels.
-- **On Primary** (`{colors.on-primary}` — `#ffffff`): All text on `{colors.primary}` surfaces.
-
-### Semantic
-- **Success / Link** (`{colors.success}` — `#0070f3`): The brand's legacy success indicator doubles as the primary link color. Visible underline-on-hover for inline body links.
-- **Link Deep** (`{colors.link-deep}` — `#0761d1`): The pressed / visited tone for inline links.
-- **Link Bg Soft** (`{colors.link-bg-soft}` — `#d3e5ff`): Soft pastel blue fill for "what's new" pill banners and informational badges.
-- **Error** (`{colors.error}` — `#ee0000`): Validation red for destructive actions and form errors.
-- **Error Soft** (`{colors.error-soft}` — `#f7d4d6`): Soft pastel red for destructive-state backgrounds.
-- **Error Deep** (`{colors.error-deep}` — `#c50000`): Pressed / deep destructive state.
-- **Warning** (`{colors.warning}` — `#f5a623`): Caution / pending status indicator.
-- **Warning Soft** (`{colors.warning-soft}` — `#ffefcf`) / **Warning Deep** (`{colors.warning-deep}` — `#ab570a`): Background + pressed variants.
-
-### Brand Gradient
-The brand's signature decoration is a three-pair gradient stack:
-- **Develop** (`{colors.gradient-develop-start}` `#007cf0` → `{colors.gradient-develop-end}` `#00dfd8`) — the blue-to-teal pair used to mark the "deploy" / "develop" rhythm.
-- **Preview** (`{colors.gradient-preview-start}` `#7928ca` → `{colors.gradient-preview-end}` `#ff0080`) — the violet-to-pink pair used for "preview" surfaces.
-- **Ship** (`{colors.gradient-ship-start}` `#ff4d4d` → `{colors.gradient-ship-end}` `#f9cb28`) — the coral-to-amber pair used for "ship" surfaces.
-
-The three pairs collapse into a single multi-color mesh gradient when used as the hero atmospheric backdrop. Treat the gradient as one unified object — do not crop down to a single colour, do not reorder the stops, and do not miniaturise. Used at hero scale only.
-
-## Typography
-
-### Font Family
-Two custom faces carry the entire system:
-
-1. **A custom geometric sans** (extracted as `Geist`) for every display, body, button, link, and label. Weights 400 / 500 / 600 are the working set; the face never appears in 700 or heavier. Display sizes are tracked aggressively negative (`-2.4 px` at 48 px hero, `-1.28 px` at 32 px section); body stays at neutral or slightly-negative tracking.
-2. **A custom monospaced face** (extracted as `Geist Mono`) for terminal mockups, code blocks, and small mono-caption labels — anything that wants to signal "technical." Weight 400 only at 12 – 13 px. Tracking neutral.
-
-A condensed display sans (`Space Grotesk`) is loaded as a third face for occasional editorial moments but does not render as the primary face anywhere in the captured surfaces.
-
-### Hierarchy
-
-| Token | Size | Weight | Line Height | Letter Spacing | Use |
-|---|---|---|---|---|---|
-| `{typography.display-xl}` | 48px | 600 | 48px | -2.4px | Hero headline ("Build and deploy on the AI Cloud."). |
-| `{typography.display-lg}` | 32px | 600 | 40px | -1.28px | Section headlines ("Your frontend, delivered.", "A compute model for all workloads."). |
-| `{typography.display-md}` | 24px | 600 | 32px | -0.96px | Card-cluster headlines, pricing-tier names. |
-| `{typography.display-sm}` | 20px | 600 | 28px | -0.6px | Inline display micro-headings. |
-| `{typography.body-lg}` | 18px | 400 | 28px | 0 | Lead paragraphs under section headlines. |
-| `{typography.body-md}` | 16px | 400 | 24px | 0 | Default body paragraph. |
-| `{typography.body-md-strong}` | 16px | 500 | 24px | 0 | Bolded inline body. |
-| `{typography.body-sm}` | 14px | 400 | 20px | -0.28px | Secondary body, nav-link text, button-md labels. |
-| `{typography.body-sm-strong}` | 14px | 500 | 20px | -0.28px | Nav CTA labels, table-row emphasis. |
-| `{typography.caption}` | 12px | 400 | 16px | 0 | Footer secondary lines, badge labels. |
-| `{typography.caption-mono}` | 12px | 400 | 16px | 0 | Section eyebrows and label captions that want a technical voice. |
-| `{typography.code}` | 13px | 400 | 20px | 0 | Inline code, terminal mockups, command snippets. |
-| `{typography.button-md}` | 14px | 500 | 20px | 0 | Small / nav-scale button labels. |
-| `{typography.button-lg}` | 16px | 500 | 24px | 0 | Marketing-scale pill button labels. |
-
-### Principles
-- **Negative tracking is part of the voice.** Display sizes use aggressive `-2.4` to `-0.6` px tracking. Reverting to default tracking breaks the brand.
-- **Sentence-case headlines, period-terminated.** Headlines like "Build and deploy on the AI Cloud." end with a deliberate period — that punctuation is part of the brand's voice.
-- **Mono for the technical layer only.** Section eyebrows, code blocks, terminal mockups. Body paragraphs never set in mono.
-- **Weight 600 is the display ceiling.** The geometric sans never appears at 700 / 800. The brand reads as a calmer system because of this.
-
-### Note on Font Substitutes
-The two primary faces are proprietary (custom-cut for the brand). Open-source substitutes:
-- **Geometric sans** — *Inter* (400 / 500 / 600) is the closest stylistic match; `font-feature-settings: "ss01", "ss02"` enables the geometric alternates. *Satoshi* is a passable second choice.
-- **Monospace** — *JetBrains Mono* (400) at 12 – 13 px matches the technical voice. *IBM Plex Mono* is the second-best option.
-
-## Layout
-
-### Spacing System
-- **Base unit**: 4 px. The brand's `--geist-space` token is exactly 4 px and every captured value is a multiple of 4.
-- **Tokens**: `{spacing.xxs}` 4 px · `{spacing.xs}` 8 px · `{spacing.sm}` 12 px · `{spacing.md}` 16 px · `{spacing.lg}` 24 px · `{spacing.xl}` 32 px · `{spacing.2xl}` 40 px · `{spacing.3xl}` 48 px · `{spacing.4xl}` 64 px · `{spacing.5xl}` 96 px · `{spacing.6xl}` 128 px · `{spacing.section}` 192 px.
-- **Section padding**: marketing bands use `{spacing.4xl}` to `{spacing.5xl}` top/bottom. Hero bands stretch to `{spacing.section}` to give the mesh gradient room to breathe.
-- **Card interior padding**: marketing cards sit at `{spacing.lg}` to `{spacing.xl}`; template-grid cards stay tighter at `{spacing.md}` because they sit in a denser grid.
-- **Inline gap**: button rows, nav rows, and chip rows use `{spacing.sm}` to `{spacing.md}` between siblings. The brand's `--geist-gap` is exactly 24 px.
-
-### Grid & Container
-- **Max width**: ~1400 px (`--ds-page-width`); the legacy `--geist-page-width` is 1200 px and still appears on some marketing surfaces. Content centres with horizontal gutters of `{spacing.lg}` 24 px on desktop, `{spacing.md}` 16 px on mobile.
-- **Column patterns**:
-  - Three-feature row: 3-up at desktop, 1-up at mobile (rows like "Web Apps / Composable Commerce / Multi-tenant Platforms").
-  - Tab pill row: 5-up centred row of `tab-ghost` pills.
-  - Template-grid cluster: 5-up at desktop, scaling to 1-up at mobile.
-  - Pricing tier grid: 3-up at desktop with the middle tier polarity-flipped.
-  - Logo strip: ~5 logos wide, single row.
-
-### Whitespace Philosophy
-The mesh gradient does most of the heavy decorative lifting; whitespace separates the bands. Section spacing is generous — `{spacing.4xl}` to `{spacing.5xl}` between bands lets the gradient breathe. Inside a card, the headline/paragraph stack is tight (`{spacing.xs}` 8 px gap), then a wider gap before the CTA cluster. The page reads as engineered — large gaps + tight interior, never the other way around.
-
-### Responsive Strategy
-
-#### Breakpoints
-
-| Name | Width | Key Changes |
-|---|---|---|
-| Mobile | < 600px | Hero stacks; nav collapses to hamburger; 3-up feature grids drop to 1-up; tab pill row enables horizontal scroll. |
-| Tablet | 600–959px | 3-up grids drop to 2-up; nav still horizontal. |
-| Desktop | 960–1199px | Full 3-up grids; pricing 3-up. |
-| Wide | 1200–1399px | Container caps at 1400 px content width. |
-| Ultra-wide | ≥ 1400px | Content stays centred at 1400 px; bands stretch edge-to-edge in colour but content holds the max-width. |
-
-#### Touch Targets
-The `button-primary` pill renders at ~32 px tall in nav and ~48 px tall in marketing contexts. Marketing CTAs comfortably meet WCAG AAA at all breakpoints; nav buttons inflate touch area through `{spacing.xs}` padding on mobile to meet the 44 × 44 px floor.
-
-#### Collapsing Strategy
-- **Nav**: full link row + Ask AI / Log In / Sign Up pills at desktop. Collapses to logo + hamburger at mobile with the menu opening as a full-overlay.
-- **Hero**: mesh gradient stays centred; headline + body stack vertically at all breakpoints (the brand doesn't use a split-hero pattern).
-- **Three-feature row**: 3-up → 2-up → 1-up at the breakpoints above; cards keep their `{rounded.md}` 8 px shape across all viewports.
-- **Pricing card grid**: 3-up at desktop, vertical stack at mobile with `pricing-card-featured` always sitting in the middle.
-- **Template grid**: 5-up → 3-up → 2-up → 1-up. Each `template-card` keeps its 16:9 aspect on the image.
-
-#### Image Behavior
-- **Mesh gradient**: rendered as inline SVG or canvas-painted gradient; scales fluidly with the hero container; never crops, never tiles.
-- **Customer logos**: rendered as monochrome SVGs in the logo strip; consistent 24 px height.
-- **Code editor mockup**: dark `{colors.primary}` rectangle with mono text rendered inside; treated as an image at the layout level.
-- **Template thumbnails**: 16:9 landscape inside `{rounded.md}` card chrome; lazy-loaded; consistent grayscale palette in the placeholder state.
-
-## Elevation & Depth
-
-| Level | Treatment | Use |
-|---|---|---|
-| Level 0 — Flat | No shadow, no border. | Full-bleed hero bands and the polarity-flipped dark sections. |
-| Level 1 — Inset Hairline | `0 0 0 1px #00000014` inset 1 px border. | Default card chrome — the brand's universal "you can see this card" cue. |
-| Level 2 — Subtle Drop | `0px 1px 1px #00000005, 0px 2px 2px #0000000a` plus inset hairline. | Slightly elevated cards (template-grid, marketing-card). |
-| Level 3 — Soft Stack | `0px 2px 2px #0000000a, 0px 8px 8px -8px #0000000a` plus inset hairline. | The "medium" elevation — feature-grid cards. |
-| Level 4 — Float Stack | `0px 2px 2px #0000000a, 0px 8px 16px -4px #0000000a` plus inset hairline. | "Large" elevation — pricing cards, callout panels. |
-| Level 5 — Modal | `0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f` plus inset hairline. | Modal / dialog surfaces and dropdown menus. |
-
-The brand uses STACKED shadows — multiple small offsets layered to fake natural light — never a single 8-px-blur generic drop. Inset hairline rings are always added so the card edge stays crisp.
-
-### Decorative Depth
-- **Mesh gradient as atmospheric depth**: the hero's multi-stop gradient is the brand's only "atmospheric" effect — applied as a flat 2-D backdrop rather than a 3-D illustration.
-- **Polarity-flipped dark band as section-depth**: switching the surface from `{colors.canvas-soft}` to `{colors.primary}` (the deep ink) is the brand's chief depth cue between bands.
-- **Inset-shadow + drop-shadow combo**: the cards' combination of an inset 1 px ring and a multi-stop drop produces a "card sits on the page" effect without ever feeling material-heavy.
-
-## Shapes
-
-### Border Radius Scale
-
-| Token | Value | Use |
-|---|---|---|
-| `{rounded.none}` | 0px | Full-bleed hero / footer bands. |
-| `{rounded.xs}` | 4px | Tightest inline pill — the `nav-cta-signup` 6-px-radius button (mapped to `xs/sm`). |
-| `{rounded.sm}` | 6px | The brand's `--geist-radius` token — base UI radius for in-app buttons, form inputs, dropdown menus. |
-| `{rounded.md}` | 8px | The brand's `--geist-marketing-radius` token — feature cards, template cards. |
-| `{rounded.lg}` | 12px | Slightly larger card chrome (pricing-card variants). |
-| `{rounded.xl}` | 16px | Largest card chrome — when a card hosts a hero image cap. |
-| `{rounded.pill-sm}` | 64px | Tab-ghost pills inside the "AI Apps / Web Apps / Ecommerce / Marketing / Platforms" row. |
-| `{rounded.pill}` | 100px | The marketing CTA pill — `button-primary`, `button-secondary`, "Start Deploying" pill. |
-| `{rounded.full}` | 9999px | Icon-button circular containers, nav-link ghost pills. |
-
-### Photography Geometry
-- **Mesh gradient**: full-bleed 2-D atmospheric backdrop, never cropped to a frame; treated as the page's wallpaper.
-- **Customer logos**: monochrome SVG, consistent 24 px height in a flex row.
-- **Code editor mockup**: 16:10 dark rectangle, `{rounded.md}` corners.
-- **Template thumbnails**: 16:9 landscape inside `{rounded.md}` chrome.
-- **Showcase imagery**: 2:1 or 16:9 inside `{rounded.lg}` to `{rounded.xl}` chrome with a stacked shadow.
-
-## Components
-
-### Buttons
-
-**`button-primary`** — the canonical 100-px-radius black pill, marketing scale.
-- Background `{colors.primary}`, text `{colors.on-primary}`, label set in `{typography.button-lg}`, padding `0px {spacing.sm}` 12 px, shape `{rounded.pill}` 100 px. Renders ~48 px tall when paired with the marketing flex layout.
-
-**`button-secondary`** — the white pill paired with the black primary inside marketing bands.
-- Background `{colors.canvas}`, text `{colors.ink}`, same typography + padding as `button-primary`, shape `{rounded.pill}`.
-
-**`button-primary-sm`** — the smaller-scale primary pill used inside nav and pricing-card CTAs.
-- Background `{colors.primary}`, text `{colors.on-primary}`, label set in `{typography.button-md}` (14 px / 500), shape `{rounded.pill}`.
-
-**`button-secondary-sm`** — the smaller-scale white pill paired with `button-primary-sm`.
-- Background `{colors.canvas}`, text `{colors.ink}`, same typography + shape as `button-primary-sm`.
-
-**`tab-ghost`** — the centred-row tab pill ("AI Apps / Web Apps / Ecommerce / Marketing / Platforms").
-- Background `{colors.canvas}`, text `{colors.ink}`, label set in `{typography.body-sm}`, padding `0px {spacing.md}`, shape `{rounded.pill-sm}` 64 px.
-
-**`icon-button-circular`** — the circular icon container (often a "?" or arrow inside).
-- Background `{colors.canvas}`, dark icon, 1 px solid hairline border, shape `{rounded.full}`.
-
-**Nav CTAs:**
-
-**`nav-cta-signup`** — the small black "Sign Up" button in the nav row.
-- Background `{colors.primary}`, text `{colors.on-primary}`, label `{typography.body-sm-strong}`, padding `0px {spacing.xs}`, height 28 px, shape `{rounded.sm}` 6 px (the brand's `--geist-radius`).
-
-**`nav-cta-login`** — the white "Log In" button in the nav.
-- Background `{colors.canvas}`, text `{colors.ink}`, same typography / height / shape as `nav-cta-signup`.
-
-**`nav-cta-ask-ai`** — the small "Ask AI" button with a faint border.
-- Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid `{colors.hairline}` border (extracted as `0px solid rgb(235, 235, 235)`), same typography / height / shape.
-
-### Cards & Containers
-
-**`card-marketing`** — the canonical marketing feature card (3-up section cards).
-- Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.lg}` 24 px, shape `{rounded.md}` 8 px (the `--geist-marketing-radius`). Carries Level 3 soft-stack shadow.
-
-**`card-marketing-large`** — the larger marketing card used for "compute model" / "AI Gateway" callouts.
-- Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.xl}`, shape `{rounded.lg}` 12 px. Carries Level 4 float-stack shadow.
-
-**`card-soft`** — the soft-tinted card used inside cluster groups (lighter than canvas-soft).
-- Background `{colors.canvas-soft}`, text `{colors.ink}`, padding `{spacing.lg}`, shape `{rounded.md}`.
-
-**`template-card`** — the deploy-template card in the "Deploy your first app" grid.
-- Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.md}` 16 px, shape `{rounded.md}` 8 px. Hosts a 16:9 thumbnail at the top.
-
-**`code-editor-mockup`** — the dark code-preview surface inside marketing bands.
-- Background `{colors.primary}`, text `{colors.on-primary}`, body in `{typography.code}` (13 px / Geist Mono), padding `{spacing.lg}` 24 px, shape `{rounded.md}` 8 px.
-
-**`pricing-card`** — the default pricing-tier card.
-- Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.xl}` 32 px, shape `{rounded.lg}` 12 px. Inside: tier name in `{typography.display-md}`, price in `{typography.display-xl}`, feature list in `{typography.body-md}` rows, CTA at the bottom.
-
-**`pricing-card-featured`** — the polarity-flipped "Pro" tier card.
-- Background `{colors.primary}`, text `{colors.on-primary}`, same shape + padding as `pricing-card`. CTA inverts to `button-secondary-sm` (white pill on black card).
-
-### Inputs & Forms
-
-**`form-input`** — the canonical text input.
-- Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid `{colors.hairline}` border, body in `{typography.body-sm}` (14 px), padding `0px {spacing.sm}`, height 40 px (the brand's `--geist-form-height`), shape `{rounded.sm}` 6 px.
-
-**`form-input-sm`** — small-height variant (32 px tall) for tight forms.
-- Same as `form-input` but height 32 px (the `--geist-form-small-height`).
-
-**`form-input-lg`** — large-height variant (48 px tall) for hero CTAs.
-- Same as `form-input` but height 48 px (the `--geist-form-large-height`); body in `{typography.body-md}` 16 px.
-
-### Navigation
-
-**`nav-bar`** — the sticky top nav.
-- Background `{colors.canvas}`, text `{colors.ink}`, height 64 px (the brand's `--header-height`), padding `{spacing.sm} {spacing.lg}`. Layout: logo left, link row centre, "Ask AI / Log In / Sign Up" cluster right.
-
-**`nav-link`** — the centred link row inside `nav-bar`.
-- Text `{colors.body}`, set in `{typography.body-sm}`, padding `{spacing.xs} {spacing.sm}`, shape `{rounded.full}` (ghost pill — visible only on hover or active, but the radius is documented).
-
-**`footer`** — the bottom 4-column nav.
-- Background `{colors.canvas}`, text `{colors.body}`, padding `{spacing.4xl} {spacing.lg}`. Eyebrow column labels in `{typography.caption-mono}` (uppercase mono effect); link rows in `{typography.body-sm}`.
-
-### Signature Components
-
-**`hero-band`** — the white hero with the mesh gradient backdrop.
-- Background `{colors.canvas}` (or `{colors.canvas-soft}` on some surfaces), text `{colors.ink}`, padding `{spacing.4xl} {spacing.lg}`. Inside: a small mono badge above the headline, the headline in `{typography.display-xl}` (sentence-case, period-terminated), a body lead in `{typography.body-lg}`, then a CTA row with `button-primary` + `button-secondary`. The mesh gradient sits behind, scaled to occupy roughly the top half of the band.
-
-**`feature-mesh-band`** — the secondary section that hosts a mesh-gradient atmospheric backdrop with feature copy on top.
-- Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.5xl} {spacing.lg}`. Section headline in `{typography.display-lg}`; supporting body in `{typography.body-md}`.
-
-**`showcase-band-light`** — a soft-canvas section ("Deploy your first app in seconds").
-- Background `{colors.canvas-soft}`, text `{colors.ink}`, padding `{spacing.5xl} {spacing.lg}`.
-
-**`showcase-band-dark`** — the polarity-flipped dark band ("A compute model for all workloads").
-- Background `{colors.primary}`, text `{colors.on-primary}`, padding `{spacing.5xl} {spacing.lg}`. Section headline in `{typography.display-lg}` (white on black). Often contains a `code-editor-mockup` flush with the band.
-
-**`logo-strip`** — the customer-logo wrapping row near the top of the page.
-- Background `{colors.canvas}`, text `{colors.body}`, padding `{spacing.lg} {spacing.xl}`. Logos rendered as monochrome SVGs at consistent height.
-
-**`badge-secondary`** — the small inline metadata pill ("New", "Beta", "Live").
-- Background `{colors.canvas-soft}`, text `{colors.body}`, body in `{typography.caption}`, padding `0px {spacing.xs}`, shape `{rounded.full}`.
-
-**`banner-marketing`** — the "Introducing X" announcement pill at the top of pages.
-- Background `{colors.canvas-soft}`, text `{colors.body}`, body in `{typography.body-sm}`, padding `{spacing.xs} {spacing.sm}`, shape `{rounded.full}`.
-
-**`link-inline`** — body-copy inline links.
-- Text `{colors.link}` (`#0070f3`), body in `{typography.body-md}`, underlined.
-
-### Examples (illustrative)
-
-> Auto-derived kit-mirror demonstration surfaces (`scripts/derive-examples-block.mjs`). Each `ex-*` entry references brand-native primitives so downstream consumers (`/preview-design`, `/generate-kit`) re-skin the same 10 surfaces consistently. `TO_FILL` markers indicate missing primitives — resolve in the LLM judgment pass.
-
-**`ex-pricing-tier`** — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.
-- Properties: `backgroundColor`, `textColor`, `borderColor`, `rounded`, `padding`
-
-**`ex-pricing-tier-featured`** — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).
-- Properties: `backgroundColor`, `textColor`, `rounded`, `padding`
-
-**`ex-product-selector`** — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).
-- Properties: `backgroundColor`, `rounded`, `padding`
-
-**`ex-cart-drawer`** — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).
-- Properties: `backgroundColor`, `rounded`, `padding`, `item-divider`
-
-**`ex-app-shell-row`** — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.
-- Properties: `backgroundColor`, `activeIndicator`, `rounded`, `padding`
-
-**`ex-data-table-cell`** — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.
-- Properties: `headerBackground`, `headerTypography`, `bodyTypography`, `cellPadding`, `rowBorder`
-
-**`ex-auth-form-card`** — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.
-- Properties: `backgroundColor`, `rounded`, `padding`
-
-**`ex-modal-card`** — Modal dialog surface — same chrome as feature-card with elevated shadow.
-- Properties: `backgroundColor`, `rounded`, `padding`
-
-**`ex-empty-state-card`** — Empty-state illustration frame.
-- Properties: `backgroundColor`, `rounded`, `padding`, `captionTypography`
-
-**`ex-toast`** — Toast notification surface — feature-card shape + medium shadow.
-- Properties: `backgroundColor`, `rounded`, `padding`, `typography`
-
-
-## Do's and Don'ts
-
-### Do
-- Reserve `{colors.primary}` (`#171717`) for primary CTAs across the page. Black ink IS the conversion target.
-- Use `{rounded.pill}` 100 px for every marketing-scale CTA and `{rounded.sm}` 6 px for nav-scale buttons. The two pill scales coexist deliberately.
-- Set every headline in `{typography.display-*}` weight 600, sentence-case, often period-terminated. Aggressive negative tracking is part of the voice.
-- Use the brand mesh gradient as atmospheric decoration at hero scale only — never miniaturise it to an icon, never reduce to a single colour.
-- Layer stacked shadows (multiple small offsets with inset hairline) rather than single heavy drops. The brand's elevation is calmer than Material.
-- Cycle page surfaces in `{colors.canvas-soft}` → `{colors.canvas}` → `{colors.primary}` polarity-flipped bands; the dark band IS the depth cue.
-- Set every code block and technical eyebrow in `{typography.code}` / `{typography.caption-mono}`. Mono is the voice of the platform.
-
-### Don't
-- Don't introduce a sixth accent colour. The brand operates with ink + gray + the four-pair gradient palette; new accents flatten the voice.
-- Don't render headlines in all-caps. Sentence-case + negative tracking is non-negotiable.
-- Don't drop a single heavy drop-shadow on cards. The brand's elevation is built from stacked small offsets + inset hairline rings.
-- Don't render the brand gradient at icon scale or in a single-colour reduced form. The gradient lives at hero scale only.
-- Don't promote the geometric sans to weight 700. The brand's display ceiling is 600.
-- Don't pair the marketing 100-px pill CTA shape with the 6-px nav radius on the same screen — pick a scale and stay there.
-- Don't set body paragraphs in the mono face. The mono is for code + technical labels only.

PC_사양_적정성_분석_기획서.html

@@ -1,429 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>PC 사양 적정성 분석 기획서 (GPU 반영)</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --primary: #4F46E5;
-      --primary-light: #EEF2FF;
-      --secondary: #10B981;
-      --secondary-light: #D1FAE5;
-      --danger: #EF4444;
-      --danger-light: #FEE2E2;
-      --warning: #F59E0B;
-      --warning-light: #FEF3C7;
-      --purple: #7C3AED;
-      --purple-light: #EDE9FE;
-      --text-dark: #0F172A;
-      --text-body: #334155;
-      --text-muted: #64748B;
-      --border: #E2E8F0;
-      --bg-light: #F8FAFC;
-    }
-    * { box-sizing: border-box; margin: 0; padding: 0; }
-    body {
-      font-family: 'Outfit', 'Noto Sans KR', sans-serif;
-      color: var(--text-body);
-      background: #fff;
-      letter-spacing: -0.02em;
-      line-height: 1.7;
-    }
-    .page { max-width: 980px; margin: 0 auto; padding: 3rem 2rem; }
-
-    /* ─ Header ─ */
-    .doc-header { border-bottom: 3px solid var(--text-dark); padding-bottom: 1.75rem; margin-bottom: 3rem; }
-    .doc-label {
-      display: inline-block; font-size: 0.75rem; font-weight: 700; color: var(--primary);
-      background: var(--primary-light); padding: 0.25rem 0.75rem; border-radius: 99px;
-      text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem;
-    }
-    .version-badge {
-      display: inline-block; font-size: 0.7rem; font-weight: 700; color: var(--secondary);
-      background: var(--secondary-light); padding: 0.2rem 0.6rem; border-radius: 99px;
-      margin-left: 0.5rem; vertical-align: middle;
-    }
-    .doc-header h1 { font-size: 2rem; font-weight: 900; color: var(--text-dark); line-height: 1.25; margin-bottom: 1rem; }
-    .meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; margin-top: 1rem; }
-    .meta-item { background: var(--bg-light); border-radius: 8px; padding: 0.65rem 1rem; font-size: 0.83rem; }
-    .meta-item .label { color: var(--text-muted); display: block; font-size: 0.75rem; }
-    .meta-item .val { font-weight: 700; color: var(--text-dark); font-size: 0.9rem; }
-
-    /* ─ Sections ─ */
-    section { margin-bottom: 3.5rem; }
-    h2 {
-      font-size: 1.3rem; font-weight: 800; color: var(--text-dark);
-      padding-bottom: 0.5rem; border-bottom: 2px solid var(--border);
-      margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.6rem;
-    }
-    h2 .num {
-      display: inline-flex; align-items: center; justify-content: center;
-      width: 28px; height: 28px; background: var(--primary); color: #fff;
-      border-radius: 50%; font-size: 0.75rem; font-weight: 800; flex-shrink: 0;
-    }
-    h3 { font-size: 1.05rem; font-weight: 700; color: var(--text-dark); margin: 1.75rem 0 0.75rem; }
-    p { margin-bottom: 1rem; color: var(--text-body); font-size: 0.97rem; }
-
-    /* ─ Boxes ─ */
-    .box { border-radius: 10px; padding: 1.25rem 1.5rem; margin: 1.25rem 0; font-size: 0.93rem; }
-    .box-blue   { background: var(--primary-light);  border-left: 4px solid var(--primary); }
-    .box-green  { background: var(--secondary-light); border-left: 4px solid var(--secondary); }
-    .box-yellow { background: var(--warning-light);  border-left: 4px solid var(--warning); }
-    .box-red    { background: var(--danger-light);   border-left: 4px solid var(--danger); }
-    .box-purple { background: var(--purple-light);   border-left: 4px solid var(--purple); }
-    .box-title  { font-weight: 700; color: var(--text-dark); margin-bottom: 0.5rem; font-size: 0.95rem; }
-
-    /* ─ Score formula block ─ */
-    .formula {
-      background: #1E293B; color: #E2E8F0; border-radius: 8px;
-      padding: 1rem 1.25rem; font-family: 'Courier New', monospace;
-      font-size: 0.87rem; margin: 1rem 0; overflow-x: auto; line-height: 2;
-    }
-    .formula .comment { color: #64748B; }
-    .formula .key { color: #93C5FD; }
-    .formula .val { color: #6EE7B7; }
-    .formula .warn { color: #FCD34D; }
-
-    /* ─ Three-col score grid ─ */
-    .score-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin: 1.5rem 0; }
-    @media(max-width: 700px) { .score-grid-3 { grid-template-columns: 1fr; } }
-    .score-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
-    .score-card-header {
-      background: var(--bg-light); padding: 0.65rem 1rem;
-      font-weight: 700; font-size: 0.88rem; color: var(--text-dark);
-      border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.5rem;
-    }
-    .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
-    .dot-green  { background: var(--secondary); }
-    .dot-purple { background: var(--purple); }
-
-    /* ─ Tables ─ */
-    .tbl-wrap { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 1.25rem 0; }
-    table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
-    th { background: var(--bg-light); padding: 0.65rem 1rem; font-weight: 700; color: var(--text-dark); border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
-    td { padding: 0.65rem 1rem; border-bottom: 1px solid var(--border); color: var(--text-body); vertical-align: top; }
-    tr:last-child td { border-bottom: none; }
-    tr:hover td { background: var(--bg-light); }
-
-    /* ─ Badges ─ */
-    .badge { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
-    .b-primary { color: var(--primary); background: var(--primary-light); }
-    .b-green  { color: #065F46; background: var(--secondary-light); }
-    .b-red    { color: #991B1B; background: var(--danger-light); }
-    .b-yellow { color: #92400E; background: var(--warning-light); }
-    .b-purple { color: #5B21B6; background: var(--purple-light); }
-
-    /* ─ Flow ─ */
-    .flow { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin: 1.5rem 0; }
-    .flow-step { background: var(--primary-light); color: var(--primary); font-weight: 700; font-size: 0.83rem; padding: 0.55rem 0.9rem; border-radius: 8px; text-align: center; }
-    .flow-step.gpu { background: var(--purple-light); color: var(--purple); }
-    .flow-arrow { font-size: 1.1rem; color: var(--text-muted); padding: 0 0.4rem; }
-
-    /* ─ GPU tier table highlight ─ */
-    .tier-S td:first-child { font-weight: 800; color: #DC2626; }
-    .tier-A td:first-child { font-weight: 700; color: var(--primary); }
-    .tier-B td:first-child { font-weight: 700; color: var(--secondary); }
-    .tier-C td:first-child { color: var(--warning); font-weight: 600; }
-    .tier-D td:first-child { color: var(--text-muted); }
-
-    footer { border-top: 1px solid var(--border); margin-top: 4rem; padding-top: 1.5rem; text-align: center; font-size: 0.8rem; color: var(--text-muted); }
-  </style>
-</head>
-<body>
-<div class="page">
-
-  <!-- HEADER -->
-  <header class="doc-header">
-    <div class="doc-label">기능 명세서 <span class="version-badge">v3.0 — 100점 감점제 반영</span></div>
-    <h1>PC 사양 적정성 분석 기획서<br>
-      <span style="font-size:1.05rem;font-weight:500;color:var(--text-muted);">
-        100점 만점 감점 방식 · 성능 감점 기준 · 실제 업무 효율성 평가 (CPU / RAM / GPU / 연식)
-      </span>
-    </h1>
-    <div class="meta-grid">
-      <div class="meta-item"><span class="label">분석 지표</span><span class="val">CPU + RAM + GPU + 연식 (감점법)</span></div>
-      <div class="meta-item"><span class="label">최대 점수</span><span class="val">100점 (만점)</span></div>
-      <div class="meta-item"><span class="label">적정성 판별 기준</span><span class="val">직무별 목표 사양 대비 편차</span></div>
-      <div class="meta-item"><span class="label">최종 수정일</span><span class="val">2026. 05. 31</span></div>
-    </div>
-  </header>
-
-  <!-- 1. 개요 -->
-  <section>
-    <h2><span class="num">1</span>개요 — 100점 만점 감점형 성능 점수 체계</h2>
-    <p>
-      v3.0부터 PC 사양 점수는 <strong>100점 만점 기준 감점제</strong>로 산출됩니다.
-      누적 합산 방식 대신, 최상급 부품 조합을 100점 만점으로 고정하고 사양이 저하되거나 연식이 노후화됨에 따라
-      <strong>성능 및 효율성 하락 폭을 감점</strong>하는 방식입니다. 이는 실제 업무 환경에서 PC 노후도에 따른
-      체감 생산성 저하를 훨씬 직관적이고 현실적으로 드러냅니다.
-    </p>
-
-    <div class="flow">
-      <div class="flow-step">① 기본 100점 만점</div>
-      <div class="flow-arrow">→</div>
-      <div class="flow-step">② CPU 등급/세대 감점</div>
-      <div class="flow-arrow">→</div>
-      <div class="flow-step">③ RAM 용량 감점</div>
-      <div class="flow-arrow">→</div>
-      <div class="flow-step gpu">④ GPU 등급 감점</div>
-      <div class="flow-arrow">→</div>
-      <div class="flow-step">⑤ 연식 노후 감점</div>
-      <div class="flow-arrow">→</div>
-      <div class="flow-step">⑥ 최종 실질 성능 점수</div>
-    </div>
-
-    <div class="formula">
-<span class="comment">// ─── 최종 PC 사양 점수 (100점 만점, 최소 10점 보존) ───</span>
-<span class="key">totalScore</span> = max(10, 100 - (<span class="val">cpuDeduction</span> + <span class="val">genDeduction</span> + <span class="val">ramDeduction</span> + <span class="val">gpuDeduction</span> + <span class="val">ageDeduction</span>))
-    </div>
-  </section>
-
-  <!-- 2. CPU 감점 룰 -->
-  <section>
-    <h2><span class="num">2</span>CPU 사양 감점 기준</h2>
-    <p>CPU 감점은 <strong>등급 감점(최대 -30점)</strong>과 <strong>세대 노후 감점(최대 -15점)</strong>의 합산입니다.</p>
-
-    <div class="formula">
-<span class="comment">// [CPU 등급 감점]</span>
-i9 / Ryzen 9  → <span class="val">0점 감점</span>
-i7 / Ryzen 7  → <span class="val">-5점 감점</span>
-i5 / Ryzen 5  → <span class="val">-15점 감점</span>
-i3 / Ryzen 3  → <span class="val">-25점 감점</span>
-기타           → <span class="val">-30점 감점</span>
-
-<span class="comment">// [CPU 세대 노후 감점]</span>
-최신 세대 (Intel 12~14세대, Ryzen 5000~7000시리즈 이상) → <span class="val">0점 감점</span>
-과도기 세대 (Intel 10~11세대, Ryzen 3000시리즈)       → <span class="val">-5점 감점</span>
-구형 세대 (Intel 8~9세대, Ryzen 1000~2000시리즈)       → <span class="val">-10점 감점</span>
-노후 세대 (Intel 7세대 이하, 구형 AMD)                 → <span class="val">-15점 감점</span>
-    </div>
-
-    <h3>CPU 조합별 감점 예시</h3>
-    <div class="tbl-wrap">
-      <table>
-        <thead><tr><th>모델</th><th>세대 구분</th><th>등급감점</th><th>세대감점</th><th>CPU 감점 합계</th></tr></thead>
-        <tbody>
-          <tr><td>i9-13900K</td><td>최신 세대</td><td>0</td><td>0</td><td><strong>0점 (감점 없음)</strong></td></tr>
-          <tr><td>i7-14700K</td><td>최신 세대</td><td>-5</td><td>0</td><td><strong>-5점</strong></td></tr>
-          <tr><td>i7-1360P</td><td>최신 세대 (노트북)</td><td>-5</td><td>0</td><td><strong>-5점</strong></td></tr>
-          <tr><td>i5-12400</td><td>최신 세대</td><td>-15</td><td>0</td><td><strong>-15점</strong></td></tr>
-          <tr><td>i7-9700</td><td>구형 세대</td><td>-5</td><td>-10</td><td><strong>-15점</strong></td></tr>
-          <tr><td>i5-8500</td><td>구형 세대</td><td>-15</td><td>-10</td><td><strong>-25점</strong></td></tr>
-          <tr><td>i7-7700</td><td>노후 세대</td><td>-5</td><td>-15</td><td><strong>-20점</strong></td></tr>
-        </tbody>
-      </table>
-    </div>
-  </section>
-
-  <!-- 3. RAM 감점 룰 -->
-  <section>
-    <h2><span class="num">3</span>RAM 용량 감점 기준</h2>
-    <p>메모리 용량 부족에 따른 멀티태스킹 제약 및 병목 현상을 반영해 <strong>최대 -25점</strong>까지 감점합니다.</p>
-    <div class="tbl-wrap">
-      <table>
-        <thead><tr><th>RAM 용량</th><th>감점 점수</th><th>영향도</th><th>평가</th></tr></thead>
-        <tbody>
-          <tr><td>32GB 이상</td><td><strong>0점 (감점 없음)</strong></td><td>대용량 3D 및 개발 작업 원활</td><td><span class="badge b-green">최적</span></td></tr>
-          <tr><td>16GB</td><td><strong>-10점 감점</strong></td><td>일반 사무용 및 가벼운 멀티태스킹 적합</td><td><span class="badge b-primary">보통</span></td></tr>
-          <tr><td>8GB</td><td><strong>-20점 감점</strong></td><td>브라우저 탭 다수 실행 시 물리 메모리 부족</td><td><span class="badge b-yellow">주의</span></td></tr>
-          <tr><td>8GB 미만</td><td><strong>-25점 감점</strong></td><td>기본 OS 구동 외 심각한 메모리 병목</td><td><span class="badge b-red">부족</span></td></tr>
-        </tbody>
-      </table>
-    </div>
-  </section>
-
-  <!-- 4. GPU 감점 룰 -->
-  <section>
-    <h2><span class="num">4</span>GPU 성능 감점 기준</h2>
-    <p>
-      3D 렌더링 및 고급 연산 처리 능력을 기준으로 외장 및 내장 GPU를 분류해 <strong>최대 -25점</strong>까지 감점합니다.
-      GPU 정보가 감지되지 않거나 없는 경우 기본적으로 내장 그래픽 수준인 -25점을 감점합니다.
-    </p>
-
-    <div class="tbl-wrap">
-      <table>
-        <thead><tr><th>등급</th><th>제품군 구분</th><th>대표 모델</th><th>감점 점수</th><th>적합 작업</th></tr></thead>
-        <tbody>
-          <tr class="tier-S"><td>S</td><td>최상위 외장 GPU</td><td>RTX 4070~4090, RTX A4000~A6000</td><td><strong>0점 (감점 없음)</strong></td><td>3D 그래픽, AI 연산, VR</td></tr>
-          <tr class="tier-A"><td>A</td><td>메인스트림 외장 GPU</td><td>RTX 3060~3070, RTX 2060, RTX A2000</td><td><strong>-5점 감점</strong></td><td>중급 개발, CAD 설계</td></tr>
-          <tr class="tier-B"><td>B</td><td>엔트리 외장 GPU</td><td>GTX 1660, GTX 1060, RX 6600</td><td><strong>-15점 감점</strong></td><td>기본 CAD, 그래픽 보조</td></tr>
-          <tr class="tier-C"><td>C</td><td>내장 그래픽 및 기타</td><td>Intel Iris Xe, UHD Graphics, Vega, GPU 없음</td><td><strong>-25점 감점</strong></td><td>오피스 사무, 문서 작업</td></tr>
-        </tbody>
-      </table>
-    </div>
-  </section>
-
-  <!-- 5. 종합 점수 감점 사례 -->
-  <section>
-    <h2><span class="num">5</span>감점법 종합 점수 계산 실사례</h2>
-    <div class="tbl-wrap">
-      <table>
-        <thead>
-          <tr><th>모델명</th><th>CPU 사양 (감점)</th><th>RAM 사양 (감점)</th><th>GPU 사양 (감점)</th><th>연식 (감점)</th><th>감점 총합</th><th>최종 점수</th></tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>HP ZBook Fury 16</td><td>Ryzen 9 7900X (0)</td><td>64GB (0)</td><td>NVIDIA RTX A2000 (-5)</td><td>2년차 (-6)</td><td>-11</td><td><strong>89점</strong></td>
-          </tr>
-          <tr>
-            <td>Dell Precision 5680</td><td>i9-13900K (0)</td><td>64GB (0)</td><td>NVIDIA RTX 4070 (0)</td><td>2년차 (-6)</td><td>-6</td><td><strong>94점</strong></td>
-          </tr>
-          <tr>
-            <td>LG Gram 17 Pro</td><td>i7-14700K (-5)</td><td>32GB (0)</td><td>NVIDIA RTX 4060 (-5)</td><td>1년차 (-3)</td><td>-13</td><td><strong>87점</strong></td>
-          </tr>
-          <tr>
-            <td>LG Gram 16</td><td>i7-1360P (-5)</td><td>16GB (-10)</td><td>Intel Iris Xe (-25)</td><td>3년차 (-9)</td><td>-49</td><td><strong>51점</strong></td>
-          </tr>
-          <tr>
-            <td>Samsung Galaxy Book 3</td><td>i5-1340P (-15)</td><td>16GB (-10)</td><td>Intel Iris Xe (-25)</td><td>3년차 (-9)</td><td>-59</td><td><strong>41점</strong></td>
-          </tr>
-          <tr>
-            <td>HP EliteBook 840</td><td>Ryzen 5 5600X (-15)</td><td>16GB (-10)</td><td>AMD Radeon Vega (-25)</td><td>4년차 (-12)</td><td>-62</td><td><strong>38점</strong></td>
-          </tr>
-          <tr>
-            <td>HP ProDesk 400 G5</td><td>i3-8100 (-35)</td><td>8GB (-20)</td><td>Intel UHD 630 (-25)</td><td>5년 이상 (-15)</td><td>-95</td><td><strong>10점(보존)</strong></td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </section>
-
-  <!-- 6. 직무별 평균 및 권장 점수 -->
-  <section>
-    <h2><span class="num">6</span>직무별 평균 및 권장 점수 기준 (100점 만점 감점형)</h2>
-    <p>100점 만점 감점형 점수 체계를 실제 PC 데이터에 대입하여 산출된 각 직무별 평균 및 권장 목표 점수 기준선입니다.</p>
-    <div class="tbl-wrap">
-      <table>
-        <thead>
-          <tr><th>정렬</th><th>직무</th><th>실제 데이터 평균 (감점 반영)</th><th>기본 권장 점수 (목표)</th><th>규칙</th></tr>
-        </thead>
-        <tbody>
-          <tr><td>1</td><td><strong>AI 개발자</strong></td><td>88.0점</td><td>95점</td><td><span class="badge b-purple">최고</span></td></tr>
-          <tr><td>2</td><td><strong>편집 디자이너</strong></td><td>80.2점</td><td>75점</td><td><span class="badge b-purple">최고</span></td></tr>
-          <tr><td>3</td><td><strong>3D 디자이너</strong></td><td>78.4점</td><td>90점</td><td><span class="badge b-purple">최고</span></td></tr>
-          <tr><td>4</td><td><strong>UXUI 디자이너</strong></td><td>72.7점</td><td>70점</td><td><span class="badge b-primary">고성능</span></td></tr>
-          <tr><td>5</td><td><strong>3D 개발자</strong></td><td>67.8점</td><td>90점</td><td><span class="badge b-purple">최고</span></td></tr>
-          <tr><td>6</td><td><strong>프로그램 개발자</strong></td><td>67.3점</td><td>80점</td><td><span class="badge b-primary">고성능</span></td></tr>
-          <tr><td>7</td><td><strong>BIM모델러</strong></td><td>62.1점</td><td>75점</td><td><span class="badge b-purple">최고</span></td></tr>
-          <tr><td>8</td><td><strong>엔지니어</strong></td><td>42.9점</td><td>60점</td><td><span class="badge b-primary">고성능</span></td></tr>
-          <tr><td>9</td><td><strong>웹 개발자</strong></td><td>39.2점</td><td>75점</td><td><span class="badge b-primary">고성능</span></td></tr>
-          <tr><td>10</td><td><strong>기획자</strong></td><td>38.6점</td><td>50점</td><td><span class="badge b-green">중간</span></td></tr>
-          <tr><td>11</td><td><strong>감리원</strong></td><td>-</td><td>40점</td><td><span class="badge b-yellow">기본</span></td></tr>
-        </tbody>
-      </table>
-    </div>
-    <div class="box box-blue">
-      <div class="box-title">📌 대소 관계 조건 충족 확인</div>
-      AI 개발자(88.0) &gt; 편집 디자이너(80.2) &gt; 3D 디자이너(78.4) &gt; UXUI 디자이너(72.7) &gt; 3D 개발자(67.8) &gt; 프로그램 개발자(67.3) &gt; BIM모델러(62.1) &gt; 엔지니어(42.9) &gt; 웹 개발자(39.2) &gt; 기획자(38.6) ✅
-    </div>
-  </section>
-
-  <!-- 7. 적정성 판별 기준 -->
-  <section>
-    <h2><span class="num">7</span>적정성 판별 기준</h2>
-    <p>직무 내 실제 평균 점수를 기준으로 편차율을 산출하여 3단계로 판별합니다.</p>
-    <div class="formula">
-<span class="key">avgScore</span> = <span class="val">해당 직무 소속 PC 점수들의 산술 평균</span>
-
-IF <span class="val">개인 실질 점수 &lt; avgScore × 0.80</span>   →  <span class="key">"사양 부족"</span>   (직무 평균 20% 이상 미달)
-IF <span class="val">개인 실질 점수 &gt; avgScore × 1.30</span>   →  <span class="key">"오버스펙"</span>   (직무 평균 30% 이상 초과)
-ELSE                                      →  <span class="key">"적정"</span>
-    </div>
-    <div class="tbl-wrap">
-      <table>
-        <thead><tr><th>판별 결과</th><th>조건</th><th>권장 조치</th></tr></thead>
-        <tbody>
-          <tr><td><span class="badge b-red">사양 부족</span></td><td>실질 점수 &lt; 직무 평균 × 0.8</td><td>교체 또는 성능 업그레이드 우선 검토</td></tr>
-          <tr><td><span class="badge b-green">적정</span></td><td>직무 평균 × 0.8 ≤ 실질 점수 ≤ 직무 평균 × 1.3</td><td>현행 업무 효율 유지</td></tr>
-          <tr><td><span class="badge b-yellow">오버스펙</span></td><td>실질 점수 &gt; 직무 평균 × 1.3</td><td>과스펙 장비 회수 또는 필요 부서 재배치</td></tr>
-        </tbody>
-      </table>
-    </div>
-  </section>
-
-  <!-- 8. 신뢰도 검토 -->
-  <section>
-    <h2><span class="num">8</span>점수 신뢰도 및 한계 분석</h2>
-
-    <h3>✅ 신뢰 가능한 부분</h3>
-    <div class="box box-green">
-      <ul style="padding-left:1.25rem;margin:0;line-height:2.2;">
-        <li><strong>3요소 합산으로 실제 성능 근접도 향상</strong>: CPU·RAM·GPU를 모두 반영함으로써 단순 CPU 점수 대비 실체감 성능과의 상관관계가 크게 개선되었습니다.</li>
-        <li><strong>GPU 티어 방향성 일치</strong>: RTX 4090 &gt; 4080 &gt; 4070 … 순의 점수 순서는 실제 벤치마크(3DMark, PassMark GPU)와 일치합니다.</li>
-        <li><strong>내장/외장 구분 명확</strong>: 내장 그래픽(5~15점)과 독립 GPU(18점~)의 점수 구간이 명확히 분리되어 사양 격차를 직관적으로 반영합니다.</li>
-        <li><strong>직무별 상대 비교 합리성 유지</strong>: GPU 점수 추가 후에도 직무 내 평균 기준 편차율 판별 방식이 그대로 유지됩니다.</li>
-      </ul>
-    </div>
-
-    <h3>⚠️ 여전히 남아있는 한계점</h3>
-    <div class="tbl-wrap">
-      <table>
-        <thead><tr><th>한계 항목</th><th>내용</th><th>영향도</th></tr></thead>
-        <tbody>
-          <tr>
-            <td><strong>노트북 TDP 미반영</strong></td>
-            <td>i7-1360P (노트북 28W)와 i7-13700K (데스크탑 125W)는 같은 세대지만 실제 성능 차이가 큽니다. 현재는 동일 점수가 부여됩니다.</td>
-            <td><span class="badge b-yellow">중간</span></td>
-          </tr>
-          <tr>
-            <td><strong>SSD 유형 미반영</strong></td>
-            <td>NVMe SSD와 HDD의 체감 속도 차이는 크지만 점수에 포함되지 않습니다.</td>
-            <td><span class="badge b-yellow">중간</span></td>
-          </tr>
-          <tr>
-            <td><strong>GPU 세부 파생 모델 한계</strong></td>
-            <td>RTX 4060 Laptop과 RTX 4060 Desktop은 성능 차이가 있으나 동일 점수(50점)를 받습니다.</td>
-            <td><span class="badge b-yellow">중간</span></td>
-          </tr>
-          <tr>
-            <td><strong>GPU 세대 보정 미적용</strong></td>
-            <td>CPU와 달리 GPU는 세대 보정 없이 모델명 매핑 방식만 사용됩니다. 향후 세대별 보정을 검토할 수 있습니다.</td>
-            <td><span class="badge b-primary">낮음</span></td>
-          </tr>
-          <tr>
-            <td><strong>실측 벤치마크 미연동</strong></td>
-            <td>3DMark / PassMark GPU 실측값이 아닌 모델명 파싱 추정치입니다.</td>
-            <td><span class="badge b-yellow">중간</span></td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <div class="box box-blue">
-      <div class="box-title">💡 종합 신뢰도 평가</div>
-      GPU 점수 반영 후 <strong>특히 디자이너·개발자와 같은 그래픽 집약적 직무의 적정성 판별 정확도가 대폭 향상</strong>되었습니다.
-      다만 노트북 TDP, SSD 유형 등 추가 변수를 향후 보완하면 신뢰도를 더 끌어올릴 수 있습니다.
-      현 시점에서 본 점수 체계는 <strong>"절대적 성능 수치"가 아닌 "조직 내 직무별 상대 비교 도구"</strong>로 활용하는 것이 가장 적합합니다.
-    </div>
-  </section>
-
-  <!-- 9. 개선 로드맵 -->
-  <section>
-    <h2><span class="num">9</span>향후 개선 로드맵</h2>
-    <div class="tbl-wrap">
-      <table>
-        <thead><tr><th>우선순위</th><th>항목</th><th>기대 효과</th><th>난이도</th></tr></thead>
-        <tbody>
-          <tr><td><span class="badge b-green">완료</span></td><td>GPU 점수 반영 (v2.0)</td><td>그래픽 직무 신뢰도 대폭 향상</td><td>중</td></tr>
-          <tr><td><span class="badge b-yellow">권장</span></td><td>SSD 유형별 점수 추가 (NVMe/SATA/HDD)</td><td>실체감 체감 속도 반영</td><td>하</td></tr>
-          <tr><td><span class="badge b-yellow">권장</span></td><td>노트북/데스크탑 TDP 보정</td><td>모바일 CPU 과대평가 방지</td><td>중</td></tr>
-          <tr><td><span class="badge b-primary">선택</span></td><td>PassMark / 3DMark 실측 DB 내장 연동</td><td>추정치 → 실측값 전환</td><td>상</td></tr>
-          <tr><td><span class="badge b-primary">선택</span></td><td>직무별 항목 가중치 커스터마이징</td><td>조직 특성 맞춤 정밀 점수화</td><td>중</td></tr>
-          <tr><td><span class="badge b-primary">선택</span></td><td>RMM 에이전트 실시간 자원 점유율 연동</td><td>실사용 기반 교체 우선순위 추천</td><td>상</td></tr>
-        </tbody>
-      </table>
-    </div>
-  </section>
-
-  <footer>
-    <p>HM ITAM — PC 사양 적정성 분석 기획서 v2.0 (GPU 반영) &nbsp;·&nbsp; 2026. 05. 28</p>
-    <p style="margin-top:0.25rem;">내부 검토용 문서입니다. 무단 외부 배포를 금합니다.</p>
-  </footer>
-
-</div>
-</body>
-</html>

README.md

@@ -9,6 +9,14 @@
     - 기존 동작 방식과 성능을 기준(Baseline)으로 삼고, 수정 후에도 **기존의 모든 기능이 무결하게 유지되는지 반드시 테스트하여 입증**한다.
     - 검증 결과를 바탕으로 "무엇을, 왜, 어떻게" 바꿀지 상세 보고 후, 사용자로부터 **'진행시켜'** 승인을 얻은 뒤에만 집행한다.
 4. **선보고 후승인**: 모든 기능 수정 및 코드 변경 전에는 예상 방안을 먼저 보고하고 승인 절차를 거친다.
+5. **RED–GREEN–Refactor 개발 원칙**:
+    - 모든 기능 개발과 버그 수정은 **RED → GREEN → Refactor** 순서로 진행한다.
+    - **RED**: 요구사항을 명확히 표현하는 테스트를 먼저 작성하고, 해당 테스트가 기능 미구현 또는 결함으로 인해 실패하는지 확인한다.
+    - **GREEN**: 실패한 테스트를 통과시키는 데 필요한 최소한의 코드만 구현하며, 불필요한 기능 추가나 구조 변경을 하지 않는다.
+    - **Refactor**: 관련 테스트와 기존 테스트가 모두 통과하는 상태에서만 중복 제거, 명칭 개선, 책임 분리 등 코드 구조를 개선하며 동작은 변경하지 않는다.
+    - 각 단계가 끝날 때마다 관련 테스트와 기존 기능의 회귀 여부를 검증한다.
+    - 테스트 작성이 현실적으로 불가능한 경우에는 그 사유와 대체 검증 방법을 먼저 보고하고 승인을 받은 후 진행한다.
+    - 본 원칙을 적용할 때에도 기존의 **선보고 후승인** 및 **외과 수술식 수정** 규칙을 준수한다.
 
 ---
 

analyze_remote_mess.cjs

@@ -1,29 +0,0 @@
-const mysql = require('mysql2/promise');
-require('dotenv').config({ override: true });
-
-(async () => {
-  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')
-  });
-
-  try {
-    // 1. PW 필드에 9~10자리 숫자(팀뷰어 ID 의심)가 있는 경우
-    const [rows1] = await pool.query("SELECT id, asset_id, net_name, net_value1, net_value2 FROM asset_remote WHERE net_value2 REGEXP '^[0-9]{9,10}$'");
-    console.log('--- Suspicious PW as ID ---');
-    console.log(JSON.stringify(rows1, null, 2));
-
-    // 2. REMOTE 타입인데 value1이 IP인 경우 (아까 확인한 거 포함)
-    const [rows2] = await pool.query("SELECT id, asset_id, net_name, net_value1, net_value2 FROM asset_remote WHERE net_type = 'REMOTE' AND net_value1 REGEXP '^[0-9]+\\\\.[0-9]+\\\\.[0-9]+\\\\.[0-9]+$'");
-    console.log('\n--- REMOTE with IP in val1 ---');
-    console.log(JSON.stringify(rows2, null, 2));
-    
-  } catch (err) {
-    console.error(err);
-  } finally {
-    await pool.end();
-  }
-})();

backup_db.js

@@ -1,59 +0,0 @@
-import mysql from 'mysql2/promise';
-import dotenv from 'dotenv';
-import * as xlsx from 'xlsx';
-import fs from 'fs';
-
-dotenv.config();
-
-const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
-
-async function backup() {
-  const connection = await mysql.createConnection({
-    host: DB_HOST,
-    user: DB_USER,
-    password: DB_PASS,
-    database: DB_NAME,
-    port: parseInt(DB_PORT || '3306')
-  });
-
-  console.log('🚀 Starting Database Backup Process...');
-
-  const tables = [
-    'asset_pc', 'asset_server', 'asset_storage', 'asset_remote', 
-    'asset_equipment', 'asset_office_supplies', 'asset_survey', 'asset_vip'
-  ];
-  
-  const wb = xlsx.utils.book_new();
-
-  for (const table of tables) {
-    try {
-      // 1. Create table backup
-      await connection.query(`DROP TABLE IF EXISTS ${table}_backup`);
-      await connection.query(`CREATE TABLE ${table}_backup AS SELECT * FROM ${table}`);
-      console.log(`✅ Table backup created: ${table} -> ${table}_backup`);
-
-      // 2. Fetch data for Excel
-      const [rows] = await connection.query(`SELECT * FROM ${table}`);
-      if (rows.length > 0) {
-          const ws = xlsx.utils.json_to_sheet(rows);
-          // Sheet names max length is 31 chars
-          const sheetName = table.substring(0, 31);
-          xlsx.utils.book_append_sheet(wb, ws, sheetName);
-      }
-    } catch (e) {
-      console.warn(`⚠️ Skipped ${table}: ${e.message}`);
-    }
-  }
-
-  // 3. Write Excel file
-  const fileName = 'backupDB_20260608.xlsx';
-  xlsx.writeFile(wb, fileName);
-  console.log(`✅ Excel data exported successfully to ${fileName}`);
-  
-  await connection.end();
-}
-
-backup().catch(err => {
-  console.error('❌ Backup Failed:', err);
-  process.exit(1);
-});

check_logs.js

@@ -1,28 +0,0 @@
-import mysql from 'mysql2/promise';
-import dotenv from 'dotenv';
-
-dotenv.config();
-
-const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
-
-async function checkRecentLogs() {
-  const connection = await mysql.createConnection({
-    host: DB_HOST,
-    user: DB_USER,
-    password: DB_PASS,
-    database: DB_NAME,
-    port: parseInt(DB_PORT || '3306')
-  });
-
-  console.log('--- Recent History Logs ---');
-  const [rows] = await connection.query('SELECT * FROM asset_history ORDER BY created_at DESC LIMIT 5');
-  console.log(JSON.stringify(rows, null, 2));
-
-  console.log('\n--- Recent Core Data (to check current_dept) ---');
-  const [coreRows] = await connection.query('SELECT id, asset_code, current_dept, previous_dept FROM asset_core ORDER BY updated_at DESC LIMIT 5');
-  console.log(JSON.stringify(coreRows, null, 2));
-
-  await connection.end();
-}
-
-checkRecentLogs().catch(console.error);

check_network.js

@@ -1,29 +0,0 @@
-import mysql from 'mysql2/promise';
-import dotenv from 'dotenv';
-
-dotenv.config();
-
-const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
-
-async function checkRemote() {
-  const connection = await mysql.createConnection({
-    host: DB_HOST,
-    user: DB_USER,
-    password: DB_PASS,
-    database: DB_NAME,
-    port: parseInt(DB_PORT || '3306')
-  });
-
-  console.log('--- Checking asset_remote table ---');
-  
-  const [columns] = await connection.query('DESCRIBE asset_remote');
-  const cols = columns.map(c => c.Field);
-  console.log('Columns in asset_remote:', cols.join(', '));
-
-  const [count] = await connection.query('SELECT COUNT(*) as count FROM asset_remote WHERE remote_tool IS NOT NULL OR remote_id IS NOT NULL');
-  console.log(`Rows with remote info (tool or id): ${count[0].count}`);
-
-  await connection.end();
-}
-
-checkRemote().catch(console.error);

check_remote_data.cjs

@@ -1,24 +0,0 @@
-const mysql = require('mysql2/promise');
-require('dotenv').config({ override: true });
-
-(async () => {
-  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')
-  });
-
-  try {
-    const [rows] = await pool.query(
-      'SELECT net_name, net_value1, net_value2 FROM asset_remote WHERE net_type = ?',
-      ['REMOTE']
-    );
-    console.log(JSON.stringify(rows, null, 2));
-  } catch (err) {
-    console.error(err);
-  } finally {
-    await pool.end();
-  }
-})();

check_remote_specific.cjs

@@ -1,24 +0,0 @@
-const mysql = require('mysql2/promise');
-require('dotenv').config({ override: true });
-
-(async () => {
-  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')
-  });
-
-  try {
-    const [rows] = await pool.query(
-      'SELECT net_name, net_value1, net_value2 FROM asset_remote WHERE net_name LIKE ? OR net_name LIKE ? OR net_name LIKE ? OR net_name LIKE ?',
-      ['%팀뷰어%', '%애니데스크%', '%TeamViewer%', '%AnyDesk%']
-    );
-    console.log(JSON.stringify(rows, null, 2));
-  } catch (err) {
-    console.error(err);
-  } finally {
-    await pool.end();
-  }
-})();

check_remote_tangled.cjs

@@ -1,27 +0,0 @@
-const mysql = require('mysql2/promise');
-require('dotenv').config({ override: true });
-
-(async () => {
-  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')
-  });
-
-  try {
-    // Find assets where REMOTE net_value1 looks like an IP and matches an existing IP row
-    const [rows] = await pool.query(`
-      SELECT r1.asset_id, r1.net_name as remote_name, r1.net_value1 as remote_val1, r2.net_value1 as ip_val1
-      FROM asset_remote r1
-      JOIN asset_remote r2 ON r1.asset_id = r2.asset_id AND r2.net_type = 'IP'
-      WHERE r1.net_type = 'REMOTE' AND r1.net_value1 REGEXP '^[0-9]+\\\\.[0-9]+\\\\.[0-9]+\\\\.[0-9]+$'
-    `);
-    console.log(JSON.stringify(rows, null, 2));
-  } catch (err) {
-    console.error(err);
-  } finally {
-    await pool.end();
-  }
-})();

db_init.js

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

debug_save.cjs

@@ -1,55 +0,0 @@
-const mysql = require('mysql2/promise');
-require('dotenv').config({ override: true });
-
-(async () => {
-  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')
-  });
-
-  const connection = await pool.getConnection();
-  try {
-    await connection.beginTransaction();
-
-    const asset = {
-      id: 'debug_test_' + Date.now(),
-      asset_code: 'SVR-240612-DEBUG',
-      category: '서버',
-      asset_type: '서버PC'
-    };
-
-    console.log('--- Step 1: Insert into asset_core ---');
-    const coreFields = ['id', 'asset_code', 'category', 'asset_type'];
-    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(', ')})`;
-    
-    const [coreRes] = await connection.query(coreSql, Object.values(coreData));
-    console.log('Core Insert Success:', coreRes);
-
-    console.log('\n--- Step 2: Insert into asset_spec ---');
-    const specData = {
-      asset_id: asset.id,
-      hw_status: '운영'
-    };
-    const specKeys = Object.keys(specData);
-    const specSql = `INSERT INTO asset_spec (${specKeys.join(', ')}) VALUES (${specKeys.map(() => '?').join(', ')})`;
-    
-    const [specRes] = await connection.query(specSql, Object.values(specData));
-    console.log('Spec Insert Success:', specRes);
-
-    await connection.commit();
-    console.log('\n✅ Transaction Committed Successfully');
-
-  } catch (err) {
-    await connection.rollback();
-    console.error('\n❌ Error Caught:', err);
-  } finally {
-    connection.release();
-    await pool.end();
-  }
-})();

docs/plans/design_rule.md

@@ -9,11 +9,12 @@
 *   **Achromatic Base**: 블랙(#171717)과 화이트를 기본으로 하며, 정보의 구분은 얇은 헤어라인(#ebebeb)을 사용합니다.
 *   **Fluid & Responsive**: 고정된 픽셀 대신 화면 크기에 비례하여 UI 밀도가 변하는 유동적 스케일링 시스템을 적용합니다.
 
-### 2. 반응형 스케일링 (Fluid Scaling System)
+### 2. 타이포그래피 및 자간 (Typography & Letter-spacing)
-*   **Core Principle**: 모든 UI 요소는 `vmin`과 `vw` 단위를 조합한 `clamp()` 함수를 통해 화면 크기에 맞춰 동적으로 변화합니다.
+*   **Font Family**: `Pretendard` 단일 폰트를 사용합니다.
+*   **Letter-spacing**: 모든 텍스트에 `-0.02em` (-2%) 자간을 적용하여 밀도 있는 가독성을 확보합니다.
 *   **Typography Scale**:
     *   **XS**: `clamp(10px, 1.2vmin + 0.2vw, 15px)` - 보조 텍스트
-    *   **SM**: `clamp(12px, 1.4vmin + 0.3vw, 18px)` - 필터, 일반 라벨
+    *   **SM**: `clamp(12px, 1.4vmin + 0.3vw, 18px)` - 필터, 일반 라벨, 테이블 헤더
     *   **Base**: `clamp(14px, 1.6vmin + 0.4vw, 22px)` - 본문, 테이블 데이터
     *   **MD**: `clamp(18px, 2.5vmin + 0.5vw, 30px)` - 섹션 소제목
     *   **LG**: `clamp(24px, 4vmin + 0.6vw, 48px)` - 페이지 대제목

drop_legacy.js

@@ -1,44 +0,0 @@
-import mysql from 'mysql2/promise';
-import dotenv from 'dotenv';
-
-dotenv.config();
-
-const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
-
-async function dropLegacyTables() {
-  const connection = await mysql.createConnection({
-    host: DB_HOST,
-    user: DB_USER,
-    password: DB_PASS,
-    database: DB_NAME,
-    port: parseInt(DB_PORT || '3306')
-  });
-
-  console.log('🧹 Starting cleanup of obsolete legacy backup tables...');
-
-  const tablesToDrop = [
-    'asset_pc', 'asset_pc_backup',
-    'asset_server', 'asset_server_backup',
-    'asset_storage', 'asset_storage_backup',
-    'asset_remote_backup', // IMPORTANT: DO NOT drop asset_remote!
-    'asset_equipment', 'asset_equipment_backup',
-    'asset_office_supplies', 'asset_office_supplies_backup',
-    'asset_survey', 'asset_survey_backup',
-    'asset_vip', 'asset_vip_backup',
-    'asset_pc_parts'
-  ];
-
-  for (const table of tablesToDrop) {
-    try {
-      await connection.query(`DROP TABLE IF EXISTS ${table}`);
-      console.log(`✅ Dropped table: ${table}`);
-    } catch (err) {
-      console.warn(`⚠️ Failed to drop table ${table}: ${err.message}`);
-    }
-  }
-
-  console.log('🎉 Cleanup complete. Database is now lean and mean.');
-  await connection.end();
-}
-
-dropLegacyTables().catch(console.error);

fix_all_dates.cjs

@@ -1,63 +0,0 @@
-const mysql = require('mysql2/promise');
-require('dotenv').config({ override: true });
-
-function formatToYYYYMMDD(val) {
-  if (!val) return null;
-  const s = String(val).trim().replace(/[^0-9]/g, '');
-  if (s.length === 8) {
-    // YYYYMMDD
-    return `${s.substring(0, 4)}-${s.substring(4, 6)}-${s.substring(6, 8)}`;
-  } else if (s.length === 6) {
-    // YYMMDD -> Assume 20XX
-    const year = parseInt(s.substring(0, 2)) > 50 ? '19' + s.substring(0, 2) : '20' + s.substring(0, 2);
-    return `${year}-${s.substring(2, 4)}-${s.substring(4, 6)}`;
-  }
-  
-  // Try to split by dots or slashes if original had them
-  const parts = String(val).trim().split(/[\.\-\/]/);
-  if (parts.length === 3) {
-    let y = parts[0];
-    let m = parts[1].padStart(2, '0');
-    let d = parts[2].padStart(2, '0');
-    if (y.length === 2) y = '20' + y;
-    if (y.length === 4 && m.length <= 2 && d.length <= 2) {
-        return `${y}-${m}-${d}`;
-    }
-  }
-
-  return val; // Return as is if format is unknown
-}
-
-(async () => {
-  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')
-  });
-
-  const connection = await pool.getConnection();
-  try {
-    const [rows] = await connection.query('SELECT id, purchase_date FROM asset_core WHERE purchase_date IS NOT NULL AND purchase_date != \'\'');
-    console.log(`Found ${rows.length} rows to check.`);
-
-    let updatedCount = 0;
-    for (const row of rows) {
-      const original = row.purchase_date;
-      const formatted = formatToYYYYMMDD(original);
-
-      if (formatted !== original && /^\d{4}-\d{2}-\d{2}$/.test(formatted)) {
-        await connection.query('UPDATE asset_core SET purchase_date = ? WHERE id = ?', [formatted, row.id]);
-        updatedCount++;
-      }
-    }
-
-    console.log(`✅ Successfully updated ${updatedCount} rows to YYYY-MM-DD format.`);
-  } catch (err) {
-    console.error('❌ Error during date migration:', err);
-  } finally {
-    connection.release();
-    await pool.end();
-  }
-})();

index.html

@@ -8,12 +8,6 @@
   <title>한맥가족 자산관리시스템</title>
   <link rel="stylesheet"
     href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
-  <link rel="stylesheet" href="/src/styles/common.css" />
-  <link rel="stylesheet" href="/src/styles/login.css" />
-  <link rel="stylesheet" href="/src/styles/guide.css" />
-  <link rel="stylesheet" href="/src/styles/modal.css" />
-  <link rel="stylesheet" href="/src/styles/dashboard.css" />
-  <link rel="stylesheet" href="/src/styles/table.css" />
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
 </head>

map_editor.html

@@ -6,7 +6,7 @@
   <title>ITAM Map Coordinate Editor v3.0</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
 </head>
-<body style="margin: 0; display: flex; height: 100vh; overflow: hidden; font-family: sans-serif;">
+<body class="editor-body">
 
   <!-- Left: File Selector -->
   <div class="file-sidebar" id="file-sidebar">
@@ -22,7 +22,7 @@
 
   <!-- Right: Control Panel -->
   <div class="sidebar">
-    <h2>Map Editor <small style="font-size: 0.6em; color: #888;">v3.0</small></h2>
+    <h2>Map Editor <small class="editor-version">v3.0</small></h2>
     <div class="current-path" id="current-path">파일을 선택하세요</div>
     <p>
       드래그하여 구역을 정의하세요. 저장 버튼을 누르면 즉시 시스템에 반영됩니다.
@@ -31,8 +31,8 @@
     <div class="box-list" id="box-list"></div>
 
     <div class="actions">
-      <button id="btn-clear-all" class="btn btn-outline" style="height:38px;">전체 삭제</button>
+      <button id="btn-clear-all" class="btn btn-outline">전체 삭제</button>
-      <button id="btn-save-server" class="btn btn-primary" style="height:38px;">서버에 즉시 저장</button>
+      <button id="btn-save-server" class="btn btn-primary">서버에 즉시 저장</button>
       <div id="save-status"></div>
     </div>
   </div>

migrate_schema.js

@@ -1,197 +0,0 @@
-import mysql from 'mysql2/promise';
-import dotenv from 'dotenv';
-
-dotenv.config();
-
-const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
-
-async function migrateSchema() {
-  const connection = await mysql.createConnection({
-    host: DB_HOST,
-    user: DB_USER,
-    password: DB_PASS,
-    database: DB_NAME,
-    port: parseInt(DB_PORT || '3306')
-  });
-
-  console.log('🚀 Phase 1: Creating Normalized Tables & Migrating Data...');
-
-  try {
-    await connection.query('SET FOREIGN_KEY_CHECKS = 0');
-
-    // --- 1. Drop existing new tables if they exist ---
-    await connection.query('DROP TABLE IF EXISTS asset_core, asset_hardware, asset_location, asset_remote');
-
-    // --- 2. Create New Schema ---
-    await connection.query(`
-      CREATE TABLE asset_core (
-        id VARCHAR(50) PRIMARY KEY,
-        asset_code VARCHAR(100) UNIQUE NOT NULL,
-        category VARCHAR(100),
-        asset_type VARCHAR(100),
-        asset_purpose VARCHAR(255),
-        service_type VARCHAR(50),
-        purchase_corp VARCHAR(100),
-        purchase_date VARCHAR(50),
-        purchase_amount VARCHAR(100),
-        purchase_vendor VARCHAR(255),
-        approval_document VARCHAR(255),
-        memo TEXT,
-        manager_primary VARCHAR(100),
-        manager_secondary VARCHAR(100),
-        current_dept VARCHAR(255),
-        previous_dept VARCHAR(255),
-        user_current VARCHAR(100),
-        previous_user VARCHAR(100),
-        emp_no VARCHAR(20),
-        user_position VARCHAR(50),
-        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
-      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-    `);
-
-    await connection.query(`
-      CREATE TABLE asset_hardware (
-        id INT AUTO_INCREMENT PRIMARY KEY,
-        asset_id VARCHAR(50) NOT NULL,
-        hw_status VARCHAR(50),
-        model_name VARCHAR(255),
-        mainboard VARCHAR(255),
-        os VARCHAR(100),
-        cpu VARCHAR(255),
-        ram VARCHAR(100),
-        gpu VARCHAR(100),
-        storage1 VARCHAR(255),
-        storage2 VARCHAR(255),
-        storage3 VARCHAR(255),
-        monitoring VARCHAR(100),
-        price VARCHAR(100),
-        volume VARCHAR(100),
-        monitor_inch VARCHAR(50),
-        serial_num VARCHAR(100),
-        FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
-      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-    `);
-
-    await connection.query(`
-      CREATE TABLE asset_location (
-        id INT AUTO_INCREMENT PRIMARY KEY,
-        asset_id VARCHAR(50) NOT NULL,
-        location VARCHAR(255),
-        location_detail VARCHAR(255),
-        location_photo VARCHAR(255),
-        loc_x VARCHAR(20),
-        loc_y VARCHAR(20),
-        is_active BOOLEAN DEFAULT TRUE,
-        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-        FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
-      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-    `);
-
-    await connection.query(`
-      CREATE TABLE asset_remote (
-        id INT AUTO_INCREMENT PRIMARY KEY,
-        asset_id VARCHAR(50) NOT NULL,
-        ip_address VARCHAR(100),
-        mac_address VARCHAR(100),
-        remote_tool VARCHAR(100),
-        remote_id VARCHAR(100),
-        remote_pw VARCHAR(100),
-        is_active BOOLEAN DEFAULT TRUE,
-        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-        FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
-      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-    `);
-
-    await connection.query('SET FOREIGN_KEY_CHECKS = 1');
-    console.log('✅ Normalized tables created.');
-
-    // --- 3. Migrate Data from Legacy Tables ---
-    const legacyTables = ['asset_pc', 'asset_server', 'asset_storage', 'asset_remote', 'asset_equipment', 'asset_office_supplies', 'asset_survey', 'asset_vip'];
-    
-    let totalMigrated = 0;
-
-    for (const table of legacyTables) {
-      try {
-        const [rows] = await connection.query(`SELECT * FROM ${table}`);
-        
-        for (const row of rows) {
-          // 3.1 Insert into asset_core
-          await connection.query(`
-            INSERT IGNORE INTO asset_core (
-              id, asset_code, category, asset_type, asset_purpose, service_type, purchase_corp, purchase_date, 
-              purchase_amount, purchase_vendor, approval_document, memo, manager_primary, manager_secondary, 
-              current_dept, previous_dept, user_current, previous_user, emp_no, user_position, created_at
-            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
-          `, [
-            row.id, row.asset_code, row.category, row.asset_type, row.asset_purpose, row.service_type, 
-            row.purchase_corp, row.purchase_date, row.purchase_amount, row.purchase_vendor, row.approval_document, 
-            row.memo, row.manager_primary, row.manager_secondary, row.current_dept, row.previous_dept, 
-            row.user_current, row.previous_user, row.emp_no, row.user_position, row.created_at
-          ]);
-
-          // 3.2 Insert into asset_hardware (if hardware fields exist)
-          if (row.model_name || row.cpu || row.ram || row.hw_status) {
-              await connection.query(`
-                INSERT INTO asset_hardware (
-                  asset_id, hw_status, model_name, mainboard, os, cpu, ram, gpu, storage1, storage2, storage3, monitoring, price, volume, monitor_inch, serial_num
-                ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
-              `, [
-                row.id, row.hw_status, row.model_name, row.mainboard, row.os, row.cpu, row.ram, row.gpu, 
-                row.ssd_1 || row.hdd_1, row.ssd_2 || row.hdd_2, row.hdd_3, row.monitoring, row.price, 
-                row.volume, row.monitor_inch, row.serial_num
-              ]);
-          }
-
-          // 3.3 Insert into asset_location (if location fields exist)
-          if (row.location || row.location_detail) {
-              await connection.query(`
-                INSERT INTO asset_location (
-                  asset_id, location, location_detail, location_photo, loc_x, loc_y
-                ) VALUES (?, ?, ?, ?, ?, ?)
-              `, [
-                row.id, row.location, row.location_detail, row.location_photo, row.loc_x, row.loc_y
-              ]);
-          }
-
-          // 3.4 Insert into asset_remote (if network fields exist)
-          // Handle primary network interface
-          if (row.ip_address || row.mac_address || row.remote_tool) {
-              await connection.query(`
-                INSERT INTO asset_remote (
-                  asset_id, ip_address, mac_address, remote_tool, remote_id, remote_pw
-                ) VALUES (?, ?, ?, ?, ?, ?)
-              `, [
-                row.id, row.ip_address, row.mac_address, row.remote_tool, row.remote_id, row.remote_pw
-              ]);
-          }
-          
-          // Handle secondary network interface (e.g., from server table) if it exists
-          if (row.ip_address_2 || row.remote_tool_2) {
-              await connection.query(`
-                INSERT INTO asset_remote (
-                  asset_id, ip_address, remote_tool, remote_id, remote_pw
-                ) VALUES (?, ?, ?, ?, ?)
-              `, [
-                row.id, row.ip_address_2, row.remote_tool_2, row.remote_id_2, row.remote_pw_2
-              ]);
-          }
-
-          totalMigrated++;
-        }
-        console.log(`- Migrated ${rows.length} records from ${table}`);
-      } catch (err) {
-        console.warn(`- Skipping legacy table ${table}: ${err.message}`);
-      }
-    }
-
-    console.log(`✅ Phase 1 Data Migration Completed. Total Assets Migrated: ${totalMigrated}`);
-
-  } catch (err) {
-    console.error('❌ Migration Failed:', err);
-  } finally {
-    await connection.end();
-  }
-}
-
-migrateSchema();

migrate_v2_final.js

@@ -1,212 +0,0 @@
-import mysql from 'mysql2/promise';
-import dotenv from 'dotenv';
-
-dotenv.config();
-
-const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
-
-async function migrateV2() {
-  const connection = await mysql.createConnection({
-    host: DB_HOST,
-    user: DB_USER,
-    password: DB_PASS,
-    database: DB_NAME,
-    port: parseInt(DB_PORT || '3306')
-  });
-
-  console.log('🚀 Phase 2: Final Migration to Normalized V2 Schema...');
-
-  try {
-    await connection.query('SET FOREIGN_KEY_CHECKS = 0');
-
-    // 1. Create/Enhance Core Tables
-    console.log('1. Creating/Enhancing Tables...');
-
-    await connection.query('DROP TABLE IF EXISTS asset_core, asset_hardware, asset_location, asset_remote');
-
-    await connection.query(`
-      CREATE TABLE asset_core (
-        id VARCHAR(50) PRIMARY KEY,
-        asset_code VARCHAR(100) UNIQUE NOT NULL,
-        category VARCHAR(100),
-        asset_type VARCHAR(100),
-        current_role VARCHAR(50) DEFAULT 'Normal' COMMENT 'Normal, Server, Personal, etc.',
-        asset_purpose VARCHAR(255),
-        service_type VARCHAR(50),
-        purchase_corp VARCHAR(100),
-        purchase_date VARCHAR(50),
-        purchase_amount VARCHAR(100),
-        purchase_vendor VARCHAR(255),
-        approval_document VARCHAR(255),
-        memo TEXT,
-        manager_primary VARCHAR(100),
-        manager_secondary VARCHAR(100),
-        current_dept VARCHAR(255),
-        previous_dept VARCHAR(255),
-        user_current VARCHAR(100),
-        previous_user VARCHAR(100),
-        emp_no VARCHAR(20),
-        user_position VARCHAR(50),
-        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
-      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-    `);
-
-    await connection.query(`
-      CREATE TABLE asset_hardware (
-        id INT AUTO_INCREMENT PRIMARY KEY,
-        asset_id VARCHAR(50) NOT NULL,
-        hw_status VARCHAR(50),
-        model_name VARCHAR(255),
-        mainboard VARCHAR(255),
-        os VARCHAR(100),
-        cpu VARCHAR(255),
-        ram VARCHAR(100),
-        gpu VARCHAR(100),
-        storage1 VARCHAR(255),
-        storage2 VARCHAR(255),
-        storage3 VARCHAR(255),
-        storage4 VARCHAR(255),
-        monitoring VARCHAR(100),
-        price VARCHAR(100),
-        volume VARCHAR(100),
-        monitor_inch VARCHAR(50),
-        serial_num VARCHAR(100),
-        FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
-      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-    `);
-
-    await connection.query(`
-      CREATE TABLE asset_location (
-        id INT AUTO_INCREMENT PRIMARY KEY,
-        asset_id VARCHAR(50) NOT NULL,
-        location VARCHAR(255),
-        location_detail VARCHAR(255),
-        location_photo VARCHAR(255),
-        loc_x VARCHAR(20),
-        loc_y VARCHAR(20),
-        is_active TINYINT(1) DEFAULT 1,
-        deactivated_at DATETIME NULL,
-        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-        FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
-      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-    `);
-
-    await connection.query(`
-      CREATE TABLE asset_remote (
-        id INT AUTO_INCREMENT PRIMARY KEY,
-        asset_id VARCHAR(50) NOT NULL,
-        ip_address VARCHAR(100),
-        mac_address VARCHAR(100),
-        remote_tool VARCHAR(100),
-        remote_id VARCHAR(100),
-        remote_pw VARCHAR(100),
-        is_active TINYINT(1) DEFAULT 1,
-        deactivated_at DATETIME NULL,
-        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-        FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
-      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-    `);
-
-    console.log('✅ V2 Schema tables created.');
-
-    // 2. Migration Logic
-    const legacyTables = [
-      { name: 'asset_pc', defaultRole: 'Personal' },
-      { name: 'asset_server', defaultRole: 'Server' },
-      { name: 'asset_storage', defaultRole: 'Normal' },
-      { name: 'asset_equipment', defaultRole: 'Normal' },
-      { name: 'asset_office_supplies', defaultRole: 'Normal' },
-      { name: 'asset_survey', defaultRole: 'Normal' },
-      { name: 'asset_vip', defaultRole: 'Normal' },
-      { name: 'asset_pc_parts', defaultRole: 'Normal' }
-    ];
-
-    let totalMigrated = 0;
-
-    for (const tableInfo of legacyTables) {
-      const table = tableInfo.name;
-      try {
-        const [rows] = await connection.query(`SELECT * FROM ${table}`);
-        console.log(`- Migrating ${rows.length} records from ${table}...`);
-
-        for (const row of rows) {
-          // 2.1 Insert into asset_core
-          const role = (table === 'asset_pc' && row.asset_type === '서버PC') ? 'Server' : tableInfo.defaultRole;
-          
-          await connection.query(`
-            INSERT IGNORE INTO asset_core (
-              id, asset_code, category, asset_type, current_role, asset_purpose, service_type, purchase_corp, purchase_date, 
-              purchase_amount, purchase_vendor, approval_document, memo, manager_primary, manager_secondary, 
-              current_dept, previous_dept, user_current, previous_user, emp_no, user_position, created_at
-            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
-          `, [
-            row.id, row.asset_code, row.category, row.asset_type, role, row.asset_purpose, row.service_type, 
-            row.purchase_corp, row.purchase_date, row.purchase_amount, row.purchase_vendor, row.approval_document, 
-            row.memo, row.manager_primary, row.manager_secondary, row.current_dept, row.previous_dept, 
-            row.user_current || row.current_user, row.previous_user, row.emp_no, row.user_position, row.created_at
-          ]);
-
-          // 2.2 Insert into asset_hardware
-          await connection.query(`
-            INSERT INTO asset_hardware (
-              asset_id, hw_status, model_name, mainboard, os, cpu, ram, gpu, storage1, storage2, storage3, storage4, monitoring, price, volume, monitor_inch, serial_num
-            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
-          `, [
-            row.id, row.hw_status, row.model_name, row.mainboard, row.os, row.cpu, row.ram, row.gpu, 
-            row.ssd_1 || row.storage1, row.ssd_2 || row.storage2, row.hdd_1 || row.storage3, row.hdd_2, row.monitoring, row.price, 
-            row.volume, row.monitor_inch, row.serial_num
-          ]);
-
-          // 2.3 Insert into asset_location
-          if (row.location || row.location_detail) {
-              await connection.query(`
-                INSERT INTO asset_location (
-                  asset_id, location, location_detail, location_photo, loc_x, loc_y, is_active
-                ) VALUES (?, ?, ?, ?, ?, ?, 1)
-              `, [
-                row.id, row.location, row.location_detail, row.location_photo, row.loc_x, row.loc_y
-              ]);
-          }
-
-          // 2.4 Insert into asset_remote
-          // Primary Network
-          if (row.ip_address || row.mac_address || row.remote_tool) {
-              await connection.query(`
-                INSERT INTO asset_remote (
-                  asset_id, ip_address, mac_address, remote_tool, remote_id, remote_pw, is_active
-                ) VALUES (?, ?, ?, ?, ?, ?, 1)
-              `, [
-                row.id, row.ip_address, row.mac_address, row.remote_tool, row.remote_id, row.remote_pw
-              ]);
-          }
-          
-          // Secondary Network (for servers)
-          if (row.ip_address_2 || row.remote_tool_2) {
-              await connection.query(`
-                INSERT INTO asset_remote (
-                  asset_id, ip_address, remote_tool, remote_id, remote_pw, is_active
-                ) VALUES (?, ?, ?, ?, ?, 1)
-              `, [
-                row.id, row.ip_address_2, row.remote_tool_2, row.remote_id_2, row.remote_pw_2
-              ]);
-          }
-
-          totalMigrated++;
-        }
-      } catch (err) {
-        console.warn(`- Skipping table ${table}: ${err.message}`);
-      }
-    }
-
-    await connection.query('SET FOREIGN_KEY_CHECKS = 1');
-    console.log(`✅ Phase 2 Data Migration Completed. Total Assets Migrated: ${totalMigrated}`);
-
-  } catch (err) {
-    console.error('❌ Migration Failed:', err);
-  } finally {
-    await connection.end();
-  }
-}
-
-migrateV2();

migrate_v4_network.js

@@ -1,73 +0,0 @@
-import mysql from 'mysql2/promise';
-import dotenv from 'dotenv';
-
-dotenv.config();
-
-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'),
-});
-
-async function migrate() {
-    const conn = await pool.getConnection();
-    try {
-        console.log('1. Creating asset_remote_v4 table...');
-        await conn.query(`
-            CREATE TABLE IF NOT EXISTS asset_remote_v4 (
-                id INT AUTO_INCREMENT PRIMARY KEY,
-                asset_id VARCHAR(50) NOT NULL,
-                net_type VARCHAR(20) NOT NULL, /* 'IP' or 'REMOTE' */
-                net_name VARCHAR(100), /* e.g., '기본망', 'AnyDesk' */
-                net_value1 VARCHAR(100), /* IP or ID */
-                net_value2 VARCHAR(100), /* MAC or PW */
-                is_active TINYINT(1) DEFAULT 1,
-                deactivated_at DATETIME NULL,
-                created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-                FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
-            ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-        `);
-
-        console.log('2. Migrating data from asset_remote...');
-        const [oldRows] = await conn.query('SELECT * FROM asset_remote WHERE is_active = 1');
-        
-        let ipCount = 0;
-        let remoteCount = 0;
-
-        for (const row of oldRows) {
-            // Migrating IP/MAC
-            if (row.ip_address || row.mac_address) {
-                await conn.query(
-                    'INSERT INTO asset_remote_v4 (asset_id, net_type, net_name, net_value1, net_value2, created_at) VALUES (?, ?, ?, ?, ?, ?)',
-                    [row.asset_id, 'IP', '기본망', row.ip_address, row.mac_address, row.created_at]
-                );
-                ipCount++;
-            }
-            // Migrating Remote
-            if (row.remote_tool || row.remote_id || row.remote_pw) {
-                await conn.query(
-                    'INSERT INTO asset_remote_v4 (asset_id, net_type, net_name, net_value1, net_value2, created_at) VALUES (?, ?, ?, ?, ?, ?)',
-                    [row.asset_id, 'REMOTE', row.remote_tool, row.remote_id, row.remote_pw, row.created_at]
-                );
-                remoteCount++;
-            }
-        }
-        
-        console.log(`Migrated ${ipCount} IP records and ${remoteCount} Remote records.`);
-
-        console.log('3. Renaming tables...');
-        await conn.query('DROP TABLE IF EXISTS asset_remote_legacy');
-        await conn.query('RENAME TABLE asset_remote TO asset_remote_legacy, asset_remote_v4 TO asset_remote;');
-
-        console.log('✅ Migration V4 (Remote) Complete.');
-    } catch (e) {
-        console.error('Migration failed:', e);
-    } finally {
-        conn.release();
-        pool.end();
-    }
-}
-
-migrate();

migrate_v5_rename_remote.js

@@ -1,28 +0,0 @@
-import mysql from 'mysql2/promise';
-import dotenv from 'dotenv';
-
-dotenv.config();
-
-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'),
-});
-
-async function migrate() {
-    const conn = await pool.getConnection();
-    try {
-        console.log('1. Renaming asset_network to asset_remote...');
-        await conn.query('RENAME TABLE asset_network TO asset_remote');
-        console.log('✅ Table renamed successfully.');
-    } catch (e) {
-        console.error('Migration failed:', e);
-    } finally {
-        conn.release();
-        pool.end();
-    }
-}
-
-migrate();

migrate_v6_parts_master.js

@@ -1,195 +0,0 @@
-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();

probe_db.js

@@ -1,36 +0,0 @@
-import mysql from 'mysql2/promise';
-import dotenv from 'dotenv';
-
-dotenv.config();
-
-const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
-
-async function probeDB() {
-  const connection = await mysql.createConnection({
-    host: DB_HOST,
-    user: DB_USER,
-    password: DB_PASS,
-    database: DB_NAME,
-    port: parseInt(DB_PORT || '3306')
-  });
-
-  console.log('--- Database Probe Start ---');
-  
-  const [tables] = await connection.query('SHOW TABLES');
-  const tableNames = tables.map(t => Object.values(t)[0]);
-  
-  console.log('Existing Tables:', tableNames);
-
-  for (const table of tableNames) {
-    const [columns] = await connection.query(`DESCRIBE ${table}`);
-    console.log(`\n[Table: ${table}]`);
-    columns.forEach(c => {
-      console.log(`  - ${c.Field} (${c.Type}) ${c.Comment ? '// ' + c.Comment : ''}`);
-    });
-  }
-
-  await connection.end();
-  console.log('\n--- Database Probe End ---');
-}
-
-probeDB().catch(console.error);

rebuild_asset_codes.cjs

@@ -1,72 +0,0 @@
-const mysql = require('mysql2/promise');
-require('dotenv').config({ override: true });
-
-const TYPE_PREFIX_MAP = {
-  '서버': 'SVR', '워크스테이션': 'SVR', '개인PC': 'PC', '공용PC': 'PC', '서버PC': 'PC', 
-  '저장시스템_렉(NAS)': 'DSS', '저장시스템_렉(DAS)': 'DSS', '저장시스템_미니(NAS)': 'DSS', '저장시스템_미니(DAS)':'DSS',
-  '저장매체': 'STM', 'HDD': 'HDD', 'SSD': 'SSD',
-  '노트북': 'NBK', '태블릿': 'TAB',
-  '드론': 'DRO', '측량장비': 'SUR', '보조기기': 'SUR', '허브': 'NET', 
-  '구독SW': 'SW', '영구SW': 'SW', '내부' : 'SW_INT', '외부':'SW_EXT'
-};
-
-const CAT_PREFIX_MAP = {
-  '서버': 'SVR', 'PC': 'PC', '저장매체': 'STM', '네트워크': 'NET', 
-  '공간정보장비': 'SUR', 'PC부품': 'PRT', '업무지원장비': 'EQP', '시설자산': 'FUR'
-};
-
-function getPrefix(cat, type) {
-    return TYPE_PREFIX_MAP[type] || TYPE_PREFIX_MAP[cat] || CAT_PREFIX_MAP[cat] || 'ETC';
-}
-
-(async () => {
-  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')
-  });
-
-  const connection = await pool.getConnection();
-  try {
-    const [rows] = await connection.query('SELECT id, category, asset_type, purchase_date, asset_code FROM asset_core ORDER BY purchase_date ASC, id ASC');
-    console.log(`Found ${rows.length} assets to process.`);
-
-    // Grouping by prefix and YYMM
-    const groups = {};
-
-    rows.forEach(row => {
-        const prefix = getPrefix(row.category, row.asset_type);
-        const datePart = (row.purchase_date && row.purchase_date.length >= 7) 
-            ? row.purchase_date.replace(/-/g, '').substring(0, 6) // YYYYMM
-            : '000000';
-        
-        const groupKey = `${prefix}-${datePart}`;
-        if (!groups[groupKey]) groups[groupKey] = [];
-        groups[groupKey].push(row);
-    });
-
-    let updatedCount = 0;
-    for (const groupKey in groups) {
-        const groupAssets = groups[groupKey];
-        for (let i = 0; i < groupAssets.length; i++) {
-            const asset = groupAssets[i];
-            const nextNum = i + 1;
-            const newCode = `${groupKey}-${String(nextNum).padStart(4, '0')}`;
-            
-            if (asset.asset_code !== newCode) {
-                await connection.query('UPDATE asset_core SET asset_code = ? WHERE id = ?', [newCode, asset.id]);
-                updatedCount++;
-            }
-        }
-    }
-
-    console.log(`✅ Successfully rebuilt asset codes. Total updated: ${updatedCount}`);
-  } catch (err) {
-    console.error('❌ Error rebuilding asset codes:', err);
-  } finally {
-    connection.release();
-    await pool.end();
-  }
-})();

scratch/calculate_job_averages.js

@@ -1,163 +0,0 @@
-import * as fs from 'fs';
-
-// dummyData.ts를 읽어와서 dummyPCs 파싱
-const content = fs.readFileSync('c:/Project/HM ITAM/src/core/dummyData.ts', 'utf-8');
-
-// export const dummyPCs: any[] = [ ... ]; 패턴 추출
-const match = content.match(/export const dummyPCs: any\[\] = (\[[\s\S]*?\]);/);
-if (!match) {
-  console.error('Failed to parse dummyPCs from dummyData.ts');
-  process.exit(1);
-}
-
-const dummyPCs = JSON.parse(match[1]);
-
-function calculatePcScoreDeductive(cpu, ram, gpu, purchaseDate) {
-  let score = 100;
-  
-  // 1. CPU 등급 감점
-  const cpuUpper = (cpu || '').toUpperCase();
-  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 세대 감점
-  let genDeduction = 0;
-  let 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);
-  }
-  
-  let 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 용량 감점
-  const ramUpper = (ram || '').toUpperCase();
-  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 성능 감점
-  const gpuUpper = (gpu || '').toUpperCase();
-  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 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. 연식(노후도) 감점
-  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())) {
-      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);
-}
-
-const jobScores = {};
-let totalPcs = 0;
-
-const filteredPCs = dummyPCs.filter(pc => pc.user_position !== '재고PC');
-
-filteredPCs.forEach(pc => {
-  const job = pc.user_position || '미분류';
-  const score = calculatePcScoreDeductive(pc.cpu, pc.ram, pc.gpu, pc.purchase_date);
-  
-  if (!jobScores[job]) {
-    jobScores[job] = { total: 0, count: 0 };
-  }
-  jobScores[job].total += score;
-  jobScores[job].count += 1;
-  totalPcs++;
-});
-
-console.log('--- Job Averages (Deductive 100-point) ---');
-const sortedJobs = Object.keys(jobScores).map(job => {
-  const avg = jobScores[job].total / jobScores[job].count;
-  return {
-    job,
-    avg: parseFloat(avg.toFixed(1)),
-    count: jobScores[job].count
-  };
-}).sort((a, b) => b.avg - a.avg);
-
-sortedJobs.forEach((item, index) => {
-  console.log(`${index + 1}. ${item.job}: Avg=${item.avg}점, Count=${item.count}대`);
-});
-
-console.log('Total PCs (excluding Stock):', totalPcs);

scratch/parse_excel.js

@@ -1,30 +0,0 @@
-import pkg from 'xlsx';
-const { readFile, utils } = pkg;
-
-try {
-  const workbook = readFile('c:/Project/HM ITAM/SampleData_PC.xlsx');
-  const sheet = workbook.Sheets[workbook.SheetNames[0]];
-  const rawRows = utils.sheet_to_json(sheet, { header: 1 });
-  
-  const corps = new Set();
-  
-  // 첫 번째 행(헤더) 제외하고 C열(인덱스 2) 데이터 추출
-  rawRows.slice(1).forEach(row => {
-    if (row[2] !== undefined && row[2] !== null) {
-      corps.add(String(row[2]).trim());
-    }
-  });
-  
-  const jobs = new Map();
-  rawRows.slice(1).forEach(row => {
-    const job = String(row[3] || '').trim();
-    jobs.set(job, (jobs.get(job) || 0) + 1);
-  });
-
-  console.log('--- Unique Jobs in D column ---');
-  Array.from(jobs.entries()).forEach(([key, val]) => {
-    console.log(`${key}: ${val}대`);
-  });
-} catch (e) {
-  console.error(e);
-}

scratch/parse_svr_excel.js

@@ -1,27 +0,0 @@
-import pkg from 'xlsx';
-const { readFile, utils } = pkg;
-
-try {
-  const workbook = readFile('c:/Project/HM ITAM/SampleData_SVR.xlsx');
-  
-  for (const sheetName of workbook.SheetNames) {
-    console.log(`\n================= Sheet: ${sheetName} =================`);
-    const sheet = workbook.Sheets[sheetName];
-    const rawRows = utils.sheet_to_json(sheet, { header: 1 });
-    const validRows = rawRows.filter(row => {
-      return row.some(val => val !== undefined && val !== null && String(val).trim() !== '');
-    });
-    
-    const header = validRows[0];
-    const assetNameIdx = header.indexOf('자산명');
-    const typeIdx = header.indexOf('유형');
-    const detailIdx = header.indexOf('상세');
-    const teamIdx = header.indexOf('팀명');
-    
-    validRows.slice(1).forEach((row, idx) => {
-      console.log(`[${idx + 1}] 팀명: ${row[teamIdx]} | 자산명: ${row[assetNameIdx]} | 유형: ${row[typeIdx]} | 상세: ${row[detailIdx]}`);
-    });
-  }
-} catch (e) {
-  console.error(e);
-}

scratch/update_dummy_pcs.js

@@ -1,447 +0,0 @@
-import pkg from 'xlsx';
-import * as fs from 'fs';
-import * as path from 'path';
-
-const { readFile, utils } = pkg;
-
-// 임시 ID 생성 및 도우미 함수
-const randomId = () => Math.random().toString(36).substring(2, 9);
-const CORPS = ['한맥', '삼안', '장헌', '장헌산업', 'PTC', '바론', '한라'];
-
-function cleanValue(val) {
-  if (val === undefined || val === null) return '-';
-  const str = String(val).trim();
-  return str === '' ? '-' : str;
-}
-
-try {
-  const workbook = readFile('c:/Project/HM ITAM/SampleData_PC.xlsx');
-  const sheet = workbook.Sheets[workbook.SheetNames[0]];
-  
-  // header: 1로 읽어 2차원 배열을 획득
-  const rawRows = utils.sheet_to_json(sheet, { header: 1 });
-  
-  // 첫 번째 행은 헤더이므로 제외
-  const dataRows = rawRows.slice(1);
-  
-  const parsedPCs = [];
-  let pcIndex = 0;
-  let designKihuckCount = 0;
-  
-  for (const row of dataRows) {
-    // 빈 행 건너뛰기 (성명, 부서, 팀명 모두 비어있으면 데이터가 없는 행으로 판단)
-    if (!row[0] && !row[1] && !row[2] && !row[3] && !row[4]) {
-      continue;
-    }
-    
-    const deptRaw = cleanValue(row[0]);
-    const teamRaw = cleanValue(row[1]);
-    const corpRaw = cleanValue(row[2]); // C열: 소속 (NEW)
-    const jobRaw = cleanValue(row[3]);  // D열: 직무 (밀림)
-    const nameRaw = cleanValue(row[4]); // E열: 성명 (밀림)
-    
-    // 특정 사용자 제외 필터
-    if (nameRaw === '한치영' || nameRaw === '공용') {
-      continue;
-    }
-    
-    const posRaw = cleanValue(row[5]);  // F열: 직급 (밀림)
-    const mainboardRaw = cleanValue(row[6]); // G열: 메인보드 (밀림)
-    const cpuRaw = cleanValue(row[7]);  // H열: CPU (밀림)
-    const cpuYearRaw = row[8];          // I열: CPU 출시연도 (밀림)
-    const gpuRaw = cleanValue(row[9]);  // J열: GPU (밀림)
-    const gpuYearRaw = row[10];         // K열: GPU 출시연도 (밀림)
-    const ramRaw = cleanValue(row[11]); // L열: RAM (밀림)
-    const ssd1Raw = cleanValue(row[12]);// M열: SDD1 (밀림)
-    const ssd2Raw = cleanValue(row[13]);// N열: SDD2 (밀림)
-    const hdd1Raw = cleanValue(row[14]);// O열: HDD1 (밀림)
-    const hdd2Raw = cleanValue(row[15]);// P열: HDD2 (밀림)
-    const hdd3Raw = cleanValue(row[16]);// Q열: HDD3 (밀림)
-    const hdd4Raw = cleanValue(row[17]);// R열: HDD4 (밀림)
-    
-    // W열(22번째 인덱스) -> 구매일자
-    const dateRaw = cleanValue(row[22]);
-    // X열(23번째 인덱스) -> 비고
-    const memoRaw = cleanValue(row[23]);
-    
-    // 1. 법인 매핑 (엑셀 C열의 실제 소속 우선 사용, 없을 시 순환 지정)
-    const purchase_corp = corpRaw !== '-' ? corpRaw : CORPS[pcIndex % CORPS.length];
-    
-    // 2. 재고PC 판단 및 상태 설정
-    const isStock = teamRaw === '재고PC';
-    const hw_status = isStock ? '창고보관' : '운영중';
-    
-    // 3. 성명 정제
-    let user_current = nameRaw;
-    if (isStock) {
-      // 재고PC인 경우 직무 컬럼(row[3])에 성명이 들어가 있음
-      user_current = jobRaw !== '-' ? jobRaw : '재고장비';
-    }
-    
-    // 4. 직무 정제
-    let user_position = jobRaw;
-    if (isStock) {
-      user_position = '재고PC';
-    } else if (user_position === '-' || user_position === 'undefined' || !user_position || ['안용주', '김민수', '심영표', '이수창A', '조병철', '윤진호', '김대영', '박정웅', '김유식'].includes(user_position)) {
-      // 직무가 유효하지 않거나 이름인 경우 정제
-      if (nameRaw === '장종찬' || posRaw === '사장') {
-        user_position = '기획자';
-      } else if (nameRaw === '노트북' || nameRaw === '공용') {
-        user_position = '기획자';
-      } else {
-        // 팀명/부서 기준 매핑
-        const combined = (deptRaw + ' ' + teamRaw).toUpperCase();
-        if (combined.includes('개발') || combined.includes('SOLUTION') || combined.includes('WEB') || combined.includes('ERP')) {
-          user_position = '개발자';
-        } else if (combined.includes('BIM') || combined.includes('구조') || combined.includes('설계') || combined.includes('터널') || combined.includes('상하수도') || combined.includes('수자원') || combined.includes('건설') || combined.includes('CM')) {
-          user_position = '엔지니어';
-        } else if (combined.includes('디자인') || combined.includes('GRAPHICS')) {
-          user_position = '디자이너';
-        } else {
-          user_position = '기획자';
-        }
-      }
-    }
-    
-    // 만약 직무가 'BIM모델러' 인 경우, 그대로 유지
-    if (jobRaw === 'BIM모델러') {
-      user_position = 'BIM모델러';
-    }
-
-    // 개발자/디자이너 세부 직무 분리 로직 적용
-    if (user_position === '개발자') {
-      const nameUpper = nameRaw.trim();
-      const teamUpper = teamRaw.toUpperCase();
-      
-      if (nameUpper === '조찬영' || nameUpper === '김용연') {
-        user_position = 'AI 개발자';
-      } else if (
-        teamUpper.includes('그래픽스') || 
-        teamUpper.includes('MODELER') || 
-        teamUpper.includes('HMEG') || 
-        teamUpper.includes('EG-BIM') || 
-        teamUpper.includes('GSIM') || 
-        teamUpper.includes('STRANA')
-      ) {
-        user_position = '3D 개발자';
-      } else if (
-        teamUpper.includes('WEB') || 
-        teamUpper.includes('솔루션개발') || 
-        teamUpper.includes('ERP') || 
-        teamUpper.includes('전산')
-      ) {
-        user_position = '웹 개발자';
-      } else {
-        user_position = '프로그램 개발자';
-      }
-    } else if (user_position === '디자이너') {
-      const teamUpper = teamRaw.toUpperCase();
-      if (teamUpper.includes('디자인셀')) {
-        user_position = 'UXUI 디자이너';
-      } else if (teamUpper.includes('디자인기획')) {
-        // 디자인기획팀 소속 중 약 40%는 3D 디자이너, 60%는 편집 디자이너
-        if (designKihuckCount % 10 < 4) {
-          user_position = '3D 디자이너';
-        } else {
-          user_position = '편집 디자이너';
-        }
-        designKihuckCount++;
-      } else {
-        user_position = '편집 디자이너';
-      }
-    }
-    
-    // 5. 구매일자 포맷 가공 (YYYY-MM)
-    let purchase_date = '2022-01'; // 기본값
-    if (dateRaw !== '-') {
-      if (dateRaw.length === 6 && !isNaN(dateRaw)) {
-        purchase_date = `${dateRaw.substring(0, 4)}-${dateRaw.substring(4, 6)}`;
-      } else if (dateRaw.length === 4 && !isNaN(dateRaw)) {
-        purchase_date = `${dateRaw}-01`;
-      } else {
-        purchase_date = dateRaw;
-      }
-    } else if (cpuYearRaw && !isNaN(cpuYearRaw)) {
-      purchase_date = `${cpuYearRaw}-01`;
-    }
-    
-    // 6. 도입 금액(purchase_amount) 책정
-    let purchase_amount = '1500000';
-    const cpuUpper = cpuRaw.toUpperCase();
-    const gpuUpper = gpuRaw.toUpperCase();
-    
-    if (cpuUpper.includes('I9') || cpuUpper.includes('RYZEN 9') || cpuUpper.includes('RYZEN9') || gpuUpper.includes('4080') || gpuUpper.includes('4090')) {
-      purchase_amount = '3500000';
-    } else if (cpuUpper.includes('I7') || cpuUpper.includes('RYZEN 7') || cpuUpper.includes('RYZEN7') || gpuUpper.includes('3070') || gpuUpper.includes('4070') || gpuUpper.includes('A2000')) {
-      purchase_amount = '2200000';
-    } else if (cpuUpper.includes('I5') || cpuUpper.includes('RYZEN 5') || cpuUpper.includes('RYZEN5') || gpuUpper.includes('3060') || gpuUpper.includes('2060')) {
-      purchase_amount = '1500000';
-    } else if (cpuYearRaw && parseInt(cpuYearRaw) < 2020) {
-      purchase_amount = '800000';
-    } else {
-      purchase_amount = '950000';
-    }
-    
-    // 7. MAC 주소 생성 (16진수 포맷)
-    const mac_address = `00:1A:2B:3C:4D:${pcIndex.toString(16).toUpperCase().padStart(2, '0')}`;
-    
-    parsedPCs.push({
-      id: randomId(),
-      asset_type: '개인PC',
-      purchase_corp,
-      asset_code: 'PC-24' + String(pcIndex).padStart(3, '0'),
-      purchase_date,
-      user_current,
-      user_position,
-      current_dept: teamRaw !== '-' ? teamRaw : deptRaw,
-      previous_dept: pcIndex % 8 === 0 ? '기획팀' : '-',
-      location: '서울본사 7층',
-      manager_primary: '김IT',
-      manager_secondary: '이IT',
-      model_name: mainboardRaw !== '-' ? mainboardRaw : '사내 표준 데스크톱',
-      os: 'Windows 11 Pro',
-      cpu: cpuRaw,
-      gpu: gpuRaw,
-      ram: ramRaw,
-      ssd_1: ssd1Raw,
-      ssd_2: ssd2Raw,
-      ssd_3: '-',
-      hdd_1: hdd1Raw,
-      hdd_2: hdd2Raw,
-      hdd_3: hdd3Raw,
-      hdd_4: hdd4Raw,
-      mainboard: mainboardRaw,
-      ip_address: '192.168.0.' + (10 + (pcIndex % 240)),
-      purchase_amount,
-      purchase_vendor: 'LG전자/삼성전자/HP',
-      approval_document: '2024_상반기_PC구매_' + pcIndex,
-      memo: memoRaw !== '-' ? memoRaw : (isStock ? '재고 보유 분' : '임직원 지급용'),
-      asset_name: `개인PC ${pcIndex + 1}`,
-      mac_address,
-      hw_status
-    });
-    
-    pcIndex++;
-  }
-  
-  console.log(`Successfully parsed ${parsedPCs.length} PCs from excel file.`);
-  
-  // dummyData.ts 의 나머지 데이터(dummyServers 등)를 포함하여 전체 파일을 새로 씁니다.
-  const newDummyDataFileContent = `import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog } from './excelHandler';
-
-// 유틸리티: 랜덤 문자열
-const randomId = () => Math.random().toString(36).substring(2, 9);
-
-// 유틸리티: 랜덤 년월 (YYYY-MM) (최근 10년)
-const randomPurchaseYM = () => {
-  const currentYear = new Date().getFullYear();
-  const year = currentYear - Math.floor(Math.random() * 10);
-  const month = String(Math.floor(Math.random() * 12) + 1).padStart(2, '0');
-  return \`\${year}-\${month}\`;
-};
-
-// 유틸리티: 랜덤 YYYY-MM-DD
-const randomDateStr = (maxYearsAgo = 10) => {
-  const currentYear = new Date().getFullYear();
-  const year = currentYear - Math.floor(Math.random() * maxYearsAgo);
-  const month = String(Math.floor(Math.random() * 12) + 1).padStart(2, '0');
-  const day = String(Math.floor(Math.random() * 28) + 1).padStart(2, '0');
-  return \`\${year}-\${month}-\${day}\`;
-};
-
-const CORPS = ['한맥', '삼안', '장헌', '장헌산업', 'PTC', '바론', '한라'];
-const getRandomCorp = () => CORPS[Math.floor(Math.random() * CORPS.length)];
-
-// ────────────────────────────────────────────────────────
-// 1. SampleData_PC.xlsx 에서 파싱된 PC 데이터 주입
-// ────────────────────────────────────────────────────────
-export const dummyPCs: any[] = ${JSON.stringify(parsedPCs, null, 2)};
-
-// ────────────────────────────────────────────────────────
-// 2. 기타 자산 더미 데이터 (서버, 스토리지, 소프트웨어 등)
-// ────────────────────────────────────────────────────────
-
-export const dummyServers: any[] = Array.from({ length: 15 }).map((_, i) => ({
-  id: randomId(),
-  asset_type: '서버',
-  type2: i % 2 === 0 ? '물리' : '가상',
-  purchase_corp: getRandomCorp(),
-  asset_code: \`SRV-24\${String(i).padStart(3, '0')}\`,
-  purchase_date: randomPurchaseYM(),
-  asset_purpose: i % 2 === 0 ? '운영 웹 서버' : '사내망 DB 서버',
-  current_dept: '인프라팀',
-  previous_dept: '-',
-  location: 'IDC 센터 1-A',
-  manager_primary: '박서버',
-  manager_secondary: '최백업',
-  ip_address: \`10.0.0.\${10 + i}\`,
-  ip_address_2: \`192.168.100.\${10 + i}\`,
-  remote_tool: 'RDP / SSH',
-  remote_id: \`admin_\${i}\`,
-  remote_pw: '********',
-  model_name: 'Dell PowerEdge R750',
-  os: 'Ubuntu 22.04 LTS',
-  cpu: 'Intel Xeon Gold 6330',
-  ram: '128GB',
-  gpu: i % 3 === 0 ? 'NVIDIA A100' : '-',
-  ssd_1: '1TB NVMe',
-  ssd_2: '1TB NVMe',
-  hdd_1: '4TB HDD',
-  monitoring: 'Zabbix Agent',
-  purchase_amount: '8500000',
-  purchase_vendor: '델테크놀로지스',
-  approval_document: \`2024_IDC_확장품의_\sign\${i}\`,
-  memo: '서버 랙 3번 위치',
-  asset_name: \`운영 서버 \${i+1}\`,
-  mac_address: \`00:1A:2B:3C:4E:\${String(i).padStart(2, '0')}\`,
-  hw_status: '운영중'
-}));
-
-export const dummyStorages: any[] = Array.from({ length: 8 }).map((_, i) => ({
-  id: randomId(),
-  asset_type: '스토리지',
-  purchase_corp: getRandomCorp(),
-  asset_code: \`STR-24\${String(i).padStart(3, '0')}\`,
-  asset_name: \`공용 스토리지 \${i+1}\`,
-  location: 'IDC 센터 1-A',
-  model_name: 'Synology RS4021xs+',
-  volume: '100TB',
-  manager_primary: '박서버',
-  manager_secondary: '최백업',
-  ip_address: \`10.0.0.\${50 + i}\`,
-  mac_address: \`00:1A:2B:3C:4F:\${String(i).padStart(2, '0')}\`,
-  purchase_date: randomPurchaseYM(),
-  purchase_amount: '12000000',
-  purchase_vendor: '시놀로지코리아',
-  approval_document: \`2024_스토리지구매_\${i}\`,
-  memo: '부서별 백업본 저장용',
-  os: 'Synology DSM',
-  asset_purpose: '데이터 백업',
-  hw_status: '운영중'
-}));
-
-export const dummyEquips: any[] = Array.from({ length: 12 }).map((_, i) => ({
-  id: randomId(),
-  asset_type: '전산비품',
-  purchase_corp: getRandomCorp(),
-  asset_code: \`EQ-24\${String(i).padStart(3, '0')}\`,
-  asset_name: \`네트워크 스위치 \${i+1}\`,
-  location: '전산실 랙 1',
-  manager_primary: '네트워크담당자',
-  ip_address: \`192.168.10.\${200 + i}\`,
-  mac_address: \`00:1A:2B:3C:51:\${String(i).padStart(2, '0')}\`,
-  os: 'Cisco IOS',
-  purchase_date: randomPurchaseYM(),
-  purchase_amount: '150000',
-  purchase_vendor: '다나와',
-  approval_document: \`2024_비품구매_\${i}\`,
-  memo: '사내망 확장용',
-  asset_purpose: '네트워크 분배'
-}));
-
-export const dummyMobiles: any[] = Array.from({ length: 15 }).map((_, i) => ({
-  id: randomId(),
-  asset_type: '모바일기기',
-  purchase_corp: getRandomCorp(),
-  asset_code: \`MOB-24\${String(i).padStart(3, '0')}\`,
-  asset_name: \`테스트용 단말기 \${i+1}\`,
-  location: '개발2팀',
-  manager_primary: '테스터',
-  os: i % 2 === 0 ? 'Android 14' : 'iOS 17',
-  purchase_date: randomPurchaseYM(),
-  purchase_amount: '900000',
-  purchase_vendor: '삼성전자/애플',
-  approval_document: \`2024_모바일구매_\${i}\`,
-  memo: '앱 호환성 테스트 전용',
-  asset_purpose: 'QA 테스트',
-  ip_address: \`192.168.1.\${10 + i}\`,
-  mac_address: \`00:1A:2B:3C:50:\${String(i).padStart(2, '0')}\`
-}));
-
-export const dummySubSw: any[] = Array.from({ length: 10 }).map((_, i) => ({
-  id: randomId(),
-  sw_type: '구독SW',
-  sw_field: '업무용/협업',
-  purchase_corp: getRandomCorp(),
-  current_dept: '전사',
-  product_name: \`Microsoft 365 E\${3 + (i%2)}\`,
-  purchase_date: randomDateStr(3),
-  start_date: randomDateStr(1),
-  expired_date: randomDateStr(0),
-  purchase_amount: '150000',
-  asset_count: 50 + i * 5,
-  email_account: \`admin\${i}@hmcorp.com\`,
-  purchase_vendor: '소프트웨어인라이프',
-  memo: '연간 계약 갱신 필요'
-}));
-
-export const dummyPermSw: any[] = Array.from({ length: 5 }).map((_, i) => ({
-  id: randomId(),
-  sw_type: '영구SW',
-  sw_field: '디자인/설계',
-  purchase_corp: getRandomCorp(),
-  current_dept: '디자인팀',
-  product_name: \`AutoCAD 202\${i%4}\`,
-  purchase_date: randomDateStr(5),
-  start_date: randomDateStr(5),
-  expired_date: '2099-12-31',
-  purchase_amount: '3000000',
-  asset_count: 2,
-  email_account: \`design\${i}@hmcorp.com\`,
-  purchase_vendor: '오토데스크 파트너',
-  memo: 'USB 동글키 보관중'
-}));
-
-export const dummyCloud: any[] = Array.from({ length: 5 }).map((_, i) => ({
-  id: randomId(),
-  sw_type: '클라우드',
-  asset_mfr: i % 2 === 0 ? 'AWS' : 'GCP',
-  purchase_corp: getRandomCorp(),
-  current_dept: '개발팀',
-  product_name: \`컴퓨팅 인스턴스 Type \${i}\`,
-  email_account: \`awsadmin\${i}@hmcorp.com\`,
-  purchase_method: '법인카드(신한 1234)',
-  purchase_amount: \`\${500000 + i * 100000}\`,
-  asset_count: 1,
-  purchase_vendor: 'AWS/GCP',
-  memo: '환율 변동에 따라 매월 상이함'
-}));
-
-export const dummyDomain: any[] = Array.from({ length: 5 }).map((_, i) => ({
-  id: randomId(),
-  asset_type: '도메인',
-  purchase_corp: getRandomCorp(),
-  product_name: \`사내 운영 서비스 \${i+1}\`,
-  domain_address: \`service\${i+1}.hmcorp.com\`,
-  start_date: randomDateStr(4),
-  expired_date: randomDateStr(0),
-  purchase_amount: '22000',
-  manager_primary: '인프라팀장',
-  manager_secondary: '인프라담당자',
-  memo: '가비아 자동갱신 설정 완료'
-}));
-
-export const dummySwUsers: any[] = Array.from({ length: 15 }).map((_, i) => ({
-  id: randomId(),
-  sw_id: dummySubSw[0]?.id || randomId(),
-  purchase_corp: getRandomCorp(),
-  current_dept: '경영지원팀',
-  user_current: \`홍길동\${i}\`,
-  memo: \`SW신청서_2400\${i}\`
-}));
-
-export const dummyLogs: any[] = Array.from({ length: 10 }).map((_, i) => ({
-  id: randomId(),
-  assetId: dummyPCs[0]?.id || randomId(),
-  date: randomDateStr(1),
-  details: i % 2 === 0 ? '메모리 추가 증설 (16GB -> 32GB)' : '디스플레이 파손 수리',
-  user: 'IT지원팀',
-  cost: i % 2 === 0 ? 80000 : 150000,
-}));
-`;
-
-  fs.writeFileSync('c:/Project/HM ITAM/src/core/dummyData.ts', newDummyDataFileContent, 'utf-8');
-  console.log('✅ dummyData.ts file updated successfully.');
-} catch (e) {
-  console.error('❌ Failed to update dummy data:', e);
-}

scratch/update_dummy_servers.js

@@ -1,442 +0,0 @@
-import pkg from 'xlsx';
-import * as fs from 'fs';
-import * as path from 'path';
-
-const { readFile, utils } = pkg;
-
-const randomId = () => Math.random().toString(36).substring(2, 9);
-const CORPS = ['한맥', '삼안', '장헌', '장헌산업', 'PTC', '바론', '한라'];
-
-function cleanValue(val) {
-  if (val === undefined || val === null) return '-';
-  const str = String(val).trim();
-  return str === '' ? '-' : str;
-}
-
-try {
-  // 1. 기존 dummyPCs 로딩
-  const dummyDataPath = 'c:/Project/HM ITAM/src/core/dummyData.ts';
-  const content = fs.readFileSync(dummyDataPath, 'utf-8');
-  const matchPCs = content.match(/export const dummyPCs: any\[\] = (\[[\s\S]*?\]);/);
-  if (!matchPCs) {
-    console.error('Failed to parse dummyPCs from dummyData.ts');
-    process.exit(1);
-  }
-  const dummyPCs = JSON.parse(matchPCs[1]);
-  console.log(`Loaded ${dummyPCs.length} existing PCs from dummyData.ts`);
-
-  // 2. SampleData_SVR.xlsx 파싱
-  const workbook = readFile('c:/Project/HM ITAM/SampleData_SVR.xlsx');
-  
-  const parsedServers = [];
-  const parsedStorages = [];
-  const parsedEquips = [];
-
-  let serverIndex = 0;
-  let storageIndex = 0;
-  let equipIndex = 0;
-
-  // ----------------- 시트 1: 합본데이터(공용PC) -----------------
-  const sheetPC = workbook.Sheets['합본데이터(공용PC)'];
-  const rawPC = utils.sheet_to_json(sheetPC, { header: 1 });
-  const rowsPC = rawPC.slice(1).filter(row => row.some(val => val !== undefined && val !== null && String(val).trim() !== ''));
-
-  for (const row of rowsPC) {
-    const teamRaw = cleanValue(row[0]);
-    const svrNoRaw = cleanValue(row[1]);
-    const assetNameRaw = cleanValue(row[2]);
-    const typeRaw = cleanValue(row[3]);
-    const detailRaw = cleanValue(row[4]);
-    const locRaw = cleanValue(row[5]);
-    const mgr1Raw = cleanValue(row[6]);
-    const mgr2Raw = cleanValue(row[7]);
-    const osRaw = cleanValue(row[8]);
-    const osVerRaw = cleanValue(row[9]);
-    const osBuildRaw = cleanValue(row[10]);
-    const modelRaw = cleanValue(row[11]);
-    const mainboardRaw = cleanValue(row[12]);
-    const cpuRaw = cleanValue(row[13]);
-    const ramRaw = cleanValue(row[14]);
-    const gpuRaw = cleanValue(row[15]);
-    const ssd1Raw = cleanValue(row[16]);
-    const ssd2Raw = cleanValue(row[17]);
-    const hdd1Raw = cleanValue(row[18]);
-    const hdd2Raw = cleanValue(row[19]);
-    const hdd3Raw = cleanValue(row[20]);
-    const hdd4Raw = cleanValue(row[21]);
-
-    const ipAddress = '172.16.10.' + (50 + (serverIndex % 150));
-    const randomCorp = CORPS[serverIndex % CORPS.length];
-
-    // 서비스 분류 판단
-    let service_type = '내부서비스';
-    const detailUpper = detailRaw.toUpperCase();
-    const assetUpper = assetNameRaw.toUpperCase();
-    const teamUpper = teamRaw.toUpperCase();
-
-    if (teamUpper.includes('회의실') || assetUpper.includes('회의실') || assetUpper.includes('사이니지')) {
-      service_type = '회의용/공용';
-    } else if (
-      detailUpper.includes('SAAS') || detailUpper.includes('웹서비스') || 
-      detailUpper.includes('운영') || detailUpper.includes('WAS') || 
-      detailUpper.includes('MYSTATION') || detailUpper.includes('CLOUD') || 
-      detailUpper.includes('홈페이지') || detailUpper.includes('WEB') || 
-      detailUpper.includes('외주') || assetUpper.includes('CLOUD') || 
-      assetUpper.includes('웹서비스') || assetUpper.includes('운영')
-    ) {
-      service_type = '외부서비스';
-    }
-
-    // 방치 의심 판단
-    const is_inactive = (
-      detailUpper.includes('원격 및 로컬접근 불가') || 
-      detailUpper.includes('철수예정') || 
-      detailUpper.includes('미사용') || 
-      detailUpper.includes('구형 OS')
-    );
-
-    // 실시간 리소스 및 네트워크 가상 데이터 생성
-    let cpu_usage = 0;
-    let ram_usage = 0;
-    let network_traffic = '0 GB';
-
-    if (is_inactive) {
-      cpu_usage = 0;
-      ram_usage = 0;
-      network_traffic = '0 GB (N/A)';
-    } else if (service_type === '회의용/공용') {
-      cpu_usage = Math.floor(Math.random() * 10) + 2; // 2%~12%
-      ram_usage = Math.floor(Math.random() * 15) + 5; // 5%~20%
-      network_traffic = (Math.random() * 1.5 + 0.1).toFixed(1) + ' GB';
-    } else if (service_type === '외부서비스') {
-      // 일부 저사양 운영/SaaS 서버는 병목 현상을 시뮬레이션하기 위해 과부하 부여
-      const isUnderSpec = !gpuRaw.toUpperCase().includes('RTX 30') && !gpuRaw.toUpperCase().includes('RTX 40') && (cpuRaw.toUpperCase().includes('I5') || ramRaw.toUpperCase().includes('16GB') || cpuRaw === '-');
-      if (isUnderSpec) {
-        cpu_usage = Math.floor(Math.random() * 15) + 81; // 81%~95% (과부하)
-        ram_usage = Math.floor(Math.random() * 10) + 86; // 86%~95%
-      } else {
-        cpu_usage = Math.floor(Math.random() * 30) + 40; // 40%~70%
-        ram_usage = Math.floor(Math.random() * 20) + 60; // 60%~80%
-      }
-      network_traffic = (Math.random() * 1500 + 300).toFixed(0) + ' GB';
-    } else { // 내부서비스
-      // Abaqus 해석용이나 Pix4D 등 고부하 내부 인프라도 부하율 높게 부여
-      const isHighLoad = detailUpper.includes('ABAQUS') || detailUpper.includes('PIX4D') || detailUpper.includes('영상 렌더링') || detailUpper.includes('TERRA');
-      if (isHighLoad) {
-        cpu_usage = Math.floor(Math.random() * 20) + 70; // 70%~90%
-        ram_usage = Math.floor(Math.random() * 20) + 75; // 75%~95%
-      } else {
-        cpu_usage = Math.floor(Math.random() * 35) + 15; // 15%~50%
-        ram_usage = Math.floor(Math.random() * 30) + 20; // 20%~50%
-      }
-      network_traffic = (Math.random() * 300 + 10).toFixed(0) + ' GB';
-    }
-
-    const assetItem = {
-      id: randomId(),
-      asset_type: typeRaw !== '-' ? typeRaw : '공용PC',
-      purchase_corp: randomCorp,
-      asset_code: 'SVR-24' + String(serverIndex).padStart(3, '0'),
-      purchase_date: '2023-03',
-      asset_purpose: detailRaw,
-      current_dept: teamRaw,
-      previous_dept: '-',
-      location: locRaw,
-      manager_primary: mgr1Raw,
-      manager_secondary: mgr2Raw,
-      ip_address: ipAddress,
-      remote_tool: 'RDP / VNC',
-      model_name: modelRaw !== '-' ? modelRaw : (mainboardRaw !== '-' ? mainboardRaw : '사내 표준 공용PC'),
-      os: osRaw !== '-' ? `${osRaw} (${osVerRaw})` : 'Windows 10',
-      cpu: cpuRaw,
-      ram: ramRaw,
-      gpu: gpuRaw,
-      ssd_1: ssd1Raw,
-      ssd_2: ssd2Raw,
-      hdd_1: hdd1Raw,
-      hdd_2: hdd2Raw,
-      hdd_3: hdd3Raw,
-      hdd_4: hdd4Raw,
-      monitoring: service_type === '외부서비스' ? '대상' : '비대상',
-      purchase_amount: gpuRaw.toUpperCase().includes('RTX 4080') || gpuRaw.toUpperCase().includes('RTX 3090') ? '3500000' : '1500000',
-      purchase_vendor: '다나와',
-      approval_document: '2023_공용PC_도입_' + serverIndex,
-      memo: is_inactive ? '방치 의심 장비 (회수 필요)' : '정상 운영 장비',
-      asset_name: assetNameRaw,
-      mac_address: `00:1A:2B:3C:5E:${serverIndex.toString(16).toUpperCase().padStart(2, '0')}`,
-      hw_status: is_inactive ? '수리/대기' : '운영중',
-      service_type: service_type,
-      is_inactive: is_inactive,
-      cpu_usage: cpu_usage,
-      ram_usage: ram_usage,
-      network_traffic: network_traffic
-    };
-
-    // 스토리지로 보낼 자산들 (유형이 NAS/DAS이거나 자산명에 NAS가 들어가면)
-    if (typeRaw.toUpperCase().includes('NAS') || typeRaw.toUpperCase().includes('DAS') || assetUpper.includes('NAS') || assetUpper.includes('DAS')) {
-      assetItem.asset_code = 'STO-24' + String(storageIndex).padStart(3, '0');
-      assetItem.volume = hdd1Raw !== '-' ? hdd1Raw : '10TB';
-      parsedStorages.push(assetItem);
-      storageIndex++;
-    } else {
-      parsedServers.push(assetItem);
-      serverIndex++;
-    }
-  }
-
-  // ----------------- 시트 2: 합본데이터(NAS) -----------------
-  const sheetNAS = workbook.Sheets['합본데이터(NAS)'];
-  const rawNAS = utils.sheet_to_json(sheetNAS, { header: 1 });
-  const rowsNAS = rawNAS.slice(1).filter(row => row.some(val => val !== undefined && val !== null && String(val).trim() !== ''));
-
-  for (const row of rowsNAS) {
-    const teamRaw = cleanValue(row[0]);
-    const svrNoRaw = cleanValue(row[1]);
-    const assetNameRaw = cleanValue(row[2]);
-    const typeRaw = cleanValue(row[3]);
-    const detailRaw = cleanValue(row[4]);
-    const locRaw = cleanValue(row[5]);
-    const mgr1Raw = cleanValue(row[6]);
-    const mgr2Raw = cleanValue(row[7]);
-    const toolRaw = cleanValue(row[8]);
-    const ipRaw = cleanValue(row[9]);
-    const ip2Raw = cleanValue(row[10]);
-    const idRaw = cleanValue(row[11]);
-    const pwRaw = cleanValue(row[12]);
-    const osRaw = cleanValue(row[15]);
-    const osVerRaw = cleanValue(row[16]);
-    const osBuildRaw = cleanValue(row[17]);
-    const modelRaw = cleanValue(row[18]);
-    const cpuRaw = cleanValue(row[19]);
-    const ramRaw = cleanValue(row[20]);
-    const gpuRaw = cleanValue(row[21]);
-    const ssd1Raw = cleanValue(row[22]);
-    const ssd2Raw = cleanValue(row[23]);
-    const hdd1Raw = cleanValue(row[24]);
-    const hdd2Raw = cleanValue(row[25]);
-    const hdd3Raw = cleanValue(row[26]);
-    const hdd4Raw = cleanValue(row[27]);
-
-    const randomCorp = CORPS[storageIndex % CORPS.length];
-    
-    // NAS는 기본적으로 내부 백업/공유용 인프라
-    const service_type = '내부서비스';
-    const is_inactive = false;
-
-    // NAS 실시간 리소스 가상 데이터
-    const cpu_usage = Math.floor(Math.random() * 25) + 15; // 15%~40%
-    const ram_usage = Math.floor(Math.random() * 35) + 30; // 30%~65%
-    const network_traffic = (Math.random() * 600 + 50).toFixed(0) + ' GB';
-
-    const assetItem = {
-      id: randomId(),
-      asset_type: typeRaw !== '-' ? typeRaw : '공용 NAS',
-      purchase_corp: randomCorp,
-      asset_code: 'STO-24' + String(storageIndex).padStart(3, '0'),
-      purchase_date: '2022-08',
-      asset_purpose: detailRaw,
-      current_dept: teamRaw !== '-' ? teamRaw : '디자인팀',
-      previous_dept: '-',
-      location: locRaw,
-      manager_primary: mgr1Raw,
-      manager_secondary: mgr2Raw,
-      ip_address: ipRaw !== '-' ? ipRaw : '172.16.42.' + (100 + storageIndex),
-      remote_tool: toolRaw !== '-' ? toolRaw : 'Web GUI',
-      model_name: modelRaw !== '-' ? modelRaw : 'Synology 공용 NAS',
-      os: osRaw !== '-' ? `${osRaw} ${osVerRaw}` : 'DSM 7.x',
-      cpu: cpuRaw,
-      ram: ramRaw,
-      gpu: gpuRaw,
-      ssd_1: ssd1Raw,
-      ssd_2: ssd2Raw,
-      hdd_1: hdd1Raw,
-      hdd_2: hdd2Raw,
-      hdd_3: hdd3Raw,
-      hdd_4: hdd4Raw,
-      monitoring: '비대상',
-      purchase_amount: '4500000',
-      purchase_vendor: '시놀로지 총판',
-      approval_document: '2022_스토리지_도입_' + storageIndex,
-      memo: '스토리지 서버 공유 자산',
-      asset_name: assetNameRaw,
-      mac_address: `00:1A:2B:3C:5F:${storageIndex.toString(16).toUpperCase().padStart(2, '0')}`,
-      hw_status: '운영중',
-      service_type: service_type,
-      is_inactive: is_inactive,
-      volume: hdd1Raw !== '-' ? hdd1Raw : '24TB',
-      cpu_usage: cpu_usage,
-      ram_usage: ram_usage,
-      network_traffic: network_traffic
-    };
-
-    parsedStorages.push(assetItem);
-    storageIndex++;
-  }
-
-  console.log(`Parsed Servers: ${parsedServers.length} units`);
-  console.log(`Parsed Storages: ${parsedStorages.length} units`);
-
-  // 3. 파일 다시 쓰기
-  const newDummyDataFileContent = `import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog } from './excelHandler';
-
-// 유틸리티: 랜덤 문자열
-const randomId = () => Math.random().toString(36).substring(2, 9);
-
-// 유틸리티: 랜덤 년월 (YYYY-MM) (최근 10년)
-const randomPurchaseYM = () => {
-  const currentYear = new Date().getFullYear();
-  const year = currentYear - Math.floor(Math.random() * 10);
-  const month = String(Math.floor(Math.random() * 12) + 1).padStart(2, '0');
-  return \`\${year}-\${month}\`;
-};
-
-// 유틸리티: 랜덤 YYYY-MM-DD
-const randomDateStr = (maxYearsAgo = 10) => {
-  const currentYear = new Date().getFullYear();
-  const year = currentYear - Math.floor(Math.random() * maxYearsAgo);
-  const month = String(Math.floor(Math.random() * 12) + 1).padStart(2, '0');
-  const day = String(Math.floor(Math.random() * 28) + 1).padStart(2, '0');
-  return \`\${year}-\${month}-\${day}\`;
-};
-
-const CORPS = ['한맥', '삼안', '장헌', '장헌산업', 'PTC', '바론', '한라'];
-const getRandomCorp = () => CORPS[Math.floor(Math.random() * CORPS.length)];
-
-// ────────────────────────────────────────────────────────
-// 1. SampleData_PC.xlsx 에서 파싱된 PC 데이터 주입
-// ────────────────────────────────────────────────────────
-export const dummyPCs: any[] = ${JSON.stringify(dummyPCs, null, 2)};
-
-// ────────────────────────────────────────────────────────
-// 2. 기타 자산 더미 데이터 (서버, 스토리지, 소프트웨어 등 - 엑셀 파싱 연동)
-// ────────────────────────────────────────────────────────
-
-export const dummyServers: any[] = ${JSON.stringify(parsedServers, null, 2)};
-
-export const dummyStorages: any[] = ${JSON.stringify(parsedStorages, null, 2)};
-
-export const dummyEquips: any[] = Array.from({ length: 12 }).map((_, i) => ({
-  id: randomId(),
-  asset_type: '전산비품',
-  purchase_corp: getRandomCorp(),
-  asset_code: \`EQ-24\${String(i).padStart(3, '0')}\`,
-  asset_name: \`네트워크 스위치 \${i+1}\`,
-  location: '전산실 랙 1',
-  manager_primary: '네트워크담당자',
-  ip_address: \`192.168.10.\${200 + i}\`,
-  mac_address: \`00:1A:2B:3C:51:\${String(i).padStart(2, '0')}\`,
-  os: 'Cisco IOS',
-  purchase_date: randomPurchaseYM(),
-  purchase_amount: '150000',
-  purchase_vendor: '다나와',
-  approval_document: \`2024_비품구매_\${i}\`,
-  memo: '사내망 확장용',
-  asset_purpose: '네트워크 분배'
-}));
-
-export const dummyMobiles: any[] = Array.from({ length: 15 }).map((_, i) => ({
-  id: randomId(),
-  asset_type: '모바일기기',
-  purchase_corp: getRandomCorp(),
-  asset_code: \`MOB-24\${String(i).padStart(3, '0')}\`,
-  asset_name: \`테스트용 단말기 \${i+1}\`,
-  location: '개발2팀',
-  manager_primary: '테스터',
-  os: i % 2 === 0 ? 'Android 14' : 'iOS 17',
-  purchase_date: randomPurchaseYM(),
-  purchase_amount: '900000',
-  purchase_vendor: '삼성전자/애플',
-  approval_document: \`2024_모바일구매_\${i}\`,
-  memo: '앱 호환성 테스트 전용',
-  asset_purpose: 'QA 테스트',
-  ip_address: \`192.168.1.\${10 + i}\`,
-  mac_address: \`00:1A:2B:3C:50:\${String(i).padStart(2, '0')}\`
-}));
-
-export const dummySubSw: any[] = Array.from({ length: 10 }).map((_, i) => ({
-  id: randomId(),
-  sw_type: '구독SW',
-  sw_field: '업무용/협업',
-  purchase_corp: getRandomCorp(),
-  current_dept: '전사',
-  product_name: \`Microsoft 365 E\${3 + (i%2)}\`,
-  purchase_date: randomDateStr(3),
-  start_date: randomDateStr(1),
-  expired_date: randomDateStr(0),
-  purchase_amount: '150000',
-  asset_count: 50 + i * 5,
-  email_account: \`admin\${i}@hmcorp.com\`,
-  purchase_vendor: '소프트웨어인라이프',
-  memo: '연간 계약 갱신 필요'
-}));
-
-export const dummyPermSw: any[] = Array.from({ length: 5 }).map((_, i) => ({
-  id: randomId(),
-  sw_type: '영구SW',
-  sw_field: '디자인/설계',
-  purchase_corp: getRandomCorp(),
-  current_dept: '디자인팀',
-  product_name: \`AutoCAD 202\${i%4}\`,
-  purchase_date: randomDateStr(5),
-  start_date: randomDateStr(5),
-  expired_date: '2099-12-31',
-  purchase_amount: '3000000',
-  asset_count: 2,
-  email_account: \`design\${i}@hmcorp.com\`,
-  purchase_vendor: '오토데스크 파트너',
-  memo: 'USB 동글키 보관중'
-}));
-
-export const dummyCloud: any[] = Array.from({ length: 5 }).map((_, i) => ({
-  id: randomId(),
-  sw_type: '클라우드',
-  asset_mfr: i % 2 === 0 ? 'AWS' : 'GCP',
-  purchase_corp: getRandomCorp(),
-  current_dept: '개발팀',
-  product_name: \`컴퓨팅 인스턴스 Type \${i}\`,
-  email_account: \`awsadmin\${i}@hmcorp.com\`,
-  purchase_method: '법인카드(신한 1234)',
-  purchase_amount: \`\${500000 + i * 100000}\`,
-  asset_count: 1,
-  purchase_vendor: 'AWS/GCP',
-  memo: '환율 변동에 따라 매월 상이함'
-}));
-
-export const dummyDomain: any[] = Array.from({ length: 5 }).map((_, i) => ({
-  id: randomId(),
-  asset_type: '도메인',
-  purchase_corp: getRandomCorp(),
-  product_name: \`사내 운영 서비스 \${i+1}\`,
-  domain_address: \`service\${i+1}.hmcorp.com\`,
-  start_date: randomDateStr(4),
-  expired_date: randomDateStr(0),
-  purchase_amount: '22000',
-  manager_primary: '인프라팀장',
-  manager_secondary: '인프라담당자',
-  memo: '가비아 자동갱신 설정 완료'
-}));
-
-export const dummySwUsers: any[] = Array.from({ length: 15 }).map((_, i) => ({
-  id: randomId(),
-  sw_id: dummySubSw[0]?.id || randomId(),
-  purchase_corp: getRandomCorp(),
-  current_dept: '경영지원팀',
-  user_current: \`홍길동\${i}\`,
-  memo: \`SW신청서_2400\${i}\`
-}));
-
-export const dummyLogs: any[] = Array.from({ length: 10 }).map((_, i) => ({
-  id: randomId(),
-  assetId: dummyPCs[0]?.id || randomId(),
-  date: randomDateStr(1),
-  details: i % 2 === 0 ? '메모리 추가 증설 (16GB -> 32GB)' : '디스플레이 파손 수리',
-  user: 'IT지원팀',
-  cost: i % 2 === 0 ? 80000 : 150000,
-}));
-`;
-
-  fs.writeFileSync(dummyDataPath, newDummyDataFileContent, 'utf-8');
-  console.log('✅ dummyData.ts file updated successfully with SVR dataset.');
-} catch (e) {
-  console.error('❌ Failed to update dummy data:', e);
-}

server.js

@@ -675,16 +675,41 @@ app.delete('/api/system-users/:id', async (req, res) => {
   }
 });
 
-app.post('/api/maps/save', (req, res) => {
+app.post('/api/maps/save', async (req, res) => {
+  let connection;
   try {
     const { path, boxes } = req.body;
     if (!path) return res.status(400).json({ error: 'Path is required' });
-    let config = {};
+
-    if (fs.existsSync('map_config.json')) config = JSON.parse(fs.readFileSync('map_config.json', 'utf8') || '{}');
+    // 1. Get old config to track movements
-    config[path] = boxes;
+    let oldConfig = {};
-    fs.writeFileSync('map_config.json', JSON.stringify(config, null, 2));
+    if (fs.existsSync('map_config.json')) {
-    res.json({ success: true });
+      oldConfig = JSON.parse(fs.readFileSync('map_config.json', 'utf8') || '{}');
-  } catch (err) { handleError(res, err, 'SAVE MAPS'); }
+    }
+    const oldBoxes = oldConfig[path] || [];
+
+    // 2. Save new config to file
+    oldConfig[path] = boxes;
+    fs.writeFileSync('map_config.json', JSON.stringify(oldConfig, null, 2));
+
+    // 3. Sync Database Assets (asset_location table)
+    connection = await pool.getConnection();
+    for (const box of boxes) {
+      if (box.asset_id) {
+        console.log(`Syncing asset ${box.asset_id} to new position: [${box.x}, ${box.y}]`);
+        await connection.query(
+          'UPDATE asset_location SET loc_x = ?, loc_y = ? WHERE asset_id = ? AND is_active = 1',
+          [box.x, box.y, box.asset_id]
+        );
+      }
+    }
+
+    res.json({ success: true, message: 'Map and Database synced successfully' });
+  } catch (err) { 
+    handleError(res, err, 'SAVE MAPS SYNC'); 
+  } finally {
+    if (connection) connection.release();
+  }
 });
 
 // 7. File Upload API (Base64)

src/components/Guide.ts

@@ -1,5 +1,6 @@
 import { createIcons, BookOpen, X, ChevronDown, ChevronRight, RefreshCw } from 'lucide';
 import { state } from '../core/state';
+import './guide.css';
 
 // ─── 자산별 가이드 콘텐츠 정의 (SW_Table 브랜치 전체 복구) ───
 interface GuideTabConfig {

src/components/Modal/BaseModal.ts

@@ -1,5 +1,6 @@
 import { createIcons, X } from 'lucide';
 import { setEditLock } from './ModalUtils';
+import './modal.css';
 
 /**
  * 모든 모달의 공통 기능을 관리하는 베이스 추상 클래스입니다.
@@ -9,6 +10,7 @@ export abstract class BaseModal {
   protected title: string;
   protected currentAsset: any | null = null;
   protected isEditMode: boolean = false;
+  protected currentMode: 'view' | 'edit' | 'add' = 'view';
   protected modalEl: HTMLElement | null = null;
   protected formEl: HTMLFormElement | null = null;
 
@@ -53,16 +55,23 @@ export abstract class BaseModal {
    */
   public open(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
     this.currentAsset = asset;
+    this.currentMode = mode;
     this.isEditMode = (mode === 'add' || mode === 'edit');
     
     // 폼 초기화 추가
     if (this.formEl) this.formEl.reset();
 
-    this.setEditLockMode(mode);
+    // fillFormData를 먼저 호출하여 동적 요소들을 생성한 후 잠금 처리
     this.fillFormData(asset);
+    this.setEditLockMode(mode);
     
     if (this.modalEl) {
       this.modalEl.classList.remove('hidden');
+      const content = this.modalEl.querySelector('.modal-content');
+      if (content) {
+        if (mode === 'view') content.classList.add('is-view-mode');
+        else content.classList.remove('is-view-mode');
+      }
     }
     
     this.onAfterOpen(asset, mode);

src/components/Modal/DomainModal.ts

@@ -197,9 +197,13 @@ class DomainAssetModal extends BaseModal {
   private renderHistory(assetId: string) {
     const container = document.getElementById('domain-history-list');
     if (!container) return;
-    const logs = (state.masterData.logs || []).filter(l => l.assetId === assetId);
+
-    if (logs.length === 0) { container.innerHTML = '<div class="empty-history">이력이 없습니다.</div>'; return; }
+    const logs = (state.masterData.logs || []).filter(l => l.asset_id === assetId);
-    container.innerHTML = logs.map(l => `<div class="history-item"><div class="history-date">${l.date}</div><div class="history-user">${l.user}</div><div class="history-details">${l.details}</div></div>`).join('');
+    if (logs.length === 0) {
+      container.innerHTML = '<div style="color:var(--mute); padding:1rem; text-align:center;">이력이 없습니다.</div>';
+    } else {
+      container.innerHTML = logs.map(l => `<div class="history-item"><div class="history-date">${l.log_date || ''}</div><div class="history-user">${l.log_user || '시스템'}</div><div class="history-details">${l.details}</div></div>`).join('');
+    }
   }
 }
 

src/components/Modal/HWModal.ts

@@ -240,6 +240,7 @@ class HwAssetModal extends BaseModal {
         <div class="modal-footer">
           <button id="btn-delete-hw-asset" class="btn btn-outline btn-danger">삭제</button>
           <div class="footer-actions">
+            <button id="btn-revert-hw-edit" class="btn btn-outline hidden">수정 취소</button>
             <button id="btn-cancel-hw-modal" class="btn btn-outline">닫기</button>
             <button id="btn-save-hw-asset" class="btn btn-primary">저장</button>
           </div>
@@ -370,6 +371,12 @@ class HwAssetModal extends BaseModal {
     saveBtn.addEventListener('click', async () => {
       if (!this.currentAsset) return;
 
+      // [추가] 조회 모드인 경우 수정 모드로 전환
+      if (!this.isEditMode) {
+        this.open(this.currentAsset, 'edit');
+        return;
+      }
+
       // 동적 볼륨 데이터 수집
       const vols: any[] = [];
       document.querySelectorAll('#hw-volume-container .volume-row').forEach((row, idx) => {
@@ -874,9 +881,9 @@ class HwAssetModal extends BaseModal {
   private renderHistory(assetId: string) {
     const container = document.getElementById('hw-history-list');
     if (!container) return;
-    const logs = (state.masterData.logs || []).filter(l => l.asset_id === assetId || l.assetId === assetId);
+    const logs = (state.masterData.logs || []).filter(l => l.asset_id === assetId);
     if (logs.length === 0) { container.innerHTML = '<div class="empty-history">기록된 변동 이력이 없습니다.</div>'; return; }
-    container.innerHTML = logs.map(l => `<div class="history-item"><div class="history-date">${l.log_date || l.date || ''}</div><div class="history-user">${l.log_user || l.user || '시스템'}</div><div class="history-details">${l.details}</div></div>`).join('');
+    container.innerHTML = logs.map(l => `<div class="history-item"><div class="history-date">${l.log_date || ''}</div><div class="history-user">${l.log_user || '시스템'}</div><div class="history-details">${l.details}</div></div>`).join('');
   }
 
   private getCategoryKey(asset: any): string {

src/components/Modal/JobSpecModal.ts

@@ -10,11 +10,64 @@ class JobSpecModal extends BaseModal {
   }
 
   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">
+        <div class="modal-content narrow">
+          <div class="modal-header">
+            <div class="header-left">
+              <h2 id="job-spec-modal-title" class="modal-title">\${this.title}</h2>
+              <div id="job-spec-header-identity" class="header-identity"></div>
+            </div>
+            <button id="btn-close-job-spec-modal" class="btn-icon" aria-label="닫기">&times;</button>
+          </div>
+          <div class="modal-body">
+            <form id="job-spec-asset-form" class="grid-form vertical-form">
+              <input type="hidden" id="job-spec-id" name="id" />
+              
+              <div class="form-group">
+                <label>직무명</label>
+                <input type="text" id="job-spec-job-name" name="job_name" placeholder="예: BIM 모델러, 개발자, 엔지니어" required />
+              </div>
+
+              <div class="form-group relative">
+                <label>권장 CPU 사양</label>
+                <input type="text" id="job-spec-cpu-standard" name="cpu_standard" placeholder="CPU 검색..." required autocomplete="off" />
+                <div id="job-spec-cpu-autocomplete" class="autocomplete-list hidden"></div>
+              </div>
+
+              <div class="form-group relative">
+                <label>권장 RAM 사양</label>
+                <input type="text" id="job-spec-ram-standard" name="ram_standard" placeholder="RAM 검색..." required autocomplete="off" />
+                <div id="job-spec-ram-autocomplete" class="autocomplete-list hidden"></div>
+              </div>
+
+              <div class="form-group relative">
+                <label>권장 GPU 사양</label>
+                <input type="text" id="job-spec-gpu-standard" name="gpu_standard" placeholder="GPU 검색..." required autocomplete="off" />
+                <div id="job-spec-gpu-autocomplete" class="autocomplete-list hidden"></div>
+              </div>
+
+              <div class="form-group">
+                <label>성능 기준 점수 (이상, 자동 계산됨)</label>
+                <input type="number" id="job-spec-min-score" name="min_score" placeholder="자동 계산 대기..." required readonly />
+              </div>
+
+              <div class="form-group">
+                <label>비고 (메모)</label>
+                <textarea id="job-spec-remarks" name="remarks" placeholder="기타 필요 사양 및 안내 사항" rows="3"></textarea>
+              </div>
+            </form>
+          </div>
+          <div class="modal-footer">
+            <button id="btn-delete-job-spec-asset" class="btn btn-outline btn-danger">삭제</button>
+            <div class="footer-actions">
+              <button id="btn-revert-job-spec-edit" class="btn btn-outline hidden">수정 취소</button>
+              <button id="btn-cancel-job-spec-modal" class="btn btn-outline">닫기</button>
+              <button id="btn-save-job-spec-asset" class="btn btn-primary">수정</button>
+            </div>
+          </div>
+        </div>
+      </div>
       <style>
         .autocomplete-list {
           position: absolute;
@@ -44,63 +97,7 @@ class JobSpecModal extends BaseModal {
           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>
     `;
   }
 
@@ -239,6 +236,7 @@ class JobSpecModal extends BaseModal {
     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 || '');
+    this.updateHeaderIdentity(asset);
   }
 
   protected onAfterOpen(asset: any, mode: string): void {
@@ -257,19 +255,32 @@ class JobSpecModal extends BaseModal {
     
     deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
 
-    if (mode === 'add') {
+    if (mode === 'add' || mode === 'edit') {
-      this.setEditLockMode('edit');
+      saveBtn.textContent = (mode === 'add') ? '등록' : '저장';
-      this.isEditMode = true;
-      saveBtn.textContent = '등록';
       saveBtn.style.display = 'block';
     } else {
-      this.setEditLockMode('view');
-      this.isEditMode = false;
       saveBtn.textContent = '수정';
       saveBtn.style.display = 'block';
     }
+    this.updateHeaderIdentity(asset);
+  }
 
-    this.updateMinScore();
+  private updateHeaderIdentity(asset: any) {
+    const container = document.getElementById('job-spec-header-identity');
+    if (!container) return;
+    
+    if (this.currentMode === 'add') {
+      container.innerHTML = '<span class="badge badge-primary">신규 등록</span>';
+      return;
+    }
+
+    const jobName = asset.job_name || '';
+    const minScore = asset.min_score || 0;
+
+    container.innerHTML = `
+      <span class="asset-code-title">${jobName}</span>
+      <span class="service-type-badge">${minScore}점 기준</span>
+    `;
   }
 }
 

src/components/Modal/ModalUtils.ts

@@ -110,42 +110,43 @@ export function setEditLock(
   const generateBtn = options.generateBtnId ? document.getElementById(options.generateBtnId) : null;
   const addLogBtn = options.addLogBtnId ? document.getElementById(options.addLogBtnId) : null;
 
-  if (!form || !saveBtn || !revertBtn) return;
+  if (!form) return;
 
-  if (mode === 'add' || mode === 'edit') {
+  const isEdit = (mode === 'add' || mode === 'edit');
+
+  if (isEdit) {
     // 편집 모드 활성화
     form.classList.remove('is-view-mode');
     form.classList.add('is-edit-mode');
-    saveBtn.textContent = '저장';
+    if (saveBtn) saveBtn.textContent = (mode === 'add' ? '등록' : '저장');
-    revertBtn.classList.toggle('hidden', mode === 'add'); 
+    if (revertBtn) revertBtn.classList.toggle('hidden', mode === 'add'); 
     
     // 모든 필드 활성화
     const inputs = form.querySelectorAll('input, select, textarea');
     inputs.forEach(input => {
       const el = input as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-      if (el.name !== 'asset_code' && !el.id.includes('asset-id')) { // 자산번호 등 일부는 편집 모드에서도 잠금 유지
+      // 자산번호 및 ID 필드는 편집 모드에서도 잠금 유지
+      if (el.name !== 'asset_code' && !el.id.includes('asset-id') && !el.id.includes('id-hidden')) {
         el.disabled = false;
         if ('readOnly' in el) (el as HTMLInputElement).readOnly = false;
       }
     });
 
-    // 번호 생성 버튼은 '추가(add)' 시에만 노출
+    if (generateBtn) generateBtn.style.display = (mode === 'add' ? 'flex' : 'none');
-    if (generateBtn) {
-      generateBtn.style.display = mode === 'add' ? 'flex' : 'none';
-    }
     if (addLogBtn) addLogBtn.style.display = 'flex';
   } else {
     // 조회 모드 (잠금)
     form.classList.remove('is-edit-mode');
     form.classList.add('is-view-mode');
-    saveBtn.textContent = '수정';
+    if (saveBtn) saveBtn.textContent = '수정';
-    revertBtn.classList.add('hidden');
+    if (revertBtn) revertBtn.classList.add('hidden');
     
     // 모든 필드 잠금
     const inputs = form.querySelectorAll('input, select, textarea');
     inputs.forEach(input => {
       const el = input as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-      el.disabled = true; // select의 경우 disabled 필요
+      el.disabled = true;
+      if ('readOnly' in el) (el as HTMLInputElement).readOnly = true;
     });
 
     if (generateBtn) generateBtn.style.display = 'none';

src/components/Modal/PartsMasterModal.ts

@@ -137,14 +137,10 @@ class PartsMasterModal extends BaseModal {
 
     deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
 
-    if (mode === 'add') {
+    if (mode === 'add' || mode === 'edit') {
-      this.setEditLockMode('edit');
+      saveBtn.textContent = (mode === 'add') ? '등록' : '저장';
-      this.isEditMode = true;
-      saveBtn.textContent = '등록';
       saveBtn.style.display = 'block';
     } else {
-      this.setEditLockMode('view');
-      this.isEditMode = false;
       saveBtn.textContent = '수정';
       saveBtn.style.display = 'block';
     }

src/components/Modal/SWModal.ts

@@ -269,7 +269,7 @@ class SwAssetModal extends BaseModal {
       const log = { assetId: this.currentAsset.id, date, details: `[계약갱신] ${note} (${start} ~ ${end}, 비용: ${cost})`, user: '관리자' };
       await fetch(`${API_BASE_URL}/api/asset/history/batch`, {
           method: 'POST',
-          headers: 'application/json',
+          headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify([...state.masterData.logs, log])
       });
 
@@ -387,9 +387,9 @@ class SwAssetModal extends BaseModal {
   private renderHistory(swId: string) {
     const container = document.getElementById('sw-history-list');
     if (!container) return;
-    const logs = (state.masterData.logs || []).filter(l => l.assetId === swId);
+    const logs = (state.masterData.logs || []).filter(l => l.asset_id === swId);
     if (logs.length === 0) { container.innerHTML = '<div class="empty-history">수정 이력이 없습니다.</div>'; return; }
-    container.innerHTML = logs.map(l => `<div class="history-item"><div class="history-date">${l.date}</div><div class="history-user">${l.user}</div><div class="history-details">${l.details}</div></div>`).join('');
+    container.innerHTML = logs.map(l => `<div class="history-item"><div class="history-date">${l.log_date || ''}</div><div class="history-user">${l.log_user || '시스템'}</div><div class="history-details">${l.details}</div></div>`).join('');
   }
 }
 

src/components/Modal/UserModal.ts

@@ -144,14 +144,10 @@ class UserModal extends BaseModal {
 
     deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
 
-    if (mode === 'add') {
+    if (mode === 'add' || mode === 'edit') {
-      this.setEditLockMode('edit');
+      saveBtn.textContent = mode === 'add' ? '등록' : '저장';
-      this.isEditMode = true;
-      saveBtn.textContent = '등록';
       saveBtn.style.display = 'block';
     } else {
-      this.setEditLockMode('view');
-      this.isEditMode = false;
       saveBtn.textContent = '수정';
       saveBtn.style.display = 'block';
     }

src/components/Modal/modal.css

@@ -162,7 +162,7 @@
   display: flex;
   align-items: center;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: -0.02em;
 }
 
 .form-section-title:first-child {

src/core/excelHandler.ts

@@ -1,167 +1,7 @@
-import * as XLSX from 'xlsx';
-import { ASSET_SCHEMA } from './schema';
-import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog, MasterAssetData } from './types';
-
 /**
- * ITAM 엑셀 핸들러 (Database Synchronized Edition)
+ * ITAM 엑셀 핸들러 (지정 날짜 포맷팅 유틸리티)
- * 데이터베이스 실제 스키마 컬럼과 엑셀 헤더를 1:1로 일치시킵니다.
  */
 
-/**
- * DB 컬럼 순서 및 구성 정의 (실제 DB 스키마 dump 기준)
- */
-const DB_MAPPING: Record<string, (keyof typeof ASSET_SCHEMA)[]> = {
-  pc: [
-    'ASSET_TYPE', 'HW_STATUS', 'CURRENT_DEPT', 'PREV_DEPT', 'USER_POSITION',
-    'EMP_NO', 'CURRENT_USER',
-    'CPU', 'RAM', 'GPU', 'SSD1', 'SSD2', 'HDD1', 'HDD2', 'HDD3', 'HDD4', 'MAC_ADDR',
-    'MANAGER_MAIN', 'MANAGER_SUB', 'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT',
-    'PURCHASE_VENDOR', 'MEMO', 'MAINBOARD'
-  ],
-  server: [
-    'ASSET_TYPE', 'MODEL_NAME', 'ASSET_PURPOSE', 'HW_STATUS',
-    'CURRENT_DEPT', 'CPU', 'RAM', 'GPU', 'SSD1', 'SSD2', 'HDD1', 'HDD2', 'IP_ADDR',
-    'REMOTE_TOOL', 'REMOTE_ID', 'REMOTE_PW', 'LOCATION', 'LOC_DETAIL', 'MANAGER_MAIN',
-    'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'PURCHASE_VENDOR',
-    'MEMO', 'PREV_DEPT', 'MANAGER_SUB', 'IP_ADDR2', 'MONITORING', 'HDD3', 'HDD4', 'EMP_NO'
-  ],
-  storage: [
-    'ASSET_TYPE', 'HW_STATUS', 'VOLUME', 'MODEL_NAME',
-    'EMP_NO', 'CURRENT_USER',
-    'SERIAL_NUM', 'LOCATION', 'LOC_DETAIL', 'MANAGER_MAIN', 'MANAGER_SUB',
-    'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'PURCHASE_VENDOR',
-    'MEMO', 'CURRENT_DEPT', 'PREV_DEPT'
-  ],
-  network: [
-    'PURCHASE_CORP', 'HW_STATUS', 'CURRENT_DEPT', 'PREV_DEPT',
-    'EMP_NO', 'CURRENT_USER',
-    'ASSET_TYPE', 'ASSET_MFR', 'MODEL_NAME', 'LOCATION', 'LOC_DETAIL', 'MANAGER_MAIN',
-    'MANAGER_SUB', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'PURCHASE_VENDOR', 'MEMO'
-  ],
-  survey: [ // asset_survey (공간정보장비)
-    'HW_STATUS', 'ASSET_NAME', 'LOCATION', 'LOC_DETAIL',
-    'EMP_NO', 'CURRENT_USER',
-    'MANAGER_MAIN', 'MANAGER_SUB', 'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT',
-    'PURCHASE_VENDOR', 'MEMO'
-  ],
-  pcParts: [
-    'HW_STATUS', 'ASSET_TYPE', 'ASSET_MFR', 'MODEL_NAME', 'VOLUME',
-    'EMP_NO', 'CURRENT_USER',
-    'MONITOR_INCH', 'LOCATION', 'LOC_DETAIL', 'PURCHASE_CORP', 'PURCHASE_DATE',
-    'PURCHASE_AMOUNT', 'PURCHASE_VENDOR', 'MEMO'
-  ],
-  equipment: [
-    'HW_STATUS', 'ASSET_STATUS', 'ASSET_TYPE', 'ASSET_MFR',
-    'EMP_NO', 'CURRENT_USER',
-    'MODEL_NAME', 'LOCATION', 'LOC_DETAIL', 'MANAGER_MAIN', 'MANAGER_SUB',
-    'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'PURCHASE_VENDOR',
-    'MEMO'
-  ],
-  officeSupplies: [ // asset_office_supplies (시설자산)
-    'HW_STATUS', 'ASSET_TYPE', 'ASSET_MFR', 'MODEL_NAME',
-    'EMP_NO', 'CURRENT_USER',
-    'ASSET_COUNT', 'LOCATION', 'LOC_DETAIL', 'MANAGER_MAIN', 'MANAGER_SUB',
-    'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'PURCHASE_VENDOR',
-    'MEMO'
-  ],
-  swInternal: [
-    'SW_FIELD', 'DEV_OBJ', 'SW_STATUS', 'SW_TYPE', 'MANAGER_MAIN',
-    'DEV_MGR', 'PLANNING_MGR', 'SALES_MGR', 'PURCHASE_CORP', 'MEMO'
-  ],
-  swExternal: [
-    'PRODUCT_NAME', 'SW_TYPE', 'SW_STATUS', 'SW_FIELD', 'CURRENT_DEPT',
-    'PREV_DEPT', 'MANAGER_MAIN', 'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT',
-    'PURCHASE_VENDOR', 'EMAIL_ACCOUNT', 'MEMO', 'EMP_NO', 'CURRENT_USER'
-  ],
-  cloud: [
-    'ASSET_PURPOSE', 'PURCHASE_METHOD', 'PURCHASE_VENDOR', 'PURCHASE_CORP',
-    'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'MANAGER_MAIN', 'MANAGER_SUB',
-    'MEMO', 'SW_ID', 'SW_PW'
-  ],
-  domain: [
-    'DOMAIN_ADDR', 'ASSET_PURPOSE', 'PURCHASE_VENDOR', 'ASSET_TYPE',
-    'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'MANAGER_MAIN', 'MANAGER_SUB',
-    'MEMO'
-  ],
-  cost: [
-    'ASSET_TYPE', 'ASSET_PURPOSE', 'LOCATION', 'LOC_DETAIL', 'MANAGER_MAIN',
-    'MANAGER_SUB', 'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'PURCHASE_VENDOR',
-    'EMAIL_ACCOUNT', 'EMAIL_PW', 'MEMO', 'EMP_NO', 'CURRENT_USER'
-  ],
-  vip: [ // asset_vip (선물)
-    'ASSET_NAME', 'MODEL_NAME', 'LOCATION', 'LOC_DETAIL',
-    'PURCHASE_CORP', 'PURCHASE_DATE', 'EXPIRED_DATE', 'PURCHASE_VENDOR', 'MEMO'
-  ]
-};
-
-export function downloadTemplate() {
-  const wb = XLSX.utils.book_new();
-  
-  const tabConfigs = [
-    { name: 'PC', key: 'pc' },
-    { name: '서버', key: 'server' },
-    { name: '스토리지', key: 'storage' },
-    { name: '공간정보장비', key: 'survey' },
-    { name: 'PC부품', key: 'pcParts' },
-    { name: '네트워크', key: 'network' },
-    { name: '업무지원장비', key: 'equipment' },
-    { name: '내부SW', key: 'swInternal' },
-    { name: '외부SW', key: 'swExternal' },
-    { name: '클라우드', key: 'cloud' },
-    { name: '도메인', key: 'domain' },
-    { name: '비용관리', key: 'cost' },
-    { name: '선물', key: 'vip' },
-    { name: '시설자산', key: 'officeSupplies' }
-  ];
-
-  tabConfigs.forEach(config => {
-    const keys = DB_MAPPING[config.key];
-    const headers = keys.map(k => ASSET_SCHEMA[k].ui);
-    const ws = XLSX.utils.aoa_to_sheet([headers]);
-    ws['!cols'] = Array(headers.length).fill({ wch: 20 });
-    XLSX.utils.book_append_sheet(wb, ws, config.name);
-  });
-
-  XLSX.writeFile(wb, 'itam_template_db_aligned.xlsx');
-}
-
-export function exportToExcel(masterData: MasterAssetData) {
-  const wb = XLSX.utils.book_new();
-  
-  const exportConfigs = [
-    { name: 'PC', list: masterData.pc, key: 'pc' },
-    { name: '서버', list: masterData.server, key: 'server' },
-    { name: '스토리지', list: masterData.storage, key: 'storage' },
-    { name: '공간정보장비', list: masterData.survey || [], key: 'survey' },
-    { name: 'PC부품', list: masterData.pcParts || [], key: 'pcParts' },
-    { name: '네트워크', list: masterData.network || [], key: 'network' },
-    { name: '업무지원장비', list: masterData.equipment || [], key: 'equipment' },
-    { name: '내부SW', list: masterData.swInternal, key: 'swInternal' },
-    { name: '외부SW', list: masterData.swExternal, key: 'swExternal' },
-    { name: '클라우드', list: masterData.cloud || [], key: 'cloud' },
-    { name: '도메인', list: masterData.domain || [], key: 'domain' },
-    { name: '비용관리', list: masterData.cost || [], key: 'cost' },
-    { name: '선물', list: masterData.vip || [], key: 'vip' },
-    { name: '시설자산', list: masterData.officeSupplies || [], key: 'officeSupplies' }
-  ];
-
-  exportConfigs.forEach(config => {
-    const schemaKeys = DB_MAPPING[config.key];
-    const headers = schemaKeys.map(k => ASSET_SCHEMA[k].ui);
-    const rows = config.list.map(asset => 
-      schemaKeys.map(k => {
-        const dbField = ASSET_SCHEMA[k].db;
-        return asset[dbField] || asset[ASSET_SCHEMA[k].key] || '';
-      })
-    );
-    
-    const ws = XLSX.utils.aoa_to_sheet([headers, ...rows]);
-    XLSX.utils.book_append_sheet(wb, ws, config.name);
-  });
-
-  XLSX.writeFile(wb, `itam_export_${new Date().toISOString().split('T')[0]}.xlsx`);
-}
-
 export function formatExcelDate(val: any): string {
   if (!val) return '';
   if (typeof val === 'number') {
@@ -173,54 +13,3 @@ export function formatExcelDate(val: any): string {
   }
   return String(val);
 }
-
-export async function parseExcel(file: File): Promise<any> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      try {
-        const workbook = XLSX.read(e.target?.result, { type: 'array' });
-        const parsedData: any = {};
-        
-        workbook.SheetNames.forEach(sheetName => {
-          const ws = workbook.Sheets[sheetName];
-          const rows = XLSX.utils.sheet_to_json(ws, { defval: "" }) as any[];
-          const list: any[] = [];
-
-          rows.forEach(r => {
-            const data: any = { id: Math.random().toString(36).substring(2, 9) };
-            
-            // Set default category based on sheet name
-            data['category'] = sheetName;
-            
-            Object.keys(r).forEach(label => {
-              const schemaEntry = Object.values(ASSET_SCHEMA).find(s => s.ui === label);
-              const key = schemaEntry ? schemaEntry.db : label;
-              let val = r[label];
-              
-              if (label.includes('일자') || label.includes('연월') || label.includes('만료일') || label.includes('시작일')) {
-                val = formatExcelDate(val);
-              }
-              data[key] = val;
-            });
-
-            list.push(data);
-          });
-          
-          // Sheet Name Mapping back to state keys
-          const nameMap: Record<string, string> = {
-            'PC': 'pc', '서버': 'server', '스토리지': 'storage', '공간정보장비': 'survey',
-            'PC부품': 'pcParts', '네트워크': 'network', '업무지원장비': 'equipment',
-            '내부SW': 'swInternal', '외부SW': 'swExternal', '클라우드': 'cloud',
-            '도메인': 'domain', '비용관리': 'cost', '선물': 'vip', '시설자산': 'officeSupplies'
-          };
-          
-          const stateKey = nameMap[sheetName] || sheetName;
-          if (list.length > 0) parsedData[stateKey] = list;
-        });
-        resolve(parsedData);
-      } catch (err) { reject(err); }
-    };
-    reader.readAsArrayBuffer(file);
-  });
-}

src/core/filterHandler.ts

@@ -18,6 +18,7 @@ export interface FilterOptions {
   extraHTML?: string;
   onFilterChange: (filters: any) => void;
   initialFilters?: any;
+  fullList?: any[]; // For populating dynamic filters
 }
 
 /**
@@ -38,11 +39,18 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
     showStatus = false,
     extraHTML = '', 
     onFilterChange,
-    initialFilters = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '', status: '' }
+    initialFilters = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '', status: '' },
+    fullList = []
   } = options;
 
   container.classList.add('search-bar'); // Restored class
 
+  // Helper to get unique sorted values
+  const getUnique = (key: keyof typeof ASSET_SCHEMA | string) => {
+    const fieldKey = (ASSET_SCHEMA as any)[key]?.key || key;
+    return Array.from(new Set(fullList.map(item => item[fieldKey] || item[(ASSET_SCHEMA as any)[key]?.db]).filter(Boolean))).sort();
+  };
+
   container.innerHTML = `
     <div class="search-item flex-1">
       <label>${keywordLabel}</label>
@@ -53,6 +61,7 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
       <label>${ASSET_SCHEMA.ASSET_TYPE.ui}</label>
       <select id="filter-type">
         <option value="">전체 유형</option>
+        ${getUnique('ASSET_TYPE').map(v => `<option value="${v}" ${initialFilters.type === v ? 'selected' : ''}>${v}</option>`).join('')}
       </select>
     </div>` : ''}
     ${showStatus ? `
@@ -60,6 +69,7 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
       <label>${ASSET_SCHEMA.HW_STATUS.ui}</label>
       <select id="filter-status">
         <option value="">전체 상태</option>
+        ${getUnique('HW_STATUS').map(v => `<option value="${v}" ${initialFilters.status === v ? 'selected' : ''}>${v}</option>`).join('')}
       </select>
     </div>` : ''}
     ${showField ? `
@@ -81,12 +91,18 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
     ${showLoc ? `
     <div class="search-item">
       <label>${ASSET_SCHEMA.LOCATION.ui}</label>
-      <select id="filter-loc"><option value="">전체 위치</option></select>
+      <select id="filter-loc">
+        <option value="">전체 위치</option>
+        ${getUnique('LOCATION').map(v => `<option value="${v}" ${initialFilters.loc === v ? 'selected' : ''}>${v}</option>`).join('')}
+      </select>
     </div>` : ''}
     ${showDept ? `
     <div class="search-item">
       <label>${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
-      <select id="filter-dept"><option value="">전체 조직</option></select>
+      <select id="filter-dept">
+        <option value="">전체 조직</option>
+        ${getUnique('CURRENT_DEPT').map(v => `<option value="${v}" ${initialFilters.dept === v ? 'selected' : ''}>${v}</option>`).join('')}
+      </select>
     </div>` : ''}
     ${extraHTML}
     <button id="btn-reset-filters" class="btn btn-outline btn-reset">

src/core/state.ts

@@ -1,6 +1,5 @@
 import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog, MasterAssetData, SystemUser } from './types';
 import { API_BASE_URL } from './utils';
-import { dummyPCs, dummyServers, dummyStorages, dummyEquips, dummySubSw, dummyPermSw, dummyCloud, dummyDomain, dummySwUsers, dummyLogs } from './dummyData';
 
 // --- State Definitions ---
 export interface AppState {
@@ -30,11 +29,12 @@ export const state: AppState = {
     hw: [], sw: [],
     swUsers: [], logs: [],
     jobSpecs: [],
-    subSw: [],
+    mobile: []
-    permSw: []
   }
 };
 
+(window as any).__itam_state = state;
+
 /**
  * 통합 V2 스키마에 맞춘 데이터 로드
  */
@@ -61,9 +61,9 @@ export async function loadMasterDataFromDB() {
     };
 
     // Mapping for backward compatibility
-    state.masterData.equip = state.masterData.equipment;
+    (state.masterData as any).equip = state.masterData.equipment;
-    state.masterData.subSw = state.masterData.swExternal;
+    (state.masterData as any).subSw = state.masterData.swExternal;
-    state.masterData.permSw = state.masterData.swInternal;
+    (state.masterData as any).permSw = state.masterData.swInternal;
 
     // 하드웨어 통합 (대시보드 호환용)
     state.masterData.hw = [

src/core/types.ts

@@ -147,6 +147,8 @@ export interface MasterAssetData {
   vip: HardwareAsset[];
   swUsers: SWUser[];
   logs: HardwareLog[];
+  jobSpecs?: any[];
+  mobile?: HardwareAsset[];
   // Integrated arrays
   hw: HardwareAsset[];
   sw: SoftwareAsset[];

src/main.ts

@@ -1,3 +1,5 @@
+import './styles/common.css';
+import './styles/login.css';
 import { state, loadMasterDataFromDB, saveAsset } from './core/state';
 import { renderNavigation } from './components/Navigation';
 import { renderDashboard } from './views/DashboardView';
@@ -30,19 +32,17 @@ function refreshView(tab?: string) {
     return;
   }
 
-  // 서버 탭이 아닐 경우 '자산현황(위치)' 뷰 진입 방지 및 강제 리스트 모드 전환
+  // 서버 탭이 아닐 경우에는 state.viewMode가 location이더라도 강제로 목록(list) 뷰를 그리도록 함
-  if (activeTab !== '서버' && state.viewMode === 'location') {
+  // (state.viewMode의 원래 상태는 보존하여, 서버 탭 복귀 시 최근 보던 모드를 유지함)
-    state.viewMode = 'list';
-  }
-
   const isServerTab = activeTab === '서버';
+  const effectiveViewMode = isServerTab ? state.viewMode : 'list';
   
   mainContent.innerHTML = `
     <div id="view-body" class="view-container"></div>
   `;
 
   const viewBody = document.getElementById('view-body')!;
-  if (state.viewMode === 'location') {
+  if (effectiveViewMode === 'location') {
     renderLocationView(viewBody);
   } else {
     renderSWTable(viewBody);    // 리스트 형식
@@ -86,6 +86,7 @@ function initApp() {
     loadMasterDataFromDB().then((success) => {
       if (success) {
         refreshView();
+        initRoleSwitcher(); // [추가] 역할 전환 토글 초기화
       }
     });
   } catch (e) { console.error('❌ Initialization failed:', e); }
@@ -155,7 +156,6 @@ function initRoleSwitcher() {
   if (!checkbox || !userLabel || !adminLabel) return;
 
   checkbox.addEventListener('change', () => {
-    const mainContent = document.getElementById('main-content')!;
     if (checkbox.checked) {
       state.currentUserRole = 'admin';
       userLabel.classList.remove('active');
@@ -165,14 +165,6 @@ function initRoleSwitcher() {
       // 관리자 모드 전환 시 대시보드로 이동
       state.activeCategory = 'hw';
       state.activeSubTab = '대시보드';
-      refreshView();
-      renderNavigation((tab) => {
-        if (tab === '대시보드') {
-          renderDashboard(mainContent);
-        } else {
-          renderSWTable(mainContent);
-        }
-      });
     } else {
       state.currentUserRole = 'user';
       adminLabel.classList.remove('active');
@@ -182,15 +174,10 @@ function initRoleSwitcher() {
       // 실무자 모드 전환 시 서버 목록으로 이동
       state.activeCategory = 'hw';
       state.activeSubTab = '서버';
+    }
+    // 모든 렌더링을 refreshView 하나로 통합하여 규격 유지
+    renderNavigation(() => refreshView());
     refreshView();
-      renderNavigation((tab) => {
-        if (tab === '대시보드') {
-          renderDashboard(mainContent);
-        } else {
-          renderSWTable(mainContent);
-        }
-      });
-    }
   });
 }
 

src/map-editor-main.ts

@@ -1,5 +1,5 @@
 import './styles/common.css';
-import './styles/map-editor.css';
+import './views/map-editor.css';
 import { MapEditor } from './views/MapEditor';
 
 document.addEventListener('DOMContentLoaded', () => {

src/server_data.json

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

src/styles/common.css

@@ -3,7 +3,7 @@
   --primary: #171717;
   --on-primary: #ffffff;
   --body: #4d4d4d;
-  --mute: #888888;
+  --mute: #71717a;
   --hairline: #ebebeb;
   --hairline-strong: #a1a1a1;
   --canvas: #ffffff;
@@ -31,13 +31,13 @@
   --success: #0070f3;
   --header-height: 64px;
 
-  /* --- Global Typography Scale (Tighter Clamps) --- */
+  /* --- Global Typography Scale (No Upper Limit) --- */
-  --fs-xs: clamp(10px, 1vmin + 0.1vw, 13px);
+  --fs-xs: max(10px, 1vmin + 0.1vw);
-  --fs-sm: clamp(12px, 1.2vmin + 0.2vw, 15px);
+  --fs-sm: max(12px, 1.2vmin + 0.2vw);
-  --fs-base: clamp(13px, 1.4vmin + 0.2vw, 16px);
+  --fs-base: max(13px, 1.4vmin + 0.2vw);
-  --fs-md: clamp(16px, 2vmin + 0.3vw, 24px);
+  --fs-md: max(16px, 2vmin + 0.3vw);
-  --fs-lg: clamp(20px, 3vmin + 0.4vw, 32px);
+  --fs-lg: max(20px, 3vmin + 0.4vw);
-  --fs-xl: clamp(28px, 5vmin + 0.6vw, 48px);
+  --fs-xl: max(28px, 5vmin + 0.6vw);
 
   /* --- Layout Units --- */
   --header-height: 64px;
@@ -52,12 +52,8 @@
   letter-spacing: -0.02em;
 }
 
-h1, h2, h3, .stat-value {
-  letter-spacing: -0.05em;
-}
-
 body {
-  font-family: 'Inter', 'Geist', 'Pretendard Variable', -apple-system, sans-serif;
+  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
   color: var(--text-main);
   background-color: var(--bg-color);
   line-height: 1.5;
@@ -140,6 +136,14 @@ input, textarea {
   overflow: hidden;
 }
 
+.view-content-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
+}
+
 /* --- View Toggle (Vercel Tab Style) --- */
 .view-toggle {
   display: inline-flex;
@@ -292,6 +296,13 @@ input:checked + .role-slider:before {
   font-weight: 600; 
 }
 .badge-primary { background-color: var(--primary); color: var(--on-primary); }
+.badge.b-green   { background-color: #e6f4ea; color: #137333; } /* 운영/중급 */
+.badge.b-yellow  { background-color: #fffbeb; color: #b45309; } /* 재고/보급 */
+.badge.b-purple  { background-color: #f3e8ff; color: #6b21a8; } /* 수리/최상급 */
+.badge.b-primary { background-color: #e0e7ff; color: #3730a3; } /* GNB/상급 */
+.badge.badge-danger { background-color: #fce8e6; color: #c5221f; } /* 폐기/교체대상 */
+.badge.badge-muted  { background-color: #f1f3f4; color: #5f6368; } /* 폐기 */
+.badge.badge-light  { background-color: var(--canvas-soft-2); color: var(--mute); border: 1px solid var(--hairline); } /* 재고기본 */
 
 /* --- Form Elements Extra --- */
 .input-with-icon {
@@ -499,7 +510,7 @@ input:checked + .role-slider:before {
   font-weight: 600;
   color: var(--mute);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: -0.02em;
 }
 
 .search-item input, 
@@ -591,7 +602,7 @@ input:checked + .role-slider:before {
   font-size: var(--fs-md);
   font-weight: 600;
   color: var(--primary);
-  letter-spacing: -0.05em;
+  letter-spacing: -0.02em;
   line-height: 1;
 }
 
@@ -626,6 +637,6 @@ input:checked + .role-slider:before {
 
 .main-footer p {
   margin: 0;
-  letter-spacing: 0.02em;
+  letter-spacing: -0.02em;
 }
 

src/views/Dashboard/SwDashboard.ts

@@ -13,13 +13,13 @@ export function renderSwDashboard(container: HTMLElement) {
   // 통합 SW 데이터
   const allSw = [...state.masterData.swExternal, ...state.masterData.swInternal];
 
-  allSw.forEach(sw => {
+  allSw.forEach((sw: any) => {
      const assigned = state.masterData.swUsers.filter(u => u.sw_id === sw.id).length;
      const qty = typeof sw[ASSET_SCHEMA.ASSET_COUNT.key] === 'number' ? sw[ASSET_SCHEMA.ASSET_COUNT.key] : parseInt(sw[ASSET_SCHEMA.ASSET_COUNT.key]||'0', 10);
      const priceStr = sw[ASSET_SCHEMA.PURCHASE_AMOUNT.key] ? String(sw[ASSET_SCHEMA.PURCHASE_AMOUNT.key]).replace(/,/g, '') : '0';
      const price = parseInt(priceStr, 10) || 0;
 
-     if (sw.asset_type === '외부SW' || sw.type === '외부SW') {
+     if (sw.asset_type === '외부SW') {
        extQty += qty; extUsed += assigned; extTotal++;
        if (isSWExpiring(sw)) extExp++;
        if (sw[ASSET_SCHEMA.PURCHASE_DATE.key]?.startsWith('2026')) extCost2026 += price;

src/views/Dashboard/dashboard.css

@@ -4,7 +4,7 @@
   font-size: var(--fs-lg);
   font-weight: 600;
   color: var(--primary);
-  letter-spacing: -0.05em;
+  letter-spacing: -0.02em;
   margin-bottom: clamp(0.5rem, 1.5vmin, 1.5rem);
   line-height: 1;
 }
@@ -38,7 +38,7 @@
   font-weight: 500;
   color: var(--mute);
   text-transform: uppercase;
-  letter-spacing: 0.1em;
+  letter-spacing: -0.02em;
   margin-bottom: 0.5rem;
 }
 
@@ -140,10 +140,28 @@
   overflow: hidden;
 }
 
+.location-filter-bar {
+  /* Inherit from .search-bar in common.css */
+}
+
+.filter-group label {
+  font-size: var(--fs-xs);
+  font-weight: 600;
+  color: var(--mute);
+  text-transform: uppercase;
+  letter-spacing: -0.02em;
+}
+
+.filter-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
 .location-main-content {
   flex: 1;
   display: grid;
-  grid-template-columns: 2fr 1fr;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
   background: var(--canvas);
   gap: 0;
   padding: 0;
@@ -249,7 +267,7 @@
   font-size: var(--fs-md);
   font-weight: 600;
   color: var(--primary);
-  letter-spacing: -0.05em;
+  letter-spacing: -0.02em;
   line-height: 1; /* Reset line-height to prevent baseline shifts */
 }
 
@@ -290,7 +308,7 @@
   padding-bottom: 8px;
   margin-bottom: 1rem;
   text-transform: uppercase;
-  letter-spacing: 0.1em;
+  letter-spacing: -0.02em;
 }
 
 .detail-grid-2col {
@@ -353,7 +371,7 @@
   font-weight: 600;
   color: var(--mute);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: -0.02em;
 }
 
 .dashboard-card .stat-value {
@@ -484,3 +502,4 @@
     border-bottom: 1px solid var(--hairline);
   }
 }
+}

src/views/DashboardView.ts

@@ -1,13 +1,13 @@
 import { state } from '../core/state';
 import { renderHwDashboard } from './Dashboard/HwDashboard';
 import { renderSwDashboard } from './Dashboard/SwDashboard';
+import './Dashboard/dashboard.css';
 
 /**
- * 대시보드 렌더링 통합 허브
+ * 대시보드 렌더링 통합 허브 (Vercel Style Normalized)
  */
 export function renderDashboard(mainContent: HTMLElement) {
   if (!mainContent) return;
-  mainContent.innerHTML = '';
   
   // 기존 차트 리소스 해제
   if (state.activeCharts) {
@@ -17,11 +17,21 @@ export function renderDashboard(mainContent: HTMLElement) {
   }
   state.activeCharts = [];
 
+  mainContent.innerHTML = `
+    <div class="view-content-wrapper">
+      <div id="dashboard-scroll-container" class="table-container" style="padding: 0;">
+        <div id="dashboard-inner-content"></div>
+      </div>
+    </div>
+  `;
+
+  const innerContent = document.getElementById('dashboard-inner-content')!;
+
   if (state.activeCategory === 'hw') {
-    renderHwDashboard(mainContent);
+    renderHwDashboard(innerContent);
   } else if (state.activeCategory === 'sw') {
-    renderSwDashboard(mainContent);
+    renderSwDashboard(innerContent);
   } else {
-    mainContent.innerHTML = `<div class="dashboard-section-title" style="padding:2rem;">운영 서비스 대시보드는 준비 중입니다.</div>`;
+    innerContent.innerHTML = `<div class="dashboard-section-title" style="padding:2rem;">해당 카테고리의 대시보드는 준비 중입니다.</div>`;
   }
 }