Merge branch 'dev' of ssh://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into dev

src/components/floor-plan/modal/basic/BasicSetting.jsx

@@ -38,7 +38,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   const [isClosePopup, setIsClosePopup] = useState({ close: false, id: 0 })
 
   // const { initEvent } = useContext(EventContext)
-  const { manualModuleSetup, autoModuleSetup, manualFlatroofModuleSetup, autoFlatroofModuleSetup } = useModuleBasicSetting(1)
+  const { manualModuleSetup, autoModuleSetup, manualFlatroofModuleSetup, autoFlatroofModuleSetup } = useModuleBasicSetting(tabNum)
   const { updateObjectDate } = useMasterController()
   const handleBtnNextStep = () => {
     if (tabNum === 1) {

src/components/floor-plan/modal/basic/step/Module.jsx

@@ -58,8 +58,8 @@ export default function Module({ setTabNum }) {
   useEffect(() => {
     if (tempModuleSelectionData.roofConstructions.length > 0) {
       if (tempModuleSelectionData.common.moduleItemId && isObjectNotEmpty(tempModuleSelectionData.module)) {
-        setModuleSelectionData(tempModuleSelectionData)
         //저장된 temp데이터가 지붕재(addedRoofs) 개수와 같으면 모듈 선택 저장
+        setModuleSelectionData(tempModuleSelectionData)
         if (tempModuleSelectionData.roofConstructions.length === addedRoofs.length) {
           moduleSelectedDataTrigger(tempModuleSelectionData)
         }
@@ -83,7 +83,7 @@ export default function Module({ setTabNum }) {
     header: [
       { name: getMessage('module'), width: 150, prop: 'module', type: 'color-box' },
       {
-        name: `${getMessage('높이')}  (mm)`,
+        name: `${getMessage('height')}  (mm)`,
         prop: 'height',
       },
       { name: `${getMessage('width')} (mm)`, prop: 'width' },

src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx

@@ -47,7 +47,7 @@ export default function CircuitTrestleSetting({ id }) {
   // 회로할당(승합설정)에서 선택된 값들을 저장할 상태 추가
   const [selectedStepUpValues, setSelectedStepUpValues] = useState({})
   const [getStepUpSelections, setGetStepUpSelections] = useState(null)
-  const { trigger: setCircuitData } = useCanvasPopupStatusController(4)
+  // const { trigger: setCircuitData } = useCanvasPopupStatusController(4)
   // const [stepUpListData, setStepUpListData] = useRecoilState(stepUpListDataState)
   const [stepUpListData, setStepUpListData] = useState([])
   const [seletedOption, setSeletedOption] = useState(null)
@@ -75,19 +75,19 @@ export default function CircuitTrestleSetting({ id }) {
     getModuleList,
     removeNotAllocationModules,
   } = useCircuitTrestle()
-
+  // const { trigger: moduleSelectedDataTrigger } = useCanvasPopupStatusController(2)
   useEffect(() => {
     if (!managementState) {
       setManagementState(managementStateLoaded)
     }
-    setCircuitData({
+    // setCircuitData({
-      makers,
+    //   makers,
-      selectedMaker,
+    //   selectedMaker,
-      series,
+    //   series,
-      models,
+    //   models,
-      selectedModels,
+    //   selectedModels,
-      pcsCheck,
+    //   pcsCheck,
-    })
+    // })
   }, [])
 
   // 수동할당 시 모듈 삭제
@@ -141,7 +141,7 @@ export default function CircuitTrestleSetting({ id }) {
             ...getOptYn(),
             useModuleItemList: getUseModuleItemList(),
             roofSurfaceList: getRoofSurfaceList(),
-            pcsItemList: getPcsItemList(),
+            pcsItemList: pcsItemList,
           }
           // 추천 목록 선택
           setSelectedModels(pcsItemList)
@@ -249,10 +249,6 @@ export default function CircuitTrestleSetting({ id }) {
       // 파워컨디셔너 추천 목록 조회
       getPcsAutoRecommendList(params).then((res) => {
         if (res.data?.pcsItemList) {
-          const itemList = models.filter((model) => {
-            return res.data?.pcsItemList.map((item) => item.itemId).includes(model.itemId)
-          })
-
           let pcsItemList = []
           let pcsObj = {}
           models.forEach((model) => {
@@ -356,21 +352,25 @@ export default function CircuitTrestleSetting({ id }) {
 
   // 이전 버튼 클릭 시
   const onClickPrev = () => {
-    setAllocationType(ALLOCATION_TYPE.AUTO)
+    // setAllocationType(ALLOCATION_TYPE.AUTO)
     swalFire({
       text: '할당한 회로 번호가 초기화됩니다.',
       type: 'alert',
       icon: 'warning',
       confirmFn: () => {
-        const circuitModules = canvas
+        const circuitModules = canvas.getObjects().filter((obj) => obj.name === 'module')
-          .getObjects()
-          .filter((obj) => obj.name === 'module' && selectedModels.map((model) => model.id).includes(obj.circuit?.circuitInfo?.id))
         canvas.remove(...circuitModules.map((module) => module.circuit))
         circuitModules.forEach((obj) => {
           obj.circuit = null
           obj.pcsItemId = null
         })
-        setAllocationType(ALLOCATION_TYPE.AUTO)
+
+        if (allocationType === ALLOCATION_TYPE.PASSIVITY) {
+          setAllocationType(ALLOCATION_TYPE.AUTO)
+        } else {
+          setTabNum(1)
+        }
+
         canvas.renderAll()
       },
     })
@@ -516,7 +516,7 @@ export default function CircuitTrestleSetting({ id }) {
           )}
           {tabNum === 2 && (
             <div className="grid-btn-wrap">
-              <button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>
+              <button className="btn-frame modal mr5" onClick={() => onClickPrev()}>
                 {getMessage('modal.common.prev')}
               </button>
               {/* <button className="btn-frame modal act" onClick={() => apply()}> */}

src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx

@@ -37,6 +37,7 @@ export default function PowerConditionalSelect(props) {
   const { getPcsMakerList, getPcsModelList } = useMasterController()
   const selectedModules = useRecoilValue(selectedModuleState)
   const { swalFire } = useSwal()
+  // const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState)
   const modelHeader = [
     { name: getMessage('시리즈'), width: '15%', prop: 'pcsSerNm', type: 'color-box' },
     { name: getMessage('명칭'), width: '15%', prop: 'goodsNo', type: 'color-box' },
@@ -129,12 +130,7 @@ export default function PowerConditionalSelect(props) {
     const pcsSerList = selectedSeries.map((series) => {
       return { pcsSerCd: series.pcsSerCd }
     })
-    const moduleItemList = selectedModules.itemList?.map((module) => {
+    const moduleItemList = getUseModuleItemList()
-      return {
-        itemId: module.itemId,
-        mixMatlNo: module.mixMatlNo,
-      }
-    })
     getPcsModelList({ pcsMkrCd, pcsSerList, moduleItemList }).then((res) => {
       if (res?.result.code === 200 && res?.data) {
         setModels(

src/components/floor-plan/modal/module/PanelEdit.jsx

@@ -52,6 +52,18 @@ export default function PanelEdit(props) {
       })
       return
     }
+
+    const completeSurfaces = canvas.getObject().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.isComplete)
+
+    if (completeSurfaces.length > 0) {
+      swalFire({
+        title: getMessage('modal.module.can.not.edit'),
+        type: 'alert',
+        icon: 'error',
+      })
+      return
+    }
+
     switch (type) {
       case PANEL_EDIT_TYPE.MOVE:
         moduleMove(length, direction)

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

@@ -7,6 +7,9 @@ import { moduleStatisticsState } from '@/store/circuitTrestleAtom'
 import { useRecoilValue, useResetRecoilState } from 'recoil'
 import { useModule } from '@/hooks/module/useModule'
 import { useEavesGableEdit } from '@/hooks/roofcover/useEavesGableEdit'
+import { canvasState } from '@/store/canvasAtom'
+import { POLYGON_TYPE } from '@/common/common'
+import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle'
 
 export default function PanelBatchStatistics() {
   const { getMessage } = useMessage()
@@ -15,11 +18,18 @@ export default function PanelBatchStatistics() {
     x: 0,
     y: 30,
   })
+  const canvas = useRecoilValue(canvasState)
   const { header, rows, footer } = useRecoilValue(moduleStatisticsState)
-  const { setModuleStatisticsData } = useModule()
+  const { setModuleStatisticsData } = useCircuitTrestle()
 
   useEffect(() => {
+    const roofSurfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
+    console.log('🚀 ~ useEffect ~ roofSurfaces1:', roofSurfaces)
     setModuleStatisticsData()
+    console.log(
+      '🚀 ~ useEffect ~ roofSurfaces2:',
+      canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE),
+    )
   }, [])
 
   return (

src/hooks/common/useMasterController.js

@@ -137,16 +137,6 @@ export function useMasterController() {
    * @returns
    */
   const getPcsModelList = async (params = null) => {
-    const test = {
-      pcsMkrCd: 'MKR003',
-      pcsSerList: [{ pcsSerCd: 'SER007' }, { pcsSerCd: 'SER009' }, { pcsSerCd: 'SER010' }],
-      moduleItemList: [
-        { itemId: '107015', mixMatlNo: null },
-        { itemId: '107077', mixMatlNo: null },
-        { itemId: '107015', mixMatlNo: null },
-      ],
-    }
-
     return await post({ url: '/api/v1/master/getPcsSeriesItemList', data: params }).then((res) => {
       return res
     })

src/hooks/floorPlan/useImgLoader.js

@@ -11,7 +11,6 @@ import { POLYGON_TYPE } from '@/common/common'
  */
 export function useImgLoader() {
   const canvas = useRecoilValue(canvasState)
-  const { removeMouseLines } = useCanvas()
   const { currentCanvasPlan } = usePlan()
   const { post } = useAxios()
 
@@ -66,5 +65,16 @@ export function useImgLoader() {
     console.log('🚀 ~ handleCanvasToPng ~ res:', res)
   }
 
+  /**
+   * 마우스 포인터의 가이드라인을 제거합니다.
+   */
+  const removeMouseLines = () => {
+    if (canvas?._objects.length > 0) {
+      const mouseLines = canvas?._objects.filter((obj) => obj.name === 'mouseLine')
+      mouseLines.forEach((item) => canvas?.remove(item))
+    }
+    canvas?.renderAll()
+  }
+
   return { handleCanvasToPng }
 }

src/hooks/module/useModule.js

@@ -9,6 +9,7 @@ import { useModuleBasicSetting } from './useModuleBasicSetting'
 import { useMessage } from '../useMessage'
 import { selectedModuleState } from '@/store/selectedModuleOptions'
 import { moduleStatisticsState } from '@/store/circuitTrestleAtom'
+import { useCircuitTrestle } from '../useCirCuitTrestle'
 
 export const MODULE_REMOVE_TYPE = {
   LEFT: 'left',
@@ -38,7 +39,7 @@ export function useModule() {
   const { getMessage } = useMessage()
   const { checkModuleDisjointObjects } = useModuleBasicSetting()
   const selectedModules = useRecoilValue(selectedModuleState)
-  const setModuleStatistics = useSetRecoilState(moduleStatisticsState)
+  const { setModuleStatisticsData } = useCircuitTrestle()
 
   const moduleMove = (length, direction) => {
     const selectedObj = canvas.getActiveObjects() //선택된 객체들을 가져옴
@@ -979,93 +980,6 @@ export function useModule() {
       .filter((obj) => [BATCH_TYPE.OPENING, BATCH_TYPE.TRIANGLE_DORMER, BATCH_TYPE.PENTAGON_DORMER, BATCH_TYPE.SHADOW].includes(obj.name))
   }
 
-  const setModuleStatisticsData = () => {
-    if (selectedModules?.length === 0) return
-    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: parseFloat(surfaceObjects[key].wpOut / 1000),
-      }
-      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: parseFloat(surfaceObjects[key].circuits[circuit].circuits.wpOut / 1000),
-        }
-        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,
@@ -1080,6 +994,5 @@ export function useModule() {
     modulesRemove,
     moduleRoofRemove,
     alignModule,
-    setModuleStatisticsData,
   }
 }

src/hooks/module/useModuleBasicSetting.js

@@ -64,6 +64,7 @@ export function useModuleBasicSetting(tabNum) {
       if (canvasSetting.roofSizeSet !== '3') {
         const common = moduleSelectionData.common
         const roofConstructions = moduleSelectionData.roofConstructions
+
         const listParams = roofConstructions.map((item) => {
           return {
             ...common,
@@ -78,6 +79,7 @@ export function useModuleBasicSetting(tabNum) {
             inclCd: String(item.addRoof.pitch),
             roofIndex: item.addRoof.index,
             workingWidth: item.addRoof.lenBase,
+            raftBaseCd: item.trestle.raftBaseCd,
           }
         })
         setTrestleDetailParams(listParams)
@@ -142,174 +144,180 @@ export function useModuleBasicSetting(tabNum) {
   const makeModuleInstArea = (roof, trestleDetail) => {
     //지붕 객체 반환
 
-    if (!roof) {
+    if (tabNum == 3) {
-      return
+      if (!roof) {
-    }
-
-    //도머등 오브젝트 객체가 있으면 아웃라인 낸다
-    const batchObjects = canvas
-      ?.getObjects()
-      .filter(
-        (obj) =>
-          obj.name === BATCH_TYPE.OPENING ||
-          obj.name === BATCH_TYPE.SHADOW ||
-          obj.name === BATCH_TYPE.TRIANGLE_DORMER ||
-          obj.name === BATCH_TYPE.PENTAGON_DORMER,
-      ) //도머s 객체
-
-    //도머도 외곽을 따야한다
-    const batchObjectOptions = {
-      stroke: 'red',
-      fill: 'transparent',
-      strokeDashArray: [10, 4],
-      strokeWidth: 1,
-      lockMovementX: true,
-      lockMovementY: true,
-      lockRotation: true,
-      lockScalingX: true,
-      lockScalingY: true,
-      selectable: true,
-      name: POLYGON_TYPE.OBJECT_SURFACE,
-      originX: 'center',
-      originY: 'center',
-    }
-
-    //도머등 오브젝트 객체가 있으면 아웃라인 낸다
-    batchObjects.forEach((obj) => {
-      //도머일때
-      if (obj.name === BATCH_TYPE.TRIANGLE_DORMER || obj.name === BATCH_TYPE.PENTAGON_DORMER) {
-        const groupPoints = obj.groupPoints
-        const offsetObjects = offsetPolygon(groupPoints, 10)
-        const dormerOffset = new QPolygon(offsetObjects, batchObjectOptions)
-        dormerOffset.setViewLengthText(false)
-        canvas.add(dormerOffset) //모듈설치면 만들기
-      } else {
-        //개구, 그림자일때
-        const points = obj.points
-        const offsetObjects = offsetPolygon(points, 10)
-        const offset = new QPolygon(offsetObjects, batchObjectOptions)
-        offset.setViewLengthText(false)
-        canvas.add(offset) //모듈설치면 만들기
-      }
-    })
-
-    const isExistSurface = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.parentId === roof.id)
-    canvas.remove(isExistSurface)
-
-    let offsetLength = canvasSetting.roofSizeSet === '3' ? -30 : (trestleDetail.eaveIntvl / 10) * -1
-    setSurfaceShapePattern(roof, roofDisplay.column, true) //패턴 변경
-    const offsetPoints = offsetPolygon(roof.points, offsetLength) //안쪽 offset
-    //모듈설치영역?? 생성
-
-    const surfaceId = uuidv4()
-    let isNorth = false
-
-    if (canvasSetting.roofSizeSet !== '3') {
-      //북면이 있지만
-      if (roof.directionText && roof.directionText.indexOf('北') > -1) {
-        //북쪽일때 해당 서북서, 동북동은 제외한다고 한다
-        if (!(roof.directionText.indexOf('西北西') > -1 || roof.directionText.indexOf('東北東') > -1)) {
-          isNorth = true
-        }
-      }
-    }
-    //모듈설치면 생성
-    let setupSurface = new QPolygon(offsetPoints, {
-      stroke: 'red',
-      fill: 'rgba(255,255,255,0.1)',
-      strokeDashArray: [10, 4],
-      strokeWidth: 1,
-      lockMovementX: true,
-      lockMovementY: true,
-      lockRotation: true,
-      lockScalingX: true,
-      lockScalingY: true,
-      selectable: true,
-      parentId: roof.id, //가대 폴리곤의 임시 인덱스를 넣어줌
-      name: POLYGON_TYPE.MODULE_SETUP_SURFACE,
-      flowDirection: roof.direction,
-      direction: roof.direction,
-      flipX: roof.flipX,
-      flipY: roof.flipY,
-      surfaceId: surfaceId,
-      originX: 'center',
-      originY: 'center',
-      modules: [],
-      roofMaterial: roof.roofMaterial,
-      trestleDetail: trestleDetail,
-      isNorth: isNorth,
-      perPixelTargetFind: true,
-      // angle: -compasDeg,
-    })
-
-    setupSurface.setViewLengthText(false)
-    canvas.add(setupSurface) //모듈설치면 만들기
-
-    //지붕면 선택 금지
-    roof.set({
-      selectable: false, //선택 금지
-      // evented: false, //클릭 이벤트도 금지
-    })
-
-    canvas.renderAll()
-
-    //바로 들어올때
-    const setupModules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
-    setupModules.forEach((obj) => {
-      canvas.bringToFront(obj)
-    })
-
-    //모듈설치면 클릭이벤트
-    addTargetMouseEventListener('mousedown', setupSurface, function () {
-      toggleSelection(setupSurface)
-    })
-  }
-
-  let selectedModuleInstSurfaceArray = []
-
-  //설치 범위 지정 클릭 이벤트
-  const toggleSelection = (setupSurface) => {
-    const isExist = selectedModuleInstSurfaceArray.some((obj) => obj.parentId === setupSurface.parentId)
-    //최초 선택일때
-    if (!isExist) {
-      //설치면이 북면이고 북면설치 허용점이 아니면
-      if (setupSurface.isNorth && !saleStoreNorthFlg) {
-        swalFire({ text: getMessage('module.not.batch.north'), icon: 'warning' })
         return
       }
 
-      //기본 선택이랑 스트로크 굵기가 같으면 선택 안됨으로 봄
+      //도머등 오브젝트 객체가 있으면 아웃라인 낸다
-      setupSurface.set({
+      const batchObjects = canvas
-        ...setupSurface,
+        ?.getObjects()
-        strokeWidth: 3,
+        .filter(
-        strokeDashArray: [0],
+          (obj) =>
-        fill: 'rgba(255,255,255,0.1)',
+            obj.name === BATCH_TYPE.OPENING ||
-      })
+            obj.name === BATCH_TYPE.SHADOW ||
-      canvas.discardActiveObject() // 객체의 활성 상태 해제
+            obj.name === BATCH_TYPE.TRIANGLE_DORMER ||
-      //중복으로 들어가는걸 방지하기 위한 코드
+            obj.name === BATCH_TYPE.PENTAGON_DORMER,
+        ) //도머s 객체
 
-      canvas?.renderAll()
+      //도머도 외곽을 따야한다
-      selectedModuleInstSurfaceArray.push(setupSurface)
+      const batchObjectOptions = {
-      setCurrentObject({ name: 'moduleSetupSurface', arrayData: [...selectedModuleInstSurfaceArray] })
+        stroke: 'red',
-    } else {
+        fill: 'transparent',
-      //선택후 재선택하면 선택안됨으로 변경
-      setupSurface.set({
-        ...setupSurface,
-        fill: 'rgba(255,255,255,0.1)',
         strokeDashArray: [10, 4],
         strokeWidth: 1,
-      })
+        lockMovementX: true,
-      canvas.discardActiveObject() // 객체의 활성 상태 해제
+        lockMovementY: true,
+        lockRotation: true,
+        lockScalingX: true,
+        lockScalingY: true,
+        selectable: true,
+        name: POLYGON_TYPE.OBJECT_SURFACE,
+        originX: 'center',
+        originY: 'center',
+      }
 
-      //폴리곤에 커스텀 인덱스를 가지고 해당 배열 인덱스를 찾아 삭제함
+      //도머등 오브젝트 객체가 있으면 아웃라인 낸다
-      const removeIndex = setupSurface.parentId
+      batchObjects.forEach((obj) => {
-      const removeArrayIndex = selectedModuleInstSurfaceArray.findIndex((obj) => obj.parentId === removeIndex)
+        //도머일때
-      selectedModuleInstSurfaceArray.splice(removeArrayIndex, 1)
+        if (obj.name === BATCH_TYPE.TRIANGLE_DORMER || obj.name === BATCH_TYPE.PENTAGON_DORMER) {
-      setCurrentObject({ name: 'moduleSetupSurface', arrayData: [...selectedModuleInstSurfaceArray] })
+          const groupPoints = obj.groupPoints
+          const offsetObjects = offsetPolygon(groupPoints, 10)
+          const dormerOffset = new QPolygon(offsetObjects, batchObjectOptions)
+          dormerOffset.setViewLengthText(false)
+          canvas.add(dormerOffset) //모듈설치면 만들기
+        } else {
+          //개구, 그림자일때
+          const points = obj.points
+          const offsetObjects = offsetPolygon(points, 10)
+          const offset = new QPolygon(offsetObjects, batchObjectOptions)
+          offset.setViewLengthText(false)
+          canvas.add(offset) //모듈설치면 만들기
+        }
+      })
+
+      const isExistSurface = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.parentId === roof.id)
+      if (isExistSurface) {
+        addTargetMouseEventListener('mousedown', isExistSurface, function () {
+          toggleSelection(isExistSurface)
+        })
+      } else {
+        let offsetLength = canvasSetting.roofSizeSet === '3' ? -30 : (trestleDetail.eaveIntvl / 10) * -1
+        setSurfaceShapePattern(roof, roofDisplay.column, true) //패턴 변경
+        const offsetPoints = offsetPolygon(roof.points, offsetLength) //안쪽 offset
+        //모듈설치영역?? 생성
+
+        const surfaceId = uuidv4()
+        let isNorth = false
+
+        if (canvasSetting.roofSizeSet !== '3') {
+          //북면이 있지만
+          if (roof.directionText && roof.directionText.indexOf('北') > -1) {
+            //북쪽일때 해당 서북서, 동북동은 제외한다고 한다
+            if (!(roof.directionText.indexOf('西北西') > -1 || roof.directionText.indexOf('東北東') > -1)) {
+              isNorth = true
+            }
+          }
+        }
+        //모듈설치면 생성
+        let setupSurface = new QPolygon(offsetPoints, {
+          stroke: 'red',
+          fill: 'rgba(255,255,255,0.1)',
+          strokeDashArray: [10, 4],
+          strokeWidth: 1,
+          lockMovementX: true,
+          lockMovementY: true,
+          lockRotation: true,
+          lockScalingX: true,
+          lockScalingY: true,
+          selectable: true,
+          parentId: roof.id, //가대 폴리곤의 임시 인덱스를 넣어줌
+          name: POLYGON_TYPE.MODULE_SETUP_SURFACE,
+          flowDirection: roof.direction,
+          direction: roof.direction,
+          flipX: roof.flipX,
+          flipY: roof.flipY,
+          surfaceId: surfaceId,
+          originX: 'center',
+          originY: 'center',
+          modules: [],
+          roofMaterial: roof.roofMaterial,
+          trestleDetail: trestleDetail,
+          isNorth: isNorth,
+          perPixelTargetFind: true,
+          // angle: -compasDeg,
+        })
+
+        setupSurface.setViewLengthText(false)
+        canvas.add(setupSurface) //모듈설치면 만들기
+
+        //지붕면 선택 금지
+        roof.set({
+          selectable: false, //선택 금지
+          // evented: false, //클릭 이벤트도 금지
+        })
+
+        canvas.renderAll()
+
+        //바로 들어올때
+        const setupModules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
+        setupModules.forEach((obj) => {
+          canvas.bringToFront(obj)
+        })
+
+        //모듈설치면 클릭이벤트
+        addTargetMouseEventListener('mousedown', setupSurface, function () {
+          toggleSelection(setupSurface)
+        })
+      }
     }
 
-    canvas?.renderAll()
+    let selectedModuleInstSurfaceArray = []
-    setModuleSetupSurface([...selectedModuleInstSurfaceArray])
+
+    //설치 범위 지정 클릭 이벤트
+    const toggleSelection = (setupSurface) => {
+      const isExist = selectedModuleInstSurfaceArray.some((obj) => obj.parentId === setupSurface.parentId)
+      //최초 선택일때
+      if (!isExist) {
+        //설치면이 북면이고 북면설치 허용점이 아니면
+        if (setupSurface.isNorth && !saleStoreNorthFlg) {
+          swalFire({ text: getMessage('module.not.batch.north'), icon: 'warning' })
+          return
+        }
+
+        //기본 선택이랑 스트로크 굵기가 같으면 선택 안됨으로 봄
+        setupSurface.set({
+          ...setupSurface,
+          strokeWidth: 3,
+          strokeDashArray: [0],
+          fill: 'rgba(255,255,255,0.1)',
+        })
+        canvas.discardActiveObject() // 객체의 활성 상태 해제
+        //중복으로 들어가는걸 방지하기 위한 코드
+
+        canvas?.renderAll()
+        selectedModuleInstSurfaceArray.push(setupSurface)
+        setCurrentObject({ name: 'moduleSetupSurface', arrayData: [...selectedModuleInstSurfaceArray] })
+      } else {
+        //선택후 재선택하면 선택안됨으로 변경
+        setupSurface.set({
+          ...setupSurface,
+          fill: 'rgba(255,255,255,0.1)',
+          strokeDashArray: [10, 4],
+          strokeWidth: 1,
+        })
+        canvas.discardActiveObject() // 객체의 활성 상태 해제
+
+        //폴리곤에 커스텀 인덱스를 가지고 해당 배열 인덱스를 찾아 삭제함
+        const removeIndex = setupSurface.parentId
+        const removeArrayIndex = selectedModuleInstSurfaceArray.findIndex((obj) => obj.parentId === removeIndex)
+        selectedModuleInstSurfaceArray.splice(removeArrayIndex, 1)
+        setCurrentObject({ name: 'moduleSetupSurface', arrayData: [...selectedModuleInstSurfaceArray] })
+      }
+
+      canvas?.renderAll()
+      setModuleSetupSurface([...selectedModuleInstSurfaceArray])
+    }
   }
 
   //모듈,회로에서 다른메뉴 -> 배치면으로 갈 경수 초기화

src/hooks/module/useModuleSelection.js

@@ -114,7 +114,9 @@ export function useModuleSelection(props) {
   }
 
   //데이터가 있으면 모듈 자동 선택
+  //1번 모듈 리스트 조회
   useEffect(() => {
+    //모듈리스트의 데이터가 변경 되면 모듈 선택으로 이벤트
     if (moduleList.length > 0 && isObjectNotEmpty(moduleSelectionData.module)) {
       handleChangeModule(moduleSelectionData.module)
     }

src/hooks/module/useModuleTabContents.js

@@ -29,7 +29,7 @@ export function useModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab
   const [roofBaseParams, setRoofBaseParams] = useState({}) //지붕밑바탕 관련  api호출 파라메터
 
   const moduleSelectionInitParams = useRecoilValue(moduleSelectionInitParamsState) //모듈 기본 데이터 ex) 면조도, 높이등등
-  const moduleSelectionInitOriginData = useRef(moduleSelectionInitParams)
+  const moduleSelectionInitOriginData = useRef({})
 
   const { getTrestleList, getConstructionList } = useMasterController()
 
@@ -95,8 +95,6 @@ export function useModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab
     })
     setRaftCodes(raftCodeList)
 
-    console.log('addRoof', addRoof)
-
     if (addRoof.raft) {
       setSelectedRaftBase({
         ...selectedRaftBase,
@@ -155,6 +153,7 @@ export function useModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab
   useEffect(() => {
     //lengbase는 무조건 있다고 가정 하고 최초에 실행 방지
     if (selectedModules) {
+      //여기서부터 시작
       //가대메이커 파라메터 만들기
       setTrestleParams({
         moduleTpCd: selectedModules.itemTp,
@@ -174,6 +173,7 @@ export function useModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab
 
   //가대메이커 변경 함수
   const handleChangeTrestle = (option) => {
+    option.raftBaseCd = selectedRaftBase.raftBaseCd
     setSelectedTrestle(option) //선택값  저장
     setConstructionParams({ ...trestleParams, trestleMkrCd: option.trestleMkrCd, constMthdCd: '', roofBaseCd: '' })
   }
@@ -266,32 +266,30 @@ export function useModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab
   //공법 선택시 이후 프로세스
   useEffect(() => {
     if (isObjectNotEmpty(selectedRoofBase) && isObjectNotEmpty(selectedConstruction)) {
-      if (tabIndex === roofTab) {
+      const common = { ...moduleSelectionInitParams }
-        const common = { ...moduleSelectionInitParams }
+      const module = { ...selectedModules }
-        const module = { ...selectedModules }
+      const newRoofConstructions = {
-        const newRoofConstructions = {
+        roofIndex: tabIndex,
-          roofIndex: tabIndex,
+        addRoof: addRoof,
-          addRoof: addRoof,
+        trestle: selectedRoofBase,
-          trestle: selectedRoofBase,
+        construction: selectedConstruction,
-          construction: selectedConstruction,
+      }
-        }
 
-        const index = tempModuleSelectionData.roofConstructions.findIndex((obj) => obj.roofIndex === tabIndex)
+      const index = tempModuleSelectionData.roofConstructions.findIndex((obj) => obj.roofIndex === tabIndex)
 
-        if (index > -1) {
+      if (index > -1) {
-          const newArray = [
+        const newArray = [
-            ...tempModuleSelectionData.roofConstructions.slice(0, index),
+          ...tempModuleSelectionData.roofConstructions.slice(0, index),
-            newRoofConstructions,
+          newRoofConstructions,
-            ...tempModuleSelectionData.roofConstructions.slice(index + 1),
+          ...tempModuleSelectionData.roofConstructions.slice(index + 1),
-          ]
+        ]
-          setTempModuleSelectionData({ common: common, module: module, roofConstructions: newArray })
+        setTempModuleSelectionData({ common: common, module: module, roofConstructions: newArray })
-        } else {
+      } else {
-          setTempModuleSelectionData({
+        setTempModuleSelectionData({
-            common: common,
+          common: common,
-            module: module,
+          module: module,
-            roofConstructions: [...tempModuleSelectionData.roofConstructions, { ...newRoofConstructions }],
+          roofConstructions: [...tempModuleSelectionData.roofConstructions, { ...newRoofConstructions }],
-          })
+        })
-        }
       }
     }
   }, [selectedConstruction])
@@ -299,8 +297,6 @@ export function useModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab
   //거대메이커, 공법, 지붕밑바탕 api 조회
   const getModuleOptionsListData = async (params, type) => {
     const optionsList = await getTrestleList(params)
-    console.log('optionsList', optionsList)
-
     if (optionsList.data.length > 0) {
       if (type === 'trestle') {
         //가대 메이커일때
@@ -340,6 +336,10 @@ export function useModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab
         resetSelected()
       }
     }
+
+    if (moduleSelectionInitParams.moduleItemId && moduleSelectionInitParams.moduleTpCd) {
+      moduleSelectionInitOriginData.current = moduleSelectionInitParams
+    }
   }, [moduleSelectionInitParams])
 
   const handleHajebichiAndLength = (e, type) => {

src/hooks/module/useTrestle.js

@@ -80,7 +80,6 @@ export const useTrestle = () => {
         const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
 
         modules.forEach((module) => {
-          module.fire('polygonMoved')
           const { x, y } = module.getCenterPoint()
           const isExposedBottom = result.exposedBottomPoints.some((point) => Math.abs(point.x - x) < 2 && Math.abs(point.y - y) < 2)
           const isLeftExposedHalfBottom = result.leftExposedHalfBottomPoints.some((point) => Math.abs(point.x - x) < 2 && Math.abs(point.y - y) < 2)
@@ -130,7 +129,7 @@ export const useTrestle = () => {
           // 처마력바설치 true인 경우 설치
           exposedBottomModules.forEach((module) => {
             //TODO : 방향별로 처마력바 설치해야함
-            const bottomPoints = findTopTwoPoints([...module.points], direction)
+            const bottomPoints = findTopTwoPoints([...module.getCurrentPoints()], direction)
             if (!bottomPoints) return
             const eaveBar = new fabric.Line([bottomPoints[0].x, bottomPoints[0].y, bottomPoints[1].x, bottomPoints[1].y], {
               parent: surface,
@@ -148,7 +147,7 @@ export const useTrestle = () => {
 
           if (isChidory && cvrPlvrYn === 'Y') {
             leftExposedHalfBottomModules.forEach((module) => {
-              const bottomPoints = findTopTwoPoints([...module.points], direction)
+              const bottomPoints = findTopTwoPoints([...module.getCurrentPoints()], direction)
               let barPoints = []
               //설치해야할 반처마커버 포인트를 방향에 따라 설정
 

src/hooks/object/useObjectBatch.js

@@ -26,7 +26,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
 
   useEffect(() => {
     if (canvas) {
-      dbClickEvent()
+      // dbClickEvent()
     }
 
     return () => {

src/hooks/surface/useSurfaceShapeBatch.js

@@ -85,6 +85,10 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
         canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH_TEMP))
         points = getSurfaceShape(surfaceId, pointer, { length1, length2, length3, length4, length5 })
 
+        console.log('surfaceRefs.xInversion', surfaceRefs.xInversion)
+        console.log('surfaceRefs.yInversion', surfaceRefs.yInversion)
+        console.log('surfaceRefs.rotate', surfaceRefs.rotate)
+
         const options = {
           fill: 'transparent',
           stroke: 'black',
@@ -100,7 +104,7 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
           name: MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH_TEMP,
           flipX: surfaceRefs.yInversion,
           flipY: surfaceRefs.xInversion,
-          angle: surfaceRefs.rotate,
+          angle: Math.abs(surfaceRefs.rotate),
           originX: 'center',
           originY: 'center',
           pitch: globalPitch,

src/hooks/useCirCuitTrestle.js

@@ -1,10 +1,19 @@
 import { GlobalDataContext } from '@/app/GlobalDataProvider'
 import { POLYGON_TYPE } from '@/common/common'
 import { canvasState } from '@/store/canvasAtom'
-import { makersState, modelsState, pcsCheckState, selectedMakerState, selectedModelsState, seriesState } from '@/store/circuitTrestleAtom'
+import {
+  makersState,
+  modelsState,
+  moduleStatisticsState,
+  pcsCheckState,
+  selectedMakerState,
+  selectedModelsState,
+  seriesState,
+} from '@/store/circuitTrestleAtom'
 import { selectedModuleState } from '@/store/selectedModuleOptions'
 import { useContext } from 'react'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { useMessage } from './useMessage'
 
 export function useCircuitTrestle() {
   const [makers, setMakers] = useRecoilState(makersState)
@@ -16,6 +25,9 @@ export function useCircuitTrestle() {
   const selectedModules = useRecoilValue(selectedModuleState)
   const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
   const canvas = useRecoilValue(canvasState)
+
+  const setModuleStatistics = useSetRecoilState(moduleStatisticsState)
+  const { getMessage } = useMessage()
   const getOptYn = () => {
     return {
       maxConnYn: pcsCheck.max ? 'Y' : 'N',
@@ -47,6 +59,7 @@ export function useCircuitTrestle() {
 
   // 사용된 모듈아이템 목록
   const getUseModuleItemList = () => {
+    console.log('🚀 ~ getUseModuleItemList ~ selectedModules:', selectedModules)
     return selectedModules?.itemList?.map((m) => {
       return {
         itemId: m.itemId,
@@ -163,6 +176,96 @@ export function useCircuitTrestle() {
 
   const setPowerConditionerData = () => {}
 
+  const setModuleStatisticsData = () => {
+    console.log(canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE))
+    if (selectedModules?.length === 0) return
+    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)
+
+    surfaces.forEach((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: parseFloat(surfaceObjects[key].wpOut / 1000),
+      }
+      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: parseFloat(surfaceObjects[key].circuits[circuit].circuits.wpOut / 1000),
+        }
+        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)
+    })
+    canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
+    setModuleStatistics({ header: tempHeader, rows: tempRows.filter((row) => row.wpOut !== 0), footer: tempFooter })
+  }
+
   return {
     makers,
     setMakers,
@@ -183,5 +286,6 @@ export function useCircuitTrestle() {
     getRoofSurfaceList,
     getModuleList,
     removeNotAllocationModules,
+    setModuleStatisticsData,
   }
 }

src/locales/ja.json

@@ -417,6 +417,7 @@
   "modal.module.circuit.number.edit": "モジュール一括回路番号の変更",
   "modal.module.circuit.number.edit.info": "回路番号を入力してください。",
   "modal.module.circuit.number": "回路番号",
+  "modal.module.can.not.edit": "회로 구성을 완료한 모듈은 변경할 수 없습니다.(JA)",
   "modal.line.property.change": "変更する属性を選択してください。",
   "modal.line.property.change.unselect": "変更するラインを選択してください。",
   "modal.line.property.change.confirm": "プロパティを変更しますか？",

src/locales/ko.json

@@ -417,6 +417,7 @@
   "modal.module.circuit.number.edit": "모듈 일괄 회로 번호 변경",
   "modal.module.circuit.number.edit.info": "회로 번호를 입력해주세요.",
   "modal.module.circuit.number": "회로 번호",
+  "modal.module.can.not.edit": "회로 구성을 완료한 모듈은 변경할 수 없습니다.",
   "modal.line.property.change": "변경할 속성을 선택해 주세요.",
   "modal.line.property.change.unselect": "변경할 라인을 선택해 주세요.",
   "modal.line.property.change.confirm": "속성을 변경하시겠습니까?",
@@ -858,6 +859,7 @@
   "surface.shape.validate.size.1to2": "①길이는 ②보다 큰 값을 넣어주세요.",
   "surface.shape.validate.size.1to3": "①길이는 ③보다 큰 값을 넣어주세요.",
   "surface.shape.validate.size.1to23": "①길이는 ②+③보다 큰 값을 넣어주세요.",
+  "surface.shape.validate.size.1to23low": "②+③길이는 ①보다 큰 값을 넣어주세요.",
   "surface.shape.validate.size.2to3": "②길이는 ③보다 큰 값을 넣어주세요.",
   "surface.shape.validate.size.3to2": "③길이는 ②보다 큰 값을 넣어주세요.",
   "surface.shape.validate.size.3to4": "③길이는 ④보다 큰 값을 넣어주세요.",