컴포넌트 화면편집기에 배치

frontend/lib/registry/components/CardRenderer.tsx

@@ -0,0 +1,61 @@
+"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 p-4">
+        {children && React.Children.count(children) > 0 ? (
+          children
+        ) : isInteractive ? (
+          // 실제 할당된 화면에서는 설정된 내용 표시
+          <div className="flex h-full items-start text-sm text-gray-700">
+            <div className="w-full">
+              <div className="mb-2 font-medium">{content}</div>
+              <div className="text-xs text-gray-500">실제 할당된 화면에서 표시되는 카드입니다.</div>
+            </div>
+          </div>
+        ) : (
+          // 디자이너에서는 플레이스홀더 표시
+          <div className="flex h-full items-center justify-center text-center">
+            <div>
+              <div className="text-sm text-gray-600">카드 내용 영역</div>
+              <div className="mt-1 text-xs text-gray-400">컴포넌트를 여기에 배치하세요</div>
+            </div>
+          </div>
+        )}
+      </CardContent>
+      {showFooter && (
+        <CardFooter>
+          <div className="text-sm text-gray-500">카드 푸터</div>
+        </CardFooter>
+      )}
+    </Card>
+  );
+};
+
+// 레지스트리에 등록
+componentRegistry.register("card", CardRenderer);
+
+export { CardRenderer };