바차트, 라인차트 툴팁 커스텀화 진행(글씨크기, 위치, 사이즈 등)

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

@@ -32,12 +32,43 @@ type BarChartProps = {
   showLegend?: boolean;
 }
 
+// 커스텀 툴팁
+const CustomTooltip = ({ 
+  active, 
+  payload, 
+  label 
+}: {
+  active?: boolean;
+  payload?: Array<{
+    name: string;
+    value: number;
+    color: string;
+  }>;
+  label?: string;
+}) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="w-[180px] rounded bg-white p-2.5 shadow-[0px_2px_10px_rgba(0,0,0,0.2)]">
+        <p className="text-[12px] font-bold m-3">{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 className="text-[11px] font-bold">{` ${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) => (
+      {payload.map((entry, index: number) => (
         <div key={`legend-${index}`} className="flex items-center gap-2">
           <div className="w-[14px] h-[14px] ml-10" style={{ backgroundColor: entry.color }}></div>
           <span className="text-[12px]">{entry.value}</span>
@@ -77,7 +108,7 @@ export default function Chart({chartConfig=undefined, chartData=[], chartTitle='
               fontWeight={500}
               label={yFieldText ? { value: yFieldText, className:"text-[13px] foont-bold", position: 'top', textAnchor: 'middle', offset: 20 } : undefined}
             />
-            <ChartTooltip cursor={false} content={<ChartTooltipContent className={tooltipClass} indicator="dashed" />}/>
+            <ChartTooltip cursor={false} content={<CustomTooltip active={undefined} payload={undefined} label={undefined} />}/>
             {chartData && chartData.length > 0 && (
               Object.keys(chartData[0])
                 .filter(key => key !== "label")

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

@@ -1,16 +1,14 @@
 "use client"
 import type { CSSProperties } from "react";
+import { CartesianGrid, Legend, Line, LineChart, Tooltip, XAxis, YAxis } from "recharts";
 import {
   Card,
   CardContent
 } from "./lib/card";
 import {
   ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
   type ChartConfig
 } from "./lib/chart";
-import { CartesianGrid, Legend, Line, LineChart, Tooltip, XAxis, YAxis } from "recharts";
 
 /** 차트 기본 스타일 */
 const styles = {
@@ -41,9 +39,20 @@ const styles = {
     marginTop: "10px",
   } as CSSProperties,
 };
-
 // 커스텀 툴팁
-const CustomTooltip = ({ active, payload, label }) => {
+const CustomTooltip = ({ 
+  active, 
+  payload, 
+  label 
+}: {
+  active?: boolean;
+  payload?: Array<{
+    name: string;
+    value: number;
+    color: string;
+  }>;
+  label?: string;
+}) => {
   if (active && payload && payload.length) {
     return (
       <div style={styles.tooltipDiv}>