도넛바 차트 에러 수정

packages/common/business_components/src/ui/chart/DoughnutChart.tsx

@@ -6,22 +6,13 @@ import {
   Card,
   CardContent
 } from "./lib/card";
-import { ChartContainer, ChartTooltip } from "./lib/chart";
+import { ChartContainer, ChartTooltip, type ChartConfig } from "./lib/chart";
 
 type ChartDataItem = {
   label: string;
   val: number;
 };
 
-type ChartConfigItem = {
-  label: string;
-  fill: string;
-};
-
-type ChartConfig = {
-  [key: string]: ChartConfigItem;
-};
-
 type TooltipPayloadItem = {
   name: string;
   value: number;
@@ -47,20 +38,6 @@ type LegendProps = {
   payload?: LegendEntry[];
 };
 
-/** 차트 기본 스타일 */
-/*
-const customStyles = {
-  legendContainer: {
-    display: "flex",
-    justifyContent: "center",
-    gap: "20px",
-    fontSize: "9px",
-    fontWeight: "bold",
-    marginTop: "10px",
-  } as CSSProperties,
-};
-*/
-
 /** 차트 기본 스타일 (라인차트와 동일하게) */
 const customStyles = {
   legendContainer: {
@@ -99,25 +76,6 @@ const CustomTooltip = ({ active, payload, label }: {
   return null;
 };
 
-// 커스텀 범례
-/*
-const CustomLegend = (props: LegendProps) => {
-  const { payload } = props;
-  if (!payload) return null;
-
-  return (
-    <div style={customStyles.legendContainer}>
-      {payload.map((entry: LegendEntry, index: number) => (
-        <div key={`legend-${index}`} className="flex items-center gap-2">
-          <div className="w-[14px] h-[14px] ml-10" style={{ backgroundColor: entry.fill }}></div>
-          <span className="text-[12px]">{entry.value}</span>
-        </div>
-      ))}
-    </div>
-  );
-};
-*/
-
 const CustomLegend = (props: LegendProps) => {
   const { payload } = props;
   if (!payload) return null;
@@ -154,14 +112,20 @@ const CustomLegend = (props: LegendProps) => {
 };
 
 export default function DoughnutChart(props: { 
-  chartConfig: any; 
+  chartConfig: ChartConfig; 
   chartData: ChartDataItem[] | undefined; 
   chartTitle: string
 }) {
   const legendData = props.chartData?.map(item => ({
     value: item.label,
-    fill: props.chartConfig?.[item.label]?.fill || 'blue',
+    fill: props.chartConfig?.[item.label]?.color || 'blue',
+    payload: {
+      label: item.label,
+      val: item.val,
+      fill: props.chartConfig?.[item.label]?.color || 'blue'
+    }
   })) ?? [];
+  
   return (
     <Card className="flex flex-col">
       <CardContent className="flex-1 pb-0">
@@ -183,7 +147,7 @@ export default function DoughnutChart(props: {
               <Pie
                 data={props.chartData?.map(item => ({
                   ...item,
-                  fill: props.chartConfig[item.label]?.fill || 'blue'
+                  fill: props.chartConfig[item.label]?.color || 'blue'
                 }))}
                 dataKey="val"
                 nameKey="label"