화면 바로 들어가지게 함

frontend/components/screen/InteractiveDataTable.tsx

@@ -49,6 +49,7 @@ import { toast } from "sonner";
 import { FileUpload } from "@/components/screen/widgets/FileUpload";
 import { AdvancedSearchFilters } from "./filters/AdvancedSearchFilters";
 import { SaveModal } from "./SaveModal";
+import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
 
 // 파일 데이터 타입 정의 (AttachedFileInfo와 호환)
 interface FileInfo {
@@ -97,6 +98,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   style = {},
   onRefresh,
 }) => {
+  const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
   const [data, setData] = useState<Record<string, any>[]>([]);
   const [loading, setLoading] = useState(false);
   const [searchValues, setSearchValues] = useState<Record<string, any>>({});
@@ -411,6 +413,29 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
     async (page: number = 1, searchParams: Record<string, any> = {}) => {
       if (!component.tableName) return;
 
+      // 프리뷰 모드에서는 샘플 데이터만 표시
+      if (isPreviewMode) {
+        const sampleData = Array.from({ length: 3 }, (_, i) => {
+          const sample: Record<string, any> = { id: i + 1 };
+          component.columns.forEach((col) => {
+            if (col.type === "number") {
+              sample[col.key] = Math.floor(Math.random() * 1000);
+            } else if (col.type === "boolean") {
+              sample[col.key] = i % 2 === 0 ? "Y" : "N";
+            } else {
+              sample[col.key] = `샘플 ${col.label} ${i + 1}`;
+            }
+          });
+          return sample;
+        });
+        setData(sampleData);
+        setTotal(3);
+        setTotalPages(1);
+        setCurrentPage(1);
+        setLoading(false);
+        return;
+      }
+
       setLoading(true);
       try {
         const result = await tableTypeApi.getTableData(component.tableName, {
@@ -1792,21 +1817,53 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
 
             {/* CRUD 버튼들 */}
             {component.enableAdd && (
-              <Button size="sm" onClick={handleAddData} disabled={loading} className="gap-2">
+              <Button
+                size="sm"
+                onClick={() => {
+                  if (isPreviewMode) {
+                    return;
+                  }
+                  handleAddData();
+                }}
+                disabled={loading || isPreviewMode}
+                className="gap-2"
+              >
                 <Plus className="h-3 w-3" />
                 {component.addButtonText || "추가"}
               </Button>
             )}
 
             {component.enableEdit && selectedRows.size === 1 && (
-              <Button size="sm" onClick={handleEditData} disabled={loading} className="gap-2" variant="outline">
+              <Button
+                size="sm"
+                onClick={() => {
+                  if (isPreviewMode) {
+                    return;
+                  }
+                  handleEditData();
+                }}
+                disabled={loading || isPreviewMode}
+                className="gap-2"
+                variant="outline"
+              >
                 <Edit className="h-3 w-3" />
                 {component.editButtonText || "수정"}
               </Button>
             )}
 
             {component.enableDelete && selectedRows.size > 0 && (
-              <Button size="sm" variant="destructive" onClick={handleDeleteData} disabled={loading} className="gap-2">
+              <Button
+                size="sm"
+                variant="destructive"
+                onClick={() => {
+                  if (isPreviewMode) {
+                    return;
+                  }
+                  handleDeleteData();
+                }}
+                disabled={loading || isPreviewMode}
+                className="gap-2"
+              >
                 <Trash2 className="h-3 w-3" />
                 {component.deleteButtonText || "삭제"}
               </Button>