diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx
index 64d0343..4823c29 100644
--- a/src/app/canvas/page.jsx
+++ b/src/app/canvas/page.jsx
@@ -80,16 +80,16 @@ export default function CanvasPage() {
                         <CanvasLayout menuValue={menuValue}/>
                     </div>
                     {/* 우클릭 context menu */}
-                    <CanvasContextMenu/>
+                    {/* <CanvasContextMenu/> */}
                     
                     {/* 패널 배치 집계 */}
-                    <Penal01/>
+                    {/* <Penal01/> */}
                     {/* <Penal02/> */}
                     {/* <Penal03/> */}
                     {/* <Penal04/> */}
 
                     {/* 배치면 초기 설정 */}
-                    <PlacementSettingPop/>
+                    {/* <PlacementSettingPop/> */}
 
                     {/* 캔버스 기본 셋팅 */}
                     {/* {modalOption.option && <SettingModal01/>} */}
@@ -129,7 +129,7 @@ export default function CanvasPage() {
                     {/* <AuxiliaryCopy/> */}
 
                     {/* 지붕면 할당 */}
-                    <RoofAllocation/>
+                    {/* <RoofAllocation/> */}
 
                     {/* 경사 설정 */}
                     {/* <SlopeOption/> */}
@@ -206,7 +206,7 @@ export default function CanvasPage() {
                     {/* <MeasuredValueOption/> */}
 
                     {/* 이미지 불러오기 */}
-                    {/* <ImgLoad/> */}
+                    <ImgLoad/>
                 </div>
             </div>
             {menuValue === 5 && <Footer/>}
diff --git a/src/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleCopy.jsx b/src/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleCopy.jsx
index 2873b5c..32419ec 100644
--- a/src/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleCopy.jsx
+++ b/src/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleCopy.jsx
@@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
 
 export default function AdditionalBundleCopy(){
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap xm`}>
+        <WithDraggable isShow={true} size={'xm'}>
                 <div className="modal-head handle">
                     <h1 className="title">単コピー設定 </h1>
                     <button className="modal-close">닫기</button>
@@ -36,7 +35,6 @@ export default function AdditionalBundleCopy(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleMove.jsx b/src/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleMove.jsx
index 74fda5d..edb92b8 100644
--- a/src/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleMove.jsx
+++ b/src/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleMove.jsx
@@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
 
 export default function AdditionalBundleMove(){
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap xm`}>
+        <WithDraggable isShow={true} size={'xm'}>
                 <div className="modal-head handle">
                     <h1 className="title">単移動設定 </h1>
                     <button className="modal-close">닫기</button>
@@ -36,7 +35,6 @@ export default function AdditionalBundleMove(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnCopy.jsx b/src/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnCopy.jsx
index a14bd01..ab75a08 100644
--- a/src/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnCopy.jsx
+++ b/src/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnCopy.jsx
@@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
 
 export default function AdditionalColumnCopy(){
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap xm`}>
+        <WithDraggable isShow={true} size={'xm'}>
                 <div className="modal-head handle">
                     <h1 className="title">列コピーの設定 </h1>
                     <button className="modal-close">닫기</button>
@@ -36,7 +35,6 @@ export default function AdditionalColumnCopy(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnMove.jsx b/src/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnMove.jsx
index 3c9872c..d86557e 100644
--- a/src/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnMove.jsx
+++ b/src/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnMove.jsx
@@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
 
 export default function AdditionalColumnMove(){
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap xm`}>
+        <WithDraggable isShow={true} size={'xm'}>
                 <div className="modal-head handle">
                     <h1 className="title">列移動設定 </h1>
                     <button className="modal-close">닫기</button>
@@ -36,7 +35,6 @@ export default function AdditionalColumnMove(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/additionalfunction/additionoption/AdditionalCopy.jsx b/src/components/canvas/modal/additionalfunction/additionoption/AdditionalCopy.jsx
index dcc88be..2c13316 100644
--- a/src/components/canvas/modal/additionalfunction/additionoption/AdditionalCopy.jsx
+++ b/src/components/canvas/modal/additionalfunction/additionoption/AdditionalCopy.jsx
@@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
 
 export default function AdditionalCopy(){
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap xm`}>
+        <WithDraggable isShow={true} size={'xm'}>
                 <div className="modal-head handle">
                     <h1 className="title">コピー設定 </h1>
                     <button className="modal-close">닫기</button>
@@ -37,7 +36,6 @@ export default function AdditionalCopy(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/additionalfunction/additionoption/AdditionalMove.jsx b/src/components/canvas/modal/additionalfunction/additionoption/AdditionalMove.jsx
index f1ca2b9..ecf7328 100644
--- a/src/components/canvas/modal/additionalfunction/additionoption/AdditionalMove.jsx
+++ b/src/components/canvas/modal/additionalfunction/additionoption/AdditionalMove.jsx
@@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
 
 export default function AdditionalMove(){
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap xm`}>
+        <WithDraggable isShow={true} size={'xm'}>
                 <div className="modal-head handle">
                     <h1 className="title">移動設定 </h1>
                     <button className="modal-close">닫기</button>
@@ -37,7 +36,6 @@ export default function AdditionalMove(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/additionalfunction/additionoption/AllModuleCopy.jsx b/src/components/canvas/modal/additionalfunction/additionoption/AllModuleCopy.jsx
index f56d66e..0e293cc 100644
--- a/src/components/canvas/modal/additionalfunction/additionoption/AllModuleCopy.jsx
+++ b/src/components/canvas/modal/additionalfunction/additionoption/AllModuleCopy.jsx
@@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
 
 export default function AllModuleCopy(){
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap xm`}>
+        <WithDraggable isShow={true} size={'xm'}>
                 <div className="modal-head handle">
                     <h1 className="title">モジュール一括コピー設定 </h1>
                     <button className="modal-close">닫기</button>
@@ -36,7 +35,6 @@ export default function AllModuleCopy(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/additionalfunction/additionoption/AllModuleMove.jsx b/src/components/canvas/modal/additionalfunction/additionoption/AllModuleMove.jsx
index d9acc5d..eb23c3f 100644
--- a/src/components/canvas/modal/additionalfunction/additionoption/AllModuleMove.jsx
+++ b/src/components/canvas/modal/additionalfunction/additionoption/AllModuleMove.jsx
@@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
 
 export default function AllModuleMove(){
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap xm`}>
+        <WithDraggable isShow={true} size={'xm'}>
                 <div className="modal-head handle">
                     <h1 className="title">モジュール一括移動設定 </h1>
                     <button className="modal-close">닫기</button>
@@ -36,7 +35,6 @@ export default function AllModuleMove(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/additionalfunction/additionoption/AllModuleNumChange.jsx b/src/components/canvas/modal/additionalfunction/additionoption/AllModuleNumChange.jsx
index dd45550..b369ad5 100644
--- a/src/components/canvas/modal/additionalfunction/additionoption/AllModuleNumChange.jsx
+++ b/src/components/canvas/modal/additionalfunction/additionoption/AllModuleNumChange.jsx
@@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
 
 export default function AllModuleNumChange(){
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap xm`}>
+        <WithDraggable isShow={true} size={'xm'}>
                 <div className="modal-head handle">
                     <h1 className="title">モジュール一括回路番号の変更</h1>
                     <button className="modal-close">닫기</button>
@@ -29,7 +28,6 @@ export default function AllModuleNumChange(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleDelete.jsx b/src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleDelete.jsx
index 2aa3b99..9d75f61 100644
--- a/src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleDelete.jsx
+++ b/src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleDelete.jsx
@@ -10,8 +10,7 @@ export default function AdditionalBundleDelete(){
     }
 
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap r`}>
+        <WithDraggable isShow={true} size={'r'}>
                 <div className="modal-head handle">
                     <h1 className="title">ただし削除 </h1>
                     <button className="modal-close">닫기</button>
@@ -74,7 +73,6 @@ export default function AdditionalBundleDelete(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleEdit.jsx b/src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleEdit.jsx
index 93f3a3f..5d826f1 100644
--- a/src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleEdit.jsx
+++ b/src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleEdit.jsx
@@ -10,8 +10,7 @@ export default function AdditionalBundleEdit(){
     }
 
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap r`}>
+        <WithDraggable isShow={true} size={'r'}>
                 <div className="modal-head handle">
                     <h1 className="title">段挿入 </h1>
                     <button className="modal-close">닫기</button>
@@ -64,7 +63,6 @@ export default function AdditionalBundleEdit(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalColumnDelete.jsx b/src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalColumnDelete.jsx
index 89f7ad4..bd80559 100644
--- a/src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalColumnDelete.jsx
+++ b/src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalColumnDelete.jsx
@@ -10,8 +10,7 @@ export default function AdditionalColumnDelete(){
     }
 
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap r`}>
+        <WithDraggable isShow={true} size={'r'}>
                 <div className="modal-head handle">
                     <h1 className="title">コピー設定 </h1>
                     <button className="modal-close">닫기</button>
@@ -74,7 +73,6 @@ export default function AdditionalColumnDelete(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalColumnEdit.jsx b/src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalColumnEdit.jsx
index 39ef0e6..9c602dc 100644
--- a/src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalColumnEdit.jsx
+++ b/src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalColumnEdit.jsx
@@ -10,8 +10,7 @@ export default function AdditionalColumnEdit(){
     }
 
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap r`}>
+        <WithDraggable isShow={true} size={'r'}>
                 <div className="modal-head handle">
                     <h1 className="title">列の挿入 </h1>
                     <button className="modal-close">닫기</button>
@@ -64,7 +63,6 @@ export default function AdditionalColumnEdit(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/arrangementsetting/ArrangementSetting.jsx b/src/components/canvas/modal/arrangementsetting/ArrangementSetting.jsx
index fd52d19..1568c39 100644
--- a/src/components/canvas/modal/arrangementsetting/ArrangementSetting.jsx
+++ b/src/components/canvas/modal/arrangementsetting/ArrangementSetting.jsx
@@ -9,8 +9,7 @@ import ArrangementTab05 from "./ArrangementTab05";
 export default function ArrangementSetting(){
     const [buttonAct, setButtonAct] = useState(1);
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap r`}>
+        <WithDraggable isShow={true} size={'r'}>
                 <div className="modal-head handle">
                     <h1 className="title">配置面の描画</h1>
                     <button className="modal-close">닫기</button>
@@ -64,7 +63,6 @@ export default function ArrangementSetting(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/auxiliarylineoprion/AuxiliarylineOption.jsx b/src/components/canvas/modal/auxiliarylineoprion/AuxiliarylineOption.jsx
index 50b37d3..519e281 100644
--- a/src/components/canvas/modal/auxiliarylineoprion/AuxiliarylineOption.jsx
+++ b/src/components/canvas/modal/auxiliarylineoprion/AuxiliarylineOption.jsx
@@ -18,8 +18,7 @@ export default function AuxiliarylineOption(){
     const [buttonAct, setButtonAct] = useState(1);
 
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap r`}>
+        <WithDraggable isShow={true} size={'r'}>
                 <div className="modal-head handle">
                 <h1 className="title">補助線の作成</h1>
                     <button className="modal-close">닫기</button>
@@ -52,7 +51,6 @@ export default function AuxiliarylineOption(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/auxiliarysupport/AuxiliaryCopy.jsx b/src/components/canvas/modal/auxiliarysupport/AuxiliaryCopy.jsx
index 9174c7b..686acc1 100644
--- a/src/components/canvas/modal/auxiliarysupport/AuxiliaryCopy.jsx
+++ b/src/components/canvas/modal/auxiliarysupport/AuxiliaryCopy.jsx
@@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
 
 export default function AuxiliaryCopy(){
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap xm`}>
+        <WithDraggable isShow={true} size={'xm'}>
                 <div className="modal-head handle">
                     <h1 className="title">補助線のコピー </h1>
                     <button className="modal-close">닫기</button>
@@ -46,7 +45,6 @@ export default function AuxiliaryCopy(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/auxiliarysupport/AuxiliaryMove.jsx b/src/components/canvas/modal/auxiliarysupport/AuxiliaryMove.jsx
index bb89fa0..e54290e 100644
--- a/src/components/canvas/modal/auxiliarysupport/AuxiliaryMove.jsx
+++ b/src/components/canvas/modal/auxiliarysupport/AuxiliaryMove.jsx
@@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
 
 export default function AuxiliaryMove(){
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap xm`}>
+        <WithDraggable isShow={true} size={'xm'}>
                 <div className="modal-head handle">
                     <h1 className="title">補助線の移動 </h1>
                     <button className="modal-close">닫기</button>
@@ -46,7 +45,6 @@ export default function AuxiliaryMove(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/auxiliarysupport/AuxiliarySize.jsx b/src/components/canvas/modal/auxiliarysupport/AuxiliarySize.jsx
index 1adca97..631e96c 100644
--- a/src/components/canvas/modal/auxiliarysupport/AuxiliarySize.jsx
+++ b/src/components/canvas/modal/auxiliarysupport/AuxiliarySize.jsx
@@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
 
 export default function AuxiliarySize(){
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap xm`}>
+        <WithDraggable isShow={true} size={'xm'}>
                 <div className="modal-head handle">
                     <h1 className="title">補助線サイズ変更 </h1>
                     <button className="modal-close">닫기</button>
@@ -54,7 +53,6 @@ export default function AuxiliarySize(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/circuitstandsetting/CircuitStandSetting.jsx b/src/components/canvas/modal/circuitstandsetting/CircuitStandSetting.jsx
index 39cb430..a22d1d3 100644
--- a/src/components/canvas/modal/circuitstandsetting/CircuitStandSetting.jsx
+++ b/src/components/canvas/modal/circuitstandsetting/CircuitStandSetting.jsx
@@ -7,8 +7,7 @@ import CircuitStandTab03 from "./CircuitStandTab03";
 export default function CircuitStandSetting(){
     const [tabNum, setTabNum] = useState(1);
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap l-2`}>
+        <WithDraggable isShow={true} size={'l-2'}>
                 <div className="modal-head handle">
                     <h1 className="title">回路設定 </h1>
                     <button className="modal-close">닫기</button>
@@ -26,7 +25,6 @@ export default function CircuitStandSetting(){
                     {tabNum === 3 && <CircuitStandTab03 setTabNum={setTabNum}/>}
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 } 
\ No newline at end of file
diff --git a/src/components/canvas/modal/colorselect/ColorSelect.jsx b/src/components/canvas/modal/colorselect/ColorSelect.jsx
index dcc771b..c42dd51 100644
--- a/src/components/canvas/modal/colorselect/ColorSelect.jsx
+++ b/src/components/canvas/modal/colorselect/ColorSelect.jsx
@@ -3,8 +3,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
 
 export default function ColorSelect (){
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap lr`}>
+        <WithDraggable isShow={true} size={'lr'}>
                 <div className="modal-head handle">
                     <h1 className="title">カラー設定</h1>
                     <button className="modal-close">닫기</button>
@@ -23,7 +22,6 @@ export default function ColorSelect (){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/displaychange/DisplayChange.jsx b/src/components/canvas/modal/displaychange/DisplayChange.jsx
index 93058ae..a22c269 100644
--- a/src/components/canvas/modal/displaychange/DisplayChange.jsx
+++ b/src/components/canvas/modal/displaychange/DisplayChange.jsx
@@ -7,8 +7,7 @@ const SelectOption01 = [
 
 export default function DisplayChange(){
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap xm`}>
+        <WithDraggable isShow={true} size={'xm'}>
                 <div className="modal-head handle">
                     <h1 className="title">表示の変更 </h1>
                     <button className="modal-close">닫기</button>
@@ -66,7 +65,6 @@ export default function DisplayChange(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/distancemeasurement/DistanceMeasurement01.jsx b/src/components/canvas/modal/distancemeasurement/DistanceMeasurement01.jsx
index 898fc9d..c6e99b3 100644
--- a/src/components/canvas/modal/distancemeasurement/DistanceMeasurement01.jsx
+++ b/src/components/canvas/modal/distancemeasurement/DistanceMeasurement01.jsx
@@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
 
 export default function DistanceMeasurement01(){
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap xxxm`}>
+        <WithDraggable isShow={true} size={'xxxm'}>
                 <div className="modal-head handle">
                     <h1 className="title">距離測定 </h1>
                     <button className="modal-close">닫기</button>
@@ -25,7 +24,6 @@ export default function DistanceMeasurement01(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/distancemeasurement/DistanceMeasurement02.jsx b/src/components/canvas/modal/distancemeasurement/DistanceMeasurement02.jsx
index 17c04fc..8645bb5 100644
--- a/src/components/canvas/modal/distancemeasurement/DistanceMeasurement02.jsx
+++ b/src/components/canvas/modal/distancemeasurement/DistanceMeasurement02.jsx
@@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
 
 export default function DistanceMeasurement02(){
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap xxxm`}>
+        <WithDraggable isShow={true} size={'xxxm'}>
                 <div className="modal-head handle">
                     <h1 className="title">距離測定 </h1>
                     <button className="modal-close">닫기</button>
@@ -60,7 +59,6 @@ export default function DistanceMeasurement02(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/distancemeasurement/DistanceMeasurement03.jsx b/src/components/canvas/modal/distancemeasurement/DistanceMeasurement03.jsx
index bc0aeff..1a592e1 100644
--- a/src/components/canvas/modal/distancemeasurement/DistanceMeasurement03.jsx
+++ b/src/components/canvas/modal/distancemeasurement/DistanceMeasurement03.jsx
@@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
 
 export default function DistanceMeasurement03(){
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap xxxm`}>
+        <WithDraggable isShow={true} size={'xxxm'}>
                 <div className="modal-head handle">
                     <h1 className="title">距離測定 </h1>
                     <button className="modal-close">닫기</button>
@@ -25,7 +24,6 @@ export default function DistanceMeasurement03(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/drawingflow/DrawingFlow.jsx b/src/components/canvas/modal/drawingflow/DrawingFlow.jsx
index 011e733..b882b3f 100644
--- a/src/components/canvas/modal/drawingflow/DrawingFlow.jsx
+++ b/src/components/canvas/modal/drawingflow/DrawingFlow.jsx
@@ -9,8 +9,7 @@ const SelectOption01 = [
 export default function DrawingFlow(){
     const [compasDeg, setCompasDeg] = useState(0);
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap ml`}>
+        <WithDraggable isShow={true} size={'ml'}>
                 <div className="modal-head handle">
                     <h1 className="title">面フローの設定 </h1>
                     <button className="modal-close">닫기</button>
@@ -93,7 +92,6 @@ export default function DrawingFlow(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/eachpropertychange/EachPropertyChange.jsx b/src/components/canvas/modal/eachpropertychange/EachPropertyChange.jsx
index 66365d3..fa2f564 100644
--- a/src/components/canvas/modal/eachpropertychange/EachPropertyChange.jsx
+++ b/src/components/canvas/modal/eachpropertychange/EachPropertyChange.jsx
@@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
 
 export default function EachPropertyChange() {
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap r`}>
+        <WithDraggable isShow={true} size={'r'}>
                 <div className="modal-head handle">
                     <h1 className="title">各辺属性の変更 </h1>
                     <button className="modal-close">닫기</button>
@@ -90,7 +89,6 @@ export default function EachPropertyChange() {
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/eaves_keraba/EavesKerabaOption.jsx b/src/components/canvas/modal/eaves_keraba/EavesKerabaOption.jsx
index 03288b4..33f2eba 100644
--- a/src/components/canvas/modal/eaves_keraba/EavesKerabaOption.jsx
+++ b/src/components/canvas/modal/eaves_keraba/EavesKerabaOption.jsx
@@ -16,8 +16,7 @@ export default function EvaseKerabaOption(){
     const [buttonAct, setButtonAct] = useState(1);
 
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap r`}>
+        <WithDraggable isShow={true} size={'r'}>
                 <div className="modal-head handle">
                 <h1 className="title">軒・ケラバ変更</h1>
                     <button className="modal-close">닫기</button>
@@ -44,7 +43,6 @@ export default function EvaseKerabaOption(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/font_lineoption/FontOption.jsx b/src/components/canvas/modal/font_lineoption/FontOption.jsx
index ec7f20d..1c4a083 100644
--- a/src/components/canvas/modal/font_lineoption/FontOption.jsx
+++ b/src/components/canvas/modal/font_lineoption/FontOption.jsx
@@ -5,8 +5,7 @@ const SelectOption = [
 ]
 export default function FontOption(){
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap lrr`}>
+        <WithDraggable isShow={true} size={'lrr'}>
                 <div className="modal-head handle">
                     <h1 className="title">フォント </h1>
                     <button className="modal-close">닫기</button>
@@ -54,7 +53,6 @@ export default function FontOption(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/font_lineoption/LineOption.jsx b/src/components/canvas/modal/font_lineoption/LineOption.jsx
index 739d7d4..aa3026c 100644
--- a/src/components/canvas/modal/font_lineoption/LineOption.jsx
+++ b/src/components/canvas/modal/font_lineoption/LineOption.jsx
@@ -6,8 +6,7 @@ const SelectOption = [
 
 export default function LineOption(){
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap xxm`}>
+        <WithDraggable isShow={true} size={'xxm'}>
                 <div className="modal-head handle">
                     <h1 className="title">寸法線 設定 </h1>
                     <button className="modal-close">닫기</button>
@@ -47,7 +46,6 @@ export default function LineOption(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/font_lineoption/ShapeSizeOption.jsx b/src/components/canvas/modal/font_lineoption/ShapeSizeOption.jsx
index 6f447be..d0a3d35 100644
--- a/src/components/canvas/modal/font_lineoption/ShapeSizeOption.jsx
+++ b/src/components/canvas/modal/font_lineoption/ShapeSizeOption.jsx
@@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
 
 export default function ShapeSizeOption(){
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap xsm`}>
+        <WithDraggable isShow={true} size={'xsm'}>
                 <div className="modal-head handle">
                     <h1 className="title">図面サイズの設定</h1>
                     <button className="modal-close">닫기</button>
@@ -32,7 +31,6 @@ export default function ShapeSizeOption(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/gridoption/GridCopy.jsx b/src/components/canvas/modal/gridoption/GridCopy.jsx
index ac71191..86884ae 100644
--- a/src/components/canvas/modal/gridoption/GridCopy.jsx
+++ b/src/components/canvas/modal/gridoption/GridCopy.jsx
@@ -17,8 +17,7 @@ export default function GridCopy() {
 
     
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap xm ${modalOption.gridcopy ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
+        <WithDraggable isShow={true} size={'xm'}>
                 <div className="modal-head handle">
                     <h1 className="title">グリッドのコピー </h1>
                     <button className="modal-close" onClick={HandleClickClose}>닫기</button>
@@ -51,7 +50,6 @@ export default function GridCopy() {
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/gridoption/GridMove.jsx b/src/components/canvas/modal/gridoption/GridMove.jsx
index dc47053..b90b242 100644
--- a/src/components/canvas/modal/gridoption/GridMove.jsx
+++ b/src/components/canvas/modal/gridoption/GridMove.jsx
@@ -17,8 +17,7 @@ export default function GridMove() {
 
     
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap xm ${modalOption.gridmove ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
+        <WithDraggable isShow={true} size={'xm'}>
                 <div className="modal-head handle">
                     <h1 className="title">グリッド移動 </h1>
                     <button className="modal-close" onClick={HandleClickClose}>닫기</button>
@@ -65,7 +64,6 @@ export default function GridMove() {
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/gridoption/GridOption.jsx b/src/components/canvas/modal/gridoption/GridOption.jsx
index 3898f19..a7bab1b 100644
--- a/src/components/canvas/modal/gridoption/GridOption.jsx
+++ b/src/components/canvas/modal/gridoption/GridOption.jsx
@@ -22,8 +22,7 @@ export default function GridOption() {
 
     
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap ssm ${modalOption.gridoption ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
+        <WithDraggable isShow={true} size={'ssm'}>
                 <div className="modal-head handle">
                     <h1 className="title">ドット・ライングリッドの設定</h1>
                     <button className="modal-close" onClick={HandleClickClose}>닫기</button>
@@ -85,7 +84,6 @@ export default function GridOption() {
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofOption.jsx b/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofOption.jsx
index 845ff92..d383a47 100644
--- a/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofOption.jsx
+++ b/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofOption.jsx
@@ -7,8 +7,7 @@ import HexagonalRoofTab03 from "./HexagonalRoofTab03";
 export default function HexagonalRoofOption(){
     const [tabNum, setTabNum] = useState(1);
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap lx-2`}>
+        <WithDraggable isShow={true} size={'lx-2'}>
                 <div className="modal-head handle">
                     <h1 className="title">モジュール/架台設定 </h1>
                     <button className="modal-close">닫기</button>
@@ -28,7 +27,6 @@ export default function HexagonalRoofOption(){
                     {tabNum === 3 && <HexagonalRoofTab03 setTabNum={setTabNum}/>}
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 } 
\ No newline at end of file
diff --git a/src/components/canvas/modal/imagesize/ImageSize.jsx b/src/components/canvas/modal/imagesize/ImageSize.jsx
index cedbc1f..aea7ebb 100644
--- a/src/components/canvas/modal/imagesize/ImageSize.jsx
+++ b/src/components/canvas/modal/imagesize/ImageSize.jsx
@@ -4,8 +4,7 @@ import { useState } from "react";
 export default function ImageSize(){
     const [sizeValue, setSizeValue] = useState(100)
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap xxxm`}>
+        <WithDraggable isShow={true} size={'xxxm'}>
                 <div className="modal-head handle">
                     <h1 className="title">画像のサイズ変更 </h1>
                     <button className="modal-close">닫기</button>
@@ -19,7 +18,6 @@ export default function ImageSize(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/imgload/ImgLoad.jsx b/src/components/canvas/modal/imgload/ImgLoad.jsx
index a61fae3..f6f8a3b 100644
--- a/src/components/canvas/modal/imgload/ImgLoad.jsx
+++ b/src/components/canvas/modal/imgload/ImgLoad.jsx
@@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
 
 export default function ImgLoad(){
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap r`}>
+        <WithDraggable isShow={true} size={'r'}>
                 <div className="modal-head handle">
                     <h1 className="title">画像を読み込む </h1>
                     <button className="modal-close">닫기</button>
@@ -58,7 +57,6 @@ export default function ImgLoad(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/manualroofshape/ManualRoofShape.jsx b/src/components/canvas/modal/manualroofshape/ManualRoofShape.jsx
index e355644..b5083df 100644
--- a/src/components/canvas/modal/manualroofshape/ManualRoofShape.jsx
+++ b/src/components/canvas/modal/manualroofshape/ManualRoofShape.jsx
@@ -13,8 +13,7 @@ const buttonMenu = [
 export default function ManualRoofShape(){
     const [buttonAct, setButtonAct] = useState(1);
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap xxm`}>
+        <WithDraggable isShow={true} size={'xxm'}>
                 <div className="modal-head handle">
                 <h1 className="title">屋根形状の設定</h1>
                     <button className="modal-close">닫기</button>
@@ -49,7 +48,6 @@ export default function ManualRoofShape(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/measuredvalueoption/MeasuredValueOption.jsx b/src/components/canvas/modal/measuredvalueoption/MeasuredValueOption.jsx
index daa4967..83915df 100644
--- a/src/components/canvas/modal/measuredvalueoption/MeasuredValueOption.jsx
+++ b/src/components/canvas/modal/measuredvalueoption/MeasuredValueOption.jsx
@@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
 
 export default function MeasuredValueOption(){
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap ssm`}>
+        <WithDraggable isShow={true} size={'ssm'}>
                 <div className="modal-head handle">
                     <h1 className="title">実測値設定</h1>
                     <button className="modal-close">닫기</button>
@@ -52,7 +51,6 @@ export default function MeasuredValueOption(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/movingupdown/MovingUpDown.jsx b/src/components/canvas/modal/movingupdown/MovingUpDown.jsx
index ee55bd4..41c6a11 100644
--- a/src/components/canvas/modal/movingupdown/MovingUpDown.jsx
+++ b/src/components/canvas/modal/movingupdown/MovingUpDown.jsx
@@ -12,8 +12,7 @@ export default function MovingUpDonw(){
     const [buttonAct, setButtonAct] = useState(1);
 
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap r`}>
+        <WithDraggable isShow={true} size={'r'}>
                 <div className="modal-head handle">
                 <h1 className="title">軒・ケラバ変更</h1>
                     <button className="modal-close">닫기</button>
@@ -41,7 +40,6 @@ export default function MovingUpDonw(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/objectoption/ObjectOption.jsx b/src/components/canvas/modal/objectoption/ObjectOption.jsx
index 336c9fd..0141187 100644
--- a/src/components/canvas/modal/objectoption/ObjectOption.jsx
+++ b/src/components/canvas/modal/objectoption/ObjectOption.jsx
@@ -15,8 +15,7 @@ const buttonMenu = [
 export default function ObjectOption(){
     const [buttonAct, setButtonAct] = useState(1);
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap lrr`}>
+        <WithDraggable isShow={true} size={'lrr'}>
                 <div className="modal-head handle">
                     <h1 className="title">オブジェクトの配置 </h1>
                     <button className="modal-close">닫기</button>
@@ -46,7 +45,6 @@ export default function ObjectOption(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/outerlinesetting/OuterLineWall.jsx b/src/components/canvas/modal/outerlinesetting/OuterLineWall.jsx
index 26f6511..59ed857 100644
--- a/src/components/canvas/modal/outerlinesetting/OuterLineWall.jsx
+++ b/src/components/canvas/modal/outerlinesetting/OuterLineWall.jsx
@@ -23,8 +23,7 @@ export default function OuterLineWall (){
         }, 180)
     }
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap r ${modalOption.outerwall ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
+        <WithDraggable isShow={true} size={'r'}>
                 <div className="modal-head handle">
                     <h1 className="title">外壁線を描</h1>
                     <button className="modal-close" onClick={HandleClickClose}>닫기</button>
@@ -79,7 +78,6 @@ export default function OuterLineWall (){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/outerwalloffset/OuterWallOffset.jsx b/src/components/canvas/modal/outerwalloffset/OuterWallOffset.jsx
index cd6cf49..988ae37 100644
--- a/src/components/canvas/modal/outerwalloffset/OuterWallOffset.jsx
+++ b/src/components/canvas/modal/outerwalloffset/OuterWallOffset.jsx
@@ -13,8 +13,7 @@ export default function OuterWallOffset(){
     const [buttonAct, setButtonAct] = useState(1);
 
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap r`}>
+        <WithDraggable isShow={true} size={'r'}>
                 <div className="modal-head handle">
                 <h1 className="title">外壁の編集とオフセット</h1>
                     <button className="modal-close">닫기</button>
@@ -42,7 +41,6 @@ export default function OuterWallOffset(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx b/src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx
index 3e7bc2a..85dd262 100644
--- a/src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx
+++ b/src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx
@@ -2,7 +2,6 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
 import PlacementGuidePop from "./PlacementGuidePop";
 import RoofingMaterialGudiePop from "./RoofingMaterialGuidePop";
 import Qselect from "@/components/common/select/Qselect";
-import PopSpinner from "@/components/common/spinner/PopSpiner";
 
 const SelectOption01 = [
     {name: '瓦53A',}, {name: '瓦53A'}, {name: '瓦53A'}, {name: '瓦53A'}
@@ -13,8 +12,7 @@ const SelectOption04 = [
 
 export default function PlacementSettingPop(){
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap ll`}>
+        <WithDraggable isShow={true} size={'ll'}>
                 <div className="modal-head handle">
                     <h1 className="title">配置面初期設定</h1>
                     <button className="modal-close">닫기</button>
@@ -191,8 +189,6 @@ export default function PlacementSettingPop(){
                 <div className="modal-foot handle"></div>
                 {/* <PlacementGuidePop/>
                 <RoofingMaterialGudiePop/> */}
-                <PopSpinner/>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/planeshapeoption/PlaneShapeOption.jsx b/src/components/canvas/modal/planeshapeoption/PlaneShapeOption.jsx
index 694bb07..7b794f4 100644
--- a/src/components/canvas/modal/planeshapeoption/PlaneShapeOption.jsx
+++ b/src/components/canvas/modal/planeshapeoption/PlaneShapeOption.jsx
@@ -26,8 +26,7 @@ export default function PlaneShapeOption(){
     const [shapeNum, setShapeNum] = useState(1);
 
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap lr-2`}>
+        <WithDraggable isShow={true} size={'lr-2'}>
                 <div className="modal-head handle">
                     <h1 className="title">屋根形状の設定 </h1>
                     <button className="modal-close">닫기</button>
@@ -84,7 +83,6 @@ export default function PlaneShapeOption(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/propertiessetting/PropertiesSetting.jsx b/src/components/canvas/modal/propertiessetting/PropertiesSetting.jsx
index 09a65df..9a0b1d6 100644
--- a/src/components/canvas/modal/propertiessetting/PropertiesSetting.jsx
+++ b/src/components/canvas/modal/propertiessetting/PropertiesSetting.jsx
@@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
 
 export default function PropertiesSetting() {
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap lr`}>
+        <WithDraggable isShow={true} size={'lr'}>
                 <div className="modal-head handle">
                 <h1 className="title">外壁のプロパティの設定</h1>
                     <button className="modal-close">닫기</button>
@@ -28,7 +27,6 @@ export default function PropertiesSetting() {
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/roofallocation/RoofAllocation.jsx b/src/components/canvas/modal/roofallocation/RoofAllocation.jsx
index a4ea0cc..348b842 100644
--- a/src/components/canvas/modal/roofallocation/RoofAllocation.jsx
+++ b/src/components/canvas/modal/roofallocation/RoofAllocation.jsx
@@ -11,8 +11,7 @@ const SelectOption04 = [
 
 export default function RoofAllocation() {
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap lr`}>
+        <WithDraggable isShow={true} size={'lr'}>
                 <div className="modal-head handle">
                     <h1 className="title">屋根面の割り当て</h1>
                     <button className="modal-close">닫기</button>
@@ -171,8 +170,6 @@ export default function RoofAllocation() {
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-                <PopSpinner/>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/roofmoduleoption/RoofModuleOption.jsx b/src/components/canvas/modal/roofmoduleoption/RoofModuleOption.jsx
index 5decabb..4c8e60c 100644
--- a/src/components/canvas/modal/roofmoduleoption/RoofModuleOption.jsx
+++ b/src/components/canvas/modal/roofmoduleoption/RoofModuleOption.jsx
@@ -7,8 +7,7 @@ import RoofModuleOptionTab03 from "./RoofModuleOptionTab03";
 export default function RoofModuleOption(){
     const [tabNum, setTabNum] = useState(1);
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap lx-2`}>
+        <WithDraggable isShow={true} size={'lx-2'}>
                 <div className="modal-head handle">
                     <h1 className="title">モジュール/架台設定 </h1>
                     <button className="modal-close">닫기</button>
@@ -28,7 +27,6 @@ export default function RoofModuleOption(){
                     {tabNum === 3 && <RoofModuleOptionTab03 setTabNum={setTabNum}/>}
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/roofselect/RoofSelect.jsx b/src/components/canvas/modal/roofselect/RoofSelect.jsx
index 87f3bfc..910f1ae 100644
--- a/src/components/canvas/modal/roofselect/RoofSelect.jsx
+++ b/src/components/canvas/modal/roofselect/RoofSelect.jsx
@@ -7,8 +7,7 @@ const SelectOption = [
 
 export default function RoofSelect(){
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap xxxm`}>
+        <WithDraggable isShow={true} size={'xxxm'}>
                 <div className="modal-head handle">
                     <h1 className="title">変更 </h1>
                     <button className="modal-close">닫기</button>
@@ -26,7 +25,6 @@ export default function RoofSelect(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/roofshapeoption/RoofShapeOption.jsx b/src/components/canvas/modal/roofshapeoption/RoofShapeOption.jsx
index 95eabc6..a4f31b4 100644
--- a/src/components/canvas/modal/roofshapeoption/RoofShapeOption.jsx
+++ b/src/components/canvas/modal/roofshapeoption/RoofShapeOption.jsx
@@ -21,8 +21,7 @@ const shapeMenu = [
 export default function RoofShapeOption() {
     const [shapeNum, setShapeNum] = useState(1);
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap lr`}>
+        <WithDraggable isShow={true} size={'lr'}>
                 <div className="modal-head handle">
                 <h1 className="title">屋根形状の設定</h1>
                     <button className="modal-close">닫기</button>
@@ -52,7 +51,6 @@ export default function RoofShapeOption() {
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/settoing01/SettingModal01.jsx b/src/components/canvas/modal/settoing01/SettingModal01.jsx
index 95ec0f3..0c2b50f 100644
--- a/src/components/canvas/modal/settoing01/SettingModal01.jsx
+++ b/src/components/canvas/modal/settoing01/SettingModal01.jsx
@@ -32,8 +32,7 @@ export default function SettingModal01 (){
         }, 180)
     }
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap sm ${modalOption.option ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
+        <WithDraggable isShow={true} size={'sm'}>
                 <div className="modal-head handle">
                     <h1 className="title">Canvas設定</h1>
                     <button className="modal-close" onClick={HandleClickClose}>닫기</button>
@@ -67,7 +66,6 @@ export default function SettingModal01 (){
                     {buttonAct === 3 && <ThirdOption {...propsClick}/>}
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/sizechange/SizeChang.jsx b/src/components/canvas/modal/sizechange/SizeChang.jsx
index c596b4e..2970d85 100644
--- a/src/components/canvas/modal/sizechange/SizeChang.jsx
+++ b/src/components/canvas/modal/sizechange/SizeChang.jsx
@@ -4,8 +4,7 @@ import { useState } from "react";
 export default function SizeChange(){
     const [sizeCheck, setSizeCheck] = useState(1)
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap ssm`}>
+        <WithDraggable isShow={true} size={'ssm'}>
                 <div className="modal-head handle">
                     <h1 className="title">サイズ変更 </h1>
                     <button className="modal-close">닫기</button>
@@ -53,7 +52,6 @@ export default function SizeChange(){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/slopeoption/SlopeOption.jsx b/src/components/canvas/modal/slopeoption/SlopeOption.jsx
index 3f9facb..4de0ce9 100644
--- a/src/components/canvas/modal/slopeoption/SlopeOption.jsx
+++ b/src/components/canvas/modal/slopeoption/SlopeOption.jsx
@@ -2,8 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
 
 export default function SlopeOption (){
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap xxxm`}>
+        <WithDraggable isShow={true} size={'xxxm'}>
                 <div className="modal-head handle">
                     <h1 className="title">傾斜設定 </h1>
                     <button className="modal-close">닫기</button>
@@ -25,7 +24,6 @@ export default function SlopeOption (){
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/common/draggable/withDraggable.jsx b/src/components/common/draggable/withDraggable.jsx
index 5955051..b31048c 100644
--- a/src/components/common/draggable/withDraggable.jsx
+++ b/src/components/common/draggable/withDraggable.jsx
@@ -2,8 +2,9 @@
 
 import { useState } from 'react'
 import Draggable from 'react-draggable'
+import PopSpinner from '../spinner/PopSpiner'
 
-export default function WithDraggable({ isShow, handle = '', children }) {
+export default function WithDraggable({ isShow, handle = '', children, size }) {
   const [position, setPosition] = useState({ x: 0, y: 0 })
 
   const handleOnDrag = (data) => {
@@ -18,7 +19,10 @@ export default function WithDraggable({ isShow, handle = '', children }) {
           onDrag={(_, data) => handleOnDrag(data)}
           handle={handle === '' ? '.handle' : handle}
         >
-          {children}
+          <div className={`modal-pop-wrap ${size}`}>
+            {children}
+            <PopSpinner/>
+          </div>
         </Draggable>
       )}
     </>