refactor: Node Entity 추가

Author: yewonJin

apps/frontend/src/entities/node/index.ts

@@ -0,0 +1,8 @@
+export {
+  type Node,
+  type NoteNodeData,
+  type NoteNodeType,
+} from "./model/nodeTypes";
+
+export { MemoizedGroupNode } from "./ui/GroupNode";
+export { NoteNode } from "./ui/NoteNode";

apps/frontend/src/entities/node/model/nodeTypes.ts

@@ -0,0 +1,13 @@
+import { type Node as FlowNode } from "@xyflow/react";
+
+export interface Node extends FlowNode {
+  isHolding: boolean;
+}
+
+export type NoteNodeData = {
+  title: string;
+  id: number;
+  emoji: string;
+};
+
+export type NoteNodeType = FlowNode<NoteNodeData, "note">;

…tures/canvas/ui/Node/GroupNode/index.tsx …src/entities/node/ui/GroupNode/index.tsxapps/frontend/src/features/canvas/ui/Node/GroupNode/index.tsx renamed to apps/frontend/src/entities/node/ui/GroupNode/index.tsx apps/frontend/src/features/canvas/ui/Node/GroupNode/index.tsx renamed to apps/frontend/src/entities/node/ui/GroupNode/index.tsx

@@ -7,7 +7,7 @@ const controlStyle = {
   border: "none",
 };
 
-export function GroupNode() {
+function GroupNode() {
   return (
     <>
       <NodeResizeControl style={controlStyle} minWidth={100} minHeight={50}>
@@ -20,4 +20,4 @@ export function GroupNode() {
   );
 }
 
-export default memo(GroupNode);
+export const MemoizedGroupNode = memo(GroupNode);

…atures/canvas/ui/Node/NoteNode/index.tsx …/src/entities/node/ui/NoteNode/index.tsxapps/frontend/src/features/canvas/ui/Node/NoteNode/index.tsx renamed to apps/frontend/src/entities/node/ui/NoteNode/index.tsx apps/frontend/src/features/canvas/ui/Node/NoteNode/index.tsx renamed to apps/frontend/src/entities/node/ui/NoteNode/index.tsx

@@ -1,14 +1,12 @@
 import { useEffect, useState } from "react";
 import { FileText } from "lucide-react";
-import { Handle, NodeProps, Position, type Node } from "@xyflow/react";
+import { Handle, NodeProps, Position } from "@xyflow/react";
 
-import { useUserStore } from "@/entities/user";
+import { NoteNodeType } from "../../model/nodeTypes";
 import { usePageStore } from "@/entities/page";
+import { useUserStore } from "@/entities/user";
 import { ActiveUser, Emoji } from "@/shared/ui";
 
-export type NoteNodeData = { title: string; id: number; emoji: string };
-export type NoteNodeType = Node<NoteNodeData, "note">;
-
 export function NoteNode({ data }: NodeProps<NoteNodeType>) {
   const { currentPage, setCurrentPage } = usePageStore();
   const { users } = useUserStore();

apps/frontend/src/features/canvas/ui/Canvas/index.tsx

@@ -11,8 +11,8 @@ import {
 import "@xyflow/react/dist/style.css";
 
 import { CollaborativeCursors } from "../CollaborativeCursors";
-import { NoteNode, GroupNode } from "../Node";
 import { useCanvas } from "../../model/useCanvas";
+import { MemoizedGroupNode, NoteNode } from "@/entities/node";
 import { cn } from "@/shared/lib";
 
 const proOptions = { hideAttribution: true };
@@ -40,7 +40,10 @@ export function Canvas({ className }: CanvasProps) {
     cursors,
   } = useCanvas();
 
-  const nodeTypes = useMemo(() => ({ note: NoteNode, group: GroupNode }), []);
+  const nodeTypes = useMemo(
+    () => ({ note: NoteNode, group: MemoizedGroupNode }),
+    [],
+  );
 
   return (
     <div className={cn("", className)} onMouseMove={handleMouseMove}>

apps/frontend/src/features/canvas/ui/Node/index.tsx

@@ -1,10 +1,8 @@
 import { useEffect, useState } from "react";
 
 import { useDeletePage } from "../api/usePages";
+import { Node, NoteNodeData } from "@/entities/node";
 import { usePageStore } from "@/entities/page";
-// TODO: Node entity 만들어야할듯?
-import { YNode } from "@/features/canvas/model/useCanvas";
-import { NoteNodeData } from "@/features/canvas/ui/Node/NoteNode";
 import { useYDocStore } from "@/shared/model";
 
 export const useNoteList = () => {
@@ -17,7 +15,7 @@ export const useNoteList = () => {
   // TODO: 최적화 필요
   useEffect(() => {
     nodesMap.observe(() => {
-      const yNodes = Array.from(nodesMap.values()) as YNode[];
+      const yNodes = Array.from(nodesMap.values()) as Node[];
       const data = yNodes.map((yNode) => yNode.data) as NoteNodeData[];
       setPages(data);
     });