From 2d8d710d0aae185ffc86b5f0d1db287248655555 Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sat, 15 Aug 2026 21:08:23 +0900
Subject: [PATCH] style(fe): replace tab text action buttons with ultra-compact
 3-dot dropdown menu

---
 frontend/src/shared/shell/KsTabs.vue | 144 +++++++++++++++++++--------
 1 file changed, 102 insertions(+), 42 deletions(-)

diff --git a/frontend/src/shared/shell/KsTabs.vue b/frontend/src/shared/shell/KsTabs.vue
index e56f1f36..ac5ee41a 100644
--- a/frontend/src/shared/shell/KsTabs.vue
+++ b/frontend/src/shared/shell/KsTabs.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useLayoutStore } from './layoutStore'
 
@@ -28,12 +28,21 @@ const handleCloseTab = (event: Event, tabId: string) => {
   }
 }
 
+const showMenu = ref(false)
+
+const toggleMenu = (event: Event) => {
+  event.stopPropagation()
+  showMenu.value = !showMenu.value
+}
+
 const handleCloseOther = (tabId: string) => {
   layoutStore.closeOtherTabs(tabId)
+  showMenu.value = false
 }
 
 const handleCloseAll = () => {
   layoutStore.closeAllTabs()
+  showMenu.value = false
 }
 
 const isTabActive = (tabId: string) => activeTabId.value === tabId
@@ -65,33 +74,42 @@ const isTabActive = (tabId: string) => activeTabId.value === tabId
       </div>
     </div>
 
-    <!-- Tab actions -->
-    <div v-if="tabs.length > 0" class="ks-tabs__actions">
-      <button
-        v-if="tabs.length > 1 && activeTabId"
-        type="button"
-        class="ks-tabs__action-btn"
-        title="다른 탭 닫기"
-        aria-label="다른 탭 닫기"
-        @click="handleCloseOther(activeTabId!)"
-      >
-        <svg class="ks-tabs__action-icon" viewBox="0 0 16 16" width="12" height="12" fill="currentColor">
-          <path d="M4.5 1.75a.75.75 0 0 0-1.5 0v12.5a.75.75 0 0 0 1.5 0V1.75zM13 3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V3z"/>
-        </svg>
-        <span>다른 탭 닫기</span>
-      </button>
+    <!-- Compact Tab Actions Dropdown -->
+    <div v-if="tabs.length > 0" class="ks-tabs__menu-wrapper">
       <button
         type="button"
-        class="ks-tabs__action-btn"
-        title="전체 탭 닫기"
-        aria-label="전체 탭 닫기"
-        @click="handleCloseAll"
+        class="ks-tabs__menu-trigger"
+        title="탭 작업 옵션"
+        aria-label="탭 작업 옵션"
+        @click="toggleMenu"
       >
-        <svg class="ks-tabs__action-icon" viewBox="0 0 16 16" width="12" height="12" fill="currentColor">
-          <path d="M2.343 2.343a.75.75 0 0 1 1.061 0L8 7.06l4.596-4.717a.75.75 0 1 1 1.06 1.06L9.06 8l4.596 4.596a.75.75 0 1 1-1.06 1.06L8 9.06l-4.596 4.596a.75.75 0 0 1-1.06-1.06L6.94 8 2.343 3.404a.75.75 0 0 1 0-1.061z"/>
-        </svg>
-        <span>전체 닫기</span>
+        ⋮
       </button>
+
+      <!-- Dropdown Menu -->
+      <div v-if="showMenu" class="ks-tabs__dropdown" @mouseleave="showMenu = false">
+        <button
+          v-if="tabs.length > 1 && activeTabId"
+          type="button"
+          class="ks-tabs__dropdown-item"
+          @click="handleCloseOther(activeTabId!)"
+        >
+          <svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor">
+            <path d="M4.5 1.75a.75.75 0 0 0-1.5 0v12.5a.75.75 0 0 0 1.5 0V1.75zM13 3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V3z"/>
+          </svg>
+          <span>다른 탭 닫기</span>
+        </button>
+        <button
+          type="button"
+          class="ks-tabs__dropdown-item ks-tabs__dropdown-item--danger"
+          @click="handleCloseAll"
+        >
+          <svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor">
+            <path d="M2.343 2.343a.75.75 0 0 1 1.061 0L8 7.06l4.596-4.717a.75.75 0 1 1 1.06 1.06L9.06 8l4.596 4.596a.75.75 0 1 1-1.06 1.06L8 9.06l-4.596 4.596a.75.75 0 0 1-1.06-1.06L6.94 8 2.343 3.404a.75.75 0 0 1 0-1.061z"/>
+          </svg>
+          <span>전체 탭 닫기</span>
+        </button>
+      </div>
     </div>
   </nav>
 </template>
@@ -183,40 +201,82 @@ const isTabActive = (tabId: string) => activeTabId.value === tabId
   opacity: 1;
 }
 
-.ks-tabs__actions {
+.ks-tabs__menu-wrapper {
+  position: relative;
   display: flex;
   align-items: center;
-  gap: var(--ks-space-1);
   flex-shrink: 0;
   border-left: 1px solid var(--ks-color-border);
-  padding-left: var(--ks-space-2);
-  margin-left: var(--ks-space-2);
+  padding-left: var(--ks-space-1);
+  margin-left: var(--ks-space-1);
 }
 
-.ks-tabs__action-btn {
-  display: inline-flex;
+.ks-tabs__menu-trigger {
+  display: flex;
   align-items: center;
-  gap: var(--ks-space-1);
-  background: var(--ks-color-surface);
-  border: 1px solid var(--ks-color-border);
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--ks-radius-sm);
   color: var(--ks-color-text-muted);
   cursor: pointer;
-  padding: 3px 8px;
-  height: 26px;
-  border-radius: var(--ks-radius-sm);
+  font-size: 16px;
+  font-weight: bold;
   transition: var(--ks-transition-fast);
-  font-size: var(--ks-font-caption);
-  white-space: nowrap;
 }
 
-.ks-tabs__action-btn:hover {
+.ks-tabs__menu-trigger:hover {
   background-color: var(--ks-color-neutral-100);
   color: var(--ks-color-text);
-  border-color: var(--ks-color-neutral-300);
+  border-color: var(--ks-color-border);
 }
 
-.ks-tabs__action-icon {
-  flex-shrink: 0;
+.ks-tabs__dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  background: var(--ks-color-surface);
+  border: 1px solid var(--ks-color-border);
+  border-radius: var(--ks-radius-sm);
+  box-shadow: var(--ks-shadow-md);
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  z-index: 120;
+  min-width: 120px;
+}
+
+.ks-tabs__dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: var(--ks-space-2);
+  width: 100%;
+  padding: 5px 8px;
+  background: transparent;
+  border: none;
+  border-radius: var(--ks-radius-sm);
+  color: var(--ks-color-text);
+  font-size: var(--ks-font-caption);
+  cursor: pointer;
+  text-align: left;
+  white-space: nowrap;
+  transition: var(--ks-transition-fast);
+}
+
+.ks-tabs__dropdown-item:hover {
+  background-color: var(--ks-color-neutral-100);
+}
+
+.ks-tabs__dropdown-item--danger {
+  color: var(--ks-color-danger);
+}
+
+.ks-tabs__dropdown-item--danger:hover {
+  background-color: rgba(220, 38, 38, 0.08);
 }
 
 /* Scrollbar styling */