style(fe): standardize ModelList master-detail page with central width tokens, selection highlight, and viewport-fit bounds

frontend/src/shared/ui/adapter/primevue/AgGridAdapter.vue

@@ -5,6 +5,7 @@ import {
   ClientSideRowModelModule,
   ColumnAutoSizeModule,
   CellStyleModule,
+  ValidationModule,
   TextFilterModule,
   themeQuartz,
   ModuleRegistry,
@@ -18,6 +19,7 @@ ModuleRegistry.registerModules([
   ClientSideRowModelModule,
   ColumnAutoSizeModule,
   CellStyleModule,
+  ValidationModule,
   TextFilterModule,
   RowSelectionModule
 ])

frontend/src/shared/ui/components/KsDataGrid.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { AgGridVue } from 'ag-grid-vue3'
-import { ClientSideRowModelModule, ColumnAutoSizeModule, CellStyleModule, ModuleRegistry, RowSelectionModule, TextFilterModule, themeQuartz, type ColDef, type RowClickedEvent } from 'ag-grid-community'
+import { ClientSideRowModelModule, ColumnAutoSizeModule, CellStyleModule, ValidationModule, ModuleRegistry, RowSelectionModule, TextFilterModule, themeQuartz, type ColDef, type RowClickedEvent } from 'ag-grid-community'
 import type { UiGridColumn } from '../adapter/contracts'
 
-ModuleRegistry.registerModules([ClientSideRowModelModule, ColumnAutoSizeModule, CellStyleModule, TextFilterModule, RowSelectionModule])
+ModuleRegistry.registerModules([ClientSideRowModelModule, ColumnAutoSizeModule, CellStyleModule, ValidationModule, TextFilterModule, RowSelectionModule])
 
 const emit = defineEmits<{ rowSelected: [row: unknown] }>()
 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 })
@@ -60,7 +60,6 @@ function onGridReady(params: { api: { sizeColumnsToFit: () => void } }): void {
       :column-defs="columnDefs"
       :row-selection="rowSelectionOptions"
       :loading="props.loading"
-      :auto-size-strategy="{ type: 'fitGridWidth' }"
       overlay-no-rows-template="<div class='ks-ag-empty-overlay'><span style='font-size:2rem;'>📭</span><p style='margin-top:8px;font-weight:600;color:var(--ks-color-neutral-700);'>조회된 데이터가 없습니다</p><p style='font-size:12px;color:var(--ks-color-neutral-500);'>검색 조건을 변경하거나 신규 데이터를 수집하세요.</p></div>"
       @grid-ready="onGridReady"
       @first-data-rendered="onGridReady"