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

src/components/common/color-picker/ColorPickerModal.jsx

@@ -33,9 +33,9 @@ export default function ColorPickerModal(props) {
   }, [isShow])
 
   return (
-    <WithDraggable isShow={true} pos={pos ?? ''}>
+    <WithDraggable isShow={true} pos={pos ?? ''} handle=".modal-handle">
       <div className={`modal-pop-wrap lr mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.color.picker.title')}</h1>
           <button
             className="modal-close"
@@ -78,6 +78,7 @@ export default function ColorPickerModal(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/common/draggable/WithDraggable.jsx

@@ -20,7 +20,7 @@ export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 },
         <Draggable
           position={{ x: position.x, y: position.y }}
           onDrag={(e, data) => handleOnDrag(e, data)}
-          handle={handle === '' ? '.modal-head' : handle}
+          handle={handle === '' ? '.modal-handle' : handle}
         >
           {children}
         </Draggable>

src/components/common/font/FontSetting.jsx

@@ -67,9 +67,9 @@ export default function FontSetting(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} handle=".modal-handle">
       <div className={`modal-pop-wrap lrr mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.font')}</h1>
           <button
             className="modal-close"
@@ -133,6 +133,7 @@ export default function FontSetting(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/estimate/Estimate.jsx

@@ -99,7 +99,9 @@ export default function Estimate({}) {
 
   const initEstimate = (currPid = currentPid) => {
     console.log('🚀 ~ initEstimate ~ currPid:', currPid)
+    closeAll()
     setMenuNumber(5)
+
     setObjectNo(objectRecoil.floorPlanObjectNo)
 
     setPlanNo(currPid)
@@ -137,7 +139,6 @@ export default function Estimate({}) {
   }, [selectedPlan])
 
   useEffect(() => {
-    closeAll()
     initEstimate()
   }, [])
 
@@ -619,7 +620,7 @@ export default function Estimate({}) {
     updates.partAdd = '0'
     updates.saleTotPrice = (Number(amount.replaceAll(',', '')) * estimateContextState.itemList[index].salePrice.replaceAll(',', '')).toLocaleString()
     updates.showSaleTotPrice = (
-      Number(amount.replaceAll(',', '')) * estimateContextState.itemList[index].showSalePrice?.replaceAll(',', '')
+      Number(amount.replaceAll(',', '')) * estimateContextState.itemList[index].salePrice?.replaceAll(',', '')
     ).toLocaleString()
 
     updateList = estimateContextState.itemList.map((item) => {
@@ -681,7 +682,6 @@ export default function Estimate({}) {
     let updateList = []
     let updates = {}
     get({ url: apiUrl }).then((res) => {
-      // console.log('아이템디테일::::::::', res)
       updates.objectNo = objectNo
       updates.planNo = planNo
       updates.itemId = res.itemId
@@ -706,7 +706,6 @@ export default function Estimate({}) {
       updates.openFlg = res.openFlg
 
       if (estimateContextState.estimateType === 'YJSS') {
-        // console.log('YJSS:::,', res.pkgMaterialFlg)
         if (res.pkgMaterialFlg === '0') {
           updates.showSalePrice = '0'
           updates.showSaleTotPrice = '0'
@@ -721,14 +720,19 @@ export default function Estimate({}) {
       //104671
       let bomList = res.itemBomList
 
-      // console.log('updates::', updates)
       updateList = estimateContextState.itemList.map((item) => {
         if (item.dispOrder === dispOrder) {
           if (item?.addFlg) {
             return { ...item, ...updates, saleTotPrice: '' }
           } else {
             if (estimateContextState.estimateType === 'YJSS') {
+              // return { ...item, ...updates, salePrice: '', saleTotPrice: '' }
+              //확인
+              if (updates.pkgMaterialFlg === '1') {
+                return { ...item, ...updates, showSalePrice: updates.salePrice }
+              } else {
                 return { ...item, ...updates, salePrice: '', saleTotPrice: '' }
+              }
             } else {
               return { ...item, ...updates }
             }
@@ -739,7 +743,6 @@ export default function Estimate({}) {
           return item
         }
       })
-
       //paDispOrder
       if (bomList) {
         bomList.map((bomItem, index) => {
@@ -879,7 +882,6 @@ export default function Estimate({}) {
       }
 
       const calculateYJSSTotals = (itemList) => {
-        // console.log(':::itemList::', itemList)
         itemList.sort((a, b) => a.dispOrder - b.dispOrder)
         makeUniqueSpecialNoteCd(itemList)
         itemList.forEach((item) => {
@@ -918,7 +920,6 @@ export default function Estimate({}) {
             }
           }
         })
-        // console.log('itemList::', itemList)
         let pkgAsp = estimateContextState.pkgAsp ? Number(estimateContextState.pkgAsp.replaceAll(',', '')) : 0
 
         totals.pkgTotPrice = pkgAsp * totals.totVolKw * 1000
@@ -949,6 +950,19 @@ export default function Estimate({}) {
 
       setItemChangeYn(false)
     } else {
+      let totals = {
+        totAmount: 0,
+        totVolKw: 0,
+        supplyPrice: 0,
+        vatPrice: 0,
+        totPrice: 0,
+        addSupplyPrice: 0,
+        pkgTotPrice: 0,
+      }
+      estimateContextState.itemList.sort((a, b) => a.dispOrder - b.dispOrder)
+      makeUniqueSpecialNoteCd(estimateContextState.itemList)
+
+      if (estimateContextState.estimateType === 'YJSS') {
         estimateContextState.itemList.forEach((item) => {
           if (estimateContextState.estimateType === 'YJSS' && !item.paDispOrder && item.pkgMaterialFlg === '0') {
             item.showSalePrice = '0'
@@ -963,6 +977,59 @@ export default function Estimate({}) {
             item.showSaleTotPrice = '0'
           }
         })
+
+        estimateContextState.itemList.forEach((item) => {
+          if (item.delFlg === '0') {
+            let amount = Number(item.amount?.replace(/[^0-9]/g, '').replaceAll(',', '')) || 0
+            let salePrice
+            if (item.moduleFlg === '1') {
+              const volKw = (item.pnowW * amount) / 1000
+              totals.totVolKw += volKw
+            }
+            if (amount === 0) {
+              salePrice = 0
+            } else {
+              salePrice = Number(item.salePrice?.replaceAll(',', '')) || 0
+            }
+
+            totals.totAmount += amount
+            if (item.pkgMaterialFlg === '1') {
+              const saleTotPrice = amount * salePrice
+              totals.addSupplyPrice += saleTotPrice
+            }
+
+            if (!item.paDispOrder) {
+              if (item.pkgMaterialFlg === '0') {
+                item.showSalePrice = '0'
+                item.showSaleTotPrice = '0'
+              }
+            } else {
+              item.showSalePrice = '0'
+              item.showSaleTotPrice = '0'
+            }
+
+            if (item.openFlg === '1') {
+              item.showSalePrice = '0'
+              item.showSaleTotPrice = '0'
+            }
+          }
+        })
+        let pkgAsp = estimateContextState.pkgAsp ? Number(estimateContextState.pkgAsp.replaceAll(',', '')) : 0
+
+        totals.pkgTotPrice = pkgAsp * totals.totVolKw * 1000
+        totals.supplyPrice = totals.addSupplyPrice + totals.pkgTotPrice
+        totals.vatPrice = totals.supplyPrice * 0.1
+        totals.totPrice = totals.supplyPrice + totals.vatPrice
+
+        setEstimateContextState({
+          pkgTotPrice: totals.pkgTotPrice,
+          totAmount: totals.totAmount,
+          totVolKw: totals.totVolKw.toFixed(2),
+          supplyPrice: totals.supplyPrice.toFixed(0), //소수첫자리에서 반올림
+          vatPrice: totals.vatPrice.toFixed(0), //소수첫자리에서 반올림
+          totPrice: totals.totPrice.toFixed(0), //소수첫자리에서 반올림
+        })
+      } else {
         estimateContextState.itemList.forEach((item) => {
           if (estimateContextState.estimateType === 'YJOD' && item.openFlg === '1') {
             item.showSalePrice = '0'
@@ -973,6 +1040,48 @@ export default function Estimate({}) {
             item.showSaleTotPrice = '0'
           }
         })
+
+        estimateContextState.itemList.forEach((item) => {
+          delete item.showSalePrice
+          delete item.showSaleTotPrice
+          if (item.delFlg === '0') {
+            let amount = Number(item.amount?.replace(/[^0-9]/g, '').replaceAll(',', '')) || 0
+            let price
+            if (amount === 0) {
+              price = 0
+            } else {
+              price = Number(item.saleTotPrice?.replaceAll(',', '')) || 0
+            }
+
+            if (item.moduleFlg === '1') {
+              const volKw = (item.pnowW * amount) / 1000
+              totals.totVolKw += volKw
+            }
+            totals.supplyPrice += price
+            totals.totAmount += amount
+
+            if (item.paDispOrder) {
+              item.showSalePrice = '0'
+              item.showSaleTotPrice = '0'
+            }
+            if (item.openFlg === '1') {
+              item.showSalePrice = '0'
+              item.showSaleTotPrice = '0'
+            }
+          }
+        })
+
+        totals.vatPrice = totals.supplyPrice * 0.1
+        totals.totPrice = totals.supplyPrice + totals.vatPrice
+
+        setEstimateContextState({
+          totAmount: totals.totAmount,
+          totVolKw: totals.totVolKw.toFixed(2),
+          supplyPrice: totals.supplyPrice.toFixed(0), //소수첫자리에서 반올림
+          vatPrice: totals.vatPrice.toFixed(0), //소수첫자리에서 반올림
+          totPrice: totals.totPrice.toFixed(0), //소수첫자리에서 반올림
+        })
+      }
     }
   }, [itemChangeYn, estimateContextState.itemList])
 
@@ -1006,7 +1115,7 @@ export default function Estimate({}) {
                 <div className="estimate-tit">{getMessage('estimate.detail.objectNo')}</div>
                 <div className="estimate-name">
                   {/* {objectNo} (Plan No: {estimateContextState.planNo}) */}
-                  {objectNo} (Plan No: {planNo})
+                  {currentObjectNo} (Plan No: {planNo})
                 </div>
               </div>
               <div className="estimate-box">
@@ -1076,7 +1185,6 @@ export default function Estimate({}) {
                     </th>
                     <td>
                       <div className="input-wrap" style={{ width: '350px' }}>
-                        {/* <input type="text" className="input-light" defaultValue={estimateContextState?.charger} onBlur={handleBlurCharger} /> */}
                         <input
                           type="text"
                           className="input-light"
@@ -1095,7 +1203,6 @@ export default function Estimate({}) {
                     <td colSpan={3}>
                       <div className="form-flex-wrap">
                         <div className="input-wrap mr5" style={{ width: '610px' }}>
-                          {/* <input type="text" className="input-light" defaultValue={estimateContextState?.objectName} onBlur={handleBlurObjectName} /> */}
                           <input
                             type="text"
                             className="input-light"

src/components/floor-plan/CanvasMenu.jsx

@@ -44,6 +44,7 @@ import JA from '@/locales/ja.json'
 import { MENU } from '@/common/common'
 
 import { QcastContext } from '@/app/QcastProvider'
+
 export default function CanvasMenu(props) {
   const { menuNumber, setMenuNumber } = props
   const pathname = usePathname()
@@ -101,6 +102,8 @@ export default function CanvasMenu(props) {
 
   const { setIsGlobalLoading } = useContext(QcastContext)
 
+  //임시
+  const { selectedPlan } = usePlan()
   const handleExcelPdfFileDown = async (donwloadType, drawingFlg) => {
     const url = '/api/estimate/excel-download'
 
@@ -168,14 +171,14 @@ export default function CanvasMenu(props) {
         break
       case 5:
         // let pid = urlParams.get('pid')
-        promiseGet({ url: `/api/estimate/${objectNo}/${pid}/detail` }).then((res) => {
+        promiseGet({ url: `/api/estimate/${objectNo}/${selectedPlan.ordering}/detail` }).then((res) => {
           if (res.status === 200) {
             const estimateDetail = res.data
-            if (estimateDetail.docNo) {
+            if (estimateDetail.tempFlg === '0' && estimateDetail.estimateDate !== null) {
               setMenuNumber(menu.index)
               setCurrentMenu(menu.title)
               setFloorPlanObjectNo({ floorPlanObjectNo: objectNo })
-              router.push(`/floor-plan/estimate/5?pid=${pid}&objectNo=${objectNo}`)
+              router.push(`/floor-plan/estimate/${menu.index}?pid=${selectedPlan.ordering}&objectNo=${objectNo}`)
             } else {
               swalFire({ text: getMessage('estimate.menu.move.valid1') })
             }
@@ -183,13 +186,13 @@ export default function CanvasMenu(props) {
         })
         break
       case 6:
-        promiseGet({ url: `/api/estimate/${objectNo}/${pid}/detail` }).then((res) => {
+        promiseGet({ url: `/api/estimate/${objectNo}/${selectedPlan.ordering}/detail` }).then((res) => {
           if (res.status === 200) {
             const estimateDetail = res.data
-            if (estimateDetail.docNo) {
+            if (estimateDetail.tempFlg === '0') {
               setMenuNumber(menu.index)
               setCurrentMenu(menu.title)
-              router.push(`/floor-plan/simulator/${menu.index}?pid=${pid}&objectNo=${objectNo}`)
+              router.push(`/floor-plan/simulator/${menu.index}?pid=${selectedPlan.ordering}&objectNo=${objectNo}`)
             } else {
               swalFire({ text: getMessage('simulator.menu.move.valid1') })
             }
@@ -203,7 +206,11 @@ export default function CanvasMenu(props) {
       setCurrentMenu(menu.title)
     }
 
-    if (pathname !== '/floor-plan') router.push(`/floor-plan?pid=${pid}&objectNo=${objectNo}`)
+    if (pathname !== '/floor-plan') {
+      if (menu.index !== 0) {
+        router.push(`/floor-plan?pid=${pid}&objectNo=${objectNo}`)
+      }
+    }
   }
 
   const changeSelectedRoofMaterial = (e) => {

src/components/floor-plan/modal/Slope.jsx

@@ -15,7 +15,7 @@ export default function Slope({ id, pos = { x: 50, y: 230 } }) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xxxm`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('plan.menu.placement.surface.slope.setting')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -45,6 +45,7 @@ export default function Slope({ id, pos = { x: 50, y: 230 } }) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx

@@ -126,7 +126,7 @@ export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap r`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.auxiliary.drawing')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -160,6 +160,7 @@ export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx

@@ -46,7 +46,7 @@ export default function AuxiliaryEdit(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage(type === 'copy' ? 'modal.auxiliary.copy' : 'modal.auxiliary.move')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -111,6 +111,7 @@ export default function AuxiliaryEdit(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx

@@ -14,7 +14,7 @@ export default function AuxiliarySize(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.auxiliary.size.edit')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -63,6 +63,7 @@ export default function AuxiliarySize(props) {
             <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

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

@@ -51,7 +51,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap lx-2`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('plan.menu.module.circuit.setting.default')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -115,6 +115,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
             )}
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

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

@@ -40,12 +40,18 @@ export default function Module({ setTabNum }) {
   const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState) //다음으로 넘어가는 최종 데이터
   const [moduleSelectionDataPlanList, setModuleSelectionDataPlanList] = useRecoilState(moduleSelectionDataPlanListState)
 
-  const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
+  const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
 
   const [tempModuleSelectionData, setTempModuleSelectionData] = useReducer((prevState, nextState) => {
     return { ...prevState, ...nextState }
   }, moduleSelectionData)
 
+  useEffect(() => {
+    if (moduleSelectionDataPlanList) {
+      setModuleSelectionData(moduleSelectionDataPlanList[currentCanvasPlan.id])
+    }
+  }, [])
+
   useEffect(() => {
     handleChangeInstallHeight(debouncedInstallHeight)
   }, [debouncedInstallHeight])
@@ -72,16 +78,6 @@ export default function Module({ setTabNum }) {
     rows: [],
   }
 
-  useEffect(() => {
-    console.log('currentCanvasPlan', currentCanvasPlan)
-  }, [])
-
-  useEffect(() => {}, [roofTab])
-
-  useEffect(() => {
-    setModuleSelectionDataPlanList({ ...moduleSelectionDataPlanList, [currentCanvasPlan.id]: moduleSelectionData })
-  }, [moduleSelectionData])
-
   const handleRoofTab = (tab) => {
     setRoofTab(tab)
   }
@@ -242,11 +238,12 @@ export default function Module({ setTabNum }) {
                   index={index}
                   addRoof={roof}
                   roofTab={index}
-                  moduleConstructionSelectionData={moduleSelectionData.roofConstructions[index]}
+                  moduleConstructionSelectionData={moduleSelectionData?.roofConstructions[index]}
-                  setModuleSelectionData={setModuleSelectionData}
                   tempModuleSelectionData={tempModuleSelectionData}
                   setTempModuleSelectionData={setTempModuleSelectionData}
                   selectedModule={selectedModules}
+                  moduleSelectionDataPlanList={moduleSelectionDataPlanList}
+                  setModuleSelectionDataPlanList={setModuleSelectionDataPlanList}
                 />
               </div>
             ))}

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

@@ -1,6 +1,6 @@
 import { useEffect, useState, useRef } from 'react'
 import { useRecoilValue } from 'recoil'
-import { pitchTextSelector } from '@/store/canvasAtom'
+import { currentCanvasPlanState, pitchTextSelector } from '@/store/canvasAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { useMasterController } from '@/hooks/common/useMasterController'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
@@ -12,14 +12,16 @@ export default function ModuleTabContents({
   addRoof,
   roofTab,
   moduleConstructionSelectionData,
-  setModuleSelectionData,
   tempModuleSelectionData,
   setTempModuleSelectionData,
   selectedModule,
+  moduleSelectionDataPlanList,
+  setModuleSelectionDataPlanList,
 }) {
   const { getMessage } = useMessage()
   const [roofMaterial, setRoofMaterial] = useState(addRoof) //지붕재`
   const globalPitchText = useRecoilValue(pitchTextSelector) //피치 텍스트
+  const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
 
   const { findCommonCode } = useCommonCode()
   const [raftCodes, setRaftCodes] = useState([]) //가대 목록
@@ -162,6 +164,8 @@ export default function ModuleTabContents({
   }
 
   useEffect(() => {
+    console.log('tempModuleSelectionData', tempModuleSelectionData)
+
     if (isObjectNotEmpty(selectedRoofBase) && isObjectNotEmpty(selectedConstruction)) {
       const newRoofConstructions = {
         roofIndex: roofTab,
@@ -169,6 +173,7 @@ export default function ModuleTabContents({
         trestle: selectedRoofBase,
         construction: selectedConstruction,
       }
+
       const index = tempModuleSelectionData.roofConstructions.findIndex((obj) => obj.roofIndex === roofTab)
 
       if (index > -1) {
@@ -241,6 +246,7 @@ export default function ModuleTabContents({
       if (isModuleLoaded) {
         setTrestleParams({ moduleTpCd: moduleSelectionInitParams.moduleTpCd, roofMatlCd: addRoof.roofMatlCd, raftBaseCd: addRoof.raftBaseCd })
         setConstructionList([])
+        setTempModuleSelectionData({ common: moduleSelectionInitParams, module: selectedModule })
 
         if (isObjectNotEmpty(moduleConstructionSelectionData)) {
           //기존에 데이터가 있으면
@@ -249,11 +255,11 @@ export default function ModuleTabContents({
           setCvrChecked(moduleConstructionSelectionData.construction.setupCover)
           setSnowGdChecked(moduleConstructionSelectionData.construction.setupSnowCover)
           setIsExistData(true)
-        }
-      }
-    }
 
-    setTempModuleSelectionData({ common: moduleSelectionInitParams, module: selectedModule })
+          setTempModuleSelectionData({ roofConstructions: [{ ...moduleConstructionSelectionData }] })
+        }
+      }
+    }
   }, [moduleSelectionInitParams])
 
   useEffect(() => {
@@ -282,7 +288,8 @@ export default function ModuleTabContents({
 
   useEffect(() => {
     if (isObjectNotEmpty(tempModuleSelectionData)) {
-      setModuleSelectionData(tempModuleSelectionData)
+      setModuleSelectionDataPlanList({ ...moduleSelectionDataPlanList, [currentCanvasPlan.id]: tempModuleSelectionData })
+      // setModuleSelectionData(tempModuleSelectionData)
     }
   }, [tempModuleSelectionData])
 

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

@@ -1,15 +1,16 @@
 import { forwardRef, useEffect, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
-import { checkedModuleState } from '@/store/canvasAtom'
+import { checkedModuleState, currentCanvasPlanState } from '@/store/canvasAtom'
-import { useRecoilValue, useRecoilState, useSetRecoilState } from 'recoil'
+import { useRecoilValue, useSetRecoilState } from 'recoil'
-import { selectedModuleState, moduleSelectionDataState } from '@/store/selectedModuleOptions'
+import { moduleSelectionDataPlanListState } from '@/store/selectedModuleOptions'
 import { useModulePlace } from '@/hooks/module/useModulePlace'
 
 const Placement = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
   const [isChidori, setIsChidori] = useState(false)
   const [isChidoriNotAble, setIsChidoriNotAble] = useState(false)
+  const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
 
   const [setupLocation, setSetupLocation] = useState('center')
   const [isMaxSetup, setIsMaxSetup] = useState('false')
@@ -19,17 +20,19 @@ const Placement = forwardRef((props, refs) => {
   const { selectedModules } = useModulePlace()
 
   const setCheckedModules = useSetRecoilState(checkedModuleState)
-  const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
+  const moduleSelectionDataPlanList = useRecoilValue(moduleSelectionDataPlanListState)
 
   //모듈 배치면 생성
   useEffect(() => {
     makeModuleInstArea()
 
+    if (moduleSelectionDataPlanList) {
       //1개라도 치도리 불가가 있으면 치도리 불가
-    const isChidroriValue = moduleSelectionData.roofConstructions.some((item) => item.construction.plvrYn === 'N')
+      const isChidroriValue = moduleSelectionDataPlanList[currentCanvasPlan.id].roofConstructions.some((item) => item.construction.plvrYn === 'N')
       if (isChidroriValue) {
         setIsChidoriNotAble(true)
       }
+    }
   }, [])
 
   //체크된 모듈 데이터

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

@@ -133,7 +133,7 @@ export default function CircuitTrestleSetting({ id }) {
   return (
     <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
       <div className={`modal-pop-wrap l-2`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.circuit.trestle.setting')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -181,6 +181,7 @@ export default function CircuitTrestleSetting({ id }) {
             </div>
           )}
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx

@@ -85,7 +85,7 @@ export default function DimensionLineSetting(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('contextmenu.display.edit')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -141,6 +141,7 @@ export default function DimensionLineSetting(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/distance/Distance.jsx

@@ -18,7 +18,7 @@ export default function Distance(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xxxm`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.distance')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -68,6 +68,7 @@ export default function Distance(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx

@@ -40,7 +40,7 @@ export default function EavesGableEdit({ id, pos = { x: 50, y: 230 } }) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap r`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.eaves.gable.edit')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -62,6 +62,7 @@ export default function EavesGableEdit({ id, pos = { x: 50, y: 230 } }) {
             {type === TYPES.SHED && <Shed {...shedProps} />}
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx

@@ -65,7 +65,7 @@ export default function FlowDirectionSetting(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap ml mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.shape.flow.direction.setting')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -176,6 +176,7 @@ export default function FlowDirectionSetting(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/grid/DotLineGrid.jsx

@@ -179,7 +179,7 @@ export default function DotLineGrid(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap ssm mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.canvas.setting.grid.dot.line.setting')}</h1>
           <button
             className="modal-close"
@@ -293,6 +293,7 @@ export default function DotLineGrid(props) {
           </div>
         </div>
       </div>
+      <div className="modal-foot modal-handle"></div>
     </WithDraggable>
   )
 }

src/components/floor-plan/modal/grid/GridCopy.jsx

@@ -22,7 +22,7 @@ export default function GridCopy(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.grid.copy')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -77,6 +77,7 @@ export default function GridCopy(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/grid/GridMove.jsx

@@ -75,7 +75,7 @@ export default function GridMove(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.grid.move')} </h1>
           <button className="modal-close" onClick={handleClose}>
             닫기
@@ -156,6 +156,7 @@ export default function GridMove(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx

@@ -52,7 +52,7 @@ export default function LinePropertySetting(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap r mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('contextmenu.line.property.edit')} </h1>
           <button className="modal-close" onClick={() => handleClosePopup()}>
             닫기
@@ -91,6 +91,7 @@ export default function LinePropertySetting(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

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

@@ -16,7 +16,7 @@ export default function CircuitNumberEdit(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title"> {getMessage('modal.module.circuit.number.edit')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -42,6 +42,7 @@ export default function CircuitNumberEdit(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

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

@@ -84,7 +84,7 @@ export default function PanelEdit(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm mount`}>
-        <div className="modal-head">
+        <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')}{' '}
           </h1>
@@ -139,6 +139,7 @@ export default function PanelEdit(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

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

@@ -26,7 +26,7 @@ export default function ColumnInsert(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap r mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.panel.column.insert')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -105,6 +105,7 @@ export default function ColumnInsert(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

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

@@ -29,7 +29,7 @@ export default function ColumnRemove(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap r mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.panel.column.remove')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -115,6 +115,7 @@ export default function ColumnRemove(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/module/row/RowInsert.jsx

@@ -26,7 +26,7 @@ export default function RowInsert(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap r mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.row.insert')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -105,6 +105,7 @@ export default function RowInsert(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/module/row/RowRemove.jsx

@@ -29,7 +29,7 @@ export default function RowRemove(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap r mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.row.remove')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -115,6 +115,7 @@ export default function RowRemove(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/movement/MovementSetting.jsx

@@ -18,7 +18,7 @@ export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap r`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('plan.menu.roof.cover.movement.shape.updown')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -43,6 +43,7 @@ export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/object/DormerOffset.jsx

@@ -42,7 +42,7 @@ export default function DormerOffset(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{title}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -103,6 +103,7 @@ export default function DormerOffset(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/object/ObjectSetting.jsx

@@ -77,7 +77,7 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap lrr`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('plan.menu.placement.surface.object')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -109,6 +109,7 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/object/RoofMaterialSetting.jsx

@@ -23,7 +23,7 @@ export default function RoofMaterialSetting(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xxxm mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.roof.material.edit')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -39,6 +39,7 @@ export default function RoofMaterialSetting(props) {
             <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/object/SizeSetting.jsx

@@ -47,7 +47,7 @@ export default function SizeSetting(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap ssm mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.size.setting')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -95,6 +95,7 @@ export default function SizeSetting(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx

@@ -10,7 +10,7 @@ export default function PropertiesSetting(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap ssm`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.canvas.setting.wallline.properties.setting')}</h1>
           <button className="modal-close" onClick={() => closeModal(id)}>
             닫기
@@ -38,6 +38,7 @@ export default function PropertiesSetting(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx

@@ -116,7 +116,7 @@ export default function WallLineSetting(props) {
   return (
     <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
       <div className={`modal-pop-wrap r mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.cover.outline.drawing')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}></button>
         </div>
@@ -184,6 +184,7 @@ export default function WallLineSetting(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

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

@@ -123,7 +123,7 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap r`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('plan.menu.placement.surface.drawing')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -159,6 +159,7 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

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

@@ -56,20 +56,24 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
   ]
 
   // 데이터를 최초 한 번만 조회
-  useEffect(() => {
+  // useEffect(() => {
-    if (!basicSetting || !currentRoof || Object.keys(currentRoof).length === 0 || Object.keys(basicSetting).length === 0) return
+  //   if (!basicSetting || !currentRoof || Object.keys(currentRoof).length === 0 || Object.keys(basicSetting).length === 0) return
-    const raftCodeList = findCommonCode('203800')
+  //   const raftCodeList = findCommonCode('203800')
-    setRaftCodes(raftCodeList)
+  //   setRaftCodes(raftCodeList)
+  //   console.log('🚀 ~ useEffect ~ >>>>>>>>>>>>> raftCodeList 11 :', raftCodeList)
 
-    if (addedRoofs[0].roofAngleSet && addedRoofs[0].roofAngleSet?.length > 0) {
+  //   if (addedRoofs[0].roofAngleSet && addedRoofs[0].roofAngleSet?.length > 0) {
-      setCurrentRoof({ ...currentRoof, roofSizeSet: String(addedRoofs[0].roofSizeSet), roofAngleSet: addedRoofs[0].roofAngleSet })
+  //     setCurrentRoof({ ...currentRoof, roofSizeSet: String(addedRoofs[0].roofSizeSet), roofAngleSet: addedRoofs[0].roofAngleSet })
-    } else if (basicSetting.roofAngleSet && basicSetting.roofAngleSet?.length > 0) {
+  //   } else if (basicSetting.roofAngleSet && basicSetting.roofAngleSet?.length > 0) {
-      setCurrentRoof({ ...currentRoof, roofSizeSet: String(basicSetting.roofSizeSet), roofAngleSet: basicSetting.roofAngleSet })
+  //     setCurrentRoof({ ...currentRoof, roofSizeSet: String(basicSetting.roofSizeSet), roofAngleSet: basicSetting.roofAngleSet })
-    }
+  //   }
-  }, [])
+  // }, [])
 
   useEffect(() => {
     if (addedRoofs.length > 0) {
+      const raftCodeList = findCommonCode('203800')
+      setRaftCodes(raftCodeList)
+
       setCurrentRoof({ ...addedRoofs[0] })
     }
   }, [addedRoofs])
@@ -155,20 +159,20 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
         ...roofInfo,
       },
       //roofs: addedRoofs,
-      roofsData: {
+      // roofsData: {
-        roofApply: true,
+      //   roofApply: true,
-        roofSeq: 0,
+      //   roofSeq: 0,
-        roofMatlCd: currentRoof.roofMatlCd,
+      //   roofMatlCd: currentRoof.roofMatlCd,
-        roofWidth: currentRoof.width,
+      //   roofWidth: currentRoof.width,
-        roofHeight: currentRoof.length,
+      //   roofHeight: currentRoof.length,
-        roofHajebichi: currentRoof.hajebichi,
+      //   roofHajebichi: currentRoof.hajebichi,
-        roofGap: currentRoof.raft,
+      //   roofGap: currentRoof.raft,
-        roofLayout: currentRoof.layout,
+      //   roofLayout: currentRoof.layout,
-        roofSizeSet: currentRoof.roofSizeSet,
+      //   roofSizeSet: currentRoof.roofSizeSet,
-        roofAngleSet: currentRoof.roofAngleSet,
+      //   roofAngleSet: currentRoof.roofAngleSet,
-        roofPitch: currentRoof.pitch,
+      //   roofPitch: currentRoof.pitch,
-        roofAngle: currentRoof.angle,
+      //   roofAngle: currentRoof.angle,
-      },
+      // },
     })
 
     basicSettingSave()
@@ -177,7 +181,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap ll mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('plan.menu.placement.surface.initial.setting')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -338,13 +342,14 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                       {currentRoof && ['C', 'R'].includes(currentRoof.raftAuth) && (
                         <div className="flex-ment">
                           <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
-                          {raftCodes.length > 0 && (
+                          {raftCodes?.length > 0 && (
                             <div className="select-wrap" style={{ width: '160px' }}>
                               <QSelectBox
                                 options={raftCodes}
                                 ref={roofRef.rafter}
                                 title={
-                                  raftCodes.find((r) => r.clCode === (currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft)).clCodeNm
+                                  raftCodes?.find((r) => r.clCode === (currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft))
+                                    .clCodeNm
                                 }
                                 value={currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft}
                                 onChange={(e) => handleRafterChange(e.clCode)}
@@ -418,6 +423,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
         </div>
         {showSizeGuideModal && <SizeGuide setShowSizeGuidModal={setShowSizeGuidModal} />}
         {showMaterialGuideModal && <MaterialGuide setShowMaterialGuidModal={setShowMaterialGuidModal} />}
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx

@@ -242,7 +242,7 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap lr-2`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('plan.menu.placement.surface.arrangement')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -290,6 +290,7 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
             </div>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/roofAllocation/ActualSizeSetting.jsx

@@ -63,7 +63,7 @@ export default function ActualSizeSetting(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap ssm mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.actual.size.setting')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -116,6 +116,7 @@ export default function ActualSizeSetting(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx

@@ -45,7 +45,7 @@ export default function ContextRoofAllocationSetting(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap lr mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -79,7 +79,8 @@ export default function ContextRoofAllocationSetting(props) {
             </button>
           </div>
           <div className="grid-option-wrap">
-            {currentRoofList.map((roof, index) => {
+            {currentRoofList.length > 0 &&
+              currentRoofList.map((roof, index) => {
                 return (
                   <div className="grid-option-box" key={index}>
                     <div className="d-check-radio pop no-text">
@@ -213,6 +214,7 @@ export default function ContextRoofAllocationSetting(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx

@@ -49,7 +49,7 @@ export default function RoofAllocationSetting(props) {
       <div className={`modal-pop-wrap lr mount`}>
         {currentRoofList && (
           <>
-            <div className="modal-head">
+            <div className="modal-head modal-handle">
               <h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
               <button className="modal-close" onClick={() => closePopup(id)}>
                 닫기
@@ -235,6 +235,7 @@ export default function RoofAllocationSetting(props) {
             </div>
           </>
         )}
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx

@@ -31,7 +31,7 @@ export default function RoofShapePassivitySetting({ id, pos = { x: 50, y: 230 }
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xxm`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('plan.menu.roof.cover.roof.shape.passivity.setting')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -67,6 +67,7 @@ export default function RoofShapePassivitySetting({ id, pos = { x: 50, y: 230 }
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx

@@ -90,7 +90,7 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap lr mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.roof.shape.setting')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -120,6 +120,7 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/setting01/SettingModal01.jsx

@@ -75,7 +75,7 @@ export default function SettingModal01(props) {
     <>
       <WithDraggable isShow={true} pos={{ x: 1275, y: 180 }}>
         <div className={`modal-pop-wrap sm mount`}>
-          <div className="modal-head">
+          <div className="modal-head modal-handle">
             <h1 className="title">{getMessage('modal.canvas.setting')}</h1>
             <button className="modal-close" onClick={() => closePopup(id, true)}>
               닫기
@@ -100,6 +100,7 @@ export default function SettingModal01(props) {
             {buttonAct === 2 && <SecondOption {...secondProps} />}
             {buttonAct === 3 && <GridOption {...gridProps} />}
           </div>
+          <div className="modal-foot modal-handle"></div>
         </div>
       </WithDraggable>
     </>

src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx

@@ -192,7 +192,7 @@ export default function DimensionLineSetting(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xxxm mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')} </h1>
           <button
             className="modal-close"
@@ -258,6 +258,7 @@ export default function DimensionLineSetting(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx

@@ -57,7 +57,7 @@ export default function PlanSizeSetting(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xsm mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.plan.size.setting')}</h1>
           <button
             className="modal-close"
@@ -104,6 +104,7 @@ export default function PlanSizeSetting(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx

@@ -41,7 +41,7 @@ export default function WallLineOffsetSetting({ id, pos = { x: 50, y: 230 } }) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap r`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.wallline.offset.setting')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -66,6 +66,7 @@ export default function WallLineOffsetSetting({ id, pos = { x: 50, y: 230 } }) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )

src/components/management/Stuff.jsx

@@ -219,6 +219,10 @@ export default function Stuff() {
         pageSize: stuffSearchParams?.pageSize ? stuffSearchParams.pageSize : 100,
       }
 
+      if (!params.saleStoreId) {
+        params.saleStoreId = session.storeId
+      }
+
       async function fetchData() {
         const apiUrl = `/api/object/list?${queryStringFormatter(params)}`
         await get({
@@ -271,6 +275,10 @@ export default function Stuff() {
       stuffSearchParams.schSortType = defaultSortType
       stuffSearchParams.pageNo = stuffSearchParams.pageNo
 
+      if (!stuffSearchParams.saleStoreId) {
+        stuffSearchParams.saleStoreId = session.storeId
+      }
+
       async function fetchData() {
         const apiUrl = `/api/object/list?${queryStringFormatter(stuffSearchParams)}`
         await get({ url: apiUrl }).then((res) => {
@@ -301,6 +309,9 @@ export default function Stuff() {
       stuffSearchParams.schSortType = defaultSortType
       setPageNo(1)
 
+      if (!params.saleStoreId) {
+        stuffSearchParams.saleStoreId = session.storeId
+      }
       async function fetchData() {
         const apiUrl = `/api/object/list?${queryStringFormatter(stuffSearchParams)}`
         await get({ url: apiUrl }).then((res) => {

src/components/management/StuffDetail.jsx

@@ -304,6 +304,7 @@ export default function StuffDetail() {
                     //mid:5(견적서), /pid:플랜번호
                     setFloorPlanObjectNo({ floorPlanObjectNo: params.data.objectNo })
                     setIsGlobalLoading(true)
+                    setMenuNumber(5)
                     router.push(`/floor-plan/estimate/5?pid=${params.data.planNo}&objectNo=${params.data.objectNo}`)
                   }}
                 >
@@ -1357,7 +1358,7 @@ export default function StuffDetail() {
     //로그인이 2차점인데 otherSaleStoreId가 없으면 알럿
     if (session.storeLvl !== '1') {
       if (params.saleStoreLevel === '1') {
-        return swalFire({ text: getMessage('stuff.detail.tempSave.message4'), type: 'alert' })
+        return swalFire({ text: getMessage('stuff.detail.tempSave.message3'), type: 'alert' })
       }
     }
 
@@ -1447,6 +1448,13 @@ export default function StuffDetail() {
       params.saleStoreLevel = session.storeLvl
     }
 
+    if (session.storeLvl !== '1') {
+      //로그인이 1차점이 아닌데 2차점을 안골라서 saleStoreLevel = 1로 셋팅되어있으면 알럿
+      if (params.saleStoreLevel === '1') {
+        return swalFire({ text: getMessage('stuff.detail.tempSave.message3'), type: 'alert' })
+      }
+    }
+
     // 담당자 자리수 체크
     if (params?.receiveUser !== '') {
       if (params?.receiveUser.trim().length > 10) {

src/components/management/StuffSubHeader.jsx

@@ -40,8 +40,8 @@ export default function StuffSubHeader({ type }) {
     if (isObjectNotEmpty(managementState)) {
       if (managementState.createUser === 'T01') {
         if (session.userId !== 'T01') {
-          //도면 작성은 이동 할 수 있도록 변경 #457
+          //도면 작성은 이동 할 수 있도록 변경 #457 다시 못하도록 변경#474
-          // setButtonStyle('none')
+          setButtonStyle('none')
         }
       }
     }

src/components/management/popup/PlanRequestPop.jsx

@@ -8,19 +8,12 @@ import SingleDatePicker from '@/components/common/datepicker/SingleDatePicker'
 import dayjs from 'dayjs'
 import PlanRequestPopQGrid from './PlanRequestPopQGrid'
 import { isObjectNotEmpty, queryStringFormatter } from '@/util/common-utils'
-import { useCommonCode } from '@/hooks/common/useCommonCode'
-import Select from 'react-select'
 import QPagination from '@/components/common/pagination/QPagination'
 export default function PlanRequestPop(props) {
   const [pageNo, setPageNo] = useState(1) //현재 페이지 번호
   const [pageSize, setPageSize] = useState(20) //페이지 당 게시물 개수
   const [totalCount, setTotalCount] = useState(0) //총 갯수
 
-  //공통코드
-  const { commonCode, findCommonCode } = useCommonCode()
-
-  // const [planStatCdList, setPlanStatCdList] = useState([])
-
   const globalLocaleState = useRecoilValue(globalLocaleStore)
 
   const [planReqObject, setPlanReqObject] = useState({})
@@ -71,16 +64,6 @@ export default function PlanRequestPop(props) {
     }
   }
 
-  // 상태 검색조건 변경
-  const onSelectionChange = (key) => {
-    if (isObjectNotEmpty(key)) {
-      setSchPlanStatCd(key.clCode)
-    } else {
-      //X누름
-      setSchPlanStatCd('')
-    }
-  }
-
   // 조회
   const onSubmit = (page, type) => {
     const params = {
@@ -194,7 +177,8 @@ export default function PlanRequestPop(props) {
       {
         field: 'title',
         headerName: getMessage('stuff.planReqPopup.gridHeader.title'),
-        minWidth: 150,
+        minWidth: 250,
+        cellStyle: { textAlign: 'left' },
       },
       {
         field: 'address1',
@@ -234,13 +218,6 @@ export default function PlanRequestPop(props) {
     }
   }
 
-  // useEffect(() => {
-  //   const code1 = findCommonCode(115800) //상태
-  //   if (code1 != null) {
-  //     setPlanStatCdList(code1)
-  //   }
-  // }, [commonCode])
-
   useEffect(() => {
     onSubmit(pageNo, 'S')
   }, [])
@@ -431,12 +408,14 @@ export default function PlanRequestPop(props) {
                     </select>
                   </div>
                 </div>
+                <div className="q-grid">
                   <PlanRequestPopQGrid {...gridProps} getSelectedRowdata={getSelectedRowdata} />
                   <div className="pagination-wrap">
                     <QPagination pageNo={pageNo} pageSize={pageSize} pagePerBlock={10} totalCount={totalCount} handleChangePage={handleChangePage} />
                   </div>
                 </div>
               </div>
+            </div>
             <div className="footer-btn-wrap">
               <button className="btn-origin navy mr5" onClick={applyPlanReq}>
                 {getMessage('stuff.planReqPopup.btn4')}

src/components/management/popup/PlanRequestPopQGrid.jsx

@@ -22,8 +22,8 @@ export default function PlanRequestPopQGrid(props) {
       flex: 1,
       minWidth: 100,
       sortable: false,
-      suppressMovable: false,
+      suppressMovable: true,
-      resizable: false,
+      resizable: true,
       suppressSizeToFit: false,
     }
   }, [])
@@ -58,6 +58,7 @@ export default function PlanRequestPopQGrid(props) {
         defaultColDef={defaultColDef}
         pagination={isPageable}
         onSelectionChanged={onSelectionChanged}
+        autoSizeAllColumns={true}
         overlayNoRowsTemplate={`<span className="ag-overlay-loading-center">${getMessage('stuff.grid.noData')}</span>`}
       />
     </div>

src/components/simulator/Simulator.jsx

@@ -16,26 +16,18 @@ import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
 
 import { convertNumberToPriceDecimal } from '@/util/common-utils'
 import { usePlan } from '@/hooks/usePlan'
-import { usePopup } from '@/hooks/usePopup'
+import { usePopup, closeAll } from '@/hooks/usePopup'
-// import { useSearchParams } from 'next/navigation'
 
 export default function Simulator() {
   const { floorPlanState } = useContext(FloorPlanContext)
   const { objectNo, pid } = floorPlanState
-
-  // const searchParams = useSearchParams()
-  // const objectNo = searchParams.get('objectNo')
-  // const pid = searchParams.get('pid')
   const { selectedPlan } = usePlan()
 
   const chartRef = useRef(null)
 
   // 캔버스 메뉴 넘버 셋팅
   const { setMenuNumber } = useCanvasMenu()
-
+  const { closeAll } = usePopup()
-  useEffect(() => {
-    setMenuNumber(6)
-  }, [])
 
   const { get } = useAxios()
   const { getMessage } = useMessage()
@@ -43,12 +35,6 @@ export default function Simulator() {
   // 차트 관련
   const [chartData, setChartData] = useState([])
 
-  const { closeAll } = usePopup()
-
-  useEffect(() => {
-    closeAll()
-  }, [])
-
   const data = {
     labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
     datasets: [
@@ -114,7 +100,6 @@ export default function Simulator() {
   }
 
   useEffect(() => {
-    console.log('🚀 ~ useEffect ~ selectedPlan:', selectedPlan)
     /* 초기화 작업 */
     setChartData([])
     setObjectDetail({})
@@ -125,11 +110,13 @@ export default function Simulator() {
     setHatsudenryouPeakcutAll([])
     setHatsudenryouPeakcutAllSnow([])
 
-    if (objectNo) {
+    if (objectNo && pid && selectedPlan) {
-      fetchObjectDetail(objectNo)
+      fetchObjectDetail(objectNo, selectedPlan.ordering)
       fetchSimulatorNotice()
       setPwrGnrSimType('D')
       setPwrRecoil({ ...pwrRecoil, type: 'D' })
+      setMenuNumber(6)
+      closeAll()
     }
   }, [objectNo, pid, selectedPlan])
 
@@ -148,8 +135,8 @@ export default function Simulator() {
   const [hatsudenryouPeakcutAll, setHatsudenryouPeakcutAll] = useState([])
   const [hatsudenryouPeakcutAllSnow, setHatsudenryouPeakcutAllSnow] = useState([])
 
-  const fetchObjectDetail = async (objectNo) => {
+  const fetchObjectDetail = async (objectNo, currentPid) => {
-    const apiUrl = `/api/pwrGnrSimulation/calculations?objectNo=${objectNo}&planNo=${pid}`
+    const apiUrl = `/api/pwrGnrSimulation/calculations?objectNo=${objectNo}&planNo=${currentPid}`
 
     const resultData = await get({ url: apiUrl })
     if (resultData) {
@@ -257,7 +244,7 @@ export default function Simulator() {
               {/* 적설조건 */}
               <div className="estimate-box">
                 <div className="estimate-tit">{getMessage('simulator.title.sub7')}</div>
-                <div className="estimate-name">{objectDetail.snowfall} cm</div>
+                <div className="estimate-name">{objectDetail.snowfall ? `${objectDetail.snowfall}cm` : ''} </div>
               </div>
               {/* 풍속조건 */}
               <div className="estimate-box">
@@ -356,7 +343,10 @@ export default function Simulator() {
                                 {/* 지붕면 */}
                                 <td>{moduleInfo.roofSurface}</td>
                                 {/* 경사각 */}
-                                <td>{convertNumberToPriceDecimal(moduleInfo.slopeAngle)}{moduleInfo.classType == 0 ? "寸":"º"}</td>
+                                <td>
+                                  {convertNumberToPriceDecimal(moduleInfo.slopeAngle)}
+                                  {moduleInfo.classType == 0 ? '寸' : 'º'}
+                                </td>
                                 {/* 방위각(도) */}
                                 <td>{convertNumberToPriceDecimal(moduleInfo.azimuth)}</td>
                                 {/* 태양전지모듈 */}

src/hooks/common/useMasterController.js

@@ -56,9 +56,9 @@ export function useMasterController() {
    */
   const getTrestleList = async (params) => {
     const paramString = getQueryString(params)
-    console.log('🚀🚀 ~ getTrestleList ~ paramString:', paramString)
+    // console.log('🚀🚀 ~ getTrestleList ~ paramString:', paramString)
     return await get({ url: '/api/v1/master/getTrestleList' + paramString }).then((res) => {
-      console.log('🚀🚀 ~ getTrestleList ~ res:', res)
+      // console.log('🚀🚀 ~ getTrestleList ~ res:', res)
       return res
     })
   }
@@ -82,9 +82,9 @@ export function useMasterController() {
    */
   const getConstructionList = async (params) => {
     const paramString = getQueryString(params)
-    console.log('🚀🚀 ~ getConstructionList ~ paramString:', paramString)
+    // console.log('🚀🚀 ~ getConstructionList ~ paramString:', paramString)
     return await get({ url: '/api/v1/master/getConstructionList' + paramString }).then((res) => {
-      console.log('🚀🚀 ~ getConstructionList ~ res:', res)
+      // console.log('🚀🚀 ~ getConstructionList ~ res:', res)
       return res
     })
   }

src/hooks/common/useRoofFn.js

@@ -22,8 +22,8 @@ export function useRoofFn() {
     const ratio = window.devicePixelRatio || 1
     const layout = roofMaterial.layout
 
-    let width = (roofMaterial.width ?? 226) / 10
+    let width = (roofMaterial.width || 226) / 10
-    let height = (roofMaterial.length ?? 158) / 10
+    let height = (roofMaterial.length || 158) / 10
     const index = roofMaterial.index ?? 0
     let roofStyle = 2
     const inputPatternSize = { width: width, height: height } //임시 사이즈

src/hooks/floorPlan/estimate/useEstimateController.js

@@ -80,6 +80,7 @@ export const useEstimateController = (planNo) => {
 
               res.data.pkgAsp = roundedNumber.toString()
             }
+
             setEstimateContextState(res.data)
           }
         }
@@ -384,7 +385,7 @@ export const useEstimateController = (planNo) => {
         if (res.status === 201) {
           estimateData.newFileList = []
           swalFire({ text: getMessage('estimate.detail.save.alertMsg'), type: 'alert' })
-          fetchSetting(objectRecoil.floorPlanObjectNo, estimateData.planNo)
+          fetchSetting(estimateData.objectNo, estimateData.planNo)
         }
       })
     } catch (e) {
@@ -409,7 +410,7 @@ export const useEstimateController = (planNo) => {
     const params = {
       saleStoreId: session.storeId,
       sapSalesStoreCd: session.custCd,
-      objectNo: objectRecoil.floorPlanObjectNo,
+      objectNo: estimateData.objectNo,
       planNo: sendPlanNo,
       copySaleStoreId: otherSaleStoreId ? otherSaleStoreId : saleStoreId,
       copyReceiveUser: copyReceiveUser,

src/hooks/module/useModule.js

@@ -389,6 +389,7 @@ export function useModule() {
       .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)[0]
     let isWarning = false
     canvas.discardActiveObject()
+    moduleSetupSurface.set({ modules: otherModules })
     canvas.remove(...columnModules)
     canvas.renderAll()
 
@@ -503,6 +504,7 @@ export function useModule() {
     let isWarning = false
 
     canvas.discardActiveObject()
+    moduleSetupSurface.set({ modules: otherModules })
     canvas.remove(...rowModules)
     canvas.renderAll()
 
@@ -852,8 +854,12 @@ export function useModule() {
 
   const modulesRemove = () => {
     const activeModule = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
-    const modules = canvas.getObjects().filter((obj) => obj.surfaceId === activeModule.surfaceId && obj.name === POLYGON_TYPE.MODULE)
+    const modules = canvas
-    canvas.remove(...modules)
+      .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]
+    surface.set({ modules: modules })
+    canvas.remove(activeModule)
     canvas.renderAll()
   }
 

src/hooks/module/useModuleBasicSetting.js

@@ -698,6 +698,7 @@ export function useModuleBasicSetting() {
 
       checkedModule.forEach((module, index) => {
         const { width, height } = getModuleWidthHeight(maxLengthLine, moduleSetupSurface, module)
+
         const flowLines = getFlowLines(moduleSetupSurface, module)
         //육지붕이 아닐때만 넣는다 육지붕일땐 클릭 이벤트에 별도로 넣어놓음
         let startPoint = flowLines.bottom

src/hooks/module/useModulePlace.js

@@ -1,20 +1,22 @@
 import { useEffect, useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
+import { moduleSelectionDataPlanListState, selectedModuleState } from '@/store/selectedModuleOptions'
 import { useMasterController } from '@/hooks/common/useMasterController'
-import { canvasState } from '@/store/canvasAtom'
+import { canvasState, currentCanvasPlanState } from '@/store/canvasAtom'
 
 export function useModulePlace() {
   const canvas = useRecoilValue(canvasState)
-  const moduleSelectionData = useRecoilValue(moduleSelectionDataState) //다음으로 넘어가는 최종 데이터
+  const moduleSelectionDataPlanList = useRecoilValue(moduleSelectionDataPlanListState) //다음으로 넘어가는 최종 데이터
+  const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
   const [trestleDetailParams, setTrestleDetailParams] = useState([])
   const [trestleDetailList, setTrestleDetailList] = useState([])
   const selectedModules = useRecoilValue(selectedModuleState)
   const { getTrestleDetailList } = useMasterController()
 
   useEffect(() => {
-    const common = moduleSelectionData.common
+    if (moduleSelectionDataPlanList) {
-    const roofConstructions = moduleSelectionData.roofConstructions
+      const common = moduleSelectionDataPlanList[currentCanvasPlan.id].common
+      const roofConstructions = moduleSelectionDataPlanList[currentCanvasPlan.id].roofConstructions
 
       const listParams = roofConstructions.map((item) => {
         return {
@@ -31,9 +33,9 @@ export function useModulePlace() {
           roofIndex: item.addRoof.index,
         }
       })
-
       setTrestleDetailParams(listParams)
-  }, [moduleSelectionData])
+    }
+  }, [moduleSelectionDataPlanList])
 
   const getTrestleDetailListData = async () => {
     const trestleDetailList = await getTrestleDetailList(trestleDetailParams)

src/hooks/option/useCanvasSetting.js

@@ -48,7 +48,7 @@ const defaultDotLineGridSetting = {
   LINE: false,
 }
 
-let previousRoofMaterialsYn = 'N' // 지붕재 select 정보 비교 후 변경된 것이 없으면 1회만 실행
+//let previousRoofMaterialsYn = 'N' // 지붕재 select 정보 비교 후 변경된 것이 없으면 1회만 실행
 
 export function useCanvasSetting() {
   const canvas = useRecoilValue(canvasState)
@@ -159,21 +159,23 @@ export function useCanvasSetting() {
     setBasicSettings({ ...basicSetting, selectedRoofMaterial: selectedRoofMaterial })
   }
 
+  const previousObjectNoRef = useRef(null)
   const previousRoofMaterialsRef = useRef(null)
 
   useEffect(() => {
     // 지붕재 select 정보가 존재해야 배치면초기설정 DB 정보 비교 후 지붕재 정보를 가져올 수 있음
-    if (roofMaterials.length !== 0 && JSON.stringify(previousRoofMaterialsRef.current) !== JSON.stringify(roofMaterials)) {
+    if (!previousObjectNoRef.current && !correntObjectNo && previousObjectNoRef.current !== correntObjectNo 
-      // 지붕재 select 정보 비교 후 변경된 것이 없으면 1회만 실행
+     || roofMaterials.length !== 0 && JSON.stringify(previousRoofMaterialsRef.current) !== JSON.stringify(roofMaterials)) {
-      if (roofMaterials && previousRoofMaterialsYn === 'N') {
+      
+      if (roofMaterials) {
         fetchBasicSettings()
-        previousRoofMaterialsYn = 'Y'
       }
 
       // 이전 값을 업데이트
+      previousObjectNoRef.current = correntObjectNo
       previousRoofMaterialsRef.current = roofMaterials
     }
-  }, [roofMaterials])
+  }, [roofMaterials, correntObjectNo])
 
   useEffect(() => {
     if (!canvas) {
@@ -297,7 +299,7 @@ export function useCanvasSetting() {
           })
           roofsArray = res.map((item) => {
             return {
-              roofApply: true,
+              roofApply: item.roofApply,
               roofSeq: 0,
               roofMatlCd: item.roofMatlCd,
               roofWidth: item.roofWidth,
@@ -328,6 +330,7 @@ export function useCanvasSetting() {
               roofGap: 'HEI_455',
               roofLayout: 'P',
               roofPitch: 4,
+              roofAngle: 21.8,
             },
           ]
         }

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -42,7 +42,7 @@ export function useRoofAllocationSetting(id) {
   const [currentRoofMaterial, setCurrentRoofMaterial] = useState(roofMaterials[0]) // 팝업 내 기준 지붕재
   const [roofList, setRoofList] = useRecoilState(addedRoofsState) // 배치면 초기설정에서 선택한 지붕재 배열
   const [editingLines, setEditingLines] = useState([])
-  const [currentRoofList, setCurrentRoofList] = useState(null)
+  const [currentRoofList, setCurrentRoofList] = useState([])
   const currentAngleType = useRecoilValue(currentAngleTypeSelector)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const [basicInfo, setBasicInfo] = useState(null)

src/hooks/useAxios.js

@@ -97,13 +97,11 @@ export function useAxios(lang = '') {
 
   const getFetcher = async (url) => {
     const res = await get({ url })
-    console.log('🚀 ~ getFetcher ~ res:', res)
     return res
   }
 
-  const postFetcher = async (url, { arg }) => {
+  const postFetcher = async (url, arg) => {
     const res = await post({ url, data: arg })
-    console.log('🚀 ~ postFetcher ~ res:', res)
     return res
   }
 

src/hooks/useContextMenu.js

@@ -67,7 +67,7 @@ export function useContextMenu() {
   const commonTextFont = useRecoilValue(fontSelector('commonText'))
   const { settingsData, setSettingsDataSave } = useCanvasSetting()
   const { swalFire } = useSwal()
-  const { alignModule } = useModule()
+  const { alignModule, modulesRemove } = useModule()
   const { removeRoofMaterial, removeAllRoofMaterial } = useRoofFn()
 
   const currentMenuSetting = () => {
@@ -656,7 +656,7 @@ export function useContextMenu() {
               {
                 id: 'remove',
                 name: getMessage('contextmenu.remove'),
-                fn: () => deleteObject(),
+                fn: () => modulesRemove(),
               },
               {
                 id: 'move',

src/hooks/usePlan.js

@@ -207,12 +207,14 @@ export function usePlan(params = {}) {
     const orderingNo = plans?.find((obj) => obj.id === newCurrentId).ordering
     const objectNo = floorPlanState.objectNo
     //견적서 or 발전시뮬
+
     if (pathname !== '/floor-plan') {
       await promiseGet({ url: `/api/estimate/${objectNo}/${orderingNo}/detail` })
         .then((res) => {
           if (res.status === 200) {
             const estimateDetail = res.data
-            if (estimateDetail.docNo) {
+            if (pathname === '/floor-plan/estimate/5') {
+              if (estimateDetail.tempFlg === '0' && estimateDetail.estimateDate !== null) {
                 res.data.resetFlag = 'N'
 
                 if (res.data.itemList.length > 0) {
@@ -229,27 +231,32 @@ export function usePlan(params = {}) {
                   res.data.pkgAsp = roundedNumber.toString()
                 }
                 setEstimateContextState(res.data)
-
+                // 클릭한 플랜 탭으로 이동
-              if (pathname === '/floor-plan') {
-                if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) {
-                  saveCanvas()
-                }
-              }
                 updateCurrentPlan(newCurrentId)
               } else {
                 swalFire({ text: getMessage('estimate.menu.move.valid1') })
               }
+            } else {
+              // 발전시뮬레이션
+              if (estimateDetail.tempFlg === '0') {
+                updateCurrentPlan(newCurrentId)
+              } else {
+                swalFire({ text: getMessage('simulator.menu.move.valid1') })
+              }
+            }
           }
         })
         .catch((error) => {
+          if (pathname === '/floor-plan/estimate/5') {
             swalFire({ text: getMessage('estimate.menu.move.valid1') })
+          } else {
+            swalFire({ text: getMessage('simulator.menu.move.valid1') })
+          }
         })
     } else {
-      // if (pathname === '/floor-plan') {
       if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) {
         saveCanvas()
       }
-      // }
       updateCurrentPlan(newCurrentId)
     }
   }

src/hooks/usePolygon.js

@@ -427,6 +427,12 @@ export const usePolygon = () => {
       text = '西西南'
     }
 
+    const sameDirectionCnt = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF && obj.directionText === text)
+
+    text = text + (sameDirectionCnt.length + 1)
+
+    polygon.set('directionText', text)
+
     const textObj = new fabric.Text(`${text} (${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : getDegreeByChon(arrow.pitch)}${pitchText})`, {
       fontFamily: flowFontOptions.fontFamily.value,
       fontWeight: flowFontOptions.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',

src/locales/ja.json

@@ -675,6 +675,7 @@
   "stuff.detail.tooltip.surfaceType": "塩害地域の定義は各メーカーの設置マニュアルをご確認ください",
   "stuff.detail.tempSave.message1": "一時保存されました。商品番号を取得するには、必須項目をすべて入力してください。",
   "stuff.detail.tempSave.message2": "担当者は10桁以下で入力してください.",
+  "stuff.detail.tempSave.message3": "二次販売店を選択してください.",
   "stuff.detail.confirm.message1": "販売店情報を変更すると、設計依頼文書番号が削除されます。変更しますか？",
   "stuff.detail.delete.message1": "仕様が確定したものは削除できません。",
   "stuff.detail.planList.title": "プランリスト",

src/locales/ko.json

@@ -684,6 +684,7 @@
   "stuff.detail.tooltip.surfaceType": "염해지역 정의는 각 메이커의 설치 메뉴얼을 확인해주십시오",
   "stuff.detail.tempSave.message1": "임시저장 되었습니다. 물건번호를 획득하려면 필수 항목을 모두 입력해 주십시오.",
   "stuff.detail.tempSave.message2": "담당자는 10자리 이하로 입력해 주십시오.",
+  "stuff.detail.tempSave.message3": "2차 판매점을 선택해주세요.",
   "stuff.detail.confirm.message1": "판매점 정보를 변경하면, 설계의뢰 문서번호가 삭제됩니다. 변경하시겠습니까?",
   "stuff.detail.delete.message1": "사양이 확정된 물건은 삭제할 수 없습니다.",
   "stuff.detail.planList.title": "플랜리스트",

src/styles/_modal.scss

@@ -5,12 +5,24 @@ $pop-normal-size: 12px;
 $alert-color: #101010;
 
 @keyframes mountpop {
-    from{opacity: 0; scale: 0.95;}
+  from {
-    to{opacity: 1; scale: 1;}
+    opacity: 0;
+    scale: 0.95;
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
 }
 @keyframes unmountpop {
-    from{opacity: 1; scale: 1;}
+  from {
-    to{opacity: 0; scale: 0.95;}
+    opacity: 1;
+    scale: 1;
+  }
+  to {
+    opacity: 0;
+    scale: 0.95;
+  }
 }
 
 .normal-font {
@@ -85,10 +97,10 @@ $alert-color: #101010;
     width: 900px;
   }
   &.mount {
-        animation: mountpop .17s ease-in-out forwards;
+    animation: mountpop 0.17s ease-in-out forwards;
   }
   &.unmount {
-        animation: unmountpop .17s ease-in-out forwards;
+    animation: unmountpop 0.17s ease-in-out forwards;
   }
   &.alert {
     position: absolute;
@@ -127,6 +139,7 @@ $alert-color: #101010;
   padding: 10px 24px;
   background-color: #000;
   // overflow: hidden;
+  cursor: pointer;
   h1.title {
     font-size: 13px;
     color: $pop-color;
@@ -193,7 +206,7 @@ $alert-color: #101010;
     }
   }
   .outer-line-wrap {
-        border-top: 1px solid #3C3C3C;
+    border-top: 1px solid #3c3c3c;
     margin-top: 10px;
     padding-top: 15px;
     margin-bottom: 15px;
@@ -211,11 +224,18 @@ $alert-color: #101010;
     font-weight: $pop-normal-weight;
   }
 }
+.modal-foot {
+  display: block;
+  width: 100%;
+  padding: 5px 0;
+  background-color: #000;
+  cursor: pointer;
+}
 
 .adsorption-point {
   display: flex;
   align-items: center;
-    background-color: #3A3A3A;
+  background-color: #3a3a3a;
   border-radius: 3px;
   padding-left: 11px;
   overflow: hidden;
@@ -236,7 +256,7 @@ $alert-color: #101010;
   &.act {
     i {
       color: $pop-color;
-            background-color: #1083E3;
+      background-color: #1083e3;
     }
   }
 }
@@ -259,7 +279,7 @@ $alert-color: #101010;
     background-color: transparent;
   }
   &::-webkit-scrollbar-thumb {
-        background-color: #D9D9D9;
+    background-color: #d9d9d9;
   }
   &::-webkit-scrollbar-track {
     background-color: transparent;
@@ -270,7 +290,7 @@ $alert-color: #101010;
     display: flex;
     align-items: center;
     background-color: transparent;
-        border: 1px solid #3D3D3D;
+    border: 1px solid #3d3d3d;
     border-radius: 2px;
     padding: 15px 10px;
     gap: 20px;
@@ -300,7 +320,9 @@ $alert-color: #101010;
   }
 }
 .select-form {
-    .sort-select{width: 100%;}
+  .sort-select {
+    width: 100%;
+  }
 }
 .grid-select {
   flex: 1;
@@ -345,7 +367,6 @@ $alert-color: #101010;
   color: $pop-color;
   font-weight: $pop-normal-weight;
   padding-bottom: 15px;
-
 }
 .grid-direction {
   display: flex;
@@ -362,11 +383,17 @@ $alert-color: #101010;
   background-position: center;
   background-size: 16px 15px;
   border-radius: 50%;
-    transition: all .15s ease-in-out;
+  transition: all 0.15s ease-in-out;
   opacity: 0.6;
-    &.down{transform: rotate(180deg);}
+  &.down {
-    &.left{transform: rotate(-90deg);}
+    transform: rotate(180deg);
-    &.right{transform: rotate(90deg);}
+  }
+  &.left {
+    transform: rotate(-90deg);
+  }
+  &.right {
+    transform: rotate(90deg);
+  }
   &:hover,
   &.act {
     opacity: 1;
@@ -452,10 +479,11 @@ $alert-color: #101010;
   }
   &.light {
     padding: 0;
-        th,td{
+    th,
+    td {
       color: $alert-color;
       border-bottom: none;
-            border-top: 1px solid #EFEFEF;
+      border-top: 1px solid #efefef;
     }
     th {
       padding: 14px 0;
@@ -509,7 +537,6 @@ $alert-color: #101010;
     color: $pop-color;
     font-weight: $pop-normal-weight;
   }
-
 }
 
 .img-edit-wrap {
@@ -525,7 +552,7 @@ $alert-color: #101010;
     background-color: #fff;
     border-radius: 2px;
     cursor: pointer;
-        transition: all .15s ease-in-out;
+    transition: all 0.15s ease-in-out;
     .img-edit {
       width: 16px;
       height: 16px;
@@ -545,7 +572,6 @@ $alert-color: #101010;
   margin-left: 10px;
   input {
     flex: 1;
-
   }
   .img-check {
     flex: none;
@@ -571,8 +597,12 @@ $alert-color: #101010;
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
-        &.fail{background-image: url(../../public/static/images/canvas/img_check_fail.svg);}
+    &.fail {
-        &.success{background-image: url(../../public/static/images/canvas/img_check_success.svg);}
+      background-image: url(../../public/static/images/canvas/img_check_fail.svg);
+    }
+    &.success {
+      background-image: url(../../public/static/images/canvas/img_check_success.svg);
+    }
   }
 }
 
@@ -652,7 +682,7 @@ $alert-color: #101010;
     align-items: center;
     justify-content: center;
     width: 50%;
-        background-color: #3D3D3D;
+    background-color: #3d3d3d;
     border-radius: 2px;
   }
 }
@@ -660,7 +690,7 @@ $alert-color: #101010;
 // 외벽선 속성 설정
 .properties-guide {
   font-size: $pop-normal-size;
-    color: #AAA;
+  color: #aaa;
   font-weight: $pop-normal-weight;
   margin-bottom: 14px;
 }
@@ -689,17 +719,17 @@ $alert-color: #101010;
       color: #fff;
       font-weight: 700;
       border-radius: 2px;
-            transition: all .15s ease-in-out;
+      transition: all 0.15s ease-in-out;
       &.green {
         background-color: #305941;
-                border: 1px solid #45CD7D;
+        border: 1px solid #45cd7d;
         &:hover {
           background-color: #3a6b4e;
         }
       }
       &.blue {
-                background-color: #2E5360;
+        background-color: #2e5360;
-                border: 1px solid #3FBAE6;
+        border: 1px solid #3fbae6;
         &:hover {
           background-color: #365f6e;
         }
@@ -721,8 +751,8 @@ $alert-color: #101010;
     justify-content: center;
     width: 100%;
     padding: 13px;
-        background-color: #3D3D3D;
+    background-color: #3d3d3d;
-        transition: background .15s ease-in-out;
+    transition: background 0.15s ease-in-out;
     img {
       max-width: 100%;
     }
@@ -733,13 +763,17 @@ $alert-color: #101010;
     color: $pop-color;
     margin-top: 10px;
     text-align: center;
-        transition: color .15s ease-in-out;
+    transition: color 0.15s ease-in-out;
   }
   .shape-menu-box {
     &.act,
     &:hover {
-            .shape-box{background-color: #008BFF;}
+      .shape-box {
-            .shape-title{color: #008BFF;}
+        background-color: #008bff;
+      }
+      .shape-title {
+        color: #008bff;
+      }
     }
   }
 }
@@ -754,7 +788,7 @@ $alert-color: #101010;
 }
 .discrimination-box {
   padding: 16px 12px;
-    border: 1px solid #3D3D3D;
+  border: 1px solid #3d3d3d;
   border-radius: 2px;
 }
 
@@ -787,12 +821,12 @@ $alert-color: #101010;
       align-items: center;
       justify-content: center;
       padding: 5px;
-            background-color: #3D3D3D;
+      background-color: #3d3d3d;
-            border: 1px solid #3D3D3D;
+      border: 1px solid #3d3d3d;
       border-radius: 2px;
       cursor: pointer;
       &.act {
-                border: 1px solid #ED0004;
+        border: 1px solid #ed0004;
       }
     }
     &:last-child {
@@ -891,7 +925,7 @@ $alert-color: #101010;
     border: 1px solid #646464;
     border-radius: 2px;
     padding: 0 10px;
-        transition: all .15s ease-in-out;
+    transition: all 0.15s ease-in-out;
     i {
       height: 15px;
       display: block;
@@ -899,7 +933,7 @@ $alert-color: #101010;
       background-repeat: no-repeat;
       background-position: center;
       background-size: cover;
-            transition: all .15s ease-in-out;
+      transition: all 0.15s ease-in-out;
       &.allocation01 {
         background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
         width: 15px;
@@ -952,7 +986,9 @@ $alert-color: #101010;
     height: 34px;
     background-color: #373737;
     border: 1px solid #676767;
-        transition: background .15s ease-in-out, border .15s ease-in-out;
+    transition:
+      background 0.15s ease-in-out,
+      border 0.15s ease-in-out;
     .shape-box {
       display: flex;
       justify-content: center;
@@ -964,8 +1000,8 @@ $alert-color: #101010;
     }
     &.act,
     &:hover {
-            border-color: #008BFF;
+      border-color: #008bff;
-            background-color: #008BFF;
+      background-color: #008bff;
     }
   }
 }
@@ -980,18 +1016,27 @@ $alert-color: #101010;
   .library-btn {
     width: 100%;
     height: 34px;
-        border: 1px solid #6C6C6C;
+    border: 1px solid #6c6c6c;
     border-radius: 2px;
     background-color: #373737;
     background-repeat: no-repeat;
     background-position: center;
-        transition: all .15s ease-in-out;
+    transition: all 0.15s ease-in-out;
-        &.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 19px 18px;}
+    &.ico01 {
-        &.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 15px 20px;}
+      background-image: url(../../public/static/images/canvas/shape_labrary01.svg);
-        &.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 19px 16px;}
+      background-size: 19px 18px;
+    }
+    &.ico02 {
+      background-image: url(../../public/static/images/canvas/shape_labrary02.svg);
+      background-size: 15px 20px;
+    }
+    &.ico03 {
+      background-image: url(../../public/static/images/canvas/shape_labrary03.svg);
+      background-size: 19px 16px;
+    }
     &:hover {
-            border-color: #1083E3;
+      border-color: #1083e3;
-            background-color: #1083E3;
+      background-color: #1083e3;
     }
   }
 }
@@ -1077,11 +1122,27 @@ $alert-color: #101010;
     position: absolute;
     font-size: 12px;
     font-weight: 500;
-        color: #B1B1B1;
+    color: #b1b1b1;
-        &.top{top: 0; left: 50%; transform: translateX(-50%);}
+    &.top {
-        &.right{top: 50%; right: 0; transform: translateY(-50%);}
+      top: 0;
-        &.bottom{bottom: 0; left: 50%; transform: translateX(-50%);}
+      left: 50%;
-        &.left{top: 50%; left: 0; transform: translateY(-50%);}
+      transform: translateX(-50%);
+    }
+    &.right {
+      top: 50%;
+      right: 0;
+      transform: translateY(-50%);
+    }
+    &.bottom {
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    &.left {
+      top: 50%;
+      left: 0;
+      transform: translateY(-50%);
+    }
   }
   .plane-btn {
     position: absolute;
@@ -1093,11 +1154,27 @@ $alert-color: #101010;
     background-repeat: no-repeat;
     background-position: center;
     border-radius: 50%;
-        transition: all .15s ease-in-out;
+    transition: all 0.15s ease-in-out;
-        &.up{top: 22px; left: 50%; transform: translateX(-50%);}
+    &.up {
-        &.right{top: 50%; right: 32px; transform: translateY(-50%) rotate(90deg);}
+      top: 22px;
-        &.down{bottom: 22px; left: 50%; transform: translateX(-50%) rotate(180deg);}
+      left: 50%;
-        &.left{top: 50%; left: 32px; transform: translateY(-50%) rotate(270deg);}
+      transform: translateX(-50%);
+    }
+    &.right {
+      top: 50%;
+      right: 32px;
+      transform: translateY(-50%) rotate(90deg);
+    }
+    &.down {
+      bottom: 22px;
+      left: 50%;
+      transform: translateX(-50%) rotate(180deg);
+    }
+    &.left {
+      top: 50%;
+      left: 32px;
+      transform: translateY(-50%) rotate(270deg);
+    }
     &:hover,
     &.act {
       background-color: #fff;
@@ -1163,7 +1240,7 @@ $alert-color: #101010;
 .warning {
   font-size: $pop-normal-size;
   font-weight: $pop-normal-weight;
-    color: #FFAFAF;
+  color: #ffafaf;
 }
 
 // 각 변 속성 변경
@@ -1219,37 +1296,157 @@ $alert-color: #101010;
       top: 12.5px;
       left: 50%;
       font-size: 11px;
-            color: #8B8B8B;
+      color: #8b8b8b;
       font-weight: 500;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-use-select: none;
       user-select: none;
     }
-        &:nth-child(1) { transform: rotate(180deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(180deg);}}
+    &:nth-child(1) {
-        &:nth-child(2) { transform: rotate(195deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(165deg);}}
+      transform: rotate(180deg) translate(-50%, -50%);
-        &:nth-child(3) { transform: rotate(210deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(150deg);}}
+      i {
-        &:nth-child(4) { transform: rotate(225deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(135deg);}}
+        transform: translateX(-50%) rotate(180deg);
-        &:nth-child(5) { transform: rotate(240deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(120deg);}}
+      }
-        &:nth-child(6) { transform: rotate(255deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(105deg);}}
+    }
-        &:nth-child(7) { transform: rotate(270deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(90deg);}}
+    &:nth-child(2) {
-        &:nth-child(8) { transform: rotate(285deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(75deg);}}
+      transform: rotate(195deg) translate(-50%, -50%);
-        &:nth-child(9) { transform: rotate(300deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(60deg);}}
+      i {
-        &:nth-child(10) { transform: rotate(315deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(45deg);}}
+        transform: translateX(-50%) rotate(165deg);
-        &:nth-child(11) { transform: rotate(330deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(30deg);}}
+      }
-        &:nth-child(12) { transform: rotate(345deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(15deg);}}
+    }
-        &:nth-child(13) { transform: rotate(0deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(0deg);}}
+    &:nth-child(3) {
-        &:nth-child(14) { transform: rotate(15deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-15deg);}}
+      transform: rotate(210deg) translate(-50%, -50%);
-        &:nth-child(15) { transform: rotate(30deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-30deg);}}
+      i {
-        &:nth-child(16) { transform: rotate(45deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-45deg);}}
+        transform: translateX(-50%) rotate(150deg);
-        &:nth-child(17) { transform: rotate(60deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-60deg);}}
+      }
-        &:nth-child(18) { transform: rotate(75deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-75deg);}}
+    }
-        &:nth-child(19) { transform: rotate(90deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-90deg);}}
+    &:nth-child(4) {
-        &:nth-child(20) { transform: rotate(105deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-105deg);}}
+      transform: rotate(225deg) translate(-50%, -50%);
-        &:nth-child(21) { transform: rotate(120deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-120deg);}}
+      i {
-        &:nth-child(22) { transform: rotate(135deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-135deg);}}
+        transform: translateX(-50%) rotate(135deg);
-        &:nth-child(23) { transform: rotate(150deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-150deg);}}
+      }
-        &:nth-child(24) { transform: rotate(165deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-165deg);}}
+    }
+    &:nth-child(5) {
+      transform: rotate(240deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(120deg);
+      }
+    }
+    &:nth-child(6) {
+      transform: rotate(255deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(105deg);
+      }
+    }
+    &:nth-child(7) {
+      transform: rotate(270deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(90deg);
+      }
+    }
+    &:nth-child(8) {
+      transform: rotate(285deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(75deg);
+      }
+    }
+    &:nth-child(9) {
+      transform: rotate(300deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(60deg);
+      }
+    }
+    &:nth-child(10) {
+      transform: rotate(315deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(45deg);
+      }
+    }
+    &:nth-child(11) {
+      transform: rotate(330deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(30deg);
+      }
+    }
+    &:nth-child(12) {
+      transform: rotate(345deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(15deg);
+      }
+    }
+    &:nth-child(13) {
+      transform: rotate(0deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(0deg);
+      }
+    }
+    &:nth-child(14) {
+      transform: rotate(15deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-15deg);
+      }
+    }
+    &:nth-child(15) {
+      transform: rotate(30deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-30deg);
+      }
+    }
+    &:nth-child(16) {
+      transform: rotate(45deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-45deg);
+      }
+    }
+    &:nth-child(17) {
+      transform: rotate(60deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-60deg);
+      }
+    }
+    &:nth-child(18) {
+      transform: rotate(75deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-75deg);
+      }
+    }
+    &:nth-child(19) {
+      transform: rotate(90deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-90deg);
+      }
+    }
+    &:nth-child(20) {
+      transform: rotate(105deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-105deg);
+      }
+    }
+    &:nth-child(21) {
+      transform: rotate(120deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-120deg);
+      }
+    }
+    &:nth-child(22) {
+      transform: rotate(135deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-135deg);
+      }
+    }
+    &:nth-child(23) {
+      transform: rotate(150deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-150deg);
+      }
+    }
+    &:nth-child(24) {
+      transform: rotate(165deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-165deg);
+      }
+    }
     &.act {
       &::after {
         content: '';
@@ -1303,13 +1500,13 @@ $alert-color: #101010;
     border-radius: 2px;
     background-color: transparent;
     font-size: 12px;
-        color: #AAA;
+    color: #aaa;
     text-align: center;
     cursor: default;
-        transition: all .15s ease-in-out;
+    transition: all 0.15s ease-in-out;
     &.act {
-            background-color: #1083E3;
+      background-color: #1083e3;
-            border: 1px solid #1083E3;
+      border: 1px solid #1083e3;
       color: #fff;
       font-weight: 500;
     }
@@ -1322,7 +1519,7 @@ $alert-color: #101010;
     background-position: center;
     background-size: cover;
     background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
-        transition: all .15s ease-in-out;
+    transition: all 0.15s ease-in-out;
     &.act {
       background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
     }
@@ -1355,7 +1552,9 @@ $alert-color: #101010;
         top: 22px;
       }
       &.act {
-                i{color: #8B8B8B;}
+        i {
+          color: #8b8b8b;
+        }
       }
     }
   }
@@ -1387,7 +1586,7 @@ $alert-color: #101010;
     height: 30px;
     font-size: 12px;
     font-weight: 400;
-        transition: all .15s ease-in-out;
+    transition: all 0.15s ease-in-out;
     &:first-child {
       border-left: 1px solid #505050;
     }
@@ -1401,7 +1600,7 @@ $alert-color: #101010;
 
 .module-table-box {
   flex: 1;
-    background-color: #3D3D3D;
+  background-color: #3d3d3d;
   border-radius: 2px;
   .module-table-inner {
     padding: 10px;
@@ -1414,7 +1613,7 @@ $alert-color: #101010;
       padding: 10px 0;
       font-size: 12px;
       color: #fff;
-            border-bottom: 1px solid #4D4D4D;
+      border-bottom: 1px solid #4d4d4d;
     }
     .eaves-keraba-table {
       width: 100%;
@@ -1437,7 +1636,7 @@ $alert-color: #101010;
   .warning-guide {
     padding: 20px;
     .warning {
-            color: #FFCACA;
+      color: #ffcaca;
       max-height: 55px;
       overflow-y: auto;
       padding-right: 30px;
@@ -1446,7 +1645,7 @@ $alert-color: #101010;
         background-color: transparent;
       }
       &::-webkit-scrollbar-thumb {
-                background-color: #D9D9D9;
+        background-color: #d9d9d9;
       }
       &::-webkit-scrollbar-track {
         background-color: transparent;
@@ -1457,7 +1656,7 @@ $alert-color: #101010;
 
 .module-self-table {
   display: table;
-    border-top: 1px solid #4D4D4D;
+  border-top: 1px solid #4d4d4d;
   border-collapse: collapse;
   width: 100%;
   .self-table-item {
@@ -1466,7 +1665,7 @@ $alert-color: #101010;
     .self-item-th {
       display: table-cell;
       vertical-align: middle;
-            border-bottom: 1px solid #4D4D4D;
+      border-bottom: 1px solid #4d4d4d;
     }
     .self-item-th {
       width: 60px;
@@ -1494,7 +1693,7 @@ $alert-color: #101010;
 .hexagonal-wrap {
   .hexagonal-item {
     padding: 15px 0;
-        border-bottom: 1px solid #4D4D4D;
+    border-bottom: 1px solid #4d4d4d;
     &:first-child {
       padding-top: 0;
     }
@@ -1528,7 +1727,7 @@ $alert-color: #101010;
       background-color: transparent;
     }
     &::-webkit-scrollbar-thumb {
-            background-color: #D9D9D9;
+      background-color: #d9d9d9;
     }
     &::-webkit-scrollbar-track {
       background-color: transparent;
@@ -1577,7 +1776,7 @@ $alert-color: #101010;
   gap: 5px;
   min-height: 60px;
   padding: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.20);
+  border: 1px solid rgba(255, 255, 255, 0.2);
   span {
     display: inline-flex;
     align-items: center;
@@ -1609,7 +1808,7 @@ $alert-color: #101010;
     background-color: transparent;
   }
   &::-webkit-scrollbar-thumb {
-        background-color: #D9D9D9;
+    background-color: #d9d9d9;
   }
   &::-webkit-scrollbar-track {
     background-color: transparent;
@@ -1674,10 +1873,10 @@ $alert-color: #101010;
       height: 16px;
       &.pink {
         border: 2px solid #ce1c9c;
-                background-color: #16417D;
+        background-color: #16417d;
       }
       &.white {
-                border: 2px solid #FFF;
+        border: 2px solid #fff;
         background-color: #001027;
       }
     }
@@ -1702,7 +1901,7 @@ $alert-color: #101010;
       .react-colorful__pointer {
         width: 15px;
         height: 15px;
-                border: 4px solid #Fff;
+        border: 4px solid #fff;
       }
       .react-colorful__saturation {
         border-radius: 2px;
@@ -1792,7 +1991,6 @@ $alert-color: #101010;
     min-height: 80px;
     background-color: #fff;
   }
-    
 }
 
 // 치수선 설정
@@ -1912,10 +2110,22 @@ $alert-color: #101010;
         border-radius: 50%;
       }
     }
-        &:nth-child(1){ top: 0; left: 0; }
+    &:nth-child(1) {
-        &:nth-child(2){ top: 0; right: 0; }
+      top: 0;
-        &:nth-child(3){ bottom: 0; left: 0; }
+      left: 0;
-        &:nth-child(4){ bottom: 0; right: 0; }
+    }
+    &:nth-child(2) {
+      top: 0;
+      right: 0;
+    }
+    &:nth-child(3) {
+      bottom: 0;
+      left: 0;
+    }
+    &:nth-child(4) {
+      bottom: 0;
+      right: 0;
+    }
   }
   .size-box {
     position: absolute;
@@ -2008,13 +2218,13 @@ $alert-color: #101010;
   max-height: 500px;
   overflow-y: auto;
   padding-bottom: 15px;
-    border-bottom: 1px solid #4D4D4D;
+  border-bottom: 1px solid #4d4d4d;
   &::-webkit-scrollbar {
     width: 4px;
     background-color: transparent;
   }
   &::-webkit-scrollbar-thumb {
-        background-color: #D9D9D9;
+    background-color: #d9d9d9;
   }
   &::-webkit-scrollbar-track {
     background-color: transparent;
@@ -2024,7 +2234,6 @@ $alert-color: #101010;
   &.tab2 {
     margin-top: 10px;
     gap: 15px;
-        
   }
   .module-flex-item {
     flex: 1;
@@ -2033,7 +2242,7 @@ $alert-color: #101010;
       font-weight: 500;
       color: #fff;
       padding-bottom: 10px;
-            border-bottom: 1px solid #4D4D4D;
+      border-bottom: 1px solid #4d4d4d;
     }
     .flex-item-btn-wrap {
       display: grid;
@@ -2090,7 +2299,7 @@ $alert-color: #101010;
 }
 .reset-word {
   font-size: 12px;
-    color: #FFCACA;
+  color: #ffcaca;
   font-weight: 400;
   margin-top: 10px;
 }

src/util/common-utils.js

@@ -134,3 +134,18 @@ export const getQueryString = (o) => {
     .join('&')
   return `?${queryString}`
 }
+
+export const unescapeString = (str) => {
+  const regex = /&(amp|lt|gt|quot|#39);/g
+  const chars = {
+    '&': '&',
+    '&lt;': '<',
+    '&gt;': '>',
+    '&quot;': '"',
+    '&#39;': "'",
+  }
+
+  if (regex.test(str)) {
+    return str.replace(regex, (matched) => chars[matched] || matched)
+  }
+}