메뉴 depth 추가 및 수정

src/components/canvas/CanvasMenu.jsx

@@ -4,6 +4,8 @@ import Qselect from "../common/select/Qselect";
 import MenuDepth01 from "./MenuDepth01";
 import { useRecoilState } from "recoil";
 import { modalState } from "@/store/modalAtom";
+import MenuDepth02 from "./MenuDepth02";
+import MenuDepth03 from "./MenuDepth03";
 
 
 export default function CanvasMenu({setMenuValue}) {
@@ -121,8 +123,8 @@ export default function CanvasMenu({setMenuValue}) {
             </div>
             <div className={`canvas-depth2-wrap ${(menuNumber === 2 || menuNumber === 3 || menuNumber === 4) ? 'active' : ''}`}>
                 {menuNumber === 2 && <MenuDepth01/>}
-                {menuNumber === 3 && <MenuDepth01/>}
+                {menuNumber === 3 && <MenuDepth02/>}
-                {menuNumber === 4 && <MenuDepth01/>}
+                {menuNumber === 4 && <MenuDepth03/>}
             </div>
         </div>
     )

src/components/canvas/MenuDepth01.jsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { useRecoilState } from "recoil";
-import { ToggleonMouse } from "../layout/Header"
 import { modalState } from "@/store/modalAtom";
 
 export default function MenuDepth01(){
@@ -9,33 +8,13 @@ export default function MenuDepth01(){
     return( 
         <div className="canvas-depth2-inner">
             <ul className="canvas-depth2-list">
-                <li className="canvas-depth2-item active"><button onClick={() => setModalOption({...modalOption, outerwall: true})}>外壁線を描</button></li>
+                <li className="canvas-depth2-item active"><button onClick={() => setModalOption({...modalOption, outerwall: true})}>外壁線を描く</button></li>
-                <li className="canvas-depth2-item"><button>補助線を描</button></li>
+                <li className="canvas-depth2-item"><button>屋根形状の設定</button></li>
-                <li className="canvas-depth2-item"><button>屋根形状設定</button></li>
+                <li className="canvas-depth2-item"><button>屋根形状の手動設定</button></li>
-                <li className="canvas-depth2-item"><button>軒下変更</button></li>
+                <li className="canvas-depth2-item"><button>軒・ケラバ変更</button></li>
-                <li className="canvas-depth2-item"><button>外壁線の上げ下げ</button></li>
+                <li className="canvas-depth2-item"><button>銅線移動・型上げ下り</button></li>
-                <li className="canvas-depth2-item"><button>銅線移動</button></li>
+                <li className="canvas-depth2-item"><button>外壁の編集とオフセット</button></li>
-                <li className="canvas-depth2-item"><button>特殊コーナー形状</button></li>
+                <li className="canvas-depth2-item"><button>屋根面の割り当て</button></li>
-            </ul>
-            <ul className="canvas-depth2-btn-list">
-                <li className="depth2-btn-box"
-                    onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')}
-                    onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}
-                >
-                    <button>屋根面の割り当て</button>
-                </li>
-                <li className="depth2-btn-box"
-                    onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')}
-                    onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}
-                >
-                    <button>屋根材の設定と変更</button>
-                </li>
-                <li className="depth2-btn-box"
-                    onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')}
-                    onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}
-                >
-                    <button>屋根面全体削除</button>
-                </li>
             </ul>
         </div>
     )

src/components/canvas/MenuDepth02.jsx

@@ -0,0 +1,18 @@
+'use client'
+
+import { useRecoilState } from "recoil";
+import { modalState } from "@/store/modalAtom";
+
+export default function MenuDepth02(){
+    return( 
+        <div className="canvas-depth2-inner">
+            <ul className="canvas-depth2-list">
+                <li className="canvas-depth2-item active"><button>傾斜設定</button></li>
+                <li className="canvas-depth2-item"><button>配置面の描画</button></li>
+                <li className="canvas-depth2-item"><button>面形状の配置</button></li>
+                <li className="canvas-depth2-item"><button>オブジェクトの配置</button></li>
+                <li className="canvas-depth2-item"><button>配置面全体を削除</button></li>
+            </ul>
+        </div>
+    )
+}

src/components/canvas/MenuDepth03.jsx

@@ -0,0 +1,16 @@
+'use client'
+
+import { useRecoilState } from "recoil";
+import { modalState } from "@/store/modalAtom";
+
+export default function MenuDepth03(){
+    return( 
+        <div className="canvas-depth2-inner">
+            <ul className="canvas-depth2-list">
+                <li className="canvas-depth2-item active"><button>基本設定</button></li>
+                <li className="canvas-depth2-item"><button>回路と架台の設定</button></li>
+                <li className="canvas-depth2-item"><button>図面方位の適用</button></li>
+            </ul>
+        </div>
+    )
+}