From a34d183d59d7ff72084e189ba85b9a00593ffb66 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: Fri, 18 Oct 2024 11:20:49 +0900
Subject: [PATCH] =?UTF-8?q?canvas=20frame=20=ED=8B=80=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/canvas/page.jsx                   | 16 +++---
 src/components/canvas/CanvasEstimate.jsx  |  1 -
 src/components/canvas/CanvasFrame.jsx     |  4 +-
 src/components/canvas/CanvasLayout.jsx    |  2 +-
 src/components/canvas/CanvasSimulator.jsx |  1 -
 src/styles/_contents.scss                 | 64 +++++++++++++++--------
 6 files changed, 55 insertions(+), 33 deletions(-)

diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx
index de5cefa..7a409f0 100644
--- a/src/app/canvas/page.jsx
+++ b/src/app/canvas/page.jsx
@@ -62,6 +62,7 @@ import LineOption from '@/components/canvas/modal/font_lineoption/LineOption'
 import ShapeSizeOption from '@/components/canvas/modal/font_lineoption/ShapeSizeOption'
 import RoofSelect from '@/components/canvas/modal/roofselect/RoofSelect'
 import SizeChange from '@/components/canvas/modal/sizechange/SizeChang'
+import Footer from '@/components/layout/Footer'
 
 export default function CanvasPage() {
     const modalOption = useRecoilValue(modalState);
@@ -72,7 +73,7 @@ export default function CanvasPage() {
             <div className="content">
                 <div className={`canvas-wrap ${menuValue === 5 || menuValue === 6 ? 'sub-wrap' : ''}`}>
                     <CanvasMenu setMenuValue={setMenuValue}/>
-                    <div className="canvas-content">
+                    <div className={`canvas-content ${(menuValue === 2 || menuValue === 3 || menuValue === 4) ? 'active' : ""}`}>
                         <CanvasLayout menuValue={menuValue}/>
                     </div>
                     {/* 우클릭 context menu */}
@@ -185,17 +186,20 @@ export default function CanvasPage() {
                     {/* <ColorSelect/> */}
 
                     {/* 글꼴 설정, 치수선 설정 */}
-                    <FontOption/>
-                    <LineOption/>
-                    <ShapeSizeOption/>
+                    {/* <FontOption/> */}
+                    {/* <LineOption/> */}
+                    {/* <ShapeSizeOption/> */}
 
                     {/* 지붕재 선택 */}
-                    <RoofSelect/>
+                    {/* <RoofSelect/> */}
 
                     {/* 사이즈 변경 */}
-                    <SizeChange/>
+                    {/* <SizeChange/> */}
                 </div>
             </div>
+            {menuValue === 5 && <Footer/>}
+            {menuValue === 6 && <Footer/>}
+            
         </div>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/CanvasEstimate.jsx b/src/components/canvas/CanvasEstimate.jsx
index 7895249..946e184 100644
--- a/src/components/canvas/CanvasEstimate.jsx
+++ b/src/components/canvas/CanvasEstimate.jsx
@@ -501,7 +501,6 @@ export default function CanvasEstimate() {
                     </div>
                 </div>
             </div>
-            <Footer/>
 
             {/* 제품 특이사항 */}
             {/* <ProductFeaturesPop/> */}
diff --git a/src/components/canvas/CanvasFrame.jsx b/src/components/canvas/CanvasFrame.jsx
index 455f1db..7abc9c0 100644
--- a/src/components/canvas/CanvasFrame.jsx
+++ b/src/components/canvas/CanvasFrame.jsx
@@ -2,7 +2,9 @@
 export default function CanvasFrame () {
     return(
         <div className="canvas-frame">
-            <canvas></canvas>
+            <div className="canvas-container" style={{position: 'relative', width: '1600px', height: '1000px'}}>
+                <canvas></canvas>
+            </div>
         </div>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/CanvasLayout.jsx b/src/components/canvas/CanvasLayout.jsx
index ce7900b..c8d4c92 100644
--- a/src/components/canvas/CanvasLayout.jsx
+++ b/src/components/canvas/CanvasLayout.jsx
@@ -24,7 +24,7 @@ export default function CanvasLayout ({menuValue}) {
 
     return(
         <div className="canvas-layout">
-            <div className="canvas-page-list">
+            <div className={`canvas-page-list ${(menuValue === 2 || menuValue === 3 || menuValue === 4) ? 'active' : ""}`}>
                 <div className="canvas-plane-wrap">
                     {plans.map((plan, idx) => (
                         <button 
diff --git a/src/components/canvas/CanvasSimulator.jsx b/src/components/canvas/CanvasSimulator.jsx
index 010446f..984806d 100644
--- a/src/components/canvas/CanvasSimulator.jsx
+++ b/src/components/canvas/CanvasSimulator.jsx
@@ -245,7 +245,6 @@ export default function CanvasSimulator() {
                     </div>
                 </div>
             </div>
-            <Footer/>
         </div>
     )
 }
\ No newline at end of file
diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index 37233d1..08347d0 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -1,29 +1,32 @@
 // CanvasPage
-.canvas-wrap{
-    height: calc(100vh - 47px);
-    display: flex;
-    flex-direction: column;
-    .canvas-content{
-        flex: 1 1 auto;
-        .canvas-layout{
-            height: 100%;
-        }
-    }
-    &.sub-wrap{
-        overflow: hidden;
-        .canvas-content{
-            height: calc(100% - 47px);
-        }
-    }
-}
+// .canvas-wrap{
+//     height: calc(100vh - 47px);
+//     display: flex;
+//     flex-direction: column;
+//     .canvas-content{
+//         flex: 1 1 auto;
+//         .canvas-layout{
+//             height: 100%;
+//         }
+//     }
+//     &.sub-wrap{
+//         overflow: hidden;
+//         .canvas-content{
+//             height: calc(100% - 47px);
+//         }
+//     }
+// }
 // CanvasMenu
 .canvas-menu-wrap{
-    position: relative;
+    position: fixed;
+    top: 46px;
+    left: 0;
     display: block;
     width: 100%;
     padding-bottom: 0;
     background-color: #383838;
     transition: padding .17s ease-in-out;
+    z-index: 999;
     .canvas-menu-inner{
         position: relative;
         display: flex;
@@ -302,12 +305,28 @@
 }
 
 // canvas-layout
+.canvas-content{
+    padding-top: 46.8px;
+    transition: all .17s ease-in-out;
+    &.active{
+        padding-top: calc(46.8px + 50px);
+    }
+}
 .canvas-layout{
+    padding-top: 37px;
     .canvas-page-list{
+        position: fixed;
+        top: 92.8px;
+        left: 0;
         display: flex;
         background-color: #1C1C1C;
         border-top: 1px solid #000;
         width: 100%;
+        transition: all .17s ease-in-out;
+        z-index: 999;
+        &.active{
+            top: calc(92.8px + 50px);
+        }
         .canvas-plane-wrap{
             display: flex;
             align-items: center;
@@ -382,10 +401,11 @@
 }
 
 .canvas-frame{
-    position: relative;
-    height: calc(100% - 36.5px);
-    background-color: #fff;
+    // position: relative;
+    // height: calc(100% - 36.5px);
+    background-color: #F4F4F7;
     canvas{
+        background-color: #fff;
         position: absolute;
         top: 0;
         left: 0;
@@ -514,8 +534,6 @@
     &.estimate{
         display: flex;
         flex-direction: column;
-        height: calc(100% - 36.5px);
-        overflow-y: auto;
         padding-top: 0;
         .sub-content-inner{
             flex: 1;