From 8c5f0a98956eb8f0b4ad9be033e387a6719ec350 Mon Sep 17 00:00:00 2001
From: YangJinSoo94 <jschrome782@gmail.com>
Date: Thu, 15 May 2025 13:40:57 +0900
Subject: [PATCH] =?UTF-8?q?barChart=20=EB=B2=94=EB=A1=80=20=ED=95=98?=
 =?UTF-8?q?=EB=8B=A8=EC=97=90=20=EC=9C=84=EC=B9=98=20=EB=B0=8F=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/ui/chart/BarChart.tsx                 | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/common/business_components/src/ui/chart/BarChart.tsx b/packages/common/business_components/src/ui/chart/BarChart.tsx
index 7d55ca4af..814e12620 100644
--- a/packages/common/business_components/src/ui/chart/BarChart.tsx
+++ b/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>