feat: 컨테이너 노드 기능 추가

djk01281 · djk01281 · commit 56d1dc26ec55 · 2024-11-27T15:44:35.000+09:00
diff --git a/apps/backend/src/yjs/yjs.service.ts b/apps/backend/src/yjs/yjs.service.ts
@@ -134,6 +134,9 @@ export class YjsService
         for (const [key, change] of event.changes.keys) {
           if (change.action === 'update') {
             const node: any = nodesMap.get(key);
+            if (node.type !== 'note') {
+              continue;
+            }
             const { title, id } = node.data; // TODO: 이모지 추가
             const { x, y } = node.position;
             const isHolding = node.isHolding;
diff --git a/apps/frontend/src/features/canvas/model/useCanvas.ts b/apps/frontend/src/features/canvas/model/useCanvas.ts
@@ -25,6 +25,7 @@ import { useWorkspace } from "@/shared/lib/useWorkspace";
 
 export interface YNode extends Node {
   isHolding: boolean;
+  parentId?: string;
 }
 
 export const useCanvas = () => {
@@ -33,6 +34,7 @@ export const useCanvas = () => {
   const { pages } = usePages();
   const queryClient = useQueryClient();
   const { ydoc } = useYDocStore();
+  const { getIntersectingNodes } = useReactFlow();
 
   const workspace = useWorkspace();
 
@@ -70,23 +72,17 @@ export const useCanvas = () => {
   useEffect(() => {
     const yTitleMap = ydoc.getMap("title");
     const yEmojiMap = ydoc.getMap("emoji");
-
     const nodesMap = ydoc.getMap("nodes");
 
     yTitleMap.observeDeep((event) => {
       if (!event[0].path.length) return;
-
       const pageId = event[0].path[0].toString().split("_")[1];
       const value = event[0].target.toString();
-
       const existingNode = nodesMap.get(pageId) as YNode;
 
       const newNode: YNode = {
-        id: pageId,
-        type: "note",
-        data: { title: value, id: pageId, emoji: existingNode.data.emoji },
-        position: existingNode.position,
-        selected: false,
+        ...existingNode,
+        data: { ...existingNode.data, title: value },
         isHolding: false,
       };
 
@@ -95,18 +91,13 @@ export const useCanvas = () => {
 
     yEmojiMap.observeDeep((event) => {
       if (!event[0].path.length) return;
-
       const pageId = event[0].path[0].toString().split("_")[1];
       const value = event[0].target.toString();
-
       const existingNode = nodesMap.get(pageId) as YNode;
 
       const newNode: YNode = {
-        id: pageId,
-        type: "note",
-        data: { title: existingNode.data.title, id: pageId, emoji: value },
-        position: existingNode.position,
-        selected: false,
+        ...existingNode,
+        data: { ...existingNode.data, emoji: value },
         isHolding: false,
       };
 
@@ -118,7 +109,6 @@ export const useCanvas = () => {
     if (!ydoc) return;
 
     const wsProvider = createSocketIOProvider("flow-room", ydoc);
-
     provider.current = wsProvider;
 
     const nodesMap = ydoc.getMap("nodes");
@@ -240,13 +230,17 @@ export const useCanvas = () => {
         if (change.type === "position" && change.position) {
           const node = nodes.find((n) => n.id === change.id);
           if (node) {
-            const updatedYNode: YNode = {
-              ...node,
-              position: change.position,
-              selected: false,
-              isHolding: holdingNodeRef.current === change.id,
-            };
-            nodesMap.set(change.id, updatedYNode);
+            onNodesChange([change]);
+
+            const currentNode = nodes.find((n) => n.id === change.id);
+            if (currentNode) {
+              nodesMap.set(change.id, {
+                ...currentNode,
+                position: change.position,
+                selected: false,
+                isHolding: holdingNodeRef.current === change.id,
+              });
+            }
 
             const affectedEdges = edges.filter(
               (edge) => edge.source === change.id || edge.target === change.id,
@@ -270,10 +264,10 @@ export const useCanvas = () => {
               }
             });
           }
+        } else {
+          onNodesChange([change]);
         }
       });
-
-      onNodesChange(changes);
     },
     [nodes, edges, onNodesChange],
   );
@@ -341,12 +335,112 @@ export const useCanvas = () => {
       if (ydoc) {
         const nodesMap = ydoc.getMap("nodes");
         const yNode = nodesMap.get(node.id) as YNode | undefined;
+
         if (yNode) {
-          nodesMap.set(node.id, { ...yNode, isHolding: false });
+          const currentNode = nodes.find((n) => n.id === node.id);
+          if (!currentNode) return;
+
+          if (node.type === "group") {
+            const intersectingNotes = getIntersectingNodes(currentNode).filter(
+              (n) => n.type === "note" && !n.parentId,
+            );
+
+            intersectingNotes.forEach((noteNode) => {
+              const relativePosition = {
+                x: noteNode.position.x - currentNode.position.x,
+                y: noteNode.position.y - currentNode.position.y,
+              };
+
+              nodesMap.set(noteNode.id, {
+                ...noteNode,
+                parentId: node.id,
+                position: relativePosition,
+                isHolding: false,
+              });
+            });
+
+            nodesMap.set(node.id, {
+              ...currentNode,
+              isHolding: false,
+            });
+          } else {
+            const intersectingGroups = getIntersectingNodes(currentNode).filter(
+              (n) => n.type === "group",
+            );
+
+            if (intersectingGroups.length > 0) {
+              const parentNode =
+                intersectingGroups[intersectingGroups.length - 1];
+
+              if (yNode.parentId === parentNode.id) {
+                nodesMap.set(node.id, {
+                  ...yNode,
+                  position: currentNode.position,
+                  isHolding: false,
+                });
+              } else {
+                let absolutePosition = currentNode.position;
+                if (yNode.parentId) {
+                  const oldParentNode = nodes.find(
+                    (n) => n.id === yNode.parentId,
+                  );
+                  if (oldParentNode) {
+                    absolutePosition = {
+                      x: oldParentNode.position.x + currentNode.position.x,
+                      y: oldParentNode.position.y + currentNode.position.y,
+                    };
+                  }
+                }
+
+                const relativePosition = {
+                  x: absolutePosition.x - parentNode.position.x,
+                  y: absolutePosition.y - parentNode.position.y,
+                };
+
+                nodesMap.set(node.id, {
+                  ...currentNode,
+                  parentId: parentNode.id,
+                  position: relativePosition,
+                  isHolding: false,
+                });
+              }
+            } else {
+              if (yNode.parentId) {
+                const oldParentNode = nodes.find(
+                  (n) => n.id === yNode.parentId,
+                );
+                if (oldParentNode) {
+                  const absolutePosition = {
+                    x: oldParentNode.position.x + currentNode.position.x,
+                    y: oldParentNode.position.y + currentNode.position.y,
+                  };
+
+                  nodesMap.set(node.id, {
+                    ...currentNode,
+                    parentId: undefined,
+                    position: absolutePosition,
+                    isHolding: false,
+                  });
+                }
+              } else {
+                nodesMap.set(node.id, {
+                  ...currentNode,
+                  parentId: undefined,
+                  isHolding: false,
+                });
+              }
+            }
+          }
+
+          setNodes((ns) => {
+            const groups = ns.filter((n) => n.type === "group");
+            const notes = ns.filter((n) => n.type !== "group");
+            return [...groups, ...notes];
+          });
         }
       }
     },
-    [ydoc],
+    [ydoc, getIntersectingNodes, nodes, setNodes],
   );
 
   return {
diff --git a/apps/frontend/src/features/canvasTools/ui/NewNodePanel/index.tsx b/apps/frontend/src/features/canvasTools/ui/NewNodePanel/index.tsx
@@ -0,0 +1,73 @@
+import { useCreatePage } from "@/features/pageSidebar/api/usePages";
+import { usePageStore } from "@/features/pageSidebar/model";
+import { initializeYText } from "@/shared/model";
+import { usePopover } from "@/shared/model/usePopover";
+import useYDocStore from "@/shared/model/ydocStore";
+
+export function NewNodePanel() {
+  const { close } = usePopover();
+
+  const { setCurrentPage } = usePageStore();
+  const createMutation = useCreatePage();
+  const { ydoc } = useYDocStore();
+
+  const handleNewPageButtonClick = () => {
+    createMutation
+      .mutateAsync({
+        title: "제목 없음",
+        content: {
+          type: "doc",
+          content: [
+            {
+              type: "paragraph",
+              content: [{ type: "text", text: "" }],
+            },
+          ],
+        },
+        x: 0,
+        y: 0,
+        emoji: null,
+      })
+      .then((res) => {
+        setCurrentPage(res.pageId);
+
+        const yTitleMap = ydoc.getMap("title");
+        const yEmojiMap = ydoc.getMap("emoji");
+
+        initializeYText(yTitleMap, `title_${res.pageId}`, "제목 없음");
+        initializeYText(yEmojiMap, `emoji_${res.pageId}`, "");
+        close();
+      });
+  };
+
+  const nodeMap = ydoc.getMap("nodes");
+
+  const handleNewContainerButtonClick = () => {
+    const newNode = {
+      id: Math.random().toString(36).substr(2, 9),
+      type: "group",
+      data: { label: "Group A" },
+      position: { x: 100, y: 100 },
+      style: { width: 200, height: 200 },
+    };
+
+    nodeMap.set(newNode.id, newNode);
+  };
+
+  return (
+    <div className="flex flex-col gap-0.5 p-0.5 text-sm text-[#171717]">
+      <button
+        onClick={handleNewPageButtonClick}
+        className="w-full rounded-md p-1.5 text-start hover:bg-[#f2f2f2]"
+      >
+        새 노드 추가
+      </button>
+      <button
+        onClick={handleNewContainerButtonClick}
+        className="w-full rounded-md p-1.5 text-start hover:bg-[#f2f2f2]"
+      >
+        컨테이너 추가
+      </button>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/features/canvasTools/ui/ProfilePanel/index.tsx b/apps/frontend/src/features/canvasTools/ui/ProfilePanel/index.tsx
@@ -0,0 +1,39 @@
+import { usePopover } from "@/shared/model/usePopover";
+import { CursorPreview, ProfileForm } from "@/features/canvasTools/ui";
+
+interface ProfilePanelProps {
+  color: string;
+  clientId: string;
+  onColorChange: (color: string) => void;
+  onClientIdChange: (clientId: string) => void;
+}
+
+export function ProfilePanel({
+  color,
+  clientId,
+  onColorChange,
+  onClientIdChange,
+}: ProfilePanelProps) {
+  const { close } = usePopover();
+
+  const handleSave = () => {
+    close();
+  };
+
+  return (
+    <div className="flex flex-row gap-4 p-4">
+      <CursorPreview
+        defaultCoors={{ x: 90, y: 80 }}
+        clientId={clientId}
+        color={color}
+      />
+      <ProfileForm
+        color={color}
+        clientId={clientId}
+        onColorChange={onColorChange}
+        onClientIdChange={onClientIdChange}
+        onSave={handleSave}
+      />
+    </div>
+  );
+}
diff --git a/apps/frontend/src/features/canvasTools/ui/index.ts b/apps/frontend/src/features/canvasTools/ui/index.ts
@@ -1,3 +1,5 @@
 export * from "./CursorButton";
 export * from "./CursorPreview";
 export * from "./ProfileForm";
+export * from "./ProfilePanel";
+export * from "./NewNodePanel";
diff --git a/apps/frontend/src/features/pageSidebar/model/useNoteList.ts b/apps/frontend/src/features/pageSidebar/model/useNoteList.ts
@@ -17,7 +17,9 @@ export const useNoteList = () => {
   useEffect(() => {
     nodesMap.observe(() => {
       const yNodes = Array.from(nodesMap.values()) as YNode[];
-      const data = yNodes.map((yNode) => yNode.data) as NoteNodeData[];
+      const data = yNodes
+        .filter((yNode) => yNode.data.type === "note")
+        .map((yNode) => yNode.data) as NoteNodeData[];
       setPages(data);
     });
   }, []);
diff --git a/apps/frontend/src/features/pageSidebar/ui/Tools/index.tsx b/apps/frontend/src/features/pageSidebar/ui/Tools/index.tsx
diff --git a/apps/frontend/src/widgets/CanvasToolsView/ui/index.tsx b/apps/frontend/src/widgets/CanvasToolsView/ui/index.tsx
