bio_frontend/stores/tab.ts

import { defineStore } from "pinia";

interface Tab {
  key: number; // 1~10
  label: string;
  to: string; // 페이지 라우트
  componentName: string;
}

const defaultTab = { key: 1, label: "홈", to: "/", componentName: "home" };

export const useTabsStore = defineStore("tabs", {
  state: () => ({
    tabs: [defaultTab] as Tab[],
    activeTab: 1,
  }),
  actions: {
    // ✅ 새 탭 추가 (기본 페이지는 "/")
    addTab() {
      const { $router } = useNuxtApp();

      if (this.tabs.length >= 10) {
        alert("탭은 최대 10개까지 열 수 있습니다.");
        return;
      }
      // 빈 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;
    },

    // ✅ 활성 탭 내용 변경 (서브메뉴 클릭)
    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: number) {
      const { $router } = useNuxtApp();
      this.activeTab = key;

      const tab = this.tabs.find(t => t.key === this.activeTab);
      $router.push(`/${tab?.key}${tab?.to}`);
    },
  },
  persist: true,
});