♻️ Wrapper 분기 리팩토링: 책임을 EditorNodeWrapper에서 Canvas로 이동

Author: Nago730

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

@@ -4,8 +4,9 @@ import { useDragStore } from "@/stores/useDragStore";
 import {
   useAddItemToStack,
   useCanvas,
+  useChildrenMap,
   useClearNode,
-  useCurNodes,
+  useNodeMap,
   useSelectedNodeId,
   useSelectNode,
   useSetCanvas,
@@ -19,29 +20,30 @@ import {
 import handleWheel from "@/utils/editor/handleWheel";
 import { DragProvider } from "@repo/ui/context/dragContext";
 import EditorNodeWrapper from "@repo/ui/core/EditorNodeWrapper";
+import FlowNodeWrapper from "@repo/ui/core/FlowNodeWrapper";
 import NodeRenderer from "@repo/ui/core/NodeRenderer";
 import SelectionOverlay from "@repo/ui/core/SelectionOverlay";
 import { WcxNode } from "@repo/ui/types/nodes";
 import React, { useRef } from "react";
 
 export default function Canvas() {
-  const nodes = useCurNodes();
   const selectedNodeId = useSelectedNodeId();
   const selectNode = useSelectNode();
   const updateNode = useUpdateNodeLayout();
   const canvasState = useCanvas();
   const setCanvas = useSetCanvas();
   const clearNode = useClearNode();
   const addItemToStack = useAddItemToStack();
+  const nodeMap = useNodeMap();
+  const childrenMap = useChildrenMap();
 
   //TODO-이거 뭐임?
   const isPanning = useRef(false);
   const lastMousePos = useRef({ x: 0, y: 0 });
 
   function getParentNode(parentId: string | null): WcxNode | undefined {
     if (!parentId) return undefined;
-
-    return nodes?.find((n) => n.id === parentId);
+    return nodeMap[parentId];
   }
 
   //FIXME-각 노드들에 key속성 추가해주기. -> 리액트 경고 발생
@@ -54,28 +56,14 @@ export default function Canvas() {
    * parentNode만 주면 NodeTree함수가 알아서 ParentNode의 자식 노드 객체 배열(WcxNode[])을 찾아준다.
    */
   function renderTree(parentNode: WcxNode | { id: null }) {
-    //parentNode의 자식 찾기
-    const childrenObjArr = nodes
-      ?.filter(({ parent_id }) => parent_id === parentNode.id)
-      .sort((a, b) => a.position - b.position);
+    // parentNode의 자식 찾기 (O(1) lookup via childrenMap)
+    const childrenObjArr = childrenMap[parentNode.id ?? "__root__"];
 
     //BaseCondition
     //FIXME-솔직히 !childrenArr만 있어도 될듯? 길이가 0일 수가 없다.
     if (!childrenObjArr || childrenObjArr.length === 0) {
       if (parentNode.id === null) return;
-      return (
-        <EditorNodeWrapper
-          node={parentNode}
-          parentNode={getParentNode(parentNode.parent_id)}
-          selectedId={selectedNodeId}
-          updateNode={updateNode}
-          selectNode={selectNode}
-          canvas={canvasState}
-          addItemToStack={addItemToStack}
-        >
-          <NodeRenderer node={parentNode} />
-        </EditorNodeWrapper>
-      );
+      return renderWrappedNode(parentNode, <NodeRenderer node={parentNode} />);
     }
 
     // 1. 자식들의 렌더링 결과물 (JSX 배열)
@@ -89,17 +77,48 @@ export default function Canvas() {
     }
 
     // 3. 일반 노드인 경우 -> Wrapper + NodeRenderer + children
+    return renderWrappedNode(
+      parentNode,
+      <NodeRenderer node={parentNode}>{children}</NodeRenderer>,
+    );
+  }
+
+  /**
+   * 노드 유형에 따라 적절한 래퍼를 선택하여 렌더링합니다.
+   * - Stack 내부 flow 아이템 → FlowNodeWrapper (Rnd 미사용, CSS 기반 크기)
+   * - 그 외 → EditorNodeWrapper (Rnd 기반 드래그/리사이즈)
+   */
+  function renderWrappedNode(node: WcxNode, content: React.ReactNode) {
+    const parent = getParentNode(node.parent_id);
+    const isFlowItem =
+      parent?.type === "Stack" && node.style.position === "relative";
+
+    if (isFlowItem) {
+      return (
+        <FlowNodeWrapper
+          node={node}
+          parentNode={parent}
+          selectedId={selectedNodeId}
+          updateNode={updateNode}
+          selectNode={selectNode}
+          canvas={canvasState}
+        >
+          {content}
+        </FlowNodeWrapper>
+      );
+    }
+
     return (
       <EditorNodeWrapper
-        node={parentNode}
-        parentNode={getParentNode(parentNode.parent_id)}
+        node={node}
+        parentNode={parent}
         selectedId={selectedNodeId}
         updateNode={updateNode}
         selectNode={selectNode}
         canvas={canvasState}
         addItemToStack={addItemToStack}
       >
-        <NodeRenderer node={parentNode}>{children}</NodeRenderer>
+        {content}
       </EditorNodeWrapper>
     );
   }

packages/ui/src/core/EditorNodeWrapper.tsx

@@ -5,7 +5,6 @@ import { useState } from "react";
 import { Rnd } from "react-rnd";
 import { WcxNode } from "types";
 import { CanvasState, Layer } from "types/rnd";
-import FlowNodeWrapper from "./FlowNodeWrapper";
 
 interface WrapperProps {
   children: React.ReactNode;
@@ -53,24 +52,7 @@ export default function EditorNodeWrapper({
   const setDraggingId = useDragStore((s) => s.setDraggingId);
   const setHoveredStackId = useDragStore((s) => s.setHoveredStackId);
 
-  // Stack 내부 flow 아이템은 FlowNodeWrapper로 렌더링
-  const isFlowItem = isStackItem && hasRelativePosition;
-  if (isFlowItem) {
-    return (
-      <FlowNodeWrapper
-        node={node}
-        parentNode={parentNode}
-        selectedId={selectedId}
-        updateNode={updateNode}
-        selectNode={selectNode}
-        canvas={canvas}
-      >
-        {children}
-      </FlowNodeWrapper>
-    );
-  }
 
-  const isSwitchItems = isStackItem && hasRelativePosition;
 
   const wrapperStyle: React.CSSProperties = {
     cursor: "move",
@@ -162,17 +144,8 @@ export default function EditorNodeWrapper({
           `드래그 종료시 노드의 좌표 x:${d.node.offsetLeft}, y:${d.node.offsetTop}`,
         );
 
-        if (hasRelativePosition) {
-          console.log("relative position");
-          return;
-        }
-
-        //드래그가 종료될 경우에 외부 아이템이 스택으로 들어오는경우,스택 내부의 아이템이 이동할 경우(포지션 앱솔루트), 내부 아이템끼리 위치 이동할 경우,기본 위치 이동을 생각해야한다.
-        if (isSwitchItems) {
-          //현재 놓인 Y위치에 따라서 노드의 순서 변경을 고려해야한다.
-          //TODO-Stack내부에서 Item 노드의 순서 변경 로직 실행
-        } else if (stackId && node.parent_id !== stackId) {
-          //스택 외부의 노드가 스택 안으로 새롭게 들어오는 경우에만 해당이 된다.
+        // 드래그 종료: 스택에 드롭 vs 위치 이동
+        if (stackId && node.parent_id !== stackId) {
           addItemToStack(id, stackId);
         } else {
           updateNode(id, { x: d.x, y: d.y });