[UI 개선] 기본 레이아웃에서 서브메뉴 및 탭 기능 개선, 공용 기능 테스트 페이지 추가

layouts/default.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import AppHeader from "../components/layout/AppHeader.vue";
-import { ref, computed, watch  } from "vue";
+import { ref, computed, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useTabsStore } from "../stores/tab";
 
@@ -11,85 +11,109 @@ const showSubmenuBar = ref(false);
 const tabsStore = useTabsStore();
 
 // 메뉴 클릭 시 홈 이동
-watch(activeMenu, (newValue) => {
+watch(activeMenu, newValue => {
   if (newValue === "home") router.push("/");
 });
 
 // 서브메뉴 정의
 const subMenus = computed(() => {
   if (activeMenu.value === "test") {
-    return [{
+    return [
+      {
         key: "test",
         label: "테스트",
-        to: "/test/test01"
-    }, {
+        to: "/test/test01",
+      },
+      {
         key: "igv",
         label: "ivg",
-        to: "/test/test02"
-    }, {
+        to: "/test/test02",
+      },
+      {
         key: "igv2",
         label: "ivg2",
-        to: "/test/igv2"
-    }, {
+        to: "/test/igv2",
+      },
+      {
         key: "pathway",
         label: "pathway",
-        to: "/test/pathway"
-    }, {
+        to: "/test/pathway",
+      },
+      {
         key: "pathway2",
         label: "pathway2",
-        to: "/test/pathway2"
-    }, {
+        to: "/test/pathway2",
+      },
+      {
         key: "pathway3",
         label: "pathway3",
-        to: "/test/pathway3"
-    }, {
+        to: "/test/pathway3",
+      },
+      {
         key: "pathway4",
         label: "pathway4",
-        to: "/cultureGraph/pathway4"
-    }, {
+        to: "/cultureGraph/pathway4",
+      },
+      {
         key: "pathwayjson",
         label: "pathwayjson",
-        to: "/test/pathwayjson"
-    }, {
+        to: "/test/pathwayjson",
+      },
+      {
         key: "cultureGraph",
         label: "배양그래프",
-        to: "/test/culture-graph"
-    }, {
+        to: "/test/culture-graph",
+      },
+      {
         key: "cultureGraphMulti",
         label: "배양그래프 멀티",
-        to: "/test/culture-graph-multi"
-    }, {
+        to: "/test/culture-graph-multi",
+      },
+      {
         key: "cultureGraphTab",
         label: "배양그래프 탭",
-        to: "/test/culture-graph-tab"
-    }, {
+        to: "/test/culture-graph-tab",
+      },
+      {
         key: "tui-grid",
         label: "tui-grid",
-        to: "/tui"
-    }, {
+        to: "/tui",
+      },
+      {
         key: "리소스",
         label: "리소스",
-        to: "/admin/resource"
-    }, {
+        to: "/admin/resource",
+      },
+      {
         key: "sample",
         label: "sample",
-        to: "/sampleList"
-    }, ];
-} else if (activeMenu.value === "ADMIN") {
-    return [{
+        to: "/sampleList",
+      },
+      {
+        key: "common-test",
+        label: "공용 기능 테스트",
+        to: "/common-test",
+      },
+    ];
+  } else if (activeMenu.value === "ADMIN") {
+    return [
+      {
         key: "logs",
         label: "접속기록",
-        to: "/admin/logs"
-    }, {
+        to: "/admin/logs",
+      },
+      {
         key: "codes",
         label: "공통코드",
-        to: "/admin/codes"
-    }, {
+        to: "/admin/codes",
+      },
+      {
         key: "programs",
         label: "프로그램",
-        to: "/admin/programs"
-    }, ];
-}
+        to: "/admin/programs",
+      },
+    ];
+  }
   return [];
 });
 
@@ -99,7 +123,12 @@ function onMenuClick(menu: string) {
 }
 
 // ✅ 서브메뉴 클릭 → 현재 활성 탭 내용만 변경
-function onSubMenuClick(sub: { key: string; label: string; to: string; componentName: string }) {
+function onSubMenuClick(sub: {
+  key: string;
+  label: string;
+  to: string;
+  componentName: string;
+}) {
   tabsStore.updateActiveTab(sub);
   // const activeKey = tabsStore.activeTab;
   // router.push(`/${activeKey}${sub.to}`);
@@ -110,7 +139,6 @@ function addNewTab() {
   tabsStore.addTab();
   // router.push(`/${key}/`);
 }
-
 </script>
 
 <template>
@@ -118,7 +146,11 @@ function addNewTab() {
     <AppHeader v-model="activeMenu" @update:model-value="onMenuClick" />
 
     <!-- 서브메뉴 바 -->
-    <nav v-if="subMenus && subMenus.length && showSubmenuBar" class="submenu-bar" @click.stop>
+    <nav
+      v-if="subMenus && subMenus.length && showSubmenuBar"
+      class="submenu-bar"
+      @click.stop
+    >
       <button
         v-for="sub in subMenus"
         :key="sub.key"
@@ -128,7 +160,7 @@ function addNewTab() {
         {{ sub.label }}
       </button>
     </nav>
-    <br><br>
+    <br /><br />
     <!-- 탭 바 -->
     <div class="tab-bar">
       <div
@@ -136,10 +168,16 @@ function addNewTab() {
         :key="tab.key"
         class="tab-item"
         :class="{ active: tabsStore.activeTab === tab.key }"
-        @click="tabsStore.setActiveTab(tab.key);"
+        @click="tabsStore.setActiveTab(tab.key)"
       >
         {{ tab.label }}
-        <span v-show="tabsStore.activeTab !== tab.key" class="close-btn" @click.stop="tabsStore.removeTab(tab.key)"> × </span>
+        <span
+          v-show="tabsStore.activeTab !== tab.key"
+          class="close-btn"
+          @click.stop="tabsStore.removeTab(tab.key)"
+        >
+          ×
+        </span>
       </div>
 
       <!-- ✅ 새 탭 추가 버튼 -->
@@ -152,7 +190,6 @@ function addNewTab() {
   </div>
 </template>
 
-
 <style scoped>
 .layout {
   min-height: 100vh;