61 lines
2.4 KiB
TypeScript
61 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import { ComponentData } from "@/types/screen";
|
|
import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ChevronDown, ChevronUp } from "lucide-react";
|
|
|
|
// 접을 수 있는 패널 컴포넌트 렌더러
|
|
const PanelRenderer: ComponentRenderer = ({ component, children, ...props }) => {
|
|
const config = component.componentConfig || {};
|
|
const { title = "패널 제목", collapsible = true, defaultExpanded = true, style = {} } = config;
|
|
|
|
const [isExpanded, setIsExpanded] = useState(defaultExpanded);
|
|
|
|
return (
|
|
<Card
|
|
className="h-full w-full border-2 border-gray-200 shadow-lg hover:shadow-xl transition-all duration-300 hover:border-orange-300"
|
|
style={style}
|
|
>
|
|
<CardHeader className="pb-2 bg-gradient-to-r from-slate-50 to-gray-50 border-b border-gray-200">
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="text-lg font-semibold text-gray-800">{title}</CardTitle>
|
|
{collapsible && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setIsExpanded(!isExpanded)}
|
|
className="pointer-events-none h-6 w-6 p-0 hover:bg-orange-100 rounded-full"
|
|
disabled
|
|
>
|
|
{isExpanded ? <ChevronUp className="h-4 w-4 text-orange-600" /> : <ChevronDown className="h-4 w-4 text-orange-600" />}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</CardHeader>
|
|
{isExpanded && (
|
|
<CardContent className="flex-1 bg-white">
|
|
{children && React.Children.count(children) > 0 ? (
|
|
children
|
|
) : (
|
|
<div className="flex h-full items-center justify-center text-center p-8">
|
|
<div className="bg-gray-50 rounded-lg p-6 border-2 border-dashed border-gray-300">
|
|
<div className="text-sm text-gray-600 font-medium">패널 내용 영역</div>
|
|
<div className="mt-2 text-xs text-gray-400">컴포넌트를 여기에 배치하세요</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
)}
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
// 레지스트리에 등록
|
|
componentRegistry.register("panel", PanelRenderer);
|
|
componentRegistry.register("panel-collapsible", PanelRenderer);
|
|
|
|
export { PanelRenderer };
|