refactor: Update middleware and enhance component interactions

- Improved the middleware to handle authentication checks more effectively, ensuring that users are redirected appropriately based on their authentication status.
- Updated the InteractiveScreenViewerDynamic and RealtimePreviewDynamic components to utilize a new subscription method for DOM manipulation during drag events, enhancing performance and user experience.
- Refactored the SplitLineComponent to optimize drag handling and state management, ensuring smoother interactions during component adjustments.
- Integrated API client for menu data loading, streamlining token management and error handling.

frontend/lib/registry/components/v2-split-line/SplitLineComponent.tsx

@@ -110,7 +110,10 @@ export const SplitLineComponent: React.FC<SplitLineComponentProps> = ({
     };
   }, [isDesignMode, component.id, component.position?.x, detectCanvasWidth]);
 
-  // 드래그 핸들러 (requestAnimationFrame으로 스로틀링 → 렉 방지)
+  // 드래그 중 최종 오프셋 (DOM 직접 조작용)
+  const latestOffsetRef = useRef(dragOffset);
+  latestOffsetRef.current = dragOffset;
+
   const rafIdRef = useRef(0);
   const handleMouseDown = useCallback(
     (e: React.MouseEvent) => {
@@ -120,7 +123,7 @@ export const SplitLineComponent: React.FC<SplitLineComponentProps> = ({
 
       const posX = component.position?.x || 0;
       const startX = e.clientX;
-      const startOffset = dragOffset;
+      const startOffset = latestOffsetRef.current;
       const scaleFactor = getScaleFactor();
       const cw = detectCanvasWidth();
       const MIN_POS = Math.max(50, cw * 0.15);
@@ -130,7 +133,6 @@ export const SplitLineComponent: React.FC<SplitLineComponentProps> = ({
       setCanvasSplit({ isDragging: true });
 
       const handleMouseMove = (moveEvent: MouseEvent) => {
-        // rAF로 스로틀링: 프레임당 1회만 업데이트
         cancelAnimationFrame(rafIdRef.current);
         rafIdRef.current = requestAnimationFrame(() => {
           const rawDelta = moveEvent.clientX - startX;
@@ -141,7 +143,13 @@ export const SplitLineComponent: React.FC<SplitLineComponentProps> = ({
           if (newDividerX < MIN_POS) newOffset = MIN_POS - posX;
           if (newDividerX > MAX_POS) newOffset = MAX_POS - posX;
 
-          setDragOffset(newOffset);
+          latestOffsetRef.current = newOffset;
+
+          // 스플릿선 자체는 DOM 직접 조작 (React 리렌더 없음)
+          if (containerRef.current) {
+            containerRef.current.style.transform = `translateX(${newOffset}px)`;
+          }
+          // 스토어 업데이트 → DOM 리스너만 호출 (React 리렌더 없음)
           setCanvasSplit({ currentDividerX: posX + newOffset });
         });
       };
@@ -153,6 +161,8 @@ export const SplitLineComponent: React.FC<SplitLineComponentProps> = ({
         document.body.style.userSelect = "";
         document.body.style.cursor = "";
 
+        // 최종 오프셋을 React 상태에 동기화 (1회만 리렌더)
+        setDragOffset(latestOffsetRef.current);
         setIsDragging(false);
         setCanvasSplit({ isDragging: false });
       };
@@ -162,7 +172,7 @@ export const SplitLineComponent: React.FC<SplitLineComponentProps> = ({
       document.addEventListener("mousemove", handleMouseMove);
       document.addEventListener("mouseup", handleMouseUp);
     },
-    [resizable, isDesignMode, dragOffset, component.position?.x, getScaleFactor, detectCanvasWidth],
+    [resizable, isDesignMode, component.position?.x, getScaleFactor, detectCanvasWidth],
   );
 
   const handleClick = (e: React.MouseEvent) => {