barChart 범례 하단에 위치 및 수정

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

@@ -6,6 +6,19 @@ import {
   ChartTooltipContent,
   type ChartConfig
 } from "./lib/chart";
+import { styles } from "@common/assets";
+import type { CSSProperties } from "react";
+
+const styles = {
+  legendContainer: {
+    display: "flex",
+    justifyContent: "center",
+    gap: "20px",
+    fontSize: "9px",
+    fontWeight : "bold",
+    marginTop: "10px",
+  } as CSSProperties,
+};
 
 const tooltipClass = "!p-4 text-[12px] w-[9vw] h-[5vw]";
 
@@ -19,6 +32,21 @@ type BarChartProps = {
   showLegend?: boolean;
 }
 
+// 커스텀 범례 (글씨 크기 키우기 + 스타일 추가)
+const CustomLegend = (props: any) => {
+  const { payload } = props;
+  return (
+    <div style={styles.legendContainer}>
+      {payload.map((entry, index) => (
+        <div key={`legend-${index}`} className="flex items-center gap-2">
+          <div className="w-[14px] h-[14px] ml-10" style={{ backgroundColor: entry.color }}></div>
+          <span className="text-[12px]">{entry.value}</span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
 export default function Chart({chartConfig=undefined, chartData=[], chartTitle='차트', chartClassName='w-full h-full', graphSize=40, yFieldText='', showLegend=false} : BarChartProps) {
   const colors = ["#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4", "#FFEEAD", "#D4A5A5"];
 
@@ -63,7 +91,7 @@ export default function Chart({chartConfig=undefined, chartData=[], chartTitle='
                   />
                 ))
               )}
-            {showLegend && <Legend verticalAlign="top" height={32} iconSize={15} className="!text-[20px]" fontSize={20} align="right"/>}
+            {showLegend && <Legend content={CustomLegend}/>}
           </BarChart>
         </ChartContainer>
       </div>