canvas page 퍼블리싱 추가

public/static/images/canvas/plan_close_black.svg

@@ -0,0 +1,4 @@
+<svg width="7" height="8" viewBox="0 0 7 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 1.5L1 6.5" stroke="#101010" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M1 1.5L6 6.5" stroke="#101010" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

public/static/images/canvas/plan_close_gray.svg

@@ -0,0 +1,4 @@
+<svg width="7" height="8" viewBox="0 0 7 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 1.5L1 6.5" stroke="#AAAAAA" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M1 1.5L6 6.5" stroke="#AAAAAA" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

public/static/images/canvas/plane_add.svg

@@ -0,0 +1,4 @@
+<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.50001 0.964466V8.03553" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M0.964466 4.5H8.03553" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

src/app/canvas/page.jsx

@@ -1,4 +1,5 @@
-import CanvasMenu from '@/components/canvas_menu/CanvasMenu'
+import CanvasLayout from '@/components/canvas/CanvasLayout'
+import CanvasMenu from '@/components/canvas/CanvasMenu'
 import Header from '@/components/header/Header'
 import '@/styles/style.scss'
 
@@ -9,7 +10,9 @@ export default function CanvasPage() {
             <div className="content">
                 <div className="canvas-wrap">
                     <CanvasMenu/>
-                    asdasd
+                    <div className="canvas-content">
+                        <CanvasLayout/>
+                    </div>
                 </div>
             </div>
         </div>

src/components/canvas/CanvasFrame.jsx

@@ -0,0 +1,7 @@
+export default function CanvasFrame () {
+    return(
+        <div className="canvas-frame">
+            <canvas></canvas>
+        </div>
+    )
+}

src/components/canvas/CanvasLayout.jsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { useState } from "react"
+import CanvasFrame from "./CanvasFrame";
+
+export default function CanvasLayout () {
+    const [plans, setPlans] = useState([{ id: 0, name: 'Plan 1' }, { id: 1, name: 'Plan 2' }, { id: 2, name: 'Plan 3' }]);
+    const [idxNum, setIdxNum] = useState(null);
+
+    const onClickPlane = (num) => {
+        setIdxNum(num);
+    }
+
+    const handleDeletePlan = (e, id) => {
+        e.stopPropagation(); // 이벤트 버블링 방지
+        setPlans(plans.filter(plan => plan.id !== id)); // 삭제할 아이디와 다른 아이템만 남김
+    }
+
+    const addNewPlan = () => {
+        setPlans([...plans, { id: plans.length, name: `Plan ${plans.length + 1}` }]);
+    }
+
+    return(
+        <div className="canvas-layout">
+            <div className="canvas-page-list">
+                <div className="canvas-plane-wrap">
+                    {plans.map((plan, idx) => (
+                        <button 
+                            key={plan.id} 
+                            className={`canvas-page-box ${idx === idxNum ? 'on' : ''}`} 
+                            onClick={() => onClickPlane(idx)}
+                        >
+                            <span>{plan.name}</span>
+                            <i className="close" onClick={(e) => handleDeletePlan(e, plan.id)}></i>
+                        </button>
+                    ))}
+                </div>
+                <button className="plane-add" onClick={addNewPlan}>
+                    <span></span>
+                </button>
+            </div>
+            <CanvasFrame/>
+        </div>
+    )
+}

src/components/canvas/CanvasMenu.jsx

@@ -15,25 +15,25 @@ export default function CanvasMenu() {
         }
     }
     return(
-        <div className="canvas-menu-wrap">
+        <div className={`canvas-menu-wrap ${menuNumber !== null ? 'active' : ""}`}>
             <div className="canvas-menu-inner">
                 <ul className="canvas-menu-list">
-                    <li className={`canvas-menu-item ${menuNumber === 1 && 'active'}`} onClick={() => onClickNav(1)}>
+                    <li className={`canvas-menu-item ${menuNumber === 1 ? 'active' : ''}`} onClick={() => onClickNav(1)}>
                         <button><span className="menu-icon con01"></span>配置面 初期設定</button>
                     </li>
-                    <li className={`canvas-menu-item ${menuNumber === 2 && 'active'}`} onClick={() => onClickNav(2)}>
+                    <li className={`canvas-menu-item ${menuNumber === 2 ? 'active' : ''}`} onClick={() => onClickNav(2)}>
                         <button><span className="menu-icon con02"></span>配置面 初期設定</button>
                     </li>
-                    <li className={`canvas-menu-item ${menuNumber === 3 && 'active'}`} onClick={() => onClickNav(3)}>
+                    <li className={`canvas-menu-item ${menuNumber === 3 ? 'active' : ''}`} onClick={() => onClickNav(3)}>
                         <button><span className="menu-icon con03"></span>配置面</button>
                     </li>
-                    <li className={`canvas-menu-item ${menuNumber === 4 && 'active'}`} onClick={() => onClickNav(4)}>
+                    <li className={`canvas-menu-item ${menuNumber === 4 ? 'active' : ''}`} onClick={() => onClickNav(4)}>
                         <button><span className="menu-icon con04"></span>モジュール回路構成</button>
                     </li>
-                    <li className={`canvas-menu-item ${menuNumber === 5 && 'active'}`} onClick={() => onClickNav(5)}>
+                    <li className={`canvas-menu-item ${menuNumber === 5 ? 'active' : ''}`} onClick={() => onClickNav(5)}>
                         <button><span className="menu-icon con05"></span>発展シミュレーション</button>
                     </li>
-                    <li className={`canvas-menu-item ${menuNumber === 6 && 'active'}`} onClick={() => onClickNav(6)}>
+                    <li className={`canvas-menu-item ${menuNumber === 6 ? 'active' : ''}`} onClick={() => onClickNav(6)}>
                         <button><span className="menu-icon con06"></span>見積</button>
                     </li>
                 </ul>
@@ -61,7 +61,7 @@ export default function CanvasMenu() {
                     </div>
                 </div>
             </div>
-            <div className={`canvas-depth2-wrap ${menuNumber !== null && 'active'}`}>
+            <div className={`canvas-depth2-wrap ${menuNumber !== null ? 'active' : ''}`}>
                 {menuNumber === 1 && <MenuDepth01/>}
                 {menuNumber === 2 && <MenuDepth01/>}
                 {menuNumber === 3 && <MenuDepth01/>}

src/styles/_contents.scss

@@ -1,34 +1,46 @@
 // CanvasPage
-
+.canvas-wrap{
+    height: calc(100vh - 47px);
+    display: flex;
+    flex-direction: column;
+    .canvas-content{
+        flex: 1 1 auto;
+        .canvas-layout{
+            height: 100%;
+        }
+    }
+}
 // CanvasMenu
 .canvas-menu-wrap{
+    position: relative;
     display: block;
     width: 100%;
-    background-color: #2C2C2C;
+    padding-bottom: 0;
+    background-color: #383838;
+    transition: padding .17s ease-in-out;
     .canvas-menu-inner{
         position: relative;
         display: flex;
-        height: 46px;
         align-items: center;
         padding: 0 40px 0 20px;
-        background-color: inherit;
+        background-color: #2C2C2C;
         z-index: 999;
         .canvas-menu-list{
             display: flex;
             align-items: center;
-            height: inherit;
+            height: 100%;
             .canvas-menu-item{
                 display: flex;
                 align-items: center;
-                height: inherit;
+                height: 100%;
                 button{
                     display: flex;
                     align-items: center;
                     font-size: 12px;
-                    height: inherit;
+                    height: 100%;
                     color: #fff;
                     font-weight: 600;
-                    padding: 0 20px;
+                    padding: 15px 20px;
                     opacity: 0.55;
                     transition: all .17s ease-in-out;
                     .menu-icon{
@@ -129,10 +141,12 @@
         }
     }
     .canvas-depth2-wrap{
-        position: relative;
+        position: absolute;
-        height: 50px;
+        top: -100%;
+        left: 0;
         background-color: #383838;
-        transform: translateY(-100%);
+        width: 100%;
+        height: 50px;
         transition: all .17s ease-in-out;
         .canvas-depth2-inner{
             display: flex;
@@ -179,14 +193,17 @@
                 display: flex;
                 align-items: center;
                 margin-left: auto;
+                height: 100%;
                 .depth2-btn-box{
                     display: flex;
                     align-items: center;
                     margin-right: 34px;
+                    height: 100%;
                     button{
                         position: relative;
                         font-size: 12px;
                         font-weight: 400;
+                        height: 100%;
                         color: #fff;
                         padding-right: 12px;
                         &:after{
@@ -207,7 +224,102 @@
             }
         }
         &.active{
-            transform: translateY(0);
+            top: 47px;
+        }
+    }
+    &.active{
+        padding-bottom: 50px;
+    }
+}
+
+// canvas-layout
+.canvas-layout{
+    .canvas-page-list{
+        display: flex;
+        background-color: #1C1C1C;
+        border-top: 1px solid #000;
+        width: 100%;
+        .canvas-plane-wrap{
+            display: flex;
+            align-items: center;
+            max-width: calc(100% - 45px);
+            .canvas-page-box{
+                display: flex;
+                align-items: center;
+                background-color: #1c1c1c;
+                padding: 9.6px 20px;
+                border-right:1px solid #000;
+                min-width: 0;
+                transition: all .17s ease-in-out;
+                span{
+                    display: flex;
+                    align-items: center;
+                    width: 100%;
+                    font-size: 12px;
+                    font-family: 'Pretendard', sans-serif;
+                    color: #AAA;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
+                .close{
+                    flex: none;
+                    display: block;
+                    width: 7px;
+                    height: 8px;
+                    margin-left: 15px;
+                    background: url(../../public/static/images/canvas/plan_close_gray.svg)no-repeat center;
+                    background-size: cover;
+                }
+                &.on{
+                    background-color: #fff;
+                    span{
+                        font-weight: 600;
+                        color: #101010;
+                    }
+                    .close{
+                        background: url(../../public/static/images/canvas/plan_close_black.svg)no-repeat center;
+                    }
+                    &:hover{
+                        background-color: #fff;
+                    }
+                }
+                &:hover{
+                    background-color: #000;
+                }
+            }
+        }
+        .plane-add{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 45px;
+            padding: 13.5px 0;
+            background-color: #1C1C1C;
+            border-right: 1px solid #000;
+            transition: all .17s ease-in-out;
+            span{
+                display: block;
+                width: 9px;
+                height: 9px;
+                background: url(../../public/static/images/canvas/plane_add.svg)no-repeat center;
+                background-size: cover;
+            }
+            &:hover{
+                background-color: #000;
+            }
         }
     }
 }
+
+.canvas-frame{
+    position: relative;
+    height: calc(100% - 35.5px);
+    canvas{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+}

src/styles/_layout.scss

@@ -209,3 +209,4 @@ header{
         }
     }
 }
+