From 8a3ee0a1d7e7c0e2d81e5badaa35be0e34530cfc Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sat, 15 Aug 2026 22:56:04 +0900
Subject: [PATCH] feat(fe): implement working ModelsList grid with mock data

- Simplified data fetching (removed TanStack Query for now)
- Added direct mock API client in component
- Fixed state management (isLoading, isError, modelsData)
- Grid now renders with 3 sample model records
- Updated v-if conditions for loading/error/empty states
- Added grid container height and filter styling

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 .../features/models/composables/useModels.ts  |  11 +-
 .../src/features/models/pages/ModelsList.vue  | 168 ++++++++++++------
 2 files changed, 115 insertions(+), 64 deletions(-)

diff --git a/frontend/src/features/models/composables/useModels.ts b/frontend/src/features/models/composables/useModels.ts
index 986f5976..560b4031 100644
--- a/frontend/src/features/models/composables/useModels.ts
+++ b/frontend/src/features/models/composables/useModels.ts
@@ -188,12 +188,13 @@ export const modelQueryKeys = {
 /**
  * Fetch list of models with pagination
  */
-export function useModelsList(params: ModelListParams = {}) {
+export function useModelsList(params?: ModelListParams) {
+  const finalParams = params || {}
   return useQuery({
-    queryKey: modelQueryKeys.list(params),
-    queryFn: () => apiClient.listModels(params),
-    staleTime: 5 * 60 * 1000, // 5 minutes
-    gcTime: 10 * 60 * 1000, // 10 minutes
+    queryKey: ['models', 'list', finalParams],
+    queryFn: () => apiClient.listModels(finalParams),
+    staleTime: 5 * 60 * 1000,
+    gcTime: 10 * 60 * 1000,
   })
 }
 
diff --git a/frontend/src/features/models/pages/ModelsList.vue b/frontend/src/features/models/pages/ModelsList.vue
index 0a12212d..c5f3351e 100644
--- a/frontend/src/features/models/pages/ModelsList.vue
+++ b/frontend/src/features/models/pages/ModelsList.vue
@@ -1,27 +1,92 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import PageLayout from '../../../shared/ui/layouts/PageLayout.vue'
 import { KsDataGrid, EmptyStatePlaceholder, SkeletonLoader } from '../../../shared/ui/components'
 import type { UiGridColumn } from '../../../shared/ui/adapter/contracts'
-import { useModelsList, type Model } from '../composables/useModels'
+import type { Model, ModelListResponse } from '../composables/useModels'
 
 const currentPage = ref(1)
 const pageSize = ref(20)
 const searchQuery = ref('')
 const selectedPhase = ref('')
 
-const queryParams = computed(() => ({
-  page: currentPage.value,
-  pageSize: pageSize.value,
-  search: searchQuery.value,
-  phase: selectedPhase.value,
-}))
-
-const modelsQuery = useModelsList(queryParams.value)
+const isLoading = ref(true)
+const isError = ref(false)
+const modelsData = ref<ModelListResponse | null>(null)
 
 const items = computed(() => {
-  const data = modelsQuery.data.value as any
-  return data?.items || []
+  return modelsData.value?.items || []
+})
+
+// Mock API client (same as in composable)
+const apiClient = {
+  async listModels(params: any) {
+    await new Promise(resolve => setTimeout(resolve, 300))
+    const mockModels: Model[] = [
+      {
+        modelId: '00000000-0000-0000-0000-000000000001',
+        name: 'Alpha Strategy v1',
+        phase: 'Validate',
+        active: false,
+        lastValidation: '2026-08-10',
+        pbo: 15.2,
+        dsr: 96.5,
+        returnMtd: 12.5,
+        createdAt: '2026-06-15',
+      },
+      {
+        modelId: '00000000-0000-0000-0000-000000000002',
+        name: 'Beta Model v2',
+        phase: 'Review',
+        active: false,
+        lastValidation: '2026-08-09',
+        pbo: 18.3,
+        dsr: 94.2,
+        returnMtd: 8.3,
+        createdAt: '2026-07-01',
+      },
+      {
+        modelId: '00000000-0000-0000-0000-000000000003',
+        name: 'Gamma Arbitrage',
+        phase: 'Mature',
+        active: true,
+        lastValidation: '2026-08-08',
+        pbo: 8.5,
+        dsr: 98.1,
+        returnMtd: 18.7,
+        createdAt: '2026-05-10',
+      },
+    ]
+    return {
+      items: mockModels,
+      total: mockModels.length,
+      page: 1,
+      pageSize: 20,
+    }
+  },
+}
+
+async function loadModels() {
+  try {
+    isLoading.value = true
+    isError.value = false
+    const data = await apiClient.listModels({
+      page: currentPage.value,
+      pageSize: pageSize.value,
+      search: searchQuery.value,
+      phase: selectedPhase.value,
+    })
+    modelsData.value = data
+  } catch (error) {
+    isError.value = true
+    console.error('Failed to load models:', error)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+onMounted(() => {
+  loadModels()
 })
 
 const columns: UiGridColumn[] = [
@@ -56,7 +121,8 @@ const columns: UiGridColumn[] = [
 ]
 
 function handleSearch() {
-  modelsQuery.refetch()
+  currentPage.value = 1
+  loadModels()
 }
 </script>
 
@@ -90,12 +156,12 @@ function handleSearch() {
     </template>
 
     <!-- Loading State -->
-    <div v-if="modelsQuery.isPending.value" class="state-container">
+    <div v-if="isLoading" class="state-container">
       <SkeletonLoader type="table" :rows="8" />
     </div>
 
     <!-- Error State -->
-    <div v-else-if="modelsQuery.isError.value" class="state-container">
+    <div v-else-if="isError" class="state-container">
       <EmptyStatePlaceholder title="데이터 로드 실패" description="모델 목록 데이터를 불러오지 못했습니다. 다시 시도해 주세요." />
     </div>
 
@@ -117,65 +183,49 @@ function handleSearch() {
 </template>
 
 <style scoped>
-.models-page {
-  padding: 2rem;
-  max-width: 1400px;
-  margin: 0 auto;
+.filters {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1rem;
 }
 
-.page-header {
-  margin-bottom: 2rem;
+.search-input,
+.status-select {
+  padding: 0.5rem;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 4px;
+  background-color: var(--color-background-primary);
+  color: var(--color-text-primary);
+  font-size: 0.875rem;
 }
 
-.page-header h1 {
-  margin: 0;
-  font-size: 2rem;
-  font-weight: 700;
+.search-input {
+  flex: 1;
+  min-width: 200px;
 }
 
-.page-header p {
-  margin: 0.5rem 0 0 0;
-  color: var(--color-text-secondary);
+.status-select {
+  min-width: 150px;
 }
 
-.loading-state,
-.error-state,
-.empty-state {
+.state-container {
   padding: 2rem;
   text-align: center;
   border: 1px solid var(--color-border-primary);
-  border-radius: var(--border-radius-md);
+  border-radius: 4px;
   background-color: var(--color-background-secondary);
+  min-height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.models-grid {
+.grid-container {
   border: 1px solid var(--color-border-primary);
-  border-radius: var(--border-radius-md);
+  border-radius: 4px;
   overflow: hidden;
-}
-
-.models-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.models-table thead {
-  background-color: var(--color-background-secondary);
-}
-
-.models-table th {
-  padding: 1rem;
-  text-align: left;
-  font-weight: 600;
-  border-bottom: 1px solid var(--color-border-primary);
-}
-
-.models-table td {
-  padding: 1rem;
-  border-bottom: 1px solid var(--color-border-primary);
-}
-
-.models-table tbody tr:hover {
-  background-color: var(--color-background-hover);
+  height: 600px;
+  display: flex;
+  flex-direction: column;
 }
 </style>