58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React from "react";
|
||
|
|
import { ComponentData } from "@/types/screen";
|
||
|
|
import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
|
||
|
|
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||
|
|
import { Info, AlertTriangle, CheckCircle, XCircle } from "lucide-react";
|
||
|
|
|
||
|
|
// 알림 컴포넌트 렌더러
|
||
|
|
const AlertRenderer: ComponentRenderer = ({ component, ...props }) => {
|
||
|
|
const config = component.componentConfig || {};
|
||
|
|
const {
|
||
|
|
title = "알림 제목",
|
||
|
|
message = "알림 메시지입니다.",
|
||
|
|
type = "info", // info, warning, success, error
|
||
|
|
showIcon = true,
|
||
|
|
style = {},
|
||
|
|
} = config;
|
||
|
|
|
||
|
|
const getAlertIcon = () => {
|
||
|
|
switch (type) {
|
||
|
|
case "warning":
|
||
|
|
return <AlertTriangle className="h-4 w-4" />;
|
||
|
|
case "success":
|
||
|
|
return <CheckCircle className="h-4 w-4" />;
|
||
|
|
case "error":
|
||
|
|
return <XCircle className="h-4 w-4" />;
|
||
|
|
default:
|
||
|
|
return <Info className="h-4 w-4" />;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const getAlertVariant = () => {
|
||
|
|
switch (type) {
|
||
|
|
case "error":
|
||
|
|
return "destructive";
|
||
|
|
default:
|
||
|
|
return "default";
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex h-full w-full items-center p-4" style={style}>
|
||
|
|
<Alert variant={getAlertVariant() as any} className="w-full">
|
||
|
|
{showIcon && getAlertIcon()}
|
||
|
|
<AlertTitle>{title}</AlertTitle>
|
||
|
|
<AlertDescription>{message}</AlertDescription>
|
||
|
|
</Alert>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 레지스트리에 등록
|
||
|
|
componentRegistry.register("alert", AlertRenderer);
|
||
|
|
componentRegistry.register("alert-info", AlertRenderer);
|
||
|
|
|
||
|
|
export { AlertRenderer };
|