From 0108a39cd6ae7b60c13eacfa8feaa5571947d3f1 Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sat, 25 Jul 2026 11:26:31 +0900
Subject: [PATCH] feat(wbs-ux): add TemplateGalleryView and register all 9 CRUD
 templates to router/navigation

---
 src/frontend/src/App.vue                      |  2 +
 src/frontend/src/router/index.ts              | 27 +++++++++++++-
 .../views/templates/TemplateGalleryView.vue   | 37 +++++++++++++++++++
 3 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 src/frontend/src/views/templates/TemplateGalleryView.vue

diff --git a/src/frontend/src/App.vue b/src/frontend/src/App.vue
index c92af4ee..a8cd1736 100644
--- a/src/frontend/src/App.vue
+++ b/src/frontend/src/App.vue
@@ -27,8 +27,10 @@ const route = useRoute()
       <router-link to="/database" style="color: white; text-decoration: none; padding: 4px 10px; font-weight: bold;" active-class="bg-primary">SCR-09: DB 관리 (Type 2 Split)</router-link>
       <router-link to="/snapshots" style="color: white; text-decoration: none; padding: 4px 10px; font-weight: bold;" active-class="bg-primary">SCR-10: 스냅샷 (Type 1)</router-link>
       <router-link to="/users" style="color: white; text-decoration: none; padding: 4px 10px; font-weight: bold;" active-class="bg-primary">SCR-12: 사용자 관리 (Type 2)</router-link>
+      <router-link to="/templates" style="color: #F1C40F; text-decoration: none; padding: 4px 10px; font-weight: bold;" active-class="bg-primary">🛠️ 프로토타입 갤러리</router-link>
     </div>
 
+
     <main style="flex: 1; overflow: hidden; background: #F4F6F9;">
       <router-view />
     </main>
diff --git a/src/frontend/src/router/index.ts b/src/frontend/src/router/index.ts
index 16c48863..6dd7a187 100644
--- a/src/frontend/src/router/index.ts
+++ b/src/frontend/src/router/index.ts
@@ -12,6 +12,18 @@ import EtfNavAnalysisView from '../views/EtfNavAnalysisView.vue'
 import SnapshotAdminView from '../views/SnapshotAdminView.vue'
 import UserManagementView from '../views/UserManagementView.vue'
 
+// 9대 프로토타입 템플릿 컴포넌트 임포트
+import TemplateGalleryView from '../views/templates/TemplateGalleryView.vue'
+import FactorParamDetailLayout from '../views/templates/FactorParamDetailLayout.vue'
+import AdvancedAgGridMarketLayout from '../views/templates/AdvancedAgGridMarketLayout.vue'
+import RebalancePipelineLayout from '../views/templates/RebalancePipelineLayout.vue'
+import RealDashboardLayout from '../views/templates/RealDashboardLayout.vue'
+import WaterfallShadowTreeLayout from '../views/templates/WaterfallShadowTreeLayout.vue'
+import RealMakerCheckerLayout from '../views/templates/RealMakerCheckerLayout.vue'
+import RealRollbackLayout from '../views/templates/RealRollbackLayout.vue'
+import RealExcelUploadMapper from '../views/templates/RealExcelUploadMapper.vue'
+import RealOlapExportLayout from '../views/templates/RealOlapExportLayout.vue'
+
 const router = createRouter({
   history: createWebHistory(),
   routes: [
@@ -27,8 +39,21 @@ const router = createRouter({
     { path: '/settings', component: SystemSettingsView },
     { path: '/database', component: DatabaseView },
     { path: '/snapshots', component: SnapshotAdminView },
-    { path: '/users', component: UserManagementView }
+    { path: '/users', component: UserManagementView },
+
+    // 프로토타입 템플릿 경로 매핑
+    { path: '/templates', component: TemplateGalleryView },
+    { path: '/templates/factor-detail', component: FactorParamDetailLayout },
+    { path: '/templates/ag-grid-market', component: AdvancedAgGridMarketLayout },
+    { path: '/templates/rebalance-pipeline', component: RebalancePipelineLayout },
+    { path: '/templates/real-dashboard', component: RealDashboardLayout },
+    { path: '/templates/waterfall-tree', component: WaterfallShadowTreeLayout },
+    { path: '/templates/maker-checker', component: RealMakerCheckerLayout },
+    { path: '/templates/real-rollback', component: RealRollbackLayout },
+    { path: '/templates/excel-upload', component: RealExcelUploadMapper },
+    { path: '/templates/olap-export', component: RealOlapExportLayout }
   ]
 })
 
 export default router
+
diff --git a/src/frontend/src/views/templates/TemplateGalleryView.vue b/src/frontend/src/views/templates/TemplateGalleryView.vue
new file mode 100644
index 00000000..6fb667c8
--- /dev/null
+++ b/src/frontend/src/views/templates/TemplateGalleryView.vue
@@ -0,0 +1,37 @@
+<!-- TemplateGalleryView.vue -->
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const templates = ref([
+  { id: 'factor-detail', title: '타입 A: 마스터-디테일 스플릿', path: '/templates/factor-detail', desc: 'factor_version_history 팩터 임계값 개별 상세 제어' },
+  { id: 'ag-grid-market', title: '타입 B: AG Grid 대량 편집', path: '/templates/ag-grid-market', desc: 'market_raw_history 종가 정정 및 실시간 괴리율 리액티브 연산' },
+  { id: 'rebalance-pipeline', title: '타입 C: 단계별 위저드', path: '/templates/rebalance-pipeline', desc: 'decision_result_history 수동 리밸런싱 실행 파이프라인' },
+  { id: 'real-dashboard', title: '타입 D: KPI 대시보드', path: '/templates/real-dashboard', desc: '포트폴리오 즉시방어 자산 비율 및 Hangfire 배치 관제' },
+  { id: 'waterfall-tree', title: '타입 E: 리스크 한도 트리', path: '/templates/waterfall-tree', desc: 'order_waterfall_execution 및 shadow_ledger_history 차단 게이트 스캔' },
+  { id: 'maker-checker', title: '타입 F: Maker-Checker 결재', path: '/templates/maker-checker', desc: '주요 정보 변경 시 2차 Checker 이중 승인 대기 보관함' },
+  { id: 'real-rollback', title: '타입 G: 감사 이력 및 롤백', path: '/templates/real-rollback', desc: '의사결정 패킷 이력 대조 및 특정 시점 원장 롤백 복구' },
+  { id: 'excel-upload', title: '타입 H: 실시간 엑셀 검증', path: '/templates/excel-upload', desc: '브라우저 내 엑셀 파싱 및 정합성 위반 셀 실시간 하이라이팅 가드' },
+  { id: 'olap-export', title: '타입 I: OLAP 및 엑셀 출력', path: '/templates/olap-export', desc: 'factor_output_history 피벗 연산 및 대용량 스트리밍 xlsx 다운로드' }
+]);
+</script>
+
+<template>
+  <div class="p-6 bg-gray-50 min-h-screen text-sm">
+    <div class="mb-6">
+      <h2 class="text-xl font-bold text-gray-800">🛠️ 상용화 프로토타입 템플릿 갤러리</h2>
+      <p class="text-xs text-gray-500">실제 PostgreSQL 테이블 및 C# BFF 스트리밍 연동 로직이 100% 매핑된 9대 실무 템플릿 목록입니다.</p>
+    </div>
+
+    <div class="grid grid-cols-3 gap-4">
+      <div v-for="t in templates" :key="t.id" class="bg-white p-5 rounded border hover:shadow-md transition flex flex-col justify-between">
+        <div>
+          <h4 class="font-bold text-gray-800 text-sm mb-1">{{ t.title }}</h4>
+          <p class="text-xs text-gray-400 mb-4">{{ t.desc }}</p>
+        </div>
+        <router-link :to="t.path" class="text-center py-2 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded text-xs block decoration-none">
+          템플릿 화면 보기
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>