From 39dd2c1f6767679edc2cceaa27210991b0e4f52c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= <chang9811@interplug.co.kr>
Date: Thu, 26 Sep 2024 09:32:53 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A9=94=EB=89=B4=20depth=20=EC=B6=94=EA=B0=80?=
 =?UTF-8?q?=20=EB=B0=8F=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/canvas/CanvasMenu.jsx  |  6 +++--
 src/components/canvas/MenuDepth01.jsx | 35 ++++++---------------------
 src/components/canvas/MenuDepth02.jsx | 18 ++++++++++++++
 src/components/canvas/MenuDepth03.jsx | 16 ++++++++++++
 4 files changed, 45 insertions(+), 30 deletions(-)
 create mode 100644 src/components/canvas/MenuDepth02.jsx
 create mode 100644 src/components/canvas/MenuDepth03.jsx

diff --git a/src/components/canvas/CanvasMenu.jsx b/src/components/canvas/CanvasMenu.jsx
index eccc9ca..dedecfa 100644
--- a/src/components/canvas/CanvasMenu.jsx
+++ b/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 === 4 && <MenuDepth01/>}
+                {menuNumber === 3 && <MenuDepth02/>}
+                {menuNumber === 4 && <MenuDepth03/>}
             </div>
         </div>
     )
diff --git a/src/components/canvas/MenuDepth01.jsx b/src/components/canvas/MenuDepth01.jsx
index 93f6195..62a9360 100644
--- a/src/components/canvas/MenuDepth01.jsx
+++ b/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"><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>
+                <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>
             </ul>
         </div>
     )
diff --git a/src/components/canvas/MenuDepth02.jsx b/src/components/canvas/MenuDepth02.jsx
new file mode 100644
index 0000000..e9c77f2
--- /dev/null
+++ b/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>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/MenuDepth03.jsx b/src/components/canvas/MenuDepth03.jsx
new file mode 100644
index 0000000..dc46345
--- /dev/null
+++ b/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>
+    )
+}
\ No newline at end of file