From 367f7340f6f08d1e13edc308e5754939f7c6765b Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sat, 15 Aug 2026 20:58:27 +0900
Subject: [PATCH] style(fe): replace raw text xx/xxx tab actions with polished
 SVG icon buttons and labels

---
 frontend/src/shared/shell/KsTabs.vue | 67 ++++++++++++++++++----------
 1 file changed, 43 insertions(+), 24 deletions(-)

diff --git a/frontend/src/shared/shell/KsTabs.vue b/frontend/src/shared/shell/KsTabs.vue
index b6eeb82e..7e076dc5 100644
--- a/frontend/src/shared/shell/KsTabs.vue
+++ b/frontend/src/shared/shell/KsTabs.vue
@@ -66,24 +66,31 @@ const isTabActive = (tabId: string) => activeTabId.value === tabId
     </div>
 
     <!-- Tab actions -->
-    <div class="ks-tabs__actions">
+    <div v-if="tabs.length > 0" class="ks-tabs__actions">
       <button
-        type="button"
-        class="ks-tabs__action"
-        title="다른 탭 모두 닫기"
-        @click="handleCloseOther(activeTabId!)"
         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>
       <button
         type="button"
-        class="ks-tabs__action"
-        title="모든 탭 닫기"
+        class="ks-tabs__action-btn"
+        title="전체 탭 닫기"
+        aria-label="전체 탭 닫기"
         @click="handleCloseAll"
-        v-if="tabs.length > 0"
       >
-        ✕✕✕
+        <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>
     </div>
   </nav>
@@ -172,26 +179,38 @@ const isTabActive = (tabId: string) => activeTabId.value === tabId
 
 .ks-tabs__actions {
   display: flex;
-  gap: var(--spacing-2);
+  align-items: center;
+  gap: var(--ks-space-1);
   flex-shrink: 0;
-  border-left: 1px solid var(--color-border-primary);
-  padding-left: var(--spacing-3);
+  border-left: 1px solid var(--ks-color-border);
+  padding-left: var(--ks-space-2);
+  margin-left: var(--ks-space-2);
 }
 
-.ks-tabs__action {
-  background: none;
-  border: none;
-  color: var(--color-text-secondary);
+.ks-tabs__action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ks-space-1);
+  background: var(--ks-color-surface);
+  border: 1px solid var(--ks-color-border);
+  color: var(--ks-color-text-muted);
   cursor: pointer;
-  padding: var(--spacing-1) var(--spacing-2);
-  border-radius: var(--border-radius-sm);
-  transition: all var(--transition-base);
-  font-size: 14px;
+  padding: 3px 8px;
+  height: 26px;
+  border-radius: var(--ks-radius-sm);
+  transition: var(--ks-transition-fast);
+  font-size: var(--ks-font-caption);
+  white-space: nowrap;
 }
 
-.ks-tabs__action:hover {
-  background-color: var(--color-background-hover);
-  color: var(--color-text-primary);
+.ks-tabs__action-btn:hover {
+  background-color: var(--ks-color-neutral-100);
+  color: var(--ks-color-text);
+  border-color: var(--ks-color-neutral-300);
+}
+
+.ks-tabs__action-icon {
+  flex-shrink: 0;
 }
 
 /* Scrollbar styling */