V13-FE-005: Complete KBX v60 frontend components, T01-T12 screen recipes, and WBS progress tracker

frontend/src/features/model-operations/pages/ModelOperationsPage.vue

@@ -1,32 +1,40 @@
 <script setup lang="ts">
-import QueryStateBoundary from '../../../shared/ui/QueryStateBoundary.vue'
+import { ref, reactive } from 'vue'
+import VersionGovernancePage from '../../../shared/ui/screen-types/v2/VersionGovernancePage.vue'
 import AutomationBoundaryPanel from '../components/AutomationBoundaryPanel.vue'
 import ModelOperationTable from '../components/ModelOperationTable.vue'
 import { useModelOperationsPlanQuery } from '../queries'
+import type { StandardScreenState } from '../../../shared/ui/contracts/screenContract'
 
 const planQuery = useModelOperationsPlanQuery()
+
+const screenState = ref<StandardScreenState>('READY')
+const evidence = reactive({
+  asOf: '2026-08-15T19:42:00Z',
+  version: 'v60-T10-Contract',
+})
+
+const handleRetry = () => {
+  planQuery.refetch()
+}
 </script>
 
 <template>
-  <article>
-    <header>
-      <h1>모델 운영·지속 고도화</h1>
-      <p>일·주·월·분기 평가, drift, champion/challenger, 개선 제안과 승격 증거를 관리합니다.</p>
-    </header>
-
-    <QueryStateBoundary
-      :loading="planQuery.isLoading.value"
-      :error="planQuery.error.value as Error | null"
-      :empty="!planQuery.data.value"
-    >
-      <template v-if="planQuery.data.value">
-        <AutomationBoundaryPanel
-          :algorithm-status="planQuery.data.value.algorithmStatus"
-          :order-capability="planQuery.data.value.orderCapability"
-          :model-mutation-boundary="planQuery.data.value.modelMutationBoundary"
-        />
-        <ModelOperationTable :operations="planQuery.data.value.operations" />
-      </template>
-    </QueryStateBoundary>
-  </article>
+  <VersionGovernancePage
+    title="모델 버전 거버넌스 (Model Governance & Versioning)"
+    subtitle="알고리즘 평가, Drift 지표, Champion/Challenger 버전 비교 및 승격 증거를 관리합니다."
+    :state="planQuery.isLoading.value ? 'LOADING' : planQuery.error.value ? 'ERROR' : !planQuery.data.value ? 'EMPTY' : screenState"
+    :evidence="evidence"
+    @retry="handleRetry"
+  >
+    <!-- Default Slot: Content Panel -->
+    <div v-if="planQuery.data.value" class="content">
+      <AutomationBoundaryPanel
+        :algorithm-status="planQuery.data.value.algorithmStatus"
+        :order-capability="planQuery.data.value.orderCapability"
+        :model-mutation-boundary="planQuery.data.value.modelMutationBoundary"
+      />
+      <ModelOperationTable :operations="planQuery.data.value.operations" />
+    </div>
+  </VersionGovernancePage>
 </template>