81 lines
2.1 KiB
TypeScript
81 lines
2.1 KiB
TypeScript
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;
|
|
}) {
|
|
// 이미 동일한 페이지가 열려있는지 확인
|
|
const existingTab = this.tabs.find(
|
|
tab => tab.to === sub.to && tab.componentName === sub.componentName
|
|
);
|
|
|
|
if (existingTab) {
|
|
// 이미 동일한 페이지가 열려있으면 해당 탭으로 이동
|
|
this.activeTab = existingTab.key;
|
|
await navigateTo(`/${existingTab.key}${existingTab.to}`);
|
|
return;
|
|
}
|
|
|
|
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,
|
|
});
|