From bba5a8d54cd324d66f59b539a5ee19b7aecb1cef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?=
 <43837214+Minsiki@users.noreply.github.com>
Date: Thu, 13 Mar 2025 16:12:44 +0900
Subject: [PATCH] =?UTF-8?q?WithDraggable=20=EA=B3=B5=ED=86=B5=ED=99=94=20?=
 =?UTF-8?q?=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/color-picker/ColorPickerModal.jsx  |  71 ++--
 .../common/draggable/WithDraggable.jsx        |  56 ++-
 src/components/common/font/FontSetting.jsx    | 196 +++++----
 src/components/floor-plan/modal/ImgLoad.jsx   | 153 ++++---
 src/components/floor-plan/modal/Slope.jsx     |  58 ++-
 .../modal/auxiliary/AuxiliaryDrawing.jsx      |  66 ++-
 .../modal/auxiliary/AuxiliaryEdit.jsx         | 120 +++---
 .../modal/auxiliary/AuxiliarySize.jsx         | 100 +++--
 .../floor-plan/modal/basic/BasicSetting.jsx   | 120 +++---
 .../circuitTrestle/CircuitTrestleSetting.jsx  | 101 +++--
 .../dimensionLine/DimensionLineSetting.jsx    | 164 ++++----
 .../floor-plan/modal/distance/Distance.jsx    |  78 ++--
 .../modal/eavesGable/EavesGableEdit.jsx       |  42 +-
 .../flowDirection/FlowDirectionSetting.jsx    | 204 +++++-----
 .../floor-plan/modal/grid/DotLineGrid.jsx     | 224 +++++------
 .../floor-plan/modal/grid/GridCopy.jsx        | 104 +++--
 .../floor-plan/modal/grid/GridMove.jsx        | 152 ++++---
 .../lineProperty/LinePropertySetting.jsx      |  72 ++--
 .../modal/module/CircuitNumberEdit.jsx        |  46 +--
 .../floor-plan/modal/module/PanelEdit.jsx     | 117 +++---
 .../modal/module/column/ColumnInsert.jsx      | 144 +++----
 .../modal/module/column/ColumnRemove.jsx      | 136 +++----
 .../floor-plan/modal/module/row/RowInsert.jsx | 155 ++++---
 .../floor-plan/modal/module/row/RowRemove.jsx | 160 ++++----
 .../modal/movement/MovementSetting.jsx        |  46 +--
 .../floor-plan/modal/object/DormerOffset.jsx  | 112 +++---
 .../floor-plan/modal/object/ObjectSetting.jsx |  60 ++-
 .../modal/object/RoofMaterialSetting.jsx      |  30 +-
 .../floor-plan/modal/object/SizeSetting.jsx   |  74 ++--
 .../outerlinesetting/PropertiesSetting.jsx    |  54 +--
 .../outerlinesetting/WallLineSetting.jsx      |  84 ++--
 .../modal/panelBatch/PanelBatchStatistics.jsx |  62 +--
 .../placementShape/PlacementShapeDrawing.jsx  |  64 ++-
 .../placementShape/PlacementShapeSetting.jsx  | 379 +++++++++---------
 .../PlacementSurfaceLineProperty.jsx          |  60 ++-
 .../PlacementSurfaceSetting.jsx               |  92 ++---
 .../roofAllocation/ActualSizeSetting.jsx      |  81 ++--
 .../ContextRoofAllocationSetting.jsx          | 288 +++++++------
 .../roofAllocation/RoofAllocationSetting.jsx  | 278 +++++++------
 .../roofShape/RoofShapePassivitySetting.jsx   |  62 ++-
 .../modal/roofShape/RoofShapeSetting.jsx      |  56 ++-
 .../modal/setting01/SettingModal01.jsx        |  52 +--
 .../dimensionLine/DimensionLineSetting.jsx    | 122 +++---
 .../setting01/planSize/PlanSizeSetting.jsx    |  92 ++---
 .../wallLineOffset/WallLineOffsetSetting.jsx  |  48 +--
 45 files changed, 2305 insertions(+), 2730 deletions(-)

diff --git a/src/components/common/color-picker/ColorPickerModal.jsx b/src/components/common/color-picker/ColorPickerModal.jsx
index 94f24f42..f6176bdb 100644
--- a/src/components/common/color-picker/ColorPickerModal.jsx
+++ b/src/components/common/color-picker/ColorPickerModal.jsx
@@ -33,54 +33,43 @@ 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>
+    <WithDraggable isShow={true} pos={pos ?? ''} handle=".modal-handle" className="lr">
+      <WithDraggable.Header
+        title={getMessage('modal.color.picker.title')}
+        onClose={() => {
+          if (setIsShow) {
+            setIsShow(false)
+          }
+          closePopup(id, isConfig)
+        }}
+      />
+      <WithDraggable.Body>
+        <div className="color-setting-wrap">
+          <div className="color-picker">
+            <ColorPicker color={originColor} setColor={setOriginColor} />
+          </div>
+        </div>
+        <div className="grid-btn-wrap">
           <button
-            className="modal-close"
+            className="btn-frame modal act"
             onClick={() => {
-              if (setIsShow) {
-                setIsShow(false)
-              }
-              console.log(id)
+              if (setColor) setColor(originColor)
+              if (setIsShow) setIsShow(false)
+
+              //치수선색설정 아닐 때만 바로 저장 실행
+              if (name !== 'DimensionLineColor')
+                setSettingsDataSave({
+                  ...settingsData,
+                  color: originColor,
+                })
+
               closePopup(id, isConfig)
             }}
           >
-            닫기
+            {getMessage('modal.common.save')}
           </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} />
-            </div>
-          </div>
-          <div className="grid-btn-wrap">
-            <button
-              className="btn-frame modal act"
-              onClick={() => {
-                if (setColor) setColor(originColor)
-                if (setIsShow) setIsShow(false)
-
-                //치수선색설정 아닐 때만 바로 저장 실행
-                if (name !== 'DimensionLineColor')
-                  setSettingsDataSave({
-                    ...settingsData,
-                    color: originColor,
-                  })
-
-                closePopup(id, isConfig)
-              }}
-            >
-              {getMessage('modal.common.save')}
-            </button>
-          </div>
-        </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/common/draggable/WithDraggable.jsx b/src/components/common/draggable/WithDraggable.jsx
index 732d8ff7..e2f769cc 100644
--- a/src/components/common/draggable/WithDraggable.jsx
+++ b/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}
         >
-          {children}
+          {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
diff --git a/src/components/common/font/FontSetting.jsx b/src/components/common/font/FontSetting.jsx
index beb31aa3..0c3623f6 100644
--- a/src/components/common/font/FontSetting.jsx
+++ b/src/components/common/font/FontSetting.jsx
@@ -67,111 +67,101 @@ 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={() => {
-              if (setIsShow) setIsShow(false)
-              closePopup(id, isConfig)
-            }}
-          >
-            닫기
+    <WithDraggable isShow={true} pos={pos} handle=".modal-handle" className="lrr">
+      <WithDraggable.Header
+        title={getMessage('modal.font')}
+        onClose={() => {
+          if (setIsShow) setIsShow(false)
+          closePopup(id, isConfig)
+        }}
+      />
+      <WithDraggable.Body>
+        <div className="slope-wrap">
+          <div className="font-option-warp">
+            <div className="font-option-item">
+              <div className="option-item-tit">{getMessage('modal.font')}(F)</div>
+              <div className="grid-select">
+                <QSelectBox
+                  options={fonts}
+                  value={selectedFont}
+                  onChange={(e) => {
+                    setSelectedFont(e)
+                  }}
+                  showKey={'name'}
+                  sourceKey={'value'}
+                  targetKey={'value'}
+                />
+              </div>
+            </div>
+            <div className="font-option-item">
+              <div className="option-item-tit">{getMessage('modal.font.style')}(Y)</div>
+              <div className="grid-select">
+                <QSelectBox
+                  options={fontOptions}
+                  value={selectedFontWeight}
+                  onChange={(e) => {
+                    setSelectedFontWeight(e)
+                  }}
+                  showKey={'name'}
+                  targetKey={'id'}
+                  sourceKey={'id'}
+                />
+              </div>
+            </div>
+            <div className="font-option-item">
+              <div className="option-item-tit">{getMessage('modal.font.size')}(S)</div>
+              <div className="grid-select">
+                <QSelectBox
+                  options={fontSizes}
+                  value={selectedFontSize}
+                  onChange={(e) => setSelectedFontSize(e)}
+                  showKey={'name'}
+                  sourceKey={'value'}
+                  targetKey={'value'}
+                />
+              </div>
+            </div>
+            <div className="font-option-item">
+              <div className="option-item-tit">{getMessage('modal.font.color')}</div>
+              <div className="grid-select">
+                <QSelectBox
+                  title={''}
+                  options={fontColors}
+                  showKey={'name'}
+                  sourceKey={'id'}
+                  targetKey={'id'}
+                  value={selectedFontColor}
+                  onChange={(e) => {
+                    setSelectedFontColor(e)
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="font-ex-wrap">
+            <div className="font-ex-tit">{getMessage('modal.font.setting.display')}</div>
+            <div className="font-ex-box">
+              <span
+                style={{
+                  fontFamily: selectedFont?.value ?? 'MS PGothic',
+                  fontWeight: selectedFontWeight?.value?.toLowerCase().includes('bold') ? 'bold' : 'normal',
+                  fontStyle: selectedFontWeight?.value?.toLowerCase().includes('italic') ? 'italic' : 'normal',
+                  fontSize: selectedFontSize?.value ?? 16,
+                  color: selectedFontColor?.value ?? 'black',
+                }}
+              >
+                Aaあぁアァ
+              </span>
+            </div>
+          </div>
+          <div className="normal-font">{getMessage('modal.font.setting.info')}</div>
+        </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal act" onClick={handleSaveBtn}>
+            {getMessage('modal.common.save')}
           </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">
-                <div className="option-item-tit">{getMessage('modal.font')}(F)</div>
-                <div className="grid-select">
-                  <QSelectBox
-                    options={fonts}
-                    value={selectedFont}
-                    onChange={(e) => {
-                      setSelectedFont(e)
-                    }}
-                    showKey={'name'}
-                    sourceKey={'value'}
-                    targetKey={'value'}
-                  />
-                </div>
-              </div>
-              <div className="font-option-item">
-                <div className="option-item-tit">{getMessage('modal.font.style')}(Y)</div>
-                <div className="grid-select">
-                  <QSelectBox
-                    options={fontOptions}
-                    value={selectedFontWeight}
-                    onChange={(e) => {
-                      setSelectedFontWeight(e)
-                    }}
-                    showKey={'name'}
-                    targetKey={'id'}
-                    sourceKey={'id'}
-                  />
-                </div>
-              </div>
-              <div className="font-option-item">
-                <div className="option-item-tit">{getMessage('modal.font.size')}(S)</div>
-                <div className="grid-select">
-                  <QSelectBox
-                    options={fontSizes}
-                    value={selectedFontSize}
-                    onChange={(e) => setSelectedFontSize(e)}
-                    showKey={'name'}
-                    sourceKey={'value'}
-                    targetKey={'value'}
-                  />
-                </div>
-              </div>
-              <div className="font-option-item">
-                <div className="option-item-tit">{getMessage('modal.font.color')}</div>
-                <div className="grid-select">
-                  <QSelectBox
-                    title={''}
-                    options={fontColors}
-                    showKey={'name'}
-                    sourceKey={'id'}
-                    targetKey={'id'}
-                    value={selectedFontColor}
-                    onChange={(e) => {
-                      setSelectedFontColor(e)
-                    }}
-                  />
-                </div>
-              </div>
-            </div>
-            <div className="font-ex-wrap">
-              <div className="font-ex-tit">{getMessage('modal.font.setting.display')}</div>
-              <div className="font-ex-box">
-                <span
-                  style={{
-                    fontFamily: selectedFont?.value ?? 'MS PGothic',
-                    fontWeight: selectedFontWeight?.value?.toLowerCase().includes('bold') ? 'bold' : 'normal',
-                    fontStyle: selectedFontWeight?.value?.toLowerCase().includes('italic') ? 'italic' : 'normal',
-                    fontSize: selectedFontSize?.value ?? 16,
-                    color: selectedFontColor?.value ?? 'black',
-                  }}
-                >
-                  Aaあぁアァ
-                </span>
-              </div>
-            </div>
-            <div className="normal-font">{getMessage('modal.font.setting.info')}</div>
-          </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={handleSaveBtn}>
-              {getMessage('modal.common.save')}
-            </button>
-          </div>
-        </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/ImgLoad.jsx b/src/components/floor-plan/modal/ImgLoad.jsx
index b33871ef..dda395a9 100644
--- a/src/components/floor-plan/modal/ImgLoad.jsx
+++ b/src/components/floor-plan/modal/ImgLoad.jsx
@@ -76,99 +76,88 @@ 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>
+    <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">
+            <input
+              type="checkbox"
+              checked={floorPlanState.toggleRotate}
+              onChange={(e) => setFloorPlanState({ ...floorPlanState, toggleRotate: e.target.checked })}
+            />
+            <span className="slider"></span>
+          </label>
         </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">
-              <input
-                type="checkbox"
-                checked={floorPlanState.toggleRotate}
-                onChange={(e) => setFloorPlanState({ ...floorPlanState, toggleRotate: e.target.checked })}
-              />
-              <span className="slider"></span>
-            </label>
-          </div>
-          <div className="img-load-from">
-            <div className="img-load-item">
-              <div className="d-check-radio pop">
-                <input type="radio" name="radio03" id="ra06" value={'1'} onChange={(e) => handleRefFileMethod(e)} checked={refFileMethod === '1'} />
-                <label htmlFor="ra06">{getMessage('common.input.file')}</label>
-              </div>
-              <div className="img-flex-box">
-                <div className="img-edit-wrap">
-                  <label className="img-edit-btn" htmlFor="img_file">
-                    <span className="img-edit"></span>
-                    {getMessage('common.load')}
-                  </label>
-                  <input
-                    type="file"
-                    id="img_file"
-                    style={{ display: 'none' }}
-                    onChange={refFileMethod === '1' ? (e) => handleRefFile(e.target.files[0]) : () => {}}
-                  />
-                </div>
-                <div className="img-name-wrap">
-                  <input
-                    type="text"
-                    className="input-origin al-l"
-                    value={refImage ? (refImage?.name ?? '') : (currentCanvasPlan?.bgImageName ?? '')}
-                    readOnly
-                  />
-                  {refImage && <button className="img-check" onClick={handleFileDelete}></button>}
-                </div>
-              </div>
+        <div className="img-load-from">
+          <div className="img-load-item">
+            <div className="d-check-radio pop">
+              <input type="radio" name="radio03" id="ra06" value={'1'} onChange={(e) => handleRefFileMethod(e)} checked={refFileMethod === '1'} />
+              <label htmlFor="ra06">{getMessage('common.input.file')}</label>
             </div>
-            <div className="img-load-item">
-              <div className="d-check-radio pop">
-                <input type="radio" name="radio03" id="ra07" value={'2'} onChange={(e) => handleRefFileMethod(e)} checked={refFileMethod === '2'} />
-                <label htmlFor="ra07">{getMessage('common.input.address.load')}</label>
+            <div className="img-flex-box">
+              <div className="img-edit-wrap">
+                <label className="img-edit-btn" htmlFor="img_file">
+                  <span className="img-edit"></span>
+                  {getMessage('common.load')}
+                </label>
+                <input
+                  type="file"
+                  id="img_file"
+                  style={{ display: 'none' }}
+                  onChange={refFileMethod === '1' ? (e) => handleRefFile(e.target.files[0]) : () => {}}
+                />
               </div>
-              <div className="img-flex-box for-address">
+              <div className="img-name-wrap">
                 <input
                   type="text"
-                  ref={queryRef}
-                  className="input-origin al-l mr10"
-                  placeholder={'住所入力'}
-                  value={mapPositionAddress}
-                  onChange={(e) => setMapPositionAddress(e.target.value)}
+                  className="input-origin al-l"
+                  value={refImage ? (refImage?.name ?? '') : (currentCanvasPlan?.bgImageName ?? '')}
+                  readOnly
                 />
-                <div className="img-edit-wrap">
-                  <button
-                    className={`img-edit-btn ${mapPositionAddress.trim().length === 0 ? 'no-click' : ''}`}
-                    onClick={refFileMethod === '2' ? handleMapImageDown : () => {}}
-                  >
-                    {getMessage('common.finish')}
-                  </button>
-                </div>
-                {mapPositionAddress && <button className="check-address fail" onClick={handleAddressDelete}></button>}
-                {/* <span className="check-address success"></span> */}
+                {refImage && <button className="img-check" onClick={handleFileDelete}></button>}
               </div>
             </div>
           </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={handleModal}>
-              {getMessage('common.finish')}
-            </button>
-            {/* <button className="btn-frame modal act" onClick={() => handleCanvasToPng(2)}></button> */}
+          <div className="img-load-item">
+            <div className="d-check-radio pop">
+              <input type="radio" name="radio03" id="ra07" value={'2'} onChange={(e) => handleRefFileMethod(e)} checked={refFileMethod === '2'} />
+              <label htmlFor="ra07">{getMessage('common.input.address.load')}</label>
+            </div>
+            <div className="img-flex-box for-address">
+              <input
+                type="text"
+                ref={queryRef}
+                className="input-origin al-l mr10"
+                placeholder={'住所入力'}
+                value={mapPositionAddress}
+                onChange={(e) => setMapPositionAddress(e.target.value)}
+              />
+              <div className="img-edit-wrap">
+                <button
+                  className={`img-edit-btn ${mapPositionAddress.trim().length === 0 ? 'no-click' : ''}`}
+                  onClick={refFileMethod === '2' ? handleMapImageDown : () => {}}
+                >
+                  {getMessage('common.finish')}
+                </button>
+              </div>
+              {mapPositionAddress && <button className="check-address fail" onClick={handleAddressDelete}></button>}
+              {/* <span className="check-address success"></span> */}
+            </div>
           </div>
         </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal act" onClick={handleModal}>
+            {getMessage('common.finish')}
+          </button>
+          {/* <button className="btn-frame modal act" onClick={() => handleCanvasToPng(2)}></button> */}
+        </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/Slope.jsx b/src/components/floor-plan/modal/Slope.jsx
index e867dcab..df4a25d7 100644
--- a/src/components/floor-plan/modal/Slope.jsx
+++ b/src/components/floor-plan/modal/Slope.jsx
@@ -13,42 +13,32 @@ 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)}>
-            닫기
+    <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' }}>
+              {getMessage('slope')}
+            </span>
+            <div className="input-grid mr5">
+              <input type="text" className="input-origin block" defaultValue={globalPitch} ref={inputRef} />
+            </div>
+            <span className="thin">{pitchText}</span>
+          </div>
+        </div>
+        <div className="grid-btn-wrap">
+          <button
+            className="btn-frame modal act"
+            onClick={() => {
+              setGlobalPitch(inputRef.current.value)
+              closePopup(id)
+            }}
+          >
+            {getMessage('modal.common.save')}
           </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' }}>
-                {getMessage('slope')}
-              </span>
-              <div className="input-grid mr5">
-                <input type="text" className="input-origin block" defaultValue={globalPitch} ref={inputRef} />
-              </div>
-              <span className="thin">{pitchText}</span>
-            </div>
-          </div>
-          <div className="grid-btn-wrap">
-            <button
-              className="btn-frame modal act"
-              onClick={() => {
-                setGlobalPitch(inputRef.current.value)
-                closePopup(id)
-              }}
-            >
-              {getMessage('modal.common.save')}
-            </button>
-          </div>
-        </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx
index 3a9d64d6..1417b501 100644
--- a/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx
+++ b/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx
@@ -124,46 +124,36 @@ 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)}>
-            닫기
+    <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)}>
+              {type.name}
+            </button>
+          ))}
+        </div>
+        <div className="properties-setting-wrap outer">
+          <div className="setting-tit">{getMessage('setting')}</div>
+          {buttonAct === 1 && <OuterLineWall props={outerLineProps} />}
+          {buttonAct === 2 && <RightAngle props={rightAngleProps} />}
+          {buttonAct === 3 && <DoublePitch props={doublePitchProps} />}
+          {buttonAct === 4 && <Angle props={angleProps} />}
+          {buttonAct === 5 && <Diagonal props={diagonalLineProps} />}
+        </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal mr5" onClick={handleRollback}>
+            {getMessage('modal.cover.outline.rollback')}
+          </button>
+          <button className="btn-frame modal mr5" onClick={cutAuxiliary}>
+            {getMessage('contextmenu.auxiliary.cut')}
+          </button>
+          <button className="btn-frame modal act" onClick={() => handleFix(id)}>
+            {getMessage('apply')}
           </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)}>
-                {type.name}
-              </button>
-            ))}
-          </div>
-          <div className="properties-setting-wrap outer">
-            <div className="setting-tit">{getMessage('setting')}</div>
-            {buttonAct === 1 && <OuterLineWall props={outerLineProps} />}
-            {buttonAct === 2 && <RightAngle props={rightAngleProps} />}
-            {buttonAct === 3 && <DoublePitch props={doublePitchProps} />}
-            {buttonAct === 4 && <Angle props={angleProps} />}
-            {buttonAct === 5 && <Diagonal props={diagonalLineProps} />}
-          </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal mr5" onClick={handleRollback}>
-              {getMessage('modal.cover.outline.rollback')}
-            </button>
-            <button className="btn-frame modal mr5" onClick={cutAuxiliary}>
-              {getMessage('contextmenu.auxiliary.cut')}
-            </button>
-            <button className="btn-frame modal act" onClick={() => handleFix(id)}>
-              {getMessage('apply')}
-            </button>
-          </div>
-        </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx
index c8e7b95a..744b3387 100644
--- a/src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx
+++ b/src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx
@@ -55,77 +55,67 @@ 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>
-          <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">
-              <div className="move-form">
-                <p className="mb5">{getMessage('length')}</p>
-                <div className="input-move-wrap mb5">
-                  <div className="input-move">
-                    <input type="text" className="input-origin" value={verticalSize} onChange={(e) => setVerticalSize(e.target.value)} />
-                  </div>
-                  <span>mm</span>
-                  <div className="direction-move-wrap">
-                    <button
-                      className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
-                      onClick={() => {
-                        setArrow1('↑')
-                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
-                      }}
-                    ></button>
-                    <button
-                      className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
-                      onClick={() => {
-                        setArrow1('↓')
-                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
-                      }}
-                    ></button>
-                  </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">
+            <div className="move-form">
+              <p className="mb5">{getMessage('length')}</p>
+              <div className="input-move-wrap mb5">
+                <div className="input-move">
+                  <input type="text" className="input-origin" value={verticalSize} onChange={(e) => setVerticalSize(e.target.value)} />
                 </div>
-                <div className="input-move-wrap">
-                  <div className="input-move">
-                    <input type="text" className="input-origin" value={horizonSize} onChange={(e) => setHorizonSize(e.target.value)} />
-                  </div>
-                  <span>mm</span>
-                  <div className="direction-move-wrap">
-                    <button
-                      className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
-                      onClick={() => {
-                        setArrow2('←')
-                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
-                      }}
-                    ></button>
-                    <button
-                      className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
-                      onClick={() => {
-                        setArrow2('→')
-                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
-                      }}
-                    ></button>
-                  </div>
+                <span>mm</span>
+                <div className="direction-move-wrap">
+                  <button
+                    className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
+                    onClick={() => {
+                      setArrow1('↑')
+                      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+                    }}
+                  ></button>
+                  <button
+                    className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
+                    onClick={() => {
+                      setArrow1('↓')
+                      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+                    }}
+                  ></button>
+                </div>
+              </div>
+              <div className="input-move-wrap">
+                <div className="input-move">
+                  <input type="text" className="input-origin" value={horizonSize} onChange={(e) => setHorizonSize(e.target.value)} />
+                </div>
+                <span>mm</span>
+                <div className="direction-move-wrap">
+                  <button
+                    className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
+                    onClick={() => {
+                      setArrow2('←')
+                      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
+                    }}
+                  ></button>
+                  <button
+                    className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
+                    onClick={() => {
+                      setArrow2('→')
+                      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
+                    }}
+                  ></button>
                 </div>
               </div>
             </div>
           </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={handleSave}>
-              {getMessage('modal.common.save')}
-            </button>
-          </div>
         </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal act" onClick={handleSave}>
+            {getMessage('modal.common.save')}
+          </button>
+        </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx
index a9f7fc82..3bb94a4f 100644
--- a/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx
+++ b/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx
@@ -111,63 +111,53 @@ 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)}>
-            닫기
+    <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)} />
+            <label htmlFor="ra01">1{getMessage('modal.auxiliary.size.edit.point')}</label>
+          </div>
+          <div className="outline-form mb15">
+            <div className="input-grid mr5" style={{ flex: '1 1 auto' }}>
+              <input type="text" className="input-origin block" defaultValue={currentObject?.attributes.planeSize} readOnly={true} />
+            </div>
+            <span className="thin">mm</span>
+          </div>
+          <div className="outline-form">
+            <span style={{ width: 'auto' }}>{getMessage('length')}</span>
+            <div className="input-grid mr5">
+              <input type="text" className="input-origin block" value={value1} readOnly={checkedRadio !== 1} onChange={handleInput} />
+            </div>
+            <span className="thin">mm</span>
+          </div>
+        </div>
+        <div className="discrimination-box ">
+          <div className="d-check-radio pop mb10">
+            <input type="radio" name="radio01" id="ra02" onClick={(e) => setCheckedRadio(2)} />
+            <label htmlFor="ra02">2{getMessage('modal.auxiliary.size.edit.point')}</label>
+          </div>
+          <div className="outline-form mb15">
+            <div className="input-grid mr5" style={{ flex: '1 1 auto' }}>
+              <input type="text" className="input-origin block" defaultValue={currentObject?.attributes.planeSize} readOnly={true} />
+            </div>
+            <span className="thin">mm</span>
+          </div>
+          <div className="outline-form">
+            <span style={{ width: 'auto' }}>{getMessage('length')}</span>
+            <div className="input-grid mr5">
+              <input type="text" className="input-origin block" value={value2} readOnly={checkedRadio !== 2} onChange={handleInput} />
+            </div>
+            <span className="thin">mm</span>
+          </div>
+        </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal act" onClick={handleSave}>
+            {getMessage('modal.common.save')}
           </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)} />
-              <label htmlFor="ra01">1{getMessage('modal.auxiliary.size.edit.point')}</label>
-            </div>
-            <div className="outline-form mb15">
-              <div className="input-grid mr5" style={{ flex: '1 1 auto' }}>
-                <input type="text" className="input-origin block" defaultValue={currentObject?.attributes.planeSize} readOnly={true} />
-              </div>
-              <span className="thin">mm</span>
-            </div>
-            <div className="outline-form">
-              <span style={{ width: 'auto' }}>{getMessage('length')}</span>
-              <div className="input-grid mr5">
-                <input type="text" className="input-origin block" value={value1} readOnly={checkedRadio !== 1} onChange={handleInput} />
-              </div>
-              <span className="thin">mm</span>
-            </div>
-          </div>
-          <div className="discrimination-box ">
-            <div className="d-check-radio pop mb10">
-              <input type="radio" name="radio01" id="ra02" onClick={(e) => setCheckedRadio(2)} />
-              <label htmlFor="ra02">2{getMessage('modal.auxiliary.size.edit.point')}</label>
-            </div>
-            <div className="outline-form mb15">
-              <div className="input-grid mr5" style={{ flex: '1 1 auto' }}>
-                <input type="text" className="input-origin block" defaultValue={currentObject?.attributes.planeSize} readOnly={true} />
-              </div>
-              <span className="thin">mm</span>
-            </div>
-            <div className="outline-form">
-              <span style={{ width: 'auto' }}>{getMessage('length')}</span>
-              <div className="input-grid mr5">
-                <input type="text" className="input-origin block" value={value2} readOnly={checkedRadio !== 2} onChange={handleInput} />
-              </div>
-              <span className="thin">mm</span>
-            </div>
-          </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={handleSave}>
-              {getMessage('modal.common.save')}
-            </button>
-          </div>
-        </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/basic/BasicSetting.jsx b/src/components/floor-plan/modal/basic/BasicSetting.jsx
index 291ef086..ada6acba 100644
--- a/src/components/floor-plan/modal/basic/BasicSetting.jsx
+++ b/src/components/floor-plan/modal/basic/BasicSetting.jsx
@@ -135,76 +135,66 @@ 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>
+    <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>
+          <div className={`module-tab-bx ${tabNum !== 1 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.setting')}</div>
+          <span className={`tab-arr ${tabNum === 3 ? 'act' : ''}`}></span>
+          <div className={`module-tab-bx ${tabNum === 3 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.placement')}</div>
         </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>
-            <div className={`module-tab-bx ${tabNum !== 1 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.setting')}</div>
-            <span className={`tab-arr ${tabNum === 3 ? 'act' : ''}`}></span>
-            <div className={`module-tab-bx ${tabNum === 3 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.placement')}</div>
-          </div>
-          {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 && <Placement setTabNum={setTabNum} ref={placementRef} />}
+        {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 && <Placement setTabNum={setTabNum} ref={placementRef} />}
 
-          {/*배치면 초기설정 - 입력방법: 육지붕*/}
-          {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 2 && <PitchModule setTabNum={setTabNum} />}
-          {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 3 && (
-            <PitchPlacement setTabNum={setTabNum} ref={placementFlatRef} />
+        {/*배치면 초기설정 - 입력방법: 육지붕*/}
+        {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 2 && <PitchModule setTabNum={setTabNum} />}
+        {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 3 && (
+          <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)}>
-                {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>
-            )}
-
-            {tabNum === 3 && (
-              <>
-                {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && (
-                  <>
-                    <button className={`btn-frame modal mr5 ${isManualModuleSetup ? 'act' : ''}`} onClick={handleManualModuleSetup}>
-                      {getMessage('modal.module.basic.setting.passivity.placement')}
-                    </button>
-                    <button className="btn-frame modal act" onClick={() => autoModuleSetup(placementRef)}>
-                      {getMessage('modal.module.basic.setting.auto.placement')}
-                    </button>
-                  </>
-                )}
-                {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && (
-                  <>
-                    <button className={`btn-frame modal mr5 ${isManualModuleSetup ? 'act' : ''}`} onClick={handleManualModuleSetup}>
-                      {getMessage('modal.module.basic.setting.passivity.placement')}
-                    </button>
-                    <button className="btn-frame modal act" onClick={() => autoFlatroofModuleSetup(placementFlatRef)}>
-                      {getMessage('modal.module.basic.setting.auto.placement')}
-                    </button>
-                  </>
-                )}
-              </>
-            )}
-          </div>
+          {tabNum === 3 && (
+            <>
+              {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && (
+                <>
+                  <button className={`btn-frame modal mr5 ${isManualModuleSetup ? 'act' : ''}`} onClick={handleManualModuleSetup}>
+                    {getMessage('modal.module.basic.setting.passivity.placement')}
+                  </button>
+                  <button className="btn-frame modal act" onClick={() => autoModuleSetup(placementRef)}>
+                    {getMessage('modal.module.basic.setting.auto.placement')}
+                  </button>
+                </>
+              )}
+              {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && (
+                <>
+                  <button className={`btn-frame modal mr5 ${isManualModuleSetup ? 'act' : ''}`} onClick={handleManualModuleSetup}>
+                    {getMessage('modal.module.basic.setting.passivity.placement')}
+                  </button>
+                  <button className="btn-frame modal act" onClick={() => autoFlatroofModuleSetup(placementFlatRef)}>
+                    {getMessage('modal.module.basic.setting.auto.placement')}
+                  </button>
+                </>
+              )}
+            </>
+          )}
         </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
index f9f97833..53461f77 100644
--- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
@@ -612,64 +612,53 @@ 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>
-          <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>
-            <div className={`module-tab-bx ${tabNum === 2 ? 'act' : ''}`}>
-              {getMessage('modal.circuit.trestle.setting.circuit.allocation')}({getMessage('modal.circuit.trestle.setting.step.up.allocation')})
-            </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>
+          <div className={`module-tab-bx ${tabNum === 2 ? 'act' : ''}`}>
+            {getMessage('modal.circuit.trestle.setting.circuit.allocation')}({getMessage('modal.circuit.trestle.setting.step.up.allocation')})
           </div>
-          {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && <PowerConditionalSelect {...powerConditionalSelectProps} />}
-          {tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && (
-            <PassivityCircuitAllocation {...passivityProps} ref={passivityCircuitAllocationRef} />
-          )}
-          {tabNum === 2 && <StepUp {...stepUpProps} onInitialize={handleStepUpInitialize} />}
-          {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && (
-            <div className="grid-btn-wrap">
-              <button className="btn-frame modal mr5 act" onClick={() => onAutoRecommend()}>
-                {getMessage('modal.circuit.trestle.setting.circuit.allocation.auto')}
-              </button>
-              <button className="btn-frame modal act" onClick={() => onPassivityAllocation()}>
-                {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}
-              </button>
-            </div>
-          )}
-          {tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && (
-            <div className="grid-btn-wrap">
-              <button className="btn-frame modal mr5 " onClick={() => onClickPrev()}>
-                {getMessage('modal.common.prev')}
-              </button>
-              <button className="btn-frame modal act" onClick={() => handleStepUp()}>
-                {getMessage('modal.circuit.trestle.setting.circuit.allocation')}({getMessage('modal.circuit.trestle.setting.step.up.allocation')})
-              </button>
-            </div>
-          )}
-          {tabNum === 2 && (
-            <div className="grid-btn-wrap">
-              <button className="btn-frame modal mr5" onClick={() => onClickPrev()}>
-                {getMessage('modal.common.prev')}
-              </button>
-              {/* <button className="btn-frame modal act" onClick={() => apply()}> */}
-              <button className="btn-frame modal act" onClick={onApply}>
-                {getMessage('modal.common.save')}({getMessage('modal.circuit.trestle.setting.circuit.allocation')})
-              </button>
-            </div>
-          )}
         </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+        {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && <PowerConditionalSelect {...powerConditionalSelectProps} />}
+        {tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && (
+          <PassivityCircuitAllocation {...passivityProps} ref={passivityCircuitAllocationRef} />
+        )}
+        {tabNum === 2 && <StepUp {...stepUpProps} onInitialize={handleStepUpInitialize} />}
+        {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && (
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal mr5 act" onClick={() => onAutoRecommend()}>
+              {getMessage('modal.circuit.trestle.setting.circuit.allocation.auto')}
+            </button>
+            <button className="btn-frame modal act" onClick={() => onPassivityAllocation()}>
+              {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}
+            </button>
+          </div>
+        )}
+        {tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && (
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal mr5 " onClick={() => onClickPrev()}>
+              {getMessage('modal.common.prev')}
+            </button>
+            <button className="btn-frame modal act" onClick={() => handleStepUp()}>
+              {getMessage('modal.circuit.trestle.setting.circuit.allocation')}({getMessage('modal.circuit.trestle.setting.step.up.allocation')})
+            </button>
+          </div>
+        )}
+        {tabNum === 2 && (
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal mr5" onClick={() => onClickPrev()}>
+              {getMessage('modal.common.prev')}
+            </button>
+            {/* <button className="btn-frame modal act" onClick={() => apply()}> */}
+            <button className="btn-frame modal act" onClick={onApply}>
+              {getMessage('modal.common.save')}({getMessage('modal.circuit.trestle.setting.circuit.allocation')})
+            </button>
+          </div>
+        )}
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx b/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
index e4807c36..c2acc12d 100644
--- a/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
+++ b/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
@@ -122,95 +122,85 @@ 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)}>
-            닫기
+    <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">
+            <div className="outline-form mb15">
+              <span className="mr10">{getMessage('modal.display.edit.before.length')}</span>
+              <div className="input-grid mr5">
+                <input type="text" className="input-origin block" value={basicLength} readOnly />
+              </div>
+            </div>
+            <div className="mb-box">
+              <div className="outline-form">
+                <span className="mr10">{getMessage('modal.display.edit.after.length')}</span>
+                <div className="input-grid mr5">
+                  <input
+                    type="text"
+                    className="input-origin block"
+                    defaultValue={''}
+                    value={changeLength}
+                    onChange={(e) => {
+                      console.log(e.target)
+                      setChangeLength(e.target.value)
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
+            <div className="d-check-box pop">
+              <input type="checkbox" id="ch99" checked={slopeAble} onChange={() => setSlopeAble(!slopeAble)} />
+              <label htmlFor="ch99">{getMessage('modal.display.edit.input.slope')}</label>
+            </div>
+          </div>
+        </div>
+        <div className="slope-wrap">
+          <div className="warning">{getMessage('modal.display.edit.input.slope')}</div>
+          <div className="display-change-wrap">
+            <div className="outline-form mb15">
+              <span className="mr10">{getMessage('slope')}</span>
+              <div className="grid-select mr10">
+                <QSelectBox
+                  title={''}
+                  options={options}
+                  disabled={!slopeAble}
+                  value={selectedSlope1}
+                  onChange={(e) => setSelectedSlope1(e)}
+                  showKey={'name'}
+                  sourceKey={'value'}
+                  targetKey={'value'}
+                />
+              </div>
+              <span className="thin">{pitchText}</span>
+            </div>
+            <div className="outline-form">
+              <span className="mr10">{getMessage('slope')}</span>
+              <div className="grid-select mr10">
+                <QSelectBox
+                  title={''}
+                  options={options}
+                  disabled={!slopeAble}
+                  value={selectedSlope2}
+                  onChange={(e) => setSelectedSlope2(e)}
+                  showKey={'name'}
+                  sourceKey={'value'}
+                  targetKey={'value'}
+                />
+              </div>
+              <span className="thin">{pitchText}</span>
+            </div>
+          </div>
+          <div className="warning">{getMessage('modal.display.edit.input.slope.info')}</div>
+        </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal act" onClick={handleChangeLength}>
+            {getMessage('modal.common.save')}
           </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">
-              <div className="outline-form mb15">
-                <span className="mr10">{getMessage('modal.display.edit.before.length')}</span>
-                <div className="input-grid mr5">
-                  <input type="text" className="input-origin block" value={basicLength} readOnly />
-                </div>
-              </div>
-              <div className="mb-box">
-                <div className="outline-form">
-                  <span className="mr10">{getMessage('modal.display.edit.after.length')}</span>
-                  <div className="input-grid mr5">
-                    <input
-                      type="text"
-                      className="input-origin block"
-                      defaultValue={''}
-                      value={changeLength}
-                      onChange={(e) => {
-                        console.log(e.target)
-                        setChangeLength(e.target.value)
-                      }}
-                    />
-                  </div>
-                </div>
-              </div>
-              <div className="d-check-box pop">
-                <input type="checkbox" id="ch99" checked={slopeAble} onChange={() => setSlopeAble(!slopeAble)} />
-                <label htmlFor="ch99">{getMessage('modal.display.edit.input.slope')}</label>
-              </div>
-            </div>
-          </div>
-          <div className="slope-wrap">
-            <div className="warning">{getMessage('modal.display.edit.input.slope')}</div>
-            <div className="display-change-wrap">
-              <div className="outline-form mb15">
-                <span className="mr10">{getMessage('slope')}</span>
-                <div className="grid-select mr10">
-                  <QSelectBox
-                    title={''}
-                    options={options}
-                    disabled={!slopeAble}
-                    value={selectedSlope1}
-                    onChange={(e) => setSelectedSlope1(e)}
-                    showKey={'name'}
-                    sourceKey={'value'}
-                    targetKey={'value'}
-                  />
-                </div>
-                <span className="thin">{pitchText}</span>
-              </div>
-              <div className="outline-form">
-                <span className="mr10">{getMessage('slope')}</span>
-                <div className="grid-select mr10">
-                  <QSelectBox
-                    title={''}
-                    options={options}
-                    disabled={!slopeAble}
-                    value={selectedSlope2}
-                    onChange={(e) => setSelectedSlope2(e)}
-                    showKey={'name'}
-                    sourceKey={'value'}
-                    targetKey={'value'}
-                  />
-                </div>
-                <span className="thin">{pitchText}</span>
-              </div>
-            </div>
-            <div className="warning">{getMessage('modal.display.edit.input.slope.info')}</div>
-          </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={handleChangeLength}>
-              {getMessage('modal.common.save')}
-            </button>
-          </div>
-        </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/distance/Distance.jsx b/src/components/floor-plan/modal/distance/Distance.jsx
index e9c175d3..8ec3aed2 100644
--- a/src/components/floor-plan/modal/distance/Distance.jsx
+++ b/src/components/floor-plan/modal/distance/Distance.jsx
@@ -16,62 +16,52 @@ 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>
-          <div className="slope-wrap">
-            <div className="eaves-keraba-table">
-              <div className="eaves-keraba-item">
-                <div className="eaves-keraba-th">{getMessage('modal.distance.dual.point')}</div>
-                <div className="eaves-keraba-td">
-                  <div className="outline-form">
-                    <div className="input-grid mr5" style={{ width: '98px' }}>
-                      <input type="text" className="input-origin block" defaultValue={0} value={distance.diagonal} readOnly />
-                    </div>
-                    <span className="thin">mm</span>
+    <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">
+              <div className="eaves-keraba-th">{getMessage('modal.distance.dual.point')}</div>
+              <div className="eaves-keraba-td">
+                <div className="outline-form">
+                  <div className="input-grid mr5" style={{ width: '98px' }}>
+                    <input type="text" className="input-origin block" defaultValue={0} value={distance.diagonal} readOnly />
                   </div>
+                  <span className="thin">mm</span>
                 </div>
               </div>
-              <div className="eaves-keraba-item">
-                <div className="eaves-keraba-th">{getMessage('modal.distance.horizon')}</div>
-                <div className="eaves-keraba-td">
-                  <div className="outline-form">
-                    <div className="input-grid mr5" style={{ width: '98px' }}>
-                      <input type="text" className="input-origin block" defaultValue={0} value={distance.horizon} readOnly />
-                    </div>
-                    <span className="thin">mm</span>
+            </div>
+            <div className="eaves-keraba-item">
+              <div className="eaves-keraba-th">{getMessage('modal.distance.horizon')}</div>
+              <div className="eaves-keraba-td">
+                <div className="outline-form">
+                  <div className="input-grid mr5" style={{ width: '98px' }}>
+                    <input type="text" className="input-origin block" defaultValue={0} value={distance.horizon} readOnly />
                   </div>
+                  <span className="thin">mm</span>
                 </div>
               </div>
-              <div className="eaves-keraba-item">
-                <div className="eaves-keraba-th">{getMessage('modal.distance.vertical')}</div>
-                <div className="eaves-keraba-td">
-                  <div className="outline-form">
-                    <div className="input-grid mr5" style={{ width: '98px' }}>
-                      <input type="text" className="input-origin block" defaultValue={0} value={distance.vertical} readOnly />
-                    </div>
-                    <span className="thin">mm</span>
+            </div>
+            <div className="eaves-keraba-item">
+              <div className="eaves-keraba-th">{getMessage('modal.distance.vertical')}</div>
+              <div className="eaves-keraba-td">
+                <div className="outline-form">
+                  <div className="input-grid mr5" style={{ width: '98px' }}>
+                    <input type="text" className="input-origin block" defaultValue={0} value={distance.vertical} readOnly />
                   </div>
+                  <span className="thin">mm</span>
                 </div>
               </div>
             </div>
           </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={handleClose}>
-              {getMessage('common.ok')}
-            </button>
-          </div>
         </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal act" onClick={handleClose}>
+            {getMessage('common.ok')}
+          </button>
+        </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx b/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx
index c3975543..a59f8f27 100644
--- a/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx
+++ b/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx
@@ -38,34 +38,24 @@ 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>
+    <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)}>
+              {item.name}
+            </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)}>
-                {item.name}
-              </button>
-            ))}
-          </div>
-          <div className="properties-setting-wrap outer">
-            <div className="setting-tit">{getMessage('setting')}</div>
-            {type === TYPES.EAVES && <Eaves {...eavesProps} />}
-            {type === TYPES.GABLE && <Gable {...gableProps} />}
-            {type === TYPES.WALL_MERGE && <WallMerge {...wallMergeProps} />}
-            {type === TYPES.SHED && <Shed {...shedProps} />}
-          </div>
+        <div className="properties-setting-wrap outer">
+          <div className="setting-tit">{getMessage('setting')}</div>
+          {type === TYPES.EAVES && <Eaves {...eavesProps} />}
+          {type === TYPES.GABLE && <Gable {...gableProps} />}
+          {type === TYPES.WALL_MERGE && <WallMerge {...wallMergeProps} />}
+          {type === TYPES.SHED && <Shed {...shedProps} />}
         </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx b/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
index df8525cc..910a2f02 100644
--- a/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
+++ b/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
@@ -63,123 +63,113 @@ 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>
-          <div className="drawing-flow-wrap">
-            <div className="discrimination-box">
-              <div className="discrimination-tit mb15">{getMessage('modal.flow.direction.setting')}</div>
-              <div className="guide">{getMessage('modal.flow.direction.setting.info')}</div>
-              <div className="object-direction-wrap">
-                <div className="plane-direction">
-                  <span className="top">{getMessage('commons.north')}</span>
-                  <button className={`plane-btn up ${flowDirection === 'north' ? 'act' : ''}`} onClick={() => setFlowDirection('north')}></button>
-                  <span className="right">{getMessage('commons.east')}</span>
-                  <button className={`plane-btn right ${flowDirection === 'east' ? 'act' : ''}`} onClick={() => setFlowDirection('east')}></button>
-                  <span className="bottom">{getMessage('commons.south')}</span>
-                  <button className={`plane-btn down ${flowDirection === 'south' ? 'act' : ''}`} onClick={() => setFlowDirection('south')}></button>
-                  <span className="left">{getMessage('commons.west')}</span>
-                  <button className={`plane-btn left ${flowDirection === 'west' ? 'act' : ''}`} onClick={() => setFlowDirection('west')}></button>
-                </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>
+            <div className="guide">{getMessage('modal.flow.direction.setting.info')}</div>
+            <div className="object-direction-wrap">
+              <div className="plane-direction">
+                <span className="top">{getMessage('commons.north')}</span>
+                <button className={`plane-btn up ${flowDirection === 'north' ? 'act' : ''}`} onClick={() => setFlowDirection('north')}></button>
+                <span className="right">{getMessage('commons.east')}</span>
+                <button className={`plane-btn right ${flowDirection === 'east' ? 'act' : ''}`} onClick={() => setFlowDirection('east')}></button>
+                <span className="bottom">{getMessage('commons.south')}</span>
+                <button className={`plane-btn down ${flowDirection === 'south' ? 'act' : ''}`} onClick={() => setFlowDirection('south')}></button>
+                <span className="left">{getMessage('commons.west')}</span>
+                <button className={`plane-btn left ${flowDirection === 'west' ? 'act' : ''}`} onClick={() => setFlowDirection('west')}></button>
               </div>
             </div>
-            <div className="discrimination-box">
-              <div className="discrimination-tit mb15">{getMessage('modal.module.basic.setting.orientation.setting')}</div>
-              <div className="guide">{getMessage('modal.shape.flow.direction.setting.orientation.setting.info')}</div>
-              <div className="mb-box">
-                <div className="d-check-radio pop mb15">
-                  <input
-                    type="radio"
-                    name="radio01"
-                    id="ra01"
-                    checked={type === FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH}
-                    onChange={(e) => {
-                      setCompasDeg(0)
-                      setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
-                    }}
-                  />
-                  <label htmlFor="ra01">{getMessage('modal.shape.flow.direction.setting.orientation.8')}</label>
-                </div>
-                <div className="grid-select ">
-                  <QSelectBox
-                    value={selectedOrientation}
-                    options={orientations}
-                    onChange={(e) => {
-                      setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
-                      setSelectedOrientation(e)
-                      setCompasDeg(e.value)
-                    }}
-                    showKey={'name'}
-                    targetKey={'value'}
-                    sourceKey={'value'}
-                  />
-                </div>
+          </div>
+          <div className="discrimination-box">
+            <div className="discrimination-tit mb15">{getMessage('modal.module.basic.setting.orientation.setting')}</div>
+            <div className="guide">{getMessage('modal.shape.flow.direction.setting.orientation.setting.info')}</div>
+            <div className="mb-box">
+              <div className="d-check-radio pop mb15">
+                <input
+                  type="radio"
+                  name="radio01"
+                  id="ra01"
+                  checked={type === FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH}
+                  onChange={(e) => {
+                    setCompasDeg(0)
+                    setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
+                  }}
+                />
+                <label htmlFor="ra01">{getMessage('modal.shape.flow.direction.setting.orientation.8')}</label>
               </div>
-              <div className="mb-box">
-                <div className="d-check-radio pop">
-                  <input
-                    type="radio"
-                    name="radio01"
-                    id="ra02"
-                    value={1}
-                    checked={type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH}
-                    onChange={(e) => {
-                      setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
-                    }}
-                  />
-                  <label htmlFor="ra02">{getMessage('modal.shape.flow.direction.setting.orientation.24')}</label>
-                </div>
+              <div className="grid-select ">
+                <QSelectBox
+                  value={selectedOrientation}
+                  options={orientations}
+                  onChange={(e) => {
+                    setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
+                    setSelectedOrientation(e)
+                    setCompasDeg(e.value)
+                  }}
+                  showKey={'name'}
+                  targetKey={'value'}
+                  sourceKey={'value'}
+                />
               </div>
-              <div className="draw-flow-wrap">
-                <div className="compas-box">
-                  <div className="compas-box-inner">
-                    {Array.from({ length: 180 / 15 + 1 }).map((dot, index) => (
-                      <div
-                        key={index}
-                        className={`circle ${compasDeg === 15 * (12 + index) && type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH ? 'act' : ''}`}
-                        onClick={() => {
-                          setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
-                          setCompasDeg(15 * (12 + index))
-                        }}
-                      ></div>
-                    ))}
-                    {Array.from({ length: 180 / 15 - 1 }).map((dot, index) => (
-                      <div
-                        key={index}
-                        className={`circle ${compasDeg === 15 * (index + 1) && type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH ? 'act' : ''}`}
-                        onClick={() => {
-                          setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
-                          setCompasDeg(15 * (index + 1))
-                        }}
-                      ></div>
-                    ))}
-                    <div className="compas">
-                      <div
-                        className="compas-arr"
-                        style={{ transform: `${type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH && `rotate(${compasDeg}deg)`}` }}
-                      ></div>
-                    </div>
+            </div>
+            <div className="mb-box">
+              <div className="d-check-radio pop">
+                <input
+                  type="radio"
+                  name="radio01"
+                  id="ra02"
+                  value={1}
+                  checked={type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH}
+                  onChange={(e) => {
+                    setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
+                  }}
+                />
+                <label htmlFor="ra02">{getMessage('modal.shape.flow.direction.setting.orientation.24')}</label>
+              </div>
+            </div>
+            <div className="draw-flow-wrap">
+              <div className="compas-box">
+                <div className="compas-box-inner">
+                  {Array.from({ length: 180 / 15 + 1 }).map((dot, index) => (
+                    <div
+                      key={index}
+                      className={`circle ${compasDeg === 15 * (12 + index) && type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH ? 'act' : ''}`}
+                      onClick={() => {
+                        setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
+                        setCompasDeg(15 * (12 + index))
+                      }}
+                    ></div>
+                  ))}
+                  {Array.from({ length: 180 / 15 - 1 }).map((dot, index) => (
+                    <div
+                      key={index}
+                      className={`circle ${compasDeg === 15 * (index + 1) && type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH ? 'act' : ''}`}
+                      onClick={() => {
+                        setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
+                        setCompasDeg(15 * (index + 1))
+                      }}
+                    ></div>
+                  ))}
+                  <div className="compas">
+                    <div
+                      className="compas-arr"
+                      style={{ transform: `${type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH && `rotate(${compasDeg}deg)`}` }}
+                    ></div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={() => changeSurfaceFlowDirection(target, flowDirection, compasDeg)}>
-              {getMessage('modal.common.save')}
-            </button>
-          </div>
         </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal act" onClick={() => changeSurfaceFlowDirection(target, flowDirection, compasDeg)}>
+            {getMessage('modal.common.save')}
+          </button>
+        </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/grid/DotLineGrid.jsx b/src/components/floor-plan/modal/grid/DotLineGrid.jsx
index 853d27c1..d118188d 100644
--- a/src/components/floor-plan/modal/grid/DotLineGrid.jsx
+++ b/src/components/floor-plan/modal/grid/DotLineGrid.jsx
@@ -177,125 +177,115 @@ 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={() => {
-              setIsShow(false)
-              closePopup(id, isConfig)
-            }}
-          >
-            닫기
+    <WithDraggable isShow={true} pos={pos} className="ssm">
+      <WithDraggable.Header
+        title={getMessage('modal.canvas.setting.grid.dot.line.setting')}
+        onClose={() => {
+          setIsShow(false)
+          closePopup(id, isConfig)
+        }}
+      />
+      <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} />
+            <label htmlFor="ch01">{getMessage('modal.canvas.setting.grid.dot.line.setting.dot.display')}</label>
+          </div>
+          <div className="d-check-box pop">
+            <input type="checkbox" id="ch02" value={TYPE.LINE} onChange={handleCheckBoxChange} checked={copyCurrentSetting.LINE} />
+            <label htmlFor="ch02">{getMessage('modal.canvas.setting.grid.dot.line.setting.line.display')}</label>
+          </div>
+        </div>
+        <div className="grid-option-wrap">
+          <div className="grid-option-box">
+            <div className="d-check-radio pop no-text">
+              <input
+                type="radio"
+                name="radio01"
+                id="ra01"
+                value={1}
+                onChange={handleRadioChange}
+                checked={(copyCurrentSetting.DOT || copyCurrentSetting.LINE) && copyCurrentSetting.INTERVAL.type === 1}
+                readOnly={!copyCurrentSetting.DOT && !copyCurrentSetting.LINE}
+              />
+              <label htmlFor="ra01"></label>
+            </div>
+            <div className="grid-input-form">
+              <span className="mr10">{getMessage('modal.canvas.setting.grid.dot.line.setting.horizon')}</span>
+              <div className="input-grid mr5">
+                <input
+                  type="text"
+                  className="input-origin"
+                  name={`horizontalInterval`}
+                  value={copyCurrentSetting.INTERVAL.horizontalInterval}
+                  onChange={(e) => onlyNumberInputChange(e, changeInput)}
+                />
+              </div>
+              <span>mm</span>
+            </div>
+            <div className="grid-input-form">
+              <span className="mr10">{getMessage('modal.canvas.setting.grid.dot.line.setting.vertical')}</span>
+              <div className="input-grid mr5">
+                <input
+                  type="text"
+                  className="input-origin"
+                  name={`verticalInterval`}
+                  value={copyCurrentSetting.INTERVAL.verticalInterval}
+                  onChange={(e) => onlyNumberInputChange(e, changeInput)}
+                />
+              </div>
+              <span>mm</span>
+            </div>
+          </div>
+          <div className="grid-option-box">
+            <div className="d-check-radio pop no-text">
+              <input
+                type="radio"
+                name="radio01"
+                id="ra02"
+                value={2}
+                onChange={handleRadioChange}
+                checked={(copyCurrentSetting.DOT || copyCurrentSetting.LINE) && copyCurrentSetting.INTERVAL.type === 2}
+                readOnly={!copyCurrentSetting.DOT && !copyCurrentSetting.LINE}
+              />
+              <label htmlFor="ra02"></label>
+            </div>
+            <div className="grid-input-form">
+              <span className="mr10">{getMessage('modal.canvas.setting.grid.dot.line.setting.ratio')}</span>
+              <div className="input-grid mr5">
+                <input
+                  type="text"
+                  className="input-origin"
+                  name={`ratioInterval`}
+                  value={copyCurrentSetting.INTERVAL.ratioInterval}
+                  onChange={(e) => onlyNumberInputChange(e, changeInput)}
+                />
+              </div>
+              <span>mm</span>
+            </div>
+            <div className="grid-select">
+              {selectOption && (
+                <QSelectBox
+                  options={SelectOptions}
+                  onChange={changeDimension}
+                  value={selectOption}
+                  showKey={'name'}
+                  targetKey={'id'}
+                  sourceKey={'id'}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal mr5" onClick={reset}>
+            {getMessage('modal.canvas.setting.grid.dot.line.setting.reset')}
+          </button>
+          <button className="btn-frame modal act" onClick={handleSave}>
+            {getMessage('modal.canvas.setting.grid.dot.line.setting.save')}
           </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} />
-              <label htmlFor="ch01">{getMessage('modal.canvas.setting.grid.dot.line.setting.dot.display')}</label>
-            </div>
-            <div className="d-check-box pop">
-              <input type="checkbox" id="ch02" value={TYPE.LINE} onChange={handleCheckBoxChange} checked={copyCurrentSetting.LINE} />
-              <label htmlFor="ch02">{getMessage('modal.canvas.setting.grid.dot.line.setting.line.display')}</label>
-            </div>
-          </div>
-          <div className="grid-option-wrap">
-            <div className="grid-option-box">
-              <div className="d-check-radio pop no-text">
-                <input
-                  type="radio"
-                  name="radio01"
-                  id="ra01"
-                  value={1}
-                  onChange={handleRadioChange}
-                  checked={(copyCurrentSetting.DOT || copyCurrentSetting.LINE) && copyCurrentSetting.INTERVAL.type === 1}
-                  readOnly={!copyCurrentSetting.DOT && !copyCurrentSetting.LINE}
-                />
-                <label htmlFor="ra01"></label>
-              </div>
-              <div className="grid-input-form">
-                <span className="mr10">{getMessage('modal.canvas.setting.grid.dot.line.setting.horizon')}</span>
-                <div className="input-grid mr5">
-                  <input
-                    type="text"
-                    className="input-origin"
-                    name={`horizontalInterval`}
-                    value={copyCurrentSetting.INTERVAL.horizontalInterval}
-                    onChange={(e) => onlyNumberInputChange(e, changeInput)}
-                  />
-                </div>
-                <span>mm</span>
-              </div>
-              <div className="grid-input-form">
-                <span className="mr10">{getMessage('modal.canvas.setting.grid.dot.line.setting.vertical')}</span>
-                <div className="input-grid mr5">
-                  <input
-                    type="text"
-                    className="input-origin"
-                    name={`verticalInterval`}
-                    value={copyCurrentSetting.INTERVAL.verticalInterval}
-                    onChange={(e) => onlyNumberInputChange(e, changeInput)}
-                  />
-                </div>
-                <span>mm</span>
-              </div>
-            </div>
-            <div className="grid-option-box">
-              <div className="d-check-radio pop no-text">
-                <input
-                  type="radio"
-                  name="radio01"
-                  id="ra02"
-                  value={2}
-                  onChange={handleRadioChange}
-                  checked={(copyCurrentSetting.DOT || copyCurrentSetting.LINE) && copyCurrentSetting.INTERVAL.type === 2}
-                  readOnly={!copyCurrentSetting.DOT && !copyCurrentSetting.LINE}
-                />
-                <label htmlFor="ra02"></label>
-              </div>
-              <div className="grid-input-form">
-                <span className="mr10">{getMessage('modal.canvas.setting.grid.dot.line.setting.ratio')}</span>
-                <div className="input-grid mr5">
-                  <input
-                    type="text"
-                    className="input-origin"
-                    name={`ratioInterval`}
-                    value={copyCurrentSetting.INTERVAL.ratioInterval}
-                    onChange={(e) => onlyNumberInputChange(e, changeInput)}
-                  />
-                </div>
-                <span>mm</span>
-              </div>
-              <div className="grid-select">
-                {selectOption && (
-                  <QSelectBox
-                    options={SelectOptions}
-                    onChange={changeDimension}
-                    value={selectOption}
-                    showKey={'name'}
-                    targetKey={'id'}
-                    sourceKey={'id'}
-                  />
-                )}
-              </div>
-            </div>
-          </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal mr5" onClick={reset}>
-              {getMessage('modal.canvas.setting.grid.dot.line.setting.reset')}
-            </button>
-            <button className="btn-frame modal act" onClick={handleSave}>
-              {getMessage('modal.canvas.setting.grid.dot.line.setting.save')}
-            </button>
-          </div>
-        </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/grid/GridCopy.jsx b/src/components/floor-plan/modal/grid/GridCopy.jsx
index fa0b0ba8..e1a6f9f9 100644
--- a/src/components/floor-plan/modal/grid/GridCopy.jsx
+++ b/src/components/floor-plan/modal/grid/GridCopy.jsx
@@ -20,67 +20,57 @@ 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>
-          <div className="grid-option-tit">{getMessage('modal.grid.copy.info')}</div>
-          <div className="grid-option-wrap">
-            <div className="grid-option-box">
-              <div className="grid-input-form">
-                <span className="mr10">{getMessage('modal.grid.copy.length')}</span>
-                <div className="input-grid mr5">
-                  <input type="text" className="input-origin" value={length} onChange={(e) => setLength(e.target.value)} />
-                </div>
-                <span>mm</span>
-              </div>
-              <div className="grid-direction">
-                <button
-                  className={`direction up ${arrow === '↑' ? 'act' : ''} ${currentObject?.direction === 'vertical' ? 'no-click' : ''}`}
-                  onClick={() => {
-                    if (currentObject?.direction === 'vertical') return
-                    setArrow('↑')
-                  }}
-                ></button>
-                <button
-                  className={`direction down ${arrow === '↓' ? 'act' : ''} ${currentObject?.direction === 'vertical' ? 'no-click' : ''}`}
-                  onClick={() => {
-                    if (currentObject?.direction === 'vertical') return
-                    setArrow('↓')
-                  }}
-                ></button>
-                <button
-                  className={`direction left ${arrow === '←' ? 'act' : ''} ${currentObject?.direction === 'horizontal' ? 'no-click' : ''}`}
-                  onClick={() => {
-                    if (currentObject?.direction === 'horizontal') return
-                    setArrow('←')
-                  }}
-                ></button>
-                <button
-                  className={`direction right ${arrow === '→' ? 'act' : ''} ${currentObject?.direction === 'horizontal' ? 'no-click' : ''}`}
-                  onClick={() => {
-                    if (currentObject?.direction === 'horizontal') return
-                    setArrow('→')
-                  }}
-                ></button>
+    <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">
+            <div className="grid-input-form">
+              <span className="mr10">{getMessage('modal.grid.copy.length')}</span>
+              <div className="input-grid mr5">
+                <input type="text" className="input-origin" value={length} onChange={(e) => setLength(e.target.value)} />
               </div>
+              <span>mm</span>
+            </div>
+            <div className="grid-direction">
+              <button
+                className={`direction up ${arrow === '↑' ? 'act' : ''} ${currentObject?.direction === 'vertical' ? 'no-click' : ''}`}
+                onClick={() => {
+                  if (currentObject?.direction === 'vertical') return
+                  setArrow('↑')
+                }}
+              ></button>
+              <button
+                className={`direction down ${arrow === '↓' ? 'act' : ''} ${currentObject?.direction === 'vertical' ? 'no-click' : ''}`}
+                onClick={() => {
+                  if (currentObject?.direction === 'vertical') return
+                  setArrow('↓')
+                }}
+              ></button>
+              <button
+                className={`direction left ${arrow === '←' ? 'act' : ''} ${currentObject?.direction === 'horizontal' ? 'no-click' : ''}`}
+                onClick={() => {
+                  if (currentObject?.direction === 'horizontal') return
+                  setArrow('←')
+                }}
+              ></button>
+              <button
+                className={`direction right ${arrow === '→' ? 'act' : ''} ${currentObject?.direction === 'horizontal' ? 'no-click' : ''}`}
+                onClick={() => {
+                  if (currentObject?.direction === 'horizontal') return
+                  setArrow('→')
+                }}
+              ></button>
             </div>
           </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={handleApply}>
-              {getMessage('modal.grid.copy.save')}
-            </button>
-          </div>
         </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal act" onClick={handleApply}>
+            {getMessage('modal.grid.copy.save')}
+          </button>
+        </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/grid/GridMove.jsx b/src/components/floor-plan/modal/grid/GridMove.jsx
index dbf15206..4aa27851 100644
--- a/src/components/floor-plan/modal/grid/GridMove.jsx
+++ b/src/components/floor-plan/modal/grid/GridMove.jsx
@@ -73,93 +73,83 @@ 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>
-          <div className="grid-option-tit">{getMessage('modal.grid.move.info')}</div>
-          <div className="grid-option-wrap">
-            <div className="d-check-box pop mb10">
-              <input type="checkbox" id="ch99" checked={isAll} onChange={() => setIsAll(!isAll)} />
-              <label htmlFor="ch99">{getMessage('modal.grid.move.all')}</label>
-            </div>
-            <div className="grid-option-box">
-              <div className="move-form">
-                <p className="mb5">{getMessage('modal.grid.move.length')}</p>
-                <div className="input-move-wrap mb5">
-                  <div className="input-move">
-                    <input
-                      type="text"
-                      className="input-origin"
-                      value={verticalSize}
-                      onChange={(e) => setVerticalSize(e.target.value)}
-                      readOnly={!isAll && currentObject?.direction === 'vertical'}
-                    />
-                  </div>
-                  <span>mm</span>
-                  <div className="direction-move-wrap">
-                    <button
-                      className={`direction up ${arrow1 === '↑' ? 'act' : ''} ${!isAll && currentObject?.direction === 'vertical' ? 'no-click' : ''}`}
-                      onClick={() => {
-                        setArrow1('↑')
-                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
-                      }}
-                    ></button>
-                    <button
-                      className={`direction down ${arrow1 === '↓' ? 'act' : ''} ${!isAll && currentObject?.direction === 'vertical' ? 'no-click' : ''}`}
-                      onClick={() => {
-                        setArrow1('↓')
-                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
-                      }}
-                    ></button>
-                  </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">
+            <input type="checkbox" id="ch99" checked={isAll} onChange={() => setIsAll(!isAll)} />
+            <label htmlFor="ch99">{getMessage('modal.grid.move.all')}</label>
+          </div>
+          <div className="grid-option-box">
+            <div className="move-form">
+              <p className="mb5">{getMessage('modal.grid.move.length')}</p>
+              <div className="input-move-wrap mb5">
+                <div className="input-move">
+                  <input
+                    type="text"
+                    className="input-origin"
+                    value={verticalSize}
+                    onChange={(e) => setVerticalSize(e.target.value)}
+                    readOnly={!isAll && currentObject?.direction === 'vertical'}
+                  />
                 </div>
-                <div className="input-move-wrap">
-                  <div className="input-move">
-                    <input
-                      type="text"
-                      className="input-origin"
-                      value={horizonSize}
-                      onChange={(e) => setHorizonSize(e.target.value)}
-                      readOnly={!isAll && currentObject?.direction === 'horizontal'}
-                    />
-                  </div>
-                  <span>mm</span>
-                  <div className="direction-move-wrap">
-                    <button
-                      className={`direction left ${arrow2 === '←' ? 'act' : ''} ${!isAll && currentObject?.direction === 'horizontal' ? 'no-click' : ''}`}
-                      onClick={() => {
-                        setArrow2('←')
-                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
-                      }}
-                    ></button>
-                    <button
-                      className={`direction right ${arrow2 === '→' ? 'act' : ''} ${!isAll && currentObject?.direction === 'horizontal' ? 'no-click' : ''}`}
-                      onClick={() => {
-                        setArrow2('→')
-                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
-                      }}
-                    ></button>
-                  </div>
+                <span>mm</span>
+                <div className="direction-move-wrap">
+                  <button
+                    className={`direction up ${arrow1 === '↑' ? 'act' : ''} ${!isAll && currentObject?.direction === 'vertical' ? 'no-click' : ''}`}
+                    onClick={() => {
+                      setArrow1('↑')
+                      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+                    }}
+                  ></button>
+                  <button
+                    className={`direction down ${arrow1 === '↓' ? 'act' : ''} ${!isAll && currentObject?.direction === 'vertical' ? 'no-click' : ''}`}
+                    onClick={() => {
+                      setArrow1('↓')
+                      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+                    }}
+                  ></button>
+                </div>
+              </div>
+              <div className="input-move-wrap">
+                <div className="input-move">
+                  <input
+                    type="text"
+                    className="input-origin"
+                    value={horizonSize}
+                    onChange={(e) => setHorizonSize(e.target.value)}
+                    readOnly={!isAll && currentObject?.direction === 'horizontal'}
+                  />
+                </div>
+                <span>mm</span>
+                <div className="direction-move-wrap">
+                  <button
+                    className={`direction left ${arrow2 === '←' ? 'act' : ''} ${!isAll && currentObject?.direction === 'horizontal' ? 'no-click' : ''}`}
+                    onClick={() => {
+                      setArrow2('←')
+                      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
+                    }}
+                  ></button>
+                  <button
+                    className={`direction right ${arrow2 === '→' ? 'act' : ''} ${!isAll && currentObject?.direction === 'horizontal' ? 'no-click' : ''}`}
+                    onClick={() => {
+                      setArrow2('→')
+                      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
+                    }}
+                  ></button>
                 </div>
               </div>
             </div>
           </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={handleApply}>
-              {getMessage('modal.grid.move.save')}
-            </button>
-          </div>
         </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal act" onClick={handleApply}>
+            {getMessage('modal.grid.move.save')}
+          </button>
+        </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx b/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx
index e309646a..049c2e40 100644
--- a/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx
+++ b/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx
@@ -50,51 +50,41 @@ 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>
+    <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>
+            {getMessage('modal.line.property.edit.selected')} [ {selectedProperty?.name} ]
+          </span>
         </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>
-              {getMessage('modal.line.property.edit.selected')} [ {selectedProperty?.name} ]
-            </span>
-          </div>
-          <div className="properties-setting-wrap outer">
-            <div className="setting-tit">{getMessage('setting')}</div>
-            <div className="outline-wrap">
-              <div className="radio-grid-wrap">
-                {properties.map((property, index) => {
-                  return (
-                    <div className="d-check-radio pop" key={index}>
-                      <input
-                        type="radio"
-                        name="radio01"
-                        id={'ra' + (index + 1 >= 10 ? index + 1 : `0${index + 1}`)}
-                        onChange={(e) => setSelectedProperty(property)}
-                      />
-                      <label htmlFor={'ra' + (index + 1 > 10 ? index + 1 : `0${index + 1}`)}>{property.name}</label>
-                    </div>
-                  )
-                })}
-              </div>
+        <div className="properties-setting-wrap outer">
+          <div className="setting-tit">{getMessage('setting')}</div>
+          <div className="outline-wrap">
+            <div className="radio-grid-wrap">
+              {properties.map((property, index) => {
+                return (
+                  <div className="d-check-radio pop" key={index}>
+                    <input
+                      type="radio"
+                      name="radio01"
+                      id={'ra' + (index + 1 >= 10 ? index + 1 : `0${index + 1}`)}
+                      onChange={(e) => setSelectedProperty(property)}
+                    />
+                    <label htmlFor={'ra' + (index + 1 > 10 ? index + 1 : `0${index + 1}`)}>{property.name}</label>
+                  </div>
+                )
+              })}
             </div>
           </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={() => changeSurfaceLineProperty(selectedProperty, target)}>
-              {getMessage('modal.common.save')}
-            </button>
-          </div>
         </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal act" onClick={() => changeSurfaceLineProperty(selectedProperty, target)}>
+            {getMessage('modal.common.save')}
+          </button>
+        </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx b/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx
index 50c819ed..1e1b2f2f 100644
--- a/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx
+++ b/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx
@@ -14,38 +14,28 @@ 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>
-          <div className="grid-option-tit"> {getMessage('modal.module.circuit.number.edit.info')}</div>
-          <div className="grid-option-wrap">
-            <div className="grid-option-box">
-              <div className="outline-form">
-                <span className="mr10" style={{ width: 'auto' }}>
-                  {getMessage('modal.module.circuit.number')}
-                </span>
-                <div className="input-grid mr5">
-                  <input type="text" className="input-origin block" />
-                </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">
+            <div className="outline-form">
+              <span className="mr10" style={{ width: 'auto' }}>
+                {getMessage('modal.module.circuit.number')}
+              </span>
+              <div className="input-grid mr5">
+                <input type="text" className="input-origin block" />
               </div>
             </div>
           </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={handleApply}>
-              {getMessage('modal.common.save')}
-            </button>
-          </div>
         </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal act" onClick={handleApply}>
+            {getMessage('modal.common.save')}
+          </button>
+        </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/module/PanelEdit.jsx b/src/components/floor-plan/modal/module/PanelEdit.jsx
index ea671881..2a06e062 100644
--- a/src/components/floor-plan/modal/module/PanelEdit.jsx
+++ b/src/components/floor-plan/modal/module/PanelEdit.jsx
@@ -91,75 +91,64 @@ 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>
+    <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)
+              ? 'modal.move.setting.info'
+              : 'modal.copy.setting.info',
+          )}
         </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)
-                ? 'modal.move.setting.info'
-                : 'modal.copy.setting.info',
-            )}
-          </div>
-          <div className="grid-option-wrap">
-            <div className="grid-option-box">
-              <div className="grid-input-form">
-                <span className="mr10">{getMessage('margin')}</span>
-                <div className="input-grid mr5">
-                  <input type="text" className="input-origin" defaultValue={0} onKeyUp={(e) => setLength(e.target.value)} />
-                </div>
-                <span>mm</span>
-              </div>
-              <div className="grid-direction">
-                <button
-                  className={`direction up ${direction === 'up' ? 'act' : ''}`}
-                  onClick={() => {
-                    setDirection('up')
-                  }}
-                ></button>
-                <button
-                  className={`direction down ${direction === 'down' ? 'act' : ''}`}
-                  onClick={() => {
-                    setDirection('down')
-                  }}
-                ></button>
-                <button
-                  className={`direction left ${direction === 'left' ? 'act' : ''}`}
-                  onClick={() => {
-                    setDirection('left')
-                  }}
-                ></button>
-                <button
-                  className={`direction right ${direction === 'right' ? 'act' : ''}`}
-                  onClick={() => {
-                    setDirection('right')
-                  }}
-                ></button>
+        <div className="grid-option-wrap">
+          <div className="grid-option-box">
+            <div className="grid-input-form">
+              <span className="mr10">{getMessage('margin')}</span>
+              <div className="input-grid mr5">
+                <input type="text" className="input-origin" defaultValue={0} onKeyUp={(e) => setLength(e.target.value)} />
               </div>
+              <span>mm</span>
+            </div>
+            <div className="grid-direction">
+              <button
+                className={`direction up ${direction === 'up' ? 'act' : ''}`}
+                onClick={() => {
+                  setDirection('up')
+                }}
+              ></button>
+              <button
+                className={`direction down ${direction === 'down' ? 'act' : ''}`}
+                onClick={() => {
+                  setDirection('down')
+                }}
+              ></button>
+              <button
+                className={`direction left ${direction === 'left' ? 'act' : ''}`}
+                onClick={() => {
+                  setDirection('left')
+                }}
+              ></button>
+              <button
+                className={`direction right ${direction === 'right' ? 'act' : ''}`}
+                onClick={() => {
+                  setDirection('right')
+                }}
+              ></button>
             </div>
           </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal mr5" onClick={handleApply}>
-              {getMessage('modal.common.save')}
-            </button>
-          </div>
         </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal mr5" onClick={handleApply}>
+            {getMessage('modal.common.save')}
+          </button>
+        </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/module/column/ColumnInsert.jsx b/src/components/floor-plan/modal/module/column/ColumnInsert.jsx
index e42d2ca3..0c160656 100644
--- a/src/components/floor-plan/modal/module/column/ColumnInsert.jsx
+++ b/src/components/floor-plan/modal/module/column/ColumnInsert.jsx
@@ -24,91 +24,69 @@ 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)}>
-            닫기
+    <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">
+            <div className="additional-radio-wrap">
+              <div className="d-check-radio pop">
+                <input
+                  type="radio"
+                  name="radio01"
+                  id="ra01"
+                  onChange={handleRadioChange}
+                  value={MODULE_INSERT_TYPE.LEFT}
+                  checked={selectedType === MODULE_INSERT_TYPE.LEFT}
+                />
+                <label htmlFor="ra01">{getMessage('modal.panel.column.insert.type.left')}</label>
+              </div>
+              <div className="d-check-radio pop">
+                <input
+                  type="radio"
+                  name="radio01"
+                  id="ra02"
+                  onChange={handleRadioChange}
+                  value={MODULE_INSERT_TYPE.RIGHT}
+                  checked={selectedType === MODULE_INSERT_TYPE.RIGHT}
+                />
+                <label htmlFor="ra02">{getMessage('modal.panel.column.insert.type.right')}</label>
+              </div>
+            </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' }} />
+              )}
+              {selectedType === MODULE_INSERT_TYPE.RIGHT && (
+                <Image src="/static/images/canvas/additional-edit02.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
+              )}
+            </div>
+          </div>
+        </div>
+        <div className="properties-setting-wrap">
+          <div className="setting-tit">{getMessage('legend')}</div>
+          <div className="module-table-box">
+            <div className="module-table-inner">
+              <div className="additional-color-wrap">
+                <div className="additional-color-box">
+                  <span className="additional-color pink"></span>
+                  <span className="normal-font">{getMessage('modal.panel.select.column')}</span>
+                </div>
+                <div className="additional-color-box">
+                  <span className="additional-color white"></span>
+                  <span className="normal-font">{getMessage('modal.panel.insert.column')}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal act" onClick={handleApply}>
+            {getMessage('modal.common.save')}
           </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">
-              <div className="additional-radio-wrap">
-                <div className="d-check-radio pop">
-                  <input
-                    type="radio"
-                    name="radio01"
-                    id="ra01"
-                    onChange={handleRadioChange}
-                    value={MODULE_INSERT_TYPE.LEFT}
-                    checked={selectedType === MODULE_INSERT_TYPE.LEFT}
-                  />
-                  <label htmlFor="ra01">{getMessage('modal.panel.column.insert.type.left')}</label>
-                </div>
-                <div className="d-check-radio pop">
-                  <input
-                    type="radio"
-                    name="radio01"
-                    id="ra02"
-                    onChange={handleRadioChange}
-                    value={MODULE_INSERT_TYPE.RIGHT}
-                    checked={selectedType === MODULE_INSERT_TYPE.RIGHT}
-                  />
-                  <label htmlFor="ra02">{getMessage('modal.panel.column.insert.type.right')}</label>
-                </div>
-              </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' }}
-                  />
-                )}
-                {selectedType === MODULE_INSERT_TYPE.RIGHT && (
-                  <Image
-                    src="/static/images/canvas/additional-edit02.svg"
-                    alt="react"
-                    width={0}
-                    height={0}
-                    style={{ width: 'auto', height: 'auto' }}
-                  />
-                )}
-              </div>
-            </div>
-          </div>
-          <div className="properties-setting-wrap">
-            <div className="setting-tit">{getMessage('legend')}</div>
-            <div className="module-table-box">
-              <div className="module-table-inner">
-                <div className="additional-color-wrap">
-                  <div className="additional-color-box">
-                    <span className="additional-color pink"></span>
-                    <span className="normal-font">{getMessage('modal.panel.select.column')}</span>
-                  </div>
-                  <div className="additional-color-box">
-                    <span className="additional-color white"></span>
-                    <span className="normal-font">{getMessage('modal.panel.insert.column')}</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={handleApply}>
-              {getMessage('modal.common.save')}
-            </button>
-          </div>
-        </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/module/column/ColumnRemove.jsx b/src/components/floor-plan/modal/module/column/ColumnRemove.jsx
index 66351d35..b9079642 100644
--- a/src/components/floor-plan/modal/module/column/ColumnRemove.jsx
+++ b/src/components/floor-plan/modal/module/column/ColumnRemove.jsx
@@ -26,98 +26,64 @@ 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>
-          <div className="properties-setting-wrap">
-            <div className="setting-tit">{getMessage('modal.panel.column.remove.info')}</div>
-            <div className="additional-wrap">
-              <div className="additional-radio-wrap">
-                {types.map((type, index) => {
-                  return (
-                    <div className="d-check-radio pop" key={index}>
-                      <input
-                        type="radio"
-                        name="radio01"
-                        id={`ra0${index + 1}`}
-                        onClick={(e) => setSelectedType(e.target.value)}
-                        value={type.value}
-                        checked={selectedType === type.value}
-                      />
-                      <label htmlFor={`ra0${index + 1}`}>{type.name}</label>
-                    </div>
-                  )
-                })}
-              </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' }}
-                  />
-                )}
-                {selectedType === MODULE_REMOVE_TYPE.RIGHT && (
-                  <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' }}
-                  />
-                )}
-                {selectedType === MODULE_REMOVE_TYPE.NONE && (
-                  <Image
-                    src="/static/images/canvas/additional_del04.svg"
-                    alt="react"
-                    width={0}
-                    height={0}
-                    style={{ width: 'auto', height: 'auto' }}
-                  />
-                )}
-              </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">
+            <div className="additional-radio-wrap">
+              {types.map((type, index) => {
+                return (
+                  <div className="d-check-radio pop" key={index}>
+                    <input
+                      type="radio"
+                      name="radio01"
+                      id={`ra0${index + 1}`}
+                      onClick={(e) => setSelectedType(e.target.value)}
+                      value={type.value}
+                      checked={selectedType === type.value}
+                    />
+                    <label htmlFor={`ra0${index + 1}`}>{type.name}</label>
+                  </div>
+                )
+              })}
+            </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' }} />
+              )}
+              {selectedType === MODULE_REMOVE_TYPE.RIGHT && (
+                <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' }} />
+              )}
+              {selectedType === MODULE_REMOVE_TYPE.NONE && (
+                <Image src="/static/images/canvas/additional_del04.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
+              )}
             </div>
           </div>
-          <div className="properties-setting-wrap">
-            <div className="setting-tit">{getMessage('legend')}</div>
-            <div className="module-table-box">
-              <div className="module-table-inner">
-                <div className="additional-color-wrap">
-                  <div className="additional-color-box">
-                    <span className="additional-color pink"></span>
-                    <span className="normal-font">{getMessage('modal.panel.select.column')}</span>
-                  </div>
+        </div>
+        <div className="properties-setting-wrap">
+          <div className="setting-tit">{getMessage('legend')}</div>
+          <div className="module-table-box">
+            <div className="module-table-inner">
+              <div className="additional-color-wrap">
+                <div className="additional-color-box">
+                  <span className="additional-color pink"></span>
+                  <span className="normal-font">{getMessage('modal.panel.select.column')}</span>
                 </div>
               </div>
             </div>
           </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={handleApply}>
-              {getMessage('modal.common.save')}
-            </button>
-          </div>
         </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal act" onClick={handleApply}>
+            {getMessage('modal.common.save')}
+          </button>
+        </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/module/row/RowInsert.jsx b/src/components/floor-plan/modal/module/row/RowInsert.jsx
index 9b558706..e9fb799c 100644
--- a/src/components/floor-plan/modal/module/row/RowInsert.jsx
+++ b/src/components/floor-plan/modal/module/row/RowInsert.jsx
@@ -24,91 +24,82 @@ 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)}>
-            닫기
+    <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">
+            <div className="additional-radio-wrap">
+              <div className="d-check-radio pop">
+                <input
+                  type="radio"
+                  name="radio01"
+                  id="ra01"
+                  onChange={HandleRadioChange}
+                  value={MODULE_INSERT_TYPE.TOP}
+                  checked={selectedType === MODULE_INSERT_TYPE.TOP}
+                />
+                <label htmlFor="ra01">{getMessage('modal.row.insert.type.up')}</label>
+              </div>
+              <div className="d-check-radio pop">
+                <input
+                  type="radio"
+                  name="radio01"
+                  id="ra02"
+                  onChange={HandleRadioChange}
+                  value={MODULE_INSERT_TYPE.BOTTOM}
+                  checked={selectedType === MODULE_INSERT_TYPE.BOTTOM}
+                />
+                <label htmlFor="ra02">{getMessage('modal.row.insert.type.down')}</label>
+              </div>
+            </div>
+            <div className="additional-img-wrap">
+              {selectedType === MODULE_INSERT_TYPE.TOP && (
+                <Image
+                  src="/static/images/canvas/additional_bundle-edit01.svg"
+                  alt="react"
+                  width={0}
+                  height={0}
+                  style={{ width: 'auto', height: 'auto' }}
+                />
+              )}
+              {selectedType === MODULE_INSERT_TYPE.BOTTOM && (
+                <Image
+                  src="/static/images/canvas/additional_bundle-edit02.svg"
+                  alt="react"
+                  width={0}
+                  height={0}
+                  style={{ width: 'auto', height: 'auto' }}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+        <div className="properties-setting-wrap">
+          <div className="setting-tit">{getMessage('legend')}</div>
+          <div className="module-table-box">
+            <div className="module-table-inner">
+              <div className="additional-color-wrap">
+                <div className="additional-color-box">
+                  <span className="additional-color pink"></span>
+                  <span className="normal-font">{getMessage('modal.panel.select.row')}</span>
+                </div>
+                <div className="additional-color-box">
+                  <span className="additional-color white"></span>
+                  <span className="normal-font">{getMessage('modal.panel.insert.row')}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal act" onClick={handleApply}>
+            {getMessage('modal.common.save')}
           </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">
-              <div className="additional-radio-wrap">
-                <div className="d-check-radio pop">
-                  <input
-                    type="radio"
-                    name="radio01"
-                    id="ra01"
-                    onChange={HandleRadioChange}
-                    value={MODULE_INSERT_TYPE.TOP}
-                    checked={selectedType === MODULE_INSERT_TYPE.TOP}
-                  />
-                  <label htmlFor="ra01">{getMessage('modal.row.insert.type.up')}</label>
-                </div>
-                <div className="d-check-radio pop">
-                  <input
-                    type="radio"
-                    name="radio01"
-                    id="ra02"
-                    onChange={HandleRadioChange}
-                    value={MODULE_INSERT_TYPE.BOTTOM}
-                    checked={selectedType === MODULE_INSERT_TYPE.BOTTOM}
-                  />
-                  <label htmlFor="ra02">{getMessage('modal.row.insert.type.down')}</label>
-                </div>
-              </div>
-              <div className="additional-img-wrap">
-                {selectedType === MODULE_INSERT_TYPE.TOP && (
-                  <Image
-                    src="/static/images/canvas/additional_bundle-edit01.svg"
-                    alt="react"
-                    width={0}
-                    height={0}
-                    style={{ width: 'auto', height: 'auto' }}
-                  />
-                )}
-                {selectedType === MODULE_INSERT_TYPE.BOTTOM && (
-                  <Image
-                    src="/static/images/canvas/additional_bundle-edit02.svg"
-                    alt="react"
-                    width={0}
-                    height={0}
-                    style={{ width: 'auto', height: 'auto' }}
-                  />
-                )}
-              </div>
-            </div>
-          </div>
-          <div className="properties-setting-wrap">
-            <div className="setting-tit">{getMessage('legend')}</div>
-            <div className="module-table-box">
-              <div className="module-table-inner">
-                <div className="additional-color-wrap">
-                  <div className="additional-color-box">
-                    <span className="additional-color pink"></span>
-                    <span className="normal-font">{getMessage('modal.panel.select.row')}</span>
-                  </div>
-                  <div className="additional-color-box">
-                    <span className="additional-color white"></span>
-                    <span className="normal-font">{getMessage('modal.panel.insert.row')}</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={handleApply}>
-              {getMessage('modal.common.save')}
-            </button>
-          </div>
-        </div>
         <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/module/row/RowRemove.jsx b/src/components/floor-plan/modal/module/row/RowRemove.jsx
index 500fbfb3..5cf95b3f 100644
--- a/src/components/floor-plan/modal/module/row/RowRemove.jsx
+++ b/src/components/floor-plan/modal/module/row/RowRemove.jsx
@@ -27,98 +27,88 @@ 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>
-          <div className="properties-setting-wrap">
-            <div className="setting-tit">{getMessage('modal.row.remove.info')}</div>
-            <div className="additional-wrap">
-              <div className="additional-radio-wrap">
-                {types.map((type, index) => {
-                  return (
-                    <div className="d-check-radio pop" key={index}>
-                      <input
-                        type="radio"
-                        name="radio01"
-                        id={`ra0${index + 1}`}
-                        onClick={(e) => setSelectedType(e.target.value)}
-                        value={type.value}
-                        checked={selectedType === type.value}
-                      />
-                      <label htmlFor={`ra0${index + 1}`}>{type.name}</label>
-                    </div>
-                  )
-                })}
-              </div>
-              <div className="additional-img-wrap">
-                {selectedType === MODULE_REMOVE_TYPE.TOP && (
-                  <Image
-                    src="/static/images/canvas/additional_bundle-del01.svg"
-                    alt="react"
-                    width={0}
-                    height={0}
-                    style={{ width: 'auto', height: 'auto' }}
-                  />
-                )}
-                {selectedType === MODULE_REMOVE_TYPE.BOTTOM && (
-                  <Image
-                    src="/static/images/canvas/additional_bundle-del02.svg"
-                    alt="react"
-                    width={0}
-                    height={0}
-                    style={{ width: 'auto', height: 'auto' }}
-                  />
-                )}
-                {selectedType === MODULE_REMOVE_TYPE.VERTICAL_SIDE && (
-                  <Image
-                    src="/static/images/canvas/additional_bundle-del03.svg"
-                    alt="react"
-                    width={0}
-                    height={0}
-                    style={{ width: 'auto', height: 'auto' }}
-                  />
-                )}
-                {selectedType === MODULE_REMOVE_TYPE.NONE && (
-                  <Image
-                    src="/static/images/canvas/additional_bundle-del04.svg"
-                    alt="react"
-                    width={0}
-                    height={0}
-                    style={{ width: 'auto', height: 'auto' }}
-                  />
-                )}
-              </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">
+            <div className="additional-radio-wrap">
+              {types.map((type, index) => {
+                return (
+                  <div className="d-check-radio pop" key={index}>
+                    <input
+                      type="radio"
+                      name="radio01"
+                      id={`ra0${index + 1}`}
+                      onClick={(e) => setSelectedType(e.target.value)}
+                      value={type.value}
+                      checked={selectedType === type.value}
+                    />
+                    <label htmlFor={`ra0${index + 1}`}>{type.name}</label>
+                  </div>
+                )
+              })}
+            </div>
+            <div className="additional-img-wrap">
+              {selectedType === MODULE_REMOVE_TYPE.TOP && (
+                <Image
+                  src="/static/images/canvas/additional_bundle-del01.svg"
+                  alt="react"
+                  width={0}
+                  height={0}
+                  style={{ width: 'auto', height: 'auto' }}
+                />
+              )}
+              {selectedType === MODULE_REMOVE_TYPE.BOTTOM && (
+                <Image
+                  src="/static/images/canvas/additional_bundle-del02.svg"
+                  alt="react"
+                  width={0}
+                  height={0}
+                  style={{ width: 'auto', height: 'auto' }}
+                />
+              )}
+              {selectedType === MODULE_REMOVE_TYPE.VERTICAL_SIDE && (
+                <Image
+                  src="/static/images/canvas/additional_bundle-del03.svg"
+                  alt="react"
+                  width={0}
+                  height={0}
+                  style={{ width: 'auto', height: 'auto' }}
+                />
+              )}
+              {selectedType === MODULE_REMOVE_TYPE.NONE && (
+                <Image
+                  src="/static/images/canvas/additional_bundle-del04.svg"
+                  alt="react"
+                  width={0}
+                  height={0}
+                  style={{ width: 'auto', height: 'auto' }}
+                />
+              )}
             </div>
           </div>
-          <div className="properties-setting-wrap">
-            <div className="setting-tit">{getMessage('legend')}</div>
-            <div className="module-table-box">
-              <div className="module-table-inner">
-                <div className="additional-color-wrap">
-                  <div className="additional-color-box">
-                    <span className="additional-color pink"></span>
-                    <span className="normal-font">{getMessage('modal.panel.select.row')}</span>
-                  </div>
+        </div>
+        <div className="properties-setting-wrap">
+          <div className="setting-tit">{getMessage('legend')}</div>
+          <div className="module-table-box">
+            <div className="module-table-inner">
+              <div className="additional-color-wrap">
+                <div className="additional-color-box">
+                  <span className="additional-color pink"></span>
+                  <span className="normal-font">{getMessage('modal.panel.select.row')}</span>
                 </div>
               </div>
             </div>
           </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={handleApply}>
-              {getMessage('modal.common.save')}
-            </button>
-          </div>
         </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal act" onClick={handleApply}>
+            {getMessage('modal.common.save')}
+          </button>
+        </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/movement/MovementSetting.jsx b/src/components/floor-plan/modal/movement/MovementSetting.jsx
index 916a40bd..46464538 100644
--- a/src/components/floor-plan/modal/movement/MovementSetting.jsx
+++ b/src/components/floor-plan/modal/movement/MovementSetting.jsx
@@ -16,36 +16,26 @@ 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)}>
-            닫기
+    <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)}>
+              {item.name}
+            </button>
+          ))}
+        </div>
+        <div className="properties-setting-wrap outer">
+          {type === TYPE.FLOW_LINE && <FlowLine {...flowLineProps} />}
+          {type === TYPE.UP_DOWN && <Updown {...updownProps} />}
+        </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal act" onClick={handleSave}>
+            {getMessage('modal.common.save')}
           </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)}>
-                {item.name}
-              </button>
-            ))}
-          </div>
-          <div className="properties-setting-wrap outer">
-            {type === TYPE.FLOW_LINE && <FlowLine {...flowLineProps} />}
-            {type === TYPE.UP_DOWN && <Updown {...updownProps} />}
-          </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={handleSave}>
-              {getMessage('modal.common.save')}
-            </button>
-          </div>
-        </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/object/DormerOffset.jsx b/src/components/floor-plan/modal/object/DormerOffset.jsx
index d13533f9..af0ee8e0 100644
--- a/src/components/floor-plan/modal/object/DormerOffset.jsx
+++ b/src/components/floor-plan/modal/object/DormerOffset.jsx
@@ -40,73 +40,63 @@ 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>
-          <div className="grid-option-tit">{getMessage('modal.dormer.offset.info')}</div>
-          <div className="grid-option-wrap">
-            <div className="grid-option-box">
-              <div className="move-form">
-                <p className="mb5">{getMessage('length')}</p>
-                <div className="input-move-wrap mb5">
-                  <div className="input-move">
-                    <input type="text" className="input-origin" ref={arrow1LengthRef} placeholder="0" />
-                  </div>
-                  <span>mm</span>
-                  <div className="direction-move-wrap">
-                    <button
-                      className={`direction up ${arrow1 === 'up' ? 'act' : ''}`}
-                      onClick={() => {
-                        setArrow1('up')
-                      }}
-                    ></button>
-                    <button
-                      className={`direction down ${arrow1 === 'down' ? 'act' : ''}`}
-                      onClick={() => {
-                        setArrow1('down')
-                      }}
-                    ></button>
-                  </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">
+            <div className="move-form">
+              <p className="mb5">{getMessage('length')}</p>
+              <div className="input-move-wrap mb5">
+                <div className="input-move">
+                  <input type="text" className="input-origin" ref={arrow1LengthRef} placeholder="0" />
                 </div>
-                <div className="input-move-wrap">
-                  <div className="input-move">
-                    <input type="text" className="input-origin" ref={arrow2LengthRef} placeholder="0" />
-                  </div>
-                  <span>mm</span>
-                  <div className="direction-move-wrap">
-                    <button
-                      className={`direction left ${arrow2 === 'left' ? 'act' : ''}`}
-                      onClick={() => {
-                        setArrow2('left')
-                      }}
-                    ></button>
-                    <button
-                      className={`direction right ${arrow2 === 'right' ? 'act' : ''}`}
-                      onClick={() => {
-                        setArrow2('right')
-                      }}
-                    ></button>
-                  </div>
+                <span>mm</span>
+                <div className="direction-move-wrap">
+                  <button
+                    className={`direction up ${arrow1 === 'up' ? 'act' : ''}`}
+                    onClick={() => {
+                      setArrow1('up')
+                    }}
+                  ></button>
+                  <button
+                    className={`direction down ${arrow1 === 'down' ? 'act' : ''}`}
+                    onClick={() => {
+                      setArrow1('down')
+                    }}
+                  ></button>
+                </div>
+              </div>
+              <div className="input-move-wrap">
+                <div className="input-move">
+                  <input type="text" className="input-origin" ref={arrow2LengthRef} placeholder="0" />
+                </div>
+                <span>mm</span>
+                <div className="direction-move-wrap">
+                  <button
+                    className={`direction left ${arrow2 === 'left' ? 'act' : ''}`}
+                    onClick={() => {
+                      setArrow2('left')
+                    }}
+                  ></button>
+                  <button
+                    className={`direction right ${arrow2 === 'right' ? 'act' : ''}`}
+                    onClick={() => {
+                      setArrow2('right')
+                    }}
+                  ></button>
                 </div>
               </div>
             </div>
           </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={handleOffsetDormer}>
-              {getMessage('modal.common.save')}
-            </button>
-          </div>
         </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal act" onClick={handleOffsetDormer}>
+            {getMessage('modal.common.save')}
+          </button>
+        </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/object/ObjectSetting.jsx b/src/components/floor-plan/modal/object/ObjectSetting.jsx
index b602f163..1bbddfe6 100644
--- a/src/components/floor-plan/modal/object/ObjectSetting.jsx
+++ b/src/components/floor-plan/modal/object/ObjectSetting.jsx
@@ -100,43 +100,33 @@ 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)}>
-            닫기
+    <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)}>
+              {item.name}
+            </button>
+          ))}
+        </div>
+        <div className="properties-setting-wrap outer">
+          {buttonAct === 1 && <OpenSpace ref={objectPlacement} />}
+          {buttonAct === 2 && <Shadow ref={objectPlacement} />}
+          {buttonAct === 3 && <TriangleDormer ref={dormerPlacement} />}
+          {buttonAct === 4 && <PentagonDormer ref={dormerPlacement} />}
+        </div>
+        <div className="grid-btn-wrap">
+          <button
+            className="btn-frame modal act"
+            onClick={() => {
+              applyObject()
+            }}
+          >
+            {getMessage('write')}
           </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)}>
-                {item.name}
-              </button>
-            ))}
-          </div>
-          <div className="properties-setting-wrap outer">
-            {buttonAct === 1 && <OpenSpace ref={objectPlacement} />}
-            {buttonAct === 2 && <Shadow ref={objectPlacement} />}
-            {buttonAct === 3 && <TriangleDormer ref={dormerPlacement} />}
-            {buttonAct === 4 && <PentagonDormer ref={dormerPlacement} />}
-          </div>
-          <div className="grid-btn-wrap">
-            <button
-              className="btn-frame modal act"
-              onClick={() => {
-                applyObject()
-              }}
-            >
-              {getMessage('write')}
-            </button>
-          </div>
-        </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/object/RoofMaterialSetting.jsx b/src/components/floor-plan/modal/object/RoofMaterialSetting.jsx
index fdca3518..27c06593 100644
--- a/src/components/floor-plan/modal/object/RoofMaterialSetting.jsx
+++ b/src/components/floor-plan/modal/object/RoofMaterialSetting.jsx
@@ -21,28 +21,18 @@ 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>
-          <div className="slope-wrap">
-            <div className="grid-select">
-              <QSelectBox title={'지붕재 선택'} options={roofMaterials} />
-            </div>
-          </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
+    <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} />
           </div>
         </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
+        </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/object/SizeSetting.jsx b/src/components/floor-plan/modal/object/SizeSetting.jsx
index 34e86ed8..c5873006 100644
--- a/src/components/floor-plan/modal/object/SizeSetting.jsx
+++ b/src/components/floor-plan/modal/object/SizeSetting.jsx
@@ -40,60 +40,50 @@ 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>
-          <div className="slope-wrap">
-            <div className="size-option-top">
+    <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">
+              <div className="size-option mb5">
+                <input type="text" className="input-origin mr5" value={target?.width.toFixed(0) * 10} readOnly={true} />
+                <span className="normal-font">mm</span>
+              </div>
+              <div className="size-option">
+                <input type="text" className="input-origin mr5" defaultValue={target?.width.toFixed(0) * 10} ref={widthRef} />
+                <span className="normal-font">mm</span>
+              </div>
+            </div>
+          </div>
+          <div className="size-inner-warp">
+            <div className="size-option-side">
               <div className="size-option-wrap">
                 <div className="size-option mb5">
-                  <input type="text" className="input-origin mr5" value={target?.width.toFixed(0) * 10} readOnly={true} />
+                  <input type="text" className="input-origin mr5" value={target?.height.toFixed(0) * 10} readOnly={true} />
                   <span className="normal-font">mm</span>
                 </div>
                 <div className="size-option">
-                  <input type="text" className="input-origin mr5" defaultValue={target?.width.toFixed(0) * 10} ref={widthRef} />
+                  <input type="text" className="input-origin mr5" defaultValue={target?.height.toFixed(0) * 10} ref={heightRef} />
                   <span className="normal-font">mm</span>
                 </div>
               </div>
             </div>
-            <div className="size-inner-warp">
-              <div className="size-option-side">
-                <div className="size-option-wrap">
-                  <div className="size-option mb5">
-                    <input type="text" className="input-origin mr5" value={target?.height.toFixed(0) * 10} readOnly={true} />
-                    <span className="normal-font">mm</span>
-                  </div>
-                  <div className="size-option">
-                    <input type="text" className="input-origin mr5" defaultValue={target?.height.toFixed(0) * 10} ref={heightRef} />
-                    <span className="normal-font">mm</span>
-                  </div>
-                </div>
-              </div>
-              <div className="size-check-wrap">
-                <button className={`size-btn ${settingTarget === 1 ? 'act' : ''}`} onClick={() => setSettingTarget(1)}></button>
-                <button className={`size-btn ${settingTarget === 2 ? 'act' : ''}`} onClick={() => setSettingTarget(2)}></button>
-                <button className={`size-btn ${settingTarget === 3 ? 'act' : ''}`} onClick={() => setSettingTarget(3)}></button>
-                <button className={`size-btn ${settingTarget === 4 ? 'act' : ''}`} onClick={() => setSettingTarget(4)}></button>
-                <div className="size-box"></div>
-              </div>
+            <div className="size-check-wrap">
+              <button className={`size-btn ${settingTarget === 1 ? 'act' : ''}`} onClick={() => setSettingTarget(1)}></button>
+              <button className={`size-btn ${settingTarget === 2 ? 'act' : ''}`} onClick={() => setSettingTarget(2)}></button>
+              <button className={`size-btn ${settingTarget === 3 ? 'act' : ''}`} onClick={() => setSettingTarget(3)}></button>
+              <button className={`size-btn ${settingTarget === 4 ? 'act' : ''}`} onClick={() => setSettingTarget(4)}></button>
+              <div className="size-box"></div>
             </div>
           </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={() => handleReSizeObject(id)}>
-              {getMessage('write')}
-            </button>
-          </div>
         </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal act" onClick={() => handleReSizeObject(id)}>
+            {getMessage('write')}
+          </button>
+        </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx b/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx
index c57eabfa..18b82edf 100644
--- a/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx
+++ b/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx
@@ -8,40 +8,30 @@ 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)}>
-            닫기
+    <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>
+          <div className="setting-btn-wrap">
+            <button className="setting-btn green mr5" onClick={handleSetEaves}>
+              {getMessage('modal.canvas.setting.wallline.properties.setting.eaves')}
+            </button>
+            <button className="setting-btn blue" onClick={handleSetGable}>
+              {getMessage('modal.canvas.setting.wallline.properties.setting.edge')}
+            </button>
+          </div>
+        </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal mr5" onClick={handleRollback}>
+            {getMessage('modal.cover.outline.rollback')}
+          </button>
+          <button className="btn-frame modal act" onClick={() => handleFix()}>
+            {getMessage('modal.cover.outline.finish')}
           </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>
-            <div className="setting-btn-wrap">
-              <button className="setting-btn green mr5" onClick={handleSetEaves}>
-                {getMessage('modal.canvas.setting.wallline.properties.setting.eaves')}
-              </button>
-              <button className="setting-btn blue" onClick={handleSetGable}>
-                {getMessage('modal.canvas.setting.wallline.properties.setting.edge')}
-              </button>
-            </div>
-          </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal mr5" onClick={handleRollback}>
-              {getMessage('modal.cover.outline.rollback')}
-            </button>
-            <button className="btn-frame modal act" onClick={() => handleFix()}>
-              {getMessage('modal.cover.outline.finish')}
-            </button>
-          </div>
-        </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx b/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
index 409d7550..36d79cb6 100644
--- a/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
+++ b/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
@@ -114,24 +114,18 @@ 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>
-          <div className="modal-btn-wrap">
-            {/*<button
+    <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' : ''}`}
               onClick={() => setType(OUTER_LINE_TYPE.OUTER_LINE)}
             >
               {getMessage('modal.cover.outline')}
             </button>*/}
 
-            {/* <button -- 2025-03-11 #838 외벽선 이외에 버튼 숨김처리. 나중에 다시 활성화 할 수 있음.
+          {/* <button -- 2025-03-11 #838 외벽선 이외에 버튼 숨김처리. 나중에 다시 활성화 할 수 있음.
               className={`btn-frame modal ${type === OUTER_LINE_TYPE.RIGHT_ANGLE ? 'act' : ''}`}
               onClick={() => setType(OUTER_LINE_TYPE.RIGHT_ANGLE)}
             >
@@ -152,41 +146,39 @@ export default function WallLineSetting(props) {
             >
               {getMessage('modal.cover.outline.diagonal')}
             </button>*/}
-          </div>
-          <div className="properties-setting-wrap">
-            {type === OUTER_LINE_TYPE.OUTER_LINE ? (
-              <OuterLineWall props={outerLineProps} />
-            ) : type === OUTER_LINE_TYPE.RIGHT_ANGLE ? (
-              <RightAngle props={rightAngleProps} />
-            ) : type === OUTER_LINE_TYPE.DOUBLE_PITCH ? (
-              <DoublePitch props={doublePitchProps} />
-            ) : type === OUTER_LINE_TYPE.ANGLE ? (
-              <Angle props={angleProps} />
-            ) : type === OUTER_LINE_TYPE.DIAGONAL_LINE ? (
-              <Diagonal props={diagonalLineProps} />
-            ) : (
-              <></>
-            )}
-          </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal mr5" onClick={handleRollback}>
-              {getMessage('modal.cover.outline.rollback')}
-            </button>
-            <button
-              className="btn-frame modal act"
-              onClick={() => {
-                handleFix()
-                // closePopup(id)
-
-                // setShowPropertiesSettingModal(true)
-              }}
-            >
-              {getMessage('modal.cover.outline.fix')}
-            </button>
-          </div>
         </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+        <div className="properties-setting-wrap">
+          {type === OUTER_LINE_TYPE.OUTER_LINE ? (
+            <OuterLineWall props={outerLineProps} />
+          ) : type === OUTER_LINE_TYPE.RIGHT_ANGLE ? (
+            <RightAngle props={rightAngleProps} />
+          ) : type === OUTER_LINE_TYPE.DOUBLE_PITCH ? (
+            <DoublePitch props={doublePitchProps} />
+          ) : type === OUTER_LINE_TYPE.ANGLE ? (
+            <Angle props={angleProps} />
+          ) : type === OUTER_LINE_TYPE.DIAGONAL_LINE ? (
+            <Diagonal props={diagonalLineProps} />
+          ) : (
+            <></>
+          )}
+        </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal mr5" onClick={handleRollback}>
+            {getMessage('modal.cover.outline.rollback')}
+          </button>
+          <button
+            className="btn-frame modal act"
+            onClick={() => {
+              handleFix()
+              // closePopup(id)
+
+              // setShowPropertiesSettingModal(true)
+            }}
+          >
+            {getMessage('modal.cover.outline.fix')}
+          </button>
+        </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx b/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx
index 67b5efd0..e789bc4a 100644
--- a/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx
+++ b/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx
@@ -29,40 +29,42 @@ export default function PanelBatchStatistics() {
   }, [])
 
   return (
-    <WithDraggable isShow={true} handle=".penal-wrap" pos={pos}>
-      <div className={`penal-wrap ${!isFold ? 'act' : ''}`}>
-        <h2>{getMessage('modal.panel.batch.statistic')}</h2>
-        <button className="penal-arr" onClick={() => setIsFold(!isFold)}></button>
-        <div className="penal-table-wrap">
-          <table className="penal-table">
-            <thead>
-              <tr>
-                {header.map((item, index) => (
-                  <th key={`statistic-hd-${index}`}>{item.name}</th>
-                ))}
-              </tr>
-            </thead>
-            <tbody>
-              {rows.map((row, index) => (
-                <tr key={`statistic-row-${index}`}>
-                  {header.map((item, i) => (
-                    <td key={`statistic-col-${i}`}>{row[item.prop] ?? 0}</td>
+    <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>
+          <div className="penal-table-wrap">
+            <table className="penal-table">
+              <thead>
+                <tr>
+                  {header.map((item, index) => (
+                    <th key={`statistic-hd-${index}`}>{item.name}</th>
                   ))}
                 </tr>
-              ))}
-              <tr>
-                {header.map((header, index) => (
-                  <td key={`statistic-ft-${index}`}>
-                    {typeof footer[header.prop] === 'number'
-                      ? footer[header.prop].toLocaleString('ko-KR', { maximumFractionDigits: 4 })
-                      : footer[header.prop]}
-                  </td>
+              </thead>
+              <tbody>
+                {rows.map((row, index) => (
+                  <tr key={`statistic-row-${index}`}>
+                    {header.map((item, i) => (
+                      <td key={`statistic-col-${i}`}>{row[item.prop] ?? 0}</td>
+                    ))}
+                  </tr>
                 ))}
-              </tr>
-            </tbody>
-          </table>
+                <tr>
+                  {header.map((header, index) => (
+                    <td key={`statistic-ft-${index}`}>
+                      {typeof footer[header.prop] === 'number'
+                        ? footer[header.prop].toLocaleString('ko-KR', { maximumFractionDigits: 4 })
+                        : footer[header.prop]}
+                    </td>
+                  ))}
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
-      </div>
+      </WithDraggable.Panel>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
index 72cf2c21..04b63f1d 100644
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
@@ -121,47 +121,33 @@ 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)}>
-            닫기
+    <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)}>
+              {type.name}
+            </button>
+          ))}
+        </div>
+        <div className="properties-setting-wrap outer">
+          {buttonAct === 1 && <OuterLineWall props={outerLineProps} />}
+          {buttonAct === 2 && <RightAngle props={rightAngleProps} />}
+          {buttonAct === 3 && <DoublePitch props={doublePitchProps} />}
+          {buttonAct === 4 && <Angle props={angleProps} />}
+          {buttonAct === 5 && <Diagonal props={diagonalLineProps} />}
+        </div>
+
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal mr5" onClick={handleRollback}>
+            {getMessage('modal.cover.outline.rollback')}
+          </button>
+          <button className="btn-frame modal act" onClick={handleFix}>
+            {getMessage('modal.placement.surface.drawing.fix')}
           </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={`placement-${idx}`}
-                className={`btn-frame modal ${buttonAct === type.id ? 'act' : ''}`}
-                onClick={() => onClickButton(type)}
-              >
-                {type.name}
-              </button>
-            ))}
-          </div>
-          <div className="properties-setting-wrap outer">
-            {buttonAct === 1 && <OuterLineWall props={outerLineProps} />}
-            {buttonAct === 2 && <RightAngle props={rightAngleProps} />}
-            {buttonAct === 3 && <DoublePitch props={doublePitchProps} />}
-            {buttonAct === 4 && <Angle props={angleProps} />}
-            {buttonAct === 5 && <Diagonal props={diagonalLineProps} />}
-          </div>
-
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal mr5" onClick={handleRollback}>
-              {getMessage('modal.cover.outline.rollback')}
-            </button>
-            <button className="btn-frame modal act" onClick={handleFix}>
-              {getMessage('modal.placement.surface.drawing.fix')}
-            </button>
-          </div>
-        </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
index 127e7742..a70a8c65 100644
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
@@ -257,194 +257,191 @@ 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">
-          <div className="left-bar modal-handle"></div>
-          <div className="right-bar modal-handle"></div>
-          <div className="placement-table">
-            <table>
-              <colgroup>
-                <col style={{ width: '151px' }} />
-                <col />
-              </colgroup>
-              <tbody>
-                <tr>
-                  <th>{getMessage('modal.placement.initial.setting.plan.drawing')}</th>
-                  <td>{getMessage('modal.placement.initial.setting.plan.drawing.size.stuff')}</td>
-                </tr>
-                <tr>
-                  <th>
-                    <div className="tip-wrap">
-                      {getMessage('modal.placement.initial.setting.size')}
-                      <button className="tooltip" onClick={() => setShowSizeGuidModal(true)}></button>
-                    </div>
-                  </th>
-                  <td>
-                    <div className="pop-form-radio">
-                      {currentRoof &&
-                        roofSizeSetArray.map((item) => (
-                          <div className="d-check-radio pop" key={item.id}>
-                            <input
-                              type="radio"
-                              id={item.id}
-                              name={item.name}
-                              value={item.value}
-                              checked={String(currentRoof?.roofSizeSet) === item.value}
-                              onChange={(e) => setCurrentRoof({ ...currentRoof, roofSizeSet: e.target.value })}
-                            />
-                            <label htmlFor={item.id}>{getMessage(item.message)}</label>
-                          </div>
-                        ))}
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <th>{getMessage('modal.placement.initial.setting.roof.angle.setting')}</th>
-                  <td>
-                    <div className="pop-form-radio place">
-                      {currentRoof &&
-                        roofAngleSetArray.map((item, index) => (
-                          <div className="outline-form" key={item.id}>
-                            <span>
-                              <div className="d-check-radio pop">
-                                <input
-                                  type="radio"
-                                  id={item.id}
-                                  name={item.name}
-                                  value={item.value}
-                                  checked={String(currentRoof?.roofAngleSet) === item.value}
-                                  onChange={(e) => setCurrentRoof({ ...currentRoof, roofAngleSet: e.target.value })}
-                                />
-                                <label htmlFor={item.id}>{getMessage(item.message)}</label>
-                              </div>
-                            </span>
-                            <div className="input-grid mr5">
+    <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">
+          <table>
+            <colgroup>
+              <col style={{ width: '151px' }} />
+              <col />
+            </colgroup>
+            <tbody>
+              <tr>
+                <th>{getMessage('modal.placement.initial.setting.plan.drawing')}</th>
+                <td>{getMessage('modal.placement.initial.setting.plan.drawing.size.stuff')}</td>
+              </tr>
+              <tr>
+                <th>
+                  <div className="tip-wrap">
+                    {getMessage('modal.placement.initial.setting.size')}
+                    <button className="tooltip" onClick={() => setShowSizeGuidModal(true)}></button>
+                  </div>
+                </th>
+                <td>
+                  <div className="pop-form-radio">
+                    {currentRoof &&
+                      roofSizeSetArray.map((item) => (
+                        <div className="d-check-radio pop" key={item.id}>
+                          <input
+                            type="radio"
+                            id={item.id}
+                            name={item.name}
+                            value={item.value}
+                            checked={String(currentRoof?.roofSizeSet) === item.value}
+                            onChange={(e) => setCurrentRoof({ ...currentRoof, roofSizeSet: e.target.value })}
+                          />
+                          <label htmlFor={item.id}>{getMessage(item.message)}</label>
+                        </div>
+                      ))}
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <th>{getMessage('modal.placement.initial.setting.roof.angle.setting')}</th>
+                <td>
+                  <div className="pop-form-radio place">
+                    {currentRoof &&
+                      roofAngleSetArray.map((item, index) => (
+                        <div className="outline-form" key={item.id}>
+                          <span>
+                            <div className="d-check-radio pop">
                               <input
-                                type="number"
-                                className="input-origin block"
-                                readOnly={currentRoof?.roofAngleSet !== item.value}
-                                value={index === 0 ? currentRoof?.pitch : currentRoof?.angle}
-                                onChange={(e) =>
-                                  index === 0
-                                    ? setCurrentRoof({ ...currentRoof, pitch: e.target.value, angle: getDegreeByChon(e.target.value) })
-                                    : setCurrentRoof({ ...currentRoof, pitch: getChonByDegree(e.target.value), angle: e.target.value })
-                                }
+                                type="radio"
+                                id={item.id}
+                                name={item.name}
+                                value={item.value}
+                                checked={String(currentRoof?.roofAngleSet) === item.value}
+                                onChange={(e) => setCurrentRoof({ ...currentRoof, roofAngleSet: e.target.value })}
                               />
+                              <label htmlFor={item.id}>{getMessage(item.message)}</label>
                             </div>
-                            <span className="thin">{index === 0 ? '寸' : '度'}</span>
+                          </span>
+                          <div className="input-grid mr5">
+                            <input
+                              type="number"
+                              className="input-origin block"
+                              readOnly={currentRoof?.roofAngleSet !== item.value}
+                              value={index === 0 ? currentRoof?.pitch : currentRoof?.angle}
+                              onChange={(e) =>
+                                index === 0
+                                  ? setCurrentRoof({ ...currentRoof, pitch: e.target.value, angle: getDegreeByChon(e.target.value) })
+                                  : setCurrentRoof({ ...currentRoof, pitch: getChonByDegree(e.target.value), angle: e.target.value })
+                              }
+                            />
                           </div>
-                        ))}
+                          <span className="thin">{index === 0 ? '寸' : '度'}</span>
+                        </div>
+                      ))}
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <th>
+                  <div className="tip-wrap">
+                    {getMessage('modal.placement.initial.setting.roof.material')}
+                    <button className="tooltip" onClick={() => setShowMaterialGuidModal(true)}></button>
+                  </div>
+                </th>
+                <td>
+                  <div className="placement-option">
+                    <div className="grid-select no-flx" style={{ width: '171px' }}>
+                      <QSelectBox
+                        title={
+                          currentRoof?.roofSizeSet === '3'
+                            ? getMessage('modal.placement.initial.setting.size.none.pitch')
+                            : globalLocale === 'ko'
+                              ? currentRoof?.roofMatlNm
+                              : currentRoof?.roofMatlNmJp
+                        }
+                        options={roofMaterials.map((roof) => {
+                          return { ...roof, name: globalLocale === 'ko' ? roof.roofMatlNm : roof.roofMatlNmJp }
+                        })}
+                        value={currentRoof?.roofSizeSet === '3' ? null : currentRoof?.roofMatlCd}
+                        onChange={(e) => handleRoofTypeChange(e.roofMatlCd)}
+                        sourceKey="id"
+                        targetKey="id"
+                        showKey="name"
+                        disabled={currentRoof?.roofSizeSet === '3'}
+                      />
                     </div>
-                  </td>
-                </tr>
-                <tr>
-                  <th>
-                    <div className="tip-wrap">
-                      {getMessage('modal.placement.initial.setting.roof.material')}
-                      <button className="tooltip" onClick={() => setShowMaterialGuidModal(true)}></button>
-                    </div>
-                  </th>
-                  <td>
-                    <div className="placement-option">
-                      <div className="grid-select no-flx" style={{ width: '171px' }}>
-                        <QSelectBox
-                          title={
-                            currentRoof?.roofSizeSet === '3'
-                              ? getMessage('modal.placement.initial.setting.size.none.pitch')
-                              : globalLocale === 'ko'
-                                ? currentRoof?.roofMatlNm
-                                : currentRoof?.roofMatlNmJp
-                          }
-                          options={roofMaterials.map((roof) => {
-                            return { ...roof, name: globalLocale === 'ko' ? roof.roofMatlNm : roof.roofMatlNmJp }
-                          })}
-                          value={currentRoof?.roofSizeSet === '3' ? null : currentRoof?.roofMatlCd}
-                          onChange={(e) => handleRoofTypeChange(e.roofMatlCd)}
-                          sourceKey="id"
-                          targetKey="id"
-                          showKey="name"
-                          disabled={currentRoof?.roofSizeSet === '3'}
-                        />
+                    {currentRoof && ['R', 'C'].includes(currentRoof.widAuth) && (
+                      <div className="flex-ment">
+                        <span>W</span>
+                        <div className="input-grid" style={{ width: '84px' }}>
+                          <input
+                            type="text"
+                            className="input-origin block"
+                            name={`width`}
+                            ref={roofRef.width}
+                            value={parseInt(currentRoof?.width)}
+                            onChange={(e) => onlyNumberInputChange(e, changeInput)}
+                            readOnly={currentRoof?.widAuth === 'R'}
+                            disabled={currentRoof?.roofSizeSet === '3'}
+                          />
+                        </div>
                       </div>
-                      {currentRoof && ['R', 'C'].includes(currentRoof.widAuth) && (
-                        <div className="flex-ment">
-                          <span>W</span>
-                          <div className="input-grid" style={{ width: '84px' }}>
-                            <input
-                              type="text"
-                              className="input-origin block"
-                              name={`width`}
-                              ref={roofRef.width}
-                              value={parseInt(currentRoof?.width)}
-                              onChange={(e) => onlyNumberInputChange(e, changeInput)}
-                              readOnly={currentRoof?.widAuth === 'R'}
+                    )}
+                    {currentRoof && ['R', 'C'].includes(currentRoof.lenAuth) && (
+                      <div className="flex-ment">
+                        <span>L</span>
+                        <div className="input-grid" style={{ width: '84px' }}>
+                          <input
+                            type="text"
+                            className="input-origin block"
+                            name={`length`}
+                            ref={roofRef.length}
+                            value={parseInt(currentRoof?.length)}
+                            onChange={(e) => onlyNumberInputChange(e, changeInput)}
+                            readOnly={currentRoof?.lenAuth === 'R'}
+                            disabled={currentRoof?.roofSizeSet === '3'}
+                          />
+                        </div>
+                      </div>
+                    )}
+                    {currentRoof && ['C', 'R'].includes(currentRoof.raftAuth) && (
+                      <div className="flex-ment">
+                        <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
+                        {raftCodes?.length > 0 && (
+                          <div className="select-wrap" style={{ width: '160px' }}>
+                            <QSelectBox
+                              options={raftCodes}
+                              title={
+                                raftCodes?.find((r) => r.clCode === (currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft))
+                                  .clCodeNm
+                              }
+                              value={currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft}
+                              onChange={(e) => handleRafterChange(e.clCode)}
+                              sourceKey="clCode"
+                              targetKey={currentRoof?.raft ? 'raft' : 'raftBaseCd'}
+                              showKey="clCodeNm"
                               disabled={currentRoof?.roofSizeSet === '3'}
                             />
                           </div>
+                        )}
+                      </div>
+                    )}
+                    {currentRoof && ['C', 'R'].includes(currentRoof?.roofPchAuth) && (
+                      <div className="flex-ment">
+                        <span>{getMessage('hajebichi')}</span>
+                        <div className="input-grid" style={{ width: '84px' }}>
+                          <input
+                            type="text"
+                            className="input-origin block"
+                            name={`hajebichi`}
+                            ref={roofRef.hajebichi}
+                            value={parseInt(currentRoof?.hajebichi)}
+                            onChange={(e) => onlyNumberInputChange(e, changeInput)}
+                            readOnly={currentRoof?.roofPchAuth === 'R'}
+                            disabled={currentRoof?.roofSizeSet === '3'}
+                          />
                         </div>
-                      )}
-                      {currentRoof && ['R', 'C'].includes(currentRoof.lenAuth) && (
-                        <div className="flex-ment">
-                          <span>L</span>
-                          <div className="input-grid" style={{ width: '84px' }}>
-                            <input
-                              type="text"
-                              className="input-origin block"
-                              name={`length`}
-                              ref={roofRef.length}
-                              value={parseInt(currentRoof?.length)}
-                              onChange={(e) => onlyNumberInputChange(e, changeInput)}
-                              readOnly={currentRoof?.lenAuth === 'R'}
-                              disabled={currentRoof?.roofSizeSet === '3'}
-                            />
-                          </div>
-                        </div>
-                      )}
-                      {currentRoof && ['C', 'R'].includes(currentRoof.raftAuth) && (
-                        <div className="flex-ment">
-                          <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
-                          {raftCodes?.length > 0 && (
-                            <div className="select-wrap" style={{ width: '160px' }}>
-                              <QSelectBox
-                                options={raftCodes}
-                                title={
-                                  raftCodes?.find((r) => r.clCode === (currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft))
-                                    .clCodeNm
-                                }
-                                value={currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft}
-                                onChange={(e) => handleRafterChange(e.clCode)}
-                                sourceKey="clCode"
-                                targetKey={currentRoof?.raft ? 'raft' : 'raftBaseCd'}
-                                showKey="clCodeNm"
-                                disabled={currentRoof?.roofSizeSet === '3'}
-                              />
-                            </div>
-                          )}
-                        </div>
-                      )}
-                      {currentRoof && ['C', 'R'].includes(currentRoof?.roofPchAuth) && (
-                        <div className="flex-ment">
-                          <span>{getMessage('hajebichi')}</span>
-                          <div className="input-grid" style={{ width: '84px' }}>
-                            <input
-                              type="text"
-                              className="input-origin block"
-                              name={`hajebichi`}
-                              ref={roofRef.hajebichi}
-                              value={parseInt(currentRoof?.hajebichi)}
-                              onChange={(e) => onlyNumberInputChange(e, changeInput)}
-                              readOnly={currentRoof?.roofPchAuth === 'R'}
-                              disabled={currentRoof?.roofSizeSet === '3'}
-                            />
-                          </div>
-                        </div>
-                      )}
-                    </div>
-                    {/* {currentRoof && (
+                      </div>
+                    )}
+                  </div>
+                  {/* {currentRoof && (
                       <div className="placement-roof-btn-wrap">
                         <div className="icon-btn-wrap mt10">
                           <button
@@ -467,21 +464,19 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
                         </div>
                       </div>
                     )} */}
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={handleSaveBtn}>
-              {getMessage('modal.common.save')}
-            </button>
-          </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
-        {showSizeGuideModal && <SizeGuide setShowSizeGuidModal={setShowSizeGuidModal} />}
-        {showMaterialGuideModal && <MaterialGuide setShowMaterialGuidModal={setShowMaterialGuidModal} />}
-        <div className="modal-foot modal-handle"></div>
-      </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal act" onClick={handleSaveBtn}>
+            {getMessage('modal.common.save')}
+          </button>
+        </div>
+      </WithDraggable.Body>
+      {showSizeGuideModal && <SizeGuide setShowSizeGuidModal={setShowSizeGuidModal} />}
+      {showMaterialGuideModal && <MaterialGuide setShowMaterialGuidModal={setShowMaterialGuidModal} />}
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty.jsx b/src/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty.jsx
index bc532242..34cf8c1e 100644
--- a/src/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty.jsx
@@ -41,43 +41,33 @@ 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()}>
-            닫기
+    <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>
+          <div className="setting-btn-wrap">
+            <button className="setting-btn green mr5" onClick={handleSetEaves}>
+              {getMessage('modal.canvas.setting.wallline.properties.setting.eaves')}
+            </button>
+            <button className="setting-btn blue mr5" onClick={handleSetGable}>
+              {getMessage('modal.canvas.setting.wallline.properties.setting.edge')}
+            </button>
+            <button className="setting-btn gray" onClick={handleSetRidge}>
+              {getMessage('modal.canvas.setting.wallline.properties.setting.ridge')}
+            </button>
+          </div>
+        </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal mr5" onClick={handleRollback}>
+            {getMessage('modal.cover.outline.rollback')}
+          </button>
+          <button className="btn-frame modal act" onClick={() => handleFix()}>
+            {getMessage('modal.cover.outline.finish')}
           </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>
-            <div className="setting-btn-wrap">
-              <button className="setting-btn green mr5" onClick={handleSetEaves}>
-                {getMessage('modal.canvas.setting.wallline.properties.setting.eaves')}
-              </button>
-              <button className="setting-btn blue mr5" onClick={handleSetGable}>
-                {getMessage('modal.canvas.setting.wallline.properties.setting.edge')}
-              </button>
-              <button className="setting-btn gray" onClick={handleSetRidge}>
-                {getMessage('modal.canvas.setting.wallline.properties.setting.ridge')}
-              </button>
-            </div>
-          </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal mr5" onClick={handleRollback}>
-              {getMessage('modal.cover.outline.rollback')}
-            </button>
-            <button className="btn-frame modal act" onClick={() => handleFix()}>
-              {getMessage('modal.cover.outline.finish')}
-            </button>
-          </div>
-        </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
index 967d849e..ae29b778 100644
--- a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
+++ b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
@@ -256,63 +256,49 @@ 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>
-          <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)}
-                  >
-                    <div className="shape-box">
-                      <Image
-                        src={`/static/images/canvas/plane_shape0${type?.id}.svg`}
-                        alt="react"
-                        width={0}
-                        height={0}
-                        style={{
-                          width: 'auto',
-                          height: 'auto',
-                          transform: getInversionState(),
-                        }}
-                      />
-                    </div>
-                  </button>
-                ))}
-              </div>
-              <div className="shape-library">
-                <button className="library-btn ico01" onClick={() => setRotate((yInversion !== xInversion ? rotate - 1 : rotate + 1) % 4)}></button>
-                {/* <button className="library-btn ico01" onClick={() => setRotate((rotate + 1) % 4)}></button> */}
-                {/* <button className="library-btn ico02" onClick={() => setYInversion(!yInversion)}></button>
-                <button className="library-btn ico03" onClick={() => setXInversion(!xInversion)}></button> */}
-                <button className="library-btn ico02" onClick={() => handleInversion('y')}></button>
-                <button className="library-btn ico03" onClick={() => handleInversion('x')}></button>
-              </div>
-            </div>
-            <div className="plane-detail-wrap">
-              <PlacementSurface {...placementSurfaceProps} ref={surfaceRefs} />
-              <div className="plane-shape-btn">
-                <button className="btn-frame modal act" onClick={applySurfaces}>
-                  {getMessage('write')}
+    <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)}>
+                  <div className="shape-box">
+                    <Image
+                      src={`/static/images/canvas/plane_shape0${type?.id}.svg`}
+                      alt="react"
+                      width={0}
+                      height={0}
+                      style={{
+                        width: 'auto',
+                        height: 'auto',
+                        transform: getInversionState(),
+                      }}
+                    />
+                  </div>
                 </button>
-              </div>
+              ))}
+            </div>
+            <div className="shape-library">
+              <button className="library-btn ico01" onClick={() => setRotate((yInversion !== xInversion ? rotate - 1 : rotate + 1) % 4)}></button>
+              {/* <button className="library-btn ico01" onClick={() => setRotate((rotate + 1) % 4)}></button> */}
+              {/* <button className="library-btn ico02" onClick={() => setYInversion(!yInversion)}></button>
+                <button className="library-btn ico03" onClick={() => setXInversion(!xInversion)}></button> */}
+              <button className="library-btn ico02" onClick={() => handleInversion('y')}></button>
+              <button className="library-btn ico03" onClick={() => handleInversion('x')}></button>
+            </div>
+          </div>
+          <div className="plane-detail-wrap">
+            <PlacementSurface {...placementSurfaceProps} ref={surfaceRefs} />
+            <div className="plane-shape-btn">
+              <button className="btn-frame modal act" onClick={applySurfaces}>
+                {getMessage('write')}
+              </button>
             </div>
           </div>
         </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/roofAllocation/ActualSizeSetting.jsx b/src/components/floor-plan/modal/roofAllocation/ActualSizeSetting.jsx
index 0af71db1..c91325c0 100644
--- a/src/components/floor-plan/modal/roofAllocation/ActualSizeSetting.jsx
+++ b/src/components/floor-plan/modal/roofAllocation/ActualSizeSetting.jsx
@@ -61,65 +61,50 @@ 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>
+    <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>
-        <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>
-          <div className="properties-setting-wrap outer">
-            <div className="setting-tit">{getMessage('setting')}</div>
-            <div className="outline-wrap">
-              <div className="eaves-keraba-table">
-                <div className="eaves-keraba-item">
-                  <div className="eaves-keraba-th">{getMessage('modal.actual.size.setting.plane.size.length')}</div>
-                  <div className="eaves-keraba-td">
-                    <div className="outline-form">
-                      <div className="input-grid mr5">
-                        <input type="text" className="input-origin block" value={planeSize} readOnly={true} />
-                      </div>
-                      <span className="thin">mm</span>
+        <div className="properties-setting-wrap outer">
+          <div className="setting-tit">{getMessage('setting')}</div>
+          <div className="outline-wrap">
+            <div className="eaves-keraba-table">
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">{getMessage('modal.actual.size.setting.plane.size.length')}</div>
+                <div className="eaves-keraba-td">
+                  <div className="outline-form">
+                    <div className="input-grid mr5">
+                      <input type="text" className="input-origin block" value={planeSize} readOnly={true} />
                     </div>
+                    <span className="thin">mm</span>
                   </div>
                 </div>
-                <div className="eaves-keraba-item">
-                  <div className="eaves-keraba-th">{getMessage('modal.actual.size.setting.actual.size.length')}</div>
-                  <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))}
-                        />
-                      </div>
-                      <span className="thin">mm</span>
+              </div>
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">{getMessage('modal.actual.size.setting.actual.size.length')}</div>
+                <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))} />
                     </div>
+                    <span className="thin">mm</span>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal mr5" onClick={handleFinish}>
-              {getMessage('common.setting.finish')}
-            </button>
-            <button className="btn-frame modal act" onClick={handleApply}>
-              {getMessage('apply')}
-            </button>
-          </div>
         </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal mr5" onClick={handleFinish}>
+            {getMessage('common.setting.finish')}
+          </button>
+          <button className="btn-frame modal act" onClick={handleApply}>
+            {getMessage('apply')}
+          </button>
+        </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx b/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx
index 30e56c0e..dd8b7003 100644
--- a/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx
+++ b/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx
@@ -47,22 +47,13 @@ export default function ContextRoofAllocationSetting(props) {
   }, [])
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap lr mount`}>
-        {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>
+    <WithDraggable isShow={true} pos={pos} className="lr">
+      <WithDraggable.Header title={getMessage('plan.menu.estimate.roof.alloc')} onClose={() => closePopup(id)} />
+      {currentRoofList && (
+        <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>
                 <div className="grid-select">
                   <QSelectBox
                     options={roofMaterials.map((roof) => {
@@ -78,165 +69,162 @@ export default function ContextRoofAllocationSetting(props) {
                     targetKey={'roofMatlCd'}
                   />
                 </div> */}
-                <button
-                  className="allocation-edit"
-                  onClick={() => {
-                    onAddRoofMaterial()
-                  }}
-                >
-                  <i className="edit-ico"></i>
-                  {getMessage('modal.roof.alloc.add.roof.material')}
-                </button>
-              </div>
-              <div className="grid-option-overflow">
-                <div className="grid-option-wrap">
-                  {currentRoofList.map((roof, index) => {
-                    return (
-                      <div className="grid-option-box" key={index}>
-                        <div className="d-check-radio pop no-text">
-                          <input type="radio" name="radio01" checked={roof.selected && 'checked'} readOnly={true} />
-                          <label
-                            htmlFor="ra01"
-                            onClick={(e) => {
-                              handleDefaultRoofMaterial(index)
-                            }}
-                          ></label>
+            <button
+              className="allocation-edit"
+              onClick={() => {
+                onAddRoofMaterial()
+              }}
+            >
+              <i className="edit-ico"></i>
+              {getMessage('modal.roof.alloc.add.roof.material')}
+            </button>
+          </div>
+          <div className="grid-option-overflow">
+            <div className="grid-option-wrap">
+              {currentRoofList.map((roof, index) => {
+                return (
+                  <div className="grid-option-box" key={index}>
+                    <div className="d-check-radio pop no-text">
+                      <input type="radio" name="radio01" checked={roof.selected && 'checked'} readOnly={true} />
+                      <label
+                        htmlFor="ra01"
+                        onClick={(e) => {
+                          handleDefaultRoofMaterial(index)
+                        }}
+                      ></label>
+                    </div>
+                    <div className="grid-option-block-form">
+                      <div className="block-box">
+                        <div className="flex-ment">
+                          <div className="grid-select">
+                            <QSelectBox
+                              // options={roofMaterials}
+                              options={roofMaterials.map((roof2) => {
+                                return { ...roof2, name: globalLocale === 'ko' ? roof2.roofMatlNm : roof2.roofMatlNmJp }
+                              })}
+                              value={roof}
+                              //showKey={'roofMatlNm'}
+                              showKey="name"
+                              sourceKey={'roofMatlCd'}
+                              targetKey={'roofMatlCd'}
+                              onChange={(e) => handleChangeRoofMaterial(e, index)}
+                            />
+                          </div>
+                          {index === 0 && <span className="absol dec">{getMessage('modal.roof.alloc.default.roof.material')}</span>}
+                          {index !== 0 && (
+                            <span className="absol">
+                              <button className="delete" onClick={() => onDeleteRoofMaterial(index)}></button>
+                            </span>
+                          )}
                         </div>
-                        <div className="grid-option-block-form">
-                          <div className="block-box">
-                            <div className="flex-ment">
+                      </div>
+                      {roof.raftAuth && (
+                        <div className="block-box">
+                          <div className="flex-ment">
+                            <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
+                            {raftCodes.length > 0 && (
                               <div className="grid-select">
                                 <QSelectBox
-                                  // options={roofMaterials}
-                                  options={roofMaterials.map((roof2) => {
-                                    return { ...roof2, name: globalLocale === 'ko' ? roof2.roofMatlNm : roof2.roofMatlNmJp }
-                                  })}
+                                  options={raftCodes}
                                   value={roof}
-                                  //showKey={'roofMatlNm'}
-                                  showKey="name"
-                                  sourceKey={'roofMatlCd'}
-                                  targetKey={'roofMatlCd'}
-                                  onChange={(e) => handleChangeRoofMaterial(e, index)}
+                                  showKey={'clCodeNm'}
+                                  sourceKey={'clCode'}
+                                  targetKey={roof.raft ? 'raft' : 'raftBaseCd'}
+                                  onChange={(e) => handleChangeRaft(e, index)}
                                 />
                               </div>
-                              {index === 0 && <span className="absol dec">{getMessage('modal.roof.alloc.default.roof.material')}</span>}
-                              {index !== 0 && (
-                                <span className="absol">
-                                  <button className="delete" onClick={() => onDeleteRoofMaterial(index)}></button>
-                                </span>
-                              )}
-                            </div>
+                            )}
                           </div>
-                          {roof.raftAuth && (
-                            <div className="block-box">
-                              <div className="flex-ment">
-                                <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
-                                {raftCodes.length > 0 && (
-                                  <div className="grid-select">
-                                    <QSelectBox
-                                      options={raftCodes}
-                                      value={roof}
-                                      showKey={'clCodeNm'}
-                                      sourceKey={'clCode'}
-                                      targetKey={roof.raft ? 'raft' : 'raftBaseCd'}
-                                      onChange={(e) => handleChangeRaft(e, index)}
-                                    />
-                                  </div>
-                                )}
-                              </div>
-                            </div>
-                          )}
+                        </div>
+                      )}
 
-                          {(roof.widAuth || roof.lenAuth) && (
-                            <>
-                              {roof.widAuth && (
-                                <div className="block-box">
-                                  <div className="flex-ment">
-                                    <span>W</span>
-                                    <div className="input-grid">
-                                      <input
-                                        type="text"
-                                        className="input-origin block"
-                                        defaultValue={roof.width}
-                                        readOnly={roof.widAuth === 'R'}
-                                        onChange={(e) => {
-                                          handleChangeInput(e, 'width', index)
-                                        }}
-                                      />
-                                    </div>
-                                  </div>
-                                </div>
-                              )}
-                              {roof.lenAuth && (
-                                <div className="block-box">
-                                  <div className="flex-ment">
-                                    <span>L</span>
-                                    <div className="input-grid">
-                                      <input
-                                        type="text"
-                                        className="input-origin block"
-                                        defaultValue={roof.length}
-                                        readOnly={roof.lenAuth === 'R'}
-                                        onChange={(e) => {
-                                          handleChangeInput(e, 'length', index)
-                                        }}
-                                      />
-                                    </div>
-                                  </div>
-                                </div>
-                              )}
-                            </>
-                          )}
-                          {roof.roofPchAuth && (
+                      {(roof.widAuth || roof.lenAuth) && (
+                        <>
+                          {roof.widAuth && (
                             <div className="block-box">
                               <div className="flex-ment">
-                                <span>{getMessage('hajebichi')}</span>
+                                <span>W</span>
                                 <div className="input-grid">
                                   <input
                                     type="text"
                                     className="input-origin block"
-                                    value={parseInt(roof.hajebichi)}
-                                    readOnly={roof.roofPchAuth === 'R'}
-                                    onChange={(e) => handleChangeInput(e, 'hajebichi', index)}
+                                    defaultValue={roof.width}
+                                    readOnly={roof.widAuth === 'R'}
+                                    onChange={(e) => {
+                                      handleChangeInput(e, 'width', index)
+                                    }}
                                   />
                                 </div>
                               </div>
                             </div>
                           )}
-                          <div className="block-box">
-                            <div className="flex-ment">
-                              <span>{getMessage('modal.object.setting.offset.slope')}</span>
-                              <div className="input-grid">
-                                <input
-                                  type="text"
-                                  className="input-origin block"
-                                  onChange={(e) => {
-                                    // handleChangeInput(e, currentAngleType === 'slope' ? 'pitch' : 'angle', index)
-                                    handleChangePitch(e, index)
-                                  }}
-                                  value={currentAngleType === 'slope' ? roof.pitch : roof.angle}
-                                  defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle}
-                                />
+                          {roof.lenAuth && (
+                            <div className="block-box">
+                              <div className="flex-ment">
+                                <span>L</span>
+                                <div className="input-grid">
+                                  <input
+                                    type="text"
+                                    className="input-origin block"
+                                    defaultValue={roof.length}
+                                    readOnly={roof.lenAuth === 'R'}
+                                    onChange={(e) => {
+                                      handleChangeInput(e, 'length', index)
+                                    }}
+                                  />
+                                </div>
                               </div>
-                              <span className="absol">{pitchText}</span>
+                            </div>
+                          )}
+                        </>
+                      )}
+                      {roof.roofPchAuth && (
+                        <div className="block-box">
+                          <div className="flex-ment">
+                            <span>{getMessage('hajebichi')}</span>
+                            <div className="input-grid">
+                              <input
+                                type="text"
+                                className="input-origin block"
+                                value={parseInt(roof.hajebichi)}
+                                readOnly={roof.roofPchAuth === 'R'}
+                                onChange={(e) => handleChangeInput(e, 'hajebichi', index)}
+                              />
                             </div>
                           </div>
                         </div>
+                      )}
+                      <div className="block-box">
+                        <div className="flex-ment">
+                          <span>{getMessage('modal.object.setting.offset.slope')}</span>
+                          <div className="input-grid">
+                            <input
+                              type="text"
+                              className="input-origin block"
+                              onChange={(e) => {
+                                // handleChangeInput(e, currentAngleType === 'slope' ? 'pitch' : 'angle', index)
+                                handleChangePitch(e, index)
+                              }}
+                              value={currentAngleType === 'slope' ? roof.pitch : roof.angle}
+                              defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle}
+                            />
+                          </div>
+                          <span className="absol">{pitchText}</span>
+                        </div>
                       </div>
-                    )
-                  })}
-                </div>
-              </div>
-              <div className="grid-btn-wrap">
-                <button className="btn-frame modal act" onClick={handleSaveContext}>
-                  {getMessage('modal.roof.alloc.apply')}
-                </button>
-              </div>
+                    </div>
+                  </div>
+                )
+              })}
             </div>
-          </>
-        )}
-        <div className="modal-foot modal-handle"></div>
-      </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act" onClick={handleSaveContext}>
+              {getMessage('modal.roof.alloc.apply')}
+            </button>
+          </div>
+        </WithDraggable.Body>
+      )}
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
index 3dd03385..0603ed96 100644
--- a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
+++ b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
@@ -47,22 +47,14 @@ 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>
+            <div className="properties-guide">{getMessage('modal.roof.alloc.info')}</div>
+            <div className="allocation-select-wrap">
+              {/* <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
                 <div className="grid-select">
                   <QSelectBox
                     options={roofMaterials.map((roof) => {
@@ -78,146 +70,146 @@ export default function RoofAllocationSetting(props) {
                     targetKey={'roofMatlCd'}
                   />
                 </div> */}
-                <button
-                  className="allocation-edit"
-                  onClick={() => {
-                    onAddRoofMaterial()
-                  }}
-                >
-                  <i className="edit-ico"></i>
-                  {getMessage('modal.roof.alloc.add.roof.material')}
-                </button>
-              </div>
-              <div className="grid-option-overflow">
-                <div className="grid-option-wrap">
-                  {currentRoofList.map((roof, index) => {
-                    return (
-                      <div className="grid-option-box" key={index}>
-                        <div className="d-check-radio pop no-text">
-                          <input type="radio" name="radio01" checked={roof.selected && 'checked'} readOnly={true} />
-                          <label
-                            htmlFor="ra01"
-                            onClick={(e) => {
-                              handleDefaultRoofMaterial(index)
-                            }}
-                          ></label>
+              <button
+                className="allocation-edit"
+                onClick={() => {
+                  onAddRoofMaterial()
+                }}
+              >
+                <i className="edit-ico"></i>
+                {getMessage('modal.roof.alloc.add.roof.material')}
+              </button>
+            </div>
+            <div className="grid-option-overflow">
+              <div className="grid-option-wrap">
+                {currentRoofList.map((roof, index) => {
+                  return (
+                    <div className="grid-option-box" key={index}>
+                      <div className="d-check-radio pop no-text">
+                        <input type="radio" name="radio01" checked={roof.selected && 'checked'} readOnly={true} />
+                        <label
+                          htmlFor="ra01"
+                          onClick={(e) => {
+                            handleDefaultRoofMaterial(index)
+                          }}
+                        ></label>
+                      </div>
+                      <div className="grid-option-block-form">
+                        <div className="block-box">
+                          <div className="flex-ment">
+                            <div className="grid-select">
+                              <QSelectBox
+                                //options={roofMaterials}
+                                options={roofMaterials.map((roof2) => {
+                                  return { ...roof2, name: globalLocale === 'ko' ? roof2.roofMatlNm : roof2.roofMatlNmJp }
+                                })}
+                                value={roof}
+                                //showKey={'roofMatlNm'}
+                                showKey="name"
+                                sourceKey={'roofMatlCd'}
+                                targetKey={'roofMatlCd'}
+                                onChange={(e) => handleChangeRoofMaterial(e, index)}
+                              />
+                            </div>
+                            {index === 0 && <span className="absol dec">{getMessage('modal.roof.alloc.default.roof.material')}</span>}
+                            {index !== 0 && (
+                              <span className="absol">
+                                <button className="delete" onClick={() => onDeleteRoofMaterial(index)}></button>
+                              </span>
+                            )}
+                          </div>
                         </div>
-                        <div className="grid-option-block-form">
+
+                        {roof.raftAuth && (
                           <div className="block-box">
                             <div className="flex-ment">
-                              <div className="grid-select">
-                                <QSelectBox
-                                  //options={roofMaterials}
-                                  options={roofMaterials.map((roof2) => {
-                                    return { ...roof2, name: globalLocale === 'ko' ? roof2.roofMatlNm : roof2.roofMatlNmJp }
-                                  })}
-                                  value={roof}
-                                  //showKey={'roofMatlNm'}
-                                  showKey="name"
-                                  sourceKey={'roofMatlCd'}
-                                  targetKey={'roofMatlCd'}
-                                  onChange={(e) => handleChangeRoofMaterial(e, index)}
-                                />
-                              </div>
-                              {index === 0 && <span className="absol dec">{getMessage('modal.roof.alloc.default.roof.material')}</span>}
-                              {index !== 0 && (
-                                <span className="absol">
-                                  <button className="delete" onClick={() => onDeleteRoofMaterial(index)}></button>
-                                </span>
+                              <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
+                              {raftCodes.length > 0 && (
+                                <div className="grid-select">
+                                  <QSelectBox
+                                    options={raftCodes}
+                                    value={roof}
+                                    showKey={'clCodeNm'}
+                                    sourceKey={'clCode'}
+                                    targetKey={roof.raft ? 'raft' : 'raftBaseCd'}
+                                    onChange={(e) => handleChangeRaft(e, index)}
+                                  />
+                                </div>
                               )}
                             </div>
                           </div>
+                        )}
 
-                          {roof.raftAuth && (
-                            <div className="block-box">
-                              <div className="flex-ment">
-                                <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
-                                {raftCodes.length > 0 && (
-                                  <div className="grid-select">
-                                    <QSelectBox
-                                      options={raftCodes}
-                                      value={roof}
-                                      showKey={'clCodeNm'}
-                                      sourceKey={'clCode'}
-                                      targetKey={roof.raft ? 'raft' : 'raftBaseCd'}
-                                      onChange={(e) => handleChangeRaft(e, index)}
+                        {(roof.widAuth || roof.lenAuth) && (
+                          <>
+                            {roof.widAuth && (
+                              <div className="block-box">
+                                <div className="flex-ment">
+                                  <span>W</span>
+                                  <div className="input-grid">
+                                    <input
+                                      type="text"
+                                      className="input-origin block"
+                                      defaultValue={roof.width}
+                                      onChange={(e) => handleChangeInput(e, 'width', index)}
+                                      readOnly={roof.widAuth === 'R'}
                                     />
                                   </div>
-                                )}
-                              </div>
-                            </div>
-                          )}
-
-                          {(roof.widAuth || roof.lenAuth) && (
-                            <>
-                              {roof.widAuth && (
-                                <div className="block-box">
-                                  <div className="flex-ment">
-                                    <span>W</span>
-                                    <div className="input-grid">
-                                      <input
-                                        type="text"
-                                        className="input-origin block"
-                                        defaultValue={roof.width}
-                                        onChange={(e) => handleChangeInput(e, 'width', index)}
-                                        readOnly={roof.widAuth === 'R'}
-                                      />
-                                    </div>
-                                  </div>
-                                </div>
-                              )}
-                              {roof.lenAuth && (
-                                <div className="block-box">
-                                  <div className="flex-ment">
-                                    <span>L</span>
-                                    <div className="input-grid">
-                                      <input
-                                        type="text"
-                                        className="input-origin block"
-                                        defaultValue={roof.length}
-                                        onChange={(e) => handleChangeInput(e, 'length', index)}
-                                        readOnly={roof.lenAuth === 'R'}
-                                      />
-                                    </div>
-                                  </div>
-                                </div>
-                              )}
-                            </>
-                          )}
-                          {roof.roofPchAuth && (
-                            <div className="block-box">
-                              <div className="flex-ment">
-                                <span>{getMessage('hajebichi')}</span>
-                                <div className="input-grid">
-                                  <input
-                                    type="text"
-                                    className="input-origin block"
-                                    onChange={(e) => handleChangeInput(e, 'hajebichi', index)}
-                                    value={parseInt(roof.hajebichi)}
-                                    readOnly={roof.roofPchAuth === 'R'}
-                                  />
                                 </div>
                               </div>
-                            </div>
-                          )}
+                            )}
+                            {roof.lenAuth && (
+                              <div className="block-box">
+                                <div className="flex-ment">
+                                  <span>L</span>
+                                  <div className="input-grid">
+                                    <input
+                                      type="text"
+                                      className="input-origin block"
+                                      defaultValue={roof.length}
+                                      onChange={(e) => handleChangeInput(e, 'length', index)}
+                                      readOnly={roof.lenAuth === 'R'}
+                                    />
+                                  </div>
+                                </div>
+                              </div>
+                            )}
+                          </>
+                        )}
+                        {roof.roofPchAuth && (
                           <div className="block-box">
                             <div className="flex-ment">
-                              <span>{getMessage('modal.object.setting.offset.slope')}</span>
+                              <span>{getMessage('hajebichi')}</span>
                               <div className="input-grid">
                                 <input
                                   type="text"
                                   className="input-origin block"
-                                  onChange={(e) => {
-                                    handleChangePitch(e, index)
-                                  }}
-                                  value={currentAngleType === 'slope' ? roof.pitch : roof.angle}
-                                  defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle}
+                                  onChange={(e) => handleChangeInput(e, 'hajebichi', index)}
+                                  value={parseInt(roof.hajebichi)}
+                                  readOnly={roof.roofPchAuth === 'R'}
                                 />
                               </div>
-                              <span className="absol">{pitchText}</span>
                             </div>
                           </div>
-                          {/* <div className="block-box">
+                        )}
+                        <div className="block-box">
+                          <div className="flex-ment">
+                            <span>{getMessage('modal.object.setting.offset.slope')}</span>
+                            <div className="input-grid">
+                              <input
+                                type="text"
+                                className="input-origin block"
+                                onChange={(e) => {
+                                  handleChangePitch(e, index)
+                                }}
+                                value={currentAngleType === 'slope' ? roof.pitch : roof.angle}
+                                defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle}
+                              />
+                            </div>
+                            <span className="absol">{pitchText}</span>
+                          </div>
+                        </div>
+                        {/* <div className="block-box">
                             <div className="icon-btn-wrap">
                               <button
                                 className={roof.layout === ROOF_MATERIAL_LAYOUT.PARALLEL ? 'act' : ''}
@@ -238,22 +230,20 @@ export default function RoofAllocationSetting(props) {
                               </button>
                             </div>
                           </div> */}
-                        </div>
                       </div>
-                    )
-                  })}
-                </div>
-              </div>
-              <div className="grid-btn-wrap">
-                <button className="btn-frame modal act" onClick={handleSave}>
-                  {getMessage('modal.roof.alloc.apply')}
-                </button>
+                    </div>
+                  )
+                })}
               </div>
             </div>
+            <div className="grid-btn-wrap">
+              <button className="btn-frame modal act" onClick={handleSave}>
+                {getMessage('modal.roof.alloc.apply')}
+              </button>
+            </div>
           </>
         )}
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx b/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx
index 44152cf8..7530bcdd 100644
--- a/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx
+++ b/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx
@@ -29,48 +29,38 @@ 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>
+    <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)}>
+              {button.name}
+            </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)}>
-                {button.name}
-              </button>
-            ))}
-          </div>
-          <div className="modal-bottom-border-bx">
-            <div className="setting-tit">{getMessage('setting')}</div>
-            <div className="discrimination-box">
-              {type === TYPES.EAVES && <Eaves {...eavesProps} />}
-              {type === TYPES.GABLE && <Gable {...gableProps} />}
-              {type === TYPES.SHED && <Shed {...shedProps} />}
-            </div>
-            <div className="grid-btn-wrap">
-              <button className="btn-frame sub-tab mr5" onClick={handleRollback}>
-                {getMessage('common.setting.rollback')}
-              </button>
-              <button className="btn-frame sub-tab act" onClick={handleConfirm}>
-                {getMessage('apply')}
-              </button>
-            </div>
+        <div className="modal-bottom-border-bx">
+          <div className="setting-tit">{getMessage('setting')}</div>
+          <div className="discrimination-box">
+            {type === TYPES.EAVES && <Eaves {...eavesProps} />}
+            {type === TYPES.GABLE && <Gable {...gableProps} />}
+            {type === TYPES.SHED && <Shed {...shedProps} />}
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={() => handleSave(id)}>
-              {getMessage('common.setting.finish')}
+            <button className="btn-frame sub-tab mr5" onClick={handleRollback}>
+              {getMessage('common.setting.rollback')}
+            </button>
+            <button className="btn-frame sub-tab act" onClick={handleConfirm}>
+              {getMessage('apply')}
             </button>
           </div>
         </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal act" onClick={() => handleSave(id)}>
+            {getMessage('common.setting.finish')}
+          </button>
+        </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx b/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
index 64ac905c..73ccc348 100644
--- a/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
+++ b/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
@@ -88,41 +88,31 @@ 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)}>
-            닫기
+    <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)}>
+              <div className="shape-box">
+                <Image src={`/static/images/canvas/shape_menu0${item.id}.svg`} alt="react" width={64} height={64} />
+              </div>
+              <div className="shape-title">{item.name}</div>
+            </button>
+          ))}
+        </div>
+        <div className="properties-setting-wrap">
+          {shapeNum === 1 && <Ridge {...ridgeProps} />}
+          {(shapeNum === 2 || shapeNum === 3) && <Pattern {...patternProps} />}
+          {shapeNum === 4 && <Side {...sideProps} />}
+          {(shapeNum === 5 || shapeNum === 6 || shapeNum === 7 || shapeNum === 8) && <Direction {...directionProps} />}
+        </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal act" onClick={() => handleSave(id)}>
+            {getMessage('common.setting.finish')}
           </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)}>
-                <div className="shape-box">
-                  <Image src={`/static/images/canvas/shape_menu0${item.id}.svg`} alt="react" width={64} height={64} />
-                </div>
-                <div className="shape-title">{item.name}</div>
-              </button>
-            ))}
-          </div>
-          <div className="properties-setting-wrap">
-            {shapeNum === 1 && <Ridge {...ridgeProps} />}
-            {(shapeNum === 2 || shapeNum === 3) && <Pattern {...patternProps} />}
-            {shapeNum === 4 && <Side {...sideProps} />}
-            {(shapeNum === 5 || shapeNum === 6 || shapeNum === 7 || shapeNum === 8) && <Direction {...directionProps} />}
-          </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={() => handleSave(id)}>
-              {getMessage('common.setting.finish')}
-            </button>
-          </div>
-        </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/setting01/SettingModal01.jsx b/src/components/floor-plan/modal/setting01/SettingModal01.jsx
index 36691d62..4e6f91ea 100644
--- a/src/components/floor-plan/modal/setting01/SettingModal01.jsx
+++ b/src/components/floor-plan/modal/setting01/SettingModal01.jsx
@@ -72,39 +72,27 @@ 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>
-            <div className="modal-btn-wrap">
-              <button className={`btn-frame modal ${buttonAct === 1 ? 'act' : ''}`} onClick={() => handleBtnClick(1)}>
-                {getMessage('modal.canvas.setting.display')}
-              </button>
+    <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')}
+          </button>
 
-              <button className={`btn-frame modal ${buttonAct === 2 ? 'act' : ''}`} onClick={() => handleBtnClick(2)}>
-                {getMessage('modal.canvas.setting.font.plan')}
-              </button>
-              {canGridOptionSeletorValue && (
-                <button className={`btn-frame modal ${buttonAct === 3 ? 'act' : ''}`} onClick={() => handleBtnClick(3)}>
-                  {getMessage('modal.canvas.setting.grid')}
-                </button>
-              )}
-            </div>
-            {buttonAct === 1 && <FirstOption {...firstProps} />}
-            {buttonAct === 2 && <SecondOption {...secondProps} />}
-            {buttonAct === 3 && <GridOption {...gridProps} />}
-          </div>
-          <div className="modal-foot modal-handle"></div>
+          <button className={`btn-frame modal ${buttonAct === 2 ? 'act' : ''}`} onClick={() => handleBtnClick(2)}>
+            {getMessage('modal.canvas.setting.font.plan')}
+          </button>
+          {canGridOptionSeletorValue && (
+            <button className={`btn-frame modal ${buttonAct === 3 ? 'act' : ''}`} onClick={() => handleBtnClick(3)}>
+              {getMessage('modal.canvas.setting.grid')}
+            </button>
+          )}
         </div>
-      </WithDraggable>
-    </>
+        {buttonAct === 1 && <FirstOption {...firstProps} />}
+        {buttonAct === 2 && <SecondOption {...secondProps} />}
+        {buttonAct === 3 && <GridOption {...gridProps} />}
+      </WithDraggable.Body>
+    </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
index 7fcbe45a..8bdecff8 100644
--- a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
+++ b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
@@ -190,78 +190,68 @@ 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={() => {
-              setIsShow(false)
-              closePopups([fontModalId, colorModalId, id])
-            }}
-          >
-            닫기
+    <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])
+        }}
+      />
+      <WithDraggable.Body>
+        <div className="font-btn-wrap">
+          <button className="btn-frame modal" onClick={() => popupHandle('font')}>
+            {getMessage('modal.font.setting')}
           </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')}
-            </button>
-          </div>
-          <div className="line-color-wrap">
-            <div className="outline-form mb10">
-              <span style={{ width: 'auto' }}>{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line.font.size')}</span>
-              <div className="grid-select mr5">
-                <QSelectBox options={pixels} value={originPixel} onChange={(e) => setOriginPixel(e)} />
-              </div>
-              <span className="thin">pixel</span>
-            </div>
-            <div className="outline-form">
-              <span style={{ width: 'auto' }}>{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line.color')}</span>
-              <button className="color-btn" style={{ backgroundColor: originColor }} onClick={() => popupHandle('color')}></button>
+        <div className="line-color-wrap">
+          <div className="outline-form mb10">
+            <span style={{ width: 'auto' }}>{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line.font.size')}</span>
+            <div className="grid-select mr5">
+              <QSelectBox options={pixels} value={originPixel} onChange={(e) => setOriginPixel(e)} />
             </div>
+            <span className="thin">pixel</span>
           </div>
-          <div className="font-ex-wrap">
-            <div className="font-ex-tit">{getMessage('modal.canvas.setting.font.plan.absorption.dimension.display')}</div>
-            <div className="form-box">
-              <div className="line-form">
-                <div className="line-font-box">
-                  <span
-                    className="font"
-                    style={{
-                      fontFamily: originFont?.value ?? '',
-                      fontWeight: originFontWeight?.value?.toLowerCase().includes('bold') ? 'bold' : 'normal',
-                      fontStyle: originFontWeight?.value?.toLowerCase().includes('italic') ? 'italic' : 'normal',
-                      fontSize: originFontSize?.value ?? '12px',
-                      color: originFontColor?.value ?? 'black',
-                    }}
-                  >
-                    9,999
-                  </span>
-                  <span
-                    className="line"
-                    style={{
-                      backgroundColor: originColor,
-                      borderColor: originColor,
-                      height: originPixel.name,
-                    }}
-                  ></span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={onSave}>
-              {getMessage('modal.common.save')}
-            </button>
+          <div className="outline-form">
+            <span style={{ width: 'auto' }}>{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line.color')}</span>
+            <button className="color-btn" style={{ backgroundColor: originColor }} onClick={() => popupHandle('color')}></button>
           </div>
         </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+        <div className="font-ex-wrap">
+          <div className="font-ex-tit">{getMessage('modal.canvas.setting.font.plan.absorption.dimension.display')}</div>
+          <div className="form-box">
+            <div className="line-form">
+              <div className="line-font-box">
+                <span
+                  className="font"
+                  style={{
+                    fontFamily: originFont?.value ?? '',
+                    fontWeight: originFontWeight?.value?.toLowerCase().includes('bold') ? 'bold' : 'normal',
+                    fontStyle: originFontWeight?.value?.toLowerCase().includes('italic') ? 'italic' : 'normal',
+                    fontSize: originFontSize?.value ?? '12px',
+                    color: originFontColor?.value ?? 'black',
+                  }}
+                >
+                  9,999
+                </span>
+                <span
+                  className="line"
+                  style={{
+                    backgroundColor: originColor,
+                    borderColor: originColor,
+                    height: originPixel.name,
+                  }}
+                ></span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal act" onClick={onSave}>
+            {getMessage('modal.common.save')}
+          </button>
+        </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx b/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx
index 7bdf05ba..1d4b1e58 100644
--- a/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx
+++ b/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx
@@ -55,59 +55,49 @@ 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={() => {
-              setIsShow(false)
-              closePopup(id, true)
-            }}
-          >
-            닫기
+    <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)
+        }}
+      />
+      <WithDraggable.Body>
+        <div className="slope-wrap">
+          <div className="outline-form mb10">
+            <span style={{ width: 'auto' }}>{getMessage('common.horizon')}</span>
+            <div className="input-grid mr5" style={{ width: '90px' }}>
+              <input
+                type="text"
+                className="input-origin block"
+                name={`originHorizon`}
+                value={planSizeSettingMode.originHorizon}
+                onChange={(e) => onlyNumberInputChange(e, changeInput)}
+              />
+            </div>
+            <span className="thin">mm</span>
+          </div>
+          <div className="outline-form">
+            <span style={{ width: 'auto' }}>{getMessage('common.vertical')}</span>
+            <div className="input-grid mr5" style={{ width: '90px' }}>
+              <input
+                type="text"
+                className="input-origin block"
+                name={`originVertical`}
+                value={planSizeSettingMode.originVertical}
+                onChange={(e) => onlyNumberInputChange(e, changeInput)}
+              />
+            </div>
+            <span className="thin">mm</span>
+          </div>
+        </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal act" onClick={onSave}>
+            {getMessage('modal.common.save')}
           </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>
-              <div className="input-grid mr5" style={{ width: '90px' }}>
-                <input
-                  type="text"
-                  className="input-origin block"
-                  name={`originHorizon`}
-                  value={planSizeSettingMode.originHorizon}
-                  onChange={(e) => onlyNumberInputChange(e, changeInput)}
-                />
-              </div>
-              <span className="thin">mm</span>
-            </div>
-            <div className="outline-form">
-              <span style={{ width: 'auto' }}>{getMessage('common.vertical')}</span>
-              <div className="input-grid mr5" style={{ width: '90px' }}>
-                <input
-                  type="text"
-                  className="input-origin block"
-                  name={`originVertical`}
-                  value={planSizeSettingMode.originVertical}
-                  onChange={(e) => onlyNumberInputChange(e, changeInput)}
-                />
-              </div>
-              <span className="thin">mm</span>
-            </div>
-          </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={onSave}>
-              {getMessage('modal.common.save')}
-            </button>
-          </div>
-        </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx b/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx
index 60bab5b7..09c847e7 100644
--- a/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx
+++ b/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx
@@ -39,37 +39,27 @@ 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)}>
-            닫기
+    <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)}>
+              {item.name}
+            </button>
+          ))}
+        </div>
+        <div className="properties-setting-wrap outer">
+          <div className="setting-tit">{getMessage('setting')}</div>
+          {type === TYPES.WALL_LINE_EDIT && <WallLine ref={wallLineEditRef} {...wallLineProps} />}
+          {type === TYPES.OFFSET && <Offset {...offsetProps} />}
+        </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal act" onClick={handleSave}>
+            {getMessage('modal.common.save')}
           </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)}>
-                {item.name}
-              </button>
-            ))}
-          </div>
-          <div className="properties-setting-wrap outer">
-            <div className="setting-tit">{getMessage('setting')}</div>
-            {type === TYPES.WALL_LINE_EDIT && <WallLine ref={wallLineEditRef} {...wallLineProps} />}
-            {type === TYPES.OFFSET && <Offset {...offsetProps} />}
-          </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={handleSave}>
-              {getMessage('modal.common.save')}
-            </button>
-          </div>
-        </div>
-        <div className="modal-foot modal-handle"></div>
-      </div>
+      </WithDraggable.Body>
     </WithDraggable>
   )
 }