집계표 단독으로 Draggable Component 적용

src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx

@@ -11,26 +11,31 @@ 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>
+    <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>
@@ -64,7 +69,6 @@ export default function PanelBatchStatistics() {
           </table>
         </div>
       </div>
-      </WithDraggable.Panel>
-    </WithDraggable>
+    </Draggable>
   )
 }