From d7d4768ed7783b7c255a5c7a590d73215dfec58d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?=
 <43837214+Minsiki@users.noreply.github.com>
Date: Fri, 14 Mar 2025 14:59:45 +0900
Subject: [PATCH] =?UTF-8?q?=EC=A7=91=EA=B3=84=ED=91=9C=20=EB=8B=A8?=
 =?UTF-8?q?=EB=8F=85=EC=9C=BC=EB=A1=9C=20Draggable=20Component=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modal/panelBatch/PanelBatchStatistics.jsx | 78 ++++++++++---------
 1 file changed, 41 insertions(+), 37 deletions(-)

diff --git a/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx b/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx
index e789bc4a..fa4703be 100644
--- a/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx
+++ b/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx
@@ -11,60 +11,64 @@ import { canvasState } from '@/store/canvasAtom'
 import { POLYGON_TYPE } from '@/common/common'
 import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle'
 import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
+import Draggable from 'react-draggable'
 
 export default function PanelBatchStatistics() {
   const { getMessage } = useMessage()
   const [isFold, setIsFold] = useState(false)
-  const [pos, setPos] = useState({
-    x: 0,
-    y: 30,
-  })
   const canvas = useRecoilValue(canvasState)
   const { header, rows, footer } = useRecoilValue(moduleStatisticsState)
   const { setModuleStatisticsData } = useCircuitTrestle(true)
   const [moduleSelectionDataStore, setModuleSelectionDataStore] = useRecoilState(moduleSelectionDataState)
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 30,
+  })
+
+  const handleOnDrag = (e, data) => {
+    e.stopPropagation()
+    setPosition({ x: data.x, y: data.y })
+  }
 
   useEffect(() => {
     if (moduleSelectionDataStore && moduleSelectionDataStore.module) setModuleStatisticsData()
   }, [])
 
   return (
-    <WithDraggable isShow={true} handle=".penal-wrap" pos={pos} isModal={false}>
-      <WithDraggable.Panel>
-        <div className={`penal-wrap ${!isFold ? 'act' : ''}`}>
-          <h2>{getMessage('modal.panel.batch.statistic')}</h2>
-          <button className="penal-arr" onClick={() => setIsFold(!isFold)}></button>
-          <div className="penal-table-wrap">
-            <table className="penal-table">
-              <thead>
-                <tr>
-                  {header.map((item, index) => (
-                    <th key={`statistic-hd-${index}`}>{item.name}</th>
-                  ))}
-                </tr>
-              </thead>
-              <tbody>
-                {rows.map((row, index) => (
-                  <tr key={`statistic-row-${index}`}>
-                    {header.map((item, i) => (
-                      <td key={`statistic-col-${i}`}>{row[item.prop] ?? 0}</td>
-                    ))}
-                  </tr>
+    <Draggable position={{ x: position.x, y: position.y }} onDrag={(e, data) => handleOnDrag(e, data)} handle=".penal-wrap">
+      <div className={`penal-wrap ${!isFold ? 'act' : ''}`}>
+        <h2>{getMessage('modal.panel.batch.statistic')}</h2>
+        <button className="penal-arr" onClick={() => setIsFold(!isFold)}></button>
+        <div className="penal-table-wrap">
+          <table className="penal-table">
+            <thead>
+              <tr>
+                {header.map((item, index) => (
+                  <th key={`statistic-hd-${index}`}>{item.name}</th>
                 ))}
-                <tr>
-                  {header.map((header, index) => (
-                    <td key={`statistic-ft-${index}`}>
-                      {typeof footer[header.prop] === 'number'
-                        ? footer[header.prop].toLocaleString('ko-KR', { maximumFractionDigits: 4 })
-                        : footer[header.prop]}
-                    </td>
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((row, index) => (
+                <tr key={`statistic-row-${index}`}>
+                  {header.map((item, i) => (
+                    <td key={`statistic-col-${i}`}>{row[item.prop] ?? 0}</td>
                   ))}
                 </tr>
-              </tbody>
-            </table>
-          </div>
+              ))}
+              <tr>
+                {header.map((header, index) => (
+                  <td key={`statistic-ft-${index}`}>
+                    {typeof footer[header.prop] === 'number'
+                      ? footer[header.prop].toLocaleString('ko-KR', { maximumFractionDigits: 4 })
+                      : footer[header.prop]}
+                  </td>
+                ))}
+              </tr>
+            </tbody>
+          </table>
         </div>
-      </WithDraggable.Panel>
-    </WithDraggable>
+      </div>
+    </Draggable>
   )
 }