canvas frame 틀 수정

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/>
+                    {/* <FontOption/> */}
-                    <LineOption/>
+                    {/* <LineOption/> */}
-                    <ShapeSizeOption/>
+                    {/* <ShapeSizeOption/> */}
 
                     {/* 지붕재 선택 */}
-                    <RoofSelect/>
+                    {/* <RoofSelect/> */}
 
                     {/* 사이즈 변경 */}
-                    <SizeChange/>
+                    {/* <SizeChange/> */}
                 </div>
             </div>
+            {menuValue === 5 && <Footer/>}
+            {menuValue === 6 && <Footer/>}
+            
         </div>
     )
 }

src/components/canvas/CanvasEstimate.jsx

@@ -501,7 +501,6 @@ export default function CanvasEstimate() {
                     </div>
                 </div>
             </div>
-            <Footer/>
 
             {/* 제품 특이사항 */}
             {/* <ProductFeaturesPop/> */}

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>
     )
 }

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 

src/components/canvas/CanvasSimulator.jsx

@@ -245,7 +245,6 @@ export default function CanvasSimulator() {
                     </div>
                 </div>
             </div>
-            <Footer/>
         </div>
     )
 }

src/styles/_contents.scss

@@ -1,29 +1,32 @@
 // CanvasPage
-.canvas-wrap{
+// .canvas-wrap{
-    height: calc(100vh - 47px);
+//     height: calc(100vh - 47px);
-    display: flex;
+//     display: flex;
-    flex-direction: column;
+//     flex-direction: column;
-    .canvas-content{
+//     .canvas-content{
-        flex: 1 1 auto;
+//         flex: 1 1 auto;
-        .canvas-layout{
+//         .canvas-layout{
-            height: 100%;
+//             height: 100%;
-        }
+//         }
-    }
+//     }
-    &.sub-wrap{
+//     &.sub-wrap{
-        overflow: hidden;
+//         overflow: hidden;
-        .canvas-content{
+//         .canvas-content{
-            height: calc(100% - 47px);
+//             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;
+    // position: relative;
-    height: calc(100% - 36.5px);
+    // height: calc(100% - 36.5px);
-    background-color: #fff;
+    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;