[UI 개선] AppHeader에서 HOME 메뉴 제거, TabBar에서 탭 추가 버튼 및 관련 로직 삭제, 탭 관리 스토어에서 HOME 탭 제거 방지 및 서브메뉴 클릭 시 새 탭 생성 로직 수정

components/layout/AppHeader.vue

@@ -3,15 +3,6 @@
     class="w-full bg-white shadow flex items-center justify-center px-4 h-24 relative"
   >
     <nav class="flex justify-center space-x-4">
-      <!-- HOME 메뉴 -->
-      <button
-        class="menu-btn"
-        :class="{ active: modelValue === 'HOME' }"
-        @click="onMenuClick('HOME')"
-      >
-        HOME
-      </button>
-
       <!-- 권한 기반 메뉴 -->
       <button
         v-for="menu in availableMenus"

components/layout/TabBar.vue

@@ -9,7 +9,7 @@
     >
       <span class="tab-label">{{ tab.label }}</span>
       <button
-        v-if="tabsStore.activeTab !== tab.key"
+        v-if="tab.key !== 1 && tabsStore.activeTab !== tab.key"
         class="close-btn"
         type="button"
         @click.stop="handleTabClose(tab.key)"
@@ -17,8 +17,6 @@
         ×
       </button>
     </div>
-
-    <button class="add-tab-btn" type="button" @click="handleAddTab">＋</button>
   </div>
 </template>
 
@@ -29,7 +27,6 @@ const tabsStore = useTabsStore();
 
 const handleTabClick = (tabKey: number) => tabsStore.setActiveTab(tabKey);
 const handleTabClose = (tabKey: number) => tabsStore.removeTab(tabKey);
-const handleAddTab = () => tabsStore.addTab();
 </script>
 
 <style scoped>
@@ -109,27 +106,4 @@ const handleAddTab = () => tabsStore.addTab();
 .tab-item.active .close-btn:hover {
   background: rgba(255, 255, 255, 0.2);
 }
-
-.add-tab-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem 0.75rem;
-  background: #f1f5f9;
-  border: 1px solid #e2e8f0;
-  border-radius: 0.5rem;
-  cursor: pointer;
-  font-size: 1.125rem;
-  line-height: 1;
-  color: #64748b;
-  transition: all 0.2s ease;
-  flex-shrink: 0;
-  min-width: 2.5rem;
-}
-
-.add-tab-btn:hover {
-  background: #e2e8f0;
-  border-color: #cbd5e1;
-  color: #475569;
-}
 </style>

stores/tab.ts

@@ -15,39 +15,34 @@ export const useTabsStore = defineStore("tabs", {
     activeTab: 1,
   }),
   actions: {
-    // 새 탭 추가 (기본 페이지는 "/")
+    // 서브메뉴 클릭 시 새 탭 생성
-    async addTab() {
-      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;
-      await navigateTo(defaultTab.to);
-      return key;
-    },
-
-    // 활성 탭 내용 변경 (서브메뉴 클릭)
     async updateActiveTab(sub: {
       label: string;
       to: string;
       componentName: string;
     }) {
-      const tab = this.tabs.find(t => t.key === this.activeTab);
+      if (this.tabs.length > 10) {
-      if (tab) {
+        alert("탭은 최대 10개까지 열 수 있습니다.");
-        tab.label = sub.label;
+        return;
-        tab.to = sub.to;
-        tab.componentName = sub.componentName;
       }
-      await navigateTo(`/${tab?.key}${tab?.to}`);
+
+      // 빈 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
@@ -58,7 +53,6 @@ export const useTabsStore = defineStore("tabs", {
 
     // 활성 탭 변경
     async setActiveTab(key: number) {
-      console.log("tab.ts - setActiveTab", key);
       this.activeTab = key;
 
       const tab = this.tabs.find(t => t.key === this.activeTab);
@@ -67,12 +61,8 @@ export const useTabsStore = defineStore("tabs", {
 
     // 탭 초기화
     resetTabs() {
-      console.log("tab.ts - resetTabs");
       this.tabs = [{ ...defaultTab }];
       this.activeTab = 1;
-      console.log("tab.ts - tabs:", this.tabs);
-      console.log("tab.ts - activeTab:", this.activeTab);
-      console.log("tab.ts - resetTabs 완료");
     },
   },
   persist: true,