From bbe22c3a2c41274cb057bf08004c380a77ebaa32 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Thu, 19 Sep 2024 09:58:35 +0900
Subject: [PATCH] =?UTF-8?q?-=20Canvas=20Menu=20=EC=88=98=EC=A0=95=20-=20?=
 =?UTF-8?q?=EC=99=B8=EB=B2=BD=EC=84=A0=20=EC=9E=91=EC=84=B1=20Modal=20?=
 =?UTF-8?q?=EB=8B=A4=EB=A5=B8=20=EB=A9=94=EB=89=B4=20=ED=81=B4=EB=A6=AD?=
 =?UTF-8?q?=EC=8B=9C=20=EB=8B=AB=ED=9E=88=EB=8F=84=EB=A1=9D=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/floor-plan/CanvasMenu.jsx | 71 ++++++++----------------
 1 file changed, 23 insertions(+), 48 deletions(-)

diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index 477cdfde..12c2395a 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -7,6 +7,16 @@ import { post } from '@/lib/Axios'
 import { useRecoilState } from 'recoil'
 import { settingModalFirstOptionsState } from '@/store/settingAtom'
 
+const canvasMenus = [
+  { index: 0, name: 'plan.menu.plan.drawing', icon: 'con00' },
+  { index: 1, name: 'plan.menu.placement.surface.initial.setting', icon: 'con01' },
+  { index: 2, name: 'plan.menu.roof.cover', icon: 'con02' },
+  { index: 3, name: 'plan.menu.placement.surface', icon: 'con03' },
+  { index: 4, name: 'plan.menu.module.circuit.setting', icon: 'con04' },
+  { index: 5, name: 'plan.menu.estimate', icon: 'con06' },
+  { index: 6, name: 'plan.menu.simulation', icon: 'con05' },
+]
+
 export default function CanvasMenu(props) {
   const [objectNo] = useState('test123240912001')
   const { setShowCanvasSettingModal, showOutlineModal, setShowOutlineModal } = props
@@ -28,7 +38,9 @@ export default function CanvasMenu(props) {
 
   const settingsModalOptions = useRecoilState(settingModalFirstOptionsState)
 
-  useEffect(() => {}, [menuNumber, type])
+  useEffect(() => {
+    if (menuNumber !== 2 && showOutlineModal) setShowOutlineModal(false)
+  }, [menuNumber, type])
 
   // 저장버튼(btn08) 클릭 시 호출되는 함수
   const handleSaveSettings = async () => {
@@ -78,53 +90,16 @@ export default function CanvasMenu(props) {
     <div className={`canvas-menu-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
       <div className="canvas-menu-inner">
         <ul className="canvas-menu-list">
-          <li className={`canvas-menu-item ${menuNumber === 0 ? 'active' : ''}`} onClick={() => onClickNav(0)}>
-            <button>
-              <span className="menu-icon con00"></span>
-              {getMessage('plan.menu.plan.drawing')}
-            </button>
-          </li>
-          <li className={`canvas-menu-item ${menuNumber === 1 ? 'active' : ''}`} onClick={() => onClickNav(1)}>
-            <button>
-              <span className="menu-icon con01"></span>
-              {getMessage('plan.menu.placement.surface.initial.setting')}
-            </button>
-          </li>
-          <li
-            className={`canvas-menu-item ${menuNumber === 2 ? 'active' : ''}`}
-            onClick={() => {
-              onClickNav(2)
-            }}
-          >
-            <button>
-              <span className="menu-icon con02"></span>
-              {getMessage('plan.menu.roof.cover')}
-            </button>
-          </li>
-          <li className={`canvas-menu-item ${menuNumber === 3 ? 'active' : ''}`} onClick={() => onClickNav(3)}>
-            <button>
-              <span className="menu-icon con03"></span>
-              {getMessage('plan.menu.placement.surface')}
-            </button>
-          </li>
-          <li className={`canvas-menu-item ${menuNumber === 4 ? 'active' : ''}`} onClick={() => onClickNav(4)}>
-            <button>
-              <span className="menu-icon con04"></span>
-              {getMessage('plan.menu.module.circuit.setting')}
-            </button>
-          </li>
-          <li className={`canvas-menu-item ${menuNumber === 5 ? 'active' : ''}`} onClick={() => onClickNav(5)}>
-            <button>
-              <span className="menu-icon con06"></span>
-              {getMessage('plan.menu.estimate')}
-            </button>
-          </li>
-          <li className={`canvas-menu-item ${menuNumber === 6 ? 'active' : ''}`} onClick={() => onClickNav(6)}>
-            <button>
-              <span className="menu-icon con05"></span>
-              {getMessage('plan.menu.simulation')}
-            </button>
-          </li>
+          {canvasMenus.map((menu) => {
+            return (
+              <li key={menu.index} className={`canvas-menu-item ${menuNumber === menu.index ? 'active' : ''}`} onClick={() => onClickNav(menu.index)}>
+                <button>
+                  <span className={`menu-icon ${menu.icon}`}></span>
+                  {getMessage(menu.name)}
+                </button>
+              </li>
+            )
+          })}
         </ul>
         <div className="canvas-side-btn-wrap">
           {menuNumber !== 6 && menuNumber !== 5 && (