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/components/screen/InteractiveScreenViewerDynamic.tsx

@@ -24,6 +24,7 @@ import {
   subscribe as canvasSplitSubscribe,
   getSnapshot as canvasSplitGetSnapshot,
   getServerSnapshot as canvasSplitGetServerSnapshot,
+  subscribeDom as canvasSplitSubscribeDom,
 } from "@/lib/registry/components/v2-split-line/canvasSplitStore";
 
 // 컴포넌트 렌더러들을 강제로 로드하여 레지스트리에 등록
@@ -1181,14 +1182,66 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
       : undefined,
   };
 
+  // 스플릿 조정된 컴포넌트 객체 캐싱 (드래그 끝난 후 최종 렌더링용)
+  const splitAdjustedComponent = React.useMemo(() => {
+    if (isSplitActive && adjustedW !== origW) {
+      return { ...component, size: { ...(component as any).size, width: Math.round(adjustedW) } };
+    }
+    return component;
+  }, [component, isSplitActive, adjustedW, origW]);
+
+  // 드래그 중 DOM 직접 조작 (React 리렌더 없이 매 프레임 업데이트)
+  const elRef = React.useRef<HTMLDivElement>(null);
+  React.useEffect(() => {
+    const compType = (component as any).componentType || "";
+    if (type === "component" && compType === "v2-split-line") return;
+
+    const unsubscribe = canvasSplitSubscribeDom((snap) => {
+      if (!snap.isDragging || !snap.active || !snap.scopeId) return;
+      if (myScopeIdRef.current !== snap.scopeId) return;
+      const el = elRef.current;
+      if (!el) return;
+
+      const origX = position?.x || 0;
+      const oW = size?.width || 200;
+      const { initialDividerX, currentDividerX, canvasWidth } = snap;
+      const delta = currentDividerX - initialDividerX;
+      if (Math.abs(delta) < 1) return;
+
+      if (canvasSplitSideRef.current === null) {
+        canvasSplitSideRef.current = (origX + oW / 2) < initialDividerX ? "left" : "right";
+      }
+
+      const GAP = 4;
+      let nx: number, nw: number;
+      if (canvasSplitSideRef.current === "left") {
+        const scale = initialDividerX > 0 ? Math.max(20, currentDividerX - GAP) / initialDividerX : 1;
+        nx = origX * scale;
+        nw = oW * scale;
+        if (nx + nw > currentDividerX - GAP) nw = currentDividerX - GAP - nx;
+      } else {
+        const irw = canvasWidth - initialDividerX;
+        const crw = Math.max(20, canvasWidth - currentDividerX - GAP);
+        const scale = irw > 0 ? crw / irw : 1;
+        nx = currentDividerX + GAP + (origX - initialDividerX) * scale;
+        nw = oW * scale;
+        if (nx < currentDividerX + GAP) nx = currentDividerX + GAP;
+        if (nx + nw > canvasWidth) nw = canvasWidth - nx;
+      }
+      nx = Math.max(0, nx);
+      nw = Math.max(20, nw);
+
+      el.style.left = `${nx}px`;
+      el.style.width = `${Math.round(nw)}px`;
+      el.style.overflow = nw < oW ? "hidden" : "";
+    });
+    return unsubscribe;
+  }, [component.id, position?.x, size?.width, type]);
+
   return (
     <>
-      <div id={`interactive-${component.id}`} className="absolute" style={componentStyle}>
-        {renderInteractiveWidget(
-          isSplitActive && adjustedW !== origW
-            ? { ...component, size: { ...(component as any).size, width: adjustedW } }
-            : component
-        )}
+      <div ref={elRef} id={`interactive-${component.id}`} className="absolute" style={componentStyle}>
+        {renderInteractiveWidget(splitAdjustedComponent)}
       </div>
 
       {/* 팝업 화면 렌더링 */}