배치면 초기 수정 팝업 수정

src/app/canvas/page.jsx

@@ -6,10 +6,10 @@ import GridCopy from '@/components/canvas/modal/gridoption/GridCopy'
 import GridMove from '@/components/canvas/modal/gridoption/GridMove'
 import GridOption from '@/components/canvas/modal/gridoption/GridOption'
 import OuterLineWall from '@/components/canvas/modal/outerlinesetting/OuterLineWall'
-import PlacementGuide from '@/components/canvas/modal/placementsetting/PlacementGuide'
+import PlacementGuidePop from '@/components/canvas/modal/placementsetting/PlacementGuidePop'
 import PlacementSettingPop from '@/components/canvas/modal/placementsetting/PlacementSettingPop'
+import RoofingMaterialGudiePop from '@/components/canvas/modal/placementsetting/RoofingMaterialGuidePop'
 import SettingModal01 from '@/components/canvas/modal/settoing01/SettingModal01'
-import Footer from '@/components/layout/Footer'
 import Header from '@/components/layout/Header'
 import { modalState } from '@/store/modalAtom'
 import '@/styles/contents.scss'
@@ -30,10 +30,12 @@ export default function CanvasPage() {
                     </div>
                     {/* 배치면 초기 설정 */}
                     <PlacementSettingPop/>
-                    <PlacementGuide/>
+                    <PlacementGuidePop/>
+                    <RoofingMaterialGudiePop/>
 
                     {/* 캔버스 기본 셋팅 */}
                     {/* {modalOption.option && <SettingModal01/>} */}
+
                     {/* 점·선 그리드 설정 */}
                     {/* {modalOption.gridoption && <GridOption/>} */}
                     {/* {modalOption.gridcopy && <GridCopy/>} */}

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

@@ -1,6 +1,6 @@
 import WithDraggable from "@/components/common/draggable/withDraggable";
 
-export default function PlacementGuide(){
+export default function PlacementGuidePop(){
 
     return(
         <WithDraggable isShow={true}>

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

@@ -0,0 +1,18 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+
+export default function RoofingMaterialGudiePop(){
+
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap ssm`}>
+                <div className="modal-head">
+                    <h1 className="title">屋根材選択案内</h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="modal-guide">対応可能な屋根材や足場は限定されますので、必ず事前マニュアルをご確認ください。</div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}

src/styles/_modal.scss

@@ -115,6 +115,12 @@
             }
         }
     }
+    .modal-guide{
+        display: block;
+        font-size: 12px;
+        color: #fff;
+        font-weight: 400;
+    }
 }
 
 .adsorption-point{