[FE] 마인드맵 통합 엔진 구현 및 컴포넌트 적용

frontend/src/constants/mouse.ts

@@ -1,4 +1,5 @@
 export const MOUSE_DOWN = {
     left: 0,
+    wheel: 1,
     right: 2,
 };

frontend/src/features/mindmap/components/DragGhostStyle.tsx

@@ -0,0 +1,22 @@
+import { useMindMapDragSession } from "@/features/mindmap/hooks/useMindmapContext";
+/**
+ * 드래그 세션(start/end)에서만 style 텍스트가 바뀌도록 분리
+ * - 원본(static-graph)만 흐리게 처리
+ * - moving-fragment는 영향 받지 않음
+ */
+export default function DragGhostStyle() {
+    const { isDragging, dragSubtreeIds } = useMindMapDragSession();
+
+    if (!isDragging || !dragSubtreeIds || dragSubtreeIds.size === 0) return null;
+
+    const escapeAttr = (v: string) => v.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+
+    const rules: string[] = [];
+    dragSubtreeIds.forEach((id) => {
+        const safe = escapeAttr(String(id));
+        rules.push(`.static-graph [data-node-id="${safe}"] { opacity: 0.2; }`);
+        rules.push(`.static-graph path[data-edge-to="${safe}"] { opacity: 0.2; }`);
+    });
+
+    return <style>{rules.join("\n")}</style>;
+}

frontend/src/features/mindmap/components/DropIndicator.tsx

@@ -0,0 +1,129 @@
+import { edgeVariants } from "@/features/mindmap/components/EdgeLayer";
+import TempNode, { TEMP_NODE_SIZE } from "@/features/mindmap/node/components/temp_node/TempNode";
+import { NodeDirection, NodeElement, NodeId } from "@/features/mindmap/types/node";
+import { getContentBounds } from "@/features/mindmap/utils/node_geometry";
+import { getBezierPath } from "@/features/mindmap/utils/path";
+
+type DropIndicatorProps = {
+    targetId: NodeId;
+    direction: NodeDirection;
+    nodeMap: Map<NodeId, NodeElement>;
+};
+
+const GHOST_GAP_X = 100;
+const SIBLING_GAP_Y = 16;
+const DEFAULT_NODE_WIDTH = 200;
+const DEFAULT_NODE_HEIGHT = 60;
+
+export default function DropIndicator({ targetId, direction, nodeMap }: DropIndicatorProps) {
+    const targetNode = nodeMap.get(targetId);
+    if (!targetNode || !direction) return null;
+
+    const targetWidth = targetNode.width || DEFAULT_NODE_WIDTH;
+    const targetHeight = targetNode.height || DEFAULT_NODE_HEIGHT;
+
+    const ghostWidth = TEMP_NODE_SIZE.ghost.width;
+    const ghostHeight = TEMP_NODE_SIZE.ghost.height;
+
+    let ghostX = targetNode.x;
+    let ghostY = targetNode.y;
+
+    /**
+     * 엣지 출발은 "부모"
+     * - child: 부모 = targetNode
+     * - prev/next: 부모 = targetNode.parent
+     */
+    const parentNode =
+        direction === "child" ? targetNode : targetNode.parentId ? nodeMap.get(targetNode.parentId) : undefined;
+
+    // 브랜치 방향(좌/우)은 target의 addNodeDirection 기준이 안전(루트 자식도 포함)
+    const branchSide = targetNode.type === "root" ? "right" : targetNode.addNodeDirection;
+
+    switch (direction) {
+        case "child": {
+            // NOTE: root 위 드롭 시 좌/우는 현재 로직상 무조건 right.
+            // 요구사항대로면 InteractionManager가 mouseX로 left/right 결정해서 내려줘야 함.
+            const side = targetNode.type === "root" ? "right" : targetNode.addNodeDirection;
+
+            ghostX =
+                side === "right"
+                    ? targetNode.x + targetWidth / 2 + GHOST_GAP_X + ghostWidth / 2
+                    : targetNode.x - targetWidth / 2 - GHOST_GAP_X - ghostWidth / 2;
+
+            ghostY = targetNode.y;
+            break;
+        }
+
+        case "prev": {
+            /**
+             * "형제 사이 중앙" 계산
+             * prev면: prevSibling.bottom ~ target.top 사이 중앙에 ghost center 배치
+             */
+            const prevSibling = targetNode.prevId ? nodeMap.get(targetNode.prevId) : undefined;
+
+            if (prevSibling) {
+                const prevH = prevSibling.height || 60;
+                const prevBottom = prevSibling.y + prevH / 2;
+
+                const targetTop = targetNode.y - targetHeight / 2;
+
+                ghostY = (prevBottom + targetTop) / 2;
+            } else {
+                // 첫 번째 자식의 prev: 위로 yGap만큼 띄우는 규칙
+                ghostY = targetNode.y - targetHeight / 2 - SIBLING_GAP_Y - ghostHeight / 2;
+            }
+            break;
+        }
+
+        case "next": {
+            /**
+             * next면: target.bottom ~ nextSibling.top 사이 중앙
+             */
+            const nextSibling = targetNode.nextId ? nodeMap.get(targetNode.nextId) : undefined;
+
+            if (nextSibling) {
+                const nextH = nextSibling.height || 60;
+                const nextTop = nextSibling.y - nextH / 2;
+
+                const targetBottom = targetNode.y + targetHeight / 2;
+
+                ghostY = (targetBottom + nextTop) / 2;
+            } else {
+                // 마지막 자식의 next
+                ghostY = targetNode.y + targetHeight / 2 + SIBLING_GAP_Y + ghostHeight / 2;
+            }
+            break;
+        }
+    }
+
+    /**
+     * ghost edge도 content wall 기준으로
+     * - start: parent.content wall
+     * - end: ghost box에서 parent를 향하는 벽
+     */
+    if (!parentNode) return null;
+
+    const parentBounds = getContentBounds(parentNode);
+    const isRightBranch = branchSide === "right";
+
+    const startX = isRightBranch ? parentBounds.right : parentBounds.left;
+    const startY = parentNode.y;
+
+    // ghost의 "부모 방향" 벽
+    const endX = isRightBranch ? ghostX - ghostWidth / 2 : ghostX + ghostWidth / 2;
+    const endY = ghostY;
+
+    const pathData = getBezierPath(startX, startY, endX, endY);
+
+    return (
+        <g className="drop-indicator pointer-events-none">
+            <path d={pathData} className={edgeVariants({ type: "ghost" })} />
+
+            <g transform={`translate(${ghostX}, ${ghostY})`}>
+                <foreignObject width={ghostWidth} height={ghostHeight} x={-ghostWidth / 2} y={-ghostHeight / 2}>
+                    <TempNode type="ghost" />
+                </foreignObject>
+            </g>
+        </g>
+    );
+}

frontend/src/features/mindmap/components/EdgeLayer.tsx

@@ -0,0 +1,61 @@
+import { cva, VariantProps } from "class-variance-authority";
+
+import { NodeColor } from "@/features/mindmap/node/constants/colors";
+import { NodeElement, NodeId } from "@/features/mindmap/types/node";
+import { getParentChildEdgeAnchors } from "@/features/mindmap/utils/node_geometry";
+import { getBezierPath } from "@/features/mindmap/utils/path";
+import { cn } from "@/utils/cn";
+
+type EdgeLayerProps = {
+    nodeMap: Map<NodeId, NodeElement>;
+    filterNode: NodeElement[]; //이번 레이어에서 그릴 노드 ID(선명하게, 투명하게 그려야 하는 경우가 나뉨)
+    color?: NodeColor;
+    type?: "active" | "ghost";
+} & VariantProps<typeof edgeVariants>;
+
+export const edgeVariants = cva("fill-none", {
+    variants: {
+        type: {
+            active: "stroke",
+            ghost: "stroke-2 stroke-node-blue-op-100 [stroke-dasharray:8_4]",
+        },
+        color: {
+            violet: "stroke-node-violet-op-100",
+            blue: "stroke-node-blue-op-100",
+            skyblue: "stroke-node-skyblue-op-100",
+            mint: "stroke-node-mint-op-100",
+            cyan: "stroke-node-cyan-op-100",
+            purple: "stroke-node-purple-op-100",
+            magenta: "stroke-node-magenta-op-100",
+            navy: "stroke-node-navy-op-100",
+        },
+    },
+});
+
+export default function EdgeLayer({ nodeMap, color, type = "active", filterNode }: EdgeLayerProps) {
+    return (
+        <g className="edge-layer">
+            {filterNode.map((node) => {
+                if (!node.parentId || node.parentId === "empty") return null;
+
+                const parent = nodeMap.get(node.parentId);
+                if (!parent) return null;
+
+                const { start, end } = getParentChildEdgeAnchors(parent, node);
+
+                const pathD = getBezierPath(start.x, start.y, end.x, end.y);
+
+                return (
+                    <g key={`edge-${node.id}`}>
+                        <path
+                            d={pathD}
+                            data-edge-to={node.id}
+                            data-edge-from={parent.id}
+                            className={cn(edgeVariants({ type, color }))}
+                        />
+                    </g>
+                );
+            })}
+        </g>
+    );
+}

frontend/src/features/mindmap/components/InteractionLayer.tsx

@@ -0,0 +1,24 @@
+import DropIndicator from "@/features/mindmap/components/DropIndicator";
+import MovingNodeFragment from "@/features/mindmap/components/MovingNodeFragment";
+import { InteractionSnapshot } from "@/features/mindmap/types/interaction";
+import { NodeElement, NodeId } from "@/features/mindmap/types/node";
+
+type InteractionLayerProps = {
+    nodeMap: Map<NodeId, NodeElement>;
+    status: InteractionSnapshot;
+};
+export default function InteractionLayer({ nodeMap, status }: InteractionLayerProps) {
+    const { mode, draggingNodeId, dragDelta, dragSubtreeIds, baseNode } = status;
+
+    if (mode !== "dragging" || !draggingNodeId || !dragSubtreeIds) return null;
+
+    return (
+        <g className="interaction-layer">
+            {baseNode.targetId && baseNode.direction && (
+                <DropIndicator targetId={baseNode.targetId} direction={baseNode.direction} nodeMap={nodeMap} />
+            )}
+
+            <MovingNodeFragment filterIds={dragSubtreeIds} nodeMap={nodeMap} delta={dragDelta} />
+        </g>
+    );
+}

frontend/src/features/mindmap/components/MindMapRenderer.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useRef } from "react";
+
+import DragGhostStyle from "@/features/mindmap/components/DragGhostStyle";
+import InteractionLayer from "@/features/mindmap/components/InteractionLayer";
+import StaticLayer from "@/features/mindmap/components/StaticLayer";
+import {
+    useMindMapCore,
+    useMindMapInteractionFrame,
+    useMindMapVersion,
+} from "@/features/mindmap/hooks/useMindmapContext";
+import { useViewportEvents } from "@/features/mindmap/hooks/useViewportEvents";
+import { NodeElement, NodeId } from "@/features/mindmap/types/node";
+
+/**
+ * interaction 프레임은 이 컴포넌트만 구독해서, movingFragment만 리렌더되도록 분리
+ */
+function InteractionOverlay({
+    nodeMap,
+    rootRef,
+}: {
+    nodeMap: Map<NodeId, NodeElement>;
+    rootRef: React.RefObject<SVGGElement | null>;
+}) {
+    const status = useMindMapInteractionFrame();
+
+    // 부모로부터 받은 ref를 사용하여 해당 인스턴스의 DOM만 조작
+    useEffect(() => {
+        const root = rootRef.current;
+        if (root) {
+            root.setAttribute("data-dragging", status.mode === "dragging" ? "true" : "false");
+        }
+    }, [status.mode, rootRef]);
+
+    return <InteractionLayer status={status} nodeMap={nodeMap} />;
+}
+
+function MindMapInnerRenderer() {
+    const mindmap = useMindMapCore();
+    const version = useMindMapVersion();
+    const rootRef = useRef<SVGGElement>(null);
+
+    if (!mindmap) return null;
+    useViewportEvents();
+
+    const nodeMap = mindmap.tree.nodes;
+
+    return (
+        <g ref={rootRef} className="mindmap-render-root" data-version={version} data-dragging="false">
+            <StaticLayer nodeMap={nodeMap} />
+            <DragGhostStyle />
+            <InteractionOverlay nodeMap={nodeMap} rootRef={rootRef} />
+        </g>
+    );
+}
+
+export default function MindMapRenderer() {
+    const mindmap = useMindMapCore();
+
+    if (!mindmap || !mindmap.getIsReady()) return null;
+    return <MindMapInnerRenderer />;
+}

frontend/src/features/mindmap/components/MindmapNavigationBar.tsx

@@ -0,0 +1,3 @@
+export default function MindmapNavigationBar() {
+    return <div>MindmapNavigationBar</div>;
+}

frontend/src/features/mindmap/components/MovingNodeFragment.tsx

@@ -0,0 +1,47 @@
+import { useMemo } from "react";
+
+import EdgeLayer from "@/features/mindmap/components/EdgeLayer";
+import NodeItem from "@/features/mindmap/node/components/node/NodeItem";
+import { NodeElement, NodeId } from "@/features/mindmap/types/node";
+
+/**
+ * nodeMap: 전체 맵
+ * filterIds : 마우스에 붙어 움직일 노드 Ids
+ * delta : 이동량
+ */
+type MovingNodeFragmentProps = {
+    nodeMap: Map<NodeId, NodeElement>;
+    filterIds: Set<NodeId>; //
+    delta: { x: number; y: number };
+};
+
+/** 마우스로 잡고 노드를 움직일때 마우스에 따라다니는 덩어리 노드들 */
+export default function MovingNodeFragment({ filterIds, nodeMap, delta }: MovingNodeFragmentProps) {
+    // 전체 nodeMap 중 movingHead ~ 자식 노드를 하나의 덩어리화, 맵 내용이 변경될때만 fragment 다시 그림
+    const { fragmentNodes, fragmentMap } = useMemo(() => {
+        const map = new Map<NodeId, NodeElement>();
+
+        // 드래그 중인 노드들만 맵에 담기
+        filterIds.forEach((id) => {
+            const node = nodeMap.get(id);
+            if (node) {
+                map.set(id, node);
+            }
+        });
+
+        // 엣지가 그릴 대상을 '부모가 같은 드래그 그룹 안에 있는 경우'로 제한
+        const nodesForEdge = Array.from(map.values()).filter((node) => map.has(node.parentId));
+
+        return { fragmentNodes: nodesForEdge, fragmentMap: map };
+    }, [filterIds, nodeMap]);
+
+    return (
+        <g transform={`translate(${delta.x}, ${delta.y})`} className="moving-fragment-group">
+            <EdgeLayer nodeMap={fragmentMap} type="active" filterNode={fragmentNodes} color="violet" />
+
+            {Array.from(filterIds).map((id) => (
+                <NodeItem key={`moving-${id}`} nodeId={id} measure={false} />
+            ))}
+        </g>
+    );
+}

frontend/src/features/mindmap/components/StaticLayer.tsx

@@ -0,0 +1,20 @@
+import EdgeLayer from "@/features/mindmap/components/EdgeLayer";
+import NodeItem from "@/features/mindmap/node/components/node/NodeItem";
+import { NodeElement, NodeId } from "@/features/mindmap/types/node";
+
+type StaticLayerProps = {
+    nodeMap: Map<NodeId, NodeElement>;
+};
+
+export default function StaticLayer({ nodeMap }: StaticLayerProps) {
+    const allNodes = Array.from(nodeMap.values());
+
+    return (
+        <g className="static-graph">
+            <EdgeLayer nodeMap={nodeMap} filterNode={allNodes} color="violet" />
+            {allNodes.map((node) => (
+                <NodeItem key={node.id} nodeId={node.id} />
+            ))}
+        </g>
+    );
+}