From 71e70c842be42e766fcb4319f73186db114e791b Mon Sep 17 00:00:00 2001
From: YangJinSoo94 <jschrome782@gmail.com>
Date: Thu, 13 Mar 2025 10:57:27 +0900
Subject: [PATCH] =?UTF-8?q?LineBar=20=EB=B2=94=EB=A1=80=20=EB=B0=8F=20ui?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/ui/chart/LineBarChart.tsx             |  5 +-
 .../src/ui/chart/LineChart.tsx                | 88 +++++++++++++++----
 2 files changed, 73 insertions(+), 20 deletions(-)

diff --git a/packages/common/business_components/src/ui/chart/LineBarChart.tsx b/packages/common/business_components/src/ui/chart/LineBarChart.tsx
index b8565c3bf..5f2ae4715 100644
--- a/packages/common/business_components/src/ui/chart/LineBarChart.tsx
+++ b/packages/common/business_components/src/ui/chart/LineBarChart.tsx
@@ -29,7 +29,8 @@ const styles = {
     paddingBottom: "3px",
   } as React.CSSProperties,
   tooltipText: {
-    fontSize: "10px",
+    fontSize: "11px",
+    fontWeight:"bold",
   } as React.CSSProperties,
   legendContainer: {
     display: "flex",
@@ -87,7 +88,7 @@ export default function LineBarchart(props: { chartConfig: ChartConfig; chartDat
           <ChartContainer config={props.chartConfig} className="h-full w-full" >
             <ComposedChart data={props.chartData} className="h-full ">
               <CartesianGrid strokeDasharray="3 3" />
-              <XAxis dataKey="label" />
+              <XAxis dataKey="label" fontSize="8px" fontWeight="bold"/>
               {/* 왼쪽 Y축: lineVal (정상) */}
               <YAxis yAxisId="left" orientation="left" />
               {/* 오른쪽 Y축: barVal (위에서 아래로 반전) */}
diff --git a/packages/common/business_components/src/ui/chart/LineChart.tsx b/packages/common/business_components/src/ui/chart/LineChart.tsx
index 8a1168940..e68459bf0 100644
--- a/packages/common/business_components/src/ui/chart/LineChart.tsx
+++ b/packages/common/business_components/src/ui/chart/LineChart.tsx
@@ -10,7 +10,71 @@ import {
   ChartTooltipContent,
   type ChartConfig
 } from "./lib/chart";
-import { CartesianGrid, Line, LineChart, XAxis } from "recharts";
+import { CartesianGrid, Legend, Line, LineChart, Tooltip, XAxis, YAxis } from "recharts";
+
+/** 차트 기본 스타일 */
+const styles = {
+  tooltipDiv: {
+    borderRadius: "5px",
+    backgroundColor: "white",
+    padding: "10px",
+    boxShadow: "0px 2px 10px rgba(0,0,0,0.2)",
+    width: "180px", // 적절한 크기로 설정
+  } as React.CSSProperties,
+  tooltipLabel: {
+    fontWeight: "bold",
+    fontSize: "12px",
+    marginBottom: "5px",
+    borderBottom: "1px solid #ddd",
+    paddingBottom: "3px",
+  } as React.CSSProperties,
+  tooltipText: {
+    fontSize: "11px",
+    fontWeight:"bold",
+  } as React.CSSProperties,
+  legendContainer: {
+    display: "flex",
+    justifyContent: "center",
+    gap: "20px",
+    fontSize: "9px",
+    fontWeight : "bold",
+    marginTop: "10px",
+  } as CSSProperties,
+};
+
+// 커스텀 툴팁
+const CustomTooltip = ({ active, payload, label }) => {
+  if (active && payload && payload.length) {
+    return (
+      <div style={styles.tooltipDiv}>
+        <p style={styles.tooltipLabel}>{label}</p>
+        {payload.map((item, index) => (
+          <div key={index} style={{ marginTop: "10px", display: "flex", alignItems: "center", gap: "8px" }}>
+            {/* 색상 박스 추가 (범례 색상과 동일) */}
+            <div style={{ width: "10px", height: "10px", backgroundColor: item.color, borderRadius: "50%" }}></div>
+            <span style={styles.tooltipText}>{`${item.name}: ${item.value}`}</span>
+          </div>
+        ))}
+      </div>
+    );
+  }
+  return null;
+};
+
+// 커스텀 범례 (글씨 크기 키우기 + 스타일 추가)
+const CustomLegend = (props: any) => {
+  const { payload } = props;
+  return (
+    <div style={styles.legendContainer}>
+      {payload.map((entry, index) => (
+        <div key={`legend-${index}`} style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+          <div style={{ width: "12px", height: "12px", backgroundColor: entry.color, borderRadius: "50%" }}></div>
+          <span>{entry.value}</span>
+        </div>
+      ))}
+    </div>
+  );
+};
 
 export default function Linechart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; chartTitle:string}) {
   return (
@@ -24,23 +88,11 @@ export default function Linechart(props: { chartConfig: ChartConfig; chartData:
           <ChartContainer config={props.chartConfig} className="h-full w-full">
             <LineChart data={props.chartData} className="h-full">
               <CartesianGrid vertical={false} />
-              <XAxis
-                dataKey="month"
-                tickLine={false}
-                axisLine={false}
-                tickMargin={8}
-                tickFormatter={(value) => value.slice(0, 3)}
-              />
-              <ChartTooltip
-                cursor={false}
-                content={<ChartTooltipContent hideLabel />}
-              />
-              <Line
-                dataKey="val"
-                type="linear"
-                strokeWidth={2}
-                dot={false}
-              />
+              <XAxis dataKey="label" fontSize="8px" fontWeight="bold"/>
+              <YAxis yAxisId="left" orientation="left" />
+              <Tooltip content={<CustomTooltip active={undefined} payload={undefined} label={undefined} />} />
+              <Legend content={CustomLegend}/>
+              <Line yAxisId="left" dataKey="val" type="linear" strokeWidth={2} dot={false} name="값"/>
             </LineChart>
           </ChartContainer>
         </div>