From 7c7cc47d20c3a7b440ba3bb576407605b29233ca Mon Sep 17 00:00:00 2001
From: YangJinSoo94 <jschrome782@gmail.com>
Date: Mon, 19 May 2025 09:52:14 +0900
Subject: [PATCH] =?UTF-8?q?-chart=20yFieldText2=20=EC=B6=94=EA=B0=80(?=
 =?UTF-8?q?=EB=9D=BC=EC=9D=B8=EB=B0=94=EB=8A=94=202=EA=B0=9C)=20-=EB=8C=80?=
 =?UTF-8?q?=EC=8B=9C=EB=B3=B4=EB=93=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/ui/chart/LineBarChart.tsx             | 11 +++++++----
 .../src/ui/chart/LineChart.tsx                |  2 +-
 .../src/ui/chart/index.tsx                    | 19 +++++++++++++++++--
 3 files changed, 25 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 35d757619..6db4c3b0a 100644
--- a/packages/common/business_components/src/ui/chart/LineBarChart.tsx
+++ b/packages/common/business_components/src/ui/chart/LineBarChart.tsx
@@ -5,6 +5,7 @@ import {
   ChartContainer,
   type ChartConfig
 } from "./lib/chart";
+import type { ContentType } from "recharts/types/component/DefaultLegendContent";
 
 // 툴팁 커스텀 css
 /** 차트 기본 스타일 */
@@ -25,7 +26,8 @@ type LineBarChartProps = {
   chartTitle: string;
   chartClassName?: string;
   graphSize?: number;
-  yFieldText?: string;
+  yFieldText?: string | undefined;
+  yFieldText2?: string | undefined;
   showLegend?: boolean;
 }
 
@@ -83,6 +85,7 @@ export default function LineBarchart({
   chartClassName = 'w-full h-full',
   graphSize = 40,
   yFieldText,
+  yFieldText2,
   showLegend = true
 }: LineBarChartProps) {
   if (!chartData || chartData.length === 0) {
@@ -110,11 +113,11 @@ export default function LineBarchart({
             <CartesianGrid strokeDasharray="3 3" />
             <XAxis dataKey="label" fontSize="8px" fontWeight="bold"/>
             {/* 왼쪽 Y축: lineVal */}
-            <YAxis yAxisId="left" fontSize="8px" fontWeight="bold" orientation="left" label={{ value: yFieldText, angle: -90, position: 'insideLeft' }} />
+            {yFieldText && <YAxis yAxisId="left" className="text-[12px] font-bold" orientation="left" label={{ value: yFieldText, angle: -90, position: 'insideLeft' }} />}
             {/* 오른쪽 Y축: barVal */}
-            <YAxis yAxisId="right" fontSize="8px" fontWeight="bold" orientation="right" reversed />
+            {yFieldText2 && <YAxis yAxisId="right" className="text-[12px] font-bold" fontWeight="bold" orientation="right" label={{ value: yFieldText2, angle: -90, position: 'insideRight' }} />}
             <Tooltip content={<CustomTooltip active={undefined} payload={undefined} label={undefined} />} />
-            {showLegend && <Legend content={CustomLegend}/>}
+            {showLegend && <Legend content={CustomLegend as ContentType}/>}
             {/* 바 차트 (오른쪽 Y축 사용) */}
             <Bar 
               yAxisId="right" 
diff --git a/packages/common/business_components/src/ui/chart/LineChart.tsx b/packages/common/business_components/src/ui/chart/LineChart.tsx
index 1679f8d45..b2a147ee0 100644
--- a/packages/common/business_components/src/ui/chart/LineChart.tsx
+++ b/packages/common/business_components/src/ui/chart/LineChart.tsx
@@ -123,7 +123,7 @@ export default function Linechart({
           >
             <CartesianGrid vertical={false} />
             <XAxis dataKey="label" fontSize="8px" fontWeight="bold"/>
-            <YAxis yAxisId="left" fontSize="8px" fontWeight="bold" orientation="left" label={{ value: yFieldText, angle: -90, position: 'insideLeft' }} />
+            <YAxis yAxisId="left" className="text-[12px] font-bold" orientation="left" label={{ value: yFieldText, className:"text-[12px] foont-bold", angle: -90, position: 'insideLeft' }} />
             <Tooltip content={<CustomTooltip />} />
             {showLegend && <Legend content={CustomLegend as ContentType}/>}
             {Object.keys(chartData).map((key) => {
diff --git a/packages/common/business_components/src/ui/chart/index.tsx b/packages/common/business_components/src/ui/chart/index.tsx
index 87cabc18a..b30eef3c3 100644
--- a/packages/common/business_components/src/ui/chart/index.tsx
+++ b/packages/common/business_components/src/ui/chart/index.tsx
@@ -18,6 +18,20 @@ const CHART_FORM = {
   LINEBAR : 'linebar'
 };
 
+/**
+ * 차트 컴포넌트
+ * @param chartForm 차트 형태
+ * @param chartConfig 차트 설정
+ * @param chartData 차트 데이터
+ * @param chartTitle 차트 제목
+ * @param chartClassName 차트 클래스명
+ * @param graphSize 차트 크기
+ * @param yFieldText 차트 Y축 텍스트
+ * @param yFieldText2 차트 Y축 텍스트2(라인바 차트때 사용)
+ * @param showLegend 차트 범례 표시 여부
+ * @returns 
+ */
+
 type MainChartProps = {
   chartForm: string;
   chartConfig: any;
@@ -25,7 +39,8 @@ type MainChartProps = {
   chartTitle: string;
   chartClassName?: string;
   graphSize?: number;
-  yFieldText? : string;
+  yFieldText? : string | undefined;
+  yFieldText2? : string | undefined;
   showLegend? : boolean;
 }
 
@@ -47,7 +62,7 @@ function MainChart(props: MainChartProps) {
     );
   } else if (props.chartForm == CHART_FORM.LINEBAR){
     return (
-      <LineBarchart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle} chartClassName={props.chartClassName} graphSize={props.graphSize} yFieldText={props.yFieldText} showLegend={props.showLegend}>
+      <LineBarchart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle} chartClassName={props.chartClassName} graphSize={props.graphSize} yFieldText={props.yFieldText} yFieldText2={props.yFieldText2} showLegend={props.showLegend}>
       </LineBarchart>
     );
   }