86 lines
3.0 KiB
TypeScript
86 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { ComponentData, WidgetComponent } from "@/types/screen";
|
|
import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
|
|
import { Input } from "@/components/ui/input";
|
|
import { DynamicWebTypeRenderer } from "../DynamicWebTypeRenderer";
|
|
|
|
// 위젯 컴포넌트 렌더러
|
|
const WidgetRenderer: ComponentRenderer = ({ component, ...props }) => {
|
|
// 위젯 컴포넌트가 아닌 경우 빈 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("WidgetRenderer - 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 {
|
|
// 파일 위젯의 경우 인터랙션 허용 (pointer-events-none 제거)
|
|
const isFileWidget = widgetType === "file";
|
|
|
|
return (
|
|
<div className="flex h-full flex-col">
|
|
<div className={isFileWidget ? "flex-1" : "pointer-events-none flex-1"}>
|
|
<DynamicWebTypeRenderer
|
|
webType={widgetType}
|
|
props={{
|
|
...commonProps,
|
|
component: widget,
|
|
value: undefined, // 미리보기이므로 값은 없음
|
|
readonly: readonly,
|
|
isDesignMode: true, // 디자인 모드임을 명시
|
|
...props, // 모든 추가 props 전달 (sortBy, sortOrder 등)
|
|
}}
|
|
config={widget.webTypeConfig}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
} catch (error) {
|
|
console.error(`웹타입 "${widgetType}" 렌더링 실패:`, error);
|
|
// 오류 발생 시 폴백으로 기본 input 렌더링
|
|
return (
|
|
<div className="flex h-full flex-col">
|
|
<div className="pointer-events-none flex-1">
|
|
<Input type="text" {...commonProps} placeholder={`${widgetType} (렌더링 오류)`} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
// 웹타입이 없는 경우 기본 input 렌더링 (하위 호환성)
|
|
return (
|
|
<div className="flex h-full flex-col">
|
|
<div className="pointer-events-none flex-1">
|
|
<Input type="text" {...commonProps} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// 레지스트리에 등록
|
|
componentRegistry.register("widget", WidgetRenderer);
|
|
|
|
export { WidgetRenderer };
|