feat(pop-dashboard): Phase 0 공통 타입 + Phase 1 대시보드 컴포넌트 구현

Phase 0: 공통 인프라 타입 정의
- ColumnBinding, JoinConfig, DataSourceConfig, PopActionConfig 등
- FilterOperator, AggregationType, SortConfig 타입

Phase 1: pop-dashboard 컴포넌트
- 4개 서브타입: KpiCard, ChartItem, GaugeItem, StatCard
- 4개 표시모드: ArrowsMode, AutoSlideMode, GridMode, ScrollMode
- 설정패널(PopDashboardConfig), 미리보기(PopDashboardPreview)
- 계산식 엔진(formula.ts), 데이터 조회(dataFetcher.ts)
- 팔레트/렌더러/타입 시스템 연동

fix(pop-text): DateTimeDisplay isRealtime 기본값 true로 수정
EOF

frontend/lib/registry/pop-components/pop-dashboard/modes/AutoSlideMode.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+/**
+ * 자동 슬라이드 표시 모드
+ *
+ * 전광판처럼 자동 전환, 터치 시 멈춤, 일정 시간 후 재개
+ * 컴포넌트 unmount 시 타이머 정리 필수
+ */
+
+import React, { useState, useEffect, useRef, useCallback } from "react";
+
+// ===== Props =====
+
+export interface AutoSlideModeProps {
+  /** 총 아이템 수 */
+  itemCount: number;
+  /** 자동 전환 간격 (초, 기본 5) */
+  interval?: number;
+  /** 터치 후 자동 재개까지 대기 시간 (초, 기본 3) */
+  resumeDelay?: number;
+  /** 페이지 인디케이터 표시 여부 */
+  showIndicator?: boolean;
+  /** 현재 인덱스에 해당하는 아이템 렌더링 */
+  renderItem: (index: number) => React.ReactNode;
+}
+
+// ===== 메인 컴포넌트 =====
+
+export function AutoSlideModeComponent({
+  itemCount,
+  interval = 5,
+  resumeDelay = 3,
+  showIndicator = true,
+  renderItem,
+}: AutoSlideModeProps) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isPaused, setIsPaused] = useState(false);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const resumeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // 타이머 정리 함수
+  const clearTimers = useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    if (resumeTimerRef.current) {
+      clearTimeout(resumeTimerRef.current);
+      resumeTimerRef.current = null;
+    }
+  }, []);
+
+  // 자동 슬라이드 시작
+  const startAutoSlide = useCallback(() => {
+    clearTimers();
+    if (itemCount <= 1) return;
+
+    intervalRef.current = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % itemCount);
+    }, interval * 1000);
+  }, [itemCount, interval, clearTimers]);
+
+  // 터치/클릭으로 일시 정지
+  const handlePause = useCallback(() => {
+    setIsPaused(true);
+    clearTimers();
+
+    // resumeDelay 후 자동 재개
+    resumeTimerRef.current = setTimeout(() => {
+      setIsPaused(false);
+      startAutoSlide();
+    }, resumeDelay * 1000);
+  }, [resumeDelay, clearTimers, startAutoSlide]);
+
+  // 마운트 시 자동 슬라이드 시작, unmount 시 정리
+  useEffect(() => {
+    if (!isPaused) {
+      startAutoSlide();
+    }
+    return clearTimers;
+  }, [isPaused, startAutoSlide, clearTimers]);
+
+  if (itemCount === 0) {
+    return (
+      <div className="flex h-full w-full items-center justify-center">
+        <span className="text-xs text-muted-foreground">아이템 없음</span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="flex h-full w-full flex-col"
+      onClick={handlePause}
+      onTouchStart={handlePause}
+      role="presentation"
+    >
+      {/* 콘텐츠 (슬라이드 애니메이션) */}
+      <div className="relative min-h-0 flex-1 overflow-hidden">
+        <div
+          className="absolute inset-0 transition-transform duration-500 ease-in-out"
+          style={{ transform: `translateX(-${currentIndex * 100}%)` }}
+        >
+          <div
+            className="flex h-full"
+            style={{ width: `${itemCount * 100}%` }}
+          >
+            {Array.from({ length: itemCount }).map((_, i) => (
+              <div
+                key={i}
+                className="h-full"
+                style={{ width: `${100 / itemCount}%` }}
+              >
+                {renderItem(i)}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* 인디케이터 + 일시정지 표시 */}
+      {showIndicator && itemCount > 1 && (
+        <div className="flex items-center justify-center gap-1.5 py-1">
+          {isPaused && (
+            <span className="mr-2 text-[10px] text-muted-foreground">일시정지</span>
+          )}
+          {Array.from({ length: itemCount }).map((_, i) => (
+            <span
+              key={i}
+              className={`h-1.5 rounded-full transition-all ${
+                i === currentIndex
+                  ? "w-4 bg-primary"
+                  : "w-1.5 bg-muted-foreground/30"
+              }`}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}