From 5592f6f57ac6806fbe7fe3cd9fa12db579634c5c 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: Tue, 10 Sep 2024 10:05:54 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A9=94=EB=89=B4=20=EC=84=B8=ED=8C=85=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=ED=8C=9D=EC=97=85=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/canvas/page.jsx                       |  2 +
 src/components/canvas/CanvasMenu.jsx          | 70 ++++++++++---------
 src/components/canvas/MenuDepth01.jsx         |  4 +-
 .../modal/outerlinesetting/OuterLineWall.jsx  | 66 +++++++++++++++++
 src/styles/_contents.scss                     |  6 ++
 5 files changed, 112 insertions(+), 36 deletions(-)
 create mode 100644 src/components/canvas/modal/outerlinesetting/OuterLineWall.jsx

diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx
index 9f11ccb..2022c9c 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 OuterLineWall from '@/components/canvas/modal/outerlinesetting/OuterLineWall'
 import SettingModal01 from '@/components/canvas/modal/settoing01/SettingModal01'
 import Header from '@/components/header/Header'
 import '@/styles/style.scss'
@@ -19,6 +20,7 @@ export default function CanvasPage() {
                         <CanvasLayout/>
                     </div>
                     {modalOpen === 'option' && <SettingModal01 modalOpen={modalOpen} setModalOpen={setModalOpen}/>}
+                    {modalOpen === 'outerwall' && <OuterLineWall modalOpen={modalOpen} setModalOpen={setModalOpen}/>}
                 </div>
             </div>
         </div>
diff --git a/src/components/canvas/CanvasMenu.jsx b/src/components/canvas/CanvasMenu.jsx
index 8f9f018..c2e5775 100644
--- a/src/components/canvas/CanvasMenu.jsx
+++ b/src/components/canvas/CanvasMenu.jsx
@@ -16,7 +16,7 @@ export default function CanvasMenu({setModalOpen}) {
         }
     }
     return(
-        <div className={`canvas-menu-wrap ${menuNumber !== null ? 'active' : ""}`}>
+        <div className={`canvas-menu-wrap ${(menuNumber === 2 || menuNumber === 3 || menuNumber === 4) ? 'active' : ""}`}>
             <div className="canvas-menu-inner">
                 <ul className="canvas-menu-list">
                     <li className={`canvas-menu-item ${menuNumber === 0 ? 'active' : ''}`} onClick={() => onClickNav(0)}>
@@ -42,43 +42,45 @@ export default function CanvasMenu({setModalOpen}) {
                     </li>
                 </ul>
                 <div className="canvas-side-btn-wrap">
-                    <div className="btn-from">
-                        <button className="btn01 "></button>
-                        <button className="btn02 active"></button>
-                        <button className="btn03"></button>
-                    </div>
-                    <div className="vertical-horizontal">
-                        <span>垂直水平モード</span>
-                        <button onClick={() => setVertical(!vertical)}>{vertical ? "ON" : "OFF"}</button>
-                    </div>
-                    <div className="select-box">
-                        <Qselect title={'瓦53A'} option={SelectOption}/>
-                    </div>
-                    <div className="btn-from">
-                        <button className="btn04" onClick={() => setModalOpen('option')}></button>
-                        <button className="btn05"></button>
-                        <button className="btn06"></button>
-                    </div>
-                    <div className="size-control">
-                        <button className="control-btn minus"></button>
-                        <span>100%</span>
-                        <button className="control-btn plus"></button>
-                    </div>
-                    <div className="btn-from">
-                        <button className="btn07"></button>
-                        <button className="btn08"></button>
-                        <button className="btn09"></button>
-                    </div>
+                    {
+                        (menuNumber === 1 || menuNumber === 2 || menuNumber === 3 || menuNumber === 4) &&
+                        <>
+                            <div className="btn-from">
+                                <button className="btn01 "></button>
+                                <button className="btn02 active"></button>
+                                <button className="btn03"></button>
+                            </div>
+                            <div className={`vertical-horizontal ${vertical ? 'on':''}`}>
+                                <span>垂直水平モード</span>
+                                <button onClick={() => setVertical(!vertical)}>{vertical ? "ON" : "OFF"}</button>
+                            </div>
+                            <div className="select-box">
+                                <Qselect title={'瓦53A'} option={SelectOption}/>
+                            </div>
+                            <div className="btn-from">
+                                <button className="btn04" onClick={() => setModalOpen('option')}></button>
+                                <button className="btn05"></button>
+                                <button className="btn06"></button>
+                            </div>
+                            <div className="size-control">
+                                <button className="control-btn minus"></button>
+                                <span>100%</span>
+                                <button className="control-btn plus"></button>
+                            </div>
+                            <div className="btn-from">
+                                <button className="btn07"></button>
+                                <button className="btn08"></button>
+                                <button className="btn09"></button>
+                            </div>
+                        </>
+                    }
+                    
                 </div>
             </div>
-            <div className={`canvas-depth2-wrap ${menuNumber !== null ? 'active' : ''}`}>
-                {menuNumber === 0 && <MenuDepth01/>}
-                {menuNumber === 1 && <MenuDepth01/>}
-                {menuNumber === 2 && <MenuDepth01/>}
+            <div className={`canvas-depth2-wrap ${(menuNumber === 2 || menuNumber === 3 || menuNumber === 4) ? 'active' : ''}`}>
+                {menuNumber === 2 && <MenuDepth01 setModalOpen={setModalOpen}/>}
                 {menuNumber === 3 && <MenuDepth01/>}
                 {menuNumber === 4 && <MenuDepth01/>}
-                {menuNumber === 5 && <MenuDepth01/>}
-                {menuNumber === 6 && <MenuDepth01/>}
             </div>
         </div>
     )
diff --git a/src/components/canvas/MenuDepth01.jsx b/src/components/canvas/MenuDepth01.jsx
index 763f60d..4cf4ae2 100644
--- a/src/components/canvas/MenuDepth01.jsx
+++ b/src/components/canvas/MenuDepth01.jsx
@@ -2,11 +2,11 @@
 
 import { ToggleonMouse } from "../header/Header"
 
-export default function MenuDepth01(){
+export default function MenuDepth01({setModalOpen}){
     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 active" onClick={() => setModalOpen('outerwall')}><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>
diff --git a/src/components/canvas/modal/outerlinesetting/OuterLineWall.jsx b/src/components/canvas/modal/outerlinesetting/OuterLineWall.jsx
new file mode 100644
index 0000000..b3cb138
--- /dev/null
+++ b/src/components/canvas/modal/outerlinesetting/OuterLineWall.jsx
@@ -0,0 +1,66 @@
+'use client'
+
+import { useState } from "react";
+import WithDraggable from "@/components/common/draggable/withDraggable";
+
+
+export default function OuterLineWall ({modalOpen, setModalOpen}){
+    const [buttonAct, setButtonAct] = useState(1);
+    const [close, setClose] = useState(false)
+    const HandleClickClose = () => {
+        setClose(true)
+        setTimeout(() => {
+            setModalOpen('');
+            setClose(false);
+        }, 180)
+    }
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap ${modalOpen === 'outerwall' && close === false ? 'mount' : ''}${close ? 'unmount' : ''} `}>
+                <div className="modal-head">
+                    <h1 className="title">外壁線を描</h1>
+                    <button className="modal-close" onClick={HandleClickClose}>닫기</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(2)}
+                        >
+                            イ・グベ
+                        </button>
+                        <button 
+                        className={`btn-frame modal ${buttonAct === 4 ? 'act' : ''}`} 
+                        onClick={() => setButtonAct(2)}
+                        >
+                            角度
+                        </button>
+                        <button 
+                        className={`btn-frame modal ${buttonAct === 5 ? 'act' : ''}`} 
+                        onClick={() => setButtonAct(2)}
+                        >
+                            対角線
+                        </button>
+                    </div>
+                    <div className="modal-check-btn-wrap">
+                        <h3 className="check-wrap-title">設定</h3>
+                        
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}
\ No newline at end of file
diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index ff6005c..21c8e46 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -132,6 +132,12 @@
                     font-weight: 400;
                     color: #fff;
                     padding: 0 7.5px;
+                    transition: all .17s ease-in-out;
+                }
+                &.on{
+                    button{
+                        background-color: #1083E3;
+                    }
                 }
             }
             .size-control{