From b8bf7ad9ef6dc4a8e76be3856634e5db4c87997b Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sat, 25 Jul 2026 20:39:57 +0900
Subject: [PATCH] fix(ag-grid): resolve theme API conflict and rowSelection
 deprecation warning in QuantDataGrid

---
 src/frontend/src/components/QuantDataGrid.vue | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/components/QuantDataGrid.vue b/src/frontend/src/components/QuantDataGrid.vue
index e250ad79..4ee6bed0 100644
--- a/src/frontend/src/components/QuantDataGrid.vue
+++ b/src/frontend/src/components/QuantDataGrid.vue
@@ -1,20 +1,29 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { AgGridVue } from 'ag-grid-vue3';
-import 'ag-grid-community/styles/ag-grid.css';
-import 'ag-grid-community/styles/ag-theme-alpine.css';
-import type { ColDef, GridApi, GridReadyEvent, CellValueChangedEvent } from 'ag-grid-community';
+import type { ColDef, GridApi, GridReadyEvent, CellValueChangedEvent, RowSelectionOptions } from 'ag-grid-community';
 
 const props = defineProps<{
   columnDefs: ColDef[];
   rowData: any[];
-  rowSelection?: 'single' | 'multiple';
+  rowSelection?: 'single' | 'multiple' | RowSelectionOptions;
   filename?: string;
 }>();
 
 const emit = defineEmits(['row-selected', 'cell-value-changed']);
 const gridApi = ref<GridApi | null>(null);
 
+// AG Grid v36 rowSelection deprecation 대응
+const normalizedRowSelection = computed<RowSelectionOptions>(() => {
+  if (typeof props.rowSelection === 'object' && props.rowSelection !== null) {
+    return props.rowSelection;
+  }
+  if (props.rowSelection === 'multiple') {
+    return { mode: 'multiRow' };
+  }
+  return { mode: 'singleRow' };
+});
+
 const onGridReady = (params: GridReadyEvent) => {
   gridApi.value = params.api;
 };
@@ -27,7 +36,7 @@ const onSelectionChanged = () => {
 };
 
 const selectedRowPayload = (selectedData: any[]) => {
-  if (props.rowSelection === 'multiple') {
+  if (props.rowSelection === 'multiple' || (typeof props.rowSelection === 'object' && props.rowSelection?.mode === 'multiRow')) {
     return selectedData;
   }
   return selectedData.length > 0 ? selectedData[0] : null;
@@ -59,10 +68,11 @@ defineExpose({ exportToExcel, gridApi });
       </button>
     </div>
 
-    <!-- AG Grid Container -->
+    <!-- AG Grid Container (v36 legacy theme & object rowSelection) -->
     <div class="flex-1 ag-theme-alpine w-full">
       <ag-grid-vue
         class="h-full w-full"
+        theme="legacy"
         :columnDefs="columnDefs"
         :rowData="rowData"
         :defaultColDef="{
@@ -72,7 +82,7 @@ defineExpose({ exportToExcel, gridApi });
           flex: 1,
           minWidth: 100
         }"
-        :rowSelection="rowSelection || 'single'"
+        :rowSelection="normalizedRowSelection"
         @grid-ready="onGridReady"
         @selection-changed="onSelectionChanged"
         @cell-value-changed="onCellValueChanged"