diff --git a/src/components/common/context-menu/QContextMenu.jsx b/src/components/common/context-menu/QContextMenu.jsx
index 9654c514..bb721810 100644
--- a/src/components/common/context-menu/QContextMenu.jsx
+++ b/src/components/common/context-menu/QContextMenu.jsx
@@ -1,5 +1,6 @@
 'use client'
-import { Children, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
+import '@/styles/contents.scss'
 
 export default function QContextMenu(props) {
   const { contextRef, canvasProps } = props
@@ -7,7 +8,7 @@ export default function QContextMenu(props) {
   //   const children = useRecoilValue(modalContent)
   const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 })
 
-  const activeObject = canvasProps.getActiveObject() //액티브된 객체를 가져옴
+  const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴
 
   let contextType = ''
 
@@ -26,7 +27,8 @@ export default function QContextMenu(props) {
     const handleContextMenu = (e) => {
       e.preventDefault() //기존 contextmenu 막고
       setContextMenu({ visible: true, x: e.pageX, y: e.pageY })
-      canvasProps.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
+      console.log(111, canvasProps)
+      canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
     }
 
     const handleClick = (e) => {
@@ -41,7 +43,7 @@ export default function QContextMenu(props) {
       }
     }
 
-    canvasProps.upperCanvasEl.addEventListener('contextmenu', handleContextMenu)
+    canvasProps?.upperCanvasEl.addEventListener('contextmenu', handleContextMenu)
     document.addEventListener('click', handleClick)
     document.addEventListener('click', handleOutsideClick)
 
@@ -57,7 +59,7 @@ export default function QContextMenu(props) {
       lockMovementY: false, // Y 축 이동 잠금
     })
 
-    canvasProps.on('object:modified', function (e) {
+    canvasProps?.on('object:modified', function (e) {
       activeObject.set({
         lockMovementX: true, // X 축 이동 잠금
         lockMovementY: true, // Y 축 이동 잠금
@@ -89,19 +91,19 @@ export default function QContextMenu(props) {
   return (
     <>
       {contextMenu.visible && (
-        <div style={{ position: 'absolute', top: contextMenu.y, left: contextMenu.x, zIndex: 2000 }}>
-          <ul style={{ listStyle: 'none', margin: 0, padding: '5px' }}>
-            <li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectMove()}>
-              이동
-            </li>
-            <li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectDelete()}>
-              삭제
-            </li>
-            <li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectCopy()}>
-              복사
-            </li>
-            {props.children}
-          </ul>
+        <div className="context-menu-wrap" style={{ position: 'fixed', top: contextMenu.y, left: contextMenu.x, zIndex: 2000 }}>
+          {/*<ul>*/}
+          {/*<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectMove()}>*/}
+          {/*  이동*/}
+          {/*</li>*/}
+          {/*<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectDelete()}>*/}
+          {/*  삭제*/}
+          {/*</li>*/}
+          {/*<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectCopy()}>*/}
+          {/*  복사*/}
+          {/*</li>*/}
+          {/*</ul>*/}
+          {props.children}
         </div>
       )}
     </>
diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx
index 9c8c9d38..3b823460 100644
--- a/src/components/floor-plan/CanvasFrame.jsx
+++ b/src/components/floor-plan/CanvasFrame.jsx
@@ -1,13 +1,19 @@
 'use client'
 
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import { useCanvas } from '@/hooks/useCanvas'
 import { useEvent } from '@/hooks/useEvent'
+import QContextMenu from '@/components/common/context-menu/QContextMenu'
+import { useRecoilValue } from 'recoil'
+import { currentMenuState } from '@/store/canvasAtom'
+import { MENU } from '@/common/common'
 
 export default function CanvasFrame({ plan }) {
   const canvasRef = useRef(null)
   const { canvas } = useCanvas('canvas')
+  const currentMenu = useRecoilValue(currentMenuState)
+  const [contextMenu, setContextMenu] = useState([[]])
   useEvent()
 
   const loadCanvas = () => {
@@ -25,9 +31,142 @@ export default function CanvasFrame({ plan }) {
     loadCanvas()
   }, [plan])
 
+  useEffect(() => {
+    switch (currentMenu) {
+      case MENU.PLAN_DRAWING:
+        setContextMenu([
+          [
+            {
+              name: '그리드 이동',
+            },
+            {
+              name: '그리드 복사',
+            },
+            {
+              name: '그리드 색 변경',
+            },
+            {
+              name: '삭제',
+            },
+            {
+              name: '전체 삭제',
+            },
+          ],
+        ])
+        break
+      case MENU.ROOF_COVERING.EXTERIOR_WALL_LINE:
+      case MENU.ROOF_COVERING.ROOF_SHAPE_SETTINGS:
+      case MENU.ROOF_COVERING.ROOF_SHAPE_PASSIVITY_SETTINGS:
+      case MENU.ROOF_COVERING.ROOF_SHAPE_EDITING:
+      case MENU.ROOF_COVERING.HELP_LINE_DRAWING:
+      case MENU.ROOF_COVERING.EAVES_KERAVA_EDIT:
+      case MENU.ROOF_COVERING.MOVEMENT_SHAPE_UPDOWN:
+      case MENU.ROOF_COVERING.OUTLINE_EDIT_OFFSET:
+      case MENU.ROOF_COVERING.ROOF_SHAPE_ALLOC:
+      case MENU.ROOF_COVERING.DEFAULT:
+        console.log('지붕덮개')
+        setContextMenu([
+          [
+            {
+              name: '지붕재 배치',
+            },
+            {
+              name: '지붕재 삭제',
+            },
+            {
+              name: '지붕재 전체 삭제',
+            },
+            {
+              name: '선택・이동',
+            },
+            {
+              name: '외벽선 삭제',
+            },
+          ],
+          [
+            {
+              name: '사이즈 변경',
+            },
+            {
+              name: '보조선 이동(M)',
+            },
+            {
+              name: '보조선 복사(C)',
+            },
+            {
+              name: '보조선 삭제(D)',
+            },
+            {
+              name: '보조선 수직이등분선',
+            },
+            {
+              name: '보조선 절삭',
+            },
+            {
+              name: '보조선 전체 삭제',
+            },
+          ],
+        ])
+        break
+      case MENU.BATCH_CANVAS.SLOPE_SETTING:
+      case MENU.BATCH_CANVAS.BATCH_DRAWING:
+      case MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH:
+      case MENU.BATCH_CANVAS.OBJECT_BATCH:
+      case MENU.BATCH_CANVAS.ALL_REMOVE:
+      case MENU.BATCH_CANVAS.DEFAULT:
+        console.log('배치면')
+        setContextMenu([
+          [
+            {
+              name: '사이즈 변경',
+            },
+            {
+              name: '삭제(D)',
+            },
+            {
+              name: '이동(M)',
+            },
+            {
+              name: '복사(C)',
+            },
+          ],
+          [
+            {
+              name: '지붕재 변경',
+            },
+            {
+              name: '각 변 속성 변경',
+            },
+            {
+              name: '흐름 방향 변경',
+            },
+          ],
+        ])
+        break
+      default:
+        console.log('default')
+        setContextMenu([])
+        break
+    }
+  }, [currentMenu])
+
+  useEffect(() => {
+    console.log('currentMenu', currentMenu)
+    console.log('contextMenu', contextMenu)
+  }, [contextMenu])
+
   return (
     <div className="canvas-frame flex justify-center">
       <canvas ref={canvasRef} id={'canvas'}></canvas>
+      <QContextMenu contextRef={canvasRef} canvasProps={canvas}>
+        {contextMenu.map((menus, index) => (
+          <ul key={index}>
+            {menus.map((menu) => (
+              <li>{menu.name}</li>
+            ))}
+          </ul>
+        ))}
+      </QContextMenu>
     </div>
   )
 }
diff --git a/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx b/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx
index ccab2321..ebdc6bb9 100644
--- a/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx
+++ b/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx
@@ -25,7 +25,7 @@ export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySet
         <div className="modal-body">
           <div className="modal-btn-wrap">
             {buttons.map((button) => (
-              <button className={`btn-frame modal ${buttonAct === button.id ? 'act' : ''}`} onClick={() => setButtonAct(button.id)}>
+              <button id={button.id} className={`btn-frame modal ${buttonAct === button.id ? 'act' : ''}`} onClick={() => setButtonAct(button.id)}>
                 {button.name}
               </button>
             ))}
diff --git a/src/styles/_canvasside.scss b/src/styles/_canvasside.scss
new file mode 100644
index 00000000..66bba83d
--- /dev/null
+++ b/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;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index 034955f5..7e087a87 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -543,6 +543,12 @@
                 font-weight: 600;
                 margin-right: 14px;
             }
+            .option{
+                padding-left: 5px;
+                font-size: 13px;
+                color: #101010;
+                font-weight: 400;
+            }
             .info-wrap{
                 display: flex;
                 align-items: center;
@@ -844,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;
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/styles/contents.scss b/src/styles/contents.scss
index 3e82124a..38e7ff83 100644
--- a/src/styles/contents.scss
+++ b/src/styles/contents.scss
@@ -1,3 +1,4 @@
 @import '_contents.scss';
 @import '_modal.scss';
-@import '_table.scss';
\ No newline at end of file
+@import '_table.scss';
+@import '_canvasside.scss';
\ No newline at end of file
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 1841ebb9..b3b49ed9 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -1 +1,2 @@
-@import '_main.scss';
\ No newline at end of file
+@import '_main.scss';
+@import '_contents';
\ No newline at end of file