Merge branch 'dev' into dev-yj-layoutSetup

# Conflicts:
#	src/components/floor-plan/modal/basic/BasicSetting.jsx
#	src/hooks/module/useModuleBasicSetting.js

src/common/common.js

@@ -202,6 +202,7 @@ export const SAVE_KEY = [
   'fontStyle',
   'fontWeight',
   'dormerAttributes',
+  'toFixed',
 ]
 
 export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype, fabric.Group.prototype]

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

@@ -33,26 +33,17 @@ export default function ColorPickerModal(props) {
   }, [isShow])
 
   return (
-    <WithDraggable isShow={true} pos={pos ?? ''} handle=".modal-handle">
+    <WithDraggable isShow={true} pos={pos ?? ''} handle=".modal-handle" className="lr">
-      <div className={`modal-pop-wrap lr mount`}>
+      <WithDraggable.Header
-        <div className="modal-head modal-handle">
+        title={getMessage('modal.color.picker.title')}
-          <h1 className="title">{getMessage('modal.color.picker.title')}</h1>
+        onClose={() => {
-          <button
-            className="modal-close"
-            onClick={() => {
           if (setIsShow) {
             setIsShow(false)
           }
-              console.log(id)
           closePopup(id, isConfig)
         }}
-          >
+      />
-            닫기
+      <WithDraggable.Body>
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="color-setting-wrap">
           <div className="color-picker">
             <ColorPicker color={originColor} setColor={setOriginColor} />
@@ -78,9 +69,7 @@ export default function ColorPickerModal(props) {
             {getMessage('modal.common.save')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

src/components/common/context-menu/QContextMenu.jsx

@@ -113,7 +113,7 @@ export default function QContextMenu(props) {
   return (
     <>
       {contextMenu.visible && (
-        <div className="context-menu-wrap" style={{ position: 'fixed', top: contextMenu.y, left: contextMenu.x, zIndex: 2000 }}>
+        <div className="context-menu-wrap" style={{ position: 'fixed', top: contextMenu.y, left: contextMenu.x }}>
           {/*<ul>*/}
           {/*<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectMove()}>*/}
           {/*  이동*/}

src/components/common/draggable/WithDraggable.jsx

@@ -3,7 +3,7 @@
 import { useState } from 'react'
 import Draggable from 'react-draggable'
 
-export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 }, handle = '' }) {
+export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 }, handle = '', className = '', hasFooter = true, isHidden = false }) {
   const [position, setPosition] = useState(pos)
 
   const handleOnDrag = (e, data) => {
@@ -22,9 +22,43 @@ export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 },
           onDrag={(e, data) => handleOnDrag(e, data)}
           handle={handle === '' ? '.modal-handle' : handle}
         >
+          <div className={`modal-pop-wrap ${className}`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
             {children}
+            {hasFooter && <WithDraggableFooter />}
+          </div>
         </Draggable>
       )}
     </>
   )
 }
+
+function WithDraggableHeader({ title, onClose, children }) {
+  return (
+    <div className="modal-head modal-handle">
+      <h1 className="title">{title}</h1>
+      {onClose && (
+        <button className="modal-close" onClick={() => onClose()}>
+          닫기
+        </button>
+      )}
+    </div>
+  )
+}
+
+function WithDraggableBody({ children }) {
+  return (
+    <div className="modal-body">
+      <div className="left-bar modal-handle"></div>
+      <div className="right-bar modal-handle"></div>
+      <>{children}</>
+    </div>
+  )
+}
+
+function WithDraggableFooter() {
+  return <div className="modal-foot modal-handle"></div>
+}
+
+WithDraggable.Header = WithDraggableHeader
+WithDraggable.Body = WithDraggableBody
+WithDraggable.Footer = WithDraggableFooter

src/components/common/font/FontSetting.jsx

@@ -67,23 +67,15 @@ export default function FontSetting(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos} handle=".modal-handle">
+    <WithDraggable isShow={true} pos={pos} handle=".modal-handle" className="lrr">
-      <div className={`modal-pop-wrap lrr mount`}>
+      <WithDraggable.Header
-        <div className="modal-head modal-handle">
+        title={getMessage('modal.font')}
-          <h1 className="title">{getMessage('modal.font')}</h1>
+        onClose={() => {
-          <button
-            className="modal-close"
-            onClick={() => {
           if (setIsShow) setIsShow(false)
           closePopup(id, isConfig)
         }}
-          >
+      />
-            닫기
+      <WithDraggable.Body>
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="slope-wrap">
           <div className="font-option-warp">
             <div className="font-option-item">
@@ -169,9 +161,7 @@ export default function FontSetting(props) {
             {getMessage('modal.common.save')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

src/components/common/spinner/PopSpinner.jsx

@@ -0,0 +1,7 @@
+export default function PopSpinner() {
+  return (
+    <div className="pop-spinner">
+      <span className="loader"></span>
+    </div>
+  )
+}

src/components/estimate/Estimate.jsx

@@ -58,6 +58,9 @@ export default function Estimate({}) {
 
   const [storePriceList, setStorePriceList] = useState([]) //가격표시 option
 
+  const [cableItemList, setCableItemList] = useState([]) //케이블 리스트
+  const [cableItem, setCableItem] = useState('') //케이블 선택값
+
   const [startDate, setStartDate] = useState(new Date())
   const singleDatePickerProps = {
     startDate,
@@ -107,6 +110,16 @@ export default function Estimate({}) {
       setHonorificCodeList(code1)
     }
 
+    // 케이블제품 공통코드
+    const code2 = findCommonCode(117900)
+    if (code2 != null) {
+      code2.map((item) => {
+        item.value = item.clRefChr1
+        item.label = item.clRefChr2
+      })
+      setCableItemList(code2)
+    }
+
     //아이템 자동완성 목록 가져오기
     const param = {
       saleStoreId: session.storeId,
@@ -467,10 +480,6 @@ export default function Estimate({}) {
 
   //Pricing 버튼
   const handlePricing = async (showPriceCd) => {
-    //todo: 추후 YJSS가 다시 나타날 경우 아래 swalFire 제거 필요
-    if (estimateContextState.estimateType === 'YJSS') {
-      return swalFire({ text: getMessage('estimate.detail.save.requiredEstimateType'), type: 'alert', icon: 'warning' })
-    }
     const param = {
       saleStoreId: session.storeId,
       sapSalesStoreCd: session.custCd,
@@ -551,7 +560,7 @@ export default function Estimate({}) {
   }
 
   const getAbledItems = (items) => {
-    return items.filter((items) => items.paDispOrder === null)
+    return items.filter((items) => items.dispCableFlg !== '1' && items.paDispOrder === null)
   }
 
   const onChangeSelectAll = (e) => {
@@ -684,12 +693,20 @@ export default function Estimate({}) {
     setItemChangeYn(true)
   }
 
-  // 아이템 자동완성 검색시 아이템 추가/변경시
+  /* 케이블 select 변경시  */
-  const onChangeDisplayItem = (itemId, dispOrder, index) => {
+  const onChangeDisplayCableItem = (value, itemList) => {
-    //todo: 추후 YJSS가 다시 나타날 경우 아래 swalFire 제거 필요
+    itemList.map((item, index) => {
-    if (estimateContextState.estimateType === 'YJSS') {
+      if (item.dispCableFlg === '1') {
-      return swalFire({ text: getMessage('estimate.detail.save.requiredEstimateType'), type: 'alert', icon: 'warning' })
+        if (value !== '') {
+          onChangeDisplayItem(value, item.dispOrder, index, true)
         }
+      }
+    })
+    setCableItem(value)
+  }
+
+  // 아이템 자동완성 검색시 아이템 추가/변경시
+  const onChangeDisplayItem = (itemId, dispOrder, index, flag) => {
     const param = {
       itemId: itemId,
       coldZoneFlg: estimateContextState?.coldRegionFlg,
@@ -719,7 +736,7 @@ export default function Estimate({}) {
       updates.itemGroup = res.itemGroup
       updates.delFlg = '0' // 삭제플래그 0
       updates.saleTotPrice = (res.salePrice * estimateContextState.itemList[index].amount).toString()
-      updates.amount = ''
+      updates.amount = flag ? estimateContextState.itemList[index].amount : ''
       updates.openFlg = res.openFlg
 
       if (estimateContextState.estimateType === 'YJSS') {
@@ -782,6 +799,7 @@ export default function Estimate({}) {
           bomItem.objectNo = objectNo
           bomItem.planNo = planNo
           bomItem.addFlg = true //봄 추가시도 addFlg
+          bomItem.openFlg = '0' //봄 컴포넌트는 무조건 0으로
         })
 
         updateList = updateList.filter((item) => item.delFlg === '0')
@@ -1000,7 +1018,7 @@ export default function Estimate({}) {
             item.showSaleTotPrice = '0'
           }
         })
-
+        let dispCableFlgCnt = 0
         estimateContextState.itemList.forEach((item) => {
           if (item.delFlg === '0') {
             let amount = Number(item.amount?.replace(/[^0-9]/g, '').replaceAll(',', '')) || 0
@@ -1035,8 +1053,18 @@ export default function Estimate({}) {
               item.showSalePrice = '0'
               item.showSaleTotPrice = '0'
             }
+
+            if (item.dispCableFlg === '1') {
+              dispCableFlgCnt++
+              setCableItem(item.itemId)
+            }
           }
         })
+
+        if (dispCableFlgCnt === 0) {
+          setCableItem('100038')
+        }
+
         let pkgAsp = estimateContextState.pkgAsp ? Number(estimateContextState.pkgAsp.replaceAll(',', '')) : 0
 
         totals.pkgTotPrice = pkgAsp * totals.totVolKw * 1000
@@ -1064,6 +1092,7 @@ export default function Estimate({}) {
           }
         })
 
+        let dispCableFlgCnt = 0
         estimateContextState.itemList.forEach((item) => {
           delete item.showSalePrice
           delete item.showSaleTotPrice
@@ -1091,9 +1120,21 @@ export default function Estimate({}) {
               item.showSalePrice = '0'
               item.showSaleTotPrice = '0'
             }
+
+            if (item.dispCableFlg === '1') {
+              dispCableFlgCnt++
+            }
+
+            if (item.dispCableFlg === '1') {
+              setCableItem(item.itemId)
+            }
           }
         })
 
+        if (dispCableFlgCnt === 0) {
+          setCableItem('100038')
+        }
+
         totals.vatPrice = totals.supplyPrice * 0.1
         totals.totPrice = totals.supplyPrice + totals.vatPrice
 
@@ -1136,6 +1177,26 @@ export default function Estimate({}) {
     }
   }, [estimateContextState])
 
+  useEffect(() => {
+    if (cableItemList.lenght > 0 || estimateContextState?.itemList.length > 0) {
+      let dispCableFlgCnt = 0
+      estimateContextState.itemList.map((item) => {
+        if (item.dispCableFlg === '1') {
+          dispCableFlgCnt++
+          cableItemList.map((cable) => {
+            if (item.itemId === cable.clRefChr1) {
+              cable.clRefChr3 = item.itemName
+            }
+          })
+        }
+      })
+
+      if (dispCableFlgCnt === 0) {
+        setCableItem('100038')
+      }
+    }
+  }, [estimateContextState?.itemList, cableItemList])
+
   return (
     <div className="sub-content estimate">
       <div className="sub-content-inner">
@@ -1281,7 +1342,7 @@ export default function Estimate({}) {
                     </th>
                     <td colSpan={3}>
                       <div className="radio-wrap">
-                        {/* <div className="d-check-radio light mr10">
+                        <div className="d-check-radio light mr10">
                           <input
                             type="radio"
                             name="estimateType"
@@ -1295,7 +1356,7 @@ export default function Estimate({}) {
                             }}
                           />
                           <label htmlFor="YJSS">{getMessage('estimate.detail.estimateType.yjss')}</label>
-                        </div> */}
+                        </div>
                         <div className="d-check-radio light">
                           <input
                             type="radio"
@@ -1304,8 +1365,7 @@ export default function Estimate({}) {
                             value={'YJOD'}
                             checked={estimateContextState?.estimateType === 'YJOD' ? true : false}
                             onChange={(e) => {
-                              //todo: 추후 YJSS가 다시 나타날 경우 아래 주석풀기
+                              setHandlePricingFlag(true)
-                              // setHandlePricingFlag(true)
                               setEstimateContextState({ estimateType: e.target.value })
                             }}
                           />
@@ -1602,9 +1662,8 @@ export default function Estimate({}) {
                 </div>
               </div>
             </div>
-            {/* //todo: 추후 YJSS가 다시 나타날 경우 주석 풀기 */}
             {/* YJOD면 아래영역 숨김 */}
-            {/* <div className="common-table bt-able" style={{ display: estimateContextState?.estimateType === 'YJSS' ? '' : 'none' }}>
+            <div className="common-table bt-able" style={{ display: estimateContextState?.estimateType === 'YJSS' ? '' : 'none' }}>
               <table>
                 <colgroup>
                   <col style={{ width: '160px' }} />
@@ -1639,7 +1698,7 @@ export default function Estimate({}) {
                   </tr>
                 </tbody>
               </table>
-            </div> */}
+            </div>
             {/* 제품정보 끝 */}
             {/* 가격표시영역시작 */}
             <div className="estimate-product-option">
@@ -1678,6 +1737,24 @@ export default function Estimate({}) {
                   {getMessage('estimate.detail.showPrice.pricingBtn')}
                 </button>
               </div>
+              <div className="product-price-wrap ml10">
+                <div className="select-wrap">
+                  <select
+                    className="select-light"
+                    onChange={(e) => {
+                      onChangeDisplayCableItem(e.target.value, estimateContextState.itemList)
+                    }}
+                    value={cableItem}
+                  >
+                    {cableItemList.length > 0 &&
+                      cableItemList.map((row) => (
+                        <option key={row.clRefChr1} value={row.clRefChr1}>
+                          {row.clRefChr2}
+                        </option>
+                      ))}
+                  </select>
+                </div>
+              </div>
               <div className="product-edit-wrap">
                 <ul className="product-edit-explane">
                   <li className="explane-item item01">
@@ -1757,7 +1834,7 @@ export default function Estimate({}) {
                                 <input
                                   type="checkbox"
                                   id={item?.dispOrder}
-                                  disabled={!!item?.paDispOrder}
+                                  disabled={!!item?.paDispOrder || item.dispCableFlg === '1'}
                                   onChange={() => onChangeSelect(item.dispOrder)}
                                   checked={!!selection.has(item.dispOrder)}
                                 />
@@ -1768,6 +1845,7 @@ export default function Estimate({}) {
                             <td>
                               <div className="form-flex-wrap">
                                 <div className="select-wrap mr5">
+                                  {item.dispCableFlg !== '1' ? (
                                     <Select
                                       name="long-value-select1"
                                       instanceId="long-value-select1"
@@ -1777,18 +1855,40 @@ export default function Estimate({}) {
                                       options={originDisplayItemList}
                                       onChange={(e) => {
                                         if (isObjectNotEmpty(e)) {
-                                        onChangeDisplayItem(e.itemId, item.dispOrder, index)
+                                          onChangeDisplayItem(e.itemId, item.dispOrder, index, false)
                                         }
                                       }}
                                       menuPlacement={'auto'}
                                       getOptionLabel={(x) => x.itemName}
-                                    getOptionValue={(x) => x.itemId}
+                                      getOptionValue={(x) => x.itemNo}
                                       isClearable={false}
                                       isDisabled={!!item?.paDispOrder}
                                       value={displayItemList.filter(function (option) {
+                                        if (item.itemNo === '') {
+                                          return false
+                                        } else {
                                           return option.itemId === item.itemId
+                                        }
                                       })}
                                     />
+                                  ) : (
+                                    <Select
+                                      name="long-value-select11"
+                                      instanceId="long-value-select11"
+                                      className="react-select-custom"
+                                      classNamePrefix="custom"
+                                      placeholder="Select"
+                                      options={cableItemList}
+                                      menuPlacement={'auto'}
+                                      getOptionLabel={(x) => x.clRefChr3}
+                                      getOptionValue={(x) => x.clRefChr1}
+                                      isClearable={false}
+                                      isDisabled={true}
+                                      value={cableItemList.filter(function (option) {
+                                        return option.clRefChr1 === item.itemId
+                                      })}
+                                    />
+                                  )}
                                 </div>
                                 {item?.itemChangeFlg === '1' && (
                                   <div className="btn-area">

src/components/fabric/QPolygon.js

@@ -23,6 +23,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   initOptions: null,
   direction: null,
   arrow: null,
+  toFixed: 1,
   initialize: function (points, options, canvas) {
     this.lines = []
     this.texts = []
@@ -33,11 +34,12 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     this.innerLines = []
     this.children = []
     this.separatePolygon = []
+    this.toFixed = options.toFixed ?? 1
 
     // 소수점 전부 제거
     points.forEach((point) => {
-      point.x = Number(point.x.toFixed(1))
+      point.x = Number(point.x.toFixed(this.toFixed))
-      point.y = Number(point.y.toFixed(1))
+      point.y = Number(point.y.toFixed(this.toFixed))
     })
     options.selectable = options.selectable ?? true
     options.sort = options.sort ?? true

src/components/floor-plan/CanvasMenu.jsx

@@ -111,7 +111,7 @@ export default function CanvasMenu(props) {
   //임시
   const { selectedPlan } = usePlan()
   const handleExcelPdfFileDown = async (donwloadType, drawingFlg) => {
-    const url = '/api/estimate/excel-download'
+    const url = '/api/pwrGnrSimulation/excel-download'
 
     const params = {
       objectNo: objectNo,
@@ -365,11 +365,6 @@ export default function CanvasMenu(props) {
 
   // 견적서 초기화 버튼
   const handleEstimateReset = () => {
-    //todo: 추후 YJSS가 다시 나타날 경우 아래 swalFire 제거 필요
-    if (estimateRecoilState.estimateType === 'YJSS') {
-      return swalFire({ text: getMessage('estimate.detail.save.requiredEstimateType'), type: 'alert', icon: 'warning' })
-    }
-
     swalFire({
       text: getMessage('estimate.detail.reset.confirmMsg'),
       type: 'confirm',

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

@@ -76,22 +76,13 @@ export default function ImgLoad() {
   }, [currentCanvasPlan])
 
   return (
-    <WithDraggable isShow={floorPlanState.refFileModalOpen} pos={{ x: 1000, y: 200 }}>
+    <WithDraggable isShow={floorPlanState.refFileModalOpen} pos={{ x: 1000, y: 200 }} className="r">
-      <div className={`modal-pop-wrap r`}>
+      <WithDraggable.Header
-        <div className="modal-head modal-handle">
+        title={getMessage('common.input.file')}
-          <h1 className="title">{getMessage('common.input.file')}</h1>
+        onClose={() => setFloorPlanState({ ...floorPlanState, refFileModalOpen: false })}
-          <button
+      />
-            className="modal-close"
+
-            onClick={() => {
+      <WithDraggable.Body>
-              setFloorPlanState({ ...floorPlanState, refFileModalOpen: false })
-            }}
-          >
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="img-flex-box">
           <span className="normal-font mr10">{getMessage('modal.image.load.size.rotate')}</span>
           <label className="toggle-btn">
@@ -166,9 +157,7 @@ export default function ImgLoad() {
           </button>
           {/* <button className="btn-frame modal act" onClick={() => handleCanvasToPng(2)}></button> */}
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -13,17 +13,9 @@ export default function Slope({ id, pos = { x: 50, y: 230 } }) {
   const inputRef = useRef()
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="xxxm">
-      <div className={`modal-pop-wrap xxxm`}>
+      <WithDraggable.Header title={getMessage('plan.menu.placement.surface.slope.setting')} onClose={() => closePopup(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('plan.menu.placement.surface.slope.setting')} </h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="slope-wrap">
           <div className="outline-form">
             <span className="mr10" style={{ width: 'auto' }}>
@@ -46,9 +38,7 @@ export default function Slope({ id, pos = { x: 50, y: 230 } }) {
             {getMessage('modal.common.save')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -124,17 +124,9 @@ export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
     setType(button.type)
   }
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="r">
-      <div className={`modal-pop-wrap r`}>
+      <WithDraggable.Header title={getMessage('modal.auxiliary.drawing')} onClose={() => closePopup(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('modal.auxiliary.drawing')}</h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="modal-btn-wrap">
           {types.map((type, idx) => (
             <button key={idx} className={`btn-frame modal ${buttonAct === type.id ? 'act' : ''}`} onClick={() => onClickButton(type)}>
@@ -161,9 +153,7 @@ export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
             {getMessage('apply')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -55,17 +55,9 @@ export default function AuxiliaryEdit(props) {
     closePopup(id)
   }
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="xm">
-      <div className={`modal-pop-wrap xm mount`}>
+      <WithDraggable.Header title={getMessage(type === 'copy' ? 'modal.auxiliary.copy' : 'modal.auxiliary.move')} onClose={() => closePopup(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage(type === 'copy' ? 'modal.auxiliary.copy' : 'modal.auxiliary.move')} </h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="grid-option-tit">{getMessage(type === 'copy' ? 'modal.auxiliary.copy.info' : 'modal.auxiliary.move.info')}</div>
         <div className="grid-option-wrap">
           <div className="grid-option-box">
@@ -123,9 +115,7 @@ export default function AuxiliaryEdit(props) {
             {getMessage('modal.common.save')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -111,17 +111,9 @@ export default function AuxiliarySize(props) {
     closePopup(id)
   }
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="xm">
-      <div className={`modal-pop-wrap xm mount`}>
+      <WithDraggable.Header title={getMessage('modal.auxiliary.size.edit')} onClose={() => closePopup(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('modal.auxiliary.size.edit')} </h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="discrimination-box mb10">
           <div className="d-check-radio pop mb10">
             <input type="radio" name="radio01" id="ra01" onClick={(e) => setCheckedRadio(1)} />
@@ -165,9 +157,7 @@ export default function AuxiliarySize(props) {
             {getMessage('modal.common.save')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -11,7 +11,7 @@ import { usePopup } from '@/hooks/usePopup'
 import { Orientation } from '@/components/floor-plan/modal/basic/step/Orientation'
 import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
 import { useEvent } from '@/hooks/useEvent'
-import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
+import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
 import { addedRoofsState, corridorDimensionSelector, basicSettingState } from '@/store/settingAtom'
 import { isObjectNotEmpty } from '@/util/common-utils'
 import Swal from 'sweetalert2'
@@ -38,6 +38,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   const canvas = useRecoilValue(canvasState)
   const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
   const [isClosePopup, setIsClosePopup] = useState({ close: false, id: 0 })
+  const [checkedModules, setCheckedModules] = useRecoilState(checkedModuleState)
 
   const [manualSetupMode, setManualSetupMode] = useState('manualSetup')
 
@@ -50,6 +51,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   const { manualModuleSetup, autoModuleSetup, manualFlatroofModuleSetup, autoFlatroofModuleSetup, manualModuleLayoutSetup } =
     useModuleBasicSetting(tabNum)
   const { updateObjectDate } = useMasterController()
+
   const handleBtnNextStep = () => {
     if (tabNum === 1) {
       orientationRef.current.handleNextStep()
@@ -163,18 +165,14 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
     }
   }, [layoutSetup])
 
+  useEffect(() => {
+    setIsManualModuleSetup(false)
+  }, [checkedModules])
+
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="lx-2">
-      <div className={`modal-pop-wrap lx-2`}>
+      <WithDraggable.Header title={getMessage('plan.menu.module.circuit.setting.default')} onClose={() => handleClosePopup(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('plan.menu.module.circuit.setting.default')}</h1>
-          <button className="modal-close" onClick={() => handleClosePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="roof-module-tab">
           <div className={`module-tab-bx act`}>{getMessage('modal.module.basic.setting.orientation.setting')}</div>
           <span className={`tab-arr ${tabNum !== 1 ? 'act' : ''}`}></span>
@@ -185,9 +183,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
         {tabNum === 1 && <Orientation ref={orientationRef} tabNum={tabNum} setTabNum={setTabNum} />}
         {/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/}
         {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 2 && <Module setTabNum={setTabNum} />}
-          {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 3 && (
+        {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 3 && <Placement setTabNum={setTabNum} ref={placementRef} />}
-            <Placement setTabNum={setTabNum} ref={placementRef} setLayoutSetup={setLayoutSetup} layoutSetup={layoutSetup} />
-          )}
 
         {/*배치면 초기설정 - 입력방법: 육지붕*/}
         {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 2 && <PitchModule setTabNum={setTabNum} />}
@@ -195,6 +191,19 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
           <PitchPlacement setTabNum={setTabNum} ref={placementFlatRef} />
         )}
 
+        <div className="grid-btn-wrap">
+          {tabNum !== 1 && (
+            <button className="btn-frame modal mr5" onClick={() => setTabNum(tabNum - 1)}>
+              {getMessage('modal.module.basic.setting.prev')}
+            </button>
+          )}
+          {/*{tabNum !== 3 && <button className="btn-frame modal act mr5">{getMessage('modal.common.save')}</button>}*/}
+          {tabNum !== 3 && (
+            <button className="btn-frame modal" onClick={handleBtnNextStep}>
+              Next
+            </button>
+          )}
+
           <div className="grid-btn-wrap">
             {tabNum !== 1 && (
               <button className="btn-frame modal mr5" onClick={() => setTabNum(tabNum - 1)}>
@@ -237,8 +246,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
             )}
           </div>
         </div>
-        <div className="modal-foot modal-handle"></div>
+      </WithDraggable.Body>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -612,18 +612,9 @@ export default function CircuitTrestleSetting({ id }) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }} className="l-2">
-      <div className={`modal-pop-wrap l-2`}>
+      <WithDraggable.Header title={getMessage('modal.circuit.trestle.setting')} onClose={() => handleClose()} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('modal.circuit.trestle.setting')} </h1>
-          {/* <button className="modal-close" onClick={() => closePopup(id)}> */}
-          <button className="modal-close" onClick={handleClose}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="roof-module-tab">
           <div className={`module-tab-bx act`}>{getMessage('modal.circuit.trestle.setting.power.conditional.select')}</div>
           <span className={`tab-arr ${tabNum === 2 ? 'act' : ''}`}></span>
@@ -667,9 +658,7 @@ export default function CircuitTrestleSetting({ id }) {
             </button>
           </div>
         )}
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -160,6 +160,20 @@ export default function PowerConditionalSelect(props) {
 
       return
     }
+
+    if (selectedModels.find((m) => m.pcsSerParallelYn === 'Y') && selectedRow.pcsSerParallelYn === 'Y') {
+      return
+    }
+
+    if (selectedRow.pcsSerParallelYn === 'Y' && selectedModels.length === 0 && selectedMaker.pcsMkrMultiType === PCS_MKR_MULTI_TYPE.SINGLE_P) {
+      swalFire({
+        title: getMessage('modal.module.pcs.error1'),
+        icon: 'warning',
+      })
+
+      return
+    }
+
     if (selectedMaker.pcsMkrMultiType === PCS_MKR_MULTI_TYPE.MULTI) {
       setSelectedModels([...selectedModels, { ...selectedRow, id: uuidv4() }])
     } else if (!selectedModels.find((m) => m.itemId === selectedRow.itemId)) {
@@ -169,6 +183,11 @@ export default function PowerConditionalSelect(props) {
   }
 
   const onRemoveSelectedModel = (model) => {
+    const tempModels = selectedModels.filter((m) => m.id !== model.id)
+    if (tempModels.length === 1 && tempModels[0].pcsSerParallelYn === 'Y') {
+      setSelectedModels([])
+      return
+    }
     setSelectedModels(selectedModels.filter((m) => m.id !== model.id))
   }
 
@@ -277,14 +296,6 @@ export default function PowerConditionalSelect(props) {
           </label>
         </div>
       </div>
-      {/* <div className="grid-btn-wrap">
-        <button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>
-          {getMessage('modal.circuit.trestle.setting.circuit.allocation.auto')}
-        </button>
-        <button className="btn-frame modal act" onClick={() => setTabNum(tabNum + 1)}>
-          {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}
-        </button>
-      </div> */}
     </>
   )
 }

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

@@ -122,17 +122,9 @@ export default function DimensionLineSetting(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="xm">
-      <div className={`modal-pop-wrap xm mount`}>
+      <WithDraggable.Header title={getMessage('contextmenu.display.edit')} onClose={() => closePopup(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('contextmenu.display.edit')} </h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="guide">{getMessage('modal.display.edit.info')}</div>
         <div className="mb-box">
           <div className="slope-wrap">
@@ -208,9 +200,7 @@ export default function DimensionLineSetting(props) {
             {getMessage('modal.common.save')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -16,17 +16,9 @@ export default function Distance(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="xxxm">
-      <div className={`modal-pop-wrap xxxm`}>
+      <WithDraggable.Header title={getMessage('modal.distance')} onClose={() => closePopup(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('modal.distance')} </h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="slope-wrap">
           <div className="eaves-keraba-table">
             <div className="eaves-keraba-item">
@@ -69,9 +61,7 @@ export default function Distance(props) {
             {getMessage('common.ok')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -38,17 +38,9 @@ export default function EavesGableEdit({ id, pos = { x: 50, y: 230 } }) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="r">
-      <div className={`modal-pop-wrap r`}>
+      <WithDraggable.Header title={getMessage('modal.eaves.gable.edit')} onClose={() => closePopup(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('modal.eaves.gable.edit')}</h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="modal-btn-wrap">
           {buttonMenu.map((item) => (
             <button key={item.id} className={`btn-frame modal ${type === item.type ? 'act' : ''}`} onClick={() => setType(item.type)}>
@@ -63,9 +55,7 @@ export default function EavesGableEdit({ id, pos = { x: 50, y: 230 } }) {
           {type === TYPES.WALL_MERGE && <WallMerge {...wallMergeProps} />}
           {type === TYPES.SHED && <Shed {...shedProps} />}
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -63,17 +63,9 @@ export default function FlowDirectionSetting(props) {
   )
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="ml">
-      <div className={`modal-pop-wrap ml mount`}>
+      <WithDraggable.Header title={getMessage('modal.shape.flow.direction.setting')} onClose={() => closePopup(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('modal.shape.flow.direction.setting')} </h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="drawing-flow-wrap">
           <div className="discrimination-box">
             <div className="discrimination-tit mb15">{getMessage('modal.flow.direction.setting')}</div>
@@ -177,9 +169,7 @@ export default function FlowDirectionSetting(props) {
             {getMessage('modal.common.save')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -177,23 +177,15 @@ export default function DotLineGrid(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="ssm">
-      <div className={`modal-pop-wrap ssm mount`}>
+      <WithDraggable.Header
-        <div className="modal-head modal-handle">
+        title={getMessage('modal.canvas.setting.grid.dot.line.setting')}
-          <h1 className="title">{getMessage('modal.canvas.setting.grid.dot.line.setting')}</h1>
+        onClose={() => {
-          <button
-            className="modal-close"
-            onClick={() => {
           setIsShow(false)
           closePopup(id, isConfig)
         }}
-          >
+      />
-            닫기
+      <WithDraggable.Body>
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="grid-check-form">
           <div className="d-check-box pop">
             <input type="checkbox" id="ch01" value={TYPE.DOT} onChange={handleCheckBoxChange} checked={copyCurrentSetting.DOT} />
@@ -293,9 +285,7 @@ export default function DotLineGrid(props) {
             {getMessage('modal.canvas.setting.grid.dot.line.setting.save')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -20,17 +20,9 @@ export default function GridCopy(props) {
     copy(currentObject, ['↑', '←'].includes(arrow) ? +length * -1 : +length)
   }
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="xm">
-      <div className={`modal-pop-wrap xm mount`}>
+      <WithDraggable.Header title={getMessage('modal.grid.copy')} onClose={() => closePopup(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('modal.grid.copy')} </h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="grid-option-tit">{getMessage('modal.grid.copy.info')}</div>
         <div className="grid-option-wrap">
           <div className="grid-option-box">
@@ -78,9 +70,7 @@ export default function GridCopy(props) {
             {getMessage('modal.grid.copy.save')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -73,17 +73,9 @@ export default function GridMove(props) {
     closePopup(id)
   }
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="xm">
-      <div className={`modal-pop-wrap xm mount`}>
+      <WithDraggable.Header title={getMessage('modal.grid.move')} onClose={() => handleClose()} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('modal.grid.move')} </h1>
-          <button className="modal-close" onClick={handleClose}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="grid-option-tit">{getMessage('modal.grid.move.info')}</div>
         <div className="grid-option-wrap">
           <div className="d-check-box pop mb10">
@@ -157,9 +149,7 @@ export default function GridMove(props) {
             {getMessage('modal.grid.move.save')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -50,17 +50,9 @@ export default function LinePropertySetting(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="r">
-      <div className={`modal-pop-wrap r mount`}>
+      <WithDraggable.Header title={getMessage('contextmenu.line.property.edit')} onClose={() => handleClosePopup()} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('contextmenu.line.property.edit')} </h1>
-          <button className="modal-close" onClick={() => handleClosePopup()}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="guide">
           <span className="mb10">{getMessage('modal.line.property.edit.info')}</span>
           <span>
@@ -92,9 +84,7 @@ export default function LinePropertySetting(props) {
             {getMessage('modal.common.save')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -14,17 +14,9 @@ export default function CircuitNumberEdit(props) {
     closePopup(id)
   }
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="xm">
-      <div className={`modal-pop-wrap xm mount`}>
+      <WithDraggable.Header title={getMessage('modal.module.circuit.number.edit')} onClose={() => closePopup(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title"> {getMessage('modal.module.circuit.number.edit')}</h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="grid-option-tit"> {getMessage('modal.module.circuit.number.edit.info')}</div>
         <div className="grid-option-wrap">
           <div className="grid-option-box">
@@ -43,9 +35,7 @@ export default function CircuitNumberEdit(props) {
             {getMessage('modal.common.save')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -91,23 +91,14 @@ export default function PanelEdit(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="xm">
-      <div className={`modal-pop-wrap xm mount`}>
+      <WithDraggable.Header
-        <div className="modal-head modal-handle">
+        title={getMessage(
-          <h1 className="title">
+          [PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.MOVE_ALL, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type) ? 'modal.move.setting' : 'modal.copy.setting',
-            {getMessage(
+        )}
-              [PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.MOVE_ALL, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type)
+        onClose={() => closePopup(id)}
-                ? 'modal.move.setting'
+      />
-                : 'modal.copy.setting',
+      <WithDraggable.Body>
-            )}{' '}
-          </h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="grid-option-tit">
           {getMessage(
             [PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.MOVE_ALL, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type)
@@ -157,9 +148,7 @@ export default function PanelEdit(props) {
             {getMessage('modal.common.save')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -24,17 +24,9 @@ export default function ColumnInsert(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="r">
-      <div className={`modal-pop-wrap r mount`}>
+      <WithDraggable.Header title={getMessage('modal.panel.column.insert')} onClose={() => closePopup(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('modal.panel.column.insert')} </h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="properties-setting-wrap">
           <div className="setting-tit">{getMessage('modal.panel.column.insert.info')}</div>
           <div className="additional-wrap">
@@ -64,22 +56,10 @@ export default function ColumnInsert(props) {
             </div>
             <div className="additional-img-wrap">
               {selectedType === MODULE_INSERT_TYPE.LEFT && (
-                  <Image
+                <Image src="/static/images/canvas/additional-edit01.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
-                    src="/static/images/canvas/additional-edit01.svg"
-                    alt="react"
-                    width={0}
-                    height={0}
-                    style={{ width: 'auto', height: 'auto' }}
-                  />
               )}
               {selectedType === MODULE_INSERT_TYPE.RIGHT && (
-                  <Image
+                <Image src="/static/images/canvas/additional-edit02.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
-                    src="/static/images/canvas/additional-edit02.svg"
-                    alt="react"
-                    width={0}
-                    height={0}
-                    style={{ width: 'auto', height: 'auto' }}
-                  />
               )}
             </div>
           </div>
@@ -106,9 +86,7 @@ export default function ColumnInsert(props) {
             {getMessage('modal.common.save')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -26,17 +26,9 @@ export default function ColumnRemove(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="r">
-      <div className={`modal-pop-wrap r mount`}>
+      <WithDraggable.Header title={getMessage('modal.panel.column.remove')} onClose={() => closePopup(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('modal.panel.column.remove')} </h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="properties-setting-wrap">
           <div className="setting-tit">{getMessage('modal.panel.column.remove.info')}</div>
           <div className="additional-wrap">
@@ -59,40 +51,16 @@ export default function ColumnRemove(props) {
             </div>
             <div className="additional-img-wrap">
               {selectedType === MODULE_REMOVE_TYPE.LEFT && (
-                  <Image
+                <Image src="/static/images/canvas/additional_del01.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
-                    src="/static/images/canvas/additional_del01.svg"
-                    alt="react"
-                    width={0}
-                    height={0}
-                    style={{ width: 'auto', height: 'auto' }}
-                  />
               )}
               {selectedType === MODULE_REMOVE_TYPE.RIGHT && (
-                  <Image
+                <Image src="/static/images/canvas/additional_del02.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
-                    src="/static/images/canvas/additional_del02.svg"
-                    alt="react"
-                    width={0}
-                    height={0}
-                    style={{ width: 'auto', height: 'auto' }}
-                  />
               )}
               {selectedType === MODULE_REMOVE_TYPE.HORIZONTAL_SIDE && (
-                  <Image
+                <Image src="/static/images/canvas/additional_del03.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
-                    src="/static/images/canvas/additional_del03.svg"
-                    alt="react"
-                    width={0}
-                    height={0}
-                    style={{ width: 'auto', height: 'auto' }}
-                  />
               )}
               {selectedType === MODULE_REMOVE_TYPE.NONE && (
-                  <Image
+                <Image src="/static/images/canvas/additional_del04.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
-                    src="/static/images/canvas/additional_del04.svg"
-                    alt="react"
-                    width={0}
-                    height={0}
-                    style={{ width: 'auto', height: 'auto' }}
-                  />
               )}
             </div>
           </div>
@@ -115,9 +83,7 @@ export default function ColumnRemove(props) {
             {getMessage('modal.common.save')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -24,17 +24,9 @@ export default function RowInsert(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="r">
-      <div className={`modal-pop-wrap r mount`}>
+      <WithDraggable.Header title={getMessage('modal.row.insert')} onClose={() => closePopup(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('modal.row.insert')} </h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="properties-setting-wrap">
           <div className="setting-tit">{getMessage('modal.row.insert.info')}</div>
           <div className="additional-wrap">
@@ -106,9 +98,8 @@ export default function RowInsert(props) {
             {getMessage('modal.common.save')}
           </button>
         </div>
-        </div>
         <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }

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

@@ -27,17 +27,9 @@ export default function RowRemove(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="r">
-      <div className={`modal-pop-wrap r mount`}>
+      <WithDraggable.Header title={getMessage('modal.row.remove')} onClose={() => closePopup(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('modal.row.remove')}</h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="properties-setting-wrap">
           <div className="setting-tit">{getMessage('modal.row.remove.info')}</div>
           <div className="additional-wrap">
@@ -116,9 +108,7 @@ export default function RowRemove(props) {
             {getMessage('modal.common.save')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -16,17 +16,9 @@ export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="r">
-      <div className={`modal-pop-wrap r`}>
+      <WithDraggable.Header title={getMessage('plan.menu.roof.cover.movement.shape.updown')} onClose={() => closePopup(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('plan.menu.roof.cover.movement.shape.updown')}</h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="modal-btn-wrap">
           {buttonType.map((item) => (
             <button key={item.id} className={`btn-frame modal ${type === item.type ? 'act' : ''}`} onClick={() => setType(item.type)}>
@@ -43,9 +35,7 @@ export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
             {getMessage('modal.common.save')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -40,17 +40,9 @@ export default function DormerOffset(props) {
     // closePopup(id)
   }
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="xm">
-      <div className={`modal-pop-wrap xm mount`}>
+      <WithDraggable.Header title={title} onClose={() => closePopup(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{title}</h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="grid-option-tit">{getMessage('modal.dormer.offset.info')}</div>
         <div className="grid-option-wrap">
           <div className="grid-option-box">
@@ -104,9 +96,7 @@ export default function DormerOffset(props) {
             {getMessage('modal.common.save')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -100,17 +100,9 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
   ]
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="lrr" style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
-      <div className={`modal-pop-wrap lrr`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
+      <WithDraggable.Header title={getMessage('plan.menu.placement.surface.object')} onClose={() => closePopup(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('plan.menu.placement.surface.object')} </h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="modal-btn-wrap">
           {buttonMenu.map((item) => (
             <button key={item.id} className={`btn-frame modal ${buttonAct === item.id ? 'act' : ''}`} onClick={() => setButtonAct(item.id)}>
@@ -134,9 +126,7 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
             {getMessage('write')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -21,17 +21,9 @@ export default function RoofMaterialSetting(props) {
   ]
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="xxxm">
-      <div className={`modal-pop-wrap xxxm mount`}>
+      <WithDraggable.Header title={getMessage('modal.roof.material.edit')} onClose={() => closePopup(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('modal.roof.material.edit')} </h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="slope-wrap">
           <div className="grid-select">
             <QSelectBox title={'지붕재 선택'} options={roofMaterials} />
@@ -40,9 +32,7 @@ export default function RoofMaterialSetting(props) {
         <div className="grid-btn-wrap">
           <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -40,17 +40,9 @@ export default function SizeSetting(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="ssm">
-      <div className={`modal-pop-wrap ssm mount`}>
+      <WithDraggable.Header title={getMessage('modal.size.setting')} onClose={() => closePopup(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('modal.size.setting')} </h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="slope-wrap">
           <div className="size-option-top">
             <div className="size-option-wrap">
@@ -91,9 +83,7 @@ export default function SizeSetting(props) {
             {getMessage('write')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -8,17 +8,9 @@ export default function PropertiesSetting(props) {
   const { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal } = usePropertiesSetting(id)
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="ssm">
-      <div className={`modal-pop-wrap ssm`}>
+      <WithDraggable.Header title={getMessage('modal.canvas.setting.wallline.properties.setting')} onClose={() => closeModal(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('modal.canvas.setting.wallline.properties.setting')}</h1>
-          <button className="modal-close" onClick={() => closeModal(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="properties-guide">{getMessage('modal.canvas.setting.wallline.properties.setting.info')}</div>
         <div className="properties-setting-wrap">
           <div className="setting-tit">{getMessage('setting')}</div>
@@ -39,9 +31,7 @@ export default function PropertiesSetting(props) {
             {getMessage('modal.cover.outline.finish')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -114,15 +114,9 @@ export default function WallLineSetting(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }} className="r">
-      <div className={`modal-pop-wrap r mount`}>
+      <WithDraggable.Header title={getMessage('modal.cover.outline.drawing')} onClose={() => closePopup(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('modal.cover.outline.drawing')}</h1>
-          <button className="modal-close" onClick={() => closePopup(id)}></button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="modal-btn-wrap">
           {/*<button
               className={`btn-frame modal ${type === OUTER_LINE_TYPE.OUTER_LINE ? 'act' : ''}`}
@@ -184,9 +178,7 @@ export default function WallLineSetting(props) {
             {getMessage('modal.cover.outline.fix')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -11,25 +11,31 @@ import { canvasState } from '@/store/canvasAtom'
 import { POLYGON_TYPE } from '@/common/common'
 import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle'
 import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
+import Draggable from 'react-draggable'
 
 export default function PanelBatchStatistics() {
   const { getMessage } = useMessage()
   const [isFold, setIsFold] = useState(false)
-  const [pos, setPos] = useState({
-    x: 0,
-    y: 30,
-  })
   const canvas = useRecoilValue(canvasState)
   const { header, rows, footer } = useRecoilValue(moduleStatisticsState)
   const { setModuleStatisticsData } = useCircuitTrestle(true)
   const [moduleSelectionDataStore, setModuleSelectionDataStore] = useRecoilState(moduleSelectionDataState)
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 30,
+  })
+
+  const handleOnDrag = (e, data) => {
+    e.stopPropagation()
+    setPosition({ x: data.x, y: data.y })
+  }
 
   useEffect(() => {
     if (moduleSelectionDataStore && moduleSelectionDataStore.module) setModuleStatisticsData()
   }, [])
 
   return (
-    <WithDraggable isShow={true} handle=".penal-wrap" pos={pos}>
+    <Draggable position={{ x: position.x, y: position.y }} onDrag={(e, data) => handleOnDrag(e, data)} handle=".penal-wrap">
       <div className={`penal-wrap ${!isFold ? 'act' : ''}`}>
         <h2>{getMessage('modal.panel.batch.statistic')}</h2>
         <button className="penal-arr" onClick={() => setIsFold(!isFold)}></button>
@@ -63,6 +69,6 @@ export default function PanelBatchStatistics() {
           </table>
         </div>
       </div>
-    </WithDraggable>
+    </Draggable>
   )
 }

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

@@ -121,24 +121,12 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
     setType(button.type)
   }
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="r">
-      <div className={`modal-pop-wrap r`}>
+      <WithDraggable.Header title={getMessage('plan.menu.placement.surface.drawing')} onClose={() => closePopup(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('plan.menu.placement.surface.drawing')}</h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="modal-btn-wrap">
           {types.map((type, idx) => (
-              <button
+            <button key={`placement-${idx}`} className={`btn-frame modal ${buttonAct === type.id ? 'act' : ''}`} onClick={() => onClickButton(type)}>
-                key={`placement-${idx}`}
-                className={`btn-frame modal ${buttonAct === type.id ? 'act' : ''}`}
-                onClick={() => onClickButton(type)}
-              >
               {type.name}
             </button>
           ))}
@@ -159,9 +147,7 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
             {getMessage('modal.placement.surface.drawing.fix')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -257,12 +257,9 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="ll">
-      <div className={`modal-pop-wrap ll mount`}>
+      <WithDraggable.Header title={getMessage('plan.menu.placement.surface.initial.setting')} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('plan.menu.placement.surface.initial.setting')}</h1>
-        </div>
-        <div className="modal-body">
         <div className="left-bar modal-handle"></div>
         <div className="right-bar modal-handle"></div>
         <div className="placement-table">
@@ -477,11 +474,9 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
             {getMessage('modal.common.save')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
       {showSizeGuideModal && <SizeGuide setShowSizeGuidModal={setShowSizeGuidModal} />}
       {showMaterialGuideModal && <MaterialGuide setShowMaterialGuidModal={setShowMaterialGuidModal} />}
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -41,17 +41,9 @@ export default function PlacementSurfaceLineProperty(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="lr">
-      <div className={`modal-pop-wrap mount lr`}>
+      <WithDraggable.Header title={getMessage('modal.canvas.setting.roofline.properties.setting')} onClose={() => handleClose()} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('modal.canvas.setting.roofline.properties.setting')}</h1>
-          <button className="modal-close" onClick={() => handleClose()}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="properties-guide">{getMessage('modal.canvas.setting.roofline.properties.setting.info')}</div>
         <div className="properties-setting-wrap">
           <div className="setting-tit">{getMessage('setting')}</div>
@@ -75,9 +67,7 @@ export default function PlacementSurfaceLineProperty(props) {
             {getMessage('modal.cover.outline.finish')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -256,26 +256,14 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
   }, [])
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="lr-2" isHidden={isHidden}>
-      <div className={`modal-pop-wrap lr-2`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
+      <WithDraggable.Header title={getMessage('plan.menu.placement.surface.arrangement')} onClose={() => closePopup(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('plan.menu.placement.surface.arrangement')} </h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="plane-frame-wrap">
           <div className="plane-shape-wrap">
             <div className="plane-shape-menu">
               {types.map((type) => (
-                  <button
+                <button key={type.id} className={`shape-menu-box ${selectedType?.id === type.id ? 'act' : ''}`} onClick={() => setSelectedType(type)}>
-                    key={type.id}
-                    className={`shape-menu-box ${selectedType?.id === type.id ? 'act' : ''}`}
-                    onClick={() => setSelectedType(type)}
-                  >
                   <div className="shape-box">
                     <Image
                       src={`/static/images/canvas/plane_shape0${type?.id}.svg`}
@@ -310,9 +298,7 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
             </div>
           </div>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -61,17 +61,9 @@ export default function ActualSizeSetting(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="ssm">
-      <div className={`modal-pop-wrap ssm mount`}>
+      <WithDraggable.Header title={getMessage('modal.actual.size.setting')} onClose={() => closePopup(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('modal.actual.size.setting')}</h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="guide">
           <span>{getMessage('modal.actual.size.setting.info')}</span>
         </div>
@@ -95,12 +87,7 @@ export default function ActualSizeSetting(props) {
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5">
-                        <input
+                      <input type="text" className="input-origin block" value={actualSize} onChange={(e) => setActualSize(Number(e.target.value))} />
-                          type="text"
-                          className="input-origin block"
-                          value={actualSize}
-                          onChange={(e) => setActualSize(Number(e.target.value))}
-                        />
                     </div>
                     <span className="thin">mm</span>
                   </div>
@@ -117,9 +104,7 @@ export default function ActualSizeSetting(props) {
             {getMessage('apply')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -47,19 +47,10 @@ export default function ContextRoofAllocationSetting(props) {
   }, [])
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="lr">
-      <div className={`modal-pop-wrap lr mount`}>
+      <WithDraggable.Header title={getMessage('plan.menu.estimate.roof.alloc')} onClose={() => closePopup(id)} />
       {currentRoofList && (
-          <>
+        <WithDraggable.Body>
-            <div className="modal-head modal-handle">
-              <h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
-              <button className="modal-close" onClick={() => closePopup(id)}>
-                닫기
-              </button>
-            </div>
-            <div className="modal-body">
-              <div className="left-bar modal-handle"></div>
-              <div className="right-bar modal-handle"></div>
           <div className="properties-guide">{getMessage('modal.roof.alloc.info')}</div>
           <div className="allocation-select-wrap">
             {/* <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
@@ -232,11 +223,8 @@ export default function ContextRoofAllocationSetting(props) {
               {getMessage('modal.roof.alloc.apply')}
             </button>
           </div>
-            </div>
+        </WithDraggable.Body>
-          </>
       )}
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -47,19 +47,11 @@ export default function RoofAllocationSetting(props) {
   }, [])
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="lr">
-      <div className={`modal-pop-wrap lr mount`}>
+      <WithDraggable.Header title={getMessage('plan.menu.estimate.roof.alloc')} onClose={() => closePopup(id)} />
+      <WithDraggable.Body>
         {currentRoofList && (
           <>
-            <div className="modal-head modal-handle">
-              <h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
-              <button className="modal-close" onClick={() => closePopup(id)}>
-                닫기
-              </button>
-            </div>
-            <div className="modal-body">
-              <div className="left-bar modal-handle"></div>
-              <div className="right-bar modal-handle"></div>
             <div className="properties-guide">{getMessage('modal.roof.alloc.info')}</div>
             <div className="allocation-select-wrap">
               {/* <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
@@ -249,11 +241,9 @@ export default function RoofAllocationSetting(props) {
                 {getMessage('modal.roof.alloc.apply')}
               </button>
             </div>
-            </div>
           </>
         )}
-        <div className="modal-foot modal-handle"></div>
+      </WithDraggable.Body>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -29,17 +29,9 @@ export default function RoofShapePassivitySetting({ id, pos = { x: 50, y: 230 }
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="xxm">
-      <div className={`modal-pop-wrap xxm`}>
+      <WithDraggable.Header title={getMessage('plan.menu.roof.cover.roof.shape.passivity.setting')} onClose={() => closePopup(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('plan.menu.roof.cover.roof.shape.passivity.setting')}</h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="modal-btn-wrap">
           {buttons.map((button) => (
             <button key={button.id} className={`btn-frame modal ${type === button.type ? 'act' : ''}`} onClick={() => setType(button.type)}>
@@ -68,9 +60,7 @@ export default function RoofShapePassivitySetting({ id, pos = { x: 50, y: 230 }
             {getMessage('common.setting.finish')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -88,17 +88,9 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="lr">
-      <div className={`modal-pop-wrap lr mount`}>
+      <WithDraggable.Header title={getMessage('modal.roof.shape.setting')} onClose={() => closePopup(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('modal.roof.shape.setting')}</h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="roof-shape-menu">
           {shapeMenu.map((item) => (
             <button key={item.id} className={`shape-menu-box ${shapeNum === item.id ? 'act' : ''}`} onClick={() => setShapeNum(item.id)}>
@@ -120,9 +112,7 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
             {getMessage('common.setting.finish')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -72,18 +72,9 @@ export default function SettingModal01(props) {
   }
 
   return (
-    <>
+    <WithDraggable isShow={true} pos={{ x: 1275, y: 180 }} className="sm">
-      <WithDraggable isShow={true} pos={{ x: 1275, y: 180 }}>
+      <WithDraggable.Header title={getMessage('modal.canvas.setting')} onClose={() => closePopup(id, true)} />
-        <div className={`modal-pop-wrap sm mount`}>
+      <WithDraggable.Body>
-          <div className="modal-head modal-handle">
-            <h1 className="title">{getMessage('modal.canvas.setting')}</h1>
-            <button className="modal-close" onClick={() => closePopup(id, true)}>
-              닫기
-            </button>
-          </div>
-          <div className="modal-body">
-            <div className="left-bar modal-handle"></div>
-            <div className="right-bar modal-handle"></div>
         <div className="modal-btn-wrap">
           <button className={`btn-frame modal ${buttonAct === 1 ? 'act' : ''}`} onClick={() => handleBtnClick(1)}>
             {getMessage('modal.canvas.setting.display')}
@@ -101,10 +92,7 @@ export default function SettingModal01(props) {
         {buttonAct === 1 && <FirstOption {...firstProps} />}
         {buttonAct === 2 && <SecondOption {...secondProps} />}
         {buttonAct === 3 && <GridOption {...gridProps} />}
-          </div>
+      </WithDraggable.Body>
-          <div className="modal-foot modal-handle"></div>
-        </div>
     </WithDraggable>
-    </>
   )
 }

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

@@ -190,23 +190,15 @@ export default function DimensionLineSetting(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="xxxm">
-      <div className={`modal-pop-wrap xxxm mount`}>
+      <WithDraggable.Header
-        <div className="modal-head modal-handle">
+        title={getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')}
-          <h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')} </h1>
+        onClose={() => {
-          <button
-            className="modal-close"
-            onClick={() => {
           setIsShow(false)
           closePopups([fontModalId, colorModalId, id])
         }}
-          >
+      />
-            닫기
+      <WithDraggable.Body>
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="font-btn-wrap">
           <button className="btn-frame modal" onClick={() => popupHandle('font')}>
             {getMessage('modal.font.setting')}
@@ -259,9 +251,7 @@ export default function DimensionLineSetting(props) {
             {getMessage('modal.common.save')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -49,29 +49,21 @@ export default function PlanSizeSetting(props) {
     setPlanSizeSettingMode((prev) => {
       return {
         ...prev,
-        [name]: Number(value),
+        [name]: Number(value) / 10,
       }
     })
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="xsm">
-      <div className={`modal-pop-wrap xsm mount`}>
+      <WithDraggable.Header
-        <div className="modal-head modal-handle">
+        title={getMessage('modal.canvas.setting.font.plan.absorption.plan.size.setting')}
-          <h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.plan.size.setting')}</h1>
+        onClose={() => {
-          <button
-            className="modal-close"
-            onClick={() => {
           setIsShow(false)
           closePopup(id, true)
         }}
-          >
+      />
-            닫기
+      <WithDraggable.Body>
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="slope-wrap">
           <div className="outline-form mb10">
             <span style={{ width: 'auto' }}>{getMessage('common.horizon')}</span>
@@ -80,7 +72,7 @@ export default function PlanSizeSetting(props) {
                 type="text"
                 className="input-origin block"
                 name={`originHorizon`}
-                  value={planSizeSettingMode.originHorizon}
+                value={planSizeSettingMode.originHorizon * 10}
                 onChange={(e) => onlyNumberInputChange(e, changeInput)}
               />
             </div>
@@ -93,7 +85,7 @@ export default function PlanSizeSetting(props) {
                 type="text"
                 className="input-origin block"
                 name={`originVertical`}
-                  value={planSizeSettingMode.originVertical}
+                value={planSizeSettingMode.originVertical * 10}
                 onChange={(e) => onlyNumberInputChange(e, changeInput)}
               />
             </div>
@@ -105,9 +97,7 @@ export default function PlanSizeSetting(props) {
             {getMessage('modal.common.save')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

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

@@ -39,17 +39,9 @@ export default function WallLineOffsetSetting({ id, pos = { x: 50, y: 230 } }) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} className="r">
-      <div className={`modal-pop-wrap r`}>
+      <WithDraggable.Header title={getMessage('modal.wallline.offset.setting')} onClose={() => closePopup(id)} />
-        <div className="modal-head modal-handle">
+      <WithDraggable.Body>
-          <h1 className="title">{getMessage('modal.wallline.offset.setting')}</h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
         <div className="modal-btn-wrap">
           {buttonMenu.map((item) => (
             <button key={item.id} className={`btn-frame modal ${type === item.type ? 'act' : ''}`} onClick={() => setType(item.type)}>
@@ -67,9 +59,7 @@ export default function WallLineOffsetSetting({ id, pos = { x: 50, y: 230 } }) {
             {getMessage('modal.common.save')}
           </button>
         </div>
-        </div>
+      </WithDraggable.Body>
-        <div className="modal-foot modal-handle"></div>
-      </div>
     </WithDraggable>
   )
 }

src/components/floor-plan/modal/wallLineOffset/type/Offset.jsx

@@ -23,7 +23,7 @@ export default function Offset({ length1Ref, arrow1Ref, currentWallLineRef }) {
 
   const keyDown = (e) => {
     if (currentWallLineRef.current === null) {
-      alert('보조선을 먼저 선택하세요')
+      // alert('보조선을 먼저 선택하세요')
       return
     }
 

src/components/main/MainContents.jsx

@@ -199,7 +199,7 @@ export default function MainContents({ setFaqOpen, setFaqModalNoticeNo }) {
             </div>
           )}
         </ProductItem>
-        <ProductItem num={4} name={'Data Download'}>
+        <ProductItem num={4} name={getMessage('main.archive')}>
           {fileList.length > 0 ? (
             <div className="data-download-wrap">
               {fileList?.map((file) => (

src/components/management/StuffDetail.jsx

@@ -140,6 +140,7 @@ export default function StuffDetail() {
         headerName: getMessage('stuff.detail.planGridHeader.moduleModel'),
         flex: 1,
         wrapText: true,
+        autoHeight: true,
         cellStyle: { alignItems: 'flex-start' /* 좌측정렬*/, cursor: 'pointer' },
         cellRenderer: (params) => {
           let origin = params.value
@@ -370,6 +371,7 @@ export default function StuffDetail() {
             swalFire({
               text: getMessage('stuff.detail.header.notExistObjectNo'),
               type: 'alert',
+              icon: 'error',
               confirmFn: () => {
                 router.push('/management/stuff', { scroll: false })
               },
@@ -387,6 +389,7 @@ export default function StuffDetail() {
           swalFire({
             text: getMessage('stuff.detail.header.notExistObjectNo'),
             type: 'alert',
+            icon: 'error',
             confirmFn: () => {
               router.push('/management/stuff', { scroll: false })
             },

src/hooks/common/useCommonCode.js

@@ -33,6 +33,8 @@ export const useCommonCode = () => {
         clCode: code.clCode,
         clCodeNm: globalLocale === 'ko' ? code.clCodeNm : code.clCodeJp,
         clPriority: code.clPriority,
+        clRefChr1: code.clRefChr1,
+        clRefChr2: code.clRefChr2,
       }
       return result
     })

src/hooks/floorPlan/estimate/useEstimateController.js

@@ -129,6 +129,7 @@ export const useEstimateController = (planNo, flag) => {
           delFlg: '0', //삭제 플래그 0 삭제하면 1
           addFlg: true,
           paDispOrder: null,
+          dispCableFlg: '0',
         },
       ],
     })
@@ -165,11 +166,6 @@ export const useEstimateController = (planNo, flag) => {
 
   //견적서 저장
   const handleEstimateSubmit = async () => {
-    //todo: 추후 YJSS가 다시 나타날 경우 아래 swalFire 제거 필요
-    if (estimateData.estimateType === 'YJSS') {
-      return swalFire({ text: getMessage('estimate.detail.save.requiredEstimateType'), type: 'alert', icon: 'warning' })
-    }
-
     //0. 필수체크
     let flag = true
     let originFileFlg = false
@@ -298,6 +294,21 @@ export const useEstimateController = (planNo, flag) => {
                 }
               }
             }
+          } else {
+            if (item.salePrice === null) {
+              item.salePrice = '0'
+            } else if (isNaN(item.salePrice)) {
+              item.salePrice = '0'
+            }
+
+            if (item.unitPrice === null) {
+              item.unitPrice = '0'
+            } else if (isNaN(item.unitPrice)) {
+              item.unitPrice = '0'
+            }
+
+            //봄 컴포넌트 제품은 0으로
+            item.openFlg = '0'
           }
         }
       })
@@ -382,6 +393,7 @@ export const useEstimateController = (planNo, flag) => {
 
     estimateData.estimateOption = estimateOptions
     // console.log('최종아이템:::', estimateData.itemList)
+
     if (fileList?.length > 0) {
       estimateData.fileList = fileList
     } else {
@@ -409,7 +421,7 @@ export const useEstimateController = (planNo, flag) => {
       })
     } catch (e) {
       setIsGlobalLoading(false)
-      console.log('error::::::::::::', e.response.data.message)
+      console.error('error::::::::::::', e.response.data.message)
     }
   }
 
@@ -419,10 +431,6 @@ export const useEstimateController = (planNo, flag) => {
    *  T01관리자 계정 및 1차판매점에게만 제공
    */
   const handleEstimateCopy = async (sendPlanNo, copyReceiveUser, saleStoreId, otherSaleStoreId, setEstimateCopyPopupOpen) => {
-    //todo: 추후 YJSS가 다시 나타날 경우 아래 swalFire 제거 필요
-    if (estimateData.estimateType === 'YJSS') {
-      return swalFire({ text: getMessage('estimate.detail.save.requiredEstimateType'), type: 'alert', icon: 'warning' })
-    }
     if (saleStoreId === '') {
       return swalFire({
         text: getMessage('estimate.detail.productFeaturesPopup.requiredStoreId'),

src/hooks/module/useModuleBasicSetting.js

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+
 import {
   canvasSettingState,
   canvasState,
@@ -8,6 +9,7 @@ import {
   isManualModuleLayoutSetupState,
   isManualModuleSetupState,
 } from '@/store/canvasAtom'
+
 import { rectToPolygon, polygonToTurfPolygon, calculateVisibleModuleHeight, getDegreeByChon, toFixedWithoutRounding } from '@/util/canvas-util'
 import { basicSettingState, roofDisplaySelector } from '@/store/settingAtom'
 import offsetPolygon, { calculateAngle, createLinesFromPolygon } from '@/util/qpolygon-utils'
@@ -436,7 +438,6 @@ export function useModuleBasicSetting(tabNum) {
     if (isManualModuleLayoutSetup) {
       setIsManualModuleLayoutSetup(false)
     }
-
     const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴
 
     if (isManualModuleSetup) {
@@ -506,20 +507,20 @@ export function useModuleBasicSetting(tabNum) {
 
             const points = [
               {
-                x: Number(mousePoint.x.toFixed(1)) + Number((width / 2).toFixed(1)),
+                x: toFixedWithoutRounding(mousePoint.x, 2) + toFixedWithoutRounding(width / 2, 2),
-                y: Number(mousePoint.y.toFixed(1)) - Number((height / 2).toFixed(1)),
+                y: toFixedWithoutRounding(mousePoint.y, 2) - toFixedWithoutRounding(height / 2, 2),
               },
               {
-                x: Number(mousePoint.x.toFixed(1)) + Number((width / 2).toFixed(1)),
+                x: toFixedWithoutRounding(mousePoint.x, 2) + toFixedWithoutRounding(width / 2, 2),
-                y: Number(mousePoint.y.toFixed(1)) + Number((height / 2).toFixed(1)),
+                y: toFixedWithoutRounding(mousePoint.y, 2) + toFixedWithoutRounding(height / 2, 2),
               },
               {
-                x: Number(mousePoint.x.toFixed(1)) - Number((width / 2).toFixed(1)),
+                x: toFixedWithoutRounding(mousePoint.x, 2) - toFixedWithoutRounding(width / 2, 2),
-                y: Number(mousePoint.y.toFixed(1)) - Number((height / 2).toFixed(1)),
+                y: toFixedWithoutRounding(mousePoint.y, 2) - toFixedWithoutRounding(height / 2, 2),
               },
               {
-                x: Number(mousePoint.x.toFixed(1)) - Number((width / 2).toFixed(1)),
+                x: toFixedWithoutRounding(mousePoint.x, 2) - toFixedWithoutRounding(width / 2, 2),
-                y: Number(mousePoint.y.toFixed(1)) + Number((height / 2).toFixed(1)),
+                y: toFixedWithoutRounding(mousePoint.y, 2) + toFixedWithoutRounding(height / 2, 2),
               },
             ]
 
@@ -535,10 +536,10 @@ export function useModuleBasicSetting(tabNum) {
                 fill: 'white',
                 stroke: 'black',
                 strokeWidth: 0.3,
-                width: Number(width.toFixed(1)),
+                width: toFixedWithoutRounding(width, 2),
-                height: Number(height.toFixed(1)),
+                height: toFixedWithoutRounding(height, 2),
-                left: Number(mousePoint.x.toFixed(1) - Number((width / 2).toFixed(1))),
+                left: toFixedWithoutRounding(mousePoint.x, 2) - toFixedWithoutRounding(width / 2, 2),
-                top: Number(mousePoint.y.toFixed(1) - Number((height / 2).toFixed(1))),
+                top: toFixedWithoutRounding(mousePoint.y, 2) - toFixedWithoutRounding(height / 2, 2),
                 selectable: false,
                 lockMovementX: true,
                 lockMovementY: true,
@@ -571,67 +572,84 @@ export function useModuleBasicSetting(tabNum) {
                   ? moduleSetupSurfaces[i].trestleDetail.moduleIntvlVer / 10
                   : moduleSetupSurfaces[i].trestleDetail.moduleIntvlHor / 10
 
-              const trestleLeft = Number(moduleSetupSurfaces[i].left.toFixed(1)) - Number((moduleSetupSurfaces[i].width / 2).toFixed(1))
+              const trestleLeft = toFixedWithoutRounding(moduleSetupSurfaces[i].left, 2) - toFixedWithoutRounding(moduleSetupSurfaces[i].width / 2, 2)
-              const trestleTop = Number(moduleSetupSurfaces[i].top.toFixed(1)) - Number((moduleSetupSurfaces[i].height / 2).toFixed(1))
+              const trestleTop = toFixedWithoutRounding(moduleSetupSurfaces[i].top, 2) - toFixedWithoutRounding(moduleSetupSurfaces[i].height / 2, 2)
-              const trestleRight = Number(moduleSetupSurfaces[i].left.toFixed(1)) + Number((moduleSetupSurfaces[i].width / 2).toFixed(1))
+              const trestleRight =
-              const trestleBottom = Number(moduleSetupSurfaces[i].top.toFixed(1)) + Number((moduleSetupSurfaces[i].height / 2).toFixed(1))
+                toFixedWithoutRounding(moduleSetupSurfaces[i].left, 2) + toFixedWithoutRounding(moduleSetupSurfaces[i].width / 2, 2)
+              const trestleBottom =
+                toFixedWithoutRounding(moduleSetupSurfaces[i].top, 2) + toFixedWithoutRounding(moduleSetupSurfaces[i].height / 2, 2)
               const bigCenterY = (trestleTop + trestleTop + moduleSetupSurfaces[i].height) / 2
 
               // 이동하는 모듈의 경계 좌표
-              const smallLeft = Number(tempModule.left.toFixed(1))
+              const smallLeft = toFixedWithoutRounding(tempModule.left, 2)
-              const smallTop = Number(tempModule.top.toFixed(1))
+              const smallTop = toFixedWithoutRounding(tempModule.top, 2)
-              const smallRight = smallLeft + Number(tempModule.width.toFixed(1))
+              const smallRight = smallLeft + toFixedWithoutRounding(tempModule.width, 2)
-              const smallBottom = smallTop + Number(tempModule.height.toFixed(1))
+              const smallBottom = smallTop + toFixedWithoutRounding(tempModule.height, 2)
-              const smallCenterX = smallLeft + Number((tempModule.width / 2).toFixed(1))
+              const smallCenterX = smallLeft + toFixedWithoutRounding(tempModule.width / 2, 2)
-              const smallCenterY = smallTop + Number((tempModule.height / 2).toFixed(1))
+              const smallCenterY = smallTop + toFixedWithoutRounding(tempModule.height / 2, 2)
 
               /**
                * 미리 깔아놓은 셀이 있을때 셀에 흡착됨
                */
               if (manualDrawModules) {
                 manualDrawModules.forEach((cell) => {
-                  const holdCellLeft = cell.left
+                  const holdCellLeft = toFixedWithoutRounding(cell.left, 2)
-                  const holdCellTop = cell.top
+                  const holdCellTop = toFixedWithoutRounding(cell.top, 2)
-                  const holdCellRight = holdCellLeft + Number(cell.width.toFixed(1))
+                  const holdCellRight = holdCellLeft + toFixedWithoutRounding(cell.width, 2)
-                  const holdCellBottom = holdCellTop + Number(cell.height.toFixed(1))
+                  const holdCellBottom = holdCellTop + toFixedWithoutRounding(cell.height, 2)
-                  const holdCellCenterX = holdCellLeft + Number((cell.width / 2).toFixed(1))
+                  const holdCellCenterX = holdCellLeft + toFixedWithoutRounding(cell.width / 2, 2)
-                  const holdCellCenterY = holdCellTop + Number((cell.height / 2).toFixed(1))
+                  const holdCellCenterY = holdCellTop + toFixedWithoutRounding(cell.height / 2, 2)
+
+                  //가운데 -> 가운대
+                  if (Math.abs(smallCenterX - holdCellCenterX) < snapDistance) {
+                    tempModule.left = holdCellCenterX - toFixedWithoutRounding(width / 2, 2)
+                  }
+
+                  //왼쪽 -> 가운데
+                  if (Math.abs(smallLeft - holdCellCenterX) < snapDistance) {
+                    // console.log('holdCellCenterX', holdCellCenterX)
+                    // console.log('smallLeft', smallLeft)
+
+                    // console.log('모듈 센터에 스냅')
+                    tempModule.left = holdCellCenterX + intvHor / 2
+
+                    // console.log('tempModule.left', tempModule.left)
+                  }
+                  // 오른쪽 -> 가운데
+                  if (Math.abs(smallRight - holdCellCenterX) < snapDistance) {
+                    tempModule.left = holdCellCenterX - width - intvHor / 2
+                  }
 
                   //설치된 셀에 좌측에 스냅
                   if (Math.abs(smallRight - holdCellLeft) < snapDistance) {
+                    // console.log('모듈 좌측 스냅')
                     tempModule.left = holdCellLeft - width - intvHor
                   }
 
                   //설치된 셀에 우측에 스냅
                   if (Math.abs(smallLeft - holdCellRight) < snapDistance) {
+                    // console.log('모듈 우측 스냅')
                     tempModule.left = holdCellRight + intvHor
                   }
-
                   //설치된 셀에 위쪽에 스냅
-                  if (Math.abs(smallBottom - holdCellTop) < snapDistance) {
+                  if (Math.abs(smallBottom - holdCellTop) < 10) {
                     tempModule.top = holdCellTop - height - intvVer
                   }
 
                   //설치된 셀에 밑쪽에 스냅
-                  if (Math.abs(smallTop - holdCellBottom) < snapDistance) {
+                  if (Math.abs(smallTop - holdCellBottom) < 10) {
                     tempModule.top = holdCellBottom + intvVer
                   }
-                  //가운데 -> 가운데
+
-                  if (Math.abs(smallCenterX - holdCellCenterX) < snapDistance) {
+                  //설치된 셀에 윗쪽에 스냅
-                    tempModule.left = holdCellCenterX - Number((width / 2).toFixed(1))
+                  if (Math.abs(smallTop - holdCellTop) < 10) {
-                  }
+                    tempModule.top = holdCellTop
-                  //왼쪽 -> 가운데
-                  if (Math.abs(smallLeft - holdCellCenterX) < snapDistance) {
-                    tempModule.left = holdCellCenterX
-                  }
-                  // 오른쪽 -> 가운데
-                  if (Math.abs(smallRight - holdCellCenterX) < snapDistance) {
-                    tempModule.left = holdCellCenterX - width
                   }
+
                   //세로 가운데 -> 가운데
-                  if (Math.abs(smallCenterY - holdCellCenterY) < snapDistance) {
+                  // if (Math.abs(smallCenterY - holdCellCenterY) < snapDistance) {
-                    tempModule.top = holdCellCenterY - Number((height / 2).toFixed(1))
+                  //   tempModule.top = holdCellCenterY - toFixedWithoutRounding(height / 2, 1)
-                  }
+                  // }
                   // //위쪽 -> 가운데
                   // if (Math.abs(smallTop - holdCellCenterY) < cellSnapDistance) {
                   //   tempModule.top = holdCellCenterY
@@ -713,13 +731,19 @@ export function useModuleBasicSetting(tabNum) {
           if (!inside) return
           if (tempModule) {
             const rectPoints = [
-              { x: Number(tempModule.left.toFixed(1)), y: Number(tempModule.top.toFixed(1)) },
+              { x: toFixedWithoutRounding(tempModule.left, 2), y: toFixedWithoutRounding(tempModule.top, 2) },
-              { x: Number(tempModule.left.toFixed(1)) + Number(tempModule.width.toFixed(1)), y: Number(tempModule.top.toFixed(1)) },
               {
-                x: Number(tempModule.left.toFixed(1)) + Number(tempModule.width.toFixed(1)),
+                x: toFixedWithoutRounding(tempModule.left, 2) + toFixedWithoutRounding(tempModule.width, 2),
-                y: Number(tempModule.top.toFixed(1)) + Number(tempModule.height.toFixed(1)),
+                y: toFixedWithoutRounding(tempModule.top, 2),
+              },
+              {
+                x: toFixedWithoutRounding(tempModule.left, 2) + toFixedWithoutRounding(tempModule.width, 2),
+                y: toFixedWithoutRounding(tempModule.top, 2) + toFixedWithoutRounding(tempModule.height, 2),
+              },
+              {
+                x: toFixedWithoutRounding(tempModule.left, 2),
+                y: toFixedWithoutRounding(tempModule.top, 2) + toFixedWithoutRounding(tempModule.height, 2),
               },
-              { x: Number(tempModule.left.toFixed(1)), y: Number(tempModule.top.toFixed(1)) + Number(tempModule.height.toFixed(1)) },
             ]
 
             tempModule.set({ points: rectPoints })
@@ -756,11 +780,13 @@ export function useModuleBasicSetting(tabNum) {
                 let manualModule = new QPolygon(tempModule.points, {
                   ...moduleOptions,
                   moduleInfo: checkedModule[0],
-                  left: Number(tempModule.left.toFixed(1)),
+                  left: toFixedWithoutRounding(tempModule.left, 2),
-                  top: Number(tempModule.top.toFixed(1)),
+                  top: toFixedWithoutRounding(tempModule.top, 2),
-                  width: Number(tempModule.width.toFixed(1)),
+                  width: toFixedWithoutRounding(tempModule.width, 2),
-                  height: Number(tempModule.height.toFixed(1)),
+                  height: toFixedWithoutRounding(tempModule.height, 2),
+                  toFixed: 2,
                 })
+
                 canvas?.add(manualModule)
                 manualDrawModules.push(manualModule)
                 setModuleStatisticsData()

src/hooks/module/useTrestle.js

@@ -619,6 +619,9 @@ export const useTrestle = () => {
 
   //module Rack 정보를 얻기위한 데이터 가공
   function moduleTransformData(arr) {
+    //arr의 moduleTpCd를 이용하여 정렬
+    arr = arr.sort((a, b) => a.moduleTpCd.localeCompare(b.moduleTpCd))
+
     let counts = {}
 
     arr.forEach((item) => {
@@ -1649,10 +1652,29 @@ export const useTrestle = () => {
       }
     }
 
+    switch (direction) {
+      case 'south': {
+        startPointY -= 5
+        break
+      }
+      case 'east': {
+        startPointX -= 5
+        break
+      }
+      case 'west': {
+        startPointX -= 5
+        break
+      }
+      case 'north': {
+        startPointY -= 5
+        break
+      }
+    }
+
     for (let i = 0; i < count; i++) {
       const bracket = new fabric.Rect({
-        left: startPointX - 5,
+        left: startPointX,
-        top: startPointY - 5,
+        top: startPointY,
         fill: 'green',
         name: TRESTLE_MATERIAL.BRACKET,
         parentId: module.id,
@@ -1664,14 +1686,15 @@ export const useTrestle = () => {
       })
       canvas.add(bracket)
       canvas.renderAll()
+      const maxIntvl = Math.max(moduleIntvlHor, moduleIntvlVer)
       if (direction === 'south') {
-        startPointY -= height - moduleIntvlVer / 10
+        startPointY -= height + maxIntvl / 10
       } else if (direction === 'north') {
-        startPointY += height + moduleIntvlVer / 10
+        startPointY += height + maxIntvl / 10
       } else if (direction === 'east') {
-        startPointX -= width - moduleIntvlHor / 10
+        startPointX -= width + maxIntvl / 10
       } else if (direction === 'west') {
-        startPointX += width + moduleIntvlHor / 10
+        startPointX += width + maxIntvl / 10
       }
     }
   }
@@ -1730,7 +1753,7 @@ export const useTrestle = () => {
       const { width, height } = { ...module }
       widthArr.push(width)
       heightArr.push(height)
-      centerPoints.push({ x, y, width: Math.floor(width), height: Math.floor(height), index, moduleInfo: module.moduleInfo })
+      centerPoints.push({ x, y, width: Math.floor(width), height: Math.floor(height), index, moduleInfo: module.moduleInfo, module })
     })
 
     //widthArr 중복 제거 1이상 차이가 나지 않으면 같은 너비로 간주
@@ -1804,7 +1827,13 @@ export const useTrestle = () => {
     let rightExposedHalfTopPoints = []
 
     centerPoints.forEach((centerPoint, index) => {
-      let { x, y, width, height, widthArr, heightArr } = { ...centerPoint }
+      let { x, y, width, height, widthArr, heightArr, module } = { ...centerPoint }
+
+      /* 디버깅용
+      const originFill = module.fill
+      module.set('fill', 'red')
+      canvas.renderAll()*/
+
       // centerPoints중에 현재 centerPoint와 x값이 같고, y값이 y-height값과 같은 centerPoint가 있는지 확인
       let bottomCell
       let bottomLeftPoint
@@ -1894,7 +1923,12 @@ export const useTrestle = () => {
 
           break
       }
+      /**
+       * 디버깅용
 
+      module.set('fill', originFill)
+      canvas.renderAll()
+       */
       if (bottomCell) {
         return
       }
@@ -1911,13 +1945,18 @@ export const useTrestle = () => {
         }
       } else if (leftBottomCnt + rightBottomCnt === 0) {
         exposedBottomPoints.push(centerPoint)
+      } else if (leftBottomCnt + rightBottomCnt === 2) {
+        touchDimension++
       }
     })
     // 노출상면 및 접면 체크
 
     centerPoints.forEach((centerPoint, index) => {
-      let { x, y, width, height, widthArr, heightArr } = { ...centerPoint }
+      let { x, y, width, height, widthArr, heightArr, module } = { ...centerPoint }
-
+      const originFill = module.fill
+      /* 디버깅용
+      module.set('fill', 'blue')
+      canvas.renderAll()*/
       let topCell
       let topLeftPoint
       let topRightPoint
@@ -1930,7 +1969,8 @@ export const useTrestle = () => {
           height = height + vertical
           heightArr.forEach((h) => {
             if (topCell) return
-            topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - x) < maxX && Math.abs(centerPoint.y - (y + h)) < maxY)
+            topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - x) < maxX && Math.abs(centerPoint.y - (y - h)) < maxY)
+
             if (leftTopCnt === 0) {
               topLeftPoint = { x: x - width / 2, y: y - h }
               leftTopCnt = centerPoints.filter(
@@ -1949,7 +1989,7 @@ export const useTrestle = () => {
           height = height + vertical
           heightArr.forEach((h) => {
             if (topCell) return
-            topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - x) < maxX && Math.abs(centerPoint.y - (y - h)) < maxY)
+            topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - x) < maxX && Math.abs(centerPoint.y - (y + h)) < maxY)
             if (leftTopCnt === 0) {
               topLeftPoint = { x: x + width / 2, y: y + h }
               leftTopCnt = centerPoints.filter(
@@ -1968,7 +2008,7 @@ export const useTrestle = () => {
           width = width + horizontal
           widthArr.forEach((w) => {
             if (topCell) return
-            topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - (x + w)) < maxX && Math.abs(centerPoint.y - y) < maxY)
+            topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - (x - w)) < maxX && Math.abs(centerPoint.y - y) < maxY)
             if (leftTopCnt === 0) {
               topLeftPoint = { x: x - w, y: y + height / 2 }
               leftTopCnt = centerPoints.filter(
@@ -1988,7 +2028,7 @@ export const useTrestle = () => {
           width = width + horizontal
           widthArr.forEach((w) => {
             if (topCell) return
-            topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - (x - w)) < maxX && Math.abs(centerPoint.y - y) < maxY)
+            topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - (x + w)) < maxX && Math.abs(centerPoint.y - y) < maxY)
             if (leftTopCnt === 0) {
               topLeftPoint = { x: x + w, y: y - height / 2 }
               leftTopCnt = centerPoints.filter(
@@ -2010,6 +2050,13 @@ export const useTrestle = () => {
         return
       }
 
+      /**
+       * 디버깅 용
+
+      module.set('fill', originFill)
+      canvas.renderAll()
+       */
+
       if (leftTopCnt + rightTopCnt === 2) {
         touchDimension++
         return

src/hooks/option/useCanvasSetting.js

@@ -612,6 +612,9 @@ export function useCanvasSetting(executeEffect = true) {
 
         /** 도면크기 설정 */
         setPlanSizeSettingMode({ ...planSizeSettingMode, originHorizon: res.originHorizon, originVertical: res.originVertical })
+        canvas.setWidth(res.originHorizon)
+        canvas.setHeight(res.originVertical)
+        canvas.renderAll()
 
         /** 데이터 설정 */
         setSettingModalFirstOptions({

src/hooks/roofcover/useAuxiliaryDrawing.js

@@ -22,6 +22,7 @@ import { useSwal } from '@/hooks/useSwal'
 import { usePopup } from '@/hooks/usePopup'
 import { calculateAngle, isSamePoint } from '@/util/qpolygon-utils'
 import { POLYGON_TYPE } from '@/common/common'
+import { useMessage } from '../useMessage'
 
 // 보조선 작성
 export function useAuxiliaryDrawing(id, isUseEffect = true) {
@@ -34,6 +35,7 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
   const { swalFire } = useSwal()
   const { getAdsorptionPoints } = useAdsorptionPoint()
   const { closePopup } = usePopup()
+  const { getMessage } = useMessage()
 
   const adsorptionRange = useRecoilValue(adsorptionRangeState)
 
@@ -411,7 +413,7 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
     const length1Value = length1Ref.current.value
 
     if (diagonalLength <= length1Value) {
-      alert('대각선 길이는 직선 길이보다 길어야 합니다.')
+      // alert('대각선 길이는 직선 길이보다 길어야 합니다.')
       return
     }
 
@@ -832,7 +834,8 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
   }
 
   const handleFix = () => {
-    if (!confirm('지붕선 완료하시겠습니까?')) {
+    // if (!confirm('보조선 작성을 완료하시겠습니까?')) {
+    if (!confirm(getMessage('want.to.complete.auxiliary.creation'))) {
       return
     }
 

src/hooks/roofcover/useOuterLineWall.js

@@ -567,7 +567,7 @@ export function useOuterLineWall(id, propertiesId) {
     const length1Value = length1Ref.current.value
 
     if (diagonalLength <= length1Value) {
-      alert('대각선 길이는 직선 길이보다 길어야 합니다.')
+      // alert('대각선 길이는 직선 길이보다 길어야 합니다.')
       return
     }
 
@@ -890,7 +890,7 @@ export function useOuterLineWall(id, propertiesId) {
     })
 
     if (isAllRightAngle) {
-      alert('부정확한 다각형입니다.')
+      // alert('부정확한 다각형입니다.')
       return
     }
 

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -446,12 +446,10 @@ export function useRoofAllocationSetting(id) {
    * 지붕재 변경
    */
   const handleChangeRoofMaterial = (value, index) => {
-    const selectedIndex = roofMaterials.findIndex((roof) => roof.selected)
-
     const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value.id)
     const newRoofList = currentRoofList.map((roof, idx) => {
       if (idx === index) {
-        return { ...selectedRoofMaterial }
+        return { ...selectedRoofMaterial, selected: roof.selected }
       }
       return roof
     })

src/hooks/roofcover/useWallLineOffsetSetting.js

@@ -192,7 +192,7 @@ export function useWallLineOffsetSetting(id) {
 
   const handleSave = () => {
     if (currentWallLineRef.current === null) {
-      alert('보조선을 먼저 선택하세요')
+      // alert('보조선을 먼저 선택하세요')
       return
     }
     switch (type) {

src/hooks/surface/usePlacementShapeDrawing.js

@@ -564,7 +564,7 @@ export function usePlacementShapeDrawing(id) {
     const length1Value = length1Ref.current.value
 
     if (diagonalLength <= length1Value) {
-      alert('대각선 길이는 직선 길이보다 길어야 합니다.')
+      // alert('대각선 길이는 직선 길이보다 길어야 합니다.')
       return
     }
 
@@ -886,7 +886,7 @@ export function usePlacementShapeDrawing(id) {
     })
 
     if (isAllRightAngle) {
-      alert('부정확한 다각형입니다.')
+      // alert('부정확한 다각형입니다.')
       return
     }
 

src/locales/ja.json

@@ -5,11 +5,11 @@
   "header.menus.management": "見積書管理画面",
   "header.menus.management.newStuff": "新規見積登録",
   "header.menus.management.detail": "物件詳細",
-  "header.menus.management.stuffList": "見積状況",
+  "header.menus.management.stuffList": "物件検索",
   "header.menus.community": "コミュニティ",
   "header.menus.community.notice": "お知らせ",
   "header.menus.community.faq": "FAQ",
-  "header.menus.community.archive": "見積書出力",
+  "header.menus.community.archive": "各種資料ダウンロード",
   "header.logout": "ログアウト",
   "header.go": "移動",
   "header.online.warranty.system": "オンライン保証システム",
@@ -178,7 +178,7 @@
   "modal.roof.alloc.select.parallel": "筋配置",
   "modal.roof.alloc.select.stairs": "千鳥配置",
   "modal.roof.alloc.apply": "選択した屋根材として割り当て",
-  "plan.menu.estimate.docDown": "見積書出力",
+  "plan.menu.estimate.docDown": "各種資料ダウンロード",
   "plan.menu.estimate.save": "保存",
   "plan.menu.estimate.reset": "初期化",
   "plan.menu.estimate.copy": "見積書のコピー",
@@ -229,7 +229,7 @@
   "modal.dormer.offset.info": "移動する距離と方向を入力してください。",
   "modal.common.save": "保存",
   "modal.common.add": "追加",
-  "modal.common.prev": "以前",
+  "modal.common.prev": "前に戻る",
   "modal.common.next": "次",
   "modal.canvas.setting.font.plan.edit": "フォントとサイズの変更",
   "modal.canvas.setting.font.plan.edit.word": "文字フォントの変更",
@@ -557,7 +557,7 @@
   "board.notice.sub.title": "お知らせ一覧",
   "board.faq.title": "FAQ",
   "board.faq.sub.title": "FAQリスト",
-  "board.archive.title": "資料のダウンロード",
+  "board.archive.title": "各種資料ダウンロード",
   "board.archive.sub.title": "見積書一覧",
   "board.list.header.rownum": "番号",
   "board.list.header.title": "タイトル",
@@ -849,9 +849,10 @@
   "main.storeName": "販売店名",
   "main.objectNo": "物件番号",
   "main.faq": "FAQ",
+  "main.archive": "各種資料ダウンロード",
   "main.content.objectList.noData1": "登録された商品情報はありません。",
   "main.content.objectList.noData2": "下のボタンをクリックして商品情報を登録してください。",
-  "main.content.objectList": "最近の更新物件一覧",
+  "main.content.objectList": "直近の見積書一覧",
   "main.content.notice": "お知らせ",
   "main.content.download1": "操作マニュアル",
   "main.content.download2": "屋根の説明書",
@@ -1032,5 +1033,6 @@
   "canvas.infomation.text": "数字は [半角] 入力のみ可能です。",
   "roof.exceed.count": "屋根材は4つまで選択可能です。",
   "outerLine.property.fix": "外壁線の属性設定 を完了しますか？",
-  "outerLine.property.close": "外壁線の属性設定 を終了しますか？"
+  "outerLine.property.close": "外壁線の属性設定 を終了しますか？",
+  "want.to.complete.auxiliary.creation": "보補助線の作成を完了しますか?"
 }

src/locales/ko.json

@@ -9,7 +9,7 @@
   "header.menus.community": "커뮤니티",
   "header.menus.community.notice": "공지사항",
   "header.menus.community.faq": "FAQ",
-  "header.menus.community.archive": "문서다운로드",
+  "header.menus.community.archive": "각종 자료 다운로드",
   "header.logout": "로그아웃",
   "header.go": "이동",
   "header.online.warranty.system": "온라인보증시스템",
@@ -557,7 +557,7 @@
   "board.notice.sub.title": "공지사항 목록",
   "board.faq.title": "FAQ",
   "board.faq.sub.title": "FAQ 목록",
-  "board.archive.title": "자료 다운로드",
+  "board.archive.title": "각종 자료 다운로드",
   "board.archive.sub.title": "문서 목록",
   "board.list.header.rownum": "번호",
   "board.list.header.title": "제목",
@@ -849,6 +849,7 @@
   "main.storeName": "판매점명",
   "main.objectNo": "물건번호",
   "main.faq": "FAQ",
+  "main.archive": "각종 자료 다운로드",
   "main.content.objectList.noData1": "등록된 물건정보가 없습니다.",
   "main.content.objectList.noData2": "아래 버튼을 클릭하여 물건정보를 등록하십시오.",
   "main.content.objectList": "최근 갱신 물건목록",
@@ -1032,5 +1033,6 @@
   "canvas.infomation.text": "숫자는 [반각] 입력만 가능합니다.",
   "roof.exceed.count": "지붕재는 4개까지 선택 가능합니다.",
   "outerLine.property.fix": "외벽선 속성 설정을 완료하시겠습니까?",
-  "outerLine.property.close": "외벽선 속성 설정을 종료하시겠습니까?"
+  "outerLine.property.close": "외벽선 속성 설정을 종료하시겠습니까?",
+  "want.to.complete.auxiliary.creation": "보조선 작성을 완료하시겠습니까?"
 }

src/store/canvasAtom.js

@@ -43,7 +43,7 @@ export const fontSizeState = atom({
 export const canvasSizeState = atom({
   key: 'canvasSize',
   default: {
-    vertical: 1000,
+    vertical: 1600,
     horizontal: 1600,
   },
 })

src/styles/_canvasside.scss

@@ -86,6 +86,7 @@
     border: 1px solid #E9E9E9;
     background: #FFF;
     box-shadow: 0px 6px 14px 0px rgba(0, 0, 0, 0.05);
+    z-index: 110000;
     ul{
         padding: 17px 0;
         border-bottom: 1px solid #E9E9E9;

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;
@@ -214,7 +226,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;
@@ -243,7 +255,7 @@ $alert-color: #101010;
 .adsorption-point {
   display: flex;
   align-items: center;
-    background-color: #3A3A3A;
+  background-color: #3a3a3a;
   border-radius: 3px;
   padding-left: 11px;
   overflow: hidden;
@@ -264,7 +276,7 @@ $alert-color: #101010;
   &.act {
     i {
       color: $pop-color;
-            background-color: #1083E3;
+      background-color: #1083e3;
     }
   }
 }
@@ -293,7 +305,7 @@ $alert-color: #101010;
     background-color: transparent;
   }
   &::-webkit-scrollbar-thumb {
-        background-color: #D9D9D9;
+    background-color: #d9d9d9;
   }
   &::-webkit-scrollbar-track {
     background-color: transparent;
@@ -304,7 +316,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;
@@ -343,7 +355,6 @@ $alert-color: #101010;
           top: 50%;
           right: 0;
           transform: translateY(-50%);
-                    
         }
       }
       .input-grid {
@@ -353,7 +364,9 @@ $alert-color: #101010;
   }
 }
 .select-form {
-    .sort-select{width: 100%;}
+  .sort-select {
+    width: 100%;
+  }
 }
 .grid-select {
   flex: 1;
@@ -399,7 +412,6 @@ $alert-color: #101010;
   color: $pop-color;
   font-weight: $pop-normal-weight;
   padding-bottom: 15px;
-
 }
 .grid-direction {
   display: flex;
@@ -416,11 +428,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;
@@ -506,10 +524,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;
@@ -574,7 +593,6 @@ $alert-color: #101010;
     color: $pop-color;
     font-weight: $pop-normal-weight;
   }
-
 }
 
 .img-edit-wrap {
@@ -590,7 +608,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;
@@ -610,7 +628,6 @@ $alert-color: #101010;
   margin-left: 10px;
   input {
     flex: 1;
-
   }
   .img-check {
     flex: none;
@@ -636,8 +653,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);
+    }
   }
 }
 
@@ -717,7 +738,7 @@ $alert-color: #101010;
     align-items: center;
     justify-content: center;
     width: 50%;
-        background-color: #3D3D3D;
+    background-color: #3d3d3d;
     border-radius: 2px;
   }
 }
@@ -725,7 +746,7 @@ $alert-color: #101010;
 // 외벽선 속성 설정
 .properties-guide {
   font-size: $pop-normal-size;
-    color: #AAA;
+  color: #aaa;
   font-weight: $pop-normal-weight;
   margin-bottom: 14px;
 }
@@ -754,17 +775,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;
         }
@@ -793,8 +814,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%;
     }
@@ -805,13 +826,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;
+      }
     }
   }
 }
@@ -826,7 +851,7 @@ $alert-color: #101010;
 }
 .discrimination-box {
   padding: 16px 12px;
-    border: 1px solid #3D3D3D;
+  border: 1px solid #3d3d3d;
   border-radius: 2px;
 }
 
@@ -859,12 +884,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 {
@@ -914,7 +939,7 @@ $alert-color: #101010;
     font-weight: $pop-normal-weight;
     border: 1px solid #484848;
     background-color: #323234;
-        transition: background-color .13s ease-in-out;
+    transition: background-color 0.13s ease-in-out;
     i {
       display: block;
       width: 12px;
@@ -969,7 +994,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;
@@ -977,7 +1002,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;
@@ -1050,7 +1075,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;
@@ -1062,8 +1089,8 @@ $alert-color: #101010;
     }
     &.act,
     &:hover {
-            border-color: #008BFF;
+      border-color: #008bff;
-            background-color: #008BFF;
+      background-color: #008bff;
     }
   }
 }
@@ -1078,18 +1105,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;
     }
   }
 }
@@ -1175,11 +1211,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;
@@ -1191,11 +1243,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;
@@ -1272,7 +1340,7 @@ $alert-color: #101010;
 .warning {
   font-size: $pop-normal-size;
   font-weight: $pop-normal-weight;
-    color: #FFAFAF;
+  color: #ffafaf;
 }
 
 // 각 변 속성 변경
@@ -1328,37 +1396,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: '';
@@ -1412,13 +1600,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;
     }
@@ -1431,7 +1619,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);
     }
@@ -1464,7 +1652,9 @@ $alert-color: #101010;
         top: 22px;
       }
       &.act {
-                i{color: #8B8B8B;}
+        i {
+          color: #8b8b8b;
+        }
       }
     }
   }
@@ -1496,7 +1686,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;
     }
@@ -1510,7 +1700,7 @@ $alert-color: #101010;
 
 .module-table-box {
   flex: 1;
-    background-color: #3D3D3D;
+  background-color: #3d3d3d;
   border-radius: 2px;
   .module-table-inner {
     padding: 10px;
@@ -1523,7 +1713,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%;
@@ -1546,7 +1736,7 @@ $alert-color: #101010;
   .warning-guide {
     padding: 20px;
     .warning {
-            color: #FFCACA;
+      color: #ffcaca;
       max-height: 55px;
       overflow-y: auto;
       padding-right: 30px;
@@ -1555,7 +1745,7 @@ $alert-color: #101010;
         background-color: transparent;
       }
       &::-webkit-scrollbar-thumb {
-                background-color: #D9D9D9;
+        background-color: #d9d9d9;
       }
       &::-webkit-scrollbar-track {
         background-color: transparent;
@@ -1566,7 +1756,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 {
@@ -1575,7 +1765,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;
@@ -1603,7 +1793,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;
     }
@@ -1637,7 +1827,7 @@ $alert-color: #101010;
       background-color: transparent;
     }
     &::-webkit-scrollbar-thumb {
-            background-color: #D9D9D9;
+      background-color: #d9d9d9;
     }
     &::-webkit-scrollbar-track {
       background-color: transparent;
@@ -1686,7 +1876,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;
@@ -1717,7 +1907,7 @@ $alert-color: #101010;
     background-color: transparent;
   }
   &::-webkit-scrollbar-thumb {
-        background-color: #D9D9D9;
+    background-color: #d9d9d9;
   }
   &::-webkit-scrollbar-track {
     background-color: transparent;
@@ -1733,25 +1923,24 @@ $alert-color: #101010;
   padding-bottom: 14px;
   .outline-form {
     span {
-            color: #62C207;
+      color: #62c207;
     }
     .grid-select {
       .sort-select {
-                border: 1px solid #4E9E04;
+        border: 1px solid #4e9e04;
-                background-color: #1A3104;
+        background-color: #1a3104;
         p {
           line-height: 27px;
         }
         .select-item-wrap {
-                    background-color: #1A3104;
+          background-color: #1a3104;
-                    border: 1px solid #4E9E04;
+          border: 1px solid #4e9e04;
           .select-item:hover {
             background-color: #294e07;
           }
           &::-webkit-scrollbar {
             width: 2px;
             background-color: transparent;
-                        
           }
           &::-webkit-scrollbar-thumb {
             background-color: #fff;
@@ -1818,10 +2007,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;
       }
     }
@@ -1846,7 +2035,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;
@@ -1936,7 +2125,6 @@ $alert-color: #101010;
     min-height: 80px;
     background-color: #fff;
   }
-    
 }
 
 // 치수선 설정
@@ -2056,10 +2244,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;
@@ -2152,13 +2352,13 @@ $alert-color: #101010;
   max-height: 650px;
   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;
@@ -2168,7 +2368,6 @@ $alert-color: #101010;
   &.tab2 {
     margin-top: 10px;
     gap: 15px;
-        
   }
   .module-flex-item {
     flex: 1;
@@ -2177,7 +2376,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;
@@ -2224,3 +2423,167 @@ $alert-color: #101010;
     justify-content: flex-end;
   }
 }
+
+.pop-spinner {
+  position: absolute;
+  bottom: 10px;
+  left: 5px;
+  width: calc(100% - 10px);
+  height: calc(100% - 49px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba($color: #101010, $alpha: 0.5);
+  z-index: 2000000;
+  .loader {
+    font-size: 10px;
+    width: 1.2em;
+    height: 1.2em;
+    border-radius: 50%;
+    position: relative;
+    text-indent: -9999em;
+    animation: mulShdSpin 1.1s infinite ease;
+    transform: translateZ(0);
+  }
+  @keyframes mulShdSpin {
+    0%,
+    100% {
+      box-shadow:
+        0em -2.6em 0em 0em #fff,
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
+    }
+    12.5% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
+        1.8em -1.8em 0 0em #fff,
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
+    }
+    25% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7),
+        2.5em 0em 0 0em #fff,
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+    }
+    37.5% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.7),
+        1.75em 1.75em 0 0em #fff,
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+    }
+    50% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7),
+        0em 2.5em 0 0em #fff,
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+    }
+    62.5% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.7),
+        -1.8em 1.8em 0 0em #fff,
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+    }
+    75% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7),
+        -2.6em 0em 0 0em #fff,
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+    }
+    87.5% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.7),
+        -1.8em -1.8em 0 0em #fff;
+    }
+  }
+}
+
+.pop-spinner{
+    position: absolute;
+    bottom: 10px;
+    left: 5px;
+    width: calc(100% - 10px);
+    height: calc(100% - 49px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba($color: #101010, $alpha: 0.5);
+    z-index: 2000000;
+    .loader {
+        font-size: 10px;
+        width: 1.2em;
+        height: 1.2em;
+        border-radius: 50%;
+        position: relative;
+        text-indent: -9999em;
+        animation: mulShdSpin 1.1s infinite ease;
+        transform: translateZ(0);
+    }
+        @keyframes mulShdSpin {
+            0%,
+            100% {
+            box-shadow: 0em -2.6em 0em 0em #fff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
+            }
+            12.5% {
+            box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #fff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
+            }
+            25% {
+            box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #fff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+            }
+            37.5% {
+            box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #fff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+            }
+            50% {
+            box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #fff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+            }
+            62.5% {
+            box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #fff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+            }
+            75% {
+            box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #fff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+            }
+            87.5% {
+            box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #fff;
+            }
+        }
+}

src/util/qpolygon-utils.js

@@ -320,7 +320,7 @@ export const drawGabledRoof = (roofId, canvas, textMode) => {
   const wallLines = canvas?.getObjects().find((object) => object.name === POLYGON_TYPE.WALL && object.attributes.roofId === roof.id).lines
   const hasNonParallelLines = roofLines.filter((line) => line.x1 !== line.x2 && line.y1 !== line.y2)
   if (hasNonParallelLines.length > 0) {
-    alert('대각선이 존재합니다.')
+    // alert('대각선이 존재합니다.')
     return
   }
 
@@ -648,7 +648,7 @@ export const drawShedRoof = (roofId, canvas, textMode) => {
   const roof = canvas?.getObjects().find((object) => object.id === roofId)
   const hasNonParallelLines = roof.lines.filter((line) => Math.abs(line.x1 - line.x2) > 1 && Math.abs(line.y1 - line.y2) > 1)
   if (hasNonParallelLines.length > 0) {
-    alert('대각선이 존재합니다.')
+    // alert('대각선이 존재합니다.')
     return
   }
 
@@ -739,7 +739,7 @@ export const drawRidgeRoof = (roofId, canvas, textMode) => {
   //Math.abs(line.x1 - line.x2) > 1 && Math.abs(line.y1 - line.y2) > 1
   const hasNonParallelLines = roof.lines.filter((line) => Big(line.x1).minus(Big(line.x2)).gt(1) && Big(line.y1).minus(Big(line.y2)).gt(1))
   if (hasNonParallelLines.length > 0) {
-    alert('대각선이 존재합니다.')
+    // alert('대각선이 존재ㄴ합니다.')
     return
   }