diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx
index 287eaed..1797bc9 100644
--- a/src/app/canvas/page.jsx
+++ b/src/app/canvas/page.jsx
@@ -39,6 +39,7 @@ 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'
+import HexagonalRoofOption from '@/components/canvas/modal/hexagonalroofoption/HexagonalRoofOption'
 
 export default function CanvasPage() {
     const modalOption = useRecoilValue(modalState);
@@ -128,7 +129,10 @@ export default function CanvasPage() {
                     {/* <DrawingFlow/> */}
 
                     {/* 지붕모듈선택 */}
-                    <RoofModuleOption/>
+                    {/* <RoofModuleOption/> */}
+
+                    {/* 육지붕모듈 선택 */}
+                    <HexagonalRoofOption/>
                 </div>
             </div>
         </div>
diff --git a/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofOption.jsx b/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofOption.jsx
new file mode 100644
index 0000000..8be92bd
--- /dev/null
+++ b/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofOption.jsx
@@ -0,0 +1,31 @@
+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`}>
+                <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 && <HexagonalRoofTab01 setTabNum={setTabNum}/>}
+                    {tabNum === 2 && <HexagonalRoofTab02 setTabNum={setTabNum}/>}
+                    {tabNum === 3 && <HexagonalRoofTab03 setTabNum={setTabNum}/>}
+                </div>
+            </div>
+        </WithDraggable>
+    )
+} 
\ No newline at end of file
diff --git a/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab01.jsx b/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab01.jsx
new file mode 100644
index 0000000..91f2ff8
--- /dev/null
+++ b/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab01.jsx
@@ -0,0 +1,64 @@
+import { useState } from "react";
+
+export default function HexagonalRoofTab01({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/hexagonalroofoption/HexagonalRoofTab02.jsx b/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab02.jsx
new file mode 100644
index 0000000..234d249
--- /dev/null
+++ b/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab02.jsx
@@ -0,0 +1,69 @@
+import Qselect from "@/components/common/select/Qselect";
+
+const SelectOption01 = [
+    {name: '0',}, {name: '0'}, {name: '0'}, {name: '0'}
+]
+
+export default function HexagonalRoofTab02({setTabNum}){
+    return(
+        <>
+            <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: '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>
+                </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/hexagonalroofoption/HexagonalRoofTab03.jsx b/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab03.jsx
new file mode 100644
index 0000000..adb258d
--- /dev/null
+++ b/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab03.jsx
@@ -0,0 +1,137 @@
+
+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">寸法</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">寸法</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">寸法</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">寸法</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>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/roofmoduleoption/RoofModuleOption.jsx b/src/components/canvas/modal/roofmoduleoption/RoofModuleOption.jsx
index 1a5d552..a507fc5 100644
--- a/src/components/canvas/modal/roofmoduleoption/RoofModuleOption.jsx
+++ b/src/components/canvas/modal/roofmoduleoption/RoofModuleOption.jsx
@@ -5,7 +5,7 @@ import RoofModuleOptionTab02 from "./RoofModuleOptionTab02";
 import RoofModuleOptionTab03 from "./RoofModuleOptionTab03";
 
 export default function RoofModuleOption(){
-    const [tabNum, setTabNum] = useState(3);
+    const [tabNum, setTabNum] = useState(1);
     return(
         <WithDraggable isShow={true}>
             <div className={`modal-pop-wrap lx-2`}>
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index dec9e94..7d91664 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -13,6 +13,17 @@ $alert-color: #101010;
     to{opacity: 0; scale: 0.95;}
 }
 
+.normal-font{
+    font-size: 12px;
+    font-weight: 400;
+    color: #fff;
+}
+.bold-font{
+    font-size: 12px;
+    font-weight: 500;
+    color: #fff;
+}
+
 .modal-pop-wrap{
     position: fixed;
     top: 200px;
@@ -1347,4 +1358,28 @@ $alert-color: #101010;
     button{
         margin-left: auto;
     }
+}
+.hexagonal-wrap{
+    .hexagonal-item{
+        padding: 15px 0;
+        border-bottom: 1px solid #4D4D4D;
+        &:first-child{
+            padding-top: 0;
+        }
+        &:last-child{
+            padding-bottom: 0;
+            border: none;
+        }
+        .hexagonal-flx-auto{
+            display: flex;
+            justify-content: space-between;
+        }
+        .hexagonal-flx{
+            display: flex;
+            align-items: center;
+            button{
+                margin-left: auto;
+            }
+        }
+    }
 }
\ No newline at end of file