From a5a952fd43c97450dcd6fb9156a6a7816a5781b2 Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sun, 16 Aug 2026 00:57:59 +0900
Subject: [PATCH] refactor(fe): simplify ApprovalQueue summary structure -
 remove unnecessary wrapper

Removed unnecessary <div class="stats" role="toolbar"> wrapper.
Stats are now direct children of ks-page__summary (which has CSS Grid layout).

Benefits:
- Simpler DOM structure (fewer nesting levels)
- Role="toolbar" was misleading (this is a stats summary, not a toolbar)
- PageLayout.summary already handles grid layout
- Follows AGENTS.md Necessity-driven & Simplicity principles

Before: 1 wrapper + 3 stats = 4 divs
After: 3 stats = 3 divs (25% reduction)

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 .../features/approval/pages/ApprovalQueue.vue | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/frontend/src/features/approval/pages/ApprovalQueue.vue b/frontend/src/features/approval/pages/ApprovalQueue.vue
index 7e031070..818e9ab9 100644
--- a/frontend/src/features/approval/pages/ApprovalQueue.vue
+++ b/frontend/src/features/approval/pages/ApprovalQueue.vue
@@ -134,19 +134,17 @@ const handleRetry = () => {
     @retry="handleRetry"
   >
     <template #summary>
-      <div class="stats" role="toolbar" aria-label="승인 통계 요약">
-        <div class="stat stat-pending">
-          <span class="label">Pending</span>
-          <span class="value ks-financial-number">{{ statusStats.pending }}</span>
-        </div>
-        <div class="stat stat-approved">
-          <span class="label">Approved</span>
-          <span class="value ks-financial-number">{{ statusStats.approved }}</span>
-        </div>
-        <div class="stat stat-rejected">
-          <span class="label">Rejected</span>
-          <span class="value ks-financial-number">{{ statusStats.rejected }}</span>
-        </div>
+      <div class="stat stat-pending">
+        <span class="label">Pending</span>
+        <span class="value ks-financial-number">{{ statusStats.pending }}</span>
+      </div>
+      <div class="stat stat-approved">
+        <span class="label">Approved</span>
+        <span class="value ks-financial-number">{{ statusStats.approved }}</span>
+      </div>
+      <div class="stat stat-rejected">
+        <span class="label">Rejected</span>
+        <span class="value ks-financial-number">{{ statusStats.rejected }}</span>
       </div>
     </template>