101 lines
2.8 KiB
TypeScript
101 lines
2.8 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React from "react";
|
||
|
|
import { WebTypeRegistry } from "./WebTypeRegistry";
|
||
|
|
import { WebTypeConfigPanelProps } from "./types";
|
||
|
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||
|
|
import { Settings } from "lucide-react";
|
||
|
|
|
||
|
|
interface DynamicConfigPanelProps extends WebTypeConfigPanelProps {
|
||
|
|
widgetType: string;
|
||
|
|
showFallback?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 동적 설정 패널 렌더러
|
||
|
|
* 등록된 웹타입에 따라 적절한 설정 패널을 동적으로 렌더링
|
||
|
|
*/
|
||
|
|
export const DynamicConfigPanel: React.FC<DynamicConfigPanelProps> = React.memo(
|
||
|
|
({
|
||
|
|
widgetType,
|
||
|
|
component,
|
||
|
|
onUpdateComponent,
|
||
|
|
onUpdateProperty,
|
||
|
|
showFallback = true,
|
||
|
|
}) => {
|
||
|
|
// 웹타입 정의 조회
|
||
|
|
const definition = WebTypeRegistry.get(widgetType);
|
||
|
|
|
||
|
|
// 웹타입이 등록되지 않은 경우
|
||
|
|
if (!definition) {
|
||
|
|
console.warn(`Unknown web type for config panel: ${widgetType}`);
|
||
|
|
|
||
|
|
if (!showFallback) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Alert variant="secondary" className="w-full">
|
||
|
|
<Settings className="h-4 w-4" />
|
||
|
|
<AlertDescription>
|
||
|
|
<code>{widgetType}</code> 타입에 대한 설정 패널이 없습니다.
|
||
|
|
</AlertDescription>
|
||
|
|
</Alert>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 설정 패널이 정의되지 않은 경우
|
||
|
|
if (!definition.configPanel) {
|
||
|
|
if (!showFallback) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Card className="w-full">
|
||
|
|
<CardHeader className="pb-3">
|
||
|
|
<CardTitle className="text-sm flex items-center gap-2">
|
||
|
|
<Settings className="h-4 w-4" />
|
||
|
|
{definition.name} 설정
|
||
|
|
</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="pt-0">
|
||
|
|
<Alert variant="secondary">
|
||
|
|
<AlertDescription className="text-xs">
|
||
|
|
이 웹타입에는 별도의 설정 옵션이 없습니다.
|
||
|
|
</AlertDescription>
|
||
|
|
</Alert>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 비활성화된 웹타입인 경우
|
||
|
|
if (definition.isActive === false) {
|
||
|
|
return (
|
||
|
|
<Alert variant="secondary" className="w-full">
|
||
|
|
<Settings className="h-4 w-4" />
|
||
|
|
<AlertDescription>
|
||
|
|
비활성화된 웹타입입니다: <code>{widgetType}</code>
|
||
|
|
</AlertDescription>
|
||
|
|
</Alert>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 등록된 설정 패널 컴포넌트 렌더링
|
||
|
|
const ConfigPanelComponent = definition.configPanel;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ConfigPanelComponent
|
||
|
|
component={component}
|
||
|
|
onUpdateComponent={onUpdateComponent}
|
||
|
|
onUpdateProperty={onUpdateProperty}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
DynamicConfigPanel.displayName = "DynamicConfigPanel";
|
||
|
|
|
||
|
|
|