Merge branch 'qcast-pub' into dev

2025-02-05 09:55:54 +09:00 · 2025-02-05 09:55:54 +09:00 · f7e8655d60
commit f7e8655d60
parent bb85d2ed6b 14d6c91f37
7 changed files with 294 additions and 287 deletions
--- a/src/components/floor-plan/CanvasFrame.jsx
+++ b/src/components/floor-plan/CanvasFrame.jsx
@ -28,7 +28,6 @@ export default function CanvasFrame() {
  const { currentCanvasPlan } = usePlan()
  const totalDisplay = useRecoilValue(totalDisplaySelector) // 집계표 표시 여부
  const { setIsGlobalLoading } = useContext(QcastContext)
-  const [moduleStatistics, setModuleStatistics] = useRecoilState(moduleStatisticsState)
  const reset = useResetRecoilState(moduleStatisticsState)
  const loadCanvas = () => {
    if (canvas) {
--- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
@ -354,22 +354,28 @@ export default function CircuitTrestleSetting({ id }) {
              id: uuidv4(),
            }
          })
-          const PcsVoltageChkParams = {
+          const pcsVoltageChkParams = {
            ...getOptYn(),
            useModuleItemList: getUseModuleItemList(),
            roofSurfaceList: getRoofSurfaceList(),
            pcsItemList: getPcsItemList(),
          }
          setSelectedModels(selectedModels)
-          getPcsVoltageChk(PcsVoltageChkParams).then((res) => {})
+          getPcsVoltageChk(pcsVoltageChkParams).then((res) => {
+            setAllocationType(ALLOCATION_TYPE.PASSIVITY)
+          })
        } else {
          swalFire({
-            title: '파워컨디셔너를 추가해 주세요.',
+            title: res.result.resultMsg,
            type: 'alert',
+            confirmFn: () => {
+              return
+            },
          })
+          return
        }
      })
-    } else if (pcsCheck.max) {
+    } else {
      const moduleStdQty = selectedModels.reduce((acc, model) => {
        return acc + parseInt(model.moduleStdQty)
      }, 0)
@ -387,9 +393,9 @@ export default function CircuitTrestleSetting({ id }) {
        })
        return
      }
-    }

-    setAllocationType(ALLOCATION_TYPE.PASSIVITY)
+      setAllocationType(ALLOCATION_TYPE.PASSIVITY)
+    }
  }

  // StepUp에서 선택된 값들을 처리하는 함수 수정
--- a/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx
@ -1,6 +1,7 @@
 import { GlobalDataContext } from '@/app/GlobalDataProvider'
 import { POLYGON_TYPE } from '@/common/common'
 import { useMasterController } from '@/hooks/common/useMasterController'
+import { useModule } from '@/hooks/module/useModule'
 import { useMessage } from '@/hooks/useMessage'
 import { useSwal } from '@/hooks/useSwal'
 import { canvasState } from '@/store/canvasAtom'
@ -11,37 +12,29 @@ import { useRecoilState, useRecoilValue } from 'recoil'

 export default function PassivityCircuitAllocation(props) {
  const {
-    tabNum,
-    setTabNum,
    selectedModels,
    setSelectedModels,
    getOptYn: getApiProps,
    getUseModuleItemList: getSelectedModuleList,
    getSelectModelList: getSelectModelList,
-    getRoofSurfaceList,
-    getModelList,
  } = props
  const { swalFire } = useSwal()
  const { getMessage } = useMessage()
  const canvas = useRecoilValue(canvasState)
  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
  const selectedModules = useRecoilValue(selectedModuleState)
-  const [moduleStatistics, setModuleStatistics] = useRecoilState(moduleStatisticsState)
-  // const [totalWpout, setTotalWpout] = useState(0)
  const [selectedPcs, setSelectedPcs] = useState(selectedModels[0])
-  // const { header, rows: row } = moduleStatistics
-  const [header, setHeader] = useState(moduleStatistics.header)
-  const [rows, setRows] = useState(moduleStatistics.rows)
-  const [footer, setFooter] = useState(['합계'])
+  const { header, rows, footer } = useRecoilValue(moduleStatisticsState)
  const [circuitNumber, setCircuitNumber] = useState(1)
  const [targetModules, setTargetModules] = useState([])
+  const { setModuleStatisticsData } = useModule()
  const { getPcsManualConfChk } = useMasterController()

  useEffect(() => {
    console.log('header, rows', header, rows)
    console.log('selectedModels', selectedModels)
    // setSurfaceInfo()
-    setTableData()
+    setModuleStatisticsData()
    if (!managementState) {
      setManagementState(managementStateLoaded)
    }
@ -158,7 +151,14 @@ export default function PassivityCircuitAllocation(props) {
  }

  const handleCircuitNumberFix = () => {
-    let uniqueCircuitNumbers = null
+    let uniqueCircuitNumbers = [
+      ...new Set(
+        canvas
+          .getObjects()
+          .filter((obj) => obj.name === POLYGON_TYPE.MODULE && obj.circuitNumber)
+          .map((obj) => obj.circuitNumber),
+      ),
+    ]
    if (!circuitNumber || circuitNumber === 0) {
      swalFire({
        text: '회로번호를 1 이상입력해주세요.',
@ -174,15 +174,6 @@ export default function PassivityCircuitAllocation(props) {
      })
      return
    } else if (selectedModels.length > 1) {
-      uniqueCircuitNumbers = [
-        ...new Set(
-          canvas
-            .getObjects()
-            .filter((obj) => obj.name === POLYGON_TYPE.MODULE && obj.circuitNumber)
-            .map((obj) => obj.circuitNumber),
-        ),
-      ]
-
      let result = false
      uniqueCircuitNumbers.forEach((number) => {
        if (
@ -335,7 +326,7 @@ export default function PassivityCircuitAllocation(props) {

      setTargetModules([])
      setCircuitNumber(+circuitNumber + 1)
-      setTableData()
+      setModuleStatisticsData()
    })
  }

@ -347,100 +338,6 @@ export default function PassivityCircuitAllocation(props) {
    }
  }

-  const setTableData = () => {
-    const tempHeader = [
-      { name: getMessage('simulator.table.sub1'), prop: 'name' },
-      { name: getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit'), prop: 'circuit' },
-      ...selectedModules.itemList.map((module) => {
-        return {
-          name: module.itemNm,
-          prop: module.itemId,
-        }
-      }),
-      { name: `${getMessage('modal.panel.batch.statistic.power.generation.amount')}(kW)`, prop: 'wpOut' },
-    ]
-
-    const surfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
-    const surfaceIds = surfaces.map((surface) => surface.parentId)
-    const surfaceObjects = {}
-    const rows = surfaces.map((surface) => {
-      const moduleObject = {}
-      surfaceObjects[surface.id] = {
-        roofSurface: canvas.getObjects().filter((obj) => obj.id === surface.parentId)[0].directionText,
-        circuit: '-',
-        amount: 0,
-        wpOut: 0,
-        circuits: {},
-      }
-
-      surface.modules.forEach((module) => {
-        if (!surfaceObjects[surface.id][module.moduleInfo.itemId]) {
-          // 지붕면에 모듈 존재 여부
-          surfaceObjects[surface.id][module.moduleInfo.itemId] = 0 // 모듈 초기화
-        }
-
-        surfaceObjects[surface.id][module.moduleInfo.itemId]++
-        surfaceObjects[surface.id].wpOut += +module.moduleInfo.wpOut
-        if (module.circuit) {
-          if (!surfaceObjects[surface.id].circuits[module.circuitNumber]) {
-            surfaceObjects[surface.id].circuits[module.circuitNumber] = {
-              circuit: module.circuitNumber,
-              wpOut: 0,
-              circuits: { wpOut: 0 },
-            }
-
-            if (!surfaceObjects[surface.id].circuits[module.circuitNumber].circuits[module.moduleInfo.itemId]) {
-              surfaceObjects[surface.id].circuits[module.circuitNumber].circuits[module.moduleInfo.itemId] = 0
-            }
-          }
-          surfaceObjects[surface.id].circuits[module.circuitNumber].circuits[module.moduleInfo.itemId]++
-          surfaceObjects[surface.id].circuits[module.circuitNumber].circuits.wpOut += +module.moduleInfo.wpOut
-          surfaceObjects[surface.id].wpOut -= +module.moduleInfo.wpOut
-          surfaceObjects[surface.id][module.moduleInfo.itemId]--
-        }
-      })
-    })
-    console.log('rows', rows)
-    console.log('surfaceObjects', surfaceObjects)
-    let tempRows = []
-    Object.keys(surfaceObjects).forEach((key) => {
-      let tempRow = {
-        name: surfaceObjects[key].roofSurface,
-        circuit: surfaceObjects[key].circuit,
-        wpOut: surfaceObjects[key].wpOut,
-      }
-      selectedModules.itemList.forEach((module) => {
-        tempRow[module.itemId] = surfaceObjects[key][module.itemId]
-      })
-      tempRows.push(tempRow)
-
-      Object.keys(surfaceObjects[key].circuits).forEach((circuit) => {
-        let row = {
-          name: surfaceObjects[key].roofSurface,
-          circuit: surfaceObjects[key].circuits[circuit].circuit,
-          wpOut: surfaceObjects[key].circuits[circuit].circuits.wpOut,
-        }
-        selectedModules.itemList.forEach((module) => {
-          row[module.itemId] = surfaceObjects[key].circuits[circuit].circuits[module.itemId]
-        })
-        tempRows.push(row)
-      })
-    })
-    const tempFooter = {
-      name: '총합',
-      circuit: '-',
-      wpOut: tempRows.reduce((acc, row) => acc + row.wpOut, 0),
-    }
-    selectedModules.itemList.forEach((module) => {
-      tempFooter[module.itemId] = tempRows.reduce((acc, row) => acc + row[module.itemId], 0)
-    })
-
-    setHeader(tempHeader)
-    setRows(tempRows.filter((row) => row.wpOut !== 0))
-    setFooter(tempFooter)
-    setModuleStatistics({ header: tempHeader, rows: tempRows.filter((row) => row.wpOut !== 0), footer: tempFooter })
-  }
-
  const initSelectedPcsCircuitNumber = () => {
    swalFire({
      title: getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.init.info'),
@ -516,9 +413,7 @@ export default function PassivityCircuitAllocation(props) {
                    <tr>
                      {header.map((header, i) => (
                        <td className="al-c" key={'footer' + i}>
-                          {typeof footer[header.prop] === 'number'
-                            ? footer[header.prop].toLocaleString('ko-KR', { maximumFractionDigits: 4 })
-                            : footer[header.prop]}
+                          {footer[header.prop]}
                        </td>
                      ))}
                    </tr>
--- a/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx
+++ b/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx
@ -45,175 +45,188 @@ export default function ContextRoofAllocationSetting(props) {
  return (
    <WithDraggable isShow={true} pos={pos}>
      <div className={`modal-pop-wrap lr mount`}>
-        <div className="modal-head modal-handle">
-          <h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="properties-guide">{getMessage('modal.roof.alloc.info')}</div>
-          <div className="allocation-select-wrap">
-            <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
-            <div className="grid-select">
-              <QSelectBox
-                options={roofMaterials}
-                value={roofMaterials[0]}
-                onChange={(e) => {
-                  // const selected = roofMaterials.find((roofMaterial) => roofMaterial.roofMatlCd === e.id)
-                  setCurrentRoofMaterial(e)
-                }}
-                showKey={'roofMatlNm'}
-                sourceKey={'roofMatlCd'}
-                targetKey={'roofMatlCd'}
-              />
+        {currentRoofList && (
+          <>
+            <div className="modal-head modal-handle">
+              <h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
+              <button className="modal-close" onClick={() => closePopup(id)}>
+                닫기
+              </button>
            </div>
-            <button
-              className="allocation-edit"
-              onClick={() => {
-                onAddRoofMaterial()
-              }}
-            >
-              <i className="edit-ico"></i>
-              {getMessage('modal.common.add')}
-            </button>
-          </div>
-          <div className="grid-option-wrap">
-            {currentRoofList.length > 0 &&
-              currentRoofList.map((roof, index) => {
-                return (
-                  <div className="grid-option-box" key={index}>
-                    <div className="d-check-radio pop no-text">
-                      <input type="radio" name="radio01" checked={roof.selected && 'checked'} readOnly={true} />
-                      <label
-                        htmlFor="ra01"
-                        onClick={(e) => {
-                          handleDefaultRoofMaterial(index)
-                        }}
-                      ></label>
-                    </div>
-                    <div className="grid-option-block-form">
-                      <div className="block-box">
-                        <div className="flex-ment">
-                          <div className="grid-select" style={{ width: '248px' }}>
-                            <QSelectBox
-                              options={roofMaterials}
-                              value={roof}
-                              showKey={'roofMatlNm'}
-                              sourceKey={'roofMatlCd'}
-                              targetKey={'roofMatlCd'}
-                              onChange={(e) => handleChangeRoofMaterial(e, index)}
-                            />
-                          </div>
-                          {index === 0 && <span className="dec">{getMessage('modal.roof.alloc.default.roof.material')}</span>}
-                          {index !== 0 && <button className="delete" onClick={() => onDeleteRoofMaterial(index)}></button>}
+            <div className="modal-body">
+              <div className="properties-guide">{getMessage('modal.roof.alloc.info')}</div>
+              <div className="allocation-select-wrap">
+                <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
+                <div className="grid-select">
+                  <QSelectBox
+                    options={roofMaterials}
+                    value={roofMaterials[0]}
+                    onChange={(e) => {
+                      // const selected = roofMaterials.find((roofMaterial) => roofMaterial.roofMatlCd === e.id)
+                      setCurrentRoofMaterial(e)
+                    }}
+                    showKey={'roofMatlNm'}
+                    sourceKey={'roofMatlCd'}
+                    targetKey={'roofMatlCd'}
+                  />
+                </div>
+                <button
+                  className="allocation-edit"
+                  onClick={() => {
+                    onAddRoofMaterial()
+                  }}
+                >
+                  <i className="edit-ico"></i>
+                  {getMessage('modal.common.add')}
+                </button>
+              </div>
+              <div className="grid-option-overflow">
+                <div className="grid-option-wrap">
+                  {currentRoofList.map((roof, index) => {
+                    return (
+                      <div className="grid-option-box" key={index}>
+                        <div className="d-check-radio pop no-text">
+                          <input type="radio" name="radio01" checked={roof.selected && 'checked'} readOnly={true} />
+                          <label
+                            htmlFor="ra01"
+                            onClick={(e) => {
+                              handleDefaultRoofMaterial(index)
+                            }}
+                          ></label>
                        </div>
-                      </div>
-                      <div className="block-box">
-                        <div className="flex-ment">
-                          <span>{getMessage('slope')}</span>
-                          <div className="input-grid" style={{ width: '214px' }}>
-                            <input
-                              type="text"
-                              className="input-origin block"
-                              onChange={(e) => {
-                                handleChangeInput(e, currentAngleType === 'slope' ? 'pitch' : 'angle', index)
-                              }}
-                              defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle}
-                            />
-                          </div>
-                          <span>{pitchText}</span>
-                        </div>
-                      </div>
-                      {(roof.widAuth || roof.lenAuth) && (
-                        <div className="block-box">
-                          {roof.widAuth && (
+                        <div className="grid-option-block-form">
+                          <div className="block-box">
                            <div className="flex-ment">
-                              <span>W</span>
-                              <div className="input-grid" style={{ width: '100px' }}>
-                                <input type="text" className="input-origin block" defaultValue={roof.width} readOnly={roof.widAuth === 'R'} />
+                              <div className="grid-select">
+                                <QSelectBox
+                                  options={roofMaterials}
+                                  value={roof}
+                                  showKey={'roofMatlNm'}
+                                  sourceKey={'roofMatlCd'}
+                                  targetKey={'roofMatlCd'}
+                                  onChange={(e) => handleChangeRoofMaterial(e, index)}
+                                />
                              </div>
+                              {index === 0 && <span className="absol dec">{getMessage('modal.roof.alloc.default.roof.material')}</span>}
+                              {index !== 0 && (
+                                <span className="absol">
+                                  <button className="delete" onClick={() => onDeleteRoofMaterial(index)}></button>
+                                </span>
+                              )}
                            </div>
-                          )}
-                          {roof.lenAuth && (
+                          </div>
+                          <div className="block-box">
                            <div className="flex-ment">
-                              <span>L</span>
-                              <div className="input-grid" style={{ width: '100px' }}>
-                                <input type="text" className="input-origin block" defaultValue={roof.length} readOnly={roof.lenAuth === 'R'} />
+                              <span>{getMessage('slope')}</span>
+                              <div className="input-grid">
+                                <input
+                                  type="text"
+                                  className="input-origin block"
+                                  onChange={(e) => {
+                                    handleChangeInput(e, currentAngleType === 'slope' ? 'pitch' : 'angle', index)
+                                  }}
+                                  defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle}
+                                />
                              </div>
+                              <span className="absol">{pitchText}</span>
                            </div>
-                          )}
-                        </div>
-                      )}
-                      {(roof.raftAuth || roof.roofPchAuth) && (
-                        <div className="block-box">
-                          {roof.raftAuth && (
-                            <div className="block-box">
-                              <div className="flex-ment">
-                                <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
-                                {raftCodes.length > 0 && (
-                                  <div className="grid-select" style={{ width: '160px' }}>
-                                    <QSelectBox
-                                      options={raftCodes}
-                                      value={roof}
-                                      showKey={'clCodeNm'}
-                                      sourceKey={'clCode'}
-                                      targetKey={roof.raft ? 'raft' : 'raftBaseCd'}
-                                    />
+                          </div>
+                          {(roof.widAuth || roof.lenAuth) && (
+                            <>
+                              {roof.widAuth && (
+                                <div className="block-box">
+                                  <div className="flex-ment">
+                                    <span>W</span>
+                                    <div className="input-grid">
+                                      <input type="text" className="input-origin block" defaultValue={roof.width} readOnly={roof.widAuth === 'R'} />
+                                    </div>
                                  </div>
-                                )}
-                              </div>
-                            </div>
-                          )}
-                          {roof.roofPchAuth && (
-                            <div className="block-box">
-                              <div className="flex-ment">
-                                <span>{getMessage('hajebichi')}</span>
-                                <div className="input-grid" style={{ width: '84px' }}>
-                                  <input
-                                    type="text"
-                                    className="input-origin block"
-                                    value={parseInt(roof.hajebichi)}
-                                    readOnly={roof.roofPchAuth === 'R'}
-                                  />
                                </div>
-                              </div>
-                            </div>
+                              )}
+                              {roof.lenAuth && (
+                                <div className="block-box">
+                                  <div className="flex-ment">
+                                    <span>L</span>
+                                    <div className="input-grid">
+                                      <input type="text" className="input-origin block" defaultValue={roof.length} readOnly={roof.lenAuth === 'R'} />
+                                    </div>
+                                  </div>
+                                </div>
+                              )}
+                            </>
                          )}
-                        </div>
-                      )}
-                      <div className="block-box">
-                        <div className="icon-btn-wrap">
-                          <button
-                            className={roof.layout === ROOF_MATERIAL_LAYOUT.PARALLEL ? 'act' : ''}
-                            onClick={() => {
-                              handleChangeLayout(ROOF_MATERIAL_LAYOUT.PARALLEL, index)
-                            }}
-                          >
-                            {getMessage('modal.roof.alloc.select.parallel')}
-                            <i className="allocation01"></i>
-                          </button>
-                          <button
-                            className={roof.layout === ROOF_MATERIAL_LAYOUT.STAIRS ? 'act' : ''}
-                            onClick={() => {
-                              handleChangeLayout(ROOF_MATERIAL_LAYOUT.STAIRS, index)
-                            }}
-                          >
-                            {getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
-                          </button>
+                          {(roof.raftAuth || roof.roofPchAuth) && (
+                            <>
+                              {roof.raftAuth && (
+                                <div className="block-box">
+                                  <div className="flex-ment">
+                                    <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
+                                    {raftCodes.length > 0 && (
+                                      <div className="grid-select">
+                                        <QSelectBox
+                                          options={raftCodes}
+                                          value={roof}
+                                          showKey={'clCodeNm'}
+                                          sourceKey={'clCode'}
+                                          targetKey={roof.raft ? 'raft' : 'raftBaseCd'}
+                                        />
+                                      </div>
+                                    )}
+                                  </div>
+                                </div>
+                              )}
+                              {roof.roofPchAuth && (
+                                <div className="block-box">
+                                  <div className="flex-ment">
+                                    <span>{getMessage('hajebichi')}</span>
+                                    <div className="input-grid">
+                                      <input
+                                        type="text"
+                                        className="input-origin block"
+                                        value={parseInt(roof.hajebichi)}
+                                        readOnly={roof.roofPchAuth === 'R'}
+                                      />
+                                    </div>
+                                  </div>
+                                </div>
+                              )}
+                            </>
+                          )}
+                          <div className="block-box">
+                            <div className="icon-btn-wrap">
+                              <button
+                                className={roof.layout === ROOF_MATERIAL_LAYOUT.PARALLEL ? 'act' : ''}
+                                onClick={() => {
+                                  handleChangeLayout(ROOF_MATERIAL_LAYOUT.PARALLEL, index)
+                                }}
+                              >
+                                {getMessage('modal.roof.alloc.select.parallel')}
+                                <i className="allocation01"></i>
+                              </button>
+                              <button
+                                className={roof.layout === ROOF_MATERIAL_LAYOUT.STAIRS ? 'act' : ''}
+                                onClick={() => {
+                                  handleChangeLayout(ROOF_MATERIAL_LAYOUT.STAIRS, index)
+                                }}
+                              >
+                                {getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
+                              </button>
+                            </div>
+                          </div>
                        </div>
                      </div>
-                    </div>
-                  </div>
-                )
-              })}
-          </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={handleSaveContext}>
-              {getMessage('modal.roof.alloc.apply')}
-            </button>
-          </div>
-        </div>
+                    )
+                  })}
+                </div>
+              </div>
+              <div className="grid-btn-wrap">
+                <button className="btn-frame modal act" onClick={handleSaveContext}>
+                  {getMessage('modal.roof.alloc.apply')}
+                </button>
+              </div>
+            </div>
+          </>
+        )}
        <div className="modal-foot modal-handle"></div>
      </div>
    </WithDraggable>
--- a/src/hooks/module/useModule.js
+++ b/src/hooks/module/useModule.js
@ -1,12 +1,14 @@
 import { BATCH_TYPE, POLYGON_TYPE } from '@/common/common'
 import { canvasState } from '@/store/canvasAtom'
 import { isOverlap, polygonToTurfPolygon, rectToPolygon } from '@/util/canvas-util'
-import { useRecoilValue } from 'recoil'
+import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { v4 as uuidv4 } from 'uuid'
 import * as turf from '@turf/turf'
 import { useSwal } from '../useSwal'
 import { useModuleBasicSetting } from './useModuleBasicSetting'
 import { useMessage } from '../useMessage'
+import { selectedModuleState } from '@/store/selectedModuleOptions'
+import { moduleStatisticsState } from '@/store/circuitTrestleAtom'

 export const MODULE_REMOVE_TYPE = {
  LEFT: 'left',
@ -35,6 +37,8 @@ export function useModule() {
  const { swalFire } = useSwal()
  const { getMessage } = useMessage()
  const { checkModuleDisjointObjects } = useModuleBasicSetting()
+  const selectedModules = useRecoilValue(selectedModuleState)
+  const setModuleStatistics = useSetRecoilState(moduleStatisticsState)

  const moduleMove = (length, direction) => {
    const selectedObj = canvas.getActiveObjects() //선택된 객체들을 가져옴
@ -929,6 +933,92 @@ export function useModule() {
      .filter((obj) => [BATCH_TYPE.OPENING, BATCH_TYPE.TRIANGLE_DORMER, BATCH_TYPE.PENTAGON_DORMER, BATCH_TYPE.SHADOW].includes(obj.name))
  }

+  const setModuleStatisticsData = () => {
+    const tempHeader = [
+      { name: getMessage('simulator.table.sub1'), prop: 'name' },
+      { name: getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit'), prop: 'circuit' },
+      ...selectedModules.itemList.map((module) => {
+        return {
+          name: module.itemNm,
+          prop: module.itemId,
+        }
+      }),
+      { name: `${getMessage('modal.panel.batch.statistic.power.generation.amount')}(kW)`, prop: 'wpOut' },
+    ]
+    const surfaceObjects = {}
+    const surfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
+    const rows = surfaces.map((surface) => {
+      surfaceObjects[surface.id] = {
+        roofSurface: canvas.getObjects().filter((obj) => obj.id === surface.parentId)[0].directionText,
+        circuit: '-',
+        amount: 0,
+        wpOut: 0,
+        circuits: {},
+      }
+
+      surface.modules.forEach((module) => {
+        if (!surfaceObjects[surface.id][module.moduleInfo.itemId]) {
+          // 지붕면에 모듈 존재 여부
+          surfaceObjects[surface.id][module.moduleInfo.itemId] = 0 // 모듈 초기화
+        }
+
+        surfaceObjects[surface.id][module.moduleInfo.itemId]++
+        surfaceObjects[surface.id].wpOut += +module.moduleInfo.wpOut
+        if (module.circuit) {
+          if (!surfaceObjects[surface.id].circuits[module.circuitNumber]) {
+            surfaceObjects[surface.id].circuits[module.circuitNumber] = {
+              circuit: module.circuitNumber,
+              wpOut: 0,
+              circuits: { wpOut: 0 },
+            }
+
+            if (!surfaceObjects[surface.id].circuits[module.circuitNumber].circuits[module.moduleInfo.itemId]) {
+              surfaceObjects[surface.id].circuits[module.circuitNumber].circuits[module.moduleInfo.itemId] = 0
+            }
+          }
+          surfaceObjects[surface.id].circuits[module.circuitNumber].circuits[module.moduleInfo.itemId]++
+          surfaceObjects[surface.id].circuits[module.circuitNumber].circuits.wpOut += +module.moduleInfo.wpOut
+          surfaceObjects[surface.id].wpOut -= +module.moduleInfo.wpOut
+          surfaceObjects[surface.id][module.moduleInfo.itemId]--
+        }
+      })
+    })
+    let tempRows = []
+    Object.keys(surfaceObjects).forEach((key) => {
+      let tempRow = {
+        name: surfaceObjects[key].roofSurface,
+        circuit: surfaceObjects[key].circuit,
+        wpOut: parseInt((surfaceObjects[key].wpOut / 1000).toFixed(3)),
+      }
+      selectedModules.itemList.forEach((module) => {
+        tempRow[module.itemId] = surfaceObjects[key][module.itemId]
+      })
+      tempRows.push(tempRow)
+
+      Object.keys(surfaceObjects[key].circuits).forEach((circuit) => {
+        let row = {
+          name: surfaceObjects[key].roofSurface,
+          circuit: surfaceObjects[key].circuits[circuit].circuit,
+          wpOut: parseInt((surfaceObjects[key].circuits[circuit].circuits.wpOut / 1000).toFixed(3)),
+        }
+        selectedModules.itemList.forEach((module) => {
+          row[module.itemId] = surfaceObjects[key].circuits[circuit].circuits[module.itemId]
+        })
+        tempRows.push(row)
+      })
+    })
+
+    const tempFooter = {
+      name: getMessage('modal.panel.batch.statistic.total'),
+      circuit: '-',
+      wpOut: tempRows.reduce((acc, row) => acc + row.wpOut, 0),
+    }
+    selectedModules.itemList.forEach((module) => {
+      tempFooter[module.itemId] = tempRows.reduce((acc, row) => acc + row[module.itemId], 0)
+    })
+    setModuleStatistics({ header: tempHeader, rows: tempRows.filter((row) => row.wpOut !== 0), footer: tempFooter })
+  }
+
  return {
    moduleMove,
    moduleMultiMove,
@ -942,5 +1032,6 @@ export function useModule() {
    muduleRowInsert,
    modulesRemove,
    alignModule,
+    setModuleStatisticsData,
  }
 }
--- a/src/hooks/module/useModuleBasicSetting.js
+++ b/src/hooks/module/useModuleBasicSetting.js
@ -2468,7 +2468,7 @@ export function useModuleBasicSetting(tabNum) {
        ...surface,
        name: canvas.getObjects().filter((obj) => obj.id === surface.parentId)[0].directionText, // 지붕면
        // powerGeneration: wpOut.toLocaleString('ko-KR', { maximumFractionDigits: 4 }),
-        wpOut: wpOut,
+        wpOut: (wpOut / 1000).toFixed(3),
      }
    })

@ -2481,7 +2481,7 @@ export function useModuleBasicSetting(tabNum) {
      }),
      { name: `${getMessage('modal.panel.batch.statistic.power.generation.amount')}(kW)`, prop: 'wpOut' },
    ]
-    let footer = ['합계']
+    let footer = [getMessage('modal.panel.batch.statistic.total')]
    let footerData = {}
    rows.forEach((row) => {
      Object.keys(moduleInfo).map((key) => {
@ -2492,7 +2492,7 @@ export function useModuleBasicSetting(tabNum) {
    Object.keys(footerData).forEach((key) => {
      footer.push(footerData[key])
    })
-    footer.push(totalWpout)
+    footer.push((totalWpout / 1000).toFixed(3))
    console.log({ header: header, rows, footer: footer })
    setModuleStatistics({ header: header, rows, footer: footer })
  }
--- a/src/store/circuitTrestleAtom.js
+++ b/src/store/circuitTrestleAtom.js
@ -40,7 +40,10 @@ export const moduleStatisticsState = atom({
      { name: `발전량(kW)`, prop: 'amount' },
    ],
    rows: [],
-    footer: ['합계', '0'],
+    footer: [
+      { name: '-', prop: 'name' },
+      { name: 0, prop: 'amount' },
+    ],
  },
  dangerouslyAllowMutability: true,
 })