cavas menu에 따른 메뉴 변경

src/app/canvas/page.jsx

@@ -10,24 +10,26 @@ import SettingModal01 from '@/components/canvas/modal/settoing01/SettingModal01'
 import Header from '@/components/layout/Header'
 import { modalState } from '@/store/modalAtom'
 import '@/styles/contents.scss'
+import { useState } from 'react'
 import { useRecoilValue } from 'recoil'
 
 export default function CanvasPage() {
     const modalOption = useRecoilValue(modalState);
+    const [menuValue, setMenuValue] = useState(null);
     return(
         <div className="wrap">
             <Header/>
             <div className="content">
                 <div className="canvas-wrap">
-                    <CanvasMenu/>
+                    <CanvasMenu setMenuValue={setMenuValue}/>
                     <div className="canvas-content">
-                        <CanvasLayout/>
+                        <CanvasLayout menuValue={menuValue}/>
                     </div>
-                    {modalOption.option && <SettingModal01/>}
+                    {/* {modalOption.option && <SettingModal01/>}
-                    {/* {modalOption.outerwall && <OuterLineWall/>} 확인용 숨김처리*/}
+                    {modalOption.outerwall && <OuterLineWall/>} 확인용 숨김처리
                     {modalOption.gridoption && <GridOption/>}
                     {modalOption.gridcopy && <GridCopy/>}
-                    {modalOption.gridmove && <GridMove/>}
+                    {modalOption.gridmove && <GridMove/>} */}
                 </div>
             </div>
         </div>

src/app/main/page.jsx

@@ -15,7 +15,7 @@ export default function MainPage() {
                             <div className="store-id-title">販売店ID / 販売店名</div>
                         </div>
                         <span className="store-arr"></span>
-                        <div className="store-id-name">ナカザワ建販株式会社（その他 )</div>
+                        <div className="store-id-name">X174 / ナカザワ建販株式会社（その他 )</div>
                     </div>
                     <div className="main-search-wrap">
                         <div className="search-raido-wrap">

src/components/canvas/CanvasEstimate.jsx

@@ -0,0 +1,5 @@
+export default function CanvasEstimate() {
+    return(
+        <></>
+    )
+}

src/components/canvas/CanvasLayout.jsx

@@ -2,8 +2,9 @@
 
 import { useState } from "react"
 import CanvasFrame from "./CanvasFrame";
+import CanvasEstimate from "./CanvasEstimate";
 
-export default function CanvasLayout () {
+export default function CanvasLayout ({menuValue}) {
     const [plans, setPlans] = useState([{ id: 0, name: 'Plan 1' }, { id: 1, name: 'Plan 2' }, { id: 2, name: 'Plan 3' }]);
     const [idxNum, setIdxNum] = useState(null);
 
@@ -39,7 +40,8 @@ export default function CanvasLayout () {
                     <span></span>
                 </button>
             </div>
-            <CanvasFrame/>
+            {menuValue !== 5 && menuValue !== 6 && <CanvasFrame/>}
+            {menuValue === 5 && <CanvasEstimate/>}
         </div>
     )
 }

src/components/canvas/CanvasMenu.jsx

@@ -1,12 +1,12 @@
 'use client'
-import { useState } from "react";
+import { useEffect, 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() {
+export default function CanvasMenu({setMenuValue}) {
     const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state
     const [menuNumber, setMenuNumber] = useState(null);
     const [vertical, setVertical] = useState(true);
@@ -20,6 +20,9 @@ export default function CanvasMenu() {
             setMenuNumber(null)
         }
     }
+    useEffect(() => {
+        setMenuValue(menuNumber);
+    }, [menuNumber])
     return(
         <div className={`canvas-menu-wrap ${(menuNumber === 2 || menuNumber === 3 || menuNumber === 4) ? 'active' : ""}`}>
             <div className="canvas-menu-inner">

src/styles/_contents.scss

@@ -3,7 +3,6 @@
     height: calc(100vh - 47px);
     display: flex;
     flex-direction: column;
-    background-color: #fff;
     .canvas-content{
         flex: 1 1 auto;
         .canvas-layout{
@@ -379,6 +378,7 @@
 .canvas-frame{
     position: relative;
     height: calc(100% - 36.5px);
+    background-color: #fff;
     canvas{
         position: absolute;
         top: 0;