[FE] 동시 편집을 위한 마인드맵 상태 공유

frontend/package.json

@@ -7,25 +7,29 @@
         "lint": "eslint .",
         "lint:fix": "eslint . --fix",
         "preview": "vite preview --config vite.production.ts",
-        "dev": "vite --config vite.development.ts",
-        "build": "tsc && vite build --config vite.production.ts"
+        "dev": "vite --config vite.development.ts --host",
+        "build": "tsc && vite build --config vite.production.ts",
+        "yjs:server": "HOST=0.0.0.0 PORT=1234 npx y-websocket"
     },
     "dependencies": {
         "@tailwindcss/vite": "^4.1.18",
         "@tanstack/react-query": "^5.90.20",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-react": "^0.563.0",
+        "nanoid": "^5.1.6",
         "next-themes": "^0.4.6",
         "radix-ui": "^1.4.3",
-        "nanoid": "^5.1.6",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-error-boundary": "^6.1.0",
         "react-router": "^7.13.0",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.4.0",
-        "tailwindcss": "^4.1.18"
+        "tailwindcss": "^4.1.18",
+        "y-indexeddb": "^9.0.12",
+        "y-websocket": "^3.0.0",
+        "yjs": "^13.6.29"
     },
     "devDependencies": {
         "@eslint/js": "^9.39.2",

frontend/src/constants/env.ts

@@ -0,0 +1,11 @@
+interface AppEnv {
+    VITE_API_BASE_URL: string;
+    VITE_WS_BASE_URL: string;
+}
+
+const env = import.meta.env as unknown as AppEnv;
+
+export const ENV = {
+    API_BASE_URL: env.VITE_API_BASE_URL || `invalid`, // 에러나게 아무 뻥값 넣었습니다.
+    WS_BASE_URL: env.VITE_WS_BASE_URL || `invalid`,
+} as const;

frontend/src/features/mindmap/providers/MindmapProvider.tsx

@@ -5,7 +5,7 @@
  */
 import { createContext, useCallback, useContext, useMemo, useRef, useState, useSyncExternalStore } from "react";
 
-import { NodeId } from "@/features/mindmap/types/mindmapType";
+import { NodeId } from "@/features/mindmap/types/mindmap";
 import MindmapLayoutManager from "@/features/mindmap/utils/MindmapLayoutManager";
 import TreeContainer from "@/features/mindmap/utils/TreeContainer";
 import { EventBroker } from "@/utils/EventBroker";

frontend/src/features/mindmap/shared_mindmap/hooks/useNode.ts

@@ -0,0 +1,23 @@
+import { useSyncExternalStore } from "react";
+
+import SharedMindMapController from "@/features/mindmap/shared_mindmap/utils/SharedMindmapController";
+import { NodeId } from "@/features/mindmap/types/mindmap";
+import { EventBroker } from "@/utils/EventBroker";
+
+/**
+ * Node UI 컴포넌트 안에서 사용하는 훅입니다.
+ * nodeId에 해당하는 데이터가 변경되면 해당 컴포넌트만 rerendering을 트리거 해줍니다.
+ */
+export function useNode(nodeId: NodeId, controller: SharedMindMapController, broker: EventBroker<NodeId>) {
+    const { container } = controller;
+
+    const subscribe = (callback: () => void) => {
+        return broker.subscribe({ key: nodeId, callback });
+    };
+
+    const getSnapshot = () => {
+        return container.safeGetNode(nodeId);
+    };
+
+    return useSyncExternalStore(subscribe, getSnapshot);
+}

frontend/src/features/mindmap/shared_mindmap/hooks/useNodeResizeObserver.ts

@@ -0,0 +1,35 @@
+import { useLayoutEffect, useRef } from "react";
+
+import { NodeElement, NodeId } from "@/features/mindmap/types/mindmap";
+import { isSame } from "@/utils/is_same";
+
+type Props = {
+    nodeId: NodeId;
+    node?: NodeElement;
+    onResize: ({ width, height }: { width: number; height: number }) => void;
+};
+/**
+ * 타겟 노드의 크기가 변경되면 콜백을 실행합니다.
+ */
+export function useNodeResizeObserver({ nodeId, node, onResize }: Props) {
+    const nodeRef = useRef<HTMLDivElement>(null);
+
+    useLayoutEffect(() => {
+        if (!nodeRef.current || !node) {
+            return;
+        }
+
+        const rect = nodeRef.current.getBoundingClientRect();
+
+        // 안잘리게 ceil
+        const newWidth = Math.ceil(rect.width);
+        const newHeight = Math.ceil(rect.height);
+
+        const isChanged = !isSame(node.width, newWidth) || !isSame(node.height, newHeight);
+        if (isChanged) {
+            onResize({ height: newHeight, width: newWidth });
+        }
+    }, [nodeId]);
+
+    return nodeRef;
+}

frontend/src/features/mindmap/shared_mindmap/hooks/useOfflineMindmap.ts

@@ -0,0 +1,31 @@
+import { useEffect } from "react";
+import { toast } from "sonner";
+import { IndexeddbPersistence } from "y-indexeddb";
+import * as Y from "yjs";
+
+import { MindmapRoomId } from "@/features/mindmap/types/mindmap_room";
+
+type Props = {
+    roomId: MindmapRoomId;
+    doc: Y.Doc;
+};
+
+/**
+ * 오프라인, 온라인 상황에서 indexeddb에 저장된 작업 내용을 불러와 doc에 반영합니다.
+ */
+export const useOfflineMindmap = ({ roomId, doc }: Props) => {
+    useEffect(() => {
+        const persistence = new IndexeddbPersistence(roomId, doc);
+
+        const handleSynced = () => {
+            toast.success("오프라인 상태에서 작업한 내용이 성공적으로 반영되었습니다.");
+        };
+
+        persistence.on("synced", handleSynced);
+
+        return () => {
+            persistence.off("synced", handleSynced);
+            persistence.destroy();
+        };
+    }, [roomId, doc]);
+};

frontend/src/features/mindmap/shared_mindmap/hooks/useSharedMindmap.ts

@@ -0,0 +1,59 @@
+import { useEffect, useMemo, useState } from "react";
+import { WebsocketProvider } from "y-websocket";
+import * as Y from "yjs";
+
+import { ENV } from "@/constants/env";
+import SharedMindMapController from "@/features/mindmap/shared_mindmap/utils/SharedMindmapController";
+import { NodeId } from "@/features/mindmap/types/mindmap";
+import { MindmapRoomId } from "@/features/mindmap/types/mindmap_room";
+import { EventBroker } from "@/utils/EventBroker";
+
+type ConnectionStatus = "disconnected" | "connecting" | "connected";
+
+type UseSharedMindmapProps = {
+    roomId: MindmapRoomId;
+};
+
+/**
+ * 동시편집을 위해 웹소켓을 연결합니다.
+ */
+export const useSharedMindmap = ({ roomId }: UseSharedMindmapProps) => {
+    const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>("disconnected");
+
+    const { controller, provider, broker } = useMemo(() => {
+        const doc = new Y.Doc();
+
+        const provider = new WebsocketProvider(ENV.WS_BASE_URL, roomId, doc);
+        const broker = new EventBroker<NodeId>();
+        const controller = new SharedMindMapController(doc, broker, roomId);
+
+        return { controller, provider, broker };
+    }, [roomId]);
+
+    useEffect(() => {
+        if (!provider.shouldConnect) {
+            provider.connect();
+        }
+
+        const handleStatus = (event: { status: ConnectionStatus }) => {
+            setConnectionStatus(event.status);
+        };
+
+        provider.on("status", handleStatus);
+
+        return () => {
+            provider.off("status", handleStatus);
+            provider.disconnect();
+        };
+    }, [provider]);
+
+    return {
+        controller,
+
+        container: controller.container,
+
+        broker,
+
+        connectionStatus,
+    };
+};