From 63db3e2864a563c08ea4050d091500e09ea8f7a6 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, 24 Sep 2024 14:22:58 +0900
Subject: [PATCH] =?UTF-8?q?cavas=20menu=EC=97=90=20=EB=94=B0=EB=A5=B8=20?=
 =?UTF-8?q?=EB=A9=94=EB=89=B4=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/canvas/page.jsx                  | 12 +++++++-----
 src/app/main/page.jsx                    |  2 +-
 src/components/canvas/CanvasEstimate.jsx |  5 +++++
 src/components/canvas/CanvasLayout.jsx   |  6 ++++--
 src/components/canvas/CanvasMenu.jsx     |  7 +++++--
 src/styles/_contents.scss                |  2 +-
 6 files changed, 23 insertions(+), 11 deletions(-)
 create mode 100644 src/components/canvas/CanvasEstimate.jsx

diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx
index 356b647..a5159d0 100644
--- a/src/app/canvas/page.jsx
+++ b/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.outerwall && <OuterLineWall/>} 확인용 숨김처리*/}
+                    {/* {modalOption.option && <SettingModal01/>}
+                    {modalOption.outerwall && <OuterLineWall/>} 확인용 숨김처리
                     {modalOption.gridoption && <GridOption/>}
                     {modalOption.gridcopy && <GridCopy/>}
-                    {modalOption.gridmove && <GridMove/>}
+                    {modalOption.gridmove && <GridMove/>} */}
                 </div>
             </div>
         </div>
diff --git a/src/app/main/page.jsx b/src/app/main/page.jsx
index 5fc5f47..abf5aa9 100644
--- a/src/app/main/page.jsx
+++ b/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">
diff --git a/src/components/canvas/CanvasEstimate.jsx b/src/components/canvas/CanvasEstimate.jsx
new file mode 100644
index 0000000..a22d401
--- /dev/null
+++ b/src/components/canvas/CanvasEstimate.jsx
@@ -0,0 +1,5 @@
+export default function CanvasEstimate() {
+    return(
+        <></>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/CanvasLayout.jsx b/src/components/canvas/CanvasLayout.jsx
index 5be6a11..d9e875b 100644
--- a/src/components/canvas/CanvasLayout.jsx
+++ b/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>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/CanvasMenu.jsx b/src/components/canvas/CanvasMenu.jsx
index 5e0688c..eccc9ca 100644
--- a/src/components/canvas/CanvasMenu.jsx
+++ b/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">
diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index 6b7a506..ad9e3f3 100644
--- a/src/styles/_contents.scss
+++ b/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;