Merge pull request #65 from boostcampwm-2024/feature-fe-#51

NoteNode 타입 및 커스텀 컴포넌트 구현, 쿼리 결과로 노드 렌더링 구현

Author: djk01281

frontend/src/components/canvas/NoteNode.tsx

@@ -0,0 +1,51 @@
+import { Handle, NodeProps, Position, type Node } from "@xyflow/react";
+import usePageStore from "@/store/usePageStore";
+
+export type NoteNodeData = { title: string; id: number };
+export type NoteNodeType = Node<NoteNodeData, "note">;
+
+export function NoteNode({ data }: NodeProps<NoteNodeType>) {
+  const { setCurrentPage } = usePageStore();
+
+  const handleNodeClick = () => {
+    const id = data.id;
+    if (id === undefined || id === null) {
+      return;
+    }
+
+    setCurrentPage(id);
+  };
+
+  return (
+    <div
+      className="rounded-md border-[1px] border-black bg-neutral-100 p-2"
+      onClick={handleNodeClick}
+    >
+      <Handle
+        type="source"
+        id="left"
+        position={Position.Left}
+        isConnectable={true}
+      />
+      <Handle
+        type="source"
+        id="top"
+        position={Position.Top}
+        isConnectable={true}
+      />
+      <Handle
+        type="source"
+        id="right"
+        position={Position.Right}
+        isConnectable={true}
+      />
+      <Handle
+        type="source"
+        id="bottom"
+        position={Position.Bottom}
+        isConnectable={true}
+      />
+      {data.title}
+    </div>
+  );
+}

frontend/src/components/canvas/index.tsx

@@ -1,6 +1,6 @@
 import { cn } from "@/lib/utils";
 
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import {
   ReactFlow,
   MiniMap,
@@ -10,18 +10,49 @@ import {
   useEdgesState,
   addEdge,
   BackgroundVariant,
+  ConnectionMode,
   type OnConnect,
   type Node,
   type Edge,
 } from "@xyflow/react";
 
 import "@xyflow/react/dist/style.css";
 
-const initialNodes: Node[] = [
-  { id: "1", position: { x: 0, y: 0 }, data: { label: "1" } },
-  { id: "2", position: { x: 0, y: 100 }, data: { label: "2" } },
+import { useEffect } from "react";
+import { usePages } from "@/hooks/usePages";
+import { type NoteNodeType, NoteNode } from "./NoteNode";
+
+// 테스트용 초기값
+const initialNodes: NoteNodeType[] = [
+  {
+    id: "1",
+    position: { x: 100, y: 100 },
+    type: "note",
+    data: {
+      id: 0,
+      title: "Node 1",
+    },
+  },
+  {
+    id: "2",
+    position: { x: 400, y: 200 },
+    type: "note",
+    data: {
+      id: 1,
+      title: "Node 2",
+    },
+  },
+];
+
+const initialEdges: Edge[] = [
+  {
+    id: "e1-2",
+    source: "1",
+    target: "2",
+    sourceHandle: "top",
+    targetHandle: "left",
+  },
 ];
-const initialEdges: Edge[] = [{ id: "e1-2", source: "1", target: "2" }];
 
 const proOptions = { hideAttribution: true };
 
@@ -30,14 +61,32 @@ interface CanvasProps {
 }
 
 export default function Canvas({ className }: CanvasProps) {
-  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [nodes, setNodes, onNodesChange] = useNodesState<Node>(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
+  const { data } = usePages();
+  const pages = data?.data;
+
+  useEffect(() => {
+    if (!pages) {
+      return;
+    }
+
+    const newNodes = pages.map((page, index) => ({
+      id: page.id.toString(),
+      position: { x: 100 * index, y: 100 },
+      data: { label: page.title, id: page.id },
+    }));
+    setNodes(newNodes);
+  }, [pages, setNodes]);
+
   const onConnect: OnConnect = useCallback(
     (params) => setEdges((eds) => addEdge(params, eds)),
     [setEdges],
   );
 
+  const nodeTypes = useMemo(() => ({ note: NoteNode }), []);
+
   return (
     <div className={cn("", className)}>
       <ReactFlow
@@ -47,6 +96,8 @@ export default function Canvas({ className }: CanvasProps) {
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
         proOptions={proOptions}
+        nodeTypes={nodeTypes}
+        connectionMode={ConnectionMode.Loose}
       >
         <Controls />
         <MiniMap />