차트 좌우 axis custom 추가

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

@@ -7,6 +7,7 @@ import {
 } from "./lib/chart";
 import type { ContentType } from "recharts/types/component/DefaultLegendContent";
 import type { set } from "date-fns";
+import React from "react";
 
 // 툴크 커스텀 css
 /** 차트 기본 스타일 */
@@ -126,6 +127,37 @@ export default function LineBarchart({
     monthTicks = getTicks(chartData);
   }
 
+  const CustomAxisText : React.FC<{ viewBox: any, fieldText: string, position:string }> = ({ viewBox, fieldText, position }) => {
+    const { x, y, width, height } = viewBox; // 축 영역
+    const padding = 5; // 차트 바깥으로 띄우기
+    
+    if('left' == position) {
+      return (
+        <text
+          x={x - padding}                // 맨 좌측 바깥
+          y={y + height / 2}             // 수직 중앙
+          textAnchor="middle"
+          transform={`rotate(-90, ${x - padding}, ${y + height / 2})`}
+          className="text-[12px] font-bold"
+        >
+          {fieldText}
+        </text>
+      );
+    }else{
+      return (
+        <text
+          x={x + height / 2 }                // 맨 좌측 바깥
+          y={y - width + padding }             // 수직 중앙
+          textAnchor="middle"
+          transform={`rotate(90, ${x}, ${y})`}
+          className="text-[12px] font-bold"
+        >
+          {fieldText}
+        </text>
+      );
+    }
+  }
+
   return (
     <div className={chartClassName}>
       {chartTitle && chartTitle !== "" && chartTitle !== "undefined" ? (
@@ -151,9 +183,11 @@ export default function LineBarchart({
               yAxisId="left" 
               className="text-[12px] font-bold" 
               tickCount={6}
+              tickFormatter={(value) => 
+                typeof value === "number" ? value.toLocaleString() : value
+              }
               orientation="left"
-              domain={[0, Math.ceil(lineMaxValue * 1)]}
-              label={{ value: yFieldText, angle: -90, position: 'insideLeft', offset: -8  }} 
+              label={(props) => <CustomAxisText {...props} fieldText={yFieldText} position="left" />}
             />}
             {/* 오른쪽 Y축: barVal */}
             {yFieldText2 && <YAxis 
@@ -161,8 +195,10 @@ export default function LineBarchart({
               className="text-[12px] font-bold" 
               tickCount={6} 
               orientation="right"
-              domain={[0, Math.ceil(barMaxValue * 1)]}
-              label={{ value: yFieldText2, angle: -90, position: 'insideRight' }} 
+              tickFormatter={(value) => 
+                typeof value === "number" ? value.toLocaleString() : value
+              }
+              label={(props) => <CustomAxisText {...props} fieldText={yFieldText} position="right" />}
               reversed={true} 
             />}
             <Tooltip content={<CustomTooltip active={undefined} payload={undefined} label={undefined} />} />

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

@@ -129,6 +129,37 @@ const CustomLegend = (props: LegendProps) => {
   );
 };
 
+const CustomAxisText : React.FC<{ viewBox: any, fieldText: string, position:string }> = ({ viewBox, fieldText, position }) => {
+  const { x, y, width, height } = viewBox; // 축 영역
+  const padding = 5; // 차트 바깥으로 띄우기
+  
+  if('left' == position) {
+    return (
+      <text
+        x={x - padding}                // 맨 좌측 바깥
+        y={y + height / 2}             // 수직 중앙
+        textAnchor="middle"
+        transform={`rotate(-90, ${x - padding}, ${y + height / 2})`}
+        className="text-[12px] font-bold"
+      >
+        {fieldText}
+      </text>
+    );
+  }else{
+    return (
+      <text
+        x={x + height / 2 }                // 맨 좌측 바깥
+        y={y - width + padding }             // 수직 중앙
+        textAnchor="middle"
+        transform={`rotate(90, ${x}, ${y})`}
+        className="text-[12px] font-bold"
+      >
+        {fieldText}
+      </text>
+    );
+  }
+}
+
 type DataType = {label: string; val: string};
 
 type ChartDataType = {
@@ -220,7 +251,10 @@ export default function Linechart({
               yAxisId="left" 
               className="text-[12px] font-bold"
               orientation="left"
-              label={{ value: yFieldText, className:"text-[12px] font-bold", angle: -90, position: 'insideLeft' }} />
+              tickFormatter={(value) => 
+                typeof value === "number" ? value.toLocaleString() : value
+              }
+              label={(props) => <CustomAxisText {...props} fieldText={yFieldText} position="left" />}/>
             <Tooltip content={<CustomTooltip />} />
             {showLegend && <Legend content={CustomLegend as ContentType}/>}
             {Object.keys(chartData).map((key) => {