⚡ Bolt: 프론트엔드 노드 검색에서 메모리 낭비 제거 및 렌더링 성능 최적화

frontend/src/App.tsx

@@ -60,6 +60,7 @@ import { exportMermaid } from "./erd/mermaid";
 import { inferRelationships } from "./erd/autoInfer";
 import { exportDbml } from "./erd/dbml";
 import { GRID_COLUMNS, GRID_X_GAP, GRID_Y_GAP } from "./erd/layoutConstants";
+import { tableNodeMatchesSearch } from "./erd/nodeSearch";
 import type { Connection, Project, Snapshot, SnapshotDetail } from "./types";
 
 const TERMINAL_SNAPSHOT_STATUSES = new Set([
@@ -195,18 +196,7 @@ export default function App() {
     if (!normalizedNodeSearch) return new Set<string>();
     const matches = new Set<string>();
     for (const node of nodes) {
-      const haystack = [
-        node.data.title,
-        node.data.comment ?? "",
-        ...node.data.columns.flatMap((column) => [
-          column.column_name,
-          column.data_type,
-          column.column_comment ?? "",
-        ]),
-      ]
-        .join(" ")
-        .toLocaleLowerCase();
-      if (haystack.includes(normalizedNodeSearch)) {
+      if (tableNodeMatchesSearch(node, normalizedNodeSearch)) {
         matches.add(node.id);
       }
     }

frontend/src/erd/__tests__/nodeSearch.test.ts

@@ -0,0 +1,40 @@
+import type { Node } from "@xyflow/react";
+import { describe, expect, it } from "vitest";
+
+import type { TableNodeData } from "../convert";
+import { tableNodeMatchesSearch } from "../nodeSearch";
+
+const node: Node<TableNodeData> = {
+  id: "users",
+  type: "tableNode",
+  position: { x: 0, y: 0 },
+  data: {
+    title: "public.users",
+    comment: "Application accounts",
+    columns: [
+      {
+        column_name: "email_address",
+        data_type: "varchar",
+        is_not_null: true,
+        is_pk: false,
+        column_comment: "Primary login address",
+      },
+    ],
+    badges: { pk: false, fk: false },
+  },
+};
+
+describe("tableNodeMatchesSearch", () => {
+  it("matches title, table comments, and column metadata without joined haystacks", () => {
+    expect(tableNodeMatchesSearch(node, "users")).toBe(true);
+    expect(tableNodeMatchesSearch(node, "accounts")).toBe(true);
+    expect(tableNodeMatchesSearch(node, "email")).toBe(true);
+    expect(tableNodeMatchesSearch(node, "varchar")).toBe(true);
+    expect(tableNodeMatchesSearch(node, "login")).toBe(true);
+  });
+
+  it("returns false for empty or missing matches", () => {
+    expect(tableNodeMatchesSearch(node, "")).toBe(false);
+    expect(tableNodeMatchesSearch(node, "orders")).toBe(false);
+  });
+});

frontend/src/erd/nodeSearch.ts

@@ -0,0 +1,36 @@
+import type { Node } from "@xyflow/react";
+
+import type { TableNodeData } from "./convert";
+
+export function tableNodeMatchesSearch(
+  node: Node<TableNodeData>,
+  normalizedSearch: string,
+): boolean {
+  if (!normalizedSearch) return false;
+  const { data } = node;
+
+  if (data.title.toLocaleLowerCase().includes(normalizedSearch)) return true;
+  if (
+    data.comment &&
+    data.comment.toLocaleLowerCase().includes(normalizedSearch)
+  ) {
+    return true;
+  }
+
+  for (const column of data.columns) {
+    if (column.column_name.toLocaleLowerCase().includes(normalizedSearch)) {
+      return true;
+    }
+    if (column.data_type.toLocaleLowerCase().includes(normalizedSearch)) {
+      return true;
+    }
+    if (
+      column.column_comment &&
+      column.column_comment.toLocaleLowerCase().includes(normalizedSearch)
+    ) {
+      return true;
+    }
+  }
+
+  return false;
+}