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

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">
-      <div className={`modal-pop-wrap lr mount`}>
-        <div className="modal-head modal-handle">
-          <h1 className="title">{getMessage('modal.color.picker.title')}</h1>
-          <button
-            className="modal-close"
-            onClick={() => {
+    <WithDraggable isShow={true} pos={pos ?? ''} handle=".modal-handle" className="lr">
+      <WithDraggable.Header
+        title={getMessage('modal.color.picker.title')}
+        onClose={() => {
           if (setIsShow) {
             setIsShow(false)
           }
-              console.log(id)
           closePopup(id, isConfig)
         }}
-          >
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
+      />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }

src/components/common/draggable/WithDraggable.jsx

@@ -3,7 +3,16 @@
 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 = '',
+  isModal = true,
+  hasFooter = true,
+  isHidden = false,
+}) {
   const [position, setPosition] = useState(pos)
 
   const handleOnDrag = (e, data) => {
@@ -22,9 +31,52 @@ export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 },
           onDrag={(e, data) => handleOnDrag(e, data)}
           handle={handle === '' ? '.modal-handle' : handle}
         >
+          {isModal ? (
+            <div className={`modal-pop-wrap ${className}`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
               {children}
+              {hasFooter && <WithDraggableFooter />}
+            </div>
+          ) : (
+            <>{children}</>
+          )}
         </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 WithDraggablePanel({ children }) {
+  return <>{children}</>
+}
+
+function WithDraggableFooter() {
+  return <div className="modal-foot modal-handle"></div>
+}
+
+WithDraggable.Header = WithDraggableHeader
+WithDraggable.Body = WithDraggableBody
+WithDraggable.Panel = WithDraggablePanel
+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">
-      <div className={`modal-pop-wrap lrr mount`}>
-        <div className="modal-head modal-handle">
-          <h1 className="title">{getMessage('modal.font')}</h1>
-          <button
-            className="modal-close"
-            onClick={() => {
+    <WithDraggable isShow={true} pos={pos} handle=".modal-handle" className="lrr">
+      <WithDraggable.Header
+        title={getMessage('modal.font')}
+        onClose={() => {
           if (setIsShow) setIsShow(false)
           closePopup(id, isConfig)
         }}
-          >
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
+      />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }

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,
@@ -96,6 +99,7 @@ export default function Estimate({}) {
 
   const initEstimate = (currPid = currentPid) => {
     console.log('🚀 ~ initEstimate ~ currPid:', currPid)
+    setCableItem('')
     closeAll()
     setObjectNo(objectRecoil.floorPlanObjectNo)
 
@@ -107,6 +111,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,
@@ -551,7 +565,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,6 +698,22 @@ export default function Estimate({}) {
     setItemChangeYn(true)
   }
 
+  /* 케이블 select 변경시  */
+  const onChangeDisplayCableItem = (value, itemList) => {
+    //todo: 추후 YJSS가 다시 나타날 경우 아래 swalFire 제거 필요
+    if (estimateContextState.estimateType === 'YJSS') {
+      return swalFire({ text: getMessage('estimate.detail.save.requiredEstimateType'), type: 'alert', icon: 'warning' })
+    }
+    itemList.map((item, index) => {
+      if (item.dispCableFlg === '1') {
+        if (value !== '') {
+          onChangeDisplayItem(value, item.dispOrder, index)
+        }
+      }
+    })
+    setCableItem(value)
+  }
+
   // 아이템 자동완성 검색시 아이템 추가/변경시
   const onChangeDisplayItem = (itemId, dispOrder, index) => {
     //todo: 추후 YJSS가 다시 나타날 경우 아래 swalFire 제거 필요
@@ -1679,6 +1709,25 @@ 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}
+                  >
+                    {/* <option value={''}>selected</option> */}
+                    {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">
@@ -1758,7 +1807,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)}
                                 />
@@ -1769,6 +1818,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"
@@ -1794,6 +1844,28 @@ export default function Estimate({}) {
                                         }
                                       })}
                                     />
+                                  ) : (
+                                    <Select
+                                      name="long-value-select11"
+                                      instanceId="long-value-select11"
+                                      className="react-select-custom"
+                                      classNamePrefix="custom"
+                                      placeholder="Select"
+                                      options={cableItemList}
+                                      onChange={(e) => {
+                                        if (isObjectNotEmpty(e)) {
+                                          onChangeDisplayItem(e.clRefChr1, item.dispOrder, index)
+                                        }
+                                      }}
+                                      menuPlacement={'auto'}
+                                      getOptionLabel={(x) => x.clRefChr2}
+                                      getOptionValue={(x) => x.clRefChr1}
+                                      isClearable={false}
+                                      value={cableItemList.filter(function (option) {
+                                        return option.clRefChr1 === item.itemId
+                                      })}
+                                    />
+                                  )}
                                 </div>
                                 {item?.itemChangeFlg === '1' && (
                                   <div className="btn-area">

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 }}>
-      <div className={`modal-pop-wrap r`}>
-        <div className="modal-head modal-handle">
-          <h1 className="title">{getMessage('common.input.file')}</h1>
-          <button
-            className="modal-close"
-            onClick={() => {
-              setFloorPlanState({ ...floorPlanState, refFileModalOpen: false })
-            }}
-          >
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
+    <WithDraggable isShow={floorPlanState.refFileModalOpen} pos={{ x: 1000, y: 200 }} className="r">
+      <WithDraggable.Header
+        title={getMessage('common.input.file')}
+        onClose={() => setFloorPlanState({ ...floorPlanState, refFileModalOpen: false })}
+      />
+
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </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}>
-      <div className={`modal-pop-wrap xxxm`}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={pos} className="xxxm">
+      <WithDraggable.Header title={getMessage('plan.menu.placement.surface.slope.setting')} onClose={() => closePopup(id)} />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </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}>
-      <div className={`modal-pop-wrap r`}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={pos} className="r">
+      <WithDraggable.Header title={getMessage('modal.auxiliary.drawing')} onClose={() => closePopup(id)} />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </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}>
-      <div className={`modal-pop-wrap xm mount`}>
-        <div className="modal-head modal-handle">
-          <h1 className="title">{getMessage(type === 'copy' ? 'modal.auxiliary.copy' : 'modal.auxiliary.move')} </h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
+    <WithDraggable isShow={true} pos={pos} className="xm">
+      <WithDraggable.Header title={getMessage(type === 'copy' ? 'modal.auxiliary.copy' : 'modal.auxiliary.move')} onClose={() => closePopup(id)} />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </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}>
-      <div className={`modal-pop-wrap xm mount`}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={pos} className="xm">
+      <WithDraggable.Header title={getMessage('modal.auxiliary.size.edit')} onClose={() => closePopup(id)} />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }

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

@@ -135,17 +135,9 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   }, [isManualModuleSetup, isClosePopup])
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap lx-2`}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={pos} className="lx-2">
+      <WithDraggable.Header title={getMessage('plan.menu.module.circuit.setting.default')} onClose={() => handleClosePopup(id)} />
+      <WithDraggable.Body>
         <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>
@@ -202,9 +194,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
             </>
           )}
         </div>
-        </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </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 }}>
-      <div className={`modal-pop-wrap l-2`}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }} className="l-2">
+      <WithDraggable.Header title={getMessage('modal.circuit.trestle.setting')} onClose={() => handleClose()} />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }

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

@@ -122,17 +122,9 @@ export default function DimensionLineSetting(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap xm mount`}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={pos} className="xm">
+      <WithDraggable.Header title={getMessage('contextmenu.display.edit')} onClose={() => closePopup(id)} />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }

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

@@ -16,17 +16,9 @@ export default function Distance(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap xxxm`}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={pos} className="xxxm">
+      <WithDraggable.Header title={getMessage('modal.distance')} onClose={() => closePopup(id)} />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </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}>
-      <div className={`modal-pop-wrap r`}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={pos} className="r">
+      <WithDraggable.Header title={getMessage('modal.eaves.gable.edit')} onClose={() => closePopup(id)} />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }

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

@@ -63,17 +63,9 @@ export default function FlowDirectionSetting(props) {
   )
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap ml mount`}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={pos} className="ml">
+      <WithDraggable.Header title={getMessage('modal.shape.flow.direction.setting')} onClose={() => closePopup(id)} />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }

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

@@ -177,23 +177,15 @@ export default function DotLineGrid(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap ssm mount`}>
-        <div className="modal-head modal-handle">
-          <h1 className="title">{getMessage('modal.canvas.setting.grid.dot.line.setting')}</h1>
-          <button
-            className="modal-close"
-            onClick={() => {
+    <WithDraggable isShow={true} pos={pos} className="ssm">
+      <WithDraggable.Header
+        title={getMessage('modal.canvas.setting.grid.dot.line.setting')}
+        onClose={() => {
           setIsShow(false)
           closePopup(id, isConfig)
         }}
-          >
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
+      />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </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}>
-      <div className={`modal-pop-wrap xm mount`}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={pos} className="xm">
+      <WithDraggable.Header title={getMessage('modal.grid.copy')} onClose={() => closePopup(id)} />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </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}>
-      <div className={`modal-pop-wrap xm mount`}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={pos} className="xm">
+      <WithDraggable.Header title={getMessage('modal.grid.move')} onClose={() => handleClose()} />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }

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

@@ -50,17 +50,9 @@ export default function LinePropertySetting(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap r mount`}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={pos} className="r">
+      <WithDraggable.Header title={getMessage('contextmenu.line.property.edit')} onClose={() => handleClosePopup()} />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </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}>
-      <div className={`modal-pop-wrap xm mount`}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={pos} className="xm">
+      <WithDraggable.Header title={getMessage('modal.module.circuit.number.edit')} onClose={() => closePopup(id)} />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }

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

@@ -91,23 +91,14 @@ export default function PanelEdit(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap xm mount`}>
-        <div className="modal-head modal-handle">
-          <h1 className="title">
-            {getMessage(
-              [PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.MOVE_ALL, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type)
-                ? 'modal.move.setting'
-                : 'modal.copy.setting',
-            )}{' '}
-          </h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
+    <WithDraggable isShow={true} pos={pos} className="xm">
+      <WithDraggable.Header
+        title={getMessage(
+          [PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.MOVE_ALL, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type) ? 'modal.move.setting' : 'modal.copy.setting',
+        )}
+        onClose={() => closePopup(id)}
+      />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </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}>
-      <div className={`modal-pop-wrap r mount`}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={pos} className="r">
+      <WithDraggable.Header title={getMessage('modal.panel.column.insert')} onClose={() => closePopup(id)} />
+      <WithDraggable.Body>
         <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
-                    src="/static/images/canvas/additional-edit01.svg"
-                    alt="react"
-                    width={0}
-                    height={0}
-                    style={{ width: 'auto', height: 'auto' }}
-                  />
+                <Image src="/static/images/canvas/additional-edit01.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
               )}
               {selectedType === MODULE_INSERT_TYPE.RIGHT && (
-                  <Image
-                    src="/static/images/canvas/additional-edit02.svg"
-                    alt="react"
-                    width={0}
-                    height={0}
-                    style={{ width: 'auto', height: 'auto' }}
-                  />
+                <Image 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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </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}>
-      <div className={`modal-pop-wrap r mount`}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={pos} className="r">
+      <WithDraggable.Header title={getMessage('modal.panel.column.remove')} onClose={() => closePopup(id)} />
+      <WithDraggable.Body>
         <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
-                    src="/static/images/canvas/additional_del01.svg"
-                    alt="react"
-                    width={0}
-                    height={0}
-                    style={{ width: 'auto', height: 'auto' }}
-                  />
+                <Image src="/static/images/canvas/additional_del01.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
               )}
               {selectedType === MODULE_REMOVE_TYPE.RIGHT && (
-                  <Image
-                    src="/static/images/canvas/additional_del02.svg"
-                    alt="react"
-                    width={0}
-                    height={0}
-                    style={{ width: 'auto', height: 'auto' }}
-                  />
+                <Image 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
-                    src="/static/images/canvas/additional_del03.svg"
-                    alt="react"
-                    width={0}
-                    height={0}
-                    style={{ width: 'auto', height: 'auto' }}
-                  />
+                <Image src="/static/images/canvas/additional_del03.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
               )}
               {selectedType === MODULE_REMOVE_TYPE.NONE && (
-                  <Image
-                    src="/static/images/canvas/additional_del04.svg"
-                    alt="react"
-                    width={0}
-                    height={0}
-                    style={{ width: 'auto', height: 'auto' }}
-                  />
+                <Image 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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </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}>
-      <div className={`modal-pop-wrap r mount`}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={pos} className="r">
+      <WithDraggable.Header title={getMessage('modal.row.insert')} onClose={() => closePopup(id)} />
+      <WithDraggable.Body>
         <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}>
-      <div className={`modal-pop-wrap r mount`}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={pos} className="r">
+      <WithDraggable.Header title={getMessage('modal.row.remove')} onClose={() => closePopup(id)} />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </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}>
-      <div className={`modal-pop-wrap r`}>
-        <div className="modal-head modal-handle">
-          <h1 className="title">{getMessage('plan.menu.roof.cover.movement.shape.updown')}</h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
+    <WithDraggable isShow={true} pos={pos} className="r">
+      <WithDraggable.Header title={getMessage('plan.menu.roof.cover.movement.shape.updown')} onClose={() => closePopup(id)} />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </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}>
-      <div className={`modal-pop-wrap xm mount`}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={pos} className="xm">
+      <WithDraggable.Header title={title} onClose={() => closePopup(id)} />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </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}>
-      <div className={`modal-pop-wrap lrr`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={pos} className="lrr" style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
+      <WithDraggable.Header title={getMessage('plan.menu.placement.surface.object')} onClose={() => closePopup(id)} />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }

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

@@ -21,17 +21,9 @@ export default function RoofMaterialSetting(props) {
   ]
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap xxxm mount`}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={pos} className="xxxm">
+      <WithDraggable.Header title={getMessage('modal.roof.material.edit')} onClose={() => closePopup(id)} />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }

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

@@ -40,17 +40,9 @@ export default function SizeSetting(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap ssm mount`}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={pos} className="ssm">
+      <WithDraggable.Header title={getMessage('modal.size.setting')} onClose={() => closePopup(id)} />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </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}>
-      <div className={`modal-pop-wrap ssm`}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={pos} className="ssm">
+      <WithDraggable.Header title={getMessage('modal.canvas.setting.wallline.properties.setting')} onClose={() => closeModal(id)} />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </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 }}>
-      <div className={`modal-pop-wrap r mount`}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }} className="r">
+      <WithDraggable.Header title={getMessage('modal.cover.outline.drawing')} onClose={() => closePopup(id)} />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }

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

@@ -29,7 +29,8 @@ export default function PanelBatchStatistics() {
   }, [])
 
   return (
-    <WithDraggable isShow={true} handle=".penal-wrap" pos={pos}>
+    <WithDraggable isShow={true} handle=".penal-wrap" pos={pos} isModal={false}>
+      <WithDraggable.Panel>
         <div className={`penal-wrap ${!isFold ? 'act' : ''}`}>
           <h2>{getMessage('modal.panel.batch.statistic')}</h2>
           <button className="penal-arr" onClick={() => setIsFold(!isFold)}></button>
@@ -63,6 +64,7 @@ export default function PanelBatchStatistics() {
             </table>
           </div>
         </div>
+      </WithDraggable.Panel>
     </WithDraggable>
   )
 }

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}>
-      <div className={`modal-pop-wrap r`}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={pos} className="r">
+      <WithDraggable.Header title={getMessage('plan.menu.placement.surface.drawing')} onClose={() => closePopup(id)} />
+      <WithDraggable.Body>
         <div className="modal-btn-wrap">
           {types.map((type, idx) => (
-              <button
-                key={`placement-${idx}`}
-                className={`btn-frame modal ${buttonAct === type.id ? 'act' : ''}`}
-                onClick={() => onClickButton(type)}
-              >
+            <button 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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </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}>
-      <div className={`modal-pop-wrap ll mount`}>
-        <div className="modal-head modal-handle">
-          <h1 className="title">{getMessage('plan.menu.placement.surface.initial.setting')}</h1>
-        </div>
-        <div className="modal-body">
+    <WithDraggable isShow={true} pos={pos} className="ll">
+      <WithDraggable.Header title={getMessage('plan.menu.placement.surface.initial.setting')} />
+      <WithDraggable.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}>
-      <div className={`modal-pop-wrap mount lr`}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={pos} className="lr">
+      <WithDraggable.Header title={getMessage('modal.canvas.setting.roofline.properties.setting')} onClose={() => handleClose()} />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </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}>
-      <div className={`modal-pop-wrap lr-2`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={pos} className="lr-2" isHidden={isHidden}>
+      <WithDraggable.Header title={getMessage('plan.menu.placement.surface.arrangement')} onClose={() => closePopup(id)} />
+      <WithDraggable.Body>
         <div className="plane-frame-wrap">
           <div className="plane-shape-wrap">
             <div className="plane-shape-menu">
               {types.map((type) => (
-                  <button
-                    key={type.id}
-                    className={`shape-menu-box ${selectedType?.id === type.id ? 'act' : ''}`}
-                    onClick={() => setSelectedType(type)}
-                  >
+                <button 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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }

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

@@ -61,17 +61,9 @@ export default function ActualSizeSetting(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap ssm mount`}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={pos} className="ssm">
+      <WithDraggable.Header title={getMessage('modal.actual.size.setting')} onClose={() => closePopup(id)} />
+      <WithDraggable.Body>
         <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
-                          type="text"
-                          className="input-origin block"
-                          value={actualSize}
-                          onChange={(e) => setActualSize(Number(e.target.value))}
-                        />
+                      <input 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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }

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

@@ -47,19 +47,10 @@ export default function ContextRoofAllocationSetting(props) {
   }, [])
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap lr mount`}>
+    <WithDraggable isShow={true} pos={pos} className="lr">
+      <WithDraggable.Header title={getMessage('plan.menu.estimate.roof.alloc')} onClose={() => closePopup(id)} />
       {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>
+        <WithDraggable.Body>
           <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}>
-      <div className={`modal-pop-wrap lr mount`}>
+    <WithDraggable isShow={true} pos={pos} className="lr">
+      <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>
-      </div>
+      </WithDraggable.Body>
     </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}>
-      <div className={`modal-pop-wrap xxm`}>
-        <div className="modal-head modal-handle">
-          <h1 className="title">{getMessage('plan.menu.roof.cover.roof.shape.passivity.setting')}</h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
+    <WithDraggable isShow={true} pos={pos} className="xxm">
+      <WithDraggable.Header title={getMessage('plan.menu.roof.cover.roof.shape.passivity.setting')} onClose={() => closePopup(id)} />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </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}>
-      <div className={`modal-pop-wrap lr mount`}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={pos} className="lr">
+      <WithDraggable.Header title={getMessage('modal.roof.shape.setting')} onClose={() => closePopup(id)} />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </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 }}>
-        <div className={`modal-pop-wrap sm mount`}>
-          <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>
+    <WithDraggable isShow={true} pos={{ x: 1275, y: 180 }} className="sm">
+      <WithDraggable.Header title={getMessage('modal.canvas.setting')} onClose={() => closePopup(id, true)} />
+      <WithDraggable.Body>
         <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>
-          <div className="modal-foot modal-handle"></div>
-        </div>
+      </WithDraggable.Body>
     </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}>
-      <div className={`modal-pop-wrap xxxm mount`}>
-        <div className="modal-head modal-handle">
-          <h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')} </h1>
-          <button
-            className="modal-close"
-            onClick={() => {
+    <WithDraggable isShow={true} pos={pos} className="xxxm">
+      <WithDraggable.Header
+        title={getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')}
+        onClose={() => {
           setIsShow(false)
           closePopups([fontModalId, colorModalId, id])
         }}
-          >
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
+      />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }

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

@@ -55,23 +55,15 @@ export default function PlanSizeSetting(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap xsm mount`}>
-        <div className="modal-head modal-handle">
-          <h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.plan.size.setting')}</h1>
-          <button
-            className="modal-close"
-            onClick={() => {
+    <WithDraggable isShow={true} pos={pos} className="xsm">
+      <WithDraggable.Header
+        title={getMessage('modal.canvas.setting.font.plan.absorption.plan.size.setting')}
+        onClose={() => {
           setIsShow(false)
           closePopup(id, true)
         }}
-          >
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
+      />
+      <WithDraggable.Body>
         <div className="slope-wrap">
           <div className="outline-form mb10">
             <span style={{ width: 'auto' }}>{getMessage('common.horizon')}</span>
@@ -105,9 +97,7 @@ export default function PlanSizeSetting(props) {
             {getMessage('modal.common.save')}
           </button>
         </div>
-        </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </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}>
-      <div className={`modal-pop-wrap r`}>
-        <div className="modal-head modal-handle">
-          <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>
+    <WithDraggable isShow={true} pos={pos} className="r">
+      <WithDraggable.Header title={getMessage('modal.wallline.offset.setting')} onClose={() => closePopup(id)} />
+      <WithDraggable.Body>
         <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>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }

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',
         },
       ],
     })

src/hooks/module/useTrestle.js

@@ -1662,11 +1662,11 @@ export const useTrestle = () => {
         break
       }
       case 'west': {
-        startPointX += 5
+        startPointX -= 5
         break
       }
       case 'north': {
-        startPointY += 5
+        startPointY -= 5
         break
       }
     }
@@ -1686,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
       }
     }
   }