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

src/components/common/pagination/QPagination.jsx

@@ -42,7 +42,7 @@ export default function QPagination(props) {
         ></button>
       </li>
       <li className="page-item last">
-        <button type="button" disabled={currentPage === totalPages} onClick={() => handlePage(totalPages)}></button>
+        <button type="button" disabled={totalPages === 0 ? true : currentPage === totalPages} onClick={() => handlePage(totalPages)}></button>
       </li>
     </ol>
   )

src/components/fabric/QPolygon.js

@@ -77,8 +77,8 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
 
     this.initOptions = options
 
-    this.init()
     this.initLines()
+    this.init()
     this.setShape()
   },
 
@@ -290,6 +290,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     let points = this.getCurrentPoints()
 
     this.texts = []
+
     points.forEach((start, i) => {
       const end = points[(i + 1) % points.length]
       const dx = Big(end.x).minus(Big(start.x))
@@ -321,6 +322,8 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
         lockScalingX: true,
         lockScalingY: true,
         idx: i,
+        actualSize: this.lines[i].attributes?.actualSize,
+        planeSize: this.lines[i].attributes?.planeSize,
         name: 'lengthText',
         parent: this,
       })

src/components/floor-plan/CanvasFrame.jsx

@@ -28,6 +28,7 @@ import {
 import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
 import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
+import { useEvent } from '@/hooks/useEvent'
 
 export default function CanvasFrame() {
   const canvasRef = useRef(null)
@@ -49,6 +50,7 @@ export default function CanvasFrame() {
   const { handleModuleSelectionTotal } = useCanvasPopupStatusController()
   const { fetchBasicSettings } = useCanvasSetting()
   const { setSelectedMenu } = useCanvasMenu()
+  const { initEvent } = useEvent()
 
   const loadCanvas = () => {
     if (!canvas) return
@@ -64,6 +66,7 @@ export default function CanvasFrame() {
           if (canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE).length > 0) {
             setSelectedMenu('module')
           }
+          initEvent()
         })
       }
     }

src/components/floor-plan/FloorPlan.jsx

@@ -18,7 +18,7 @@ export default function FloorPlan({ children }) {
 
   const { closeAll } = usePopup()
   const { selectedMenu, setSelectedMenu } = useCanvasMenu()
-  const { fetchSettings } = useCanvasSetting()
+  const { fetchSettings } = useCanvasSetting(false)
   const resetCurrentMenu = useResetRecoilState(currentMenuState)
   useEffect(() => {
     return () => {

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

@@ -54,7 +54,7 @@ export default function CircuitTrestleSetting({ id }) {
   const [seletedOption, setSeletedOption] = useState(null)
   const { setModuleStatisticsData } = useCircuitTrestle()
   const { handleCanvasToPng } = useImgLoader()
-  const { saveCanvas } = usePlan()
+
   const passivityCircuitAllocationRef = useRef()
   const { setIsGlobalLoading } = useContext(QcastContext)
 
@@ -361,11 +361,8 @@ export default function CircuitTrestleSetting({ id }) {
 
     if (result) {
       handleCanvasToPng(2)
-      // 캔버스 저장
-      await saveCanvas(false)
       // 견적서 저장
       await saveEstimate(result)
-      setAllModuleSurfaceIsComplete(true)
     } else {
       setIsGlobalLoading(false)
     }
@@ -506,19 +503,25 @@ export default function CircuitTrestleSetting({ id }) {
   // 닫기 버튼 클릭 시 처리하는 함수 추가
   const handleClose = () => {
     // // 회로 번호 텍스트 제거
-    // const circuitTexts = canvas.getObjects().filter((obj) => obj.name === 'circuitNumber')
+    if (
-    // canvas.remove(...circuitTexts)
+      canvas
-    // // 모듈의 회로 정보 초기화
+        .getObjects()
-    // canvas
+        .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
-    //   .getObjects()
+        .some((surface) => !surface.isComplete)
-    //   .filter((obj) => obj.name === POLYGON_TYPE.MODULE)
+    ) {
-    //   .forEach((obj) => {
+      canvas.remove(...canvas.getObjects().filter((obj) => obj.name === 'circuitNumber'))
-    //     obj.circuit = null
+      canvas
-    //     obj.pcsItemId = null
+        .getObjects()
-    //     obj.circuitNumber = null
+        .filter((obj) => obj.name === POLYGON_TYPE.MODULE)
-    //   })
+        .forEach((obj) => {
+          obj.circuit = null
+          obj.pcsItemId = null
+          obj.circuitNumber = null
+        })
+
+      canvas.renderAll()
+    }
 
-    // canvas.renderAll()
     closePopup(id)
   }
 

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

@@ -97,7 +97,11 @@ export default function PanelEdit(props) {
       <div className={`modal-pop-wrap xm mount`}>
         <div className="modal-head modal-handle">
           <h1 className="title">
-            {getMessage([PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type) ? 'modal.move.setting' : 'modal.copy.setting')}{' '}
+            {getMessage(
+              [PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.MOVE_ALL, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type)
+                ? 'modal.move.setting'
+                : 'modal.copy.setting',
+            )}{' '}
           </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -107,7 +111,11 @@ export default function PanelEdit(props) {
           <div className="left-bar modal-handle"></div>
           <div className="right-bar modal-handle"></div>
           <div className="grid-option-tit">
-            {getMessage([PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type) ? 'modal.move.setting.info' : 'modal.copy.setting.info')}
+            {getMessage(
+              [PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.MOVE_ALL, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type)
+                ? 'modal.move.setting.info'
+                : 'modal.copy.setting.info',
+            )}
           </div>
           <div className="grid-option-wrap">
             <div className="grid-option-box">

src/components/floor-plan/modal/module/column/ColumnRemove.jsx

@@ -21,7 +21,6 @@ export default function ColumnRemove(props) {
     { name: getMessage('modal.panel.column.remove.type.none'), value: MODULE_REMOVE_TYPE.NONE },
   ]
   const handleApply = () => {
-    // if (apply) apply()
     moduleColumnRemove(selectedType)
     closePopup(id)
   }

src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx

@@ -9,7 +9,7 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
 
 import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { addedRoofsState, roofMaterialsAtom } from '@/store/settingAtom'
+import { addedRoofsState, roofDisplaySelector, roofMaterialsAtom } from '@/store/settingAtom'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { globalLocaleStore } from '@/store/localeAtom'
@@ -18,6 +18,7 @@ import { onlyNumberInputChange } from '@/util/input-utils'
 import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util'
 import { usePolygon } from '@/hooks/usePolygon'
 import { canvasState } from '@/store/canvasAtom'
+import { useRoofFn } from '@/hooks/common/useRoofFn'
 
 /**
  * 지붕 레이아웃
@@ -41,7 +42,9 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
   const [currentRoof, setCurrentRoof] = useState(null) /** 현재 선택된 지붕재 정보 */
   const { closePopup } = usePopup() /** usePopup에서 closePopup 함수 가져오기 */
   const { drawDirectionArrow } = usePolygon()
+  const { setSurfaceShapePattern } = useRoofFn()
   const canvas = useRecoilValue(canvasState)
+  const roofDisplay = useRecoilValue(roofDisplaySelector)
 
   const roofRef = {
     roofCd: useRef(null),
@@ -243,6 +246,8 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
     const roofs = canvas.getObjects().filter((obj) => obj.roofMaterial?.index === 0)
 
     roofs.forEach((roof) => {
+      /** 모양 패턴 설정 */
+      setSurfaceShapePattern(roof, roofDisplay.column, false, { ...roofInfo })
       roof.roofMaterial = { ...roofInfo }
       drawDirectionArrow(roof)
     })

src/components/management/StuffDetail.jsx

@@ -528,12 +528,12 @@ export default function StuffDetail() {
         }
         get({ url: url }).then((res) => {
           if (!isEmptyArray(res)) {
+            //즐겨찾기 구분 추가
+            res.map((row) => {
+              row.value = row.saleStoreId
+              row.label = row.saleStoreName
+            })
             if (session?.storeId === 'T01') {
-              //즐겨찾기 구분 추가
-              res.map((row) => {
-                row.value = row.saleStoreId
-                row.label = row.saleStoreName
-              })
               firstList = res.filter((row) => row.saleStoreLevel === '1')
               firstList.sort((a, b) => (a.saleStoreId !== 'T01') - (b.saleStoreId !== 'T01') || a.saleStoreId - b.saleStoreId)
               favList = firstList.filter((row) => row.saleStoreId === 'T01' || row.priority !== 'B')
@@ -553,7 +553,6 @@ export default function StuffDetail() {
 
               let data = managementState?.firstAgentId ? managementState.firstAgentId : managementState.saleStoreId
               url = `/api/object/saleStore/${data}/list?firstFlg=0&userId=${session?.userId}`
-
               get({ url: url }).then((res) => {
                 if (!isEmptyArray(res)) {
                   res.map((row) => {

src/components/management/StuffSubHeader.jsx

@@ -23,7 +23,7 @@ export default function StuffSubHeader({ type }) {
 
   const setFloorPlanObjectNo = useSetRecoilState(floorPlanObjectState)
 
-  const { managementState, setManagementState } = useContext(GlobalDataContext)
+  const { managementState } = useContext(GlobalDataContext)
 
   const [buttonStyle, setButtonStyle] = useState('')
 
@@ -31,11 +31,11 @@ export default function StuffSubHeader({ type }) {
 
   useEffect(() => {
     window.scrollTo(0, 0)
-    setManagementState({})
   }, [])
 
   useEffect(() => {
     if (type === 'detail') {
+      setButtonStyle('')
       if (isObjectNotEmpty(managementState)) {
         if (managementState?.createSaleStoreId === 'T01') {
           if (session?.storeId !== 'T01') {

src/hooks/module/useModule.js

@@ -1,4 +1,4 @@
-import { BATCH_TYPE, POLYGON_TYPE } from '@/common/common'
+import { BATCH_TYPE, POLYGON_TYPE, TRESTLE_MATERIAL } from '@/common/common'
 import { canvasState } from '@/store/canvasAtom'
 import { isOverlap, polygonToTurfPolygon, rectToPolygon } from '@/util/canvas-util'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
@@ -10,6 +10,7 @@ import { useMessage } from '../useMessage'
 import { selectedModuleState } from '@/store/selectedModuleOptions'
 import { moduleStatisticsState } from '@/store/circuitTrestleAtom'
 import { useCircuitTrestle } from '../useCirCuitTrestle'
+import { useTrestle } from './useTrestle'
 
 export const MODULE_REMOVE_TYPE = {
   LEFT: 'left',
@@ -39,7 +40,8 @@ export function useModule() {
   const { getMessage } = useMessage()
   const { checkModuleDisjointObjects } = useModuleBasicSetting()
   const selectedModules = useRecoilValue(selectedModuleState)
-  const { setModuleStatisticsData } = useCircuitTrestle()
+  const { setModuleStatisticsData, resetCircuits } = useCircuitTrestle()
+  const { clear: removeTrestleMaterials } = useTrestle()
 
   const moduleMove = (length, direction) => {
     const selectedObj = canvas.getActiveObjects() //선택된 객체들을 가져옴
@@ -56,9 +58,7 @@ export function useModule() {
 
     const isSetupModules = getOtherModules(selectedObj)
     const selectedModules = canvas.getObjects().filter((obj) => selectedIds.includes(obj.id) && obj.name === 'module') //선택했던 객체들만 가져옴
-    const setupSurface = canvas
+    const setupSurface = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === selectedModules[0].surfaceId)
-      .getObjects()
-      .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === selectedModules[0].surfaceId)[0]
     let isWarning = false
     const objects = getObjects()
 
@@ -107,7 +107,7 @@ export function useModule() {
       canvas.discardActiveObject()
       return
     }
-    const activeModule = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
+    const activeModule = canvas.getObjects().find((obj) => canvas.getActiveObjects()[0].id === obj.id)
     if (activeModule.circuit) {
       swalFire({
         title: getMessage('can.not.move.module'),
@@ -119,9 +119,7 @@ export function useModule() {
     const modules = type === 'row' ? getRowModules(activeModule) : getColumnModules(activeModule)
     const otherModules = getOtherModules(modules)
     const objects = getObjects()
-    const moduleSetupSurface = canvas
+    const moduleSetupSurface = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)
-      .getObjects()
-      .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)[0]
     let isWarning = false
 
     modules.forEach((module) => {
@@ -226,7 +224,7 @@ export function useModule() {
       }
 
       modules.forEach((module) => {
-        const { top, left } = getPosotion(module, direction, Number(length) + Number(moduleLength), false)
+        const { top, left } = getPosotion(module, direction, Number(length) + Number(moduleLength), true)
         module.clone((obj) => {
           obj.set({
             parentId: module.parentId,
@@ -275,9 +273,7 @@ export function useModule() {
     const modules = canvas.getObjects().filter((obj) => activeModuleIds.includes(obj.id))
     const objects = getObjects()
     const otherModules = canvas.getObjects().filter((obj) => obj.surfaceId === modules[0].surfaceId && obj.name === POLYGON_TYPE.MODULE)
-    const moduleSetupSurface = canvas
+    const moduleSetupSurface = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === modules[0].surfaceId)
-      .getObjects()
-      .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === modules[0].surfaceId)[0]
     let isWarning = false
     let copyModules = []
     let copyModule = null
@@ -344,15 +340,21 @@ export function useModule() {
       canvas.discardActiveObject()
       return
     }
-    const activeModule = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
+    const activeModule = canvas.getObjects().find((obj) => canvas.getActiveObjects()[0].id === obj.id)
+    if (activeModule.circuit) {
+      swalFire({
+        title: getMessage('can.not.copy.module'),
+        icon: 'error',
+        type: 'alert',
+      })
+      return
+    }
     const modules = type === 'row' ? getRowModules(activeModule) : getColumnModules(activeModule)
     const otherModules = canvas.getObjects().filter((obj) => obj.surfaceId === modules[0].surfaceId && obj.name === POLYGON_TYPE.MODULE)
     const objects = getObjects()
     const copyModules = []
     let copyModule = null
-    const moduleSetupSurface = canvas
+    const moduleSetupSurface = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === modules[0].surfaceId)
-      .getObjects()
-      .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === modules[0].surfaceId)[0]
     let isWarning = false
     let moduleLength = 0
     if (['up', 'down'].includes(direction)) {
@@ -415,15 +417,7 @@ export function useModule() {
     if (isFixedModule()) {
       return
     }
-    const activeModule = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
+    const activeModule = canvas.getObjects().find((obj) => canvas.getActiveObjects()[0].id === obj.id)
-    if (activeModule.circuit) {
-      swalFire({
-        title: getMessage('can.not.move.module'),
-        icon: 'error',
-        type: 'alert',
-      })
-      return
-    }
     const columnModules = getColumnModules(activeModule)
     const otherModules = getOtherModules(columnModules)
     const objects = getObjects()
@@ -431,10 +425,11 @@ export function useModule() {
     const rightModules = otherModules.filter((module) => activeModule.left < module.left).sort((a, b) => a.left - b.left)
     const leftModules = otherModules.filter((module) => activeModule.left > module.left).sort((a, b) => b.left - a.left)
     let width = -1
-    const moduleSetupSurface = canvas
+    const moduleSetupSurface = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)
-      .getObjects()
-      .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)[0]
     let isWarning = false
+    if (moduleSetupSurface.isComplete) {
+      resetSurface()
+    }
     canvas.discardActiveObject()
     moduleSetupSurface.set({ modules: otherModules })
     canvas.remove(...columnModules)
@@ -538,10 +533,10 @@ export function useModule() {
   }
 
   const moduleRowRemove = (type) => {
-    if (isFixedModule()) {
+    // if (isFixedModule()) {
-      return
+    //   return
-    }
+    // }
-    const activeModule = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
+    const activeModule = canvas.getObjects().find((obj) => canvas.getActiveObjects()[0].id === obj.id)
     const rowModules = getRowModules(activeModule)
     const otherModules = getOtherModules(rowModules)
     const objects = getObjects()
@@ -549,11 +544,11 @@ export function useModule() {
     const topModules = otherModules.filter((module) => activeModule.top > module.top).sort((a, b) => b.top - a.top)
     const bottomModules = otherModules.filter((module) => activeModule.top < module.top).sort((a, b) => a.top - b.top)
     let height = -1
-    const moduleSetupSurface = canvas
+    const moduleSetupSurface = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)
-      .getObjects()
-      .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)[0]
     let isWarning = false
-
+    if (moduleSetupSurface.isComplete) {
+      resetSurface()
+    }
     canvas.discardActiveObject()
     moduleSetupSurface.set({ modules: otherModules })
     canvas.remove(...rowModules)
@@ -660,7 +655,7 @@ export function useModule() {
     if (isFixedModule()) {
       return
     }
-    const activeModule = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
+    const activeModule = canvas.getObjects().find((obj) => canvas.getActiveObjects()[0].id === obj.id)
     const columnModules = getColumnModules(activeModule)
     let otherModules = getOtherModules(columnModules)
     const targetModules =
@@ -669,14 +664,13 @@ export function useModule() {
         : otherModules.filter((module) => module.left > activeModule.left).sort((a, b) => a.left - b.left)
     const objects = getObjects()
     const copyModules = []
-    const moduleSetupSurface = canvas
+    const moduleSetupSurface = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)
-      .getObjects()
+    if (moduleSetupSurface.isComplete) {
-      .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)[0]
+      resetSurface()
-    if (moduleSetupSurface.modules.filter((module) => module.circuit).length > 0) {
-      return
     }
     let width = -1
     let isWarning = false
+    const { moduleIntvlHor, moduleIntvlVer } = moduleSetupSurface.trestleDetail
     if (targetModules.length === 0) {
       swalFire({
         title: '마지막 모듈입니다.',
@@ -706,7 +700,7 @@ export function useModule() {
     canvas.renderAll()
     otherModules = getOtherModules(columnModules)
     columnModules.forEach((module) => {
-      const { top, left } = getPosotion(module, type, module.width, true)
+      const { top, left } = getPosotion(module, type, module.width + moduleIntvlHor, true)
       let copyModule = null
       module.clone((obj) => {
         obj.set({
@@ -778,7 +772,7 @@ export function useModule() {
     if (isFixedModule()) {
       return
     }
-    const activeModule = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
+    const activeModule = canvas.getObjects().find((obj) => canvas.getActiveObjects()[0].id === obj.id)
     const rowModules = getRowModules(activeModule)
     let otherModules = getOtherModules(rowModules)
     const targetModules =
@@ -795,19 +789,19 @@ export function useModule() {
     }
     const objects = getObjects()
     const copyModules = []
-    const moduleSetupSurface = canvas
+    const moduleSetupSurface = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)
-      .getObjects()
-      .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)[0]
-    if (moduleSetupSurface.modules.filter((module) => module.circuit).length > 0) {
-      return
-    }
     let height = -1
     let isWarning = false
+    const { moduleIntvlHor, moduleIntvlVer } = moduleSetupSurface.trestleDetail
+
+    if (surface.isComplete) {
+      resetSurface()
+    }
     canvas.discardActiveObject()
     targetModules.forEach((module) => {
       if (height === -1)
         height = type === MODULE_INSERT_TYPE.TOP ? Number(activeModule.top) - Number(module.top) : Number(module.top) - Number(activeModule.top)
-      const { top, left } = getPosotion(module, type, activeModule.height, true)
+      const { top, left } = getPosotion(module, type, activeModule.height + moduleIntvlVer, true)
       module.originPos = {
         left: module.left,
         top: module.top,
@@ -823,7 +817,7 @@ export function useModule() {
     canvas.renderAll()
     otherModules = getOtherModules(rowModules)
     rowModules.forEach((module) => {
-      const { top, left } = getPosotion(module, type, activeModule.height, true)
+      const { top, left } = getPosotion(module, type, activeModule.height + moduleIntvlVer, true)
       let copyModule = null
       module.clone((obj) => {
         obj.set({
@@ -938,19 +932,15 @@ export function useModule() {
   }
 
   const modulesRemove = () => {
-    const activeModule = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
+    const activeModule = canvas.getObjects().find((obj) => canvas.getActiveObjects()[0].id === obj.id)
-    if (activeModule.circuit) {
-      swalFire({
-        title: getMessage('can.not.move.module'),
-        icon: 'error',
-        type: 'alert',
-      })
-      return
-    }
     const modules = canvas
       .getObjects()
       .filter((obj) => obj.surfaceId === activeModule.surfaceId && obj.name === POLYGON_TYPE.MODULE && activeModule.id !== obj.id)
-    const surface = canvas.getObjects().filter((obj) => obj.id === activeModule.surfaceId && obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)[0]
+    const surface = canvas.getObjects().find((obj) => obj.id === activeModule.surfaceId && obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
+    if (surface.isComplete) {
+      resetSurface()
+    }
+
     surface.set({ modules: modules })
     canvas.remove(activeModule)
     canvas.renderAll()
@@ -1040,6 +1030,11 @@ export function useModule() {
       .filter((obj) => [BATCH_TYPE.OPENING, BATCH_TYPE.TRIANGLE_DORMER, BATCH_TYPE.PENTAGON_DORMER, BATCH_TYPE.SHADOW].includes(obj.name))
   }
 
+  const resetSurface = () => {
+    resetCircuits()
+    removeTrestleMaterials()
+  }
+
   return {
     moduleMove,
     moduleMultiMove,

src/hooks/module/useModuleBasicSetting.js

@@ -943,13 +943,13 @@ export function useModuleBasicSetting(tabNum) {
         const moduleArray = []
 
         let calcAreaWidth = Math.abs(flowLines.right.x1 - flowLines.left.x1) //오른쪽 x에서 왼쪽 x를 뺀 가운데를 찾는 로직
-        let calcModuleWidthCount = calcAreaWidth / (width + intvHor) //뺀 공간에서 모듈을 몇개를 넣을수 있는지 확인하는 로직
+        let calcModuleWidthCount = calcAreaWidth / (width + intvHor + 1) //뺀 공간에서 모듈을 몇개를 넣을수 있는지 확인하는 로직
 
         let calcMaxModuleWidthCount = calcModuleWidthCount > moduleMaxCols ? moduleMaxCols : calcModuleWidthCount //최대 모듈 단수가 있기 때문에 최대 단수보다 카운트가 크면 최대 단수로 씀씀
         let totalModuleWidthCount = Math.floor(calcMaxModuleWidthCount) //치조배치일경우는 한개 더 넣는다
 
         let calcAreaHeight = flowLines.bottom.y1 - flowLines.top.y1
-        let calcModuleHeightCount = calcAreaHeight / (height + intvVer)
+        let calcModuleHeightCount = calcAreaHeight / (height + intvVer + 1)
 
         let calcStartPoint = flowLines.right.type === 'flat' ? (calcAreaWidth - totalModuleWidthCount * width) / 2 : 0 //반씩 나눠서 중앙에 맞춤 bottom 기준으로 양변이 직선일때만 가운데 정렬
         let startPointX = flowLines.left.x1 + calcStartPoint //시작점을 만든다
@@ -1085,13 +1085,13 @@ export function useModuleBasicSetting(tabNum) {
         const moduleArray = []
 
         let calcAreaWidth = flowLines.right.x1 - flowLines.left.x1 //오른쪽 x에서 왼쪽 x를 뺀 가운데를 찾는 로직
-        let calcModuleWidthCount = calcAreaWidth / (width + intvHor) //뺀 공간에서 모듈을 몇개를 넣을수 있는지 확인하는 로직
+        let calcModuleWidthCount = calcAreaWidth / (width + intvHor + 1) //뺀 공간에서 모듈을 몇개를 넣을수 있는지 확인하는 로직
         let calcMaxModuleWidthCount = calcModuleWidthCount > moduleMaxCols ? moduleMaxCols : calcModuleWidthCount //최대 모듈 단수가 있기 때문에 최대 단수보다 카운트가 크면 최대 단수로 씀씀
         // let totalModuleWidthCount = isChidori ? Math.abs(calcMaxModuleWidthCount) : Math.floor(calcMaxModuleWidthCount) //치조배치일경우는 한개 더 넣는다 //??어쩔때는 붙고 어쩔때는 안붙고 멋대로???
         let totalModuleWidthCount = Math.floor(calcMaxModuleWidthCount) //치조배치일경우는 한개 더 넣는다
 
         let calcAreaHeight = flowLines.bottom.y1 - flowLines.top.y1
-        let calcModuleHeightCount = calcAreaHeight / (height + intvVer)
+        let calcModuleHeightCount = calcAreaHeight / (height + intvVer + 1)
 
         let calcStartPoint = flowLines.left.type === 'flat' ? (calcAreaWidth - totalModuleWidthCount * width) / 2 : 0 //반씩 나눠서 중앙에 맞춤 bottom 기준으로 양변이 직선일때만 가운데 정렬
         let startPointX = flowLines.right.x1 - calcStartPoint //시작점을 만든다
@@ -1222,13 +1222,13 @@ export function useModuleBasicSetting(tabNum) {
         const moduleArray = []
 
         let calcAreaWidth = flowLines.bottom.y1 - flowLines.top.y1 //아래에서 y에서 위를 y를 뺀 가운데를 찾는 로직
-        let calcModuleWidthCount = calcAreaWidth / (height + intvHor) //뺀 공간에서 모듈을 몇개를 넣을수 있는지 확인하는 로직
+        let calcModuleWidthCount = calcAreaWidth / (height + intvHor + 1) //뺀 공간에서 모듈을 몇개를 넣을수 있는지 확인하는 로직
         let calcMaxModuleWidthCount = calcModuleWidthCount > moduleMaxCols ? moduleMaxCols : calcModuleWidthCount //최대 모듈 단수가 있기 때문에 최대 단수보다 카운트가 크면 최대 단수로 씀씀
         // let totalModuleWidthCount = isChidori ? Math.abs(calcMaxModuleWidthCount) : Math.floor(calcMaxModuleWidthCount) //치조배치일경우는 한개 더 넣는다
         let totalModuleWidthCount = Math.floor(calcMaxModuleWidthCount) //치조배치일경우는 한개 더 넣는다
 
         let calcAreaHeight = flowLines.right.x1 - flowLines.left.x1
-        let calcModuleHeightCount = calcAreaHeight / (width + intvVer)
+        let calcModuleHeightCount = calcAreaHeight / (width + intvVer + 1)
 
         let calcStartPoint = flowLines.bottom.type === 'flat' ? (calcAreaWidth - totalModuleWidthCount * height) / 2 : 0 //반씩 나눠서 중앙에 맞춤 left 높이 기준으로 양변이 직선일때만 가운데 정렬
         let startPointX = flowLines.top.y1 + calcStartPoint //시작점을 만든다
@@ -1358,13 +1358,13 @@ export function useModuleBasicSetting(tabNum) {
         const moduleArray = []
 
         let calcAreaWidth = flowLines.bottom.y1 - flowLines.top.y1 //아래에서 y에서 위를 y를 뺀 가운데를 찾는 로직
-        let calcModuleWidthCount = calcAreaWidth / (height + intvHor) //뺀 공간에서 모듈을 몇개를 넣을수 있는지 확인하는 로직
+        let calcModuleWidthCount = calcAreaWidth / (height + intvHor + 1) //뺀 공간에서 모듈을 몇개를 넣을수 있는지 확인하는 로직
         let calcMaxModuleWidthCount = calcModuleWidthCount > moduleMaxCols ? moduleMaxCols : calcModuleWidthCount //최대 모듈 단수가 있기 때문에 최대 단수보다 카운트가 크면 최대 단수로 씀씀
         // let totalModuleWidthCount = isChidori ? Math.abs(calcMaxModuleWidthCount) : Math.floor(calcMaxModuleWidthCount) //치조배치일경우는 한개 더 넣는다
         let totalModuleWidthCount = Math.floor(calcMaxModuleWidthCount) //치조배치일경우는 한개 더 넣는다
 
         let calcAreaHeight = flowLines.right.x1 - flowLines.left.x1
-        let calcModuleHeightCount = calcAreaHeight / (width + intvVer)
+        let calcModuleHeightCount = calcAreaHeight / (width + intvVer + 1)
 
         let calcStartPoint = flowLines.top.type === 'flat' ? (calcAreaWidth - totalModuleWidthCount * height) / 2 : 0 //반씩 나눠서 중앙에 맞춤 left 높이 기준으로 양변이 직선일때만 가운데 정렬
         let startPointX = flowLines.bottom.y2 - calcStartPoint //시작점을 만든다

src/hooks/module/useTrestle.js

@@ -25,6 +25,7 @@ export const useTrestle = () => {
   const { setIsGlobalLoading } = useContext(QcastContext)
 
   const { getSelectedPcsItemList } = useCircuitTrestle()
+  const { resetCircuits } = useCircuitTrestle()
 
   const apply = () => {
     const notAllocationModules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE && !obj.circuit)
@@ -2777,6 +2778,7 @@ export const useTrestle = () => {
         canvas.remove(obj)
       }
     })
+    resetCircuits()
   }
 
   // 전모듈 의 회로번호 visible false 처리

src/hooks/option/useCanvasSetting.js

@@ -146,13 +146,9 @@ export function useCanvasSetting(executeEffect = true) {
     if (!executeEffect) {
       return
     }
-    const tempFetchRoofMaterials = !fetchRoofMaterials
 
     /** 초 1회만 실행하도록 처리 */
-    setFetchRoofMaterials(tempFetchRoofMaterials)
+    addRoofMaterials()
-    if (tempFetchRoofMaterials) {
-      addRoofMaterials()
-    }
   }, [])
 
   /**

src/hooks/surface/useSurfaceShapeBatch.js

@@ -197,7 +197,6 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
           surfaceId: surfaceId,
           direction: direction,
         })
-        canvas?.add(batchSurface)
         canvas.setActiveObject(batchSurface)
         setSurfaceShapePattern(batchSurface, roofDisplay.column)
         drawDirectionArrow(batchSurface)

src/hooks/useCirCuitTrestle.js

@@ -288,6 +288,22 @@ export function useCircuitTrestle() {
     setModuleStatistics({ header: tempHeader, rows: tempRows.filter((row) => row.wpOut !== 0), footer: tempFooter })
   }
 
+  const resetCircuits = () => {
+    const surfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
+    const circuitTexts = canvas.getObjects().filter((obj) => obj.name === 'circuitNumber')
+
+    surfaces.forEach((surface) => {
+      surface.modules.forEach((module) => {
+        module.circuit = null
+        module.pcsItemId = null
+        module.circuitNumber = null
+      })
+      surface.isComplete = false
+    })
+    if (circuitTexts.length > 0) canvas.remove(...circuitTexts)
+    canvas.renderAll()
+  }
+
   return {
     makers,
     setMakers,
@@ -309,5 +325,6 @@ export function useCircuitTrestle() {
     getModuleList,
     removeNotAllocationModules,
     setModuleStatisticsData,
+    resetCircuits,
   }
 }

src/hooks/useContextMenu.js

@@ -68,7 +68,7 @@ export function useContextMenu() {
   const { removeGrid } = useGrid()
   const { removeAdsorptionPoint } = useAdsorptionPoint()
   const commonTextFont = useRecoilValue(fontSelector('commonText'))
-  const { settingsData, setSettingsDataSave } = useCanvasSetting()
+  const { settingsData, setSettingsDataSave } = useCanvasSetting(false)
   const { swalFire } = useSwal()
   const { alignModule, modulesRemove, moduleRoofRemove } = useModule()
   const { removeRoofMaterial, removeAllRoofMaterial, moveRoofMaterial, removeOuterLines } = useRoofFn()
@@ -151,11 +151,6 @@ export function useContextMenu() {
                   name: `${getMessage('contextmenu.copy')}(C)`,
                   fn: () => copyObject(),
                 },
-                {
-                  id: 'roofMaterialEdit',
-                  name: getMessage('contextmenu.roof.material.edit'),
-                  component: <RoofMaterialSetting id={popupId} />,
-                },
                 {
                   id: 'dormerOffset',
                   name: getMessage('contextmenu.dormer.offset'),

src/hooks/useEstimate.js

@@ -9,6 +9,8 @@ import { GlobalDataContext } from '@/app/GlobalDataProvider'
 import { QcastContext } from '@/app/QcastProvider'
 import { currentCanvasPlanState } from '@/store/canvasAtom'
 import { loginUserStore } from '@/store/commonAtom'
+import { useTrestle } from '@/hooks/module/useTrestle'
+import { usePlan } from '@/hooks/usePlan'
 
 export function useEstimate() {
   const { managementStateLoaded } = useContext(GlobalDataContext)
@@ -20,13 +22,15 @@ export function useEstimate() {
   const { promisePost } = useAxios()
   const { swalFire } = useSwal()
 
+  const { setAllModuleSurfaceIsComplete } = useTrestle()
+  const { saveCanvas } = usePlan()
+
   /**
    * 도면 견적서 저장
    *
    * @param {Object} estimateParam - 견적서 저장 데이터
    */
   const saveEstimate = async (estimateParam) => {
-
     const userId = loginUserState.userId
     const saleStoreId = managementStateLoaded.saleStoreId
     const objectNo = currentCanvasPlan.objectNo
@@ -56,6 +60,11 @@ export function useEstimate() {
 
     await promisePost({ url: '/api/estimate/save-estimate', data: saveEstimateData })
       .then(async () => {
+        setAllModuleSurfaceIsComplete(true)
+
+        // 캔버스 저장
+        await saveCanvas(false)
+
         /* 견적서 저장이 완료되면 견적서 페이지로 이동 */
         moveEstimate(planNo, objectNo)
       })

src/hooks/usePlan.js

@@ -49,7 +49,7 @@ export function usePlan(params = {}) {
   const resetOuterLinePoints = useResetRecoilState(outerLinePointsState)
   const resetPlacementShapeDrawingPoints = useResetRecoilState(placementShapeDrawingPointsState)
 
-  const { fetchBasicSettings, basicSettingCopySave } = useCanvasSetting()
+  const { fetchBasicSettings, basicSettingCopySave } = useCanvasSetting(false)
   const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
 
   /**

src/locales/ja.json

@@ -82,7 +82,7 @@
   "modal.placement.surface.drawing.diagonal": "対角線",
   "modal.placement.surface.drawing.fix": "配置面確定",
   "plan.menu.placement.surface.arrangement": "面形状の配置",
-  "plan.menu.placement.surface.object": "モジュール配置",
+  "plan.menu.placement.surface.object": "オブジェクト配置",
   "plan.menu.placement.surface.all.remove": "配置面全体を削除",
   "plan.menu.module.circuit.setting": "モジュール配置、回路構成",
   "plan.menu.module.circuit.setting.default": "モジュール/架台設定",
@@ -293,10 +293,10 @@
   "modal.object.setting.height": "縦長",
   "modal.object.setting.area.cross": "エリア交差",
   "modal.object.setting.size.setting": "サイズ設定",
-  "modal.object.setting.agreement.depth": "棟の長さ・深さ",
+  "modal.object.setting.agreement.depth": "棟の長さ",
-  "modal.object.setting.offset.depth": "出幅（深さ）",
+  "modal.object.setting.offset.depth": "棟の出幅",
   "modal.object.setting.size.width": "幅",
-  "modal.object.setting.offset.width": "出幅（幅）",
+  "modal.object.setting.offset.width": "幅の出幅",
   "modal.object.setting.offset.slope": "勾配",
   "modal.object.setting.direction.select": "方向の選択",
   "modal.placement.surface.setting.info": "ⓘ①の長さ入力後、対角線長を入力すると②の長さを自動計算します。",