modal 함수 수정

src/app/canvas/page.jsx

@@ -5,11 +5,12 @@ 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 { modalState } from '@/store/modalAtom'
 import '@/styles/style.scss'
-import { useState } from 'react'
+import { useRecoilValue } from 'recoil'
 
 export default function CanvasPage() {
-    const [modalOpen, setModalOpen] = useState('option');
+    const modalOption = useRecoilValue(modalState);
     return(
         <div className="wrap">
             <Header/>
@@ -19,8 +20,8 @@ export default function CanvasPage() {
                     <div className="canvas-content">
                         <CanvasLayout/>
                     </div>
-                    <SettingModal01/>
+                    {modalOption.option && <SettingModal01/>}
-                    <OuterLineWall/>
+                    {modalOption.outerwall && <OuterLineWall/>}
                 </div>
             </div>
         </div>

src/components/canvas/CanvasMenu.jsx

@@ -2,10 +2,14 @@
 import { useState } from "react";
 import Qselect from "../common/select/Qselect";
 import MenuDepth01 from "./MenuDepth01";
+import { useRecoilState } from "recoil";
+import { modalState } from "@/store/modalAtom";
 
 export default function CanvasMenu() {
+    const [modalOption, setModalOption] = useRecoilState(modalState);
     const [menuNumber, setMenuNumber] = useState(null);
     const [vertical, setVertical] = useState(true);
+
     const SelectOption = [
         {name: '瓦53A',}, {name: '瓦53A'}
     ]
@@ -45,9 +49,9 @@ export default function CanvasMenu() {
                     {(menuNumber !== 6 && menuNumber !== 5) &&
                         <>
                             <div className="btn-from">
-                                <button className="btn01 "></button>
+                                <button className="btn01"></button>
                                 <button className="btn02 active"></button>
-                                <button className="btn03"></button>
+                                <button className="btn03 "></button>
                             </div>
                             <div className={`vertical-horizontal ${vertical ? 'on':''}`}>
                                 <span>垂直水平モード</span>
@@ -57,7 +61,7 @@ export default function CanvasMenu() {
                                 <Qselect title={'瓦53A'} option={SelectOption}/>
                             </div>
                             <div className="btn-from">
-                                <button className="btn04"></button>
+                                <button className="btn04" onClick={() => setModalOption({...modalOption, option: true})}></button>
                                 <button className="btn05"></button>
                                 <button className="btn06"></button>
                             </div>
@@ -74,6 +78,7 @@ export default function CanvasMenu() {
                         </>}
 
                     {(menuNumber === 5) && 'asdasd'}
+                    {(menuNumber === 6) && '103516516'}
                 </div>
             </div>
             <div className={`canvas-depth2-wrap ${(menuNumber === 2 || menuNumber === 3 || menuNumber === 4) ? 'active' : ''}`}>

src/components/canvas/MenuDepth01.jsx

@@ -1,12 +1,15 @@
 'use client'
 
+import { useRecoilState } from "recoil";
 import { ToggleonMouse } from "../header/Header"
+import { modalState } from "@/store/modalAtom";
 
 export default function MenuDepth01(){
+    const [modalOption, setModalOption] = useRecoilState(modalState);
     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"><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>

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

@@ -2,20 +2,24 @@
 
 import { useState } from "react";
 import WithDraggable from "@/components/common/draggable/withDraggable";
+import { modalState } from "@/store/modalAtom";
+import { useRecoilState } from "recoil";
 
 
 export default function OuterLineWall (){
+    const [modalOption, setModalOption] = useRecoilState(modalState);
     const [buttonAct, setButtonAct] = useState(1);
     const [close, setClose] = useState(false)
     const HandleClickClose = () => {
         setClose(true)
         setTimeout(() => {
+            setModalOption({...modalOption, outerwall: false})
             setClose(false);
         }, 180)
     }
     return(
         <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap ssm ${close ? 'unmount' : ''} `}>
+            <div className={`modal-pop-wrap ssm ${modalOption.outerwall ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
                 <div className="modal-head">
                     <h1 className="title">外壁線を描</h1>
                     <button className="modal-close" onClick={HandleClickClose}>닫기</button>

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

@@ -4,6 +4,8 @@ import { useState } from "react";
 import FirstOption from "./FirstOption";
 import SecondOption from "./SecondOption";
 import WithDraggable from "@/components/common/draggable/withDraggable";
+import { useRecoilState } from "recoil";
+import { modalState } from "@/store/modalAtom";
 
 const HandleBtnClick = (e) => {
     const button = e.target.closest('button');
@@ -18,17 +20,19 @@ const propsClick = {
 }
 
 export default function SettingModal01 (){
+    const [modalOption, setModalOption] = useRecoilState(modalState);
     const [buttonAct, setButtonAct] = useState(1);
     const [close, setClose] = useState(false)
     const HandleClickClose = () => {
         setClose(true)
         setTimeout(() => {
+            setModalOption({...modalOption, option: false})
             setClose(false);
         }, 180)
     }
     return(
         <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap sm ${close ? 'unmount' : ''} `}>
+            <div className={`modal-pop-wrap sm ${modalOption.option ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
                 <div className="modal-head">
                     <h1 className="title">Canvas設定</h1>
                     <button className="modal-close" onClick={HandleClickClose}>닫기</button>

src/store/modalAtom.js

@@ -2,14 +2,9 @@ import { atom } from 'recoil'
 
 export const modalState = atom({
   key: 'modalState',
-  default: false,
+  default: {
+    option: true,
+    outerwall: true,
+  },
 })
 
-export const modalContent = atom({
-  key: 'modalContent',
-  default: (
-    <>
-      <div>test</div>
-    </>
-  ),
-})

src/styles/_contents.scss

@@ -93,9 +93,9 @@
                     background-repeat: no-repeat;
                     background-size: 15px 15px;
                     transition: all .17s ease-in-out;
-                    &.btn01{background-image: url(../../public/static/images/canvas/side_icon01.svg);}
+                    &.btn01{background-image: url(../../public/static/images/canvas/side_icon03.svg);}
                     &.btn02{background-image: url(../../public/static/images/canvas/side_icon02.svg);}
-                    &.btn03{background-image: url(../../public/static/images/canvas/side_icon03.svg);}
+                    &.btn03{background-image: url(../../public/static/images/canvas/side_icon01.svg);}
                     &.btn04{background-image: url(../../public/static/images/canvas/side_icon04.svg);}
                     &.btn05{background-image: url(../../public/static/images/canvas/side_icon05.svg);}
                     &.btn06{background-image: url(../../public/static/images/canvas/side_icon06.svg);}