Merge branch 'dev' into dev-yj

.env.development

@@ -1,4 +1,4 @@
-NEXT_PUBLIC_API_SERVER_PATH="https://dev-api.hanasys.jp"
+NEXT_PUBLIC_API_SERVER_PATH="http://1.248.227.176:38080"
 
 NEXT_PUBLIC_HOST_URL="http://1.248.227.176:4000"
 

package.json

@@ -11,7 +11,6 @@
     "serve": "node server.js"
   },
   "dependencies": {
-    "@nextui-org/react": "^2.4.2",
     "ag-grid-react": "^32.0.2",
     "axios": "^1.7.8",
     "big.js": "^6.2.2",

src/app/UIProvider.js

@@ -1,5 +0,0 @@
-import { NextUIProvider } from '@nextui-org/react'
-
-export default function UIProvider({ children }) {
-  return <NextUIProvider>{children}</NextUIProvider>
-}

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(false)
+  const { fetchSettings } = useCanvasSetting()
   const resetCurrentMenu = useResetRecoilState(currentMenuState)
   useEffect(() => {
     return () => {

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

@@ -52,7 +52,7 @@ export default function CircuitTrestleSetting({ id }) {
   // const [stepUpListData, setStepUpListData] = useRecoilState(stepUpListDataState)
   const [stepUpListData, setStepUpListData] = useState([])
   const [seletedOption, setSeletedOption] = useState(null)
-  const { setModuleStatisticsData } = useCircuitTrestle()
+  const { setModuleStatisticsData, resetCircuits } = useCircuitTrestle()
   const { handleCanvasToPng } = useImgLoader()
 
   const passivityCircuitAllocationRef = useRef()
@@ -92,6 +92,17 @@ export default function CircuitTrestleSetting({ id }) {
     //   selectedModels,
     //   pcsCheck,
     // })
+
+    return () => {
+      if (
+        canvas
+          .getObjects()
+          .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
+          .some((surface) => !surface.isComplete)
+      ) {
+        resetCircuits()
+      }
+    }
   }, [])
 
   // 수동할당 시 모듈 삭제

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

@@ -9,7 +9,6 @@ import { deepCopyArray } from '@/util/common-utils'
 import { canvasState } from '@/store/canvasAtom'
 import * as turf from '@turf/turf'
 import { POLYGON_TYPE } from '@/common/common'
-import { useModal } from '@nextui-org/react'
 import { useModule } from '@/hooks/module/useModule'
 import { useSwal } from '@/hooks/useSwal'
 
@@ -34,7 +33,6 @@ export default function PanelEdit(props) {
   const canvas = useRecoilValue(canvasState)
   const { swalFire } = useSwal()
   const { moduleMove, moduleCopy, moduleMultiMove, moduleMultiCopy, moduleMoveAll, moduleCopyAll } = useModule()
-
   useEffect(() => {
     if (!canvas) {
       const isSetupModules = canvas.getObjects().filter((obj) => obj.name === 'module') // selectedObj에 없는 객체만 필터링

src/components/ui/ObjectPlacement.jsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { Button, Input } from '@nextui-org/react'
 import { useRecoilState, useSetRecoilState } from 'recoil'
 import { modalState } from '@/store/modalAtom'
 import { fabric } from 'fabric'
@@ -19,7 +18,7 @@ const ObjectPlacement = ({ canvas }) => {
   const [batchType, setBatchType] = useState(BATCH_TYPE.OPENING)
 
   // free or dimension 프리 / 치수
-  const [inputType, setInputType] = useState(INPUT_TYPE.FREE)
+  const [inputType, setinputType] = useState(INPUT_TYPE.FREE)
 
   const handleSave = () => {
     setMode(batchType)
@@ -38,7 +37,7 @@ const ObjectPlacement = ({ canvas }) => {
 
       <div className="mb-4">
         <div className="flex">
-          <Button
+          <button
             className={`w-1/2 py-2 ${objectPlacementMode.batchType === BATCH_TYPE.OPENING ? 'bg-blue-500 text-white rounded-l' : 'bg-gray-200 text-gray-700 rounded-r'}`}
             onClick={() => {
               setBatchType(BATCH_TYPE.OPENING)
@@ -46,8 +45,8 @@ const ObjectPlacement = ({ canvas }) => {
             }}
           >
             개구 배치
-          </Button>
+          </button>
-          <Button
+          <button
             className={`w-1/2 py-2 ${objectPlacementMode.batchType === BATCH_TYPE.SHADOW ? 'bg-blue-500 text-white rounded-l' : 'bg-gray-200 text-gray-700 rounded-r'}`}
             onClick={() => {
               setBatchType(BATCH_TYPE.SHADOW)
@@ -55,7 +54,7 @@ const ObjectPlacement = ({ canvas }) => {
             }}
           >
             그림자 배치
-          </Button>
+          </button>
         </div>
       </div>
 
@@ -64,7 +63,7 @@ const ObjectPlacement = ({ canvas }) => {
 
         <div className="mb-2">
           <label className="inline-flex items-center">
-            <Input
+            <input
               type="radio"
               name="inputType"
               checked={objectPlacementMode.inputType === INPUT_TYPE.FREE}
@@ -79,7 +78,7 @@ const ObjectPlacement = ({ canvas }) => {
 
         <div className="mb-2">
           <label className="inline-flex items-center">
-            <Input
+            <input
               type="radio"
               name="inputType"
               checked={objectPlacementMode.inputType === INPUT_TYPE.DIMENSION}
@@ -95,7 +94,7 @@ const ObjectPlacement = ({ canvas }) => {
         <div className="flex mb-2">
           <div className="mr-2">
             <label className="block text-gray-700 text-sm mb-1">가로길이</label>
-            <Input
+            <input
               type="text"
               className="w-full px-3 py-2 border rounded"
               placeholder="mm"
@@ -108,7 +107,7 @@ const ObjectPlacement = ({ canvas }) => {
 
           <div>
             <label className="block text-gray-700 text-sm mb-1">세로길이</label>
-            <Input
+            <input
               type="text"
               className="w-full px-3 py-2 border rounded"
               placeholder="mm"
@@ -122,7 +121,7 @@ const ObjectPlacement = ({ canvas }) => {
 
         <div className="mb-4">
           <label className="inline-flex items-center">
-            <Input
+            <input
               type="checkbox"
               name={`areaBoundary`}
               checked={objectPlacementMode.areaBoundary}
@@ -134,9 +133,9 @@ const ObjectPlacement = ({ canvas }) => {
         </div>
 
         <div className="text-center">
-          <Button onClick={handleSave} className="bg-gray-500 text-white py-2 px-4 rounded">
+          <button onClick={handleSave} className="bg-gray-500 text-white py-2 px-4 rounded">
             저장
-          </Button>
+          </button>
         </div>
       </div>
     </div>

src/components/ui/SurfaceShape.jsx

@@ -1,4 +1,3 @@
-import { Button, Input } from '@nextui-org/react'
 import { useState } from 'react'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { modalState } from '@/store/modalAtom'
@@ -780,9 +779,9 @@ export const SurfaceShapeModal = ({ canvas }) => {
     const buttons = []
     for (let i = 1; i <= 29; i++) {
       buttons.push(
-        <Button key={i} className="m-1 p-2" value={i} onClick={onChangeType}>
+        <button key={i} className="m-1 p-2" value={i} onClick={onChangeType}>
           {i}번 추가
-        </Button>,
+        </button>,
       )
     }
 
@@ -798,97 +797,97 @@ export const SurfaceShapeModal = ({ canvas }) => {
       {type === 1 ? (
         <div>
           길이1
-          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
+          <input type="text" name={'length1'} value={length1} onChange={setLength} />
           {length3 === 0 && (
             <>
               길이2
-              <Input type="text" name={'length2'} value={length2} onChange={setLength} />
+              <input type="text" name={'length2'} value={length2} onChange={setLength} />
             </>
           )}
-          대각선 <Input type="text" name={'length3'} value={length3} onChange={setLength} />
+          대각선 <input type="text" name={'length3'} value={length3} onChange={setLength} />
         </div>
       ) : [2, 4, 5].includes(type) ? (
         <div>
           길이1
-          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
+          <input type="text" name={'length1'} value={length1} onChange={setLength} />
           길이2
-          <Input type="text" name={'length2'} value={length2} onChange={setLength} />
+          <input type="text" name={'length2'} value={length2} onChange={setLength} />
         </div>
       ) : [3, 6, 7, 8, 9, 24, 28, 29].includes(type) ? (
         <>
           길이1
-          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
+          <input type="text" name={'length1'} value={length1} onChange={setLength} />
           길이2
-          <Input type="text" name={'length2'} value={length2} onChange={setLength} />
+          <input type="text" name={'length2'} value={length2} onChange={setLength} />
           길이3
-          <Input type="text" name={'length3'} value={length3} onChange={setLength} />
+          <input type="text" name={'length3'} value={length3} onChange={setLength} />
         </>
       ) : [11, 12, 19, 20, 21, 22, 25, 26, 27].includes(type) ? (
         <>
           길이1
-          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
+          <input type="text" name={'length1'} value={length1} onChange={setLength} />
           길이2
-          <Input type="text" name={'length2'} value={length2} onChange={setLength} />
+          <input type="text" name={'length2'} value={length2} onChange={setLength} />
           길이3
-          <Input type="text" name={'length3'} value={length3} onChange={setLength} />
+          <input type="text" name={'length3'} value={length3} onChange={setLength} />
           길이4
-          <Input type="text" name={'length4'} value={length4} onChange={setLength} />
+          <input type="text" name={'length4'} value={length4} onChange={setLength} />
         </>
       ) : [10, 13, 14, 15, 16, 17, 18, 23].includes(type) ? (
         <>
           길이1
-          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
+          <input type="text" name={'length1'} value={length1} onChange={setLength} />
           길이2
-          <Input type="text" name={'length2'} value={length2} onChange={setLength} />
+          <input type="text" name={'length2'} value={length2} onChange={setLength} />
           길이3
-          <Input type="text" name={'length3'} value={length3} onChange={setLength} />
+          <input type="text" name={'length3'} value={length3} onChange={setLength} />
           길이4
-          <Input type="text" name={'length4'} value={length4} onChange={setLength} />
+          <input type="text" name={'length4'} value={length4} onChange={setLength} />
           길이5
-          <Input type="text" name={'length5'} value={length5} onChange={setLength} />
+          <input type="text" name={'length5'} value={length5} onChange={setLength} />
         </>
       ) : (
         <></>
       )}
       <div className="flex flex-col items-center">
         <div className="flex">
-          <Button
+          <button
             className={`p-4 border rounded-lg ${direction === 'north' ? 'bg-blue-200' : ''} flex items-center justify-center`}
             onClick={() => setDirection('north')}
           >
             북
-          </Button>
+          </button>
         </div>
         <div className="flex space-x-4">
-          <Button
+          <button
             className={`p-4 border rounded-lg ${direction === 'west' ? 'bg-blue-200' : ''} flex items-center justify-center`}
             onClick={() => setDirection('west')}
           >
             서
-          </Button>
+          </button>
-          <Button
+          <button
             className={`p-4 border rounded-lg ${direction === 'east' ? 'bg-blue-200' : ''} flex items-center justify-center`}
             onClick={() => setDirection('east')}
           >
             동
-          </Button>
+          </button>
         </div>
         <div className="mt-4">
-          <Button
+          <button
             className={`p-4 border rounded-lg ${direction === 'south' ? 'bg-blue-200' : ''} flex items-center justify-center`}
             onClick={() => setDirection('south')}
           >
             남
-          </Button>
+          </button>
         </div>
       </div>
       <div>
-        <Button className="m-1 p-2" color={'primary'} onClick={closeModal}>
+        <button className="m-1 p-2" color={'primary'} onClick={closeModal}>
           닫기
-        </Button>
+        </button>
-        <Button className="m-1 p-2" color={'primary'} onClick={onSave}>
+        <button className="m-1 p-2" color={'primary'} onClick={onSave}>
           저장
-        </Button>
+        </button>
       </div>
     </>
   )

src/components/ui/ThumbnailLIst.jsx

@@ -1,38 +0,0 @@
-'use client'
-
-import { memo } from 'react'
-import { Card, Image } from '@nextui-org/react'
-
-function ThumbnailList(props) {
-  const { thumbnails, canvas } = props
-
-  const handleSelectThumb = (canvasStatus) => {
-    console.log('canvasStatus', canvasStatus.length)
-    canvas?.clear() // 캔버스를 초기화합니다.
-    canvas?.loadFromJSON(JSON.parse(canvasStatus), function () {
-      canvas?.renderAll() // 캔버스를 다시 그립니다.
-    })
-  }
-
-  return (
-    <>
-      <div className="flex justify-center m-4 w-full">
-        {thumbnails.length > 0 &&
-          thumbnails.map((thumbnail, index) => (
-            <Card isFooterBlurred radius="lg" key={index} className="border-none m-2">
-              <Image
-                alt="Woman listing to music"
-                className="object-cover"
-                height={200}
-                src={thumbnail.imageName}
-                width={200}
-                onClick={() => handleSelectThumb(thumbnail.canvasStatus)}
-              />
-            </Card>
-          ))}
-      </div>
-    </>
-  )
-}
-
-export default memo(ThumbnailList)

src/hooks/module/useModule.js

@@ -108,13 +108,18 @@ export function useModule() {
       return
     }
     const activeModule = canvas.getObjects().find((obj) => canvas.getActiveObjects()[0].id === obj.id)
+    const surfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
     if (activeModule.circuit) {
-      swalFire({
+      if (surfaces.some((surface) => surface.isComplete)) {
-        title: getMessage('can.not.move.module'),
+        swalFire({
-        icon: 'error',
+          title: getMessage('can.not.move.module'),
-        type: 'alert',
+          icon: 'error',
-      })
+          type: 'alert',
-      return
+        })
+        return
+      }
+
+      removeTrestleMaterials()
     }
     const modules = type === 'row' ? getRowModules(activeModule) : getColumnModules(activeModule)
     const otherModules = getOtherModules(modules)
@@ -224,7 +229,7 @@ export function useModule() {
       }
 
       modules.forEach((module) => {
-        const { top, left } = getPosotion(module, direction, Number(length) + Number(moduleLength), true)
+        const { top, left } = getPosotion(module, direction, Number(length) + Number(moduleLength) * 10, false)
         module.clone((obj) => {
           obj.set({
             parentId: module.parentId,
@@ -263,8 +268,12 @@ export function useModule() {
             canvas.renderAll()
           },
         })
+      } else {
+        surface.set({ modules: [...surface.modules, ...copyModules] })
       }
     })
+
+    setModuleStatisticsData()
   }
 
   const moduleCopy = (length, direction) => {
@@ -342,12 +351,17 @@ export function useModule() {
     }
     const activeModule = canvas.getObjects().find((obj) => canvas.getActiveObjects()[0].id === obj.id)
     if (activeModule.circuit) {
-      swalFire({
+      const surfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
-        title: getMessage('can.not.copy.module'),
+      if (surfaces.some((surface) => surface.isComplete)) {
-        icon: 'error',
+        swalFire({
-        type: 'alert',
+          title: getMessage('can.not.copy.module'),
-      })
+          icon: 'error',
-      return
+          type: 'alert',
+        })
+        return
+      }
+
+      removeTrestleMaterials()
     }
     const modules = type === 'row' ? getRowModules(activeModule) : getColumnModules(activeModule)
     const otherModules = canvas.getObjects().filter((obj) => obj.surfaceId === modules[0].surfaceId && obj.name === POLYGON_TYPE.MODULE)
@@ -364,7 +378,7 @@ export function useModule() {
     }
 
     modules.forEach((module) => {
-      const { top, left } = getPosotion(module, direction, Number(length) + Number(moduleLength), true)
+      const { top, left } = getPosotion(module, direction, Number(length), true)
       module.clone((obj) => {
         obj.set({
           parentId: module.parentId,
@@ -385,6 +399,7 @@ export function useModule() {
         canvas.add(obj)
         copyModules.push(obj)
         obj.setCoords()
+        console.log(obj)
       })
       if (
         isOverlapOtherModules(copyModule, otherModules) ||
@@ -430,6 +445,10 @@ export function useModule() {
     if (moduleSetupSurface.isComplete) {
       resetSurface()
     }
+    const surfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
+    if (surfaces.some((surface) => surface.isComplete)) {
+      removeTrestleMaterials()
+    }
     canvas.discardActiveObject()
     moduleSetupSurface.set({ modules: otherModules })
     canvas.remove(...columnModules)
@@ -520,6 +539,7 @@ export function useModule() {
         icon: 'error',
         type: 'alert',
         confirmFn: () => {
+          moduleSetupSurface.modules = [...moduleSetupSurface.modules, ...columnModules]
           canvas.add(...columnModules)
           targetModules.forEach((module) => {
             module.set({ top: module.originPos.top, left: module.originPos.left, fill: module.originPos.fill })
@@ -528,14 +548,15 @@ export function useModule() {
           canvas.renderAll()
         },
       })
+    } else {
+      moduleSetupSurface.modules = moduleSetupSurface.modules.filter(
+        (module) => !columnModules.map((copyModule) => copyModule.id).includes(module.id),
+      )
     }
     setModuleStatisticsData()
   }
 
   const moduleRowRemove = (type) => {
-    // if (isFixedModule()) {
-    //   return
-    // }
     const activeModule = canvas.getObjects().find((obj) => canvas.getActiveObjects()[0].id === obj.id)
     const rowModules = getRowModules(activeModule)
     const otherModules = getOtherModules(rowModules)
@@ -546,8 +567,9 @@ export function useModule() {
     let height = -1
     const moduleSetupSurface = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)
     let isWarning = false
-    if (moduleSetupSurface.isComplete) {
+    const surfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
-      resetSurface()
+    if (surfaces.some((surface) => surface.isComplete)) {
+      removeTrestleMaterials()
     }
     canvas.discardActiveObject()
     moduleSetupSurface.set({ modules: otherModules })
@@ -639,6 +661,7 @@ export function useModule() {
         icon: 'error',
         type: 'alert',
         confirmFn: () => {
+          moduleSetupSurface.modules = [...moduleSetupSurface.modules, ...rowModules]
           canvas.add(...rowModules)
           targetModules.forEach((module) => {
             module.set({ top: module.originPos.top, left: module.originPos.left, fill: module.originPos.fill })
@@ -652,9 +675,6 @@ export function useModule() {
   }
 
   const moduleColumnInsert = (type) => {
-    if (isFixedModule()) {
-      return
-    }
     const activeModule = canvas.getObjects().find((obj) => canvas.getActiveObjects()[0].id === obj.id)
     const columnModules = getColumnModules(activeModule)
     let otherModules = getOtherModules(columnModules)
@@ -665,25 +685,11 @@ export function useModule() {
     const objects = getObjects()
     const copyModules = []
     const moduleSetupSurface = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)
-    if (moduleSetupSurface.isComplete) {
-      resetSurface()
-    }
-    let width = -1
     let isWarning = false
     const { moduleIntvlHor, moduleIntvlVer } = moduleSetupSurface.trestleDetail
-    if (targetModules.length === 0) {
-      swalFire({
-        title: '마지막 모듈입니다.',
-        icon: 'error',
-        type: 'alert',
-      })
-      return
-    }
     canvas.discardActiveObject()
     targetModules.forEach((module) => {
-      if (width === -1)
+      const { top, left } = getPosotion(module, type, moduleIntvlHor, true)
-        width = type === MODULE_INSERT_TYPE.LEFT ? Number(activeModule.left) - Number(module.left) : Number(module.left) - Number(activeModule.left)
-      const { top, left } = getPosotion(module, type, module.width, true)
       module.originPos = {
         left: module.left,
         top: module.top,
@@ -700,7 +706,7 @@ export function useModule() {
     canvas.renderAll()
     otherModules = getOtherModules(columnModules)
     columnModules.forEach((module) => {
-      const { top, left } = getPosotion(module, type, module.width + moduleIntvlHor, true)
+      const { top, left } = getPosotion(module, type, moduleIntvlHor, true)
       let copyModule = null
       module.clone((obj) => {
         obj.set({
@@ -731,6 +737,7 @@ export function useModule() {
         isOutsideSurface(copyModule, moduleSetupSurface)
       ) {
         isWarning = true
+        copyModule.set({ fill: 'red' })
       }
       module.setCoords()
     })
@@ -749,6 +756,8 @@ export function useModule() {
           canvas.renderAll()
         },
       })
+    } else {
+      moduleSetupSurface.modules = [...moduleSetupSurface.modules, ...copyModules]
     }
     setModuleStatisticsData()
   }
@@ -779,29 +788,14 @@ export function useModule() {
       type === MODULE_INSERT_TYPE.TOP
         ? otherModules.filter((module) => module.top < activeModule.top).sort((a, b) => a.top - b.top)
         : otherModules.filter((module) => module.top > activeModule.top).sort((a, b) => a.top - b.top)
-    if (targetModules.length === 0) {
-      swalFire({
-        title: '마지막 모듈입니다.',
-        icon: 'error',
-        type: 'alert',
-      })
-      return
-    }
     const objects = getObjects()
     const copyModules = []
     const moduleSetupSurface = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)
-    let height = -1
     let isWarning = false
     const { moduleIntvlHor, moduleIntvlVer } = moduleSetupSurface.trestleDetail
-
-    if (surface.isComplete) {
-      resetSurface()
-    }
     canvas.discardActiveObject()
     targetModules.forEach((module) => {
-      if (height === -1)
+      const { top, left } = getPosotion(module, type, moduleIntvlVer, true)
-        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 + moduleIntvlVer, true)
       module.originPos = {
         left: module.left,
         top: module.top,
@@ -817,7 +811,7 @@ export function useModule() {
     canvas.renderAll()
     otherModules = getOtherModules(rowModules)
     rowModules.forEach((module) => {
-      const { top, left } = getPosotion(module, type, activeModule.height + moduleIntvlVer, true)
+      const { top, left } = getPosotion(module, type, moduleIntvlVer, true)
       let copyModule = null
       module.clone((obj) => {
         obj.set({
@@ -869,6 +863,8 @@ export function useModule() {
           canvas.renderAll()
         },
       })
+    } else {
+      moduleSetupSurface.modules = [...moduleSetupSurface.modules, ...copyModules]
     }
     setModuleStatisticsData()
   }
@@ -931,6 +927,7 @@ export function useModule() {
     })
   }
 
+  // 회로가 없을때만 삭제 가능
   const modulesRemove = () => {
     const activeModule = canvas.getObjects().find((obj) => canvas.getActiveObjects()[0].id === obj.id)
     const modules = canvas
@@ -938,7 +935,15 @@ export function useModule() {
       .filter((obj) => obj.surfaceId === activeModule.surfaceId && obj.name === POLYGON_TYPE.MODULE && activeModule.id !== obj.id)
     const surface = canvas.getObjects().find((obj) => obj.id === activeModule.surfaceId && obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
     if (surface.isComplete) {
-      resetSurface()
+      removeTrestleMaterials()
+    }
+    if (activeModule.circuit) {
+      swalFire({
+        title: getMessage('can.not.remove.module'),
+        icon: 'error',
+        type: 'alert',
+      })
+      return
     }
 
     surface.set({ modules: modules })

src/hooks/module/useTrestle.js

@@ -2799,5 +2799,11 @@ export const useTrestle = () => {
     })
   }
 
-  return { apply, getTrestleParams, clear, setViewCircuitNumberTexts, getEstimateData, setAllModuleSurfaceIsComplete }
+  // 배치면 전체에 가대 설치 여부
+  const isAllComplete = () => {
+    const surfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
+    return surfaces.every((surface) => surface.isComplete)
+  }
+
+  return { apply, getTrestleParams, clear, setViewCircuitNumberTexts, getEstimateData, setAllModuleSurfaceIsComplete, isAllComplete }
 }

src/hooks/roofcover/usePropertiesSetting.js

@@ -11,6 +11,8 @@ import PropertiesSetting from '@/components/floor-plan/modal/outerlinesetting/Pr
 import RoofShapeSetting from '@/components/floor-plan/modal/roofShape/RoofShapeSetting'
 import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
 import { settingModalFirstOptionsState } from '@/store/settingAtom'
+import { useSwal } from '@/hooks/useSwal'
+import { useMessage } from '@/hooks/useMessage'
 
 // 외벽선 속성 설정
 export function usePropertiesSetting(id) {
@@ -25,6 +27,8 @@ export function usePropertiesSetting(id) {
   const { addPolygonByLines } = usePolygon()
   const { removeLine, hideLine } = useLine()
   const { addPopup, closePopup } = usePopup()
+  const { swalFire } = useSwal()
+  const { getMessage } = useMessage()
 
   useEffect(() => {
     const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
@@ -125,47 +129,52 @@ export function usePropertiesSetting(id) {
   }
 
   const handleFix = () => {
-    const isClose = confirm('외벽선 속성 설정을 완료하시겠습니까?')
+    swalFire({
-    if (isClose) {
+      text: getMessage('outerLine.property.fix'),
-      const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
+      type: 'confirm',
+      confirmFn: async () => {
+        const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
+
+        const notSetAttributes = lines.filter((line) => !line.attributes?.type)
+        if (notSetAttributes.length > 0) {
+          // 세팅이 하나라도 안되어있으면 초기화
+          lines.forEach((line) => {
+            line.set({
+              stroke: '#000000',
+              strokeWidth: 4,
+            })
+          })
+          canvas.discardActiveObject()
+          // closePopup(id)
+          addPopup(id, 1, <RoofShapeSetting id={id} pos={{ x: 50, y: 230 }} />)
+          return
+        }
 
-      const notSetAttributes = lines.filter((line) => !line.attributes?.type)
-      if (notSetAttributes.length > 0) {
-        // 세팅이 하나라도 안되어있으면 초기화
         lines.forEach((line) => {
           line.set({
+            attributes: line.attributes ? line.attributes : { offset: 0, type: LINE_TYPE.WALLLINE.WALL },
             stroke: '#000000',
             strokeWidth: 4,
           })
+
+          hideLine(line)
         })
-        canvas.discardActiveObject()
+
-        // closePopup(id)
+        const wall = addPolygonByLines(lines, { name: POLYGON_TYPE.WALL, fill: 'transparent', stroke: 'black' })
-        addPopup(id, 1, <RoofShapeSetting id={id} pos={{ x: 50, y: 230 }} />)
+
+        wall.lines = [...lines]
+
+        const roof = drawRoofPolygon(wall)
+
+        setPoints([])
+        canvas.renderAll()
+        roof.drawHelpLine(settingModalFirstOptions)
+        addPopup(id, 1, <RoofAllocationSetting id={id} pos={{ x: 50, y: 230 }} />)
+      },
+      denyFn: async () => {
         return
-      }
+      },
-
+    })
-      lines.forEach((line) => {
-        line.set({
-          attributes: line.attributes ? line.attributes : { offset: 0, type: LINE_TYPE.WALLLINE.WALL },
-          stroke: '#000000',
-          strokeWidth: 4,
-        })
-
-        hideLine(line)
-      })
-
-      const wall = addPolygonByLines(lines, { name: POLYGON_TYPE.WALL, fill: 'transparent', stroke: 'black' })
-
-      wall.lines = [...lines]
-
-      const roof = drawRoofPolygon(wall)
-
-      setPoints([])
-      canvas.renderAll()
-      roof.drawHelpLine(settingModalFirstOptions)
-      addPopup(id, 1, <RoofAllocationSetting id={id} pos={{ x: 50, y: 230 }} />)
-      return
-    }
   }
 
   const closeModal = (fn) => {

src/hooks/useCirCuitTrestle.js

@@ -176,8 +176,6 @@ export function useCircuitTrestle() {
     canvas.renderAll()
   }
 
-  const setPowerConditionerData = () => {}
-
   const setModuleStatisticsData = () => {
     console.log('selectedModules', selectedModules)
     if (!selectedModules || !selectedModules?.itemList || selectedModules?.itemList?.length === 0) return
@@ -302,6 +300,13 @@ export function useCircuitTrestle() {
     })
     if (circuitTexts.length > 0) canvas.remove(...circuitTexts)
     canvas.renderAll()
+
+    setModuleStatisticsData()
+  }
+
+  const isExistCircuit = () => {
+    const circuits = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE && obj.circuit)
+    return circuits.length > 0
   }
 
   return {
@@ -326,5 +331,6 @@ export function useCircuitTrestle() {
     removeNotAllocationModules,
     setModuleStatisticsData,
     resetCircuits,
+    isExistCircuit,
   }
 }

src/hooks/useContextMenu.js

@@ -43,6 +43,8 @@ import { useRoofFn } from '@/hooks/common/useRoofFn'
 import { MODULE_ALIGN_TYPE, useModule } from './module/useModule'
 import PlacementSurfaceLineProperty from '@/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty'
 import { selectedMenuState } from '@/store/menuAtom'
+import { useTrestle } from './module/useTrestle'
+import { useCircuitTrestle } from './useCirCuitTrestle'
 
 export function useContextMenu() {
   const canvas = useRecoilValue(canvasState)
@@ -73,7 +75,8 @@ export function useContextMenu() {
   const { alignModule, modulesRemove, moduleRoofRemove } = useModule()
   const { removeRoofMaterial, removeAllRoofMaterial, moveRoofMaterial, removeOuterLines } = useRoofFn()
   const selectedMenu = useRecoilValue(selectedMenuState)
-
+  const { isAllComplete, clear: resetModule } = useTrestle()
+  const { isExistCircuit } = useCircuitTrestle()
   const currentMenuSetting = () => {
     switch (selectedMenu) {
       case 'outline':
@@ -128,11 +131,6 @@ export function useContextMenu() {
           if (selectedMenu === 'surface') {
             setContextMenu([
               [
-                {
-                  id: 'sizeEdit',
-                  name: getMessage('contextmenu.size.edit'),
-                  component: <SizeSetting id={popupId} target={currentObject} />,
-                },
                 {
                   id: 'dormerRemove',
                   shortcut: ['d', 'D'],
@@ -602,56 +600,154 @@ export function useContextMenu() {
               {
                 id: 'move',
                 name: getMessage('contextmenu.move'),
-                component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.MOVE} />,
+                fn: () => {
+                  if (currentObject.circuit) {
+                    swalFire({
+                      title: getMessage('can.not.move.module'),
+                      icon: 'error',
+                      type: 'alert',
+                    })
+                    return
+                  }
+
+                  addPopup(popupId, 1, <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.MOVE} />)
+                },
+                // component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.MOVE} />,
               },
               {
                 id: 'copy',
                 name: getMessage('contextmenu.copy'),
-                component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COPY} />,
+                fn: () => {
+                  if (currentObject.circuit) {
+                    swalFire({
+                      title: getMessage('can.not.copy.module'),
+                      icon: 'error',
+                      type: 'alert',
+                    })
+                    return
+                  }
+
+                  addPopup(popupId, 1, <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COPY} />)
+                },
               },
             ],
             [
               {
                 id: 'columnMove',
                 name: getMessage('contextmenu.column.move'),
-                component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COLUMN_MOVE} />,
+                fn: () => {
+                  if (isAllComplete()) {
+                    swalFire({
+                      title: getMessage('can.not.move.module'),
+                      icon: 'error',
+                      type: 'alert',
+                    })
+                    return
+                  }
+                  resetModule()
+                  addPopup(popupId, 1, <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COLUMN_MOVE} />)
+                },
               },
               {
                 id: 'columnCopy',
                 name: getMessage('contextmenu.column.copy'),
-                component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COLUMN_COPY} />,
+                fn: () => {
+                  if (isAllComplete()) {
+                    swalFire({
+                      title: getMessage('can.not.copy.module'),
+                      icon: 'error',
+                      type: 'alert',
+                    })
+                    return
+                  }
+                  resetModule()
+                  addPopup(popupId, 1, <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COLUMN_COPY} />)
+                },
+                // component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COLUMN_COPY} />,
               },
               {
                 id: 'columnRemove',
                 name: getMessage('contextmenu.column.remove'),
-                component: <ColumnRemove id={popupId} />,
+                fn: () => {
+                  if (isExistCircuit()) {
+                    resetModule()
+                  }
+
+                  addPopup(popupId, 1, <ColumnRemove id={popupId} />)
+                },
+                // component: <ColumnRemove id={popupId} />,
               },
               {
                 id: 'columnInsert',
                 name: getMessage('contextmenu.column.insert'),
-                component: <ColumnInsert id={popupId} />,
+                fn: () => {
+                  if (isExistCircuit()) {
+                    resetModule()
+                  }
+
+                  addPopup(popupId, 1, <ColumnInsert id={popupId} />)
+                },
+                // component: <ColumnInsert id={popupId} />,
               },
             ],
             [
               {
                 id: 'rowMove',
                 name: getMessage('contextmenu.row.move'),
-                component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.ROW_MOVE} />,
+                fn: () => {
+                  if (isAllComplete()) {
+                    swalFire({
+                      title: getMessage('can.not.move.module'),
+                      icon: 'error',
+                      type: 'alert',
+                    })
+                    return
+                  }
+                  resetModule()
+                  addPopup(popupId, 1, <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.ROW_MOVE} />)
+                },
+                // component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.ROW_MOVE} />,
               },
               {
                 id: 'rowCopy',
                 name: getMessage('contextmenu.row.copy'),
-                component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.ROW_COPY} />,
+                fn: () => {
+                  if (isAllComplete()) {
+                    swalFire({
+                      title: getMessage('can.not.copy.module'),
+                      icon: 'error',
+                      type: 'alert',
+                    })
+                    return
+                  }
+                  resetModule()
+                  addPopup(popupId, 1, <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.ROW_COPY} />)
+                },
+                // component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.ROW_COPY} />,
               },
               {
                 id: 'rowRemove',
                 name: getMessage('contextmenu.row.remove'),
-                component: <RowRemove id={popupId} />,
+                fn: () => {
+                  if (isExistCircuit()) {
+                    resetModule()
+                  }
+
+                  addPopup(popupId, 1, <RowRemove id={popupId} />)
+                },
+                // component: <RowRemove id={popupId} />,
               },
               {
                 id: 'rowInsert',
                 name: getMessage('contextmenu.row.insert'),
-                component: <RowInsert id={popupId} />,
+                fn: () => {
+                  if (isExistCircuit()) {
+                    resetModule()
+                  }
+
+                  addPopup(popupId, 1, <RowInsert id={popupId} />)
+                },
+                // component: <RowInsert id={popupId} />,
               },
             ],
           ])
@@ -663,32 +759,16 @@ export function useContextMenu() {
                 id: 'moduleVerticalCenterAlign',
                 name: getMessage('contextmenu.module.vertical.align'),
                 fn: () => {
-                  if (currentObject.arrayData) {
+                  if (isAllComplete()) {
-                    let existCircuit = false
+                    swalFire({
-                    currentObject.arrayData.forEach((surface) => {
+                      title: getMessage('can.not.move.module'),
-                      surface.modules.forEach((module) => {
+                      icon: 'error',
-                        if (module.circuit) existCircuit = true
+                      type: 'alert',
-                      })
                     })
-                    if (existCircuit) {
+                    return
-                      swalFire({
-                        title: getMessage('can.not.move.module'),
-                        icon: 'error',
-                        type: 'alert',
-                      })
-                      return
-                    }
-                  } else {
-                    const allocatedModules = currentObject.modules.filter((module) => module.circuit !== null)
-                    if (allocatedModules.length > 0) {
-                      swalFire({
-                        title: getMessage('can.not.move.module'),
-                        icon: 'error',
-                        type: 'alert',
-                      })
-                      return
-                    }
                   }
+
+                  resetModule()
                   alignModule(MODULE_ALIGN_TYPE.VERTICAL, currentObject.arrayData ?? [currentObject])
                 },
               },
@@ -696,32 +776,16 @@ export function useContextMenu() {
                 id: 'moduleHorizonCenterAlign',
                 name: getMessage('contextmenu.module.horizon.align'),
                 fn: () => {
-                  if (currentObject.arrayData) {
+                  if (isAllComplete()) {
-                    let existCircuit = false
+                    swalFire({
-                    currentObject.arrayData.forEach((surface) => {
+                      title: getMessage('can.not.move.module'),
-                      surface.modules.forEach((module) => {
+                      icon: 'error',
-                        if (module.circuit) existCircuit = true
+                      type: 'alert',
-                      })
                     })
-                    if (existCircuit) {
+                    return
-                      swalFire({
-                        title: getMessage('can.not.move.module'),
-                        icon: 'error',
-                        type: 'alert',
-                      })
-                      return
-                    }
-                  } else {
-                    const allocatedModules = currentObject.modules.filter((module) => module.circuit !== null)
-                    if (allocatedModules.length > 0) {
-                      swalFire({
-                        title: getMessage('can.not.move.module'),
-                        icon: 'error',
-                        type: 'alert',
-                      })
-                      return
-                    }
                   }
+
+                  resetModule()
                   alignModule(MODULE_ALIGN_TYPE.HORIZONTAL, currentObject.arrayData ?? [currentObject])
                 },
               },
@@ -740,12 +804,45 @@ export function useContextMenu() {
               {
                 id: 'moduleMove',
                 name: getMessage('contextmenu.module.move'),
-                component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.MOVE_ALL} arrayData={currentObject.arrayData ?? [currentObject]} />,
+                fn: () => {
+                  if (isAllComplete()) {
+                    swalFire({
+                      title: getMessage('can.not.move.module'),
+                      icon: 'error',
+                      type: 'alert',
+                    })
+                    return
+                  }
+                  resetModule()
+                  addPopup(
+                    popupId,
+                    1,
+                    <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.MOVE_ALL} arrayData={currentObject.arrayData ?? [currentObject]} />,
+                  )
+                },
+
+                // component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.MOVE_ALL} arrayData={currentObject.arrayData ?? [currentObject]} />,
               },
               {
                 id: 'moduleCopy',
                 name: getMessage('contextmenu.module.copy'),
-                component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COPY_ALL} arrayData={currentObject.arrayData ?? [currentObject]} />,
+                fn: () => {
+                  if (isAllComplete()) {
+                    swalFire({
+                      title: getMessage('can.not.move.module'),
+                      icon: 'error',
+                      type: 'alert',
+                    })
+                    return
+                  }
+                  resetModule()
+                  addPopup(
+                    popupId,
+                    1,
+                    <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COPY_ALL} arrayData={currentObject.arrayData ?? [currentObject]} />,
+                  )
+                },
+                // component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COPY_ALL} arrayData={currentObject.arrayData ?? [currentObject]} />,
               },
               // {
               //   id: 'moduleCircuitNumberEdit',

src/locales/ja.json

@@ -1030,5 +1030,6 @@
   "roof.is.not.selected": "屋根の選択をお願いします。",
   "length.direction.is.required": "長さと方向を入力します。",
   "canvas.infomation.text": "数字は [半角] 入力のみ可能です。",
-  "roof.exceed.count": "屋根材は4つまで選択可能です。"
+  "roof.exceed.count": "屋根材は4つまで選択可能です。",
+  "outerLine.property.fix": "外壁線の属性設定 を完了しますか？"
 }

src/locales/ko.json

@@ -1030,5 +1030,6 @@
   "roof.is.not.selected": "지붕을 선택해주세요.",
   "length.direction.is.required": "길이와 방향을 입력하세요.",
   "canvas.infomation.text": "숫자는 [반각] 입력만 가능합니다.",
-  "roof.exceed.count": "지붕재는 4개까지 선택 가능합니다."
+  "roof.exceed.count": "지붕재는 4개까지 선택 가능합니다.",
+  "outerLine.property.fix": "외벽선 속성 설정을 완료하시겠습니까?"
 }

tailwind.config.js

@@ -1,5 +1,3 @@
-const { nextui } = require('@nextui-org/react')
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
@@ -12,11 +10,10 @@ module.exports = {
     extend: {
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
+        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
     },
   },
   darkMode: 'class',
-  plugins: [nextui()],
+  plugins: [],
 }