From b05a13b02e6e5b1875470f9e31ca9713f6b5b688 Mon Sep 17 00:00:00 2001
From: ljpark <mind-one005@mind-one.co.kr>
Date: Mon, 15 Dec 2025 14:32:16 +0900
Subject: [PATCH] =?UTF-8?q?cm:=20reuse-chart=20=EC=99=B8=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/dashboard/lib/korea-basin-map.tsx   |  9 +--
 .../pages/dashboard/ui/fo-wqlt-Infl-effl.tsx  |  4 +-
 .../cm/src/pages/dashboard/ui/reuse-chart.tsx | 71 +++++++++++++------
 3 files changed, 55 insertions(+), 29 deletions(-)

diff --git a/apps/cm/src/pages/dashboard/lib/korea-basin-map.tsx b/apps/cm/src/pages/dashboard/lib/korea-basin-map.tsx
index 714e8ef35..83b8c17c9 100644
--- a/apps/cm/src/pages/dashboard/lib/korea-basin-map.tsx
+++ b/apps/cm/src/pages/dashboard/lib/korea-basin-map.tsx
@@ -21,12 +21,13 @@ function fmt(n: number) {
 const mapOperFcltData: mapOperFcltType = {
     colTitle: {cnt:"개소수",rt:"가동률"}, //헤더 영역
     data: [ 
-      // {name: "금강", cnt: 710, rt: 100,},
-      // {name: "한강", cnt: 983, rt: 100,},
-      // {name: "낙동강", cnt: 1032, rt: 100,},
-      // {name: "영산강", cnt: 1261, rt: 100,},
+      {name: "금강", cnt: 710, rt: 100,},
+      {name: "한강", cnt: 983, rt: 100,},
+      {name: "낙동강", cnt: 1032, rt: 100,},
+      {name: "영산강", cnt: 1261, rt: 100,},
     ]
 };
+
 export function KoreaBasinMap() {
   const stageRef = useRef<HTMLDivElement>(null);
   const svgLayerRef = useRef<HTMLDivElement>(null);
diff --git a/apps/cm/src/pages/dashboard/ui/fo-wqlt-Infl-effl.tsx b/apps/cm/src/pages/dashboard/ui/fo-wqlt-Infl-effl.tsx
index 05f7fe34e..4c01fbdd0 100644
--- a/apps/cm/src/pages/dashboard/ui/fo-wqlt-Infl-effl.tsx
+++ b/apps/cm/src/pages/dashboard/ui/fo-wqlt-Infl-effl.tsx
@@ -199,8 +199,8 @@ const FoWqltInflEffl: React.FC = () => {
         <h3 className="text-2xl font-medium">수계별 유입ㆍ방류수질 분석</h3>
         <BasinSelect  selectedBasin={selectedBasin} onValueChange={onBasinChange}  />
       </div>
-      <div style={{ width: "100%", maxWidth: 400, height: 180 }}>
-        <div style={{ padding: '4px', height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <div className="h-70 p-0 flex items-center justify-center">
+        <div style={{ width: "100%", maxWidth: 400, height: 180 }}>
           {/* 탭 메뉴 */}
           <div style={{ display: 'flex', gap: '20px', borderBottom: '1px solid #000000', flexShrink: 0 }}>
             {tabs.map((tab) => (
diff --git a/apps/cm/src/pages/dashboard/ui/reuse-chart.tsx b/apps/cm/src/pages/dashboard/ui/reuse-chart.tsx
index d812c938e..de650cfa7 100644
--- a/apps/cm/src/pages/dashboard/ui/reuse-chart.tsx
+++ b/apps/cm/src/pages/dashboard/ui/reuse-chart.tsx
@@ -155,7 +155,7 @@ const ReuseChart: React.FC = () => {
   const startSlider = () => {
     intervalRef.current = setInterval(() => {
       setActiveIndex(prevIndex => (prevIndex + 1) % chartItems.length);
-    }, 20000);
+    }, 30000);
   };
 
   const stopSlider = () => {
@@ -179,35 +179,60 @@ const ReuseChart: React.FC = () => {
     window.open(process.env.NEXT_PUBLIC_WR, "_blank", "noopener,noreferrer");
   };
 
+  const viewportRef = useRef<HTMLDivElement>(null);
+
   return (
     <div className="card card-border" style={{ height: "250px" }}>
       <div className="card-header text-foreground">
         <h3 className="text-2xl font-medium">{chartItems[activeIndex]?.title}</h3>
         <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
       </div>
-      <div className="p-4 relative overflow-hidden" style={{ width: "100%", maxWidth: 400, height: 180 }}>
-        <div
-          className="flex transition-transform duration-500 ease-in-out h-full"
-          style={{ transform: `translateX(-${activeIndex * 100}%)` }}
-        >
-          {chartItems.map((chart, index) => (
-            <div key={index} className="w-full flex-shrink-0 h-full">
-              <Line data={chart.data} options={chart.options as ChartOptions<'line'>} />
+      <div className="relative" style={{ maxWidth: 400, height: 180, marginLeft: 20 }}>
+        <div className="h-full">
+
+          {/* ✅ 좌표 기준 (절대 이동 X) */}
+          <div
+            ref={viewportRef}
+            className="w-full overflow-hidden"
+            style={{ height: 170}}
+          >
+            {/* ✅ 이동 대상 */}
+            <div
+              className="flex h-full transition-transform duration-500 ease-in-out"
+              style={{
+                width: `${chartItems.length * 100}%`,
+                transform: `translateX(-${
+                  activeIndex * (viewportRef.current?.offsetWidth ?? 0)
+                }px)`
+              }}
+            >
+              {chartItems.map((chart, index) => (
+                <div
+                  key={index}
+                  className="h-full flex-shrink-0"
+                  style={{ width: `${100 / chartItems.length}%` }}
+                >
+                  <Line
+                    data={chart.data}
+                    options={chart.options as ChartOptions<'line'>}
+                  />
+                </div>
+              ))}
             </div>
-          ))}
-        </div>
-        
-        <div className="absolute bottom-0 left-1/2 -translate-x-1/2 flex space-x-2">
-          {chartItems.map((_, index) => (
-            <button
-              key={index}
-              onClick={() => handleIndicatorClick(index)}
-              className={`w-3 h-3 rounded-full cursor-pointer transition-colors ${
-                activeIndex === index ? 'bg-blue-500' : 'bg-gray-300'
-              }`}
-              aria-label={`Go to slide ${index + 1}`}
-            />
-          ))}
+          </div>
+          <div className="absolute left-1/2 -translate-x-1/2 flex space-x-2" style={{ bottom: '-1px'}}>
+            {chartItems.map((_, index) => (
+              <button
+                key={index}
+                onClick={() => handleIndicatorClick(index)}
+                className={`w-3 h-3 rounded-full cursor-pointer transition-colors ${
+                  activeIndex === index ? 'bg-blue-500' : 'bg-gray-300'
+                }`}
+                aria-label={`Go to slide ${index + 1}`}
+              />
+            ))}
+          </div>
+          
         </div>
       </div>
     </div>