react flow 코드

노드 추가

  /**
   * Handles the click event for a payment provider.
   * Adds a new node to the workflow with the given provider's name and code.
   *
   * @param {Object} provider - The payment provider details.
   * @param {string} provider.name - The name of the payment provider.
   * @param {string} provider.code - The code of the payment provider.
   */
  const onProviderClick = ({ name, code }: { name: string; code: string }) => {
    const location = Math.random() * 500;

    setNodes((prevNodes) => [
      ...prevNodes,
      {
        id: `${prevNodes.length + 1}`,
        data: { name, code },
        type: "paymentProvider",
        position: { x: location, y: location },
      },
    ]);
  };

커넥트 플로우

    // 
    /**
     * Handles the connection event in the workflow.
     * 
     * This function is called when a new connection is made between nodes. It creates a new edge with the provided connection details,
     * sets it as animated, assigns a unique ID, and specifies the edge type as "customEdge". The new edge is then added to the existing
     * list of edges using the `addEdge` function.
     * 
     * @param connection - The connection object containing details about the nodes being connected.
     */
    const onConnect = useCallback(
        (connection: Connection) => {
            const edge = {
                ...connection,
                animated: true,
                id: `${edges.length} + 1`,
                type: "customEdge",
            };
            setEdges((prevEdges) => addEdge(edge, prevEdges));
        },
        [edges]
    );

엣지지우기

setEdges((prevEdges) => prevEdges.filter((edge) => edge.id !== id))

노드 지우기

  setNodes((prevNodes) => prevNodes.filter((node) => node.id !== id))