📝 PR Title: 재귀적 노드 트리 렌더링 엔진 구현 및 테스트

apps/editor/package.json

@@ -25,17 +25,24 @@
     "@tailwindcss/postcss": "^4",
     "@tanstack/eslint-plugin-query": "^5.91.2",
     "@tanstack/react-query-devtools": "^5.90.2",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@typescript-eslint/eslint-plugin": "^8.46.4",
     "@typescript-eslint/parser": "^8.46.4",
+    "@vitejs/plugin-react": "^5.1.2",
     "eslint": "^9.39.1",
     "eslint-config-next": "15.5.6",
     "eslint-plugin-immutable": "^1.0.0",
+    "happy-dom": "^20.1.0",
+    "jsdom": "^27.4.0",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.7.1",
     "tailwindcss": "^4",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vitest": "^4.0.16"
   }
 }

apps/editor/src/components/Canvas.tsx

@@ -0,0 +1,78 @@
+import {
+  useCanvas,
+  useCurNodes,
+  useSelectedNodeId,
+  useSelectNode,
+  useUpdateNode,
+} from "@/stores/useEditorStore";
+import EditorNodeWrapper from "@repo/ui/core/EditorNodeWrapper.jsx";
+import NodeRenderer from "@repo/ui/core/NodeRenderer.jsx";
+import { WcxNode } from "@repo/ui/types/nodes.js";
+import React from "react";
+
+export default function Canvas() {
+  const nodes = useCurNodes();
+  const selectedNodeId = useSelectedNodeId();
+  const selectNode = useSelectNode();
+  const updateNode = useUpdateNode();
+  const canvasState = useCanvas();
+
+  //FIXME-각 노드들에 key속성 추가해주기. -> 리액트 경고 발생
+  //FIXME-nodes가 비어있는 상황에서 에러발생. -> Base Condition에 Root가 들어간다.(Root는 단지 더미 노드일뿐 로직에 들어가면 안된다.)
+  /**
+   *
+   * @param parentNode 부모 노드 객체
+   * @returns 부모 노드 트리 구조
+   *
+   * parentNode만 주면 NodeTree함수가 알아서 ParentNode의 자식 노드 객체 배열(WcxNode[])을 찾아준다.
+   */
+  function renderTree(parentNode: WcxNode | { id: null }) {
+    //parentNode의 자식 찾기
+    const childrenObjArr = nodes?.filter(
+      ({ parent_id }) => parent_id === parentNode.id,
+    );
+
+    //BaseCondition
+    //FIXME-솔직히 !childrenArr만 있어도 될듯? 길이가 0일 수가 없다.
+    if (!childrenObjArr || childrenObjArr.length === 0) {
+      if (parentNode.id === null) return;
+      return (
+        <EditorNodeWrapper
+          node={parentNode}
+          selectedId={selectedNodeId}
+          updateNode={updateNode}
+          selectNode={selectNode}
+          canvas={canvasState}
+        >
+          <NodeRenderer node={parentNode} />
+        </EditorNodeWrapper>
+      );
+    }
+
+    // 1. 자식들의 렌더링 결과물 (JSX 배열)
+    //현재 parentNode에 대해 NodeRenderer를 사용하려면 children이 필요한데, 재귀로 구해준다.
+    const children = childrenObjArr.map((node) => {
+      return <React.Fragment key={node.id}>{renderTree(node)}</React.Fragment>;
+    });
+
+    // 2. [예외 처리] Root 노드인 경우 -> 그냥 자식들만 반환 (Wrapper 없음)
+    if (parentNode.id === null) {
+      return <>{children}</>;
+    }
+
+    // 3. 일반 노드인 경우 -> Wrapper + NodeRenderer + children
+    return (
+      <EditorNodeWrapper
+        node={parentNode}
+        selectedId={selectedNodeId}
+        updateNode={updateNode}
+        selectNode={selectNode}
+        canvas={canvasState}
+      >
+        <NodeRenderer node={parentNode}>{children}</NodeRenderer>
+      </EditorNodeWrapper>
+    );
+  }
+
+  return <div className="canvas-root relative">{renderTree({ id: null })}</div>;
+}

apps/editor/src/components/__tests__/Canvas.test.tsx

@@ -0,0 +1,150 @@
+import { render, screen } from "@testing-library/react";
+import Canvas from "../Canvas";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+// Mock zustand stores
+const mockUseCurNodes = vi.fn();
+const mockUseSelectedNodeId = vi.fn();
+const mockUseSelectNode = vi.fn();
+const mockUseUpdateNode = vi.fn();
+const mockUseCanvas = vi.fn();
+const mockUseSetCanvas = vi.fn();
+
+//실제 파일을 가로채서 가짜 결과를 내뱉게 합니다.
+vi.mock("@/stores/useEditorStore", () => ({
+  useCurNodes: () => mockUseCurNodes(), //지연 실행 -> 이렇게 되면 다른 테스트에서 목함수의 반환값을 바꿔도 언제나 새롭게 해당 함수가 호출 되므로 다른 테스트의 영향을 받지 않는다.
+  useSelectedNodeId: () => mockUseSelectedNodeId(),
+  useSelectNode: () => mockUseSelectNode(),
+  useUpdateNode: () => mockUseUpdateNode(),
+  useCanvas: () => mockUseCanvas(),
+  useSetCanvas: () => mockUseSetCanvas(),
+}));
+
+// Mock EditorNodeWrapper (Rnd 라이브러리는 jsdom환경에서 테스트 하기에 까다롭습니다.)
+vi.mock("@repo/ui/core/EditorNodeWrapper.jsx", () => ({
+  default: ({
+    children,
+    node,
+  }: {
+    children: React.ReactNode;
+    node: { id: string };
+  }) => (
+    <div data-testid={`wrapper-${node.id}`} className="mock-wrapper">
+      {children}
+    </div>
+  ),
+}));
+
+// Mock NodeRenderer
+vi.mock("@repo/ui/core/NodeRenderer.jsx", () => ({
+  default: ({
+    children,
+    node,
+  }: {
+    children: React.ReactNode;
+    node: { id: string };
+  }) => (
+    <div data-testid={`renderer-${node.id}`} className="mock-renderer">
+      {children}
+    </div>
+  ),
+}));
+
+describe("Canvas Component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUseSelectedNodeId.mockReturnValue(null);
+    mockUseCanvas.mockReturnValue({ scale: 1 });
+  });
+
+  it("Case 1: Should render empty when there are no nodes", () => {
+    mockUseCurNodes.mockReturnValue([]);
+    const { container } = render(<Canvas />);
+    expect(container.querySelector(".canvas-root")).toBeInTheDocument();
+    expect(container.querySelectorAll(".mock-wrapper")).toHaveLength(0);
+  });
+
+  it("Case 2: Should render flat nodes (Siblings)", () => {
+    const flatNodes = [
+      { id: "1", type: "Container", parent_id: null, layout: {} },
+      { id: "2", type: "Hero", parent_id: null, layout: {} },
+    ];
+    mockUseCurNodes.mockReturnValue(flatNodes);
+
+    const { container } = render(<Canvas />);
+
+    expect(screen.getByTestId("wrapper-1")).toBeInTheDocument();
+    expect(screen.getByTestId("wrapper-2")).toBeInTheDocument();
+    expect(screen.getByTestId("renderer-1")).toBeInTheDocument();
+    expect(container.querySelectorAll(".mock-wrapper")).toHaveLength(2);
+  });
+
+  it("Case 3: Should render nested nodes (Parent-Child)", () => {
+    const nestedNodes = [
+      { id: "parent", type: "Container", parent_id: null, layout: {} },
+      { id: "child1", type: "Button", parent_id: "parent", layout: {} },
+      { id: "child2", type: "Button", parent_id: "parent", layout: {} },
+    ];
+    mockUseCurNodes.mockReturnValue(nestedNodes);
+
+    render(<Canvas />);
+
+    // 존재 확인
+    const parentWrapper = screen.getByTestId("wrapper-parent");
+    const child1Wrapper = screen.getByTestId("wrapper-child1");
+    const child2Wrapper = screen.getByTestId("wrapper-child2");
+
+    expect(parentWrapper).toBeInTheDocument();
+    expect(child1Wrapper).toBeInTheDocument();
+    expect(child2Wrapper).toBeInTheDocument();
+
+    // 핵심 검증: 계층 구조 확인
+    // 부모의 렌더러 안에 자식의 래퍼가 들어있는가?
+    // Canvas가 재귀를 제대로 돌리지 않았으면, 자식이 부모 밖에 튀어 나와 있었을 것.
+    const parentRenderer = screen.getByTestId("renderer-parent");
+    expect(parentRenderer).toContainElement(child1Wrapper);
+    expect(parentRenderer).toContainElement(child2Wrapper);
+  });
+
+  it("Case 4: 부모-자식1-자식2-손자 관계의 트리도 렌더링이 되야 합니다.", () => {
+    const nestedNodes = [
+      { id: "parent", type: "Container", parent_id: null, layout: {} },
+      { id: "child1", type: "Button", parent_id: "parent", layout: {} },
+      { id: "child2", type: "Button", parent_id: "parent", layout: {} },
+      { id: "grandson", type: "Button", parent_id: "child1", layout: {} },
+    ];
+
+    mockUseCurNodes.mockReturnValue(nestedNodes);
+
+    render(<Canvas />);
+    const parentRenderer = screen.getByTestId("renderer-parent");
+    const child1Wrapper = screen.getByTestId("wrapper-child1");
+    const child1Renderer = screen.getByTestId("renderer-child1"); // 👈 child1의 "렌더러(속)"를 찾아야 합니다.
+    const grandsonWrapper = screen.getByTestId("wrapper-grandson");
+
+    expect(parentRenderer).toContainElement(child1Wrapper);
+    expect(child1Renderer).toContainElement(grandsonWrapper);
+
+    expect(child1Wrapper.parentElement).toBe(parentRenderer);
+    expect(grandsonWrapper.parentElement).toBe(child1Renderer);
+
+    expect(grandsonWrapper.parentElement).not.toBe(parentRenderer);
+  });
+
+  it("Case 5: Should NOT render wrapper for root (id: null)", () => {
+    // This test specifically verifies that the root pseudo-node doesn't get a wrapper
+    // If the bug exists, this might crash or render a weird wrapper
+    mockUseCurNodes.mockReturnValue([
+      { id: "1", type: "Container", parent_id: null, layout: {} },
+    ]);
+
+    render(<Canvas />);
+
+    // We expect wrapper-1 to exist
+    expect(screen.getByTestId("wrapper-1")).toBeInTheDocument();
+
+    // We expect NO "wrapper-null" or similar
+    const wrappers = screen.getAllByTestId(/wrapper-/);
+    expect(wrappers).toHaveLength(1);
+  });
+});

apps/editor/src/setupTests.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

apps/editor/src/stores/useEditorStore.ts

@@ -1,3 +1,5 @@
+import { WcxNode } from "@repo/ui/types/nodes.js";
+import { CanvasState, Layer } from "@repo/ui/types/rnd.js";
 import { create } from "zustand";
 import { combine, devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
@@ -8,6 +10,8 @@ const useEditorStore = create(
       combine(
         {
           selectedNodeId: null as string | null,
+          nodes: null as null | WcxNode[], //TODO- 추후에 현재 페이지에 해당하는 노드들을 받아오는 로직을 통해 해당 상태가 업데이트 되야 한다.
+          canvas: { dx: 0, dy: 0, scale: 1 },
         },
         (set) => ({
           selectNode(id: string) {
@@ -28,6 +32,22 @@ const useEditorStore = create(
               "editorStore/clearNode",
             );
           },
+          //TODO-updateNode액션 검토하기
+          updateNode(targetNodeId: string, updates: Partial<Layer>) {
+            set((state) => {
+              const targetNode = state.nodes?.find(
+                ({ id }) => id === targetNodeId,
+              );
+              if (targetNode) {
+                targetNode.layout = { ...targetNode.layout, ...updates };
+              }
+            });
+          },
+          setCanvas(updates: CanvasState) {
+            set((state) => {
+              state.canvas = { ...state.canvas, ...updates };
+            });
+          },
         }),
       ),
     ),
@@ -43,3 +63,11 @@ export const useSelectedNodeId = () =>
 export const useSelectNode = () => useEditorStore((store) => store.selectNode);
 
 export const useClearNode = () => useEditorStore((store) => store.clearNode);
+
+export const useCurNodes = () => useEditorStore((store) => store.nodes);
+
+export const useUpdateNode = () => useEditorStore((store) => store.updateNode);
+
+export const useCanvas = () => useEditorStore((store) => store.canvas);
+
+export const useSetCanvas = () => useEditorStore((store) => store.setCanvas);

apps/editor/tsconfig.json

@@ -23,7 +23,13 @@
       "@/*": ["src/*"],
       "@editor/*": ["src/packages/editor/*"],
       "@components/*": ["src/packages/editor/components/*"],
-      "@renderer/*": ["src/packages/editor/nodeRenderer/*"]
+      "@renderer/*": ["src/packages/editor/nodeRenderer/*"],
+      "types": ["../../packages/ui/src/types"],
+      "types/*": ["../../packages/ui/src/types/*"],
+      "components/*": ["../../packages/ui/src/components/*"],
+      "utils/*": ["../../packages/ui/src/utils/*"],
+      "context/*": ["../../packages/ui/src/context/*"],
+      "hooks/*": ["../../packages/ui/src/hooks/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],

apps/editor/vitest.config.mts

@@ -0,0 +1,21 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+import path from "path";
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    setupFiles: "./src/setupTests.ts",
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+      "@repo/ui": path.resolve(__dirname, "../../packages/ui/src"),
+      "components": path.resolve(__dirname, "../../packages/ui/src/components"),
+      "types": path.resolve(__dirname, "../../packages/ui/src/types"),
+      "utils": path.resolve(__dirname, "../../packages/ui/src/utils"),
+      "hooks": path.resolve(__dirname, "../../packages/ui/src/hooks"),
+      "context": path.resolve(__dirname, "../../packages/ui/src/context"),
+    },
+  },
+});

packages/ui/package.json

@@ -2,7 +2,6 @@
   "name": "@repo/ui",
   "version": "0.0.0",
   "exports": {
-    "./renderer": "./src/renderer/NodeRenderer.tsx",
     "./*": "./src/*"
   },
   "scripts": {

packages/ui/src/components/Button.tsx

@@ -3,10 +3,11 @@ import { useActionHandler } from "hooks/useActionHandler";
 import { ButtonNode, NodeComponentProps } from "types";
 import processNodeStyles from "utils/processNodeStyles";
 
-export default function Button({
+export default function ButtonComponent({
   node,
   props,
   style,
+  children,
 }: NodeComponentProps<ButtonNode>) {
   const { mode } = useBuilderMode();
   const { text, action } = props;
@@ -38,6 +39,7 @@ export default function Button({
       onClick={clickHandler} //이벤트 연결
     >
       <span style={nodeStyleObj.text}>{text}</span>
+      {children}
     </button>
   );
 }

packages/ui/src/components/Container.tsx

@@ -0,0 +1,22 @@
+import { ContainerNode, NodeComponentProps } from "types";
+import processNodeStyles from "utils/processNodeStyles";
+
+export default function Container({
+  node,
+  style,
+  children,
+}: NodeComponentProps<ContainerNode>) {
+  //스타일 변환
+  const nodeStyleObj = processNodeStyles(style);
+
+  return (
+    <div
+      data-component-id={node.id}
+      style={nodeStyleObj.root}
+      className={style.root?.className}
+    >
+      {/* Container는 자식이 있을 경우 렌더링 */}
+      {children}
+    </div>
+  );
+}