라인바, 바차트 class 수정

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

@@ -3,13 +3,11 @@ import { Bar, BarChart, CartesianGrid, Legend, XAxis, YAxis } from "recharts";
 import {
   ChartContainer,
   ChartTooltip,
-  ChartTooltipContent,
   type ChartConfig
 } from "./lib/chart";
-import { styles } from "@common/assets";
 import type { CSSProperties } from "react";
 
-const styles = {
+const customStyles = {
   legendContainer: {
     display: "flex",
     justifyContent: "center",
@@ -20,8 +18,6 @@ const styles = {
   } as CSSProperties,
 };
 
-const tooltipClass = "!p-4 text-[12px] w-[9vw] h-[5vw]";
-
 type BarChartProps = {
   chartConfig: ChartConfig | undefined;
   chartData: any[] | undefined;
@@ -46,7 +42,7 @@ const CustomTooltip = ({
   }>;
   label?: string;
 }) => {
-  if (active && payload && payload.length) {
+  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>
@@ -67,7 +63,7 @@ const CustomTooltip = ({
 const CustomLegend = (props: any) => {
   const { payload } = props;
   return (
-    <div style={styles.legendContainer}>
+    <div style={customStyles.legendContainer}>
       {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>

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

@@ -9,29 +9,10 @@ import {
   ChartContainer,
   type ChartConfig
 } from "./lib/chart";
-import React from "react";
 
 // 툴팁 커스텀 css
 /** 차트 기본 스타일 */
-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,
+const customStyles = {
   legendContainer: {
     display: "flex",
     justifyContent: "center",
@@ -43,16 +24,28 @@ const styles = {
 };
 
 // 커스텀 툴팁
-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}>
-        <p style={styles.tooltipLabel}>{label}</p>
+      <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 style={styles.tooltipText}>{`${item.name}: ${item.value}`}</span>
+            <span className="text-[11px] font-bold">{` ${item.name} : ${item.value}`}</span>
           </div>
         ))}
       </div>
@@ -65,11 +58,11 @@ const CustomTooltip = ({ active, payload, label }) => {
 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 style={customStyles.legendContainer}>
+      {payload.map((entry: any, 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>
         </div>
       ))}
     </div>