[Refactor] Unify ReactFlow Custom Node Structure & State Management

[haerim-kweon]

Refactor request

Summary

Unify and refactor the structure of ReactFlow custom nodes to handle mismatches between endpoint specifications and scenario definitions more smoothly.
Ensure flexible node creation, connection, and interaction regardless of the source format.
Additionally, migrate component-level props to a centralized Redux store for better maintainability and global control.

TODO

• Standardize the data structure of custom nodes for consistency across endpoints and scenarios
• Migrate props-based values to Redux state
• Ensure only one of json or formdata exists at a time (exclusive logic)
• Dynamically sync header based on the selected body type
• Maintain state consistency across sibling nodes (e.g., updating body affects header)
• Persist state across top tab switches
• Separate request and response logic via individual Redux slices
• Move exclusive logic and sync logic into reducers

Describe the Solution

• Refactor the data object within custom nodes to follow a unified schema that supports both endpoint and scenario specifications.

• Use Redux Toolkit to manage state across the app, replacing local prop drilling:

  • Implement requestSlice, responseSlice, and other domain-specific slices
  • Ensure mutual exclusivity between json and formdata at the reducer level
  • Implement header–body sync logic within reducers or middleware

• Leverage useReactFlow, onConnect, onNodeDragStop, and similar ReactFlow lifecycle methods to trigger Redux actions

• Persist node-specific states even when switching tabs or navigating between views