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-bom-item-editor/BomItemEditorComponent.tsx

@@ -641,18 +641,139 @@ export function BomItemEditorComponent({
     });
   };
 
-  // ─── 디자인 모드 ───
+  // ─── 디자인 모드 미리보기 ───
 
   if (isDesignMode) {
+    const cfg = component?.componentConfig || {};
+    const hasConfig =
+      cfg.mainTableName || cfg.dataSource?.sourceTable || (cfg.columns && cfg.columns.length > 0);
+
+    const sourceColumns = (cfg.columns || []).filter((c: any) => c.isSourceDisplay);
+    const inputColumns = (cfg.columns || []).filter((c: any) => !c.isSourceDisplay);
+
+    if (!hasConfig) {
+      return (
+        <div className="rounded-md border border-dashed p-6 text-center">
+          <Package className="text-muted-foreground mx-auto mb-2 h-8 w-8" />
+          <p className="text-muted-foreground text-sm font-medium">
+            BOM 하위 품목 편집기
+          </p>
+          <p className="text-muted-foreground text-xs">
+            트리 구조로 하위 품목을 관리합니다
+          </p>
+        </div>
+      );
+    }
+
+    const dummyRows = [
+      { depth: 0, code: "ASM-001", name: "본체 조립", type: "조립", qty: "1" },
+      { depth: 1, code: "PRT-010", name: "프레임", type: "구매", qty: "2" },
+      { depth: 1, code: "PRT-011", name: "커버", type: "구매", qty: "1" },
+      { depth: 0, code: "ASM-002", name: "전장 조립", type: "조립", qty: "1" },
+      { depth: 1, code: "PRT-020", name: "PCB 보드", type: "구매", qty: "3" },
+    ];
+
     return (
-      <div className="rounded-md border border-dashed p-6 text-center">
-        <Package className="text-muted-foreground mx-auto mb-2 h-8 w-8" />
-        <p className="text-muted-foreground text-sm font-medium">
-          BOM 하위 품목 편집기
-        </p>
-        <p className="text-muted-foreground text-xs">
-          트리 구조로 하위 품목을 관리합니다
-        </p>
+      <div className="space-y-2">
+        {/* 헤더 */}
+        <div className="flex items-center justify-between">
+          <h4 className="text-sm font-semibold">하위 품목 구성</h4>
+          <Button size="sm" className="h-7 text-xs" disabled>
+            <Plus className="mr-1 h-3 w-3" />
+            품목추가
+          </Button>
+        </div>
+
+        {/* 설정 요약 뱃지 */}
+        <div className="flex flex-wrap gap-1">
+          {cfg.mainTableName && (
+            <span className="rounded bg-orange-100 px-1.5 py-0.5 text-[10px] text-orange-700">
+              저장: {cfg.mainTableName}
+            </span>
+          )}
+          {cfg.dataSource?.sourceTable && (
+            <span className="rounded bg-blue-100 px-1.5 py-0.5 text-[10px] text-blue-700">
+              소스: {cfg.dataSource.sourceTable}
+            </span>
+          )}
+          {cfg.parentKeyColumn && (
+            <span className="rounded bg-green-100 px-1.5 py-0.5 text-[10px] text-green-700">
+              트리: {cfg.parentKeyColumn}
+            </span>
+          )}
+          {inputColumns.length > 0 && (
+            <span className="rounded bg-gray-100 px-1.5 py-0.5 text-[10px] text-gray-600">
+              입력 {inputColumns.length}개
+            </span>
+          )}
+          {sourceColumns.length > 0 && (
+            <span className="rounded bg-blue-50 px-1.5 py-0.5 text-[10px] text-blue-600">
+              표시 {sourceColumns.length}개
+            </span>
+          )}
+        </div>
+
+        {/* 더미 트리 미리보기 */}
+        <div className="space-y-0.5 rounded-md border p-1.5">
+          {dummyRows.map((row, i) => (
+            <div
+              key={i}
+              className={cn(
+                "flex items-center gap-1.5 rounded px-1.5 py-1",
+                row.depth > 0 && "border-l-2 border-l-primary/20",
+                i === 0 && "bg-accent/30",
+              )}
+              style={{ marginLeft: `${row.depth * 20}px` }}
+            >
+              <GripVertical className="text-muted-foreground h-3 w-3 shrink-0 opacity-40" />
+              {row.depth === 0 ? (
+                <ChevronDown className="h-3 w-3 shrink-0 opacity-50" />
+              ) : (
+                <span className="w-3" />
+              )}
+              <span className="text-muted-foreground w-4 text-center text-[10px]">
+                {i + 1}
+              </span>
+              <span className="w-16 shrink-0 truncate font-mono text-[10px] font-medium">
+                {row.code}
+              </span>
+              <span className="min-w-[50px] flex-1 truncate text-[10px]">
+                {row.name}
+              </span>
+
+              {/* 소스 표시 컬럼 미리보기 */}
+              {sourceColumns.slice(0, 2).map((col: any) => (
+                <span
+                  key={col.key}
+                  className="w-12 shrink-0 truncate text-center text-[10px] text-blue-500"
+                >
+                  {col.title}
+                </span>
+              ))}
+
+              {/* 입력 컬럼 미리보기 */}
+              {inputColumns.slice(0, 2).map((col: any) => (
+                <div
+                  key={col.key}
+                  className="h-5 w-12 shrink-0 rounded border bg-background text-center text-[10px] leading-5"
+                >
+                  {col.key === "quantity" || col.title === "수량"
+                    ? row.qty
+                    : ""}
+                </div>
+              ))}
+
+              <div className="flex shrink-0 gap-0.5">
+                <div className="text-muted-foreground flex h-5 w-5 items-center justify-center rounded opacity-40">
+                  <Plus className="h-3 w-3" />
+                </div>
+                <div className="text-muted-foreground flex h-5 w-5 items-center justify-center rounded opacity-40">
+                  <X className="h-3 w-3" />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
       </div>
     );
   }