나침반 사이즈 변경

src/app/canvas/page.jsx

@@ -129,7 +129,7 @@ export default function CanvasPage() {
                     {/* <AuxiliaryCopy/> */}
 
                     {/* 지붕면 할당 */}
-                    <RoofAllocation/>
+                    {/* <RoofAllocation/> */}
 
                     {/* 경사 설정 */}
                     {/* <SlopeOption/> */}
@@ -138,10 +138,10 @@ export default function CanvasPage() {
                     {/* <ArrangementSetting/> */}
 
                     {/* 면형상 배치 */}
-                    <PlaneShapeOption/>
+                    {/* <PlaneShapeOption/> */}
                     
                     {/* 오브젝트 배치*/}
-                    <ObjectOption/>
+                    {/* <ObjectOption/> */}
 
                     {/* 표시변겅 */}
                     {/* <DisplayChange/> */}
@@ -155,13 +155,13 @@ export default function CanvasPage() {
                     {/* <EachPropertyChange/> */}
 
                     {/* 면 흐름 설정 */}
-                    {/* <DrawingFlow/> */}
+                    <DrawingFlow/>
 
                     {/* 지붕모듈선택 */}
-                    {/* <RoofModuleOption/> */}
+                    <RoofModuleOption/>
 
                     {/* 육지붕모듈 선택 */}
-                    {/* <HexagonalRoofOption/> */}
+                    <HexagonalRoofOption/>
 
                     {/* 회로 및 가대설정 */}
                     {/* <CircuitStandSetting/> */}

src/components/canvas/CanvasLayout.jsx

@@ -25,6 +25,7 @@ export default function CanvasLayout ({menuValue}) {
     return(
         <div className="canvas-layout">
             <div className={`canvas-page-list ${(menuValue === 2 || menuValue === 3 || menuValue === 4) ? 'active' : ""}`}>
+                <div className="canvas-id">RT01250306004</div>
                 <div className="canvas-plane-wrap">
                     {plans.map((plan, idx) => (
                         <button 

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 } 

src/components/canvas/modal/circuitstandsetting/CircuitStandTab03.jsx

@@ -2,7 +2,7 @@ import Qselect from "@/components/common/select/Qselect";
 import { useState } from "react";
 
 const SelectOption01 = [
-    {name: '0',}, {name: '0'}, {name: '0'}, {name: '0'}
+    {name: '重要負荷接続+室内リモコン',}, {name: '重要負荷接続+室内リモコン'}, {name: '重要負荷接続+室内リモコン'}, {name: '重要負荷接続+室内リモコン'}
 ]
 
 
@@ -13,11 +13,14 @@ export default function CircuitStandTab03({setTabNum}){
         <>
             <div className="properties-setting-wrap outer">
                 <div className="circuit-title-sel">
-                    <div className="outline-form">
-                        <span className="mr10" style={{width: 'auto'}}>モニターの選択</span>
+                    <p className="circuit-title">モニターの選択</p>
+                    <div className="circuit-sel-wrap">
                         <div className="grid-select mr10">
                             <Qselect title={'電力検出ユニット (モニター付き)'} option={SelectOption01}/>
                         </div>
+                        <div className="grid-select ">
+                            <Qselect title={'重要負荷接続+室内リモコン'} option={SelectOption01}/>
+                        </div>
                     </div>
                 </div>
                 <div className="slope-wrap">

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

src/components/canvas/modal/hexagonalroofoption/HexagonalRoofOption.jsx

@@ -2,13 +2,11 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
 import { useState } from "react";
 import HexagonalRoofTab01 from "./HexagonalRoofTab01";
 import HexagonalRoofTab02 from "./HexagonalRoofTab02";
-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>
@@ -17,18 +15,14 @@ export default function HexagonalRoofOption(){
                 <div className="left-bar handle"></div>
                 <div className="right-bar handle"></div>
                     <div className="roof-module-tab">
-                        <div className={`module-tab-bx ${tabNum === 1 || tabNum === 2 || tabNum === 3 ? 'act': ''}`}>防衛設定</div>
-                        <span className={`tab-arr ${ tabNum === 2 || tabNum === 3 ? 'act': ''}`}></span>
-                        <div className={`module-tab-bx ${tabNum === 2 || tabNum === 3 ? 'act': ''}`}>モジュール設定</div>
-                        <span className={`tab-arr ${ tabNum === 3 ? 'act': ''}`}></span>
-                        <div className={`module-tab-bx ${tabNum === 3 ? 'act': ''}`}>モジュールの配置</div>
+                        <div className={`module-tab-bx ${tabNum === 1 || tabNum === 2 ? 'act': ''}`}>防衛設定</div>
+                        <span className={`tab-arr ${ tabNum === 2 ? 'act': ''}`}></span>
+                        <div className={`module-tab-bx ${tabNum === 2 ? 'act': ''}`}>モジュールの配置</div>
                     </div>
                     {tabNum === 1 && <HexagonalRoofTab01 setTabNum={setTabNum}/>}
                     {tabNum === 2 && <HexagonalRoofTab02 setTabNum={setTabNum}/>}
-                    {tabNum === 3 && <HexagonalRoofTab03 setTabNum={setTabNum}/>}
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 } 

src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab01.jsx

@@ -1,60 +1,136 @@
+import Qselect from "@/components/common/select/Qselect";
 import { useState } from "react";
 
+const SelectOption01 = [
+    {name: '0',}, {name: '0'}, {name: '0'}, {name: '0'}
+]
+
+
 export default function HexagonalRoofTab01({setTabNum}){
     const [compasDeg, setCompasDeg] = useState(0);
     return(
         <>
             <div className="properties-setting-wrap">
                 <div className="outline-wrap">
-                    <div className="guide">※シミュレーション計算用方位を指定します。南の方位を設定してください。</div>
-                    <div className="roof-module-compas">
-                        <div className="compas-box">
-                            <div className="compas-box-inner">
-                                <div className={`circle ${compasDeg === 180 ? 'act' : ''}`} onClick={() => setCompasDeg(180)}><i>180°</i></div>
-                                <div className={`circle ${compasDeg === 195 ? 'act' : ''}`} onClick={() => setCompasDeg(195)}></div>
-                                <div className={`circle ${compasDeg === 210 ? 'act' : ''}`} onClick={() => setCompasDeg(210)}></div>
-                                <div className={`circle ${compasDeg === 225 ? 'act' : ''}`} onClick={() => setCompasDeg(225)}></div>
-                                <div className={`circle ${compasDeg === 240 ? 'act' : ''}`} onClick={() => setCompasDeg(240)}></div>
-                                <div className={`circle ${compasDeg === 255 ? 'act' : ''}`} onClick={() => setCompasDeg(255)}></div>
-                                <div className={`circle ${compasDeg === 270 ? 'act' : ''}`} onClick={() => setCompasDeg(270)}><i>-90°</i></div>
-                                <div className={`circle ${compasDeg === 285 ? 'act' : ''}`} onClick={() => setCompasDeg(285)}></div>
-                                <div className={`circle ${compasDeg === 300 ? 'act' : ''}`} onClick={() => setCompasDeg(300)}></div>
-                                <div className={`circle ${compasDeg === 315 ? 'act' : ''}`} onClick={() => setCompasDeg(315)}></div>
-                                <div className={`circle ${compasDeg === 330 ? 'act' : ''}`} onClick={() => setCompasDeg(330)}></div>
-                                <div className={`circle ${compasDeg === 345 ? 'act' : ''}`} onClick={() => setCompasDeg(345)}></div>
-                                <div className={`circle ${compasDeg === 0 ? 'act' : ''}`} onClick={() => setCompasDeg(0)}><i>0°</i></div>
-                                <div className={`circle ${compasDeg === 15 ? 'act' : ''}`} onClick={() => setCompasDeg(15)}></div>
-                                <div className={`circle ${compasDeg === 30 ? 'act' : ''}`} onClick={() => setCompasDeg(30)}></div>
-                                <div className={`circle ${compasDeg === 45 ? 'act' : ''}`} onClick={() => setCompasDeg(45)}></div>
-                                <div className={`circle ${compasDeg === 60 ? 'act' : ''}`} onClick={() => setCompasDeg(60)}></div>
-                                <div className={`circle ${compasDeg === 75 ? 'act' : ''}`} onClick={() => setCompasDeg(75)}></div>
-                                <div className={`circle ${compasDeg === 90 ? 'act' : ''}`} onClick={() => setCompasDeg(90)}><i>90°</i></div>
-                                <div className={`circle ${compasDeg === 105 ? 'act' : ''}`} onClick={() => setCompasDeg(105)}></div>
-                                <div className={`circle ${compasDeg === 120 ? 'act' : ''}`} onClick={() => setCompasDeg(120)}></div>
-                                <div className={`circle ${compasDeg === 135 ? 'act' : ''}`} onClick={() => setCompasDeg(135)}></div>
-                                <div className={`circle ${compasDeg === 150 ? 'act' : ''}`} onClick={() => setCompasDeg(150)}></div>
-                                <div className={`circle ${compasDeg === 165 ? 'act' : ''}`} onClick={() => setCompasDeg(165)}></div>
-                                <div className="compas">
-                                    <div className="compas-arr" style={{transform: `rotate(${compasDeg}deg)`}}></div>
+                    <div className="roof-module-inner">
+                        <div className="compas-wrapper">
+                            <div className="guide">※シミュレーション計算用方位を指定します。南の方位を設定してください。</div>
+                            <div className="roof-module-compas">
+                                <div className="compas-box">
+                                    <div className="compas-box-inner">
+                                        <div className={`circle ${compasDeg === 180 ? 'act' : ''}`} onClick={() => setCompasDeg(180)}><i>180°</i></div>
+                                        <div className={`circle ${compasDeg === 195 ? 'act' : ''}`} onClick={() => setCompasDeg(195)}></div>
+                                        <div className={`circle ${compasDeg === 210 ? 'act' : ''}`} onClick={() => setCompasDeg(210)}></div>
+                                        <div className={`circle ${compasDeg === 225 ? 'act' : ''}`} onClick={() => setCompasDeg(225)}></div>
+                                        <div className={`circle ${compasDeg === 240 ? 'act' : ''}`} onClick={() => setCompasDeg(240)}></div>
+                                        <div className={`circle ${compasDeg === 255 ? 'act' : ''}`} onClick={() => setCompasDeg(255)}></div>
+                                        <div className={`circle ${compasDeg === 270 ? 'act' : ''}`} onClick={() => setCompasDeg(270)}><i>-90°</i></div>
+                                        <div className={`circle ${compasDeg === 285 ? 'act' : ''}`} onClick={() => setCompasDeg(285)}></div>
+                                        <div className={`circle ${compasDeg === 300 ? 'act' : ''}`} onClick={() => setCompasDeg(300)}></div>
+                                        <div className={`circle ${compasDeg === 315 ? 'act' : ''}`} onClick={() => setCompasDeg(315)}></div>
+                                        <div className={`circle ${compasDeg === 330 ? 'act' : ''}`} onClick={() => setCompasDeg(330)}></div>
+                                        <div className={`circle ${compasDeg === 345 ? 'act' : ''}`} onClick={() => setCompasDeg(345)}></div>
+                                        <div className={`circle ${compasDeg === 0 ? 'act' : ''}`} onClick={() => setCompasDeg(0)}><i>0°</i></div>
+                                        <div className={`circle ${compasDeg === 15 ? 'act' : ''}`} onClick={() => setCompasDeg(15)}></div>
+                                        <div className={`circle ${compasDeg === 30 ? 'act' : ''}`} onClick={() => setCompasDeg(30)}></div>
+                                        <div className={`circle ${compasDeg === 45 ? 'act' : ''}`} onClick={() => setCompasDeg(45)}></div>
+                                        <div className={`circle ${compasDeg === 60 ? 'act' : ''}`} onClick={() => setCompasDeg(60)}></div>
+                                        <div className={`circle ${compasDeg === 75 ? 'act' : ''}`} onClick={() => setCompasDeg(75)}></div>
+                                        <div className={`circle ${compasDeg === 90 ? 'act' : ''}`} onClick={() => setCompasDeg(90)}><i>90°</i></div>
+                                        <div className={`circle ${compasDeg === 105 ? 'act' : ''}`} onClick={() => setCompasDeg(105)}></div>
+                                        <div className={`circle ${compasDeg === 120 ? 'act' : ''}`} onClick={() => setCompasDeg(120)}></div>
+                                        <div className={`circle ${compasDeg === 135 ? 'act' : ''}`} onClick={() => setCompasDeg(135)}></div>
+                                        <div className={`circle ${compasDeg === 150 ? 'act' : ''}`} onClick={() => setCompasDeg(150)}></div>
+                                        <div className={`circle ${compasDeg === 165 ? 'act' : ''}`} onClick={() => setCompasDeg(165)}></div>
+                                        <div className="compas">
+                                            <div className="compas-arr" style={{transform: `rotate(${compasDeg}deg)`}}></div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="center-wrap">
+                                <div className="outline-form">
+                                    <div className="d-check-box pop mr10">
+                                        <input type="checkbox" id="ch99" />
+                                        <label htmlFor="ch99">角度変更</label>
+                                    </div>
+                                    <div className="input-grid mr10" style={{width: '60px'}}>
+                                        <input type="text" className="input-origin block" defaultValue={315}/>
+                                    </div>
+                                    <span className="thin" >°</span>
+                                    <span className="thin" >（ -180 〜 180 ）</span>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                    <div className="center-wrap">
-                        <div className="d-check-box pop">
-                            <input type="checkbox" id="ch99" />
-                            <label htmlFor="ch99">角度を直接入力（ -180 〜 180 ）</label>
-                        </div>
-                        <div className="outline-form">
-                            <div className="input-grid mr10" style={{width: '160px'}}>
-                                <input type="text" className="input-origin block" defaultValue={315}/>
+                        <div className="compas-table-wrap">
+                            <div className="compas-table-box">
+                                <div className="outline-form mb10">
+                                    <span className="mr10">モジュールの選択</span>
+                                    <div className="grid-select">
+                                        <Qselect title={'Search'} option={SelectOption01}/>
+                                    </div>
+                                </div>
+                                <div className="roof-module-table">
+                                    <table>
+                                        <thead>
+                                            <tr>
+                                                <th style={{width: '150px'}}>モジュール</th>
+                                                <th>高さ (mm)</th>
+                                                <th>幅 (mm)</th>
+                                                <th>出力 (W)</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td>
+                                                    <div className="color-wrap">
+                                                        <span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
+                                                        <span className="name">Re.RISE-G3 440</span>
+                                                    </div>
+                                                </td>
+                                                <td className="al-r">1134</td>
+                                                <td className="al-r">1722</td>
+                                                <td className="al-r">440</td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="color-wrap">
+                                                        <span className="color-box" style={{backgroundColor: '#67A2AA'}}></span>
+                                                        <span className="name">Re.RISE MS-G3 290</span>
+                                                    </div>
+                                                </td>
+                                                <td className="al-r">1134</td>
+                                                <td className="al-r">1722</td>
+                                                <td className="al-r">440</td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="color-wrap">
+                                                        <span className="color-box" style={{backgroundColor: '#67A2AA'}}></span>
+                                                        <span className="name">Re.RISE MS-G3 290</span>
+                                                    </div>
+                                                </td>
+                                                <td className="al-r">1134</td>
+                                                <td className="al-r">1722</td>
+                                                <td className="al-r">440</td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                                <div className="outline-form mt15">
+                                    <span>モジュール配置領域 : </span>
+                                    <div className="input-grid mr10" style={{width: '60px'}}>
+                                        <input type="text" className="input-origin block" defaultValue={315}/>
+                                    </div>
+                                    <span className="thin" >mm</span>
+                                </div>
                             </div>
-                            <span className="thin" >°</span>
                         </div>
                     </div>
                 </div>
             </div>
             <div className="grid-btn-wrap">
+                <button className="btn-frame modal mr5">保存</button>
                 <button className="btn-frame modal act" onClick={() => setTabNum(2)}>Next</button>
             </div>
         </>

src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab02.jsx

@@ -1,67 +1,159 @@
-import Qselect from "@/components/common/select/Qselect";
 
-const SelectOption01 = [
-    {name: '0',}, {name: '0'}, {name: '0'}, {name: '0'}
-]
-
-export default function HexagonalRoofTab02({setTabNum}){
+export default function HexagonalRoofTab03({setTabNum}){
     return(
         <>
-            <div className="module-table-box">
+            <div className="module-table-box mb10">
                 <div className="module-table-inner">
-                    <div className="outline-form mb10">
-                        <span className="mr10">モジュールの選択</span>
-                        <div className="grid-select">
-                            <Qselect title={'Search'} option={SelectOption01}/>
-                        </div>
-                    </div>
                     <div className="roof-module-table">
-                            <table>
-                                <thead>
-                                    <tr>
-                                        <th style={{width: '250px'}}>モジュール</th>
-                                        <th>高さ<br/> (mm)</th>
-                                        <th>幅<br/> (mm)</th>
-                                        <th>出力<br/> (W)</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>
-                                            <div className="color-wrap">
-                                                <span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
-                                                <span className="name">Re.RISE-G3 440</span>
-                                            </div>
-                                        </td>
-                                        <td className="al-r">1134</td>
-                                        <td className="al-r">1722</td>
-                                        <td className="al-r">440</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <div className="color-wrap">
-                                                <span className="color-box" style={{backgroundColor: '#67A2AA'}}></span>
-                                                <span className="name">Re.RISE MS-G3 290</span>
-                                            </div>
-                                        </td>
-                                        <td className="al-r">1134</td>
-                                        <td className="al-r">1722</td>
-                                        <td className="al-r">440</td>
-                                    </tr>
-                                    <tr>
-                                        <td></td>
-                                        <td></td>
-                                        <td></td>
-                                        <td></td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th style={{width: '70px'}}>
+                                        <div className="d-check-box no-text pop">
+                                            <input type="checkbox" id="ch01" disabled/>
+                                            <label htmlFor="ch01"></label>
+                                        </div>
+                                    </th>
+                                    <th >モジュール</th>
+                                    <th style={{width: '70px'}}>Max単数</th>
+                                    <th style={{width: '100px'}}>混合Max単数</th>
+                                    <th style={{width: '80px'}}>単数</th>
+                                    <th style={{width: '80px'}}>熱水</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td className="al-c">
+                                        <div className="d-check-box no-text pop">
+                                            <input type="checkbox" id="ch02" />
+                                            <label htmlFor="ch02"></label>
+                                        </div>
+                                    </td>
+                                    <td>
+                                        <div className="color-wrap">
+                                            <span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
+                                            <span className="name">Re.RISE-G3 440</span>
+                                        </div>
+                                    </td>
+                                    <td className="al-r">00</td>
+                                    <td className="al-r">00</td>
+                                    <td className="al-r">
+                                        <div className="input-grid" >
+                                            <input type="text" className="input-origin block" defaultValue={13}/>
+                                        </div>
+                                    </td>
+                                    <td className="al-r">
+                                        <div className="input-grid" >
+                                            <input type="text" className="input-origin block" defaultValue={13}/>
+                                        </div>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td className="al-c">
+                                        <div className="d-check-box no-text pop">
+                                            <input type="checkbox" id="ch03" />
+                                            <label htmlFor="ch03"></label>
+                                        </div>
+                                    </td>
+                                    <td>
+                                        <div className="color-wrap">
+                                            <span className="color-box" style={{backgroundColor: '#67A2AA'}}></span>
+                                            <span className="name">Re.RISE MS-G3 290</span>
+                                        </div>
+                                    </td>
+                                    <td className="al-r">00</td>
+                                    <td className="al-r">00</td>
+                                    <td className="al-r">
+                                        <div className="input-grid" >
+                                            <input type="text" className="input-origin block" defaultValue={13}/>
+                                        </div>
+                                    </td>
+                                    <td className="al-r">
+                                        <div className="input-grid" >
+                                            <input type="text" className="input-origin block" defaultValue={13}/>
+                                        </div>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td></td>
+                                    <td></td>
+                                    <td></td>
+                                    <td></td>
+                                    <td></td>
+                                    <td></td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
                 </div>
             </div>
+            <div className="module-table-box mb10">
+                <div className="module-table-inner">
+                <div className="module-area">
+                        <div className="module-area-title">配置基準の設定</div>
+                        <div className="d-check-radio pop mr15">
+                            <input type="radio" name="radio01" id="ra01" />
+                            <label htmlFor="ra01">南向きに設置す</label>
+                        </div>
+                        <div className="d-check-radio pop">
+                            <input type="radio" name="radio01" id="ra02" />
+                            <label htmlFor="ra02">指定した辺を基準に設置する</label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {/* <div className="module-table-box">
+                <div className="module-table-inner">
+                    <div className="hexagonal-wrap">
+                        <div className="hexagonal-item">
+                            <div className="bold-font">割り当て設定</div>
+                        </div>
+                        <div className="hexagonal-item">
+                            <div className="hexagonal-flx-auto">
+                                <div className="outline-form">
+                                    <span className="mr10" style={{width: 'auto'}}>単数</span>
+                                    <div className="input-grid mr5" style={{width: '70px'}}>
+                                        <input type="text" className="input-origin block" defaultValue={1}/>
+                                    </div>
+                                    <span className="thin">mm</span>
+                                </div>
+                                <div className="outline-form">
+                                    <span className="mr10" style={{width: 'auto'}}>上下間隔</span>
+                                    <div className="input-grid mr5" style={{width: '70px'}}>
+                                        <input type="text" className="input-origin block" defaultValue={1}/>
+                                    </div>
+                                    <span className="thin">mm</span>
+                                </div>
+                                <div className="outline-form">
+                                    <span className="mr10" style={{width: 'auto'}}>熱水</span>
+                                    <div className="input-grid mr5" style={{width: '70px'}}>
+                                        <input type="text" className="input-origin block" defaultValue={1}/>
+                                    </div>
+                                    <span className="thin">mm</span>
+                                </div>
+                                <div className="outline-form">
+                                    <span className="mr10" style={{width: 'auto'}}>左右間隔</span>
+                                    <div className="input-grid mr5" style={{width: '70px'}}>
+                                        <input type="text" className="input-origin block" defaultValue={300}/>
+                                    </div>
+                                    <span className="thin">mm</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="hexagonal-item">
+                            <div className="hexagonal-flx">
+                                <div className="normal-font">※バッチパネルの種類が1種類の場合にのみ使用できます。</div>
+                                <button className="btn-frame self">北面許可配置登録</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div> */}
             <div className="grid-btn-wrap">
                 <button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>以前</button>
-                <button className="btn-frame modal act" onClick={() => setTabNum(3)}>Next</button>
+                <button className="btn-frame modal mr5">単数指定配置</button>
+                <button className="btn-frame modal mr5">手動配置</button>
+                <button className="btn-frame modal act">設定値に自動配置</button>
             </div>
         </>
     )

src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab03.jsx

@@ -1,137 +0,0 @@
-
-export default function HexagonalRoofTab03({setTabNum}){
-    return(
-        <>
-            <div className="module-table-box mb10">
-                <div className="module-table-inner">
-                    <div className="roof-module-table">
-                        <table>
-                            <thead>
-                                <tr>
-                                    <th style={{width: '70px'}}>
-                                        <div className="d-check-box no-text pop">
-                                            <input type="checkbox" id="ch01" disabled/>
-                                            <label htmlFor="ch01"></label>
-                                        </div>
-                                    </th>
-                                    <th >モジュール</th>
-                                    <th style={{width: '70px'}}>出力 (W)</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td className="al-c">
-                                        <div className="d-check-box no-text pop">
-                                            <input type="checkbox" id="ch02" />
-                                            <label htmlFor="ch02"></label>
-                                        </div>
-                                    </td>
-                                    <td>
-                                        <div className="color-wrap">
-                                            <span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
-                                            <span className="name">Re.RISE-G3 440</span>
-                                        </div>
-                                    </td>
-                                    <td className="al-r">430</td>
-                                </tr>
-                                <tr>
-                                    <td className="al-c">
-                                        <div className="d-check-box no-text pop">
-                                            <input type="checkbox" id="ch03" />
-                                            <label htmlFor="ch03"></label>
-                                        </div>
-                                    </td>
-                                    <td>
-                                        <div className="color-wrap">
-                                            <span className="color-box" style={{backgroundColor: '#67A2AA'}}></span>
-                                            <span className="name">Re.RISE MS-G3 290</span>
-                                        </div>
-                                    </td>
-                                    <td className="al-r">290</td>
-                                </tr>
-                                <tr>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </div>
-            <div className="module-table-box mb10">
-                <div className="module-table-inner">
-                    <div className="hexagonal-wrap">
-                        <div className="hexagonal-item">
-                            <div className="bold-font">配置基準の設定</div>
-                        </div>
-                        <div className="hexagonal-item">
-                            <div className="pop-form-radio">
-                                <div className="d-check-radio pop">
-                                    <input type="radio" name="radio01" id="ra01" />
-                                    <label htmlFor="ra01">南向きに設置す</label>
-                                </div>
-                                <div className="d-check-radio pop">
-                                    <input type="radio" name="radio01" id="ra02" />
-                                    <label htmlFor="ra02">指定した辺を基準に設置する</label>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            {/* <div className="module-table-box">
-                <div className="module-table-inner">
-                    <div className="hexagonal-wrap">
-                        <div className="hexagonal-item">
-                            <div className="bold-font">割り当て設定</div>
-                        </div>
-                        <div className="hexagonal-item">
-                            <div className="hexagonal-flx-auto">
-                                <div className="outline-form">
-                                    <span className="mr10" style={{width: 'auto'}}>単数</span>
-                                    <div className="input-grid mr5" style={{width: '70px'}}>
-                                        <input type="text" className="input-origin block" defaultValue={1}/>
-                                    </div>
-                                    <span className="thin">mm</span>
-                                </div>
-                                <div className="outline-form">
-                                    <span className="mr10" style={{width: 'auto'}}>上下間隔</span>
-                                    <div className="input-grid mr5" style={{width: '70px'}}>
-                                        <input type="text" className="input-origin block" defaultValue={1}/>
-                                    </div>
-                                    <span className="thin">mm</span>
-                                </div>
-                                <div className="outline-form">
-                                    <span className="mr10" style={{width: 'auto'}}>熱水</span>
-                                    <div className="input-grid mr5" style={{width: '70px'}}>
-                                        <input type="text" className="input-origin block" defaultValue={1}/>
-                                    </div>
-                                    <span className="thin">mm</span>
-                                </div>
-                                <div className="outline-form">
-                                    <span className="mr10" style={{width: 'auto'}}>左右間隔</span>
-                                    <div className="input-grid mr5" style={{width: '70px'}}>
-                                        <input type="text" className="input-origin block" defaultValue={300}/>
-                                    </div>
-                                    <span className="thin">mm</span>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="hexagonal-item">
-                            <div className="hexagonal-flx">
-                                <div className="normal-font">※バッチパネルの種類が1種類の場合にのみ使用できます。</div>
-                                <button className="btn-frame self">北面許可配置登録</button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div> */}
-            <div className="grid-btn-wrap">
-                <button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>以前</button>
-                <button className="btn-frame modal mr5">手動配置</button>
-                <button className="btn-frame modal act">設定値に自動配置</button>
-            </div>
-        </>
-    )
-}

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx

@@ -2,6 +2,7 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
 import PlacementGuidePop from "./PlacementGuidePop";
 import RoofingMaterialGudiePop from "./RoofingMaterialGuidePop";
 import Qselect from "@/components/common/select/Qselect";
+
 const SelectOption01 = [
     {name: '瓦53A',}, {name: '瓦53A'}, {name: '瓦53A'}, {name: '瓦53A'}
 ]
@@ -11,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>
@@ -29,7 +29,11 @@ export default function PlacementSettingPop(){
                             <tbody>
                                 <tr>
                                     <th>図面の作成方法</th>
-                                    <td>寸法入力による物品作成</td>
+                                    <td>
+                                        <div className="placement-name-wrap">
+                                            寸法入力による物品作成 <span className="placement-name-guide">※数字は[半角]入力のみ可能です。</span>
+                                        </div>
+                                    </td>
                                 </tr>
                                 <tr>
                                     <th>
@@ -170,12 +174,12 @@ export default function PlacementSettingPop(){
                                             </div>
                                         </div> */}
 
-                                        <div className="placement-roof-btn-wrap">
+                                        {/* <div className="placement-roof-btn-wrap">
                                             <div className="icon-btn-wrap mt10">
                                                 <button className="act" disabled>並列式<i className="allocation01"></i></button>
                                                 <button disabled>カスケード <i className="allocation02"></i></button>
                                             </div>
-                                        </div>
+                                        </div> */}
                                     </td>
                                 </tr>
 
@@ -189,7 +193,6 @@ export default function PlacementSettingPop(){
                 <div className="modal-foot handle"></div>
                 {/* <PlacementGuidePop/>
                 <RoofingMaterialGudiePop/> */}
-            </div>
         </WithDraggable>
     )
 }

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>
     )
 }

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>
     )
 }

src/components/canvas/modal/roofallocation/RoofAllocation.jsx

@@ -1,5 +1,6 @@
 import WithDraggable from "@/components/common/draggable/withDraggable";
 import Qselect from "@/components/common/select/Qselect";
+import PopSpinner from "@/components/common/spinner/PopSpiner";
 
 const SelectOption01 = [
     {name: '瓦53A',}, {name: '瓦53A'}, {name: '瓦53A'}, {name: '瓦53A'}
@@ -10,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>
@@ -23,9 +23,10 @@ export default function RoofAllocation() {
                         ※配置面初期設定で保存した[基本屋根材]を変更したり、屋根材を追加して割り当てることができます。
                     </div>
                     <div className="allocation-select-wrap">
+                        {/* <span>屋根材の選択</span>
                         <div className="grid-select" >
                             <Qselect title={'瓦53A'} option={SelectOption01}/>
-                        </div>
+                        </div> */}
                         <button className="allocation-edit"><i className="edit-ico"></i>屋根材の追加</button>
                     </div>
                     <div className="grid-option-overflow">
@@ -85,12 +86,12 @@ export default function RoofAllocation() {
                                             </div>
                                         </div>
                                     </div>
-                                    <div className="block-box">
+                                    {/* <div className="block-box">
                                         <div className="icon-btn-wrap">
                                             <button className="act">並列式<i className="allocation01"></i></button>
                                             <button>カスケード <i className="allocation02"></i></button>
                                         </div>
-                                    </div>
+                                    </div> */}
                                     
                                 </div>
                             </div>
@@ -152,12 +153,12 @@ export default function RoofAllocation() {
                                             </div>
                                         </div>
                                     </div>
-                                    <div className="block-box">
+                                    {/* <div className="block-box">
                                         <div className="icon-btn-wrap">
                                             <button className="act">並列式<i className="allocation01"></i></button>
                                             <button>カスケード <i className="allocation02"></i></button>
                                         </div>
-                                    </div>
+                                    </div> */}
                                     
                                 </div>
                             </div>
@@ -169,7 +170,6 @@ export default function RoofAllocation() {
                     </div>
                 </div>
                 <div className="modal-foot handle"></div>
-            </div>
         </WithDraggable>
     )
 }

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>
     )
 }

src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab01.jsx

@@ -1,60 +1,158 @@
+import Qselect from "@/components/common/select/Qselect";
 import { useState } from "react";
 
+const SelectOption01 = [
+    {name: '0',}, {name: '0'}, {name: '0'}, {name: '0'}
+]
+
 export default function RoofModuleOptionTab01({setTabNum}){
     const [compasDeg, setCompasDeg] = useState(0);
     return(
         <>
             <div className="properties-setting-wrap">
                 <div className="outline-wrap">
-                    <div className="guide">※シミュレーション計算用方位を指定します。南の方位を設定してください。</div>
-                    <div className="roof-module-compas">
-                        <div className="compas-box">
-                            <div className="compas-box-inner">
-                                <div className={`circle ${compasDeg === 180 ? 'act' : ''}`} onClick={() => setCompasDeg(180)}><i>180°</i></div>
-                                <div className={`circle ${compasDeg === 195 ? 'act' : ''}`} onClick={() => setCompasDeg(195)}></div>
-                                <div className={`circle ${compasDeg === 210 ? 'act' : ''}`} onClick={() => setCompasDeg(210)}></div>
-                                <div className={`circle ${compasDeg === 225 ? 'act' : ''}`} onClick={() => setCompasDeg(225)}></div>
-                                <div className={`circle ${compasDeg === 240 ? 'act' : ''}`} onClick={() => setCompasDeg(240)}></div>
-                                <div className={`circle ${compasDeg === 255 ? 'act' : ''}`} onClick={() => setCompasDeg(255)}></div>
-                                <div className={`circle ${compasDeg === 270 ? 'act' : ''}`} onClick={() => setCompasDeg(270)}><i>-90°</i></div>
-                                <div className={`circle ${compasDeg === 285 ? 'act' : ''}`} onClick={() => setCompasDeg(285)}></div>
-                                <div className={`circle ${compasDeg === 300 ? 'act' : ''}`} onClick={() => setCompasDeg(300)}></div>
-                                <div className={`circle ${compasDeg === 315 ? 'act' : ''}`} onClick={() => setCompasDeg(315)}></div>
-                                <div className={`circle ${compasDeg === 330 ? 'act' : ''}`} onClick={() => setCompasDeg(330)}></div>
-                                <div className={`circle ${compasDeg === 345 ? 'act' : ''}`} onClick={() => setCompasDeg(345)}></div>
-                                <div className={`circle ${compasDeg === 0 ? 'act' : ''}`} onClick={() => setCompasDeg(0)}><i>0°</i></div>
-                                <div className={`circle ${compasDeg === 15 ? 'act' : ''}`} onClick={() => setCompasDeg(15)}></div>
-                                <div className={`circle ${compasDeg === 30 ? 'act' : ''}`} onClick={() => setCompasDeg(30)}></div>
-                                <div className={`circle ${compasDeg === 45 ? 'act' : ''}`} onClick={() => setCompasDeg(45)}></div>
-                                <div className={`circle ${compasDeg === 60 ? 'act' : ''}`} onClick={() => setCompasDeg(60)}></div>
-                                <div className={`circle ${compasDeg === 75 ? 'act' : ''}`} onClick={() => setCompasDeg(75)}></div>
-                                <div className={`circle ${compasDeg === 90 ? 'act' : ''}`} onClick={() => setCompasDeg(90)}><i>90°</i></div>
-                                <div className={`circle ${compasDeg === 105 ? 'act' : ''}`} onClick={() => setCompasDeg(105)}></div>
-                                <div className={`circle ${compasDeg === 120 ? 'act' : ''}`} onClick={() => setCompasDeg(120)}></div>
-                                <div className={`circle ${compasDeg === 135 ? 'act' : ''}`} onClick={() => setCompasDeg(135)}></div>
-                                <div className={`circle ${compasDeg === 150 ? 'act' : ''}`} onClick={() => setCompasDeg(150)}></div>
-                                <div className={`circle ${compasDeg === 165 ? 'act' : ''}`} onClick={() => setCompasDeg(165)}></div>
-                                <div className="compas">
-                                    <div className="compas-arr" style={{transform: `rotate(${compasDeg}deg)`}}></div>
+                    <div className="roof-module-inner">
+                        <div className="compas-wrapper">
+                            <div className="guide">※シミュレーション計算用方位を指定します。南の方位を設定してください。</div>
+                            <div className="roof-module-compas">
+                                <div className="compas-box">
+                                    <div className="compas-box-inner">
+                                        <div className={`circle ${compasDeg === 180 ? 'act' : ''}`} onClick={() => setCompasDeg(180)}><i>180°</i></div>
+                                        <div className={`circle ${compasDeg === 195 ? 'act' : ''}`} onClick={() => setCompasDeg(195)}></div>
+                                        <div className={`circle ${compasDeg === 210 ? 'act' : ''}`} onClick={() => setCompasDeg(210)}></div>
+                                        <div className={`circle ${compasDeg === 225 ? 'act' : ''}`} onClick={() => setCompasDeg(225)}></div>
+                                        <div className={`circle ${compasDeg === 240 ? 'act' : ''}`} onClick={() => setCompasDeg(240)}></div>
+                                        <div className={`circle ${compasDeg === 255 ? 'act' : ''}`} onClick={() => setCompasDeg(255)}></div>
+                                        <div className={`circle ${compasDeg === 270 ? 'act' : ''}`} onClick={() => setCompasDeg(270)}><i>-90°</i></div>
+                                        <div className={`circle ${compasDeg === 285 ? 'act' : ''}`} onClick={() => setCompasDeg(285)}></div>
+                                        <div className={`circle ${compasDeg === 300 ? 'act' : ''}`} onClick={() => setCompasDeg(300)}></div>
+                                        <div className={`circle ${compasDeg === 315 ? 'act' : ''}`} onClick={() => setCompasDeg(315)}></div>
+                                        <div className={`circle ${compasDeg === 330 ? 'act' : ''}`} onClick={() => setCompasDeg(330)}></div>
+                                        <div className={`circle ${compasDeg === 345 ? 'act' : ''}`} onClick={() => setCompasDeg(345)}></div>
+                                        <div className={`circle ${compasDeg === 0 ? 'act' : ''}`} onClick={() => setCompasDeg(0)}><i>0°</i></div>
+                                        <div className={`circle ${compasDeg === 15 ? 'act' : ''}`} onClick={() => setCompasDeg(15)}></div>
+                                        <div className={`circle ${compasDeg === 30 ? 'act' : ''}`} onClick={() => setCompasDeg(30)}></div>
+                                        <div className={`circle ${compasDeg === 45 ? 'act' : ''}`} onClick={() => setCompasDeg(45)}></div>
+                                        <div className={`circle ${compasDeg === 60 ? 'act' : ''}`} onClick={() => setCompasDeg(60)}></div>
+                                        <div className={`circle ${compasDeg === 75 ? 'act' : ''}`} onClick={() => setCompasDeg(75)}></div>
+                                        <div className={`circle ${compasDeg === 90 ? 'act' : ''}`} onClick={() => setCompasDeg(90)}><i>90°</i></div>
+                                        <div className={`circle ${compasDeg === 105 ? 'act' : ''}`} onClick={() => setCompasDeg(105)}></div>
+                                        <div className={`circle ${compasDeg === 120 ? 'act' : ''}`} onClick={() => setCompasDeg(120)}></div>
+                                        <div className={`circle ${compasDeg === 135 ? 'act' : ''}`} onClick={() => setCompasDeg(135)}></div>
+                                        <div className={`circle ${compasDeg === 150 ? 'act' : ''}`} onClick={() => setCompasDeg(150)}></div>
+                                        <div className={`circle ${compasDeg === 165 ? 'act' : ''}`} onClick={() => setCompasDeg(165)}></div>
+                                        <div className="compas">
+                                            <div className="compas-arr" style={{transform: `rotate(${compasDeg}deg)`}}></div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="center-wrap">
+                                <div className="outline-form">
+                                    <div className="d-check-box pop mr10">
+                                        <input type="checkbox" id="ch99" />
+                                        <label htmlFor="ch99">角度変更</label>
+                                    </div>
+                                    <div className="input-grid mr10" style={{width: '60px'}}>
+                                        <input type="text" className="input-origin block" defaultValue={315}/>
+                                    </div>
+                                    <span className="thin" >°</span>
+                                    <span className="thin" >（ -180 〜 180 ）</span>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                    <div className="center-wrap">
-                        <div className="d-check-box pop">
-                            <input type="checkbox" id="ch99" />
-                            <label htmlFor="ch99">角度を直接入力（ -180 〜 180 ）</label>
-                        </div>
-                        <div className="outline-form">
-                            <div className="input-grid mr10" style={{width: '160px'}}>
-                                <input type="text" className="input-origin block" defaultValue={315}/>
+                        <div className="compas-table-wrap">
+                            <div className="compas-table-box mb10">
+                                <div className="outline-form mb10">
+                                    <span className="mr10">モジュールの選択</span>
+                                    <div className="grid-select">
+                                        <Qselect title={'Search'} option={SelectOption01}/>
+                                    </div>
+                                </div>
+                                <div className="roof-module-table">
+                                    <table>
+                                        <thead>
+                                            <tr>
+                                                <th style={{width: '150px'}}>モジュール</th>
+                                                <th>高さ (mm)</th>
+                                                <th>幅 (mm)</th>
+                                                <th>出力 (W)</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td>
+                                                    <div className="color-wrap">
+                                                        <span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
+                                                        <span className="name">Re.RISE-G3 440</span>
+                                                    </div>
+                                                </td>
+                                                <td className="al-r">1134</td>
+                                                <td className="al-r">1722</td>
+                                                <td className="al-r">440</td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="color-wrap">
+                                                        <span className="color-box" style={{backgroundColor: '#67A2AA'}}></span>
+                                                        <span className="name">Re.RISE MS-G3 290</span>
+                                                    </div>
+                                                </td>
+                                                <td className="al-r">1134</td>
+                                                <td className="al-r">1722</td>
+                                                <td className="al-r">440</td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="color-wrap">
+                                                        <span className="color-box" style={{backgroundColor: '#67A2AA'}}></span>
+                                                        <span className="name">Re.RISE MS-G3 290</span>
+                                                    </div>
+                                                </td>
+                                                <td className="al-r">1134</td>
+                                                <td className="al-r">1722</td>
+                                                <td className="al-r">440</td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                            <div className="compas-table-box">
+                                <div className="compas-grid-table">
+                                    <div className="outline-form">
+                                        <span>綿調道区分</span>
+                                        <div className="grid-select">
+                                            <Qselect title={'Ⅲ ∙ Ⅳ'} option={SelectOption01}/>
+                                        </div>
+                                    </div>
+                                    <div className="outline-form">
+                                        <span>設置高さ</span>
+                                        <div className="input-grid mr10" >
+                                            <input type="text" className="input-origin block" defaultValue={13}/>
+                                        </div>
+                                        <span className="thin">m</span>
+                                    </div>
+                                    <div className="outline-form">
+                                        <span>基準風速</span>
+                                        <div className="grid-select">
+                                            <Qselect title={'32'} option={SelectOption01}/>
+                                        </div>
+                                    </div>
+                                    <div className="outline-form">
+                                        <span>垂直積雪量</span>
+                                        <div className="input-grid mr10" >
+                                            <input type="text" className="input-origin block" defaultValue={13}/>
+                                        </div>
+                                        <span className="thin">cm</span>
+                                    </div>
+                                </div>
                             </div>
-                            <span className="thin" >°</span>
                         </div>
                     </div>
                 </div>
             </div>
             <div className="grid-btn-wrap">
+                <button className="btn-frame modal mr5">保存</button>
                 <button className="btn-frame modal act" onClick={() => setTabNum(2)}>Next</button>
             </div>
         </>

src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab02.jsx

@@ -9,112 +9,6 @@ export default function RoofModuleOptionTab02({setTabNum}){
     return(
         <>
         <div className="roof-module-tab2-overflow">
-            <div className="module-table-flex-wrap mb10">
-                <div className="module-table-box">
-                    <div className="module-table-inner">
-                        <div className="outline-form mb10">
-                            <span className="mr10">モジュールの選択</span>
-                            <div className="grid-select">
-                                <Qselect title={'Search'} option={SelectOption01}/>
-                            </div>
-                        </div>
-                        
-                        <div className="roof-module-table">
-                            <table>
-                                <thead>
-                                    <tr>
-                                        <th style={{width: '150px'}}>モジュール</th>
-                                        <th>高さ (mm)</th>
-                                        <th>幅 (mm)</th>
-                                        <th>出力 (W)</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>
-                                            <div className="color-wrap">
-                                                <span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
-                                                <span className="name">Re.RISE-G3 440</span>
-                                            </div>
-                                        </td>
-                                        <td className="al-r">1134</td>
-                                        <td className="al-r">1722</td>
-                                        <td className="al-r">440</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <div className="color-wrap">
-                                                <span className="color-box" style={{backgroundColor: '#67A2AA'}}></span>
-                                                <span className="name">Re.RISE MS-G3 290</span>
-                                            </div>
-                                        </td>
-                                        <td className="al-r">1134</td>
-                                        <td className="al-r">1722</td>
-                                        <td className="al-r">440</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
-                </div>
-                <div className="module-table-box none-flex"> 
-                    <div className="module-table-inner">
-                        <div className="eaves-keraba-table">
-                            <div className="eaves-keraba-item">
-                                <div className="eaves-keraba-th">
-                                    綿調道区分
-                                </div>
-                                <div className="eaves-keraba-td">
-                                    <div className="outline-form">
-                                        <div className="grid-select">
-                                            <Qselect title={'Ⅲ ∙ Ⅳ'} option={SelectOption01}/>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="eaves-keraba-item">
-                                <div className="eaves-keraba-th">
-                                    設置高さ
-                                </div>
-                                <div className="eaves-keraba-td">
-                                    <div className="outline-form">
-                                        <div className="grid-select mr10">
-                                            <Qselect title={'13'} option={SelectOption01}/>
-                                        </div>
-                                        <span className="thin">m</span>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="eaves-keraba-item">
-                                <div className="eaves-keraba-th">
-                                    基準風速
-                                </div>
-                                <div className="eaves-keraba-td">
-                                    <div className="outline-form">
-                                        <div className="grid-select mr10">
-                                            <Qselect title={'32'} option={SelectOption01}/>
-                                        </div>
-                                        <span className="thin">m/s</span>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="eaves-keraba-item">
-                                <div className="eaves-keraba-th">
-                                    基準積雪量
-                                </div>
-                                <div className="eaves-keraba-td">
-                                    <div className="outline-form">
-                                        <div className="grid-select mr10">
-                                            <Qselect title={'13'} option={SelectOption01}/>
-                                        </div>
-                                        <span className="thin">cm</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
             <div className="module-table-box mb10"> 
                 <div className="module-box-tab">
                     <button className="module-btn act">屋根材1</button>
@@ -123,9 +17,12 @@ export default function RoofModuleOptionTab02({setTabNum}){
                     <button className="module-btn">屋根材4</button>
                 </div>
                 <div className="module-table-inner">
+                    <div className="module-flex-item-tit-wrap">
+                        <div className="module-flex-item-tit">屋根材：スレーツ（4寸）</div>
+                        <button className="btn-frame roof">架台保存</button>
+                    </div>
                     <div className="module-table-flex-wrap tab2">
                         <div className="module-flex-item">
-                            <div className="module-flex-item-tit">屋根材：スレーツ（4寸）</div>
                             <div className="eaves-keraba-table">
                                 {/* <div className="eaves-keraba-item">
                                     <div className="eaves-keraba-th">
@@ -145,16 +42,6 @@ export default function RoofModuleOptionTab02({setTabNum}){
                                         </div>
                                     </div>
                                 </div> */}
-                                <div className="eaves-keraba-item">
-                                    <div className="eaves-keraba-th">
-                                        マンドンピッチ
-                                    </div>
-                                    <div className="eaves-keraba-td">
-                                        <div className="grid-select">
-                                            <Qselect title={'屋根技術研究所'} option={SelectOption01}/>
-                                        </div>
-                                    </div>
-                                </div>
                                 <div className="eaves-keraba-item">
                                     <div className="eaves-keraba-th">
                                         垂木の間隔
@@ -208,17 +95,45 @@ export default function RoofModuleOptionTab02({setTabNum}){
                             <div className="grid-check-form-block">
                                 <div className="d-check-box pop">
                                     <input type="checkbox" id="ch01" />
-                                    <label htmlFor="ch01">庇力バーの設置庇力バーの設置庇力バーの設置庇力バーの設置</label>
+                                    <label htmlFor="ch01">軒カバーの設置</label>
                                 </div>
                                 <div className="d-check-box pop">
                                     <input type="checkbox" id="ch02" />
-                                    <label htmlFor="ch02">目幕金具の設置目幕金具の設置目幕金具の設置目幕金具の設置</label>
+                                    <label htmlFor="ch02">落雪防止金具設置</label>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
+            <div className="module-table-box mb10">
+                <div className="module-table-inner">
+                    <div className="module-area">
+                        <div className="module-area-title">モジュール配置領域</div>
+                        <div className="outline-form mr15">
+                            <span>軒側</span>
+                            <div className="input-grid mr10" >
+                                <input type="text" className="input-origin block" defaultValue={13}/>
+                            </div>
+                            <span className="thin">mm</span>
+                        </div>
+                        <div className="outline-form mr15">
+                            <span>棟側</span>
+                            <div className="input-grid mr10" >
+                                <input type="text" className="input-origin block" defaultValue={13}/>
+                            </div>
+                            <span className="thin">mm</span>
+                        </div>
+                        <div className="outline-form ">
+                            <span>けらぱ</span>
+                            <div className="input-grid mr10" >
+                                <input type="text" className="input-origin block" defaultValue={13}/>
+                            </div>
+                            <span className="thin">mm</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
             <div className="module-bottom">
                 <div className="module-table-box ">
                     <div className="warning-guide">

src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab03.jsx

@@ -3,8 +3,8 @@ export default function RoofModuleOptionTab03({setTabNum}){
 
     return(
         <>
-            <div className="module-table-flex-wrap mb10">
-                <div className="module-table-box">
+            <div className="module-table-block-wrap">
+                <div className="module-table-box mb10">
                     <div className="module-table-inner">
                         <div className="roof-module-table">
                             <table>
@@ -17,7 +17,10 @@ export default function RoofModuleOptionTab03({setTabNum}){
                                             </div>
                                         </th>
                                         <th >モジュール</th>
-                                        <th style={{width: '70px'}}>出力 (W)</th>
+                                        <th style={{width: '70px'}}>Max単数</th>
+                                        <th style={{width: '100px'}}>混合Max単数</th>
+                                        <th style={{width: '80px'}}>単数</th>
+                                        <th style={{width: '80px'}}>熱水</th>
                                     </tr>
                                 </thead>
                                 <tbody>
@@ -34,7 +37,18 @@ export default function RoofModuleOptionTab03({setTabNum}){
                                                 <span className="name">Re.RISE-G3 440</span>
                                             </div>
                                         </td>
-                                        <td className="al-r">430</td>
+                                        <td className="al-r">00</td>
+                                        <td className="al-r">00</td>
+                                        <td className="al-r">
+                                            <div className="input-grid" >
+                                                <input type="text" className="input-origin block" defaultValue={13}/>
+                                            </div>
+                                        </td>
+                                        <td className="al-r">
+                                            <div className="input-grid" >
+                                                <input type="text" className="input-origin block" defaultValue={13}/>
+                                            </div>
+                                        </td>
                                     </tr>
                                     <tr>
                                         <td className="al-c">
@@ -49,12 +63,26 @@ export default function RoofModuleOptionTab03({setTabNum}){
                                                 <span className="name">Re.RISE MS-G3 290</span>
                                             </div>
                                         </td>
-                                        <td className="al-r">290</td>
+                                        <td className="al-r">00</td>
+                                        <td className="al-r">00</td>
+                                        <td className="al-r">
+                                            <div className="input-grid" >
+                                                <input type="text" className="input-origin block" defaultValue={13}/>
+                                            </div>
+                                        </td>
+                                        <td className="al-r">
+                                            <div className="input-grid" >
+                                                <input type="text" className="input-origin block" defaultValue={13}/>
+                                            </div>
+                                        </td>
                                     </tr>
                                     <tr>
                                         <td></td>
                                         <td></td>
                                         <td></td>
+                                        <td></td>
+                                        <td></td>
+                                        <td></td>
                                     </tr>
                                 </tbody>
                             </table>
@@ -63,56 +91,53 @@ export default function RoofModuleOptionTab03({setTabNum}){
                 </div>
                 <div className="module-table-box"> 
                     <div className="module-table-inner">
-                        <div className="self-table-tit">設置形態を選択してくださ</div>
-                        <div className="module-self-table">
-                            <div className="self-table-item">
-                                <div className="self-item-th">水鳥の配置</div>
-                                <div className="self-item-td">
-                                    <div className="pop-form-radio">
-                                        <div className="d-check-radio pop">
-                                            <input type="radio" name="radio01" id="ra01" disabled/>
-                                            <label htmlFor="ra01">する</label>
-                                        </div>
-                                        <div className="d-check-radio pop">
-                                            <input type="radio" name="radio01" id="ra02" />
-                                            <label htmlFor="ra02">しない。</label>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="self-table-item">
-                                <div className="self-item-th">配置基準</div>
-                                <div className="self-item-td">
-                                    <div className="pop-form-radio">
-                                        <div className="d-check-radio pop">
-                                            <input type="radio" name="radio02" id="ra03" />
-                                            <label htmlFor="ra03">中央配置</label>
-                                        </div>
-                                        <div className="d-check-radio pop">
-                                            <input type="radio" name="radio02" id="ra04" />
-                                            <label htmlFor="ra04">軒側</label>
-                                        </div>
-                                        <div className="d-check-radio pop">
-                                            <input type="radio" name="radio02" id="ra05" />
-                                            <label htmlFor="ra05">龍丸側</label>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="self-table-flx">
-                            <div className="d-check-box pop">
-                                <input type="checkbox" id="ch04" />
-                                <label htmlFor="ch04">最大配置する。</label>
-                            </div>
+                        <div className="self-table-tit">設置形態を選択してください。</div>
+                        <div className="roof-module-table self">
+                            <table>
+                                <thead>
+                                    <tr>
+                                        <th >千鳥配置</th>
+                                        <th >配置基準</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td className="al-c">
+                                            <div className="self-table-radio">
+                                                <div className="d-check-radio pop mr10">
+                                                    <input type="radio" name="radio02" id="ra03" />
+                                                    <label htmlFor="ra03">する</label>
+                                                </div>
+                                                <div className="d-check-radio pop">
+                                                    <input type="radio" name="radio02" id="ra04" />
+                                                    <label htmlFor="ra04">しない</label>
+                                                </div>
+                                            </div>
+                                        </td>
+                                        <td className="al-c">
+                                            <div className="self-table-radio">
+                                                <div className="d-check-radio pop mr10">
+                                                    <input type="radio" name="radio03" id="ra05" />
+                                                    <label htmlFor="ra05">軒側</label>
+                                                </div>
+                                                <div className="d-check-radio pop">
+                                                    <input type="radio" name="radio03" id="ra06" />
+                                                    <label htmlFor="ra06">棟側</label>
+                                                </div>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
                         </div>
                     </div>
                 </div>
             </div>
             <div className="grid-btn-wrap">
                 <button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>以前</button>
+                <button className="btn-frame modal mr5">単数指定配置</button>
                 <button className="btn-frame modal mr5">手動配置</button>
-                <button className="btn-frame modal act">設定値に自動配置</button>
+                <button className="btn-frame modal act">自動配置</button>
             </div>
         </>
     )

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
       )}
     </>

src/components/common/spinner/PopSpiner.jsx

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

src/components/publishpage/PublishPage.jsx

@@ -266,16 +266,29 @@ export default function PublishPage() {
                     <li>*팝업 공통 양 사이드바 추가</li>
                     <li>*회로설정 팝업 승압설정 영역 수정</li>
                   </ul> */}
-                  <ul className='mb10'>
+                  {/* <ul className='mb10'>
                     <li>2025-02-19</li>
                     <li>*배치면 선 속성 설정 팝업 버튼 추가</li>
                   </ul>
-                  <ul>
+                  <ul className='mb10'>
                     <li>2025-02-27</li>
                     <li>*오브젝트 배치 팝업 명칭 및 숫자 변경, 이미지 변경</li>
                     <li>*지붕재 추가 상단 타이틀 제거 버튼 추가</li>
                     <li>*면형상 배치 1번 이미지 교체</li>
                   </ul>
+                  <ul className='mb10'>
+                    <li>2025-03-13</li>
+                    <li>* popup spinner 추가</li>
+                  </ul> */}
+                  <ul className='mb10'>
+                    <li>2025-03-14</li>
+                    <li>* 회로설정 팝업 마지막 셀렉트 추가</li>
+                  </ul>
+                  <ul className='mb10'>
+                    <li>2025-03-18</li>
+                    <li>* 지붕모듈 팝업 및 육지붕 모듈 팝업 수정</li>
+                    <li>* 캔버스 메뉴 앞 데이터 명 추가</li>
+                  </ul>
                 </td>
                 <td className="t-center">2024-10-28</td>
               </tr>

src/styles/_canvasside.scss

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

src/styles/_contents.scss

@@ -340,6 +340,14 @@
         &.active{
             top: calc(92.8px + 50px);
         }
+        .canvas-id{
+            display: flex;
+            align-items: center;
+            padding: 9.6px 20px;
+            font-size: 12px;
+            color: #fff;
+            background-color: #777777;
+        }
         .canvas-plane-wrap{
             display: flex;
             align-items: center;

src/styles/_modal.scss

@@ -904,6 +904,8 @@ $alert-color: #101010;
     .allocation-edit{
         display: flex;
         align-items: center;
+        justify-content: center;
+        width: 100%;
         height: 30px;
         padding: 0 10px;
         margin-left: 5px;
@@ -912,6 +914,7 @@ $alert-color: #101010;
         font-weight: $pop-normal-weight;
         border: 1px solid #484848;
         background-color: #323234;
+        transition: background-color .13s ease-in-out;
         i{
             display: block;
             width: 12px;
@@ -920,6 +923,9 @@ $alert-color: #101010;
             background: url(../../public/static/images/canvas/allocation_edit.svg)no-repeat center;
             background-size: cover;
         }
+        &:hover{
+            background-color: #464545;
+        }
     }
 }
 
@@ -1307,13 +1313,13 @@ $alert-color: #101010;
     
     .circle {
         position: absolute;
-        width: 12px;
-        height: 12px;
+        width: 10px;
+        height: 10px;
         border: 1px solid #fff;
         border-radius: 50%;
-        top: 95%;
+        top: 88%;
         left: 50%;
-        transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */
+        transform-origin: 0 -76px; /* 중심에서 반지름 거리만큼 떨어져 위치 */
         cursor:pointer;
         z-index: 3;
         /* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */
@@ -1360,8 +1366,8 @@ $alert-color: #101010;
                 top: 50%;
                 left: 50%;
                 transform: translate(-50%, -50%);
-                width: 5px;
-                height: 5px;
+                width: 4px;
+                height: 4px;
                 background-color: #fff;
                 border-radius: 50%;
             }
@@ -1375,15 +1381,15 @@ $alert-color: #101010;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        width: 148px;
-        height: 148px;
+        width: 121px;
+        height: 121px;
         border: 4px solid #fff;
         border-radius: 50%;
         .compas-arr{
             width: 100%;
             height: 100%;
             background: url(../../public/static/images/canvas/compas.svg)no-repeat center;
-            background-size: 122px 122px;
+            background-size: 100px 100px;
         }
     }
 }
@@ -1435,10 +1441,10 @@ $alert-color: #101010;
 .roof-module-compas{
     margin-bottom: 24px;
     .compas-box-inner{
-        width: 280px;
-        height: 253px;
+        width: 235px;
+        height: 215px;
         .circle{
-            top: 86%;
+            top: 85%;
             // &:nth-child(1),
             // &:nth-child(7),
             // &:nth-child(13),
@@ -1455,7 +1461,7 @@ $alert-color: #101010;
             //     }
             // }
             i{
-                top: 22px;
+                top: 19px;
             }
             &.act{
                 i{color: #8B8B8B;}
@@ -1725,10 +1731,14 @@ $alert-color: #101010;
 }
 .circuit-title-sel{
     padding-bottom: 14px;
-    .outline-form{
-        span{
-            color: #62C207;
-        }
+    .circuit-title{
+        font-size: 12px;
+        color: #62C207;
+        margin-bottom: 5px;
+    }
+    .circuit-sel-wrap{
+        display: flex;
+        align-items: center;
         .grid-select{
             .sort-select{
                 border: 1px solid #4E9E04;
@@ -2162,17 +2172,13 @@ $alert-color: #101010;
     &.tab2{
         margin-top: 10px;
         gap: 15px;
-        
+        .eaves-keraba-table{
+            margin-top: 0;
+        }
     }
     .module-flex-item{
         flex: 1;
-        .module-flex-item-tit{
-            font-size: 12px;
-            font-weight: 500;
-            color: #fff;
-            padding-bottom: 10px;
-            border-bottom: 1px solid #4D4D4D;
-        }
+
         .flex-item-btn-wrap{
             display: grid;
             grid-template-columns: repeat(2, 1fr);
@@ -2184,11 +2190,24 @@ $alert-color: #101010;
             flex-direction: column;
             justify-content: flex-start;
             flex: none;
-            padding-top: 27.5px;
             width: 260px;
         }
     }
 }
+.module-flex-item-tit-wrap{
+    display: flex;
+    align-items: center;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #4D4D4D;
+    .module-flex-item-tit{
+        font-size: 12px;
+        font-weight: 500;
+        color: #fff;
+    }
+    button{
+        margin-left: auto;
+    }
+}
 
 .module-table-box{
     .module-table-inner{
@@ -2218,3 +2237,138 @@ $alert-color: #101010;
         justify-content: flex-end;
     }
 }
+
+.pop-spinner{
+    position: absolute;
+    bottom: 10px;
+    left: 5px;
+    width: calc(100% - 10px);
+    height: calc(100% - 49px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba($color: #101010, $alpha: 0.5);
+    z-index: 2000000;
+    .loader {
+        font-size: 10px;
+        width: 1.2em;
+        height: 1.2em;
+        border-radius: 50%;
+        position: relative;
+        text-indent: -9999em;
+        animation: mulShdSpin 1.1s infinite ease;
+        transform: translateZ(0);
+    }
+        @keyframes mulShdSpin {
+            0%,
+            100% {
+            box-shadow: 0em -2.6em 0em 0em #fff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
+            }
+            12.5% {
+            box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #fff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
+            }
+            25% {
+            box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #fff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+            }
+            37.5% {
+            box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #fff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+            }
+            50% {
+            box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #fff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+            }
+            62.5% {
+            box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #fff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+            }
+            75% {
+            box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #fff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+            }
+            87.5% {
+            box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #fff;
+            }
+        }
+}
+
+.roof-module-inner{
+    display: flex;
+    .compas-wrapper{
+        position: relative;
+        flex: none;
+        width: 300px;
+        padding-right: 15px;
+        &:before{
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 10px;
+            width: 1px;
+            height: 100%;
+            background-color: #424242;
+        }
+    }
+    .compas-table-wrap{
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+
+        
+    }
+    .compas-table-box{
+        background-color: #3D3D3D;
+        padding: 10px;
+        .outline-form{
+            span{
+                width: auto;
+            }
+        }
+        .compas-grid-table{
+            display: grid;
+            gap: 10px;
+            grid-template-columns: repeat(2, 1fr);
+            .outline-form{
+                span{
+                    width: 65px;
+                    &.thin{
+                        width: 20px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.module-table-block-wrap{
+    .roof-module-table{
+        &.self{
+            table{
+                table-layout: fixed;
+            }
+        }
+    }
+    .self-table-radio{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}
+
+.module-area{
+    display: flex;
+    align-items: center;
+    .module-area-title{
+        flex: none;
+        font-size: 12px;
+        color: #fff;
+        font-weight: 500;
+        margin-right: 20px;
+    }
+    .outline-form{
+        flex: 1;
+    }
+}
+
+.placement-name-guide{
+    font-size: 11px;
+    margin-left: 10px;
+    color: #53a7eb;
+    font-weight: 500;
+}

src/styles/_reset.scss

@@ -222,7 +222,7 @@ button{
         padding: 0 10px;
         line-height: 28px;
         font-family: 'Noto Sans JP', sans-serif;
-        background-color: transparent;
+        background-color: #353535;
         border: 1px solid #484848;
         color: #fff;
         &.blue{
@@ -245,9 +245,9 @@ button{
         }
         &:hover{
             font-weight: 400;
-            background-color: transparent;
-            border: 1px solid #484848;
-            color: #fff;
+            background-color: #fff;
+            border: 1px solid #fff;
+            color: #101010;
         }
     }
     &.self{