56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { ComponentData } from "@/types/screen";
|
|
import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
|
|
import { Progress } from "@/components/ui/progress";
|
|
|
|
// 진행률 바 컴포넌트 렌더러
|
|
const ProgressBarRenderer: ComponentRenderer = ({ component, ...props }) => {
|
|
const config = component.componentConfig || {};
|
|
const {
|
|
label = "진행률",
|
|
value = 65,
|
|
max = 100,
|
|
showPercentage = true,
|
|
showValue = true,
|
|
color = "#3b82f6",
|
|
style = {},
|
|
} = config;
|
|
|
|
const percentage = Math.round((value / max) * 100);
|
|
|
|
return (
|
|
<div className="flex h-full w-full flex-col justify-center p-4" style={style}>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium text-gray-700">{label}</span>
|
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
|
{showValue && (
|
|
<span>
|
|
{value}/{max}
|
|
</span>
|
|
)}
|
|
{showPercentage && <span>({percentage}%)</span>}
|
|
</div>
|
|
</div>
|
|
<Progress
|
|
value={percentage}
|
|
className="h-2"
|
|
style={
|
|
{
|
|
"--progress-background": color,
|
|
} as React.CSSProperties
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// 레지스트리에 등록
|
|
componentRegistry.register("progress", ProgressBarRenderer);
|
|
componentRegistry.register("progress-bar", ProgressBarRenderer);
|
|
|
|
export { ProgressBarRenderer };
|