모듈 수동, 자동 배치시 집계표 반영

src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx

@@ -2,7 +2,7 @@ import { GlobalDataContext } from '@/app/GlobalDataProvider'
 import { POLYGON_TYPE } from '@/common/common'
 import { useMessage } from '@/hooks/useMessage'
 import { canvasState } from '@/store/canvasAtom'
-import { modelState } from '@/store/circuitTrestleAtom'
+import { modelState, moduleStatisticsState } from '@/store/circuitTrestleAtom'
 import { selectedModuleState } from '@/store/selectedModuleOptions'
 import { useContext, useEffect, useState } from 'react'
 import { useRecoilValue } from 'recoil'
@@ -19,15 +19,16 @@ export default function PassivityCircuitAllocation() {
   const canvas = useRecoilValue(canvasState)
   const selectedModules = useRecoilValue(selectedModuleState)
   const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
+  const { header, rows, footer } = useRecoilValue(moduleStatisticsState)
   const [moduleData, setModuleData] = useState({
-    header: [],
-    rows: [],
+    header: header,
+    rows: rows,
+    footer: footer,
   })
   const model = useRecoilValue(modelState)
   const [selectedModels, setSelectedModels] = useState(model.selectedModels)
   const [selectedPcs, setSelectedPcs] = useState(selectedModels[0])
   const [totalWpout, setTotalWpout] = useState(0)
-
   useEffect(() => {
     setSurfaceInfo()
     if (!managementState) {

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

@@ -4,7 +4,7 @@ import { useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { moduleStatisticsState } from '@/store/circuitTrestleAtom'
-import { useRecoilValue } from 'recoil'
+import { useRecoilValue, useResetRecoilState } from 'recoil'
 
 export default function PanelBatchStatistics() {
   const { getMessage } = useMessage()
@@ -24,23 +24,23 @@ export default function PanelBatchStatistics() {
           <table className="penal-table">
             <thead>
               <tr>
-                {header.map((item) => (
-                  <th>{item.name}</th>
+                {header.map((item, index) => (
+                  <th key={index}>{item.name}</th>
                 ))}
               </tr>
             </thead>
             <tbody>
-              {rows.map((row) => (
-                <tr>
-                  {header.map((item) => (
+              {rows.map((row, index) => (
+                <tr key={index}>
+                  {header.map((item, i) => (
                     // <td>{item.prop === 'name' ? item.name : item.prop === 'powerGeneration' ? item.powerGeneration : item.amount}</td>
-                    <td>{row[item.prop]}</td>
+                    <td key={i}>{row[item.prop]}</td>
                   ))}
                 </tr>
               ))}
               <tr>
-                {footer.map((item) => (
-                  <td>{item}</td>
+                {footer.map((item, index) => (
+                  <td key={index}>{typeof item === 'number' ? item.toLocaleString('ko-KR', { maximumFractionDigits: 4 }) : item}</td>
                   // <td className="al-r">{item.amount}</td>
                 ))}
               </tr>

src/hooks/module/useModuleBasicSetting.js

@@ -1,4 +1,4 @@
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import { canvasState, checkedModuleState, isManualModuleSetupState, selectedModuleState } from '@/store/canvasAtom'
 import { rectToPolygon, polygonToTurfPolygon, calculateVisibleModuleHeight, getDegreeByChon } from '@/util/canvas-util'
 import { basicSettingState, roofDisplaySelector } from '@/store/settingAtom'
@@ -32,7 +32,7 @@ export function useModuleBasicSetting() {
   const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
   const checkedModule = useRecoilValue(checkedModuleState)
   const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
-  const [moduleStatistics, setModuleStatistics] = useRecoilState(moduleStatisticsState)
+  const setModuleStatistics = useSetRecoilState(moduleStatisticsState)
 
   useEffect(() => {
     // console.log('basicSetting', basicSetting)
@@ -485,6 +485,7 @@ export function useModuleBasicSetting() {
                 let manualModule = new QPolygon(tempModule.points, { ...moduleOptions, moduleInfo: checkedModule[0] })
                 canvas?.add(manualModule)
                 manualDrawModules.push(manualModule)
+                getModuleStatistics()
               } else {
                 swalFire({ text: getMessage('module.place.overlab') })
               }
@@ -1843,6 +1844,8 @@ export function useModuleBasicSetting() {
         }
       })
     }
+
+    getModuleStatistics()
   }
 
   const autoFlatroofModuleSetup = (placementFlatRef) => {
@@ -2233,7 +2236,7 @@ export function useModuleBasicSetting() {
       })
 
       moduleSetupSurface.set({ modules: setupedModules })
-
+      getModuleStatistics()
       // console.log('moduleSetupSurface', moduleSetupSurface)
       // console.log('setupedModules', setupedModules)
 

src/store/circuitTrestleAtom.js

@@ -30,9 +30,6 @@ export const moduleStatisticsState = atom({
       { name: `발전량(kW)`, prop: 'amount' },
     ],
     rows: [],
-    footer: [
-      { name: '합계', prop: 'name' },
-      { name: `발전량(kW)`, prop: 'amount' },
-    ],
+    footer: ['합계', '0'],
   },
 })