From 31b8152d37b8fbfb40e92a7829976c954102966c Mon Sep 17 00:00:00 2001
From: jsyang <mind-one003@mind-one.co.kr>
Date: Wed, 27 Aug 2025 14:56:02 +0900
Subject: [PATCH] =?UTF-8?q?=EC=B0=A8=ED=8A=B8=20=EC=A2=8C=EC=9A=B0=20axis?=
 =?UTF-8?q?=20custom=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/ui/chart/LineBarChart.tsx             | 48 ++++++++++++++++---
 .../src/ui/chart/LineChart.tsx                | 36 +++++++++++++-
 2 files changed, 77 insertions(+), 7 deletions(-)

diff --git a/packages/common/business_components/src/ui/chart/LineBarChart.tsx b/packages/common/business_components/src/ui/chart/LineBarChart.tsx
index 9f9a4feec..2a2ba2b1c 100644
--- a/packages/common/business_components/src/ui/chart/LineBarChart.tsx
+++ b/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,18 +183,22 @@ export default function LineBarchart({
               yAxisId="left" 
               className="text-[12px] font-bold" 
               tickCount={6}
-              orientation="left" 
-              domain={[0, Math.ceil(lineMaxValue * 1)]}
-              label={{ value: yFieldText, angle: -90, position: 'insideLeft', offset: -8  }} 
+              tickFormatter={(value) => 
+                typeof value === "number" ? value.toLocaleString() : value
+              }
+              orientation="left"
+              label={(props) => <CustomAxisText {...props} fieldText={yFieldText} position="left" />}
             />}
             {/* 오른쪽 Y축: barVal */}
             {yFieldText2 && <YAxis 
               yAxisId="right" 
               className="text-[12px] font-bold" 
               tickCount={6} 
-              orientation="right" 
-              domain={[0, Math.ceil(barMaxValue * 1)]}
-              label={{ value: yFieldText2, angle: -90, position: 'insideRight' }} 
+              orientation="right"
+              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} />} />
diff --git a/packages/common/business_components/src/ui/chart/LineChart.tsx b/packages/common/business_components/src/ui/chart/LineChart.tsx
index a76807bae..314a0b240 100644
--- a/packages/common/business_components/src/ui/chart/LineChart.tsx
+++ b/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) => {