📝 PR Title: 노드 렌더링 시스템 아키텍처 개편 및 에디터 래퍼 고도화

.vscode/settings.json

@@ -0,0 +1,23 @@
+{
+  "editor.quickSuggestions": {
+    "strings": true
+  },
+  "css.validate": false,
+  "tailwindCSS.includeLanguages": {
+    "typescript": "javascript",
+    "typescriptreact": "javascript"
+  },
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
+    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
+    [
+      "resizeHandleClasses\\s*=\\s*\\{\\{([\\s\\S]*?)\\}\\}",
+      "[\"'`]([^\"'`]*).*?[\"'`]"
+    ]
+  ],
+  "todo-tree.tree.disableCompactFolders": true
+}

apps/editor/db.json

@@ -1,11 +1,12 @@
 {
   "nodes": [
     {
-      "id": 1001,
+      "id": "1001",
       "page_id": 201,
       "parent_id": null,
       "type": "Hero",
       "position": 0,
+      "layout": { "x": 0, "y": 0, "width": 1440, "height": 600, "zIndex": 1 },
       "props": {
         "heading": "WebCreator-X에 오신 것을 환영합니다",
         "subheading": "세상에 하나뿐인 당신의 웹사이트를 만들어보세요.",
@@ -35,11 +36,12 @@
       "created_at": "2025-11-13T06:18:00Z"
     },
     {
-      "id": 1002,
+      "id": "1002",
       "page_id": 201,
       "parent_id": null,
       "type": "Container",
       "position": 1,
+      "layout": { "x": 0, "y": 600, "width": 1440, "height": 800, "zIndex": 1 },
       "props": {},
       "style": {
         "layout": { "display": "block" },
@@ -54,11 +56,12 @@
       "created_at": "2025-11-13T06:20:00Z"
     },
     {
-      "id": 1003,
+      "id": "1003",
       "page_id": 201,
-      "parent_id": 1002,
+      "parent_id": "1002",
       "type": "Heading",
       "position": 0,
+      "layout": { "x": 100, "y": 50, "width": 1200, "height": 100, "zIndex": 2 },
       "props": {
         "text": "주요 기능 소개",
         "level": "h2"
@@ -74,11 +77,12 @@
       "created_at": "2025-11-13T06:21:00Z"
     },
     {
-      "id": 1004,
+      "id": "1004",
       "page_id": 201,
-      "parent_id": 1002,
+      "parent_id": "1002",
       "type": "Text",
       "position": 1,
+      "layout": { "x": 100, "y": 150, "width": 800, "height": 200, "zIndex": 2 },
       "props": {
         "text": "직관적인 드래그 앤 드롭 인터페이스로 코딩 없이 웹사이트를 완성하세요. 모든 컴포넌트는 사용자가 원하는 대로 커스터마이징할 수 있습니다."
       },
@@ -94,11 +98,12 @@
       "created_at": "2025-11-13T06:22:00Z"
     },
     {
-      "id": 1005,
+      "id": "1005",
       "page_id": 201,
       "parent_id": null,
       "type": "Container",
       "position": 2,
+      "layout": { "x": 0, "y": 1400, "width": 1440, "height": 600, "zIndex": 1 },
       "props": { "id": "gallery" },
       "style": {
         "layout": {
@@ -117,11 +122,12 @@
       "created_at": "2025-11-13T06:23:00Z"
     },
     {
-      "id": 1006,
+      "id": "1006",
       "page_id": 201,
-      "parent_id": 1005,
+      "parent_id": "1005",
       "type": "Image",
       "position": 0,
+      "layout": { "x": 50, "y": 50, "width": 600, "height": 300, "zIndex": 2 },
       "props": {
         "src": "https://images.example.com/gallery-1.jpg",
         "alt": "갤러리 이미지 1"
@@ -137,11 +143,12 @@
       "created_at": "2025-11-13T06:24:00Z"
     },
     {
-      "id": 1007,
+      "id": "1007",
       "page_id": 201,
-      "parent_id": 1005,
+      "parent_id": "1005",
       "type": "Image",
       "position": 1,
+      "layout": { "x": 700, "y": 50, "width": 600, "height": 300, "zIndex": 2 },
       "props": {
         "src": "https://images.example.com/gallery-2.jpg",
         "alt": "갤러리 이미지 2"
@@ -157,11 +164,12 @@
       "created_at": "2025-11-13T06:25:00Z"
     },
     {
-      "id": 1008,
+      "id": "1008",
       "page_id": 201,
-      "parent_id": 1005,
+      "parent_id": "1005",
       "type": "Text",
       "position": 2,
+      "layout": { "x": 50, "y": 360, "width": 600, "height": 50, "zIndex": 2 },
       "props": {
         "text": "이미지 설명 1"
       },
@@ -176,11 +184,12 @@
       "created_at": "2025-11-13T06:26:00Z"
     },
     {
-      "id": 1009,
+      "id": "1009",
       "page_id": 201,
-      "parent_id": 1005,
+      "parent_id": "1005",
       "type": "Text",
       "position": 3,
+      "layout": { "x": 700, "y": 360, "width": 600, "height": 50, "zIndex": 2 },
       "props": {
         "text": "이미지 설명 2"
       },
@@ -195,11 +204,12 @@
       "created_at": "2025-11-13T06:27:00Z"
     },
     {
-      "id": 1010,
+      "id": "1010",
       "page_id": 201,
       "parent_id": null,
       "type": "Button",
       "position": 3,
+      "layout": { "x": 600, "y": 2100, "width": 200, "height": 60, "zIndex": 1 },
       "props": {
         "text": "더 알아보기",
         "link": "/features"

apps/editor/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@repo/ui": "workspace:*",
     "@tanstack/react-query": "^5.90.8",
+    "immer": "^11.1.3",
     "json-server": "^1.0.0-beta.3",
     "next": "15.5.9",
     "react": "19.1.0",

apps/editor/src/styles.css

@@ -0,0 +1 @@
+@import "tailwindcss";

packages/ui/package.json

@@ -2,7 +2,8 @@
   "name": "@repo/ui",
   "version": "0.0.0",
   "exports": {
-    "./renderer": "./src/renderer/NodeRenderer.tsx"
+    "./renderer": "./src/renderer/NodeRenderer.tsx",
+    "./*": "./src/*"
   },
   "scripts": {
     "type-check": "tsc --noEmit"
@@ -12,12 +13,17 @@
     "react": "19.1.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4",
     "typescript": "^5"
   },
   "dependencies": {
-    "framer-motion": "^12.23.26"
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.23.26",
+    "react-rnd": "^10.5.2"
   }
 }

packages/ui/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

packages/ui/src/core/BaseLayoutWrapper.tsx

@@ -5,6 +5,7 @@ interface Props {
   node: BaseNode;
 }
 
+//라이브 모드에서는 항상 사용, 에디터 모드에서는 상황에 따라 선택적으로 사용됩니다.
 export default function BaseLayoutNodeWrapper({ children, node }: Props) {
   const { x: top, y: left, width, height, zIndex } = node.layout;
   return (

packages/ui/src/core/EditorNodeWrapper.tsx

@@ -0,0 +1,103 @@
+//에디터 모드전용 노드 렌더러 래퍼 컴포넌트
+import clsx from "clsx";
+import { Rnd } from "react-rnd";
+import { BaseNode } from "types";
+import { CanvasState, Layer } from "types/rnd";
+
+interface WrapperProps {
+  children: React.ReactNode;
+  node: BaseNode;
+  selectedId: string;
+  updateNode: (id: string, updates: Partial<Layer>) => void; //노드의 레이아웃 업데이트 함수 from editor의 스토어 액션
+  selectNode: (id: string) => void;
+  canvas: CanvasState;
+}
+
+//에디터 전용 노드 렌더러 래퍼
+//래퍼 컴포넌트에서 rnd작업 발생할때 현재 액션이 일어나는 노드 id는 몰라도 될듯? -> 항상 스토어의 selectedId를 기준으로 데이터를 수정하면 된다.
+export default function EditorNodeWrapper({
+  children,
+  node,
+  selectedId,
+  updateNode,
+  selectNode,
+  canvas,
+}: WrapperProps) {
+  const isSelected = selectedId === node.id;
+  const wrapperStyle: React.CSSProperties = {
+    // 선택되었을 때 시각적 피드백 (테두리 등)
+    outline: isSelected ? "outline outline-gray-500 outline-2" : "none",
+    cursor: "move",
+  };
+
+  const { id } = node;
+  const { width, height, x, y } = node.layout;
+  const selectedNodeGuideClasses = {
+    handle: "bg-white border rounded-full border-gray-500 !w-3 !h-3",
+    outline: "ring ring-2 ring-gray-500",
+  };
+
+  //TODO- 노드 선택 로직 구현, 선택 ID 공유하는 zustand 스토어 구현 필요
+
+  return (
+    <Rnd
+      size={{ width, height }}
+      position={{ x, y }}
+      scale={canvas.scale}
+      onDragStart={(e) => e.stopPropagation()}
+      //TODO-일단 이동중에 스토어 업데이트는 미루기 -> 성능 이슈
+      // onDrag={(e, d) => updateNode(id, { x: d.x, y: d.y })}
+      onDragStop={(e, d) => updateNode(id, { x: d.x, y: d.y })}
+      onResizeStart={(e) => e.stopPropagation()}
+      //TODO-일단 리사이징중에 스토어 업데이트는 미루기 -> 성능 이슈
+      /*
+      onResize={(e, dir, ref, delta, pos) =>
+        updateNode(id, {
+          width: parseInt(ref.style.width),
+          height: parseInt(ref.style.height),
+          ...pos,
+        })
+      }
+       */
+      onResizeStop={(e, dir, ref, delta, pos) =>
+        updateNode(id, {
+          width: parseInt(ref.style.width),
+          height: parseInt(ref.style.height),
+          ...pos,
+        })
+      }
+      enableResizing={isSelected ? undefined : false}
+      disableDragging={!isSelected}
+      className={clsx("group cursor-pointer", isSelected && "z-50")}
+      resizeHandleClasses={{
+        bottomLeft: isSelected
+          ? clsx(selectedNodeGuideClasses.handle, "-left-1.5 -bottom-1.5")
+          : undefined,
+        bottomRight: isSelected
+          ? clsx(selectedNodeGuideClasses.handle, "-right-1.5 -bottom-1.5")
+          : undefined,
+        topLeft: isSelected
+          ? clsx(selectedNodeGuideClasses.handle, "-left-1.5 -top-1.5")
+          : undefined,
+        topRight: isSelected
+          ? clsx(selectedNodeGuideClasses.handle, "-right-1.5 -top-1.5")
+          : undefined,
+      }}
+    >
+      <div
+        onClick={(e) => {
+          e.stopPropagation();
+          selectNode(id);
+        }}
+        style={wrapperStyle}
+        className={clsx(
+          "transition-shadow duration-200",
+          isSelected && selectedNodeGuideClasses.outline,
+        )}
+      >
+        {/* 실제 컴포넌트(Hero 등)는 이 안에 렌더링됨 */}
+        {children}
+      </div>
+    </Rnd>
+  );
+}