62 lines
2.2 KiB
TypeScript
62 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { ComponentData } from "@/types/screen";
|
|
import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
|
|
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
|
|
|
|
// 카드 컴포넌트 렌더러
|
|
const CardRenderer: ComponentRenderer = ({ component, children, isInteractive = false, ...props }) => {
|
|
const config = component.componentConfig || {};
|
|
const { title = "카드 제목", content = "카드 내용 영역", showHeader = true, showFooter = false, style = {} } = config;
|
|
|
|
console.log("🃏 CardRenderer 렌더링:", {
|
|
componentId: component.id,
|
|
isInteractive,
|
|
config,
|
|
title,
|
|
content,
|
|
});
|
|
|
|
return (
|
|
<Card className="h-full w-full" style={style}>
|
|
{showHeader && (
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">{title}</CardTitle>
|
|
</CardHeader>
|
|
)}
|
|
<CardContent className="flex-1">
|
|
{children && React.Children.count(children) > 0 ? (
|
|
children
|
|
) : isInteractive ? (
|
|
// 실제 할당된 화면에서는 설정된 내용 표시
|
|
<div className="flex h-full items-start text-sm text-foreground">
|
|
<div className="w-full">
|
|
<div className="mb-2 font-medium">{content}</div>
|
|
<div className="text-xs text-muted-foreground">실제 할당된 화면에서 표시되는 카드입니다.</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
// 디자이너에서는 플레이스홀더 표시
|
|
<div className="flex h-full items-center justify-center text-center">
|
|
<div>
|
|
<div className="text-sm text-muted-foreground">카드 내용 영역</div>
|
|
<div className="mt-1 text-xs text-muted-foreground/70">컴포넌트를 여기에 배치하세요</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
{showFooter && (
|
|
<CardFooter>
|
|
<div className="text-sm text-muted-foreground">카드 푸터</div>
|
|
</CardFooter>
|
|
)}
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
// 레지스트리에 등록
|
|
componentRegistry.register("card", CardRenderer);
|
|
|
|
export { CardRenderer };
|