4f10b5e42d
447+ 파일, 4500+ 줄 변경: - gray-* → border/bg-muted/text-foreground/text-muted-foreground - blue-* → primary/ring - red-* → destructive - green-* → emerald (일관성) - indigo-* → primary - yellow/orange → amber (통일) - dark mode 변형도 시맨틱 토큰으로 변환 Made-with: Cursor
55 lines
2.1 KiB
TypeScript
55 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { ComponentData, AreaComponent, AreaLayoutType } from "@/types/screen";
|
|
import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
|
|
import { Square, CreditCard, Layout, Grid3x3, Columns, Rows, SidebarOpen, Folder } from "lucide-react";
|
|
|
|
// 영역 레이아웃에 따른 아이콘 반환
|
|
const getAreaIcon = (layoutType: AreaLayoutType): React.ReactNode => {
|
|
const iconMap: Record<AreaLayoutType, React.ReactNode> = {
|
|
container: <Square className="h-4 w-4" />,
|
|
card: <CreditCard className="h-4 w-4" />,
|
|
panel: <Layout className="h-4 w-4" />,
|
|
grid: <Grid3x3 className="h-4 w-4" />,
|
|
flex_row: <Columns className="h-4 w-4" />,
|
|
flex_column: <Rows className="h-4 w-4" />,
|
|
sidebar: <SidebarOpen className="h-4 w-4" />,
|
|
section: <Folder className="h-4 w-4" />,
|
|
};
|
|
return iconMap[layoutType] || <Square className="h-4 w-4" />;
|
|
};
|
|
|
|
// 영역 렌더링 함수
|
|
const renderArea = (component: ComponentData, children?: React.ReactNode) => {
|
|
const area = component as AreaComponent;
|
|
const { title, description, layoutType = "container" } = area;
|
|
|
|
const renderPlaceholder = () => (
|
|
<div className="flex h-full flex-col items-center justify-center text-center">
|
|
{getAreaIcon(layoutType)}
|
|
<div className="mt-2 text-sm font-medium text-muted-foreground">{title || "영역"}</div>
|
|
{description && <div className="mt-1 text-xs text-muted-foreground/70">{description}</div>}
|
|
<div className="mt-1 text-xs text-muted-foreground/70">레이아웃: {layoutType}</div>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="relative h-full w-full rounded border border-dashed border-input bg-muted p-2">
|
|
<div className="relative h-full w-full">
|
|
{children && React.Children.count(children) > 0 ? children : renderPlaceholder()}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// 영역 컴포넌트 렌더러
|
|
const AreaRenderer: ComponentRenderer = ({ component, children, ...props }) => {
|
|
return renderArea(component, children);
|
|
};
|
|
|
|
// 레지스트리에 등록
|
|
componentRegistry.register("area", AreaRenderer);
|
|
|
|
export { AreaRenderer };
|