팝업 추가 및 메뉴 수정

public/static/images/canvas/arr_btn_ico_white.svg

@@ -0,0 +1,3 @@
+<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 6.5L3.5 4L1 1.5" stroke="white" stroke-width="1.5"/>
+</svg>

src/app/canvas/page.jsx

@@ -15,12 +15,12 @@ export default function CanvasPage() {
             <Header/>
             <div className="content">
                 <div className="canvas-wrap">
-                    <CanvasMenu modalOpen={modalOpen} setModalOpen={setModalOpen}/>
+                    <CanvasMenu/>
                     <div className="canvas-content">
                         <CanvasLayout/>
                     </div>
-                    {modalOpen === 'option' && <SettingModal01 modalOpen={modalOpen} setModalOpen={setModalOpen}/>}
+                    <SettingModal01/>
-                    {modalOpen === 'outerwall' && <OuterLineWall modalOpen={modalOpen} setModalOpen={setModalOpen}/>}
+                    <OuterLineWall/>
                 </div>
             </div>
         </div>

src/app/inputwrap/page.jsx

@@ -29,8 +29,10 @@ export default function InputWrapPage (){
             <div className="input-wrap">
                 <h1>Input WRAP</h1>
                 <div className="form-input">
+                    <label htmlFor="">長さ (mm)</label>
                     <input type="text"  className="input-origin" placeholder="asdasd"/>
                 </div>
+                <input type="text"  className="input-origin" placeholder="asdasd"/>
             </div>
             <div className="input-wrap">
                 <h1>DatePicker WRAP</h1>
@@ -68,6 +70,9 @@ export default function InputWrapPage (){
                     <button className="arr-btn">
                         <span>文字フォントの変更</span>
                     </button>
+                    <button className="arr-btn dark">
+                        <span>文字フォントの変更</span>
+                    </button>
                     <button className="arr-btn act">
                         <span>文字フォントの変更</span>
                     </button>

src/components/canvas/CanvasMenu.jsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 import Qselect from "../common/select/Qselect";
 import MenuDepth01 from "./MenuDepth01";
 
-export default function CanvasMenu({setModalOpen}) {
+export default function CanvasMenu() {
     const [menuNumber, setMenuNumber] = useState(null);
     const [vertical, setVertical] = useState(true);
     const SelectOption = [
@@ -42,8 +42,7 @@ export default function CanvasMenu({setModalOpen}) {
                     </li>
                 </ul>
                 <div className="canvas-side-btn-wrap">
-                    {
+                    {(menuNumber !== 6 && menuNumber !== 5) &&
-                        (menuNumber === 1 || menuNumber === 2 || menuNumber === 3 || menuNumber === 4) &&
                         <>
                             <div className="btn-from">
                                 <button className="btn01 "></button>
@@ -58,7 +57,7 @@ export default function CanvasMenu({setModalOpen}) {
                                 <Qselect title={'瓦53A'} option={SelectOption}/>
                             </div>
                             <div className="btn-from">
-                                <button className="btn04" onClick={() => setModalOpen('option')}></button>
+                                <button className="btn04"></button>
                                 <button className="btn05"></button>
                                 <button className="btn06"></button>
                             </div>
@@ -72,13 +71,13 @@ export default function CanvasMenu({setModalOpen}) {
                                 <button className="btn08"></button>
                                 <button className="btn09"></button>
                             </div>
-                        </>
+                        </>}
-                    }
 
+                    {(menuNumber === 5) && 'asdasd'}
                 </div>
             </div>
             <div className={`canvas-depth2-wrap ${(menuNumber === 2 || menuNumber === 3 || menuNumber === 4) ? 'active' : ''}`}>
-                {menuNumber === 2 && <MenuDepth01 setModalOpen={setModalOpen}/>}
+                {menuNumber === 2 && <MenuDepth01/>}
                 {menuNumber === 3 && <MenuDepth01/>}
                 {menuNumber === 4 && <MenuDepth01/>}
             </div>

src/components/canvas/MenuDepth01.jsx

@@ -2,11 +2,11 @@
 
 import { ToggleonMouse } from "../header/Header"
 
-export default function MenuDepth01({setModalOpen}){
+export default function MenuDepth01(){
     return( 
         <div className="canvas-depth2-inner">
             <ul className="canvas-depth2-list">
-                <li className="canvas-depth2-item active" onClick={() => setModalOpen('outerwall')}><button>外壁線を描</button></li>
+                <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>

src/components/canvas/modal/outerlinesetting/OuterLineWall.jsx

@@ -4,19 +4,18 @@ import { useState } from "react";
 import WithDraggable from "@/components/common/draggable/withDraggable";
 
 
-export default function OuterLineWall ({modalOpen, setModalOpen}){
+export default function OuterLineWall (){
     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-pop-wrap ssm ${close ? 'unmount' : ''} `}>
                 <div className="modal-head">
                     <h1 className="title">外壁線を描</h1>
                     <button className="modal-close" onClick={HandleClickClose}>닫기</button>
@@ -38,26 +37,49 @@ export default function OuterLineWall ({modalOpen, setModalOpen}){
                         </button>
                         <button 
                         className={`btn-frame modal ${buttonAct === 3 ? 'act' : ''}`} 
-                        onClick={() => setButtonAct(2)}
+                        onClick={() => setButtonAct(3)}
                         >
                             イ・グベ
                         </button>
                         <button 
                         className={`btn-frame modal ${buttonAct === 4 ? 'act' : ''}`} 
-                        onClick={() => setButtonAct(2)}
+                        onClick={() => setButtonAct(4)}
                         >
                             角度
                         </button>
                         <button 
                         className={`btn-frame modal ${buttonAct === 5 ? 'act' : ''}`} 
-                        onClick={() => setButtonAct(2)}
+                        onClick={() => setButtonAct(5)}
                         >
                             対角線
                         </button>
                     </div>
                     <div className="modal-check-btn-wrap">
                         <h3 className="check-wrap-title">設定</h3>
-                        
+                        <div className="outer-line-wrap">
+                            <div className="form-input">
+                                <label htmlFor="">長さ (mm)</label>
+                                <input type="text"  className="input-origin block" placeholder="320mm"/>
+                            </div>
+                            <div className="form-input">
+                                <label htmlFor="">方向 (矢印)</label>
+                                <input type="text"  className="input-origin block" placeholder="320mm"/>
+                            </div>
+                        </div>
+                        <div className="flex-check-box for2 btn">
+                            <button className="arr-btn dark">
+                                <span>外壁線確定</span>
+                            </button>
+                            <button className="arr-btn dark act">
+                                <span>一変戦に戻る</span>
+                            </button>
+                            <button className="arr-btn dark">
+                                <span>外壁の削除</span>
+                            </button>
+                            <button className="arr-btn dark">
+                                <span>外壁の選択、移動</span>
+                            </button>
+                        </div>
                     </div>
                 </div>
             </div>

src/components/canvas/modal/settoing01/SettingModal01.jsx

@@ -17,19 +17,18 @@ const propsClick = {
     onClick: HandleBtnClick
 }
 
-export default function SettingModal01 ({modalOpen, setModalOpen}){
+export default function SettingModal01 (){
     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 sm ${modalOpen === 'option' && close === false ? 'mount' : ''}${close ? 'unmount' : ''} `}>
+            <div className={`modal-pop-wrap sm ${close ? 'unmount' : ''} `}>
                 <div className="modal-head">
                     <h1 className="title">Canvas設定</h1>
                     <button className="modal-close" onClick={HandleClickClose}>닫기</button>

src/styles/_modal.scss

@@ -24,6 +24,9 @@
     &.sm{
         max-width: 450px;
     }
+    &.ssm{
+        max-width: 380px;
+    }
     &.mount{
         animation: mountpop .17s ease-in-out forwards;
     }
@@ -80,6 +83,12 @@
                 button{
                     width: calc(50% - 5px);
                 }
+                &.btn{
+                    gap: 5px;
+                    button{
+                        width: calc(50% - 2.5px);
+                    }
+                }
             }
             &.for-line{
                 button{
@@ -88,4 +97,16 @@
             }
         }
     }
+    .outer-line-wrap{
+        border-top: 1px solid #3C3C3C;
+        margin-top: 10px;
+        padding-top: 15px;
+        margin-bottom: 15px;
+        > div{
+            margin-bottom: 15px;
+            &:last-child{
+                margin-bottom: 0;
+            }
+        }
+    }
 }

src/styles/_reset.scss

@@ -127,7 +127,7 @@ button{
 // button
 .btn-frame{
     display: inline-block;
-    padding: 0 10px;
+    padding: 0 9px;
     height: 34px;
     line-height: 34px;
     border-radius: 2px;
@@ -255,6 +255,15 @@ button{
 }
 
 // input
+.form-input{
+    label{
+        display: block;
+        color: #aaa;
+        font-size: 12px;
+        font-weight: 500;
+        margin-bottom: 10px;
+    }
+}
 input[type=text]{
     &.input-origin{
         display: inline-block;
@@ -267,8 +276,13 @@ input[type=text]{
         font-weight: 500;
         font-family: 'Pretendard', sans-serif;
         padding: 0 10px;
+        letter-spacing: 0px;
         &::placeholder{
             font-size: 12px;
+            letter-spacing: 0px;
+        }
+        &.block{
+            width: 100%;
         }
     }
 }
@@ -376,4 +390,20 @@ input[type=text]{
             }
         }
     }
+    &.dark{
+        text-align: center;
+        background-color: #272727;
+        border: 1px solid #484848;
+        span{
+            color: #Fff;
+            &:after{
+                background: url(../../public/static/images/canvas/arr_btn_ico_white.svg)no-repeat center;
+            }
+        }
+        &:hover,
+        &.act{
+            background-color: #1083E3;
+            border: 1px solid #1083E3;
+        }
+    }
 }