345 lines
11 KiB
TypeScript
345 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { ComponentData, WebType, WidgetComponent, FileComponent, AreaComponent, AreaLayoutType } from "@/types/screen";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { FileUpload } from "./widgets/FileUpload";
|
|
import { useAuth } from "@/hooks/useAuth";
|
|
import { DynamicWebTypeRenderer, WebTypeRegistry } from "@/lib/registry";
|
|
import { DataTableTemplate } from "@/components/screen/templates/DataTableTemplate";
|
|
import {
|
|
Database,
|
|
Type,
|
|
Hash,
|
|
List,
|
|
AlignLeft,
|
|
CheckSquare,
|
|
Radio,
|
|
Calendar,
|
|
Code,
|
|
Building,
|
|
File,
|
|
Group,
|
|
ChevronDown,
|
|
ChevronRight,
|
|
Search,
|
|
RotateCcw,
|
|
Plus,
|
|
Edit,
|
|
Trash2,
|
|
Upload,
|
|
Square,
|
|
CreditCard,
|
|
Layout,
|
|
Grid3x3,
|
|
Columns,
|
|
Rows,
|
|
SidebarOpen,
|
|
Folder,
|
|
ChevronUp,
|
|
} from "lucide-react";
|
|
|
|
interface RealtimePreviewProps {
|
|
component: ComponentData;
|
|
isSelected?: boolean;
|
|
onClick?: (e?: React.MouseEvent) => void;
|
|
onDragStart?: (e: React.DragEvent) => void;
|
|
onDragEnd?: () => void;
|
|
onGroupToggle?: (groupId: string) => void; // 그룹 접기/펼치기
|
|
children?: React.ReactNode; // 그룹 내 자식 컴포넌트들
|
|
}
|
|
|
|
// 영역 레이아웃에 따른 아이콘 반환
|
|
const getAreaIcon = (layoutType: AreaLayoutType) => {
|
|
switch (layoutType) {
|
|
case "flex-row":
|
|
return <Layout className="h-4 w-4 text-blue-600" />;
|
|
case "grid":
|
|
return <Grid3x3 className="h-4 w-4 text-green-600" />;
|
|
case "flex-column":
|
|
return <Columns className="h-4 w-4 text-purple-600" />;
|
|
case "panel":
|
|
return <Rows className="h-4 w-4 text-orange-600" />;
|
|
case "sidebar":
|
|
return <SidebarOpen className="h-4 w-4 text-indigo-600" />;
|
|
case "tabs":
|
|
return <Folder className="h-4 w-4 text-pink-600" />;
|
|
default:
|
|
return <Square className="h-4 w-4 text-gray-500" />;
|
|
}
|
|
};
|
|
|
|
// 영역 렌더링
|
|
const renderArea = (component: ComponentData, children?: React.ReactNode) => {
|
|
const area = component as AreaComponent;
|
|
const { layoutType, title } = area;
|
|
|
|
const renderPlaceholder = () => (
|
|
<div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50">
|
|
<div className="text-center">
|
|
{getAreaIcon(layoutType)}
|
|
<p className="mt-2 text-sm text-gray-600">{title || `${layoutType} 영역`}</p>
|
|
<p className="text-xs text-gray-400">컴포넌트를 드래그해서 추가하세요</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="relative h-full w-full">
|
|
<div className="absolute inset-0 h-full w-full">
|
|
{children && React.Children.count(children) > 0 ? children : renderPlaceholder()}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// 동적 웹 타입 위젯 렌더링 컴포넌트
|
|
const WidgetRenderer: React.FC<{ component: ComponentData }> = ({ component }) => {
|
|
// 위젯 컴포넌트가 아닌 경우 빈 div 반환
|
|
if (component.type !== "widget") {
|
|
return <div className="text-xs text-gray-500">위젯이 아닙니다</div>;
|
|
}
|
|
|
|
const widget = component as WidgetComponent;
|
|
const { widgetType, label, placeholder, required, readonly, columnName, style } = widget;
|
|
|
|
// 디버깅: 실제 widgetType 값 확인
|
|
console.log("RealtimePreviewDynamic - widgetType:", widgetType, "columnName:", columnName);
|
|
|
|
// 사용자가 테두리를 설정했는지 확인
|
|
const hasCustomBorder = style && (style.borderWidth || style.borderStyle || style.borderColor || style.border);
|
|
|
|
// 기본 테두리 제거 여부 결정 - Shadcn UI 기본 border 클래스를 덮어쓰기
|
|
const borderClass = hasCustomBorder ? "!border-0" : "";
|
|
|
|
const commonProps = {
|
|
placeholder: placeholder || "입력하세요...",
|
|
disabled: readonly,
|
|
required: required,
|
|
className: `w-full h-full ${borderClass}`,
|
|
};
|
|
|
|
// 동적 웹타입 렌더링 사용
|
|
if (widgetType) {
|
|
try {
|
|
return (
|
|
<DynamicWebTypeRenderer
|
|
webType={widgetType}
|
|
props={{
|
|
...commonProps,
|
|
component: widget,
|
|
value: undefined, // 미리보기이므로 값은 없음
|
|
readonly: readonly,
|
|
}}
|
|
config={widget.webTypeConfig}
|
|
/>
|
|
);
|
|
} catch (error) {
|
|
console.error(`웹타입 "${widgetType}" 렌더링 실패:`, error);
|
|
// 오류 발생 시 폴백으로 기본 input 렌더링
|
|
return <Input type="text" {...commonProps} placeholder={`${widgetType} (렌더링 오류)`} />;
|
|
}
|
|
}
|
|
|
|
// 웹타입이 없는 경우 기본 input 렌더링 (하위 호환성)
|
|
return <Input type="text" {...commonProps} />;
|
|
};
|
|
|
|
// 동적 위젯 타입 아이콘 (레지스트리에서 조회)
|
|
const getWidgetIcon = (widgetType: WebType | undefined) => {
|
|
if (!widgetType) {
|
|
return <Type className="h-4 w-4 text-gray-500" />;
|
|
}
|
|
|
|
// 레지스트리에서 웹타입 정의 조회
|
|
const webTypeDefinition = WebTypeRegistry.getWebType(widgetType);
|
|
if (webTypeDefinition && webTypeDefinition.icon) {
|
|
const IconComponent = webTypeDefinition.icon;
|
|
return <IconComponent className="h-4 w-4" />;
|
|
}
|
|
|
|
// 기본 아이콘 매핑 (하위 호환성)
|
|
switch (widgetType) {
|
|
case "text":
|
|
case "email":
|
|
case "tel":
|
|
return <Type className="h-4 w-4 text-blue-600" />;
|
|
case "number":
|
|
case "decimal":
|
|
return <Hash className="h-4 w-4 text-green-600" />;
|
|
case "date":
|
|
case "datetime":
|
|
return <Calendar className="h-4 w-4 text-purple-600" />;
|
|
case "select":
|
|
case "dropdown":
|
|
return <List className="h-4 w-4 text-orange-600" />;
|
|
case "textarea":
|
|
case "text_area":
|
|
return <AlignLeft className="h-4 w-4 text-indigo-600" />;
|
|
case "boolean":
|
|
case "checkbox":
|
|
return <CheckSquare className="h-4 w-4 text-blue-600" />;
|
|
case "radio":
|
|
return <Radio className="h-4 w-4 text-blue-600" />;
|
|
case "code":
|
|
return <Code className="h-4 w-4 text-gray-600" />;
|
|
case "entity":
|
|
return <Building className="h-4 w-4 text-cyan-600" />;
|
|
case "file":
|
|
return <File className="h-4 w-4 text-yellow-600" />;
|
|
default:
|
|
return <Type className="h-4 w-4 text-gray-500" />;
|
|
}
|
|
};
|
|
|
|
export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
|
|
component,
|
|
isSelected = false,
|
|
onClick,
|
|
onDragStart,
|
|
onDragEnd,
|
|
onGroupToggle,
|
|
children,
|
|
}) => {
|
|
const { user } = useAuth();
|
|
const { type, id, position, size, style = {} } = component;
|
|
|
|
// 컴포넌트 스타일 계산
|
|
const componentStyle = {
|
|
position: "absolute" as const,
|
|
left: position?.x || 0,
|
|
top: position?.y || 0,
|
|
width: size?.width || 200,
|
|
height: size?.height || 40,
|
|
zIndex: position?.z || 1,
|
|
...style,
|
|
};
|
|
|
|
// 선택된 컴포넌트 스타일
|
|
const selectionStyle = isSelected
|
|
? {
|
|
outline: "2px solid #3b82f6",
|
|
outlineOffset: "2px",
|
|
}
|
|
: {};
|
|
|
|
const handleClick = (e: React.MouseEvent) => {
|
|
// 컴포넌트 영역 내에서만 클릭 이벤트 처리
|
|
e.stopPropagation();
|
|
onClick?.(e);
|
|
};
|
|
|
|
const handleDragStart = (e: React.DragEvent) => {
|
|
e.stopPropagation();
|
|
onDragStart?.(e);
|
|
};
|
|
|
|
const handleDragEnd = () => {
|
|
onDragEnd?.();
|
|
};
|
|
|
|
return (
|
|
<div
|
|
id={`component-${id}`}
|
|
className="absolute cursor-pointer"
|
|
style={{ ...componentStyle, ...selectionStyle }}
|
|
onClick={handleClick}
|
|
draggable
|
|
onDragStart={handleDragStart}
|
|
onDragEnd={handleDragEnd}
|
|
>
|
|
{/* 컴포넌트 타입별 렌더링 */}
|
|
<div className="h-full w-full">
|
|
{/* 영역 타입 */}
|
|
{type === "area" && renderArea(component, children)}
|
|
|
|
{/* 데이터 테이블 타입 */}
|
|
{type === "datatable" &&
|
|
(() => {
|
|
const dataTableComponent = component as any; // DataTableComponent 타입
|
|
|
|
return (
|
|
<DataTableTemplate
|
|
title={dataTableComponent.title || dataTableComponent.label}
|
|
description={`${dataTableComponent.label}을 표시하는 데이터 테이블`}
|
|
columns={dataTableComponent.columns}
|
|
filters={dataTableComponent.filters}
|
|
pagination={dataTableComponent.pagination}
|
|
actions={
|
|
dataTableComponent.actions || {
|
|
showSearchButton: dataTableComponent.showSearchButton ?? true,
|
|
searchButtonText: dataTableComponent.searchButtonText || "검색",
|
|
enableExport: dataTableComponent.enableExport ?? true,
|
|
enableRefresh: dataTableComponent.enableRefresh ?? true,
|
|
enableAdd: dataTableComponent.enableAdd ?? true,
|
|
enableEdit: dataTableComponent.enableEdit ?? true,
|
|
enableDelete: dataTableComponent.enableDelete ?? true,
|
|
addButtonText: dataTableComponent.addButtonText || "추가",
|
|
editButtonText: dataTableComponent.editButtonText || "수정",
|
|
deleteButtonText: dataTableComponent.deleteButtonText || "삭제",
|
|
}
|
|
}
|
|
style={component.style}
|
|
className="h-full w-full"
|
|
isPreview={true}
|
|
/>
|
|
);
|
|
})()}
|
|
|
|
{/* 그룹 타입 */}
|
|
{type === "group" && (
|
|
<div className="relative h-full w-full">
|
|
<div className="absolute inset-0">{children}</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 위젯 타입 - 동적 렌더링 */}
|
|
{type === "widget" && (
|
|
<div className="flex h-full flex-col">
|
|
<div className="pointer-events-none flex-1">
|
|
<WidgetRenderer component={component} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 파일 타입 */}
|
|
{type === "file" && (
|
|
<div className="flex h-full flex-col">
|
|
<div className="pointer-events-none flex-1 rounded border-2 border-dashed border-gray-300 bg-gray-50 p-4">
|
|
<div className="flex h-full flex-col items-center justify-center text-center">
|
|
<File className="mb-2 h-8 w-8 text-gray-400" />
|
|
<p className="text-sm text-gray-600">파일 업로드 영역</p>
|
|
<p className="mt-1 text-xs text-gray-400">미리보기 모드</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 선택된 컴포넌트 정보 표시 */}
|
|
{isSelected && (
|
|
<div className="absolute -top-6 left-0 rounded bg-blue-600 px-2 py-1 text-xs text-white">
|
|
{type === "widget" && (
|
|
<div className="flex items-center gap-1">
|
|
{getWidgetIcon((component as WidgetComponent).widgetType)}
|
|
{(component as WidgetComponent).widgetType || "widget"}
|
|
</div>
|
|
)}
|
|
{type !== "widget" && type}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// 기존 RealtimePreview와의 호환성을 위한 export
|
|
export { RealtimePreviewDynamic as RealtimePreview };
|
|
|
|
RealtimePreviewDynamic.displayName = "RealtimePreviewDynamic";
|