472 lines
17 KiB
TypeScript
472 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import { ComponentData, WebType, isWidgetComponent, isContainerComponent } from "@/types";
|
|
import { isFileComponent } from "@/lib/utils/componentTypeUtils";
|
|
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,
|
|
Image as ImageIcon,
|
|
FileText,
|
|
Video,
|
|
Music,
|
|
Archive,
|
|
Presentation,
|
|
} 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 = (layoutDirection?: "horizontal" | "vertical") => {
|
|
switch (layoutDirection) {
|
|
case "horizontal":
|
|
return <Layout className="h-4 w-4 text-blue-600" />;
|
|
case "vertical":
|
|
return <Columns className="h-4 w-4 text-purple-600" />;
|
|
default:
|
|
return <Square className="h-4 w-4 text-gray-500" />;
|
|
}
|
|
};
|
|
|
|
// 영역 렌더링
|
|
const renderArea = (component: ComponentData, children?: React.ReactNode) => {
|
|
if (!isContainerComponent(component) || component.type !== "area") {
|
|
return null;
|
|
}
|
|
const area = component;
|
|
const { layoutDirection, label } = 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(layoutDirection)}
|
|
<p className="mt-2 text-sm text-gray-600">{label || `${layoutDirection || "기본"} 영역`}</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 (!isWidgetComponent(component)) {
|
|
return <div className="text-xs text-gray-500">위젯이 아닙니다</div>;
|
|
}
|
|
|
|
const widget = component;
|
|
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 (isFileComponent(widget)) {
|
|
console.log("🎯 RealtimePreview - 파일 컴포넌트 강제 감지:", {
|
|
componentId: widget.id,
|
|
widgetType: widgetType,
|
|
isFileComponent: true
|
|
});
|
|
|
|
try {
|
|
return (
|
|
<DynamicWebTypeRenderer
|
|
webType="file"
|
|
props={{
|
|
...commonProps,
|
|
component: widget,
|
|
value: undefined, // 미리보기이므로 값은 없음
|
|
readonly: readonly,
|
|
}}
|
|
config={widget.webTypeConfig}
|
|
/>
|
|
);
|
|
} catch (error) {
|
|
console.error(`파일 웹타입 렌더링 실패:`, error);
|
|
return <div className="text-xs text-gray-500 p-2">파일 컴포넌트 (렌더링 오류)</div>;
|
|
}
|
|
}
|
|
|
|
// 동적 웹타입 렌더링 사용
|
|
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":
|
|
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 [fileUpdateTrigger, setFileUpdateTrigger] = useState(0);
|
|
|
|
// 전역 파일 상태 변경 감지 (해당 컴포넌트만)
|
|
useEffect(() => {
|
|
const handleGlobalFileStateChange = (event: CustomEvent) => {
|
|
if (event.detail.componentId === component.id) {
|
|
console.log("🔄 RealtimePreview 파일 상태 변경 감지:", {
|
|
componentId: component.id,
|
|
filesCount: event.detail.files?.length || 0,
|
|
action: event.detail.action
|
|
});
|
|
setFileUpdateTrigger(prev => prev + 1);
|
|
}
|
|
};
|
|
|
|
if (typeof window !== 'undefined') {
|
|
window.addEventListener('globalFileStateChanged', handleGlobalFileStateChange as EventListener);
|
|
|
|
return () => {
|
|
window.removeEventListener('globalFileStateChanged', handleGlobalFileStateChange as EventListener);
|
|
};
|
|
}
|
|
}, [component.id]);
|
|
|
|
// 컴포넌트 스타일 계산
|
|
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>
|
|
)}
|
|
|
|
{/* 파일 타입 - 레거시 및 신규 타입 지원 */}
|
|
{isFileComponent(component) && (() => {
|
|
const fileComponent = component as any;
|
|
const uploadedFiles = fileComponent.uploadedFiles || [];
|
|
|
|
// 전역 상태에서 최신 파일 정보 가져오기
|
|
const globalFileState = typeof window !== 'undefined' ? (window as any).globalFileState || {} : {};
|
|
const globalFiles = globalFileState[component.id] || [];
|
|
|
|
// 최신 파일 정보 사용 (전역 상태 > 컴포넌트 속성)
|
|
const currentFiles = globalFiles.length > 0 ? globalFiles : uploadedFiles;
|
|
|
|
console.log("🔍 RealtimePreview 파일 컴포넌트 렌더링:", {
|
|
componentId: component.id,
|
|
uploadedFilesCount: uploadedFiles.length,
|
|
globalFilesCount: globalFiles.length,
|
|
currentFilesCount: currentFiles.length,
|
|
currentFiles: currentFiles.map((f: any) => ({ objid: f.objid, name: f.realFileName || f.name })),
|
|
componentType: component.type,
|
|
fileUpdateTrigger: fileUpdateTrigger,
|
|
timestamp: new Date().toISOString()
|
|
});
|
|
|
|
return (
|
|
<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-2">
|
|
{currentFiles.length > 0 ? (
|
|
<div className="h-full overflow-y-auto">
|
|
<div className="mb-1 text-xs font-medium text-gray-700">
|
|
업로드된 파일 ({currentFiles.length})
|
|
</div>
|
|
<div className="space-y-1">
|
|
{currentFiles.map((file: any, index: number) => {
|
|
// 파일 확장자에 따른 아이콘 선택
|
|
const getFileIcon = (fileName: string) => {
|
|
const ext = fileName.split('.').pop()?.toLowerCase() || '';
|
|
if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext)) {
|
|
return <ImageIcon className="h-4 w-4 text-green-500 flex-shrink-0" />;
|
|
}
|
|
if (['pdf', 'doc', 'docx', 'txt', 'rtf', 'hwp', 'hwpx', 'hwpml', 'pages'].includes(ext)) {
|
|
return <FileText className="h-4 w-4 text-red-500 flex-shrink-0" />;
|
|
}
|
|
if (['ppt', 'pptx', 'hpt', 'keynote'].includes(ext)) {
|
|
return <Presentation className="h-4 w-4 text-orange-600 flex-shrink-0" />;
|
|
}
|
|
if (['xls', 'xlsx', 'hcdt', 'numbers'].includes(ext)) {
|
|
return <FileText className="h-4 w-4 text-green-600 flex-shrink-0" />;
|
|
}
|
|
if (['mp4', 'avi', 'mov', 'wmv', 'webm', 'ogg'].includes(ext)) {
|
|
return <Video className="h-4 w-4 text-purple-500 flex-shrink-0" />;
|
|
}
|
|
if (['mp3', 'wav', 'flac', 'aac'].includes(ext)) {
|
|
return <Music className="h-4 w-4 text-orange-500 flex-shrink-0" />;
|
|
}
|
|
if (['zip', 'rar', '7z', 'tar'].includes(ext)) {
|
|
return <Archive className="h-4 w-4 text-yellow-500 flex-shrink-0" />;
|
|
}
|
|
return <File className="h-4 w-4 text-blue-500 flex-shrink-0" />;
|
|
};
|
|
|
|
return (
|
|
<div key={file.objid || index} className="flex items-center space-x-2 bg-white rounded p-2 text-xs">
|
|
{getFileIcon(file.realFileName || file.name || '')}
|
|
<div className="flex-1 min-w-0">
|
|
<p className="truncate font-medium text-gray-900">
|
|
{file.realFileName || file.name || `파일 ${index + 1}`}
|
|
</p>
|
|
<p className="text-gray-500">
|
|
{file.fileSize ? `${Math.round(file.fileSize / 1024)} KB` : ''}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<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-xs font-medium text-gray-700 mb-1">업로드된 파일 (0)</p>
|
|
<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(isWidgetComponent(component) ? (component.widgetType as WebType) : undefined)}
|
|
{isWidgetComponent(component) ? component.widgetType || "widget" : component.type}
|
|
</div>
|
|
)}
|
|
{type !== "widget" && type}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// 기존 RealtimePreview와의 호환성을 위한 export
|
|
export { RealtimePreviewDynamic as RealtimePreview };
|
|
|
|
RealtimePreviewDynamic.displayName = "RealtimePreviewDynamic";
|