context menu 추가

src/app/canvas/page.jsx

@@ -54,6 +54,7 @@ import AdditionalColumnDelete from '@/components/canvas/modal/additionalfunction
 import AdditionalColumnEdit from '@/components/canvas/modal/additionalfunction/moduleadditional/AdditionalColumnEdit'
 import AdditionalBundleDelete from '@/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleDelete'
 import AdditionalBundleEdit from '@/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleEdit'
+import CanvasContextMenu from '@/components/canvas/CanvasContextMenu'
 
 export default function CanvasPage() {
     const modalOption = useRecoilValue(modalState);
@@ -67,6 +68,9 @@ export default function CanvasPage() {
                     <div className="canvas-content">
                         <CanvasLayout menuValue={menuValue}/>
                     </div>
+                    {/* 우클릭 context menu */}
+                    <CanvasContextMenu/>
+                    
                     {/* 패널 배치 집계 */}
                     {/* <Penal01/> */}
                     {/* <Penal02/> */}
@@ -169,7 +173,7 @@ export default function CanvasPage() {
                     {/* <AdditionalColumnDelete/> */}
                     {/* <AdditionalColumnEdit/> */}
                     {/* <AdditionalBundleDelete/> */}
-                    <AdditionalBundleEdit/>
+                    {/* <AdditionalBundleEdit/> */}
                 </div>
             </div>
         </div>

src/components/canvas/CanvasContextMenu.jsx

@@ -0,0 +1,22 @@
+export default function CanvasContextMenu() {
+    return(
+        <div className="context-menu-wrap" style={{position: 'absolute', top: '200px', left: '200px'}}>
+            <ul>
+                <li>屋根材の配置</li>
+                <li>屋根材の削除</li>
+                <li>材全体を削除</li>
+                <li>選択∙移動</li>
+                <li>外壁の削除</li>
+            </ul>
+            <ul>
+                <li>サイズ変更</li>
+                <li>補助線移動(M)</li>
+                <li>補助線のコピー(C)</li>
+                <li>補助線削除(D)</li>
+                <li>線垂直二等分線</li>
+                <li>補助線切削</li>
+                <li>補助線全体を削除</li>
+            </ul>
+        </div>
+    )
+}

src/styles/_canvasside.scss

@@ -0,0 +1,106 @@
+// 패널 배치 집계
+.penal-wrap{
+    position: fixed;
+    top: 200px;
+    left: 50px;
+    z-index: 999999;
+    width: 237px;
+    height: 40px;
+    line-height: 40px;
+    background-color: #fff;
+    border: 1px solid #DFDFDF;
+    padding: 0 34px 0 10px;
+    border-radius: 2px;
+    box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
+    cursor: pointer;
+    &::before{
+        content: '';
+        position: absolute;
+        top: 50%;
+        right: 12px;
+        transform: translateY(-50%);
+        width: 10px;
+        height: 6px;
+        background: url(../../public/static/images/canvas/penal_arr.svg)no-repeat center;
+        background-size: cover;
+    }
+    h2{
+        font-size: 12px;
+        font-weight: 500;
+        color: #3D3D3D;
+    }
+    .penal-table-wrap{
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: -1px;
+        min-width: calc(100% + 2px);
+        background-color: #3D3D3D;
+        border: 1px solid #3D3D3D;
+        padding: 20px;
+        .penal-table{
+            table-layout: fixed;
+            border-collapse: collapse;
+            thead{
+                th{
+                    text-align: center;
+                    background-color:rgba(255, 255, 255, 0.05);
+                    font-size: 12px;
+                    font-weight: 500;
+                    color: #fff;
+                    border: 1px solid #505050;
+                }
+            }
+            tbody{
+                td{
+                    font-size: 12px;
+                    color: #fff;
+                    font-weight: 400;
+                    text-align: center;
+                    padding: 0 10px;
+                    border: 1px solid #505050;
+                }
+            }
+        }
+    }
+    &.act{
+        border: 1px solid #3D3D3D;
+        background-color: #3D3D3D;
+        h2{
+            color: #fff;
+        }
+        &::before{
+            background: url(../../public/static/images/canvas/penal_arr_white.svg)no-repeat center;
+        }
+        .penal-table-wrap{
+            display: block;
+        }
+    }
+}
+
+// context menu
+.context-menu-wrap{
+    min-width: 238px;
+    border-radius: 4px;
+    border: 1px solid #E9E9E9;
+    background: #FFF;
+    box-shadow: 0px 6px 14px 0px rgba(0, 0, 0, 0.05);
+    ul{
+        padding: 17px 0;
+        border-bottom: 1px solid #E9E9E9;
+        &:last-child{
+            border: none;
+        }
+        li{
+            padding: 4px 30px;
+            cursor: pointer;
+            font-size: 12px;
+            font-weight: 400;
+            color: #101010;
+            &:hover{
+                color: #fff;
+                background-color: #0D99FF;
+            }
+        }
+    }
+}

src/styles/_contents.scss

@@ -850,83 +850,3 @@
     }
 }
 
-// 패널 배치 집계
-
-.penal-wrap{
-    position: fixed;
-    top: 200px;
-    left: 50px;
-    z-index: 999999;
-    width: 237px;
-    height: 40px;
-    line-height: 40px;
-    background-color: #fff;
-    border: 1px solid #DFDFDF;
-    padding: 0 34px 0 10px;
-    border-radius: 2px;
-    box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
-    cursor: pointer;
-    &::before{
-        content: '';
-        position: absolute;
-        top: 50%;
-        right: 12px;
-        transform: translateY(-50%);
-        width: 10px;
-        height: 6px;
-        background: url(../../public/static/images/canvas/penal_arr.svg)no-repeat center;
-        background-size: cover;
-    }
-    h2{
-        font-size: 12px;
-        font-weight: 500;
-        color: #3D3D3D;
-    }
-    .penal-table-wrap{
-        display: none;
-        position: absolute;
-        top: 100%;
-        left: -1px;
-        min-width: calc(100% + 2px);
-        background-color: #3D3D3D;
-        border: 1px solid #3D3D3D;
-        padding: 20px;
-        .penal-table{
-            table-layout: fixed;
-            border-collapse: collapse;
-            thead{
-                th{
-                    text-align: center;
-                    background-color:rgba(255, 255, 255, 0.05);
-                    font-size: 12px;
-                    font-weight: 500;
-                    color: #fff;
-                    border: 1px solid #505050;
-                }
-            }
-            tbody{
-                td{
-                    font-size: 12px;
-                    color: #fff;
-                    font-weight: 400;
-                    text-align: center;
-                    padding: 0 10px;
-                    border: 1px solid #505050;
-                }
-            }
-        }
-    }
-    &.act{
-        border: 1px solid #3D3D3D;
-        background-color: #3D3D3D;
-        h2{
-            color: #fff;
-        }
-        &::before{
-            background: url(../../public/static/images/canvas/penal_arr_white.svg)no-repeat center;
-        }
-        .penal-table-wrap{
-            display: block;
-        }
-    }
-}

src/styles/contents.scss

@@ -1,3 +1,4 @@
 @import '_contents.scss';
 @import '_modal.scss';
-@import '_table.scss';
+@import '_table.scss';
+@import '_canvasside.scss';