바차트 포매터 적용

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

@@ -6,6 +6,7 @@ import {
   type ChartConfig
 } from "./lib/chart";
 import type { CSSProperties } from "react";
+import { formatCommaNumber } from "./lib/function";
 
 const customStyles = {
   legendContainer: {
@@ -119,6 +120,7 @@ export default function Chart({chartConfig=undefined, chartData=[], chartTitle='
               fontWeight={500}
               domain={[0, globalMax]}
               ticks={ticks}
+              tickFormatter={(value) => formatCommaNumber(value)}
               label={yFieldText ? { value: yFieldText, className:"text-[15px] font-bold", position: 'insideLeft', angle: -90, offset: -30 } : undefined}
             />
             <ChartTooltip cursor={false} content={<CustomTooltip active={undefined} payload={undefined} label={undefined} />}/>

packages/common/business_components/src/ui/chart/lib/function.tsx

@@ -0,0 +1,12 @@
+// 숫자입력시 , 삽입
+export const formatCommaNumber = (
+  value: number | string | undefined | null
+): string => {
+  if (value === undefined || value === null || value === "") return "";
+  const num = Number(value);
+  // 숫자로 변환할 수 없는 값이 들어올 경우 빈 문자열을 반환하여 예상치 못한 "NaN" 출력을 방지합니다.
+  if (isNaN(num)) {
+    return "";
+  }
+  return num.toLocaleString();
+};