diff --git a/public/static/images/canvas/eaves_icon09.svg b/public/static/images/canvas/eaves_icon09.svg
new file mode 100644
index 0000000..fe4512b
--- /dev/null
+++ b/public/static/images/canvas/eaves_icon09.svg
@@ -0,0 +1,10 @@
+<svg width="32" height="30" viewBox="0 0 32 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.75" width="30" height="30" fill="#45CD7D"/>
+<mask id="mask0_13_48" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="30">
+<rect x="0.75" width="30" height="30" fill="#45CD7D"/>
+</mask>
+<g mask="url(#mask0_13_48)">
+<path d="M0 -5.48276L16.254 9L32 -6" stroke="black" stroke-width="2"/>
+<path d="M16.2 9V30" stroke="black" stroke-width="2"/>
+</g>
+</svg>
diff --git a/public/static/images/canvas/module_tab_arr.svg b/public/static/images/canvas/module_tab_arr.svg
new file mode 100644
index 0000000..f1da9ab
--- /dev/null
+++ b/public/static/images/canvas/module_tab_arr.svg
@@ -0,0 +1,3 @@
+<svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 7183" d="M1.33333 1L7.33333 7L1.33333 13" stroke="#7D7D7D" stroke-width="1.5"/>
+</svg>
diff --git a/public/static/images/canvas/module_tab_arr_white.svg b/public/static/images/canvas/module_tab_arr_white.svg
new file mode 100644
index 0000000..49ac443
--- /dev/null
+++ b/public/static/images/canvas/module_tab_arr_white.svg
@@ -0,0 +1,3 @@
+<svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 7183" d="M1.33331 1L7.33331 7L1.33331 13" stroke="white" stroke-width="1.5"/>
+</svg>
diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx
index ae760e9..b0af2ae 100644
--- a/src/app/canvas/page.jsx
+++ b/src/app/canvas/page.jsx
@@ -38,6 +38,7 @@ import { useState } from 'react'
 import { useRecoilValue } from 'recoil'
 import Penal03 from '@/components/canvas/penal/Penal03'
 import Penal04 from '@/components/canvas/penal/Penal04'
+import RoofModuleOption from '@/components/canvas/modal/roofmoduleoption/RoofModuleOption'
 
 export default function CanvasPage() {
     const modalOption = useRecoilValue(modalState);
@@ -52,10 +53,10 @@ export default function CanvasPage() {
                         <CanvasLayout menuValue={menuValue}/>
                     </div>
                     {/* 패널 배치 집계 */}
-                    <Penal01/>
-                    <Penal02/>
-                    <Penal03/>
-                    <Penal04/>
+                    {/* <Penal01/> */}
+                    {/* <Penal02/> */}
+                    {/* <Penal03/> */}
+                    {/* <Penal04/> */}
 
                     {/* 배치면 초기 설정 */}
                     {/* <PlacementSettingPop/> */}
@@ -84,7 +85,7 @@ export default function CanvasPage() {
                     {/* <AuxiliarylineOption/> */}
 
                     {/* 처마∙케라바 변경 */}
-                    {/* <EvaseKerabaOption/> */}
+                    <EvaseKerabaOption/>
 
                     {/* 동선이동∙형 올림 내림 */}
                     {/* <MovingUpDonw/> */}
@@ -125,6 +126,9 @@ export default function CanvasPage() {
 
                     {/* 면 흐름 설정 */}
                     {/* <DrawingFlow/> */}
+
+                    {/* 지붕모듈선택 */}
+                    <RoofModuleOption/>
                 </div>
             </div>
         </div>
diff --git a/src/components/canvas/modal/displaychange/DisplayChange.jsx b/src/components/canvas/modal/displaychange/DisplayChange.jsx
index 5032c36..59f6214 100644
--- a/src/components/canvas/modal/displaychange/DisplayChange.jsx
+++ b/src/components/canvas/modal/displaychange/DisplayChange.jsx
@@ -25,12 +25,18 @@ export default function DisplayChange(){
                                     <input type="text" className="input-origin block" defaultValue={5933} readOnly/>
                                 </div>
                             </div>
-                            <div className="outline-form">
-                                <span className="mr10" >変更の長さ</span>
-                                <div className="input-grid mr5">
-                                    <input type="text" className="input-origin block" defaultValue={0}/>
+                            <div className="mb-box">
+                                <div className="outline-form">
+                                    <span className="mr10" >変更の長さ</span>
+                                    <div className="input-grid mr5">
+                                        <input type="text" className="input-origin block" defaultValue={0}/>
+                                    </div>
                                 </div>
                             </div>
+                            <div className="d-check-box pop">
+                                <input type="checkbox" id="ch99" />
+                                <label htmlFor="ch99">コーナー・ゴールの場合</label>
+                            </div>
                         </div>
                     </div>
                     <div className="slope-wrap">
diff --git a/src/components/canvas/modal/eaves_keraba/EavesKerabaTab02.jsx b/src/components/canvas/modal/eaves_keraba/EavesKerabaTab02.jsx
index ce68a25..314fe64 100644
--- a/src/components/canvas/modal/eaves_keraba/EavesKerabaTab02.jsx
+++ b/src/components/canvas/modal/eaves_keraba/EavesKerabaTab02.jsx
@@ -36,7 +36,7 @@ export default function EavesKerabaTab02(){
                         </div>
                         <div className="eaves-keraba-td">
                             <div className="eaves-keraba-ico">
-                                <Image src="/static/images/canvas/eaves_icon01.svg" alt="react" width={30} height={30} />
+                                <Image src="/static/images/canvas/eaves_icon09.svg" alt="react" width={30} height={30} />
                             </div>
                         </div>
                     </div>
diff --git a/src/components/canvas/modal/roofmoduleoption/RoofModuleOption.jsx b/src/components/canvas/modal/roofmoduleoption/RoofModuleOption.jsx
new file mode 100644
index 0000000..a507fc5
--- /dev/null
+++ b/src/components/canvas/modal/roofmoduleoption/RoofModuleOption.jsx
@@ -0,0 +1,31 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+import RoofModuleOptionTab01 from "./RoofModuleOptionTab01";
+import { useState } from "react";
+import RoofModuleOptionTab02 from "./RoofModuleOptionTab02";
+import RoofModuleOptionTab03 from "./RoofModuleOptionTab03";
+
+export default function RoofModuleOption(){
+    const [tabNum, setTabNum] = useState(1);
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap lx-2`}>
+                <div className="modal-head">
+                    <h1 className="title">基本設定 </h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <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>
+                    {tabNum === 1 && <RoofModuleOptionTab01 setTabNum={setTabNum}/>}
+                    {tabNum === 2 && <RoofModuleOptionTab02 setTabNum={setTabNum}/>}
+                    {tabNum === 3 && <RoofModuleOptionTab03 setTabNum={setTabNum}/>}
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab01.jsx b/src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab01.jsx
new file mode 100644
index 0000000..760cb06
--- /dev/null
+++ b/src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab01.jsx
@@ -0,0 +1,64 @@
+import { useState } from "react";
+
+export default function RoofModuleOptionTab01({setTabNum}){
+    const [compasDeg, setCompasDeg] = useState(0);
+    return(
+        <>
+            <div className="properties-setting-wrap">
+                <div className="setting-tit">方位設定</div>
+                <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>270°</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="d-check-box pop">
+                            <input type="checkbox" id="ch99" />
+                            <label htmlFor="ch99">角度を直接入力（0〜360）</label>
+                        </div>
+                        <div className="outline-form">
+                            <div className="input-grid mr10" style={{width: '160px'}}>
+                                <input type="text" className="input-origin block" defaultValue={315}/>
+                            </div>
+                            <span className="thin" >°</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className="grid-btn-wrap">
+                <button className="btn-frame modal act mr5">保存</button>
+                <button className="btn-frame modal" onClick={() => setTabNum(2)}>Next</button>
+            </div>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab02.jsx b/src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab02.jsx
new file mode 100644
index 0000000..26f8b45
--- /dev/null
+++ b/src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab02.jsx
@@ -0,0 +1,54 @@
+import Qselect from "@/components/common/select/Qselect";
+
+const SelectOption01 = [
+    {name: '0',}, {name: '0'}, {name: '0'}, {name: '0'}
+]
+
+export default function RoofModuleOptionTab02({setTabNum}){
+
+    return(
+        <>
+            <div className="module-table-flex-wrap">
+                <div className="module-table-box">
+                    <div className="module-table-inneer">
+                        <div className="outline-form">
+                            <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></td>
+                                        <td></td>
+                                        <td></td>
+                                        <td></td>
+                                        <td></td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+                <div className="module-table-box">
+                    <div className="module-table-inneer"></div>
+                </div>
+            </div>
+            <div className="grid-btn-wrap">
+                <button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>以前</button>
+                <button className="btn-frame modal act mr5">保存</button>
+                <button className="btn-frame modal" onClick={() => setTabNum(3)}>Next</button>
+            </div>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab03.jsx b/src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab03.jsx
new file mode 100644
index 0000000..94dfa40
--- /dev/null
+++ b/src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab03.jsx
@@ -0,0 +1,14 @@
+
+export default function RoofModuleOptionTab03({setTabNum}){
+
+    return(
+        <>
+            
+            <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>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 2021ae2..6372461 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -55,6 +55,9 @@ $alert-color: #101010;
     &.l-2{
         width: 640px;
     }
+    &.lx-2{
+        width: 740px;
+    }
     &.lx{
         width: 770px;
     }
@@ -1139,3 +1142,100 @@ $alert-color: #101010;
         }
     }
 }
+
+
+// 지붕모듈선택
+.roof-module-tab{
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 14px;
+    .module-tab-bx{
+        flex: 1;
+        height: 34px;
+        line-height: 31px;
+        border: 1px solid #484848;
+        border-radius: 2px;
+        background-color: transparent;
+        font-size: 12px;
+        color: #AAA;
+        text-align: center;
+        cursor: default;
+        transition: all .15s ease-in-out;
+        &.act{
+            background-color: #1083E3;
+            border: 1px solid #1083E3;
+            color: #fff;
+            font-weight: 500;
+        }
+    }
+    .tab-arr{
+        display: block;
+        width: 9px;
+        height: 14px;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+        background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
+        transition: all .15s ease-in-out;
+        &.act{
+            background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
+        }
+    }
+}
+
+.roof-module-compas{
+    margin-bottom: 24px;
+    .compas-box-inner{
+        width: 280px;
+        height: 253px;
+        .circle{
+            top: 86%;
+            &:nth-child(1),
+            &:nth-child(7),
+            &:nth-child(13),
+            &:nth-child(19){
+                &::before{
+                    content: '';
+                    position: absolute;
+                    top: 20px;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    width: 1px;
+                    height: 6px;
+                    background-color: #8B8B8B;
+                }
+            }
+            i{
+                top: 32px;
+            }
+            &.act{
+                i{color: #8B8B8B;}
+            }
+        }
+    }
+}
+.center-wrap{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+}
+
+.module-table-flex-wrap{
+    display: flex;
+    gap: 10px;
+}
+.module-table-box{
+    flex: 1;
+    background-color: #3D3D3D;
+    border-radius: 2px;
+    .module-table-inneer{
+        padding: 10px;
+        .outline-form{
+            span{
+                width: auto;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/_table.scss b/src/styles/_table.scss
index d3c207a..db0de20 100644
--- a/src/styles/_table.scss
+++ b/src/styles/_table.scss
@@ -174,4 +174,11 @@ table{
             }
         }
     }
+}
+
+.roof-module-table{
+    table{
+        table-layout: fixed;
+        border-collapse: collapse;
+    }
 }
\ No newline at end of file