refactor(wbs-ux): optimize template routes with lazy loading and enhance Playwright ESM path resolution

src/frontend/e2e/template-navigation.spec.ts

@@ -1,4 +1,9 @@
 import { test, expect } from '@playwright/test';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 test.describe('Vite SPA 어드민 템플릿 네비게이션 E2E 테스트', () => {
   test('프로토타입 갤러리 진입 및 카드 목록 확인', async ({ page }) => {
@@ -13,8 +18,8 @@ test.describe('Vite SPA 어드민 템플릿 네비게이션 E2E 테스트', () =
     const cardLinks = page.locator('a:has-text("템플릿 화면 보기")');
     await expect(cardLinks).toHaveCount(9);
 
-    // 4. Playwright E2E 스크린샷 캡쳐 (시각 증빙 데이터 생성)
-    const screenshotPath = 'C:/Users/kjh20/.gemini/antigravity-cli/brain/4ffb3a8c-b0d4-4610-9caa-b043a85a33af/templates_gallery_screenshot.png';
+    // 4. Playwright E2E 스크린샷 캡쳐 (범용 아티팩트 경로 생성)
+    const screenshotPath = path.resolve(__dirname, '../../../../antigravity-cli/brain/4ffb3a8c-b0d4-4610-9caa-b043a85a33af/templates_gallery_screenshot.png');
     await page.screenshot({ path: screenshotPath, fullPage: true });
 
     console.log('✓ E2E 검증 통과: 9대 CRUD/엑셀/OLAP 프로토타입 카드가 100% 정상 활성화되었습니다.');
@@ -22,3 +27,5 @@ test.describe('Vite SPA 어드민 템플릿 네비게이션 E2E 테스트', () =
   });
 });
 
+
+

src/frontend/src/router/index.ts

@@ -12,19 +12,8 @@ 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: [
     { path: '/', redirect: '/login' },
@@ -41,19 +30,20 @@ const router = createRouter({
     { path: '/snapshots', component: SnapshotAdminView },
     { 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 }
+    // 프로토타입 템플릿 경로 매핑 (Lazy-loaded for Performance & Bundle Splitting)
+    { path: '/templates', component: () => import('../views/templates/TemplateGalleryView.vue') },
+    { path: '/templates/factor-detail', component: () => import('../views/templates/FactorParamDetailLayout.vue') },
+    { path: '/templates/ag-grid-market', component: () => import('../views/templates/AdvancedAgGridMarketLayout.vue') },
+    { path: '/templates/rebalance-pipeline', component: () => import('../views/templates/RebalancePipelineLayout.vue') },
+    { path: '/templates/real-dashboard', component: () => import('../views/templates/RealDashboardLayout.vue') },
+    { path: '/templates/waterfall-tree', component: () => import('../views/templates/WaterfallShadowTreeLayout.vue') },
+    { 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') }
   ]
 })
 
+
 export default router