bio_frontend/stores/tab.ts

import { defineStore } from "pinia";

export 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: {
    // 서브메뉴 클릭 시 새 탭 생성
    async updateActiveTab(sub: {
      label: string;
      to: string;
      componentName: string;
    }) {
      if (this.tabs.length > 10) {
        alert("탭은 최대 10개까지 열 수 있습니다.");
        return;
      }

      // 빈 key 찾기
      let newKey = 1;
      while (this.tabs.find(t => t.key === newKey)) newKey++;

      this.tabs.push({
        key: newKey,
        label: sub.label,
        to: sub.to,
        componentName: sub.componentName,
      });
      this.activeTab = newKey;
      await navigateTo(`/${newKey}${sub.to}`);
    },

    // 활성 탭 제거 (HOME 탭 보호)
    removeTab(key: number) {
      if (key === 1) return; // HOME 탭은 제거 금지
      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;
      }
    },

    // 활성 탭 변경
    async setActiveTab(key: number) {
      this.activeTab = key;

      const tab = this.tabs.find(t => t.key === this.activeTab);
      await navigateTo(`/${tab?.key}${tab?.to}`);
    },

    // 탭 초기화
    resetTabs() {
      this.tabs = [{ ...defaultTab }];
      this.activeTab = 1;
    },
  },
  persist: true,
});