기본적인 crud 구현

frontend/components/screen/RealtimePreview.tsx

@@ -43,6 +43,9 @@ import {
   ChevronRight,
   Search,
   RotateCcw,
+  Plus,
+  Edit,
+  Trash2,
 } from "lucide-react";
 
 interface RealtimePreviewProps {
@@ -776,6 +779,29 @@ export const RealtimePreview: React.FC<RealtimePreviewProps> = ({
                     필터 {filters.length}개
                   </Badge>
                 )}
+
+                {/* CRUD 버튼들 (미리보기) */}
+                {dataTableComponent.enableAdd && (
+                  <Button size="sm" className="gap-1 text-xs">
+                    <Plus className="h-3 w-3" />
+                    {dataTableComponent.addButtonText || "추가"}
+                  </Button>
+                )}
+
+                {dataTableComponent.enableEdit && (
+                  <Button size="sm" variant="outline" className="gap-1 text-xs">
+                    <Edit className="h-3 w-3" />
+                    {dataTableComponent.editButtonText || "수정"}
+                  </Button>
+                )}
+
+                {dataTableComponent.enableDelete && (
+                  <Button size="sm" variant="destructive" className="gap-1 text-xs">
+                    <Trash2 className="h-3 w-3" />
+                    {dataTableComponent.deleteButtonText || "삭제"}
+                  </Button>
+                )}
+
                 {dataTableComponent.showSearchButton && (
                   <Button size="sm" className="gap-1 text-xs">
                     <Search className="h-3 w-3" />