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

frontend/package.json

@@ -7,28 +7,36 @@
         "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",
+        "lodash-es": "^4.17.23",
         "lucide-react": "^0.563.0",
+        "nanoid": "^5.1.6",
         "next-themes": "^0.4.6",
+        "perfect-cursors": "^1.0.5",
         "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-protocols": "^1.0.7",
+        "y-websocket": "^3.0.0",
+        "yjs": "^13.6.29"
     },
     "devDependencies": {
         "@eslint/js": "^9.39.2",
+        "@types/lodash-es": "^4.17.12",
         "@types/node": "^24.10.1",
         "@types/react": "^19.2.5",
         "@types/react-dom": "^19.2.3",

frontend/src/App.tsx

@@ -6,6 +6,7 @@ import EpisodeArchivePage from "@/features/episode_archive/pages/EpisodeArchiveP
 import HomePage from "@/features/home/pages/HomePage";
 import LandingPage from "@/features/landing/pages/LandingPage";
 import MindmapPage from "@/features/mindmap/pages/MindmapPage";
+import MindmapShowcaseV3 from "@/features/mindmap/shared_mindmap/show_cases/ShowCase";
 import SelfDiagnosisPage from "@/features/self_diagnosis/pages/SelfDiagnosisPage";
 import LoginPage from "@/features/user/login/pages/LoginPages";
 import { Toaster } from "@/shared/components/ui/sonner";
@@ -55,6 +56,10 @@ const router = createBrowserRouter([
         path: routeHelper.login(),
         element: <LoginPage />,
     },
+    {
+        path: "/showcase",
+        element: <MindmapShowcaseV3 />,
+    },
 ]);
 
 function App() {

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/components/CollaboratorList.tsx

@@ -0,0 +1,34 @@
+import { useCollaborators } from "@/features/mindmap/shared_mindmap/hooks/useCollaborators";
+import CollaboratorsManager from "@/features/mindmap/shared_mindmap/utils/CollaboratorManager";
+import Icon from "@/shared/components/icon/Icon";
+import List from "@/shared/components/list/List";
+import ListRow from "@/shared/components/list/ListRow";
+import ProfileIcon from "@/shared/components/profile_icon/ProfileIcon";
+
+type Props = {
+    manager: CollaboratorsManager;
+};
+// 1. 목록 컴포넌트 (조용함)
+export function CollaboratorList({ manager }: Props) {
+    const users = useCollaborators(manager);
+    return (
+        <List className="absolute top-10 right-10 z-50 p-4 gap-4" hasDivider={false}>
+            <ListRow
+                contents={"공동작업자"}
+                className="typo-caption-12-semibold p-0"
+                leftSlot={<Icon name="ic_team" size="16" />}
+            ></ListRow>
+
+            <div className="flex flex-col gap-2">
+                {users.map((u) => (
+                    <ListRow
+                        className="typo-caption-12-medium min-w-50 p-0"
+                        key={u.id}
+                        leftSlot={<ProfileIcon size="sm" name={u.name} isOnline={true} />}
+                        contents={u.name}
+                    ></ListRow>
+                ))}
+            </div>
+        </List>
+    );
+}

frontend/src/features/mindmap/shared_mindmap/components/CursorsOverlay.tsx

@@ -0,0 +1,149 @@
+import { PerfectCursor } from "perfect-cursors";
+import React, { useLayoutEffect, useRef, useState } from "react";
+
+import { useCursors } from "@/features/mindmap/shared_mindmap/hooks/useCursors";
+import CollaboratorsManager from "@/features/mindmap/shared_mindmap/utils/CollaboratorManager";
+
+// --- [Sub Component] 개별 커서 (Perfect Cursor 적용) ---
+const COLOR_MAP = [
+    { color: "blue", text: "text-cursor-blue", bg: "bg-cursor-blue" },
+    { color: "pink", text: "text-cursor-pink", bg: "bg-cursor-pink" },
+    { color: "green", text: "text-cursor-green", bg: "bg-cursor-green" },
+    { color: "purple", text: "text-cursor-purple", bg: "bg-cursor-purple" },
+    { color: "orange", text: "text-cursor-orange", bg: "bg-cursor-orange" },
+];
+
+// 간단하고 안정적인 32bit 해시 (FNV-1a)
+function hashString(str: string): number {
+    let hash = 0x811c9dc5;
+
+    for (let i = 0; i < str.length; i++) {
+        hash ^= str.charCodeAt(i);
+        hash = (hash * 0x01000193) >>> 0;
+    }
+
+    return hash;
+}
+
+function getColorFromName(name: string) {
+    const hash = hashString(name);
+    const index = hash % COLOR_MAP.length;
+
+    return COLOR_MAP[index]!;
+}
+// --- [Main Component] Overlay ---
+type Props = {
+    manager: CollaboratorsManager;
+    pan: { x: number; y: number };
+    scale: number; // scale 추가
+};
+
+export function CursorOverlay({ manager, pan, scale }: Props) {
+    const cursors = useCursors(manager);
+
+    return (
+        <div
+            style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                pointerEvents: "none",
+                overflow: "hidden",
+                zIndex: 10,
+            }}
+        >
+            {Array.from(cursors.entries()).map(([userId, cursor]) => (
+                <OtherUserCursor
+                    key={userId}
+                    point={{ x: cursor.x, y: cursor.y }}
+                    name={cursor.name}
+                    pan={pan}
+                    scale={scale} // scale 전달
+                />
+            ))}
+        </div>
+    );
+}
+
+// --- [Sub Component] 개별 커서 ---
+const OtherUserCursor = ({
+    point,
+    name,
+    pan,
+    scale, // scale 파라미터 추가
+}: {
+    point: { x: number; y: number };
+    name: string;
+    pan: { x: number; y: number };
+    scale: number;
+}) => {
+    const rCursor = useRef<HTMLDivElement>(null);
+    const color = React.useMemo(() => getColorFromName(name), [name]);
+
+    const [pc] = useState(
+        () =>
+            new PerfectCursor((p) => {
+                if (rCursor.current) {
+                    // 계산된 최종 화면 좌표로 이동
+                    rCursor.current.style.setProperty("transform", `translate(${p[0]}px, ${p[1]}px)`);
+                }
+            }),
+    );
+
+    useLayoutEffect(() => {
+        // [핵심 로직]
+        // 1. World 좌표(point)에 현재 배율(scale)을 곱합니다.
+        // 2. 그 결과에 Pan 값을 더해 최종 화면(Screen) 위치를 구합니다.
+        const screenX = point.x * scale + pan.x;
+        const screenY = point.y * scale + pan.y;
+
+        pc.addPoint([screenX, screenY]);
+    }, [point, pc, pan, scale]); // scale이 바뀔 때도 위치를 재계산해야 함
+
+    React.useEffect(() => {
+        return () => pc.dispose();
+    }, [pc]);
+
+    return (
+        <div
+            ref={rCursor}
+            style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                pointerEvents: "none",
+                zIndex: 9999,
+                willChange: "transform",
+            }}
+        >
+            {/* 커서 아이콘: 스타일은 className이나 style로 적용 */}
+            <div className={color.text}>
+                <svg width="24" height="24" viewBox="0 0 24 24" style={{ transform: "translate(-2px, -2px)" }}>
+                    <path
+                        stroke="white"
+                        fill="currentColor"
+                        d="M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19138L11.7841 12.3673H5.65376Z"
+                    />
+                </svg>
+                {/* 유저 이름 라벨 */}
+                <div
+                    className={color.bg}
+                    style={{
+                        position: "absolute",
+                        top: 15,
+                        left: 10,
+                        color: "white",
+                        padding: "2px 6px",
+                        borderRadius: "4px",
+                        fontSize: "10px",
+                        whiteSpace: "nowrap",
+                    }}
+                >
+                    {name}
+                </div>
+            </div>
+        </div>
+    );
+};

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

@@ -0,0 +1,9 @@
+import { useSyncExternalStore } from "react";
+
+import CollaboratorsManager from "@/features/mindmap/shared_mindmap/utils/CollaboratorManager";
+
+// hooks/useCollaborators.ts (기존)
+export function useCollaborators(manager: CollaboratorsManager) {
+    // collaboratorsCache 참조가 바뀔 때만 리렌더링 발생
+    return useSyncExternalStore(manager.subscribe, manager.getCollaboratorsSnapshot);
+}

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

@@ -0,0 +1,9 @@
+import { useSyncExternalStore } from "react";
+
+import CollaboratorsManager from "@/features/mindmap/shared_mindmap/utils/CollaboratorManager";
+
+// hooks/useCursors.ts (신규)
+export function useCursors(manager: CollaboratorsManager) {
+    // cursorsCache 참조가 바뀔 때(마우스 움직일 때)마다 리렌더링 발생
+    return useSyncExternalStore(manager.subscribe, manager.getCursorsSnapshot);
+}

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,34 @@
+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();
+
+        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, node?.x, node?.y]);
+
+    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]);
+};