From 104a7b007982c3b13b5790dc17de38b997d602ea Mon Sep 17 00:00:00 2001
From: YangJinSoo94 <jschrome782@gmail.com>
Date: Wed, 12 Mar 2025 11:02:10 +0900
Subject: [PATCH] =?UTF-8?q?=EC=B0=A8=ED=8A=B8=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=EC=A0=95=EC=A4=91,=20=EB=9D=BC=EC=9D=B8=EB=B0=94=20=EC=B0=A8?=
 =?UTF-8?q?=ED=8A=B8=20=EA=B0=9C=EB=B0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/ui/chart/BarChart.tsx                 |   4 +-
 .../src/ui/chart/DoughnutChart.tsx            |   3 +-
 .../src/ui/chart/LineBarChart.tsx             | 101 ++++++++++++++++++
 .../src/ui/chart/LineChart.tsx                |   4 +-
 .../src/ui/chart/index.tsx                    |  36 ++++---
 5 files changed, 125 insertions(+), 23 deletions(-)
 create mode 100644 packages/common/business_components/src/ui/chart/LineBarChart.tsx

diff --git a/packages/common/business_components/src/ui/chart/BarChart.tsx b/packages/common/business_components/src/ui/chart/BarChart.tsx
index 98d759f09..96dfab634 100644
--- a/packages/common/business_components/src/ui/chart/BarChart.tsx
+++ b/packages/common/business_components/src/ui/chart/BarChart.tsx
@@ -12,11 +12,11 @@ import {
 } from "./lib/chart";
 import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
 
-export default function Chart(props: { chartStyle: CSSProperties | undefined; chartConfig: ChartConfig; chartData: any[] | undefined; }) {
+export default function Chart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; }) {
   return (
     <Card>
         <CardContent>
-            <ChartContainer style={props.chartStyle} config={props.chartConfig}>
+            <ChartContainer config={props.chartConfig}>
                 <BarChart accessibilityLayer data={props.chartData}>
                     <CartesianGrid vertical={false} />
                     <XAxis
diff --git a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx
index 8caa35e47..b08ca7746 100644
--- a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx
+++ b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx
@@ -15,14 +15,13 @@ import {
 import type { CSSProperties } from "react";
 
 // eslint-disable-next-line react-refresh/only-export-components
-export default (props: { chartConfig: ChartConfig; chartStyle: CSSProperties | undefined; chartData: never[] | undefined; }) =>{
+export default (props: { chartConfig: ChartConfig; chartData: never[] | undefined; }) =>{
   return (
     <Card className="flex flex-col">
       <CardContent className="flex-1 pb-0">
         <ChartContainer
           config={props.chartConfig}
           className="mx-auto aspect-square max-h-[300px]"
-          style={props.chartStyle}
         >
           <PieChart>
             <ChartTooltip
diff --git a/packages/common/business_components/src/ui/chart/LineBarChart.tsx b/packages/common/business_components/src/ui/chart/LineBarChart.tsx
new file mode 100644
index 000000000..4aa088e57
--- /dev/null
+++ b/packages/common/business_components/src/ui/chart/LineBarChart.tsx
@@ -0,0 +1,101 @@
+"use client"
+import type { CSSProperties } from "react";
+import { Bar, CartesianGrid, ComposedChart, Legend, Line, Tooltip, XAxis, YAxis } from "recharts";
+import {
+  Card,
+  CardContent
+} from "./lib/card";
+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: "10px",
+  } 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 LineBarchart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; }) {
+  return (
+    <Card>
+      <CardContent>
+        <ChartContainer config={props.chartConfig}>
+          <ComposedChart data={props.chartData}>
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis dataKey="label" />
+            {/* 왼쪽 Y축: lineVal (정상) */}
+            <YAxis yAxisId="left" orientation="left" />
+            {/* 오른쪽 Y축: barVal (위에서 아래로 반전) */}
+            <YAxis yAxisId="right" orientation="right" reversed />
+            <Tooltip content={<CustomTooltip active={undefined} payload={undefined} label={undefined} />} />
+            <Legend content={CustomLegend}/>
+            {/* 바 차트 (오른쪽 Y축 사용, 위에서 아래로) */}
+            <Bar yAxisId="right" dataKey="barVal" fill="#8884d8" name="강수량(mm/일)"/>
+            {/* 라인 차트 (왼쪽 Y축 사용) */}
+            <Line yAxisId="left" type="monotone" dataKey="lineVal" stroke="orange" strokeWidth={2} dot={{r: 0}} name="BOD(mg/L)"/>
+         </ComposedChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
\ No newline at end of file
diff --git a/packages/common/business_components/src/ui/chart/LineChart.tsx b/packages/common/business_components/src/ui/chart/LineChart.tsx
index 7cddf66d1..547a29c83 100644
--- a/packages/common/business_components/src/ui/chart/LineChart.tsx
+++ b/packages/common/business_components/src/ui/chart/LineChart.tsx
@@ -12,11 +12,11 @@ import {
 } from "./lib/chart";
 import { CartesianGrid, Line, LineChart, XAxis } from "recharts";
 
-export default function Linechart(props: { chartStyle: CSSProperties | undefined; chartConfig: ChartConfig; chartData: any[] | undefined; }) {
+export default function Linechart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; }) {
   return (
     <Card>
       <CardContent>
-        <ChartContainer style={props.chartStyle} config={props.chartConfig}>
+        <ChartContainer config={props.chartConfig}>
           <LineChart
             accessibilityLayer
             data={props.chartData}
diff --git a/packages/common/business_components/src/ui/chart/index.tsx b/packages/common/business_components/src/ui/chart/index.tsx
index d57b6e1ec..94c4e9ea7 100644
--- a/packages/common/business_components/src/ui/chart/index.tsx
+++ b/packages/common/business_components/src/ui/chart/index.tsx
@@ -1,17 +1,10 @@
  
-import React from 'react'
+import React from 'react';
 import BarChart from './BarChart';
-import LineChart from './LineChart';
 import DoughnutChart from './DoughnutChart';
-import {type ChartConfig } from './lib/chart';
-
-/** 차트 기본 스타일 */
-const styles = {
-    divHeight : {
-        height: '400px',
-        width : '500px'
-    } as React.CSSProperties
-}
+import { type ChartConfig } from './lib/chart';
+import LineChart from './LineChart';
+import LineBarchart from './LineBarChart';
 
 /**차트 FORM */
 const CHART_FORM = {
@@ -20,7 +13,9 @@ const CHART_FORM = {
   /**라인 차트 형태*/
   LINE:'line',
   /**도넛 차트 형태*/
-  DN :'daughnut'
+  DN :'daughnut',
+  /**LINE,BAR차트 */
+  LINEBAR : 'linebar'
 };
 
 function MainChart(props: { chartForm: string; chartConfig: any; chartData: any; }) {
@@ -34,21 +29,28 @@ function MainChart(props: { chartForm: string; chartConfig: any; chartData: any;
   } else if( props.chartForm == CHART_FORM.LINE ){
     return (
       <div>
-        <LineChart chartConfig={props.chartConfig} chartStyle={styles.divHeight} chartData={props.chartData}>
+        <LineChart chartConfig={props.chartConfig} chartData={props.chartData}>
         </LineChart>
       </div>
     );
   } else if( props.chartForm == CHART_FORM.DN ){
     return (
       <div>
-        <DoughnutChart chartConfig={props.chartConfig} chartStyle={styles.divHeight} chartData={props.chartData}>
+        <DoughnutChart chartConfig={props.chartConfig} chartData={props.chartData}>
         </DoughnutChart>
       </div>
     );
+  } else if (props.chartForm == CHART_FORM.LINEBAR){
+    return (
+      <div className='w-100'>
+        <LineBarchart chartConfig={props.chartConfig} chartData={props.chartData}>
+        </LineBarchart>
+      </div>
+    );
   }
 }
 
-export {MainChart};
+export { MainChart };
 // eslint-disable-next-line react-refresh/only-export-components
-export {CHART_FORM};
-export type {ChartConfig};
\ No newline at end of file
+  export { CHART_FORM };
+  export type { ChartConfig };