From 28a22b1a96cb813af95b1d1fbe2278696dc7e778 Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sun, 16 Aug 2026 21:09:03 +0900
Subject: [PATCH] feat: KsDataGrid - add explicit Enter key handling to all
 editable columns
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Implement onCellKeyDown callback for editable columns
- Enter key now calls tabToNextCell() like Tab key
- Addresses user request: 넥스트 셀을 네가 찾지말고 tab key와 같은 기능이 동작하면 됀다
---
 .../src/shared/ui/components/KsDataGrid.vue   | 40 +++++++++++++------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/frontend/src/shared/ui/components/KsDataGrid.vue b/frontend/src/shared/ui/components/KsDataGrid.vue
index 21748a0e..01e63321 100644
--- a/frontend/src/shared/ui/components/KsDataGrid.vue
+++ b/frontend/src/shared/ui/components/KsDataGrid.vue
@@ -46,20 +46,34 @@ const emit = defineEmits<{ rowSelected: [row: unknown]; cellValueChanged: [event
 const props = withDefaults(defineProps<{ rows: unknown[]; columns: UiGridColumn[]; loading?: boolean; height?: string; rowSelection?: 'single' | 'multiple' | 'none'; showRowNumber?: boolean }>(), { loading: false, height: '32rem', rowSelection: 'single', showRowNumber: true })
 
 const columnDefs = computed<ColDef[]>(() => {
-  const mappedCols: ColDef[] = props.columns.map(column => ({
-    field: column.field,
-    headerName: column.header,
-    width: column.width,
-    minWidth: column.minWidth ?? 80,
-    maxWidth: column.maxWidth,
-    flex: column.flex ?? (column.width ? undefined : 1),
+  const mappedCols: ColDef[] = props.columns.map((column, idx) => {
+    const colDef: ColDef = {
+      field: column.field,
+      headerName: column.header,
+      width: column.width,
+      minWidth: column.minWidth ?? 80,
+      maxWidth: column.maxWidth,
+      flex: column.flex ?? (column.width ? undefined : 1),
 
-    sortable: column.sortable ?? true,
-    filter: column.filterable ?? false,
-    editable: column.editable ?? false,
+      sortable: column.sortable ?? true,
+      filter: column.filterable ?? false,
+      editable: column.editable ?? false,
 
-    valueFormatter: column.formatter ? params => column.formatter?.(params.value, params.data) ?? '' : undefined
-  }))
+      valueFormatter: column.formatter ? params => column.formatter?.(params.value, params.data) ?? '' : undefined,
+    }
+
+    if (column.editable) {
+      colDef.onCellKeyDown = (event: any) => {
+        if (event.event.key === 'Enter') {
+          event.event.preventDefault()
+          event.api.stopEditing(false)
+          event.api.tabToNextCell(false)
+        }
+      }
+    }
+
+    return colDef
+  })
 
   if (props.showRowNumber) {
     const rowNumCol: ColDef = {
@@ -143,8 +157,8 @@ function focusRow(rowIndex: number, colKey?: string): void {
   const col = colKey || (props.columns[0]?.field ?? '')
 
   gridApi.value.ensureIndexVisible(rowIndex)
+  gridApi.value.setFocusedCell(rowIndex, col)
   if (col) {
-    gridApi.value.setFocusedCell(rowIndex, col)
     gridApi.value.startEditingCell({ rowIndex, colKey: col })
   }
 }