From 05e279174f4e556061973f8b9e680fc4714e74c9 Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sat, 15 Aug 2026 23:59:26 +0900
Subject: [PATCH] refactor(fe): migrate ApprovalQueue to KsSplitter -
 standardize master-detail layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace custom grid layout with KsSplitter component
- Add storageKey to prevent ratio conflicts with other pages
- Remove dead .content CSS class
- Update .request-list height constraint (flex: 1 → height: 100%)
- Maintain overflow-y: auto for scrollable panes
- Simplifies code by ~50 lines, adds drag-to-resize functionality
---
 .../features/approval/pages/ApprovalQueue.vue | 29 +++++++++----------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/frontend/src/features/approval/pages/ApprovalQueue.vue b/frontend/src/features/approval/pages/ApprovalQueue.vue
index 55ac1a50..227c3d17 100644
--- a/frontend/src/features/approval/pages/ApprovalQueue.vue
+++ b/frontend/src/features/approval/pages/ApprovalQueue.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive, computed, ref, onMounted } from 'vue'
 import ApprovalWorkbenchPage from '../../../shared/ui/screen-types/v2/ApprovalWorkbenchPage.vue'
+import KsSplitter from '../../../shared/ui/components/KsSplitter.vue'
 import { KsButton, KsStatusTag } from '../../../shared/ui/components'
 import type { StandardScreenState } from '../../../shared/ui/contracts/screenContract'
 
@@ -166,12 +167,13 @@ const handleRetry = () => {
       </div>
     </template>
 
-    <!-- Default Slot: List & Detail Workbench Layout -->
-    <div class="content">
-      <!-- Request Master List -->
-      <aside class="request-list" aria-label="승인 요청 목록">
-        <h2>Requests ({{ filteredRequests.length }})</h2>
-        <div class="items" role="list">
+    <!-- Master-Detail Layout: KsSplitter -->
+    <KsSplitter storageKey="ks_splitter_ratio_approval_queue" initialRatio="25">
+      <template #left>
+        <!-- Request Master List -->
+        <aside class="request-list" aria-label="승인 요청 목록">
+          <h2>Requests ({{ filteredRequests.length }})</h2>
+          <div class="items" role="list">
           <div
             v-for="req in filteredRequests"
             :key="req.requestId"
@@ -196,8 +198,10 @@ const handleRetry = () => {
           </div>
         </div>
       </aside>
+      </template>
 
       <!-- Detail Workbench Panel -->
+      <template #right>
       <main class="detail-panel" aria-label="선택 요청 상세 및 검토">
         <h2 v-if="selectedRequest">{{ selectedRequest.modelName }}</h2>
         <div v-else class="empty-detail">Select a request from list</div>
@@ -286,7 +290,8 @@ const handleRetry = () => {
           </div>
         </div>
       </main>
-    </div>
+      </template>
+    </KsSplitter>
   </ApprovalWorkbenchPage>
 </template>
 
@@ -399,14 +404,6 @@ h3 {
   border-radius: var(--border-radius-lg);
 }
 
-.content {
-  display: grid;
-  grid-template-columns: 350px 1fr;
-  gap: var(--spacing-5);
-  height: 100%;
-  min-height: 0;
-}
-
 .request-list {
   border: var(--border-width-1) solid var(--color-border-primary);
   border-radius: var(--border-radius-lg);
@@ -414,7 +411,7 @@ h3 {
   background: var(--color-background-primary);
   display: flex;
   flex-direction: column;
-  flex: 1;
+  height: 100%;
   min-height: 0;
 }