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 1/7] =?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 };

From afd892579283e495615d7c73901233d3334258c8 Mon Sep 17 00:00:00 2001
From: YangJinSoo94 <jschrome782@gmail.com>
Date: Wed, 12 Mar 2025 11:36:49 +0900
Subject: [PATCH 2/7] =?UTF-8?q?=EC=B0=A8=ED=8A=B8=20chartTitle=20propertie?=
 =?UTF-8?q?s=20=EC=B6=94=EA=B0=80(=EB=B9=88=EC=B9=B8=EC=9D=B4=20=EC=95=84?=
 =?UTF-8?q?=EB=8B=88=EB=A9=B4=20=EC=B0=A8=ED=8A=B8=EC=A0=9C=EB=AA=A9=20?=
 =?UTF-8?q?=EC=98=81=EC=97=AD=EB=82=98=EC=98=A4=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../business_components/src/ui/chart/BarChart.tsx      |  5 ++++-
 .../business_components/src/ui/chart/DoughnutChart.tsx |  5 ++++-
 .../business_components/src/ui/chart/LineBarChart.tsx  |  5 ++++-
 .../business_components/src/ui/chart/LineChart.tsx     |  5 ++++-
 .../common/business_components/src/ui/chart/index.tsx  | 10 +++++-----
 5 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/common/business_components/src/ui/chart/BarChart.tsx b/packages/common/business_components/src/ui/chart/BarChart.tsx
index 96dfab634..a71c550df 100644
--- a/packages/common/business_components/src/ui/chart/BarChart.tsx
+++ b/packages/common/business_components/src/ui/chart/BarChart.tsx
@@ -12,9 +12,12 @@ import {
 } from "./lib/chart";
 import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
 
-export default function Chart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; }) {
+export default function Chart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; chartTitle: string}) {
   return (
     <Card>
+        {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
+        <div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
+        </div>): null}
         <CardContent>
             <ChartContainer config={props.chartConfig}>
                 <BarChart accessibilityLayer data={props.chartData}>
diff --git a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx
index b08ca7746..0e8060486 100644
--- a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx
+++ b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx
@@ -15,9 +15,12 @@ import {
 import type { CSSProperties } from "react";
 
 // eslint-disable-next-line react-refresh/only-export-components
-export default (props: { chartConfig: ChartConfig; chartData: never[] | undefined; }) =>{
+export default (props: { chartConfig: ChartConfig; chartData: never[] | undefined; chartTitle:string}) =>{
   return (
     <Card className="flex flex-col">
+      {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
+        <div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
+        </div>): null}
       <CardContent className="flex-1 pb-0">
         <ChartContainer
           config={props.chartConfig}
diff --git a/packages/common/business_components/src/ui/chart/LineBarChart.tsx b/packages/common/business_components/src/ui/chart/LineBarChart.tsx
index 4aa088e57..415e2b53a 100644
--- a/packages/common/business_components/src/ui/chart/LineBarChart.tsx
+++ b/packages/common/business_components/src/ui/chart/LineBarChart.tsx
@@ -75,10 +75,13 @@ const CustomLegend = (props: any) => {
   );
 };
 
-export default function LineBarchart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; }) {
+export default function LineBarchart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; chartTitle:string }) {
   return (
     <Card>
       <CardContent>
+        {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
+        <div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
+        </div>): null}
         <ChartContainer config={props.chartConfig}>
           <ComposedChart data={props.chartData}>
             <CartesianGrid strokeDasharray="3 3" />
diff --git a/packages/common/business_components/src/ui/chart/LineChart.tsx b/packages/common/business_components/src/ui/chart/LineChart.tsx
index 547a29c83..f3283822c 100644
--- a/packages/common/business_components/src/ui/chart/LineChart.tsx
+++ b/packages/common/business_components/src/ui/chart/LineChart.tsx
@@ -12,9 +12,12 @@ import {
 } from "./lib/chart";
 import { CartesianGrid, Line, LineChart, XAxis } from "recharts";
 
-export default function Linechart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; }) {
+export default function Linechart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; chartTitle:string}) {
   return (
     <Card>
+      {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
+        <div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
+        </div>): null}
       <CardContent>
         <ChartContainer config={props.chartConfig}>
           <LineChart
diff --git a/packages/common/business_components/src/ui/chart/index.tsx b/packages/common/business_components/src/ui/chart/index.tsx
index 94c4e9ea7..525979a5a 100644
--- a/packages/common/business_components/src/ui/chart/index.tsx
+++ b/packages/common/business_components/src/ui/chart/index.tsx
@@ -18,32 +18,32 @@ const CHART_FORM = {
   LINEBAR : 'linebar'
 };
 
-function MainChart(props: { chartForm: string; chartConfig: any; chartData: any; }) {
+function MainChart(props: { chartForm: string; chartConfig: any; chartData: any; chartTitle:string; }) {
   if( props.chartForm == CHART_FORM.BAR ){
     return (
       <div>
-        <BarChart chartConfig={props.chartConfig} chartStyle={styles.divHeight} chartData={props.chartData}>
+        <BarChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
         </BarChart>
       </div>
     );
   } else if( props.chartForm == CHART_FORM.LINE ){
     return (
       <div>
-        <LineChart chartConfig={props.chartConfig} chartData={props.chartData}>
+        <LineChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
         </LineChart>
       </div>
     );
   } else if( props.chartForm == CHART_FORM.DN ){
     return (
       <div>
-        <DoughnutChart chartConfig={props.chartConfig} chartData={props.chartData}>
+        <DoughnutChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
         </DoughnutChart>
       </div>
     );
   } else if (props.chartForm == CHART_FORM.LINEBAR){
     return (
       <div className='w-100'>
-        <LineBarchart chartConfig={props.chartConfig} chartData={props.chartData}>
+        <LineBarchart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
         </LineBarchart>
       </div>
     );

From 42647d6ce372c19bf1db2b4fe50afb507ddd0c85 Mon Sep 17 00:00:00 2001
From: YangJinSoo94 <jschrome782@gmail.com>
Date: Wed, 12 Mar 2025 13:07:41 +0900
Subject: [PATCH 3/7] =?UTF-8?q?=EC=B0=A8=ED=8A=B8=20=EC=A0=9C=EB=AA=A9=20?=
 =?UTF-8?q?=EB=88=84=EB=9D=BD=20=EC=B6=94=EA=B0=80=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/common/business_components/src/ui/chart/BarChart.tsx  | 1 +
 .../common/business_components/src/ui/chart/DoughnutChart.tsx  | 1 +
 .../common/business_components/src/ui/chart/LineBarChart.tsx   | 3 ++-
 packages/common/business_components/src/ui/chart/LineChart.tsx | 1 +
 4 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/common/business_components/src/ui/chart/BarChart.tsx b/packages/common/business_components/src/ui/chart/BarChart.tsx
index a71c550df..04a10e8d9 100644
--- a/packages/common/business_components/src/ui/chart/BarChart.tsx
+++ b/packages/common/business_components/src/ui/chart/BarChart.tsx
@@ -17,6 +17,7 @@ export default function Chart(props: { chartConfig: ChartConfig; chartData: any[
     <Card>
         {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
         <div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
+          {props.chartTitle}
         </div>): null}
         <CardContent>
             <ChartContainer config={props.chartConfig}>
diff --git a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx
index 0e8060486..860b98558 100644
--- a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx
+++ b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx
@@ -20,6 +20,7 @@ export default (props: { chartConfig: ChartConfig; chartData: never[] | undefine
     <Card className="flex flex-col">
       {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
         <div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
+          {props.chartTitle}
         </div>): null}
       <CardContent className="flex-1 pb-0">
         <ChartContainer
diff --git a/packages/common/business_components/src/ui/chart/LineBarChart.tsx b/packages/common/business_components/src/ui/chart/LineBarChart.tsx
index 415e2b53a..8917124d8 100644
--- a/packages/common/business_components/src/ui/chart/LineBarChart.tsx
+++ b/packages/common/business_components/src/ui/chart/LineBarChart.tsx
@@ -81,6 +81,7 @@ export default function LineBarchart(props: { chartConfig: ChartConfig; chartDat
       <CardContent>
         {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
         <div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
+          {props.chartTitle}
         </div>): null}
         <ChartContainer config={props.chartConfig}>
           <ComposedChart data={props.chartData}>
@@ -96,7 +97,7 @@ export default function LineBarchart(props: { chartConfig: ChartConfig; chartDat
             <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>
+          </ComposedChart>
         </ChartContainer>
       </CardContent>
     </Card>
diff --git a/packages/common/business_components/src/ui/chart/LineChart.tsx b/packages/common/business_components/src/ui/chart/LineChart.tsx
index f3283822c..1aa0e2b4d 100644
--- a/packages/common/business_components/src/ui/chart/LineChart.tsx
+++ b/packages/common/business_components/src/ui/chart/LineChart.tsx
@@ -17,6 +17,7 @@ export default function Linechart(props: { chartConfig: ChartConfig; chartData:
     <Card>
       {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
         <div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
+          {props.chartTitle}
         </div>): null}
       <CardContent>
         <ChartContainer config={props.chartConfig}>

From 25566be2c699500d05b895c97e92406fb0103151 Mon Sep 17 00:00:00 2001
From: YangJinSoo94 <jschrome782@gmail.com>
Date: Wed, 12 Mar 2025 14:46:56 +0900
Subject: [PATCH 4/7] =?UTF-8?q?=EC=B0=A8=ED=8A=B8=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=88=98=EC=A0=95(=ED=81=AC=EA=B8=B0=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=97=AC=EB=B0=B1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/ui/chart/BarChart.tsx                 | 26 +++++----
 .../src/ui/chart/DoughnutChart.tsx            |  1 -
 .../src/ui/chart/LineBarChart.tsx             | 38 +++++++------
 .../src/ui/chart/LineChart.tsx                | 57 +++++++++----------
 .../src/ui/chart/index.tsx                    | 24 +++-----
 5 files changed, 68 insertions(+), 78 deletions(-)

diff --git a/packages/common/business_components/src/ui/chart/BarChart.tsx b/packages/common/business_components/src/ui/chart/BarChart.tsx
index 04a10e8d9..82499306c 100644
--- a/packages/common/business_components/src/ui/chart/BarChart.tsx
+++ b/packages/common/business_components/src/ui/chart/BarChart.tsx
@@ -14,27 +14,29 @@ import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
 
 export default function Chart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; chartTitle: string}) {
   return (
-    <Card>
+    <Card className="h-full">
+      <CardContent className="h-full">
         {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
         <div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
           {props.chartTitle}
         </div>): null}
-        <CardContent>
-            <ChartContainer config={props.chartConfig}>
-                <BarChart accessibilityLayer data={props.chartData}>
-                    <CartesianGrid vertical={false} />
-                    <XAxis
+        <div className="h-[calc(100%-42px)] flex justify-center">
+          <ChartContainer config={props.chartConfig} className="h-full w-full">
+              <BarChart accessibilityLayer data={props.chartData} className="h-full">
+                  <CartesianGrid vertical={false} />
+                  <XAxis
                     dataKey="label"
                     tickLine={false}
                     tickMargin={10}
                     axisLine={false}
                     tickFormatter={(value) => value.slice(0, 3)}
-                    />
-                    <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="dashed" />}/>
-                    <Bar dataKey="val" radius={10} />
-                </BarChart>
-            </ChartContainer>
-        </CardContent>
+                  />
+                  <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="dashed" />}/>
+                  <Bar dataKey="val" radius={10} />
+              </BarChart>
+          </ChartContainer>
+        </div>
+      </CardContent>
     </Card>
   )
 }
\ No newline at end of file
diff --git a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx
index 860b98558..336994029 100644
--- a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx
+++ b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx
@@ -12,7 +12,6 @@ import {
   ChartTooltipContent,
   type ChartConfig
 } from "./lib/chart";
-import type { CSSProperties } from "react";
 
 // eslint-disable-next-line react-refresh/only-export-components
 export default (props: { chartConfig: ChartConfig; chartData: never[] | undefined; chartTitle:string}) =>{
diff --git a/packages/common/business_components/src/ui/chart/LineBarChart.tsx b/packages/common/business_components/src/ui/chart/LineBarChart.tsx
index 8917124d8..b8565c3bf 100644
--- a/packages/common/business_components/src/ui/chart/LineBarChart.tsx
+++ b/packages/common/business_components/src/ui/chart/LineBarChart.tsx
@@ -77,28 +77,30 @@ const CustomLegend = (props: any) => {
 
 export default function LineBarchart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; chartTitle:string }) {
   return (
-    <Card>
-      <CardContent>
+    <Card className="h-full">
+      <CardContent className="h-full">
         {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
         <div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
           {props.chartTitle}
         </div>): null}
-        <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>
+        <div className="h-[calc(100%-42px)] flex justify-center">
+          <ChartContainer config={props.chartConfig} className="h-full w-full" >
+            <ComposedChart data={props.chartData} className="h-full ">
+              <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>
+        </div>
       </CardContent>
     </Card>
   )
diff --git a/packages/common/business_components/src/ui/chart/LineChart.tsx b/packages/common/business_components/src/ui/chart/LineChart.tsx
index 1aa0e2b4d..8a1168940 100644
--- a/packages/common/business_components/src/ui/chart/LineChart.tsx
+++ b/packages/common/business_components/src/ui/chart/LineChart.tsx
@@ -14,41 +14,36 @@ import { CartesianGrid, Line, LineChart, XAxis } from "recharts";
 
 export default function Linechart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; chartTitle:string}) {
   return (
-    <Card>
+    <Card className="h-full">
+      <CardContent className="h-full">
       {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
         <div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
           {props.chartTitle}
         </div>): null}
-      <CardContent>
-        <ChartContainer config={props.chartConfig}>
-          <LineChart
-            accessibilityLayer
-            data={props.chartData}
-            margin={{
-              left: 12,
-              right: 12,
-            }}
-          >
-            <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}
-            />
-          </LineChart>
-        </ChartContainer>
+        <div className="h-[calc(100%-42px)] flex justify-center">
+          <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}
+              />
+            </LineChart>
+          </ChartContainer>
+        </div>
       </CardContent>
     </Card>
   )
diff --git a/packages/common/business_components/src/ui/chart/index.tsx b/packages/common/business_components/src/ui/chart/index.tsx
index 525979a5a..fc5747f3a 100644
--- a/packages/common/business_components/src/ui/chart/index.tsx
+++ b/packages/common/business_components/src/ui/chart/index.tsx
@@ -21,31 +21,23 @@ const CHART_FORM = {
 function MainChart(props: { chartForm: string; chartConfig: any; chartData: any; chartTitle:string; }) {
   if( props.chartForm == CHART_FORM.BAR ){
     return (
-      <div>
-        <BarChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
-        </BarChart>
-      </div>
+      <BarChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
+      </BarChart>
     );
   } else if( props.chartForm == CHART_FORM.LINE ){
     return (
-      <div>
-        <LineChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
-        </LineChart>
-      </div>
+      <LineChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
+      </LineChart>
     );
   } else if( props.chartForm == CHART_FORM.DN ){
     return (
-      <div>
-        <DoughnutChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
-        </DoughnutChart>
-      </div>
+      <DoughnutChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
+      </DoughnutChart>
     );
   } else if (props.chartForm == CHART_FORM.LINEBAR){
     return (
-      <div className='w-100'>
-        <LineBarchart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
-        </LineBarchart>
-      </div>
+      <LineBarchart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
+      </LineBarchart>
     );
   }
 }

From 396992fe1bab12ecc8461ae3150e99c84cd88317 Mon Sep 17 00:00:00 2001
From: YangJinSoo94 <jschrome782@gmail.com>
Date: Wed, 12 Mar 2025 16:36:25 +0900
Subject: [PATCH 5/7] =?UTF-8?q?=EB=8F=84=EB=84=9B=EC=B0=A8=ED=8A=B8=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/ui/chart/DoughnutChart.tsx            | 38 ++++++++++---------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx
index 336994029..f88b35476 100644
--- a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx
+++ b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx
@@ -17,28 +17,30 @@ import {
 export default (props: { chartConfig: ChartConfig; chartData: never[] | undefined; chartTitle:string}) =>{
   return (
     <Card className="flex flex-col">
+      <CardContent className="flex-1 pb-0">
       {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
         <div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
           {props.chartTitle}
         </div>): null}
-      <CardContent className="flex-1 pb-0">
-        <ChartContainer
-          config={props.chartConfig}
-          className="mx-auto aspect-square max-h-[300px]"
-        >
-          <PieChart>
-            <ChartTooltip
-              cursor={false}
-              content={<ChartTooltipContent hideLabel />}
-            />
-            <Pie
-              data={props.chartData}
-              dataKey="val"
-              nameKey="label"
-              innerRadius={60}
-            />
-          </PieChart>
-        </ChartContainer>
+        <div className="h-[calc(100%-42px)] justify-center">
+          <ChartContainer
+            config={props.chartConfig}
+            className="mx-auto aspect-square max-h-[300px]"
+          >
+            <PieChart>
+              <ChartTooltip
+                cursor={false}
+                content={<ChartTooltipContent hideLabel />}
+              />
+              <Pie
+                data={props.chartData}
+                dataKey="val"
+                nameKey="label"
+                innerRadius={60}
+              />
+            </PieChart>
+          </ChartContainer>
+        </div>
       </CardContent>
     </Card>
   )

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 6/7] =?UTF-8?q?LineBar=20=EB=B2=94=EB=A1=80=20=EB=B0=8F=20?=
 =?UTF-8?q?ui=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>

From ffb15a7e3a64f6b798e58fbcbc6bd10e4b6481bf Mon Sep 17 00:00:00 2001
From: leedj312 <dlehd467@gmail.com>
Date: Thu, 13 Mar 2025 11:32:11 +0900
Subject: [PATCH 7/7] =?UTF-8?q?date=20picker=20=EC=88=98=EC=A0=95=5F=201.?=
 =?UTF-8?q?=20selectClass=202.=EC=95=84=EC=9D=B4=EC=BD=98=20=EA=B0=84?=
 =?UTF-8?q?=EA=B2=A9=20css=EC=88=98=EC=A0=95=203.color=20white=EA=B3=A0?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/ui/date_picker/index.tsx                   | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/common/business_components/src/ui/date_picker/index.tsx b/packages/common/business_components/src/ui/date_picker/index.tsx
index 37dbcb096..16aa2c075 100644
--- a/packages/common/business_components/src/ui/date_picker/index.tsx
+++ b/packages/common/business_components/src/ui/date_picker/index.tsx
@@ -10,26 +10,28 @@ import { Button, Calendar, Popover, PopoverContent, PopoverTrigger } from "@comm
 import { cn } from "../../lib/utils";
 import { FormControl } from "../form";
 
-type DatePickerProps = DayPickerSingleProps & { field: { value: Date; onChange: (date: Date | undefined) => void } };
+type DatePickerProps = DayPickerSingleProps & { field: { value: Date; onChange: (date: Date | undefined) => void  } ,selectClass:string|undefined   };
 
-export function DatePicker({ field }: DatePickerProps) {
+export function DatePicker({ field, selectClass }: DatePickerProps) {
     return (
         <Popover>
             <PopoverTrigger asChild>
                 <FormControl>
                     <Button
+                        color="white"
                         variant={"outline"}
-                        className={cn(
+                        className={!selectClass? cn(
                             "w-[240px] pl-3 text-left font-normal",
-                            !field?.value && "text-muted-foreground"
-                        )}
+                            !field?.value && "text-muted-foreground",
+                            
+                        ):selectClass}
                     >
                         {field?.value ? (
                             format(field?.value, "PPP")
                         ) : (
                             <span>Pick a date</span>
                         )}
-                        <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                        <CalendarIcon className="h-4" />
                     </Button>
                 </FormControl>
             </PopoverTrigger>