From 0ae1153756aa3a23f07c3e3683c2dd9b7bcbf2e5 Mon Sep 17 00:00:00 2001
From: mjchoi <mjchoi@ex-em.com>
Date: Tue, 4 May 2021 09:54:48 +0900
Subject: [PATCH] =?UTF-8?q?[#812][3.0]=20Menu=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=A1=9C=EB=93=9C=20=EC=8B=9C=20=EC=97=90?=
 =?UTF-8?q?=EB=9F=AC=20=EC=88=98=EC=A0=95=20##########=20-=20=EC=9E=AC?=
 =?UTF-8?q?=EA=B7=80=EB=A1=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EB=B6=88=EB=9F=AC=EC=98=AC=20=EA=B2=BD=EC=9A=B0=20=EB=82=98?=
 =?UTF-8?q?=EB=8A=94=20=EC=97=90=EB=9F=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/Menu.vue     |  9 ++++++---
 src/components/menu/MenuItem.vue | 18 ++++++++++--------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/menu/Menu.vue b/src/components/menu/Menu.vue
index 5673ec4a7..b92692881 100644
--- a/src/components/menu/Menu.vue
+++ b/src/components/menu/Menu.vue
@@ -1,11 +1,12 @@
 <template>
   <ul class="ev-menu">
     <menu-item
-      v-for="(menuItem, index) in items"
-      :key="`${menuItem.text}_${index}_0`"
-      :item="menuItem"
+      v-for="(menu, index) in items"
+      :key="`${menu.text}_${index}_0`"
+      :item="menu"
       :selected-item="modelValue"
       :expandable="expandable"
+      :comp="component"
       @click="clickMenu"
     />
   </ul>
@@ -42,8 +43,10 @@ export default {
       emit('change', newMenuItem, prevMenuItem.value);
       prevMenuItem.value = newMenuItem;
     };
+    const component = MenuItem;
     return {
       clickMenu,
+      component,
     };
   },
 };
diff --git a/src/components/menu/MenuItem.vue b/src/components/menu/MenuItem.vue
index 6d29f0f95..a1f99328f 100644
--- a/src/components/menu/MenuItem.vue
+++ b/src/components/menu/MenuItem.vue
@@ -35,13 +35,15 @@
         v-show="isExpand"
         :class="['ev-menu-sub', `depth${depth}`]"
       >
-        <menu-item
-          v-for="(menuItem, index) in item.children"
-          :key="`${menuItem.value}_${index}_${depth + 1}`"
+        <component
+          :is="comp"
+          v-for="(menu, index) in item.children"
+          :key="`${menu.value}_${index}_${depth + 1}`"
           :depth="depth + 1"
-          :item="menuItem"
+          :item="menu"
           :selected-item="selectedItem"
           :expandable="expandable"
+          :comp="comp"
           @click="clickMenu"
         />
       </ol>
@@ -51,13 +53,9 @@
 
 <script>
 import { ref, computed } from 'vue';
-import MenuItem from './MenuItem';
 
 export default {
   name: 'MenuItem',
-  components: {
-    MenuItem,
-  },
   props: {
     selectedItem: {
       type: [String, Number],
@@ -91,6 +89,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    comp: {
+      type: Object,
+      default: () => {},
+    },
   },
   emits: ['click'],
   setup(props, { emit }) {