42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React from "react";
|
||
|
|
import { ComponentData } from "@/types/screen";
|
||
|
|
import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
|
||
|
|
import { Loader2 } from "lucide-react";
|
||
|
|
|
||
|
|
// 로딩 스피너 컴포넌트 렌더러
|
||
|
|
const LoadingRenderer: ComponentRenderer = ({ component, ...props }) => {
|
||
|
|
const config = component.componentConfig || {};
|
||
|
|
const {
|
||
|
|
text = "로딩 중...",
|
||
|
|
size = "default", // small, default, large
|
||
|
|
showText = true,
|
||
|
|
style = {},
|
||
|
|
} = config;
|
||
|
|
|
||
|
|
const getSizeClass = () => {
|
||
|
|
switch (size) {
|
||
|
|
case "small":
|
||
|
|
return "h-4 w-4";
|
||
|
|
case "large":
|
||
|
|
return "h-8 w-8";
|
||
|
|
default:
|
||
|
|
return "h-6 w-6";
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex h-full w-full flex-col items-center justify-center gap-2" style={style}>
|
||
|
|
<Loader2 className={`animate-spin text-blue-600 ${getSizeClass()}`} />
|
||
|
|
{showText && <div className="text-sm text-gray-600">{text}</div>}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 레지스트리에 등록
|
||
|
|
componentRegistry.register("loading", LoadingRenderer);
|
||
|
|
componentRegistry.register("loading-spinner", LoadingRenderer);
|
||
|
|
|
||
|
|
export { LoadingRenderer };
|