From 1e80866f6b5aca08506759ee1994979e13aaed0a Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sat, 15 Aug 2026 21:12:45 +0900
Subject: [PATCH] fix(fe): resolve overflow clipping and outside click handler
 for tab action dropdown

---
 frontend/src/shared/shell/KsTabs.vue | 33 ++++++++++++++++++----------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/frontend/src/shared/shell/KsTabs.vue b/frontend/src/shared/shell/KsTabs.vue
index ac5ee41a..1ba64795 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, ref } from 'vue'
+import { computed, ref, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useLayoutStore } from './layoutStore'
 
@@ -35,6 +35,20 @@ const toggleMenu = (event: Event) => {
   showMenu.value = !showMenu.value
 }
 
+const closeMenuOnOutsideClick = () => {
+  if (showMenu.value) {
+    showMenu.value = false
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('click', closeMenuOnOutsideClick)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('click', closeMenuOnOutsideClick)
+})
+
 const handleCloseOther = (tabId: string) => {
   layoutStore.closeOtherTabs(tabId)
   showMenu.value = false
@@ -87,27 +101,21 @@ const isTabActive = (tabId: string) => activeTabId.value === tabId
       </button>
 
       <!-- Dropdown Menu -->
-      <div v-if="showMenu" class="ks-tabs__dropdown" @mouseleave="showMenu = false">
+      <div v-if="showMenu" class="ks-tabs__dropdown">
         <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>
+          📌 <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>
+          🗑️ <span>전체 탭 닫기</span>
         </button>
       </div>
     </div>
@@ -121,10 +129,11 @@ const isTabActive = (tabId: string) => activeTabId.value === tabId
   height: var(--ks-shell-tabs-height);
   background-color: var(--ks-color-surface);
   border-bottom: 1px solid var(--ks-color-border);
-  overflow-x: auto;
-  overflow-y: hidden;
+  position: relative;
+  overflow: visible;
   gap: var(--ks-space-2);
   padding: 0 var(--ks-space-4);
+  z-index: 50;
 }
 
 .ks-tabs__list {