From 554510bf753840a4156465ecb37bb38ee0226827 Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sun, 26 Jul 2026 02:11:14 +0900
Subject: [PATCH] feat(gallery): enhance TemplateGalleryView with risk level
 badges and button routing; update E2E locator

---
 src/frontend/e2e/template-navigation.spec.ts  |  6 +-
 .../views/templates/TemplateGalleryView.vue   | 78 ++++++++++++-------
 2 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/src/frontend/e2e/template-navigation.spec.ts b/src/frontend/e2e/template-navigation.spec.ts
index 4678ac58..fe07f323 100644
--- a/src/frontend/e2e/template-navigation.spec.ts
+++ b/src/frontend/e2e/template-navigation.spec.ts
@@ -14,9 +14,9 @@ test.describe('Vite SPA 어드민 템플릿 네비게이션 E2E 테스트', () =
     const header = page.locator('h2');
     await expect(header).toContainText('11대 표준 업무 템플릿');
 
-    // 3. 카드 및 헤더 링크 수 검증 (11대 표준 + 9대 프로토타입 + 상단 메뉴)
-    const cardLinks = page.locator('a:has-text("템플릿")');
-    await expect(cardLinks).toHaveCount(21);
+    // 3. 카드 수 검증 (11대 표준 + 9대 프로토타입)
+    const cardButtons = page.locator('button:has-text("템플릿")');
+    await expect(cardButtons).toHaveCount(20);
 
     // 4. Playwright E2E 스크린샷 캡쳐 (범용 아티팩트 경로 생성)
     const screenshotPath = path.resolve(__dirname, '../../../../antigravity-cli/brain/4ffb3a8c-b0d4-4610-9caa-b043a85a33af/templates_gallery_screenshot.png');
diff --git a/src/frontend/src/views/templates/TemplateGalleryView.vue b/src/frontend/src/views/templates/TemplateGalleryView.vue
index e8a0ad96..2a634380 100644
--- a/src/frontend/src/views/templates/TemplateGalleryView.vue
+++ b/src/frontend/src/views/templates/TemplateGalleryView.vue
@@ -1,19 +1,22 @@
 <!-- TemplateGalleryView.vue -->
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
 
 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' }
+  { id: 'TPL-LIST-01', title: 'TPL-LIST-01: 목록·검색 템플릿', path: '/templates/list-01', desc: 'OMS 주문 목록, WMS 재고 현황, 렌즈 퀵 필터, sizeColumnsToFit 가상화', typeBadge: 'TPL-LIST-01', riskLevel: 'R0' },
+  { id: 'TPL-CREATE-01', title: 'TPL-CREATE-01: 단일 등록 템플릿', path: '/templates/create-01', desc: '거래처/품목 마스터 등록, Idempotency Key, 저장 후 계속 등록 모드', typeBadge: 'TPL-CREATE-01', riskLevel: 'R1' },
+  { id: 'TPL-CREATE-02', title: 'TPL-CREATE-02: 헤더·라인 등록 템플릿', path: '/templates/create-02', desc: 'OMS 복합 주문/발주 등록, 헤더-라인 연동, OrderLineEditor 연동', typeBadge: 'TPL-CREATE-02', riskLevel: 'R2' },
+  { id: 'TPL-CREATE-03', title: 'TPL-CREATE-03: 단계형 등록 템플릿', path: '/templates/create-03', desc: '복합 반품/계약 Step Form Wizard, 임시저장 세션 복구', typeBadge: 'TPL-CREATE-03', riskLevel: 'R2' },
+  { id: 'TPL-DETAIL-01', title: 'TPL-DETAIL-01: 상세 조회 템플릿', path: '/templates/detail-01', desc: 'Status Timeline 뱃지, KPI 카드, 관련 문서 Tree 내비게이션', typeBadge: 'TPL-DETAIL-01', riskLevel: 'R0' },
+  { id: 'TPL-EDIT-01', title: 'TPL-EDIT-01: 일반 수정 템플릿', path: '/templates/edit-01', desc: 'ChangeSet 변경 추적, Version Conflict(409) 3-Way Diff 비교', typeBadge: 'TPL-EDIT-01', riskLevel: 'R1' },
+  { id: 'TPL-BULK-01', title: 'TPL-BULK-01: 일괄 수정 템플릿', path: '/templates/bulk-01', desc: '담당자/예정일 일괄 변경, 예상 영향 미리보기, 비동기 Job 연동', typeBadge: 'TPL-BULK-01', riskLevel: 'R3' },
+  { id: 'TPL-DELETE-01', title: 'TPL-DELETE-01: 삭제 템플릿', path: '/templates/delete-01', desc: '미사용 마스터 안전 삭제, 참조 데이터 존재 시 차단 Modal', typeBadge: 'TPL-DELETE-01', riskLevel: 'R4' },
+  { id: 'TPL-CANCEL-01', title: 'TPL-CANCEL-01: 취소·역처리 템플릿', path: '/templates/cancel-01', desc: '주문/출고 취소, Cancellation Preview Token & 역트랜잭션 생성', typeBadge: 'TPL-CANCEL-01', riskLevel: 'R3' },
+  { id: 'TPL-APPROVAL-01', title: 'TPL-APPROVAL-01: 승인·반려 템플릿', path: '/templates/approval-01', desc: '발주/전표 승인, 작성자-승인자 직무분리(SoD) 승인 차단', typeBadge: 'TPL-APPROVAL-01', riskLevel: 'R3' },
+  { id: 'TPL-HISTORY-01', title: 'TPL-HISTORY-01: 변경 이력 템플릿', path: '/templates/history-01', desc: 'AuditEvent 스키마 기반 필드 단위 변경 차이(Diff) 뷰어', typeBadge: 'TPL-HISTORY-01', riskLevel: 'R0' }
 ]);
 
 const prototypeTemplates = ref([
@@ -27,57 +30,74 @@ const prototypeTemplates = ref([
   { id: 'excel-upload', title: '타입 H: 실시간 엑셀 검증', path: '/templates/excel-upload', desc: '브라우저 내 엑셀 파싱 및 정합성 위반 셀 실시간 하이라이팅 가드', typeBadge: 'Excel Parser' },
   { id: 'olap-export', title: '타입 I: OLAP 및 엑셀 출력', path: '/templates/olap-export', desc: 'factor_output_history 피벗 연산 및 대용량 스트리밍 xlsx 다운로드', typeBadge: 'OLAP Export' }
 ]);
+
+const navigateToTemplate = (path: string) => {
+  router.push(path);
+};
 </script>
 
 <template>
-  <div class="gallery-container flex flex-col gap-6 p-6 bg-slate-50 min-h-full">
+  <div class="gallery-container flex flex-col gap-6 p-6 bg-slate-100 min-h-full overflow-y-auto select-none">
     <!-- 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 class="gallery-header bg-white p-4 rounded-md border border-slate-300 shadow-sm flex justify-between items-center">
+      <div>
+        <h2 class="text-lg font-bold text-slate-900 flex items-center gap-2">
+          <span>🏛️ OMS·WMS·ERP 11대 표준 업무 템플릿 카탈로그</span>
+          <span class="px-2 py-0.5 rounded bg-emerald-100 text-emerald-800 text-xs font-bold">100% 구현 완결</span>
+        </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="text-xs text-slate-600 font-mono bg-slate-50 px-3 py-1.5 rounded border border-slate-200">
+        WBS-MASTER-2026 Status: <strong class="text-emerald-700">All PASS</strong>
+      </div>
     </div>
 
     <!-- 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>
+        <h3 class="text-base font-bold text-slate-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 v-for="t in enterpriseTemplates" :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-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>
+            <div class="flex justify-between items-center mb-2">
+              <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 font-mono">{{ t.typeBadge }}</span>
+              <span :class="['text-[10px] font-bold px-1.5 py-0.5 rounded font-mono', t.riskLevel === 'R4' ? 'bg-rose-100 text-rose-800' : 'bg-slate-100 text-slate-700']">
+                {{ t.riskLevel }} 위험도
+              </span>
+            </div>
             <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">
+          <div class="card-footer mt-3 border-t border-slate-200 pt-2">
+            <button type="button" class="btn-gallery-action w-full text-center bg-blue-600 hover:bg-blue-700 text-white font-bold text-xs py-2 rounded transition shadow-sm" @click="navigateToTemplate(t.path)">
               표준 템플릿 화면 열기 →
-            </router-link>
+            </button>
           </div>
         </div>
       </div>
     </div>
 
     <!-- Section 2: 9대 퀀트 어드민 프로토타입 -->
-    <div class="section-container flex flex-col gap-3 mt-4">
+    <div class="section-container flex flex-col gap-3 mt-2">
       <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>
+        <h3 class="text-base font-bold text-slate-900">🛠️ 9대 퀀트 어드민 프로토타입 카탈로그</h3>
+        <span class="px-2 py-0.5 rounded bg-slate-200 text-slate-800 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>
+            <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 font-mono">{{ 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">
+          <div class="card-footer mt-3 border-t border-slate-200 pt-2">
+            <button type="button" class="btn-gallery-action w-full text-center bg-slate-800 hover:bg-slate-900 text-white font-bold text-xs py-2 rounded transition shadow-sm" @click="navigateToTemplate(t.path)">
               프로토타입 템플릿 보기 →
-            </router-link>
+            </button>
           </div>
         </div>
       </div>