tab, component, popup 변경

stores/tab.ts

@@ -1,36 +1,64 @@
-// stores/tabs.ts
-import { defineStore } from 'pinia'
+import { defineStore } from "pinia";
 
-export interface TabItem {
-  key: string
-  label: string
-  to: string
-  componentName: string
+interface Tab {
+  key: number;          // 1~10
+  label: string;
+  to: string;           // 페이지 라우트
+  componentName: string;
 }
 
-export const useTabsStore = defineStore('tabs', {
+const defaultTab = { key: 1, label: "홈", to: "/", componentName: "home" };
+
+export const useTabsStore = defineStore("tabs", {
   state: () => ({
-    activeTab: '' as string,
-    tabs: [] as { key: string; label: string; to: string; componentName: string }[]
+    tabs: [defaultTab] as Tab[],
+    activeTab: 1
   }),
   actions: {
-    addTab(tab: TabItem) {
-      if (!this.tabs.find(t => t.key === tab.key)) {
-        this.tabs.push(tab)
+    // ✅ 새 탭 추가 (기본 페이지는 "/")
+    addTab() {
+      const { $router } = useNuxtApp();
+
+      if (this.tabs.length >= 10) {
+        alert("탭은 최대 10개까지 열 수 있습니다.");
+        return;
       }
-      this.activeTab = tab.key
+      // 빈 key 찾기
+      let key = 1;
+      while (this.tabs.find(t => t.key === key)) key++;
+
+      this.tabs.push({...defaultTab, key : key});
+      this.activeTab = key;
+      $router.push(defaultTab.to);
+      return key;
     },
-    removeTab(key: string) {
-      const idx = this.tabs.findIndex(t => t.key === key)
-      if (idx !== -1) {
-        this.tabs.splice(idx, 1)
-        if (this.activeTab === key && this.tabs.length) {
-          this.activeTab = this.tabs[Math.max(idx - 1, 0)].key
-        }
+
+    // ✅ 활성 탭 내용 변경 (서브메뉴 클릭)
+    updateActiveTab(sub: { label: string; to: string; componentName: string }) {
+      const { $router } = useNuxtApp();
+
+      const tab = this.tabs.find(t => t.key === this.activeTab);
+      if (tab) {
+        tab.label = sub.label;
+        tab.to = sub.to;
+        tab.componentName = sub.componentName;
+      }
+      $router.push(`/${tab?.key}${tab?.to}`);
+    },
+
+    removeTab(key: number) {
+      this.tabs = this.tabs.filter(t => t.key !== key);
+      if (this.activeTab === key) {
+        this.activeTab = this.tabs.length ? this.tabs[this.tabs.length - 1].key : 0;
       }
     },
-    setActiveTab(key: string) {
-      this.activeTab = key
+
+    setActiveTab(key: number) {
+      const { $router } = useNuxtApp();
+      this.activeTab = key;
+
+      const tab = this.tabs.find(t => t.key === this.activeTab);
+      $router.push(`/${tab?.key}${tab?.to}`);
     }
   }
-})
+});