diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx
index 355ef39..2b28ae4 100644
--- a/src/app/canvas/page.jsx
+++ b/src/app/canvas/page.jsx
@@ -2,6 +2,7 @@
 
 import CanvasLayout from '@/components/canvas/CanvasLayout'
 import CanvasMenu from '@/components/canvas/CanvasMenu'
+import ArrangementSetting from '@/components/canvas/modal/arrangementsetting/ArrangementSetting'
 import AuxiliarylineOption from '@/components/canvas/modal/auxiliarylineoprion/AuxiliarylineOption'
 import AuxiliaryCopy from '@/components/canvas/modal/auxiliarysupport/AuxiliaryCopy'
 import AuxiliaryMove from '@/components/canvas/modal/auxiliarysupport/AuxiliaryMove'
@@ -19,6 +20,7 @@ import PropertiesSetting from '@/components/canvas/modal/propertiessetting/Prope
 import RoofAllocation from '@/components/canvas/modal/roofallocation/RoofAllocation'
 import RoofShapeOption from '@/components/canvas/modal/roofshapeoption/RoofShapeOption'
 import SettingModal01 from '@/components/canvas/modal/settoing01/SettingModal01'
+import SlopeOption from '@/components/canvas/modal/slopeoption/SlopeOption'
 import Header from '@/components/layout/Header'
 import { modalState } from '@/store/modalAtom'
 import '@/styles/contents.scss'
@@ -78,7 +80,13 @@ export default function CanvasPage() {
                     {/* <AuxiliaryCopy/> */}
 
                     {/* 지붕면 할당 */}
-                    <RoofAllocation/>
+                    {/* <RoofAllocation/> */}
+
+                    {/* 경사 설정 */}
+                    {/* <SlopeOption/> */}
+
+                    {/* 배치면 그리기 */}
+                    <ArrangementSetting/>
                 </div>
             </div>
         </div>
diff --git a/src/components/canvas/modal/arrangementsetting/ArrangementSetting.jsx b/src/components/canvas/modal/arrangementsetting/ArrangementSetting.jsx
new file mode 100644
index 0000000..2250964
--- /dev/null
+++ b/src/components/canvas/modal/arrangementsetting/ArrangementSetting.jsx
@@ -0,0 +1,68 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+import { useState } from "react";
+import ArrangementTab01 from "./ArrangementTab01";
+import ArrangementTab02 from "./ArrangementTab02";
+import ArrangementTab03 from "./ArrangementTab03";
+import ArrangementTab04 from "./ArrangementTab04";
+import ArrangementTab05 from "./ArrangementTab05";
+
+export default function ArrangementSetting(){
+    const [buttonAct, setButtonAct] = useState(1);
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap r`}>
+                <div className="modal-head">
+                    <h1 className="title">配置面の描画</h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="modal-btn-wrap">
+                        <button 
+                        className={`btn-frame modal ${buttonAct === 1 ? 'act' : ''}`} 
+                        onClick={() => setButtonAct(1)}
+                        >
+                            直線
+                        </button>
+                        <button 
+                        className={`btn-frame modal ${buttonAct === 2 ? 'act' : ''}`} 
+                        onClick={() => setButtonAct(2)}
+                        >
+                            直角
+                        </button>
+                        <button 
+                        className={`btn-frame modal ${buttonAct === 3 ? 'act' : ''}`} 
+                        onClick={() => setButtonAct(3)}
+                        >
+                            イ・グベ
+                        </button>
+                        <button 
+                        className={`btn-frame modal ${buttonAct === 4 ? 'act' : ''}`} 
+                        onClick={() => setButtonAct(4)}
+                        >
+                            角度
+                        </button>
+                        <button 
+                        className={`btn-frame modal ${buttonAct === 5 ? 'act' : ''}`} 
+                        onClick={() => setButtonAct(5)}
+                        >
+                            対角線
+                        </button>
+                    </div>
+                    <div className="properties-setting-wrap outer">
+                        <div className="setting-tit">設定</div>
+                        {buttonAct === 1 && <ArrangementTab01/>}
+                        {buttonAct === 2 && <ArrangementTab02/>}
+                        {buttonAct === 3 && <ArrangementTab03/>}
+                        {buttonAct === 4 && <ArrangementTab04/>}
+                        {buttonAct === 5 && <ArrangementTab05/>}
+                    </div>
+                    
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal mr5">一変戦に戻る</button>
+                        <button className="btn-frame modal act">外壁線確定</button>
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/arrangementsetting/ArrangementTab01.jsx b/src/components/canvas/modal/arrangementsetting/ArrangementTab01.jsx
new file mode 100644
index 0000000..b073aa1
--- /dev/null
+++ b/src/components/canvas/modal/arrangementsetting/ArrangementTab01.jsx
@@ -0,0 +1,24 @@
+export default function ArrangementTab01(){
+    return(
+        <div className="outline-wrap">
+            <div className="outline-inner">
+                <div className="outline-form">
+                    <span className="mr10">長さ(mm)</span>
+                    <div className="input-grid" style={{width: '63px'}}>
+                        <input type="text" className="input-origin block" defaultValue={100}/>
+                    </div>
+                    <button className="reset-btn"></button>
+                </div>
+                <div className="outline-form">
+                    <span>方向 (矢印)</span>
+                    <div className="grid-direction">
+                        <button className="direction up"></button>
+                        <button className="direction down act"></button>
+                        <button className="direction left"></button>
+                        <button className="direction right"></button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/arrangementsetting/ArrangementTab02.jsx b/src/components/canvas/modal/arrangementsetting/ArrangementTab02.jsx
new file mode 100644
index 0000000..01cc669
--- /dev/null
+++ b/src/components/canvas/modal/arrangementsetting/ArrangementTab02.jsx
@@ -0,0 +1,42 @@
+export default function ArrangementTab02(){
+    return(
+        <div className="outline-wrap">
+            <div className="outline-inner">
+                <div className="outline-form">
+                    <span className="mr10">長さ(mm)</span>
+                    <div className="input-grid" style={{width: '63px'}}>
+                        <input type="text" className="input-origin block" defaultValue={1000}/>
+                    </div>
+                    <button className="reset-btn"></button>
+                </div>
+                <div className="outline-form">
+                    <span>方向 (矢印)</span>
+                    <div className="grid-direction">
+                        <button className="direction up"></button>
+                        <button className="direction down act"></button>
+                        <button className="direction left"></button>
+                        <button className="direction right"></button>
+                    </div>
+                </div>
+            </div>
+            <div className="outline-inner">
+                <div className="outline-form">
+                    <span className="mr10">長さ(mm)</span>
+                    <div className="input-grid" style={{width: '63px'}}>
+                        <input type="text" className="input-origin block" defaultValue={1000}/>
+                    </div>
+                    <button className="reset-btn"></button>
+                </div>
+                <div className="outline-form">
+                    <span>方向 (矢印)</span>
+                    <div className="grid-direction">
+                        <button className="direction up"></button>
+                        <button className="direction down act"></button>
+                        <button className="direction left"></button>
+                        <button className="direction right"></button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/arrangementsetting/ArrangementTab03.jsx b/src/components/canvas/modal/arrangementsetting/ArrangementTab03.jsx
new file mode 100644
index 0000000..d84a4c2
--- /dev/null
+++ b/src/components/canvas/modal/arrangementsetting/ArrangementTab03.jsx
@@ -0,0 +1,64 @@
+export default function ArrangementTab03(){
+    return(
+        <>
+            <div className="outline-wrap">
+                <div className="outline-inner">
+                    <div className="outline-form">
+                        <span className="mr10">角度</span>
+                        <div className="input-grid" style={{width: '63px'}}>
+                            <input type="text" className="input-origin block" defaultValue={4}/>
+                        </div>
+                        <button className="reset-btn"></button>
+                    </div>
+                </div>
+                <div className="outline-inner">
+                    <div className="outline-form">
+                        <span className="mr10">長さ(mm)</span>
+                        <div className="input-grid" style={{width: '63px'}}>
+                            <input type="text" className="input-origin block" defaultValue={5000}/>
+                        </div>
+                        <button className="reset-btn"></button>
+                    </div>
+                    <div className="outline-form">
+                        <span>方向 (矢印)</span>
+                        <div className="grid-direction">
+                            <button className="direction up"></button>
+                            <button className="direction down act"></button>
+                            <button className="direction left"></button>
+                            <button className="direction right"></button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className="outline-wrap">
+                <div className="outline-inner">
+                    <div className="outline-form">
+                        <span className="mr10">角度</span>
+                        <div className="input-grid" style={{width: '63px'}}>
+                            <input type="text" className="input-origin block" defaultValue={6}/>
+                        </div>
+                        <button className="reset-btn"></button>
+                    </div>
+                </div>
+                <div className="outline-inner">
+                    <div className="outline-form">
+                        <span className="mr10">長さ(mm)</span>
+                        <div className="input-grid" style={{width: '63px'}}>
+                            <input type="text" className="input-origin block" defaultValue={3000}/>
+                        </div>
+                        <button className="reset-btn"></button>
+                    </div>
+                    <div className="outline-form">
+                        <span>方向 (矢印)</span>
+                        <div className="grid-direction">
+                            <button className="direction up"></button>
+                            <button className="direction down act"></button>
+                            <button className="direction left"></button>
+                            <button className="direction right"></button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/arrangementsetting/ArrangementTab04.jsx b/src/components/canvas/modal/arrangementsetting/ArrangementTab04.jsx
new file mode 100644
index 0000000..c0096f4
--- /dev/null
+++ b/src/components/canvas/modal/arrangementsetting/ArrangementTab04.jsx
@@ -0,0 +1,29 @@
+import Image from "next/image";
+
+export default function ArrangementTab04(){
+    return(
+        <div className="outline-wrap">
+            <div className="cul-wrap">
+                <div className="outline-box">
+                    <div className="outline-form">
+                        <span className="mr10">角度</span>
+                        <div className="input-grid" style={{width: '63px'}}>
+                            <input type="text" className="input-origin block" defaultValue={4}/>
+                        </div>
+                        <button className="reset-btn"></button>
+                    </div>
+                    <div className="outline-form">
+                        <span className="mr10">長さ(mm)</span>
+                        <div className="input-grid" style={{width: '63px'}}>
+                            <input type="text" className="input-origin block" defaultValue={5000}/>
+                        </div>
+                        <button className="reset-btn"></button>
+                    </div>
+                </div>
+                <div className="cul-box">
+                    <Image src="/static/images/canvas/outline_cul.svg" alt="react" width={70} height={59} />
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/arrangementsetting/ArrangementTab05.jsx b/src/components/canvas/modal/arrangementsetting/ArrangementTab05.jsx
new file mode 100644
index 0000000..00832ab
--- /dev/null
+++ b/src/components/canvas/modal/arrangementsetting/ArrangementTab05.jsx
@@ -0,0 +1,52 @@
+export default function ArrangementTab05(){
+    return(
+        <>
+            <div className="outline-wrap">
+                <div className="outline-inner">
+                    <div className="outline-form">
+                        <span className="mr10">対角線の<br/>長さ(mm)</span>
+                        <div className="input-grid" style={{width: '63px'}}>
+                            <input type="text" className="input-origin block" defaultValue={1000}/>
+                        </div>
+                        <button className="reset-btn"></button>
+                    </div>
+                </div>
+                <div className="outline-inner">
+                    <div className="outline-form">
+                        <span className="mr10">長さ(mm)</span>
+                        <div className="input-grid" style={{width: '63px'}}>
+                            <input type="text" className="input-origin block" defaultValue={5000}/>
+                        </div>
+                        <button className="reset-btn"></button>
+                    </div>
+                    <div className="outline-form">
+                        <span>方向 (矢印)</span>
+                        <div className="grid-direction">
+                            <button className="direction up"></button>
+                            <button className="direction down act"></button>
+                            <button className="direction left"></button>
+                            <button className="direction right"></button>
+                        </div>
+                    </div>
+                </div>
+                <div className="outline-inner">
+                    <div className="outline-form">
+                        <span className="mr10">長さ(mm)</span>
+                        <div className="input-grid" style={{width: '98px'}}>
+                            <input type="text" className="input-origin block" defaultValue={8000}/>
+                        </div>
+                    </div>
+                    <div className="outline-form">
+                        <span>方向 (矢印)</span>
+                        <div className="grid-direction">
+                            <button className="direction up"></button>
+                            <button className="direction down act"></button>
+                            <button className="direction left"></button>
+                            <button className="direction right"></button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/slopeoption/SlopeOption.jsx b/src/components/canvas/modal/slopeoption/SlopeOption.jsx
new file mode 100644
index 0000000..d972b86
--- /dev/null
+++ b/src/components/canvas/modal/slopeoption/SlopeOption.jsx
@@ -0,0 +1,28 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+
+export default function SlopeOption (){
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap xxxm`}>
+                <div className="modal-head">
+                    <h1 className="title">傾斜設定 </h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="slope-wrap">
+                        <div className="outline-form">
+                            <span className="mr10" style={{width: 'auto'}}>斜傾</span>
+                            <div className="input-grid mr5">
+                                <input type="text" className="input-origin block" defaultValue={300}/>
+                            </div>
+                            <span className="thin">寸(度)</span>
+                        </div>
+                    </div>
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal act">保存</button>
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}
\ No newline at end of file
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 0126a05..c6712bc 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -18,7 +18,6 @@ $alert-color: #101010;
     top: 200px;
     right: 100px;
     width: 100%;
-    min-width: 300px;
     height: -webkit-fit-content;
     height: -moz-fit-content;
     height: fit-content;
@@ -26,6 +25,9 @@ $alert-color: #101010;
     border-radius: 4px;
     background-color: #272727;
     z-index: 9999999;
+    &.xxxm{
+        width: 230px;
+    }
     &.xxm{
         width: 270px;
     }
@@ -777,4 +779,10 @@ $alert-color: #101010;
             }
         }
     }
+}
+
+// 경사설정
+.slope-wrap{
+    padding-bottom: 24px;
+    border-bottom: 1px solid #424242;
 }
\ No newline at end of file