From 9ca8359a6b6b0101825e80c1589b386229f6a534 Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sun, 26 Jul 2026 01:51:00 +0900
Subject: [PATCH] fix(menu): register all 11 enterprise CRUD template routes
 and add quick template selector menu in global header

---
 src/frontend/src/App.vue                      |  59 ++++--
 src/frontend/src/router/index.ts              |  15 +-
 .../views/templates/TemplateGalleryView.vue   | 181 ++++++------------
 3 files changed, 119 insertions(+), 136 deletions(-)

diff --git a/src/frontend/src/App.vue b/src/frontend/src/App.vue
index bdd5095c..a97b5699 100644
--- a/src/frontend/src/App.vue
+++ b/src/frontend/src/App.vue
@@ -1,9 +1,19 @@
 <script setup lang="ts">
-import { useRoute } from 'vue-router'
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import QuantHeader from './components/QuantHeader.vue'
 import QuantFooter from './components/QuantFooter.vue'
 
 const route = useRoute()
+const router = useRouter()
+const selectedTemplateRoute = ref('')
+
+const handleTemplateSelect = (e: Event) => {
+  const val = (e.target as HTMLSelectElement).value
+  if (val) {
+    router.push(val)
+  }
+}
 </script>
 
 <template>
@@ -14,20 +24,39 @@ const route = useRoute()
   <div v-else class="douzone-app-container">
     <QuantHeader />
     
-    <!-- 12대 QuantEngine WBS 메뉴 네비게이션 바 -->
-    <div style="background: #34495E; padding: 4px 16px; display: flex; gap: 8px; border-bottom: 1px solid #1A252F; overflow-x: auto; white-space: nowrap;">
-      <router-link to="/dashboard" style="color: white; text-decoration: none; padding: 4px 10px; font-weight: bold;" active-class="bg-primary">SCR-11: 펀드 KPI (Type 6)</router-link>
-      <router-link to="/timeseries" style="color: white; text-decoration: none; padding: 4px 10px; font-weight: bold;" active-class="bg-primary">SCR-01: 마켓 시계열 (Type 1)</router-link>
-      <router-link to="/factors" style="color: white; text-decoration: none; padding: 4px 10px; font-weight: bold;" active-class="bg-primary">SCR-02: 팩터 관리 (Type 2)</router-link>
-      <router-link to="/waterfall" style="color: white; text-decoration: none; padding: 4px 10px; font-weight: bold;" active-class="bg-primary">SCR-03: Waterfall 매도 (Type 1)</router-link>
-      <router-link to="/shadow" style="color: white; text-decoration: none; padding: 4px 10px; font-weight: bold;" active-class="bg-primary">SCR-04: Shadow 장부 (Type 2)</router-link>
-      <router-link to="/comparison" style="color: white; text-decoration: none; padding: 4px 10px; font-weight: bold;" active-class="bg-primary">SCR-05: KIS 괴리율 (Type 3 Split)</router-link>
-      <router-link to="/etf" style="color: white; text-decoration: none; padding: 4px 10px; font-weight: bold;" active-class="bg-primary">SCR-06: ETF NAV (Type 3 Split)</router-link>
-      <router-link to="/settings" style="color: white; text-decoration: none; padding: 4px 10px; font-weight: bold;" active-class="bg-primary">SCR-07: 캘리브레이션 (Type 4)</router-link>
-      <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>
+    <!-- 12대 QuantEngine WBS 메뉴 네비게이션 바 & 11대 표준 업무 템플릿 셀렉터 -->
+    <div style="background: #1E293B; padding: 6px 16px; display: flex; items-center; justify-content: space-between; border-bottom: 1px solid #0F172A; overflow-x: auto; white-space: nowrap;">
+      <div style="display: flex; gap: 6px; align-items: center;">
+        <router-link to="/dashboard" style="color: white; text-decoration: none; padding: 4px 8px; font-size: 12px; font-weight: bold;" active-class="bg-blue-600 rounded">SCR-11: 펀드 KPI</router-link>
+        <router-link to="/timeseries" style="color: white; text-decoration: none; padding: 4px 8px; font-size: 12px; font-weight: bold;" active-class="bg-blue-600 rounded">SCR-01: 시계열</router-link>
+        <router-link to="/factors" style="color: white; text-decoration: none; padding: 4px 8px; font-size: 12px; font-weight: bold;" active-class="bg-blue-600 rounded">SCR-02: 팩터</router-link>
+        <router-link to="/waterfall" style="color: white; text-decoration: none; padding: 4px 8px; font-size: 12px; font-weight: bold;" active-class="bg-blue-600 rounded">SCR-03: Waterfall</router-link>
+        <router-link to="/shadow" style="color: white; text-decoration: none; padding: 4px 8px; font-size: 12px; font-weight: bold;" active-class="bg-blue-600 rounded">SCR-04: Shadow</router-link>
+        <router-link to="/settings" style="color: white; text-decoration: none; padding: 4px 8px; font-size: 12px; font-weight: bold;" active-class="bg-blue-600 rounded">SCR-07: 캘리브레이션</router-link>
+        <router-link to="/templates" style="color: #F1C40F; text-decoration: none; padding: 4px 8px; font-size: 12px; font-weight: bold;" active-class="bg-blue-600 rounded">🛠️ 템플릿 갤러리</router-link>
+      </div>
+
+      <!-- 🏛️ OMS·WMS·ERP 11대 표준 업무 템플릿 빠른 메뉴 셀렉터 -->
+      <div style="display: flex; align-items: center; gap: 8px;">
+        <span style="color: #60A5FA; font-size: 12px; font-weight: bold;">🏛️ 11대 표준 업무 템플릿:</span>
+        <select
+          style="background: #0F172A; color: #60A5FA; border: 1px solid #3B82F6; border-radius: 4px; padding: 3px 8px; font-size: 12px; font-weight: bold;"
+          @change="handleTemplateSelect"
+        >
+          <option value="">-- 11대 표준 템플릿 즉시 이동 --</option>
+          <option value="/templates/list-01">TPL-LIST-01: 목록·검색 템플릿</option>
+          <option value="/templates/create-01">TPL-CREATE-01: 단일 등록 템플릿</option>
+          <option value="/templates/create-02">TPL-CREATE-02: 헤더·라인 등록 템플릿</option>
+          <option value="/templates/create-03">TPL-CREATE-03: 단계형 등록 템플릿</option>
+          <option value="/templates/detail-01">TPL-DETAIL-01: 상세 조회 템플릿</option>
+          <option value="/templates/edit-01">TPL-EDIT-01: 일반 수정 템플릿</option>
+          <option value="/templates/bulk-01">TPL-BULK-01: 일괄 수정 템플릿</option>
+          <option value="/templates/delete-01">TPL-DELETE-01: 삭제 템플릿</option>
+          <option value="/templates/cancel-01">TPL-CANCEL-01: 취소·역처리 템플릿</option>
+          <option value="/templates/approval-01">TPL-APPROVAL-01: 승인·반려 템플릿</option>
+          <option value="/templates/history-01">TPL-HISTORY-01: 변경 이력 템플릿</option>
+        </select>
+      </div>
     </div>
 
 
diff --git a/src/frontend/src/router/index.ts b/src/frontend/src/router/index.ts
index 2ea5f56a..0d17d8cf 100644
--- a/src/frontend/src/router/index.ts
+++ b/src/frontend/src/router/index.ts
@@ -40,7 +40,20 @@ const router = createRouter({
     { path: '/templates/maker-checker', component: () => import('../views/templates/RealMakerCheckerLayout.vue') },
     { path: '/templates/real-rollback', component: () => import('../views/templates/RealRollbackLayout.vue') },
     { path: '/templates/excel-upload', component: () => import('../views/templates/RealExcelUploadMapper.vue') },
-    { path: '/templates/olap-export', component: () => import('../views/templates/RealOlapExportLayout.vue') }
+    { path: '/templates/olap-export', component: () => import('../views/templates/RealOlapExportLayout.vue') },
+
+    // 11대 OMS·WMS·ERP 표준 업무 템플릿 경로 (TPL-LIST-01 ~ TPL-HISTORY-01)
+    { path: '/templates/list-01', component: () => import('../views/templates/TplList01View.vue') },
+    { path: '/templates/create-01', component: () => import('../views/templates/TplCreate01View.vue') },
+    { path: '/templates/create-02', component: () => import('../views/templates/TplCreate02View.vue') },
+    { path: '/templates/create-03', component: () => import('../views/templates/TplCreate03View.vue') },
+    { path: '/templates/detail-01', component: () => import('../views/templates/TplDetail01View.vue') },
+    { path: '/templates/edit-01', component: () => import('../views/templates/TplEdit01View.vue') },
+    { path: '/templates/bulk-01', component: () => import('../views/templates/TplBulk01View.vue') },
+    { path: '/templates/delete-01', component: () => import('../views/templates/TplDelete01View.vue') },
+    { path: '/templates/cancel-01', component: () => import('../views/templates/TplCancel01View.vue') },
+    { path: '/templates/approval-01', component: () => import('../views/templates/TplApproval01View.vue') },
+    { path: '/templates/history-01', component: () => import('../views/templates/TplHistory01View.vue') }
   ]
 })
 
diff --git a/src/frontend/src/views/templates/TemplateGalleryView.vue b/src/frontend/src/views/templates/TemplateGalleryView.vue
index 5dec0d97..e8a0ad96 100644
--- a/src/frontend/src/views/templates/TemplateGalleryView.vue
+++ b/src/frontend/src/views/templates/TemplateGalleryView.vue
@@ -2,7 +2,21 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
-const templates = ref([
+const enterpriseTemplates = ref([
+  { id: 'TPL-LIST-01', title: 'TPL-LIST-01: 목록·검색 템플릿', path: '/templates/list-01', desc: 'OMS 주문 목록, WMS 재고 현황, 렌즈 퀵 필터, sizeColumnsToFit', typeBadge: 'TPL-LIST-01' },
+  { id: 'TPL-CREATE-01', title: 'TPL-CREATE-01: 단일 등록 템플릿', path: '/templates/create-01', desc: '거래처/품목 마스터 등록, Idempotency Key, 저장 후 계속 등록', typeBadge: 'TPL-CREATE-01' },
+  { id: 'TPL-CREATE-02', title: 'TPL-CREATE-02: 헤더·라인 등록 템플릿', path: '/templates/create-02', desc: 'OMS 복합 주문/발주 등록, 헤더-라인 연동, 저장/확정 분리', typeBadge: 'TPL-CREATE-02' },
+  { id: 'TPL-CREATE-03', title: 'TPL-CREATE-03: 단계형 등록 템플릿', path: '/templates/create-03', desc: '복합 반품/계약 Step Form Wizard, 임시저장 세션 복구', typeBadge: 'TPL-CREATE-03' },
+  { id: 'TPL-DETAIL-01', title: 'TPL-DETAIL-01: 상세 조회 템플릿', path: '/templates/detail-01', desc: 'Status Timeline 뱃지, KPI 카드, 관련 문서 Tree 내비게이션', typeBadge: 'TPL-DETAIL-01' },
+  { id: 'TPL-EDIT-01', title: 'TPL-EDIT-01: 일반 수정 템플릿', path: '/templates/edit-01', desc: 'ChangeSet 변경 추적, Version Conflict(409) 3-Way Diff 비교', typeBadge: 'TPL-EDIT-01' },
+  { id: 'TPL-BULK-01', title: 'TPL-BULK-01: 일괄 수정 템플릿', path: '/templates/bulk-01', desc: '담당자/예정일 일괄 변경, 예상 영향 미리보기, 비동기 Job 연동', typeBadge: 'TPL-BULK-01' },
+  { id: 'TPL-DELETE-01', title: 'TPL-DELETE-01: 삭제 템플릿', path: '/templates/delete-01', desc: '미사용 마스터 안전 삭제, 참조 데이터 존재 시 차단 Modal', typeBadge: 'TPL-DELETE-01' },
+  { id: 'TPL-CANCEL-01', title: 'TPL-CANCEL-01: 취소·역처리 템플릿', path: '/templates/cancel-01', desc: '주문/출고 취소, Cancellation Preview Token & 역트랜잭션 생성', typeBadge: 'TPL-CANCEL-01' },
+  { id: 'TPL-APPROVAL-01', title: 'TPL-APPROVAL-01: 승인·반려 템플릿', path: '/templates/approval-01', desc: '발주/전표 승인, 작성자-승인자 직무분리(SoD) 승인 차단', typeBadge: 'TPL-APPROVAL-01' },
+  { id: 'TPL-HISTORY-01', title: 'TPL-HISTORY-01: 변경 이력 템플릿', path: '/templates/history-01', desc: 'AuditEvent 스키마 기반 필드 단위 변경 차이(Diff) 뷰어', typeBadge: 'TPL-HISTORY-01' }
+]);
+
+const prototypeTemplates = ref([
   { id: 'factor-detail', title: '타입 A: 마스터-디테일 스플릿', path: '/templates/factor-detail', desc: 'factor_version_history 팩터 임계값 개별 상세 제어', typeBadge: 'Master-Detail' },
   { id: 'ag-grid-market', title: '타입 B: AG Grid 대량 편집', path: '/templates/ag-grid-market', desc: 'market_raw_history 종가 정정 및 실시간 괴리율 리액티브 연산', typeBadge: 'AG Grid' },
   { id: 'rebalance-pipeline', title: '타입 C: 단계별 위저드', path: '/templates/rebalance-pipeline', desc: 'decision_result_history 수동 리밸런싱 실행 파이프라인', typeBadge: 'Wizard' },
@@ -16,130 +30,57 @@ const templates = ref([
 </script>
 
 <template>
-  <div class="gallery-container">
-    <div class="gallery-header">
-      <h2 class="gallery-title">🛠️ 상용화 프로토타입 템플릿 갤러리</h2>
-      <p class="gallery-subtitle">실제 PostgreSQL 원장 스키마 및 C# BFF API 스트리밍이 100% 매핑된 9대 실무 어드민 템플릿 표준 모음입니다.</p>
+  <div class="gallery-container flex flex-col gap-6 p-6 bg-slate-50 min-h-full">
+    <!-- Header -->
+    <div class="gallery-header border-b-2 border-slate-200 pb-3">
+      <h2 class="text-xl font-bold text-slate-800">🏛️ OMS·WMS·ERP 11대 표준 업무 템플릿 & 상용화 프로토타입 갤러리</h2>
+      <p class="text-xs text-slate-500 mt-1">상용화 명세(`docs/ENTERPRISE_CRUD_DESIGN_SPECIFICATION.md`) 11대 표준 템플릿(`TPL-LIST-01` ~ `TPL-HISTORY-01`) 및 9대 퀀트 어드민 템플릿 모음입니다.</p>
     </div>
 
-    <div class="gallery-grid">
-      <div v-for="t in templates" :key="t.id" class="gallery-card">
-        <div class="card-body">
-          <div class="card-badge">{{ t.typeBadge }}</div>
-          <h4 class="card-title">{{ t.title }}</h4>
-          <p class="card-desc">{{ t.desc }}</p>
+    <!-- Section 1: 11대 표준 업무 템플릿 -->
+    <div class="section-container flex flex-col gap-3">
+      <div class="flex items-center gap-2">
+        <h3 class="text-base font-bold text-blue-900">🏛️ OMS·WMS·ERP 11대 표준 업무 템플릿</h3>
+        <span class="px-2 py-0.5 rounded bg-blue-100 text-blue-800 text-xs font-bold">표준 스펙 100% 구현</span>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div v-for="t in enterpriseTemplates" :key="t.id" class="gallery-card bg-white border border-blue-200 rounded-lg p-4 flex flex-col justify-between shadow-sm hover:shadow-md transition">
+          <div class="card-body">
+            <span class="card-badge bg-blue-50 border border-blue-200 text-blue-700 text-[11px] font-bold px-2 py-0.5 rounded inline-block mb-2">{{ t.typeBadge }}</span>
+            <h4 class="card-title text-sm font-bold text-slate-900 mb-1">{{ t.title }}</h4>
+            <p class="card-desc text-xs text-slate-600 leading-relaxed">{{ t.desc }}</p>
+          </div>
+          <div class="card-footer mt-3 border-t pt-2">
+            <router-link :to="t.path" class="btn-gallery-action block w-full text-center bg-blue-600 hover:bg-blue-700 text-white font-bold text-xs py-2 rounded transition">
+              표준 템플릿 화면 열기 →
+            </router-link>
+          </div>
         </div>
-        <div class="card-footer">
-          <router-link :to="t.path" class="btn-gallery-action">
-            템플릿 화면 보기 →
-          </router-link>
+      </div>
+    </div>
+
+    <!-- Section 2: 9대 퀀트 어드민 프로토타입 -->
+    <div class="section-container flex flex-col gap-3 mt-4">
+      <div class="flex items-center gap-2">
+        <h3 class="text-base font-bold text-slate-800">🛠️ 9대 퀀트 어드민 프로토타입 카탈로그</h3>
+        <span class="px-2 py-0.5 rounded bg-slate-200 text-slate-700 text-xs font-bold">PostgreSQL 연동</span>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div v-for="t in prototypeTemplates" :key="t.id" class="gallery-card bg-white border border-slate-300 rounded-lg p-4 flex flex-col justify-between shadow-sm hover:shadow-md transition">
+          <div class="card-body">
+            <span class="card-badge bg-slate-100 border border-slate-300 text-slate-700 text-[11px] font-bold px-2 py-0.5 rounded inline-block mb-2">{{ t.typeBadge }}</span>
+            <h4 class="card-title text-sm font-bold text-slate-900 mb-1">{{ t.title }}</h4>
+            <p class="card-desc text-xs text-slate-600 leading-relaxed">{{ t.desc }}</p>
+          </div>
+          <div class="card-footer mt-3 border-t pt-2">
+            <router-link :to="t.path" class="btn-gallery-action block w-full text-center bg-slate-700 hover:bg-slate-800 text-white font-bold text-xs py-2 rounded transition">
+              프로토타입 템플릿 보기 →
+            </router-link>
+          </div>
         </div>
       </div>
     </div>
   </div>
 </template>
-
-<style scoped>
-.gallery-container {
-  padding: 24px;
-  background-color: #F8FAFC;
-  min-height: 100%;
-  box-sizing: border-box;
-}
-
-.gallery-header {
-  margin-bottom: 24px;
-  border-bottom: 2px solid #E2E8F0;
-  padding-bottom: 12px;
-}
-
-.gallery-title {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: #1E293B;
-  margin: 0 0 6px 0;
-}
-
-.gallery-subtitle {
-  font-size: 0.8125rem;
-  color: #64748B;
-  margin: 0;
-}
-
-.gallery-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 20px;
-}
-
-.gallery-card {
-  background: #FFFFFF;
-  border: 1px solid #CBD5E1;
-  border-radius: 8px;
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-  transition: all 0.2s ease-in-out;
-}
-
-.gallery-card:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
-  border-color: #2563EB;
-}
-
-.card-body {
-  margin-bottom: 16px;
-}
-
-.card-badge {
-  display: inline-block;
-  font-size: 0.7rem;
-  font-weight: 700;
-  color: #2563EB;
-  background-color: #EFF6FF;
-  border: 1px solid #BFDBFE;
-  padding: 2px 8px;
-  border-radius: 4px;
-  margin-bottom: 8px;
-}
-
-.card-title {
-  font-size: 0.95rem;
-  font-weight: 700;
-  color: #0F172A;
-  margin: 0 0 8px 0;
-}
-
-.card-desc {
-  font-size: 0.8rem;
-  color: #475569;
-  line-height: 1.4;
-  margin: 0;
-}
-
-.card-footer {
-  margin-top: auto;
-}
-
-.btn-gallery-action {
-  display: block;
-  width: 100%;
-  text-align: center;
-  padding: 8px 0;
-  background-color: #2563EB;
-  color: #FFFFFF;
-  font-size: 0.8125rem;
-  font-weight: 700;
-  text-decoration: none;
-  border-radius: 4px;
-  transition: background-color 0.15s ease;
-  box-sizing: border-box;
-}
-
-.btn-gallery-action:hover {
-  background-color: #1D4ED8;
-}
-</style>