diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index 26538599..133cdfa2 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -184,7 +184,7 @@ export default function CanvasMenu(props) {
   }, [type, globalLocale])
 
   useEffect(() => {
-    if (['2', '3'].includes(canvasSetting?.roofSizeSet?.toString())) {
+    if ([2, 3].some((num) => num === canvasSetting?.roofSizeSet)) {
       setMenuNumber(3)
       setType('surface')
       setCurrentMenu(MENU.BATCH_CANVAS.BATCH_DRAWING)
@@ -195,8 +195,12 @@ export default function CanvasMenu(props) {
     }
   }, [canvasSetting])
 
+  const checkMenuState = (menu) => {
+    return ([2, 3].some((num) => num === canvasSetting?.roofSizeSet) && menu.index === 2) || (menuNumber === 4 && menu.index === 2)
+  }
+
   return (
-    <div className={`canvas-menu-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
+    <div className={`canvas-menu-wrap ${[2, 3, 4].some((num) => num === menuNumber) ? 'active' : ''}`}>
       <div className="canvas-menu-inner">
         <ul className="canvas-menu-list">
           {canvasMenus.map((menu) => {
@@ -205,11 +209,12 @@ export default function CanvasMenu(props) {
                 key={`canvas-menu-${menu.index}`}
                 className={`canvas-menu-item ${menuNumber === menu.index ? 'active' : ''}`}
                 onClick={() => {
-                  if (['2', '3'].includes(canvasSetting?.roofSizeSet?.toString()) && menu.index === 2) return
+                  if ([2, 3].some((num) => num === canvasSetting?.roofSizeSet) && menu.index === 2) return
+                  if (menuNumber === 4 && menu.index === 2) return
                   onClickNav(menu)
                 }}
               >
-                <button className={['2', '3'].includes(canvasSetting?.roofSizeSet?.toString()) && menu.index === 2 ? 'no-click' : ''}>
+                <button className={checkMenuState(menu) ? 'no-click' : ''}>
                   <span className={`menu-icon ${menu.icon}`}></span>
                   {getMessage(menu.name)}
                 </button>
@@ -218,7 +223,7 @@ export default function CanvasMenu(props) {
           })}
         </ul>
         <div className="canvas-side-btn-wrap">
-          {menuNumber !== 6 && menuNumber !== 5 && (
+          {![5, 6].some((num) => num === menuNumber) && (
             <>
               {
                 <div className={`vertical-horizontal ${verticalHorizontalMode ? 'on' : ''}`}>
@@ -314,8 +319,8 @@ export default function CanvasMenu(props) {
           )}
         </div>
       </div>
-      <div className={`canvas-depth2-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
-        {(menuNumber === 2 || menuNumber === 3 || menuNumber === 4) && <MenuDepth01 />}
+      <div className={`canvas-depth2-wrap ${[2, 3, 4].some((num) => num === menuNumber) ? 'active' : ''}`}>
+        {[2, 3, 4].some((num) => num === menuNumber) && <MenuDepth01 />}
       </div>
       {/* 견적서(menuNumber=== 5) 상세화면인경우 문서다운로드 팝업 */}
       {estimatePopupOpen && <DocDownOptionPop planNo={estimateRecoilState?.planNo} setEstimatePopupOpen={setEstimatePopupOpen} />}