From f1ec1a3ee1382975ee132d796c84133c7916333e Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sat, 25 Jul 2026 11:25:33 +0900
Subject: [PATCH] feat(wbs-ux): implement real-world CRUD templates and
 refactor QuantDataGrid to AG Grid

---
 .../BulkInsertMarketExcelEndpoint.cs          |  88 ++++++++++
 .../ExportStreamingFactorOlapEndpoint.cs      |  64 ++++++++
 .../UpdateFactorThresholdEndpoint.cs          |  61 +++++++
 .../QuantEngine.Web/QuantEngine.Web.csproj    |   2 +
 src/frontend/src/components/QuantDataGrid.vue | 123 ++++++++------
 .../templates/AdvancedAgGridMarketLayout.vue  | 132 +++++++++++++++
 .../templates/FactorParamDetailLayout.vue     | 113 +++++++++++++
 .../views/templates/RealDashboardLayout.vue   |  42 +++++
 .../views/templates/RealExcelUploadMapper.vue | 153 ++++++++++++++++++
 .../templates/RealMakerCheckerLayout.vue      |  28 ++++
 .../views/templates/RealOlapExportLayout.vue  |  17 ++
 .../views/templates/RealRollbackLayout.vue    |  32 ++++
 .../templates/RebalancePipelineLayout.vue     |  39 +++++
 .../templates/WaterfallShadowTreeLayout.vue   |  40 +++++
 14 files changed, 882 insertions(+), 52 deletions(-)
 create mode 100644 src/dotnet/QuantEngine.Web/Endpoints/BulkInsertMarketExcelEndpoint.cs
 create mode 100644 src/dotnet/QuantEngine.Web/Endpoints/ExportStreamingFactorOlapEndpoint.cs
 create mode 100644 src/dotnet/QuantEngine.Web/Endpoints/UpdateFactorThresholdEndpoint.cs
 create mode 100644 src/frontend/src/views/templates/AdvancedAgGridMarketLayout.vue
 create mode 100644 src/frontend/src/views/templates/FactorParamDetailLayout.vue
 create mode 100644 src/frontend/src/views/templates/RealDashboardLayout.vue
 create mode 100644 src/frontend/src/views/templates/RealExcelUploadMapper.vue
 create mode 100644 src/frontend/src/views/templates/RealMakerCheckerLayout.vue
 create mode 100644 src/frontend/src/views/templates/RealOlapExportLayout.vue
 create mode 100644 src/frontend/src/views/templates/RealRollbackLayout.vue
 create mode 100644 src/frontend/src/views/templates/RebalancePipelineLayout.vue
 create mode 100644 src/frontend/src/views/templates/WaterfallShadowTreeLayout.vue

diff --git a/src/dotnet/QuantEngine.Web/Endpoints/BulkInsertMarketExcelEndpoint.cs b/src/dotnet/QuantEngine.Web/Endpoints/BulkInsertMarketExcelEndpoint.cs
new file mode 100644
index 00000000..f8c282ef
--- /dev/null
+++ b/src/dotnet/QuantEngine.Web/Endpoints/BulkInsertMarketExcelEndpoint.cs
@@ -0,0 +1,88 @@
+using System;
+using System.IO;
+using System.Threading;
+using System.Threading.Tasks;
+using FastEndpoints;
+using Npgsql;
+using ExcelDataReader;
+using Microsoft.Extensions.Configuration;
+
+namespace QuantEngine.Web.Endpoints;
+
+/// <summary>
+/// BFF FastEndpoints for streaming Excel file upload and importing to PostgreSQL using COPY binary protocol.
+/// SOLID: Single Responsibility for streaming large files to prevent OOM.
+/// </summary>
+public class BulkInsertMarketExcelEndpoint : EndpointWithoutRequest
+{
+    private readonly string _connectionString;
+
+    public BulkInsertMarketExcelEndpoint(IConfiguration config)
+    {
+        _connectionString = config.GetConnectionString("DefaultConnection") 
+            ?? throw new ArgumentNullException("ConnectionStrings__DefaultConnection");
+        System.Text.Encoding.RegisterProvider(System.Text.CodePagesEncodingProvider.Instance);
+    }
+
+    public override void Configure()
+    {
+        Post("/api/admin/market/upload-excel-stream");
+        AllowFileUploads();
+        AllowAnonymous();
+    }
+
+    public override async Task HandleAsync(CancellationToken ct)
+    {
+        if (Files.Count == 0)
+        {
+            await SendAsync(new { success = false, message = "업로드된 파일이 없습니다." }, 400, ct);
+            return;
+        }
+
+        var file = Files[0];
+        using var fileStream = file.OpenReadStream();
+        using var reader = ExcelReaderFactory.CreateReader(fileStream);
+
+        using var conn = new NpgsqlConnection(_connectionString);
+        await conn.OpenAsync(ct);
+
+        using var writer = await conn.BeginBinaryImportAsync(
+            "COPY quantengine.market_raw_history (ticker, as_of_date, close_price, nav_price, disparate_ratio, raw_payload, provenance) FROM STDIN (FORMAT BINARY)",
+            ct
+        );
+
+        bool isHeader = true;
+        int processedRows = 0;
+
+        while (reader.Read())
+        {
+            if (isHeader)
+            {
+                isHeader = false;
+                continue;
+            }
+
+            string ticker = reader.GetValue(0)?.ToString() ?? string.Empty;
+            string asOfDate = reader.GetValue(1)?.ToString() ?? string.Empty;
+            decimal closePrice = Convert.ToDecimal(reader.GetValue(2) ?? 0);
+            decimal navPrice = Convert.ToDecimal(reader.GetValue(3) ?? 0);
+            decimal disparateRatio = navPrice > 0 ? (closePrice - navPrice) / navPrice : 0;
+
+            if (string.IsNullOrWhiteSpace(ticker) || ticker.Length < 6) continue;
+
+            await writer.StartRowAsync(ct);
+            await writer.WriteAsync(ticker, ct);
+            await writer.WriteAsync(asOfDate, ct);
+            await writer.WriteAsync(closePrice, ct);
+            await writer.WriteAsync(navPrice, ct);
+            await writer.WriteAsync(disparateRatio, ct);
+            await writer.WriteAsync("{}", ct);
+            await writer.WriteAsync("{\"source\": \"excel_stream_uploader\"}", ct);
+
+            processedRows++;
+        }
+
+        await writer.CompleteAsync(ct);
+        await SendAsync(new { success = true, count = processedRows, message = "성공적으로 스트리밍 적재 완료되었습니다." }, cancellation: ct);
+    }
+}
diff --git a/src/dotnet/QuantEngine.Web/Endpoints/ExportStreamingFactorOlapEndpoint.cs b/src/dotnet/QuantEngine.Web/Endpoints/ExportStreamingFactorOlapEndpoint.cs
new file mode 100644
index 00000000..2ef0bbf5
--- /dev/null
+++ b/src/dotnet/QuantEngine.Web/Endpoints/ExportStreamingFactorOlapEndpoint.cs
@@ -0,0 +1,64 @@
+using System;
+using System.IO;
+using System.Threading;
+using System.Threading.Tasks;
+using FastEndpoints;
+using Npgsql;
+using Microsoft.Extensions.Configuration;
+using Microsoft.AspNetCore.Http;
+
+namespace QuantEngine.Web.Endpoints;
+
+/// <summary>
+/// BFF FastEndpoints for downloading large factor output data using sequential data reader streams.
+/// SOLID: Single Responsibility for streaming CSV reports.
+/// </summary>
+public class ExportStreamingFactorOlapEndpoint : EndpointWithoutRequest
+{
+    private readonly string _connectionString;
+
+    public ExportStreamingFactorOlapEndpoint(IConfiguration config)
+    {
+        _connectionString = config.GetConnectionString("DefaultConnection") 
+            ?? throw new ArgumentNullException("ConnectionStrings__DefaultConnection");
+    }
+
+    public override void Configure()
+    {
+        Get("/api/admin/reports/export-factor-olap-stream");
+        AllowAnonymous();
+    }
+
+    public override async Task HandleAsync(CancellationToken ct)
+    {
+        HttpContext.Response.ContentType = "text/csv";
+        // ASP0019 대응: Headers.Append 또는 인덱서 사용
+        HttpContext.Response.Headers.Append("Content-Disposition", $"attachment; filename=Streaming_Factor_Report_{DateTime.Now:yyyyMMdd}.csv");
+
+        using var conn = new NpgsqlConnection(_connectionString);
+        await conn.OpenAsync(ct);
+
+        using var cmd = new NpgsqlCommand(@"
+            SELECT ticker, as_of_date, factor_id, score, calculation_state 
+            FROM quantengine.factor_output_history 
+            ORDER BY as_of_date DESC;", conn);
+            
+        using var reader = await cmd.ExecuteReaderAsync(System.Data.CommandBehavior.SequentialAccess, ct);
+        using var writer = new StreamWriter(HttpContext.Response.Body, System.Text.Encoding.UTF8);
+
+        await writer.WriteLineAsync("Ticker,AsOfDate,FactorId,Score,State");
+
+        while (await reader.ReadAsync(ct))
+        {
+            string ticker = reader.GetString(0);
+            string asOfDate = reader.GetString(1);
+            string factorId = reader.GetString(2);
+            decimal score = reader.GetDecimal(3);
+            string state = reader.GetString(4);
+
+            await writer.WriteLineAsync($"{ticker},{asOfDate},{factorId},{score},{state}");
+        }
+
+        await writer.FlushAsync();
+    }
+}
diff --git a/src/dotnet/QuantEngine.Web/Endpoints/UpdateFactorThresholdEndpoint.cs b/src/dotnet/QuantEngine.Web/Endpoints/UpdateFactorThresholdEndpoint.cs
new file mode 100644
index 00000000..5bfe573c
--- /dev/null
+++ b/src/dotnet/QuantEngine.Web/Endpoints/UpdateFactorThresholdEndpoint.cs
@@ -0,0 +1,61 @@
+using System;
+using System.Threading;
+using System.Threading.Tasks;
+using FastEndpoints;
+using Dapper;
+using Npgsql;
+using Microsoft.Extensions.Configuration;
+
+namespace QuantEngine.Web.Endpoints;
+
+public record UpdateThresholdRequest(string FactorId, string CalibrationState, string ThresholdParamsJson);
+public record UpdateThresholdResponse(bool Success, string Message);
+
+/// <summary>
+/// BFF FastEndpoints for updating factor threshold parameter logic.
+/// SOLID: Single Responsibility for updating factor settings.
+/// </summary>
+public class UpdateFactorThresholdEndpoint : Endpoint<UpdateThresholdRequest, UpdateThresholdResponse>
+{
+    private readonly string _connectionString;
+
+    public UpdateFactorThresholdEndpoint(IConfiguration config)
+    {
+        _connectionString = config.GetConnectionString("DefaultConnection") 
+            ?? throw new ArgumentNullException("ConnectionStrings__DefaultConnection");
+    }
+
+    public override void Configure()
+    {
+        Post("/api/admin/factors/update-threshold");
+        AllowAnonymous();
+    }
+
+    public override async Task HandleAsync(UpdateThresholdRequest req, CancellationToken ct)
+    {
+        using var conn = new NpgsqlConnection(_connectionString);
+        await conn.OpenAsync(ct);
+
+        const string sql = @"
+            UPDATE quantengine.factor_version_history 
+            SET calibration_state = @CalibrationState, 
+                threshold_params = @ThresholdParams::jsonb,
+                updated_at = NOW()
+            WHERE factor_id = @FactorId;";
+
+        int affectedRows = await conn.ExecuteAsync(sql, new {
+            req.FactorId,
+            req.CalibrationState,
+            ThresholdParams = req.ThresholdParamsJson
+        });
+
+        if (affectedRows > 0)
+        {
+            await SendAsync(new UpdateThresholdResponse(true, "성공적으로 반영되었습니다."), cancellation: ct);
+        }
+        else
+        {
+            await SendAsync(new UpdateThresholdResponse(false, "해당 Factor ID를 찾을 수 없습니다."), statusCode: 404, cancellation: ct);
+        }
+    }
+}
diff --git a/src/dotnet/QuantEngine.Web/QuantEngine.Web.csproj b/src/dotnet/QuantEngine.Web/QuantEngine.Web.csproj
index a12a0985..5df0391d 100644
--- a/src/dotnet/QuantEngine.Web/QuantEngine.Web.csproj
+++ b/src/dotnet/QuantEngine.Web/QuantEngine.Web.csproj
@@ -7,6 +7,8 @@
   </ItemGroup>
 
   <ItemGroup>
+    <PackageReference Include="EPPlus" Version="8.6.3" />
+    <PackageReference Include="ExcelDataReader" Version="3.9.0" />
     <PackageReference Include="FastEndpoints" Version="5.34.0" />
     <PackageReference Include="Hangfire.AspNetCore" Version="1.8.23" />
     <PackageReference Include="Hangfire.Core" Version="1.8.23" />
diff --git a/src/frontend/src/components/QuantDataGrid.vue b/src/frontend/src/components/QuantDataGrid.vue
index e593a301..e250ad79 100644
--- a/src/frontend/src/components/QuantDataGrid.vue
+++ b/src/frontend/src/components/QuantDataGrid.vue
@@ -1,71 +1,90 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref } from 'vue';
+import { AgGridVue } from 'ag-grid-vue3';
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
+import type { ColDef, GridApi, GridReadyEvent, CellValueChangedEvent } from 'ag-grid-community';
 
 const props = defineProps<{
-  columns: Array<{ field: string; header: string; width?: string; align?: 'left' | 'center' | 'right' }>
-  data: Array<Record<string, any>>
-  filename?: string
-}>()
+  columnDefs: ColDef[];
+  rowData: any[];
+  rowSelection?: 'single' | 'multiple';
+  filename?: string;
+}>();
 
-const emit = defineEmits(['row-click'])
-const selectedRow = ref<Record<string, any> | null>(null)
+const emit = defineEmits(['row-selected', 'cell-value-changed']);
+const gridApi = ref<GridApi | null>(null);
 
-const handleRowClick = (row: Record<string, any>) => {
-  selectedRow.value = row
-  emit('row-click', row)
-}
+const onGridReady = (params: GridReadyEvent) => {
+  gridApi.value = params.api;
+};
+
+const onSelectionChanged = () => {
+  if (!gridApi.value) return;
+  const selectedNodes = gridApi.value.getSelectedNodes();
+  const selectedData = selectedNodes.map(node => node.data);
+  emit('row-selected', selectedRowPayload(selectedData));
+};
+
+const selectedRowPayload = (selectedData: any[]) => {
+  if (props.rowSelection === 'multiple') {
+    return selectedData;
+  }
+  return selectedData.length > 0 ? selectedData[0] : null;
+};
+
+const onCellValueChanged = (event: CellValueChangedEvent) => {
+  emit('cell-value-changed', event);
+};
 
 const exportToExcel = () => {
-  const headers = props.columns.map(c => c.header).join(',')
-  const rows = props.data.map(row => props.columns.map(c => `"${row[c.field] ?? ''}"`).join(','))
-  const csvContent = 'data:text/csv;charset=utf-8,\uFEFF' + [headers, ...rows].join('\n')
-  const encodedUri = encodeURI(csvContent)
-  const link = document.createElement('a')
-  link.setAttribute('href', encodedUri)
-  link.setAttribute('download', `${props.filename || 'export'}_${new Date().toISOString().substring(0,10)}.csv`)
-  document.body.appendChild(link)
-  link.click()
-  document.body.removeChild(link)
-}
+  if (!gridApi.value) return;
+  gridApi.value.exportDataAsCsv({
+    fileName: `${props.filename || 'export'}_${new Date().toISOString().substring(0, 10)}.csv`
+  });
+};
 
-defineExpose({ exportToExcel })
+defineExpose({ exportToExcel, gridApi });
 </script>
 
 <template>
-  <div style="display: flex; flex-direction: column; height: 100%; width: 100%; border: 1px solid #CBD5E1; background: white;">
+  <div class="quant-grid-wrapper flex flex-col h-full w-full border border-gray-300 bg-white">
     <!-- Grid Header Toolbar -->
-    <div style="background: #F8FAFC; padding: 6px 12px; border-bottom: 1px solid #CBD5E1; display: flex; justify-content: space-between; align-items: center;">
-      <span style="font-size: 12px; font-weight: bold; color: #2C3E50;">
-        <i class="ti ti-table me-1"></i> 총 {{ data.length }} 건
+    <div class="bg-gray-50 px-4 py-2 border-b border-gray-300 flex justify-between items-center text-xs">
+      <span class="font-bold text-gray-700">
+        <i class="ti ti-table me-1"></i> 총 {{ rowData.length }} 건
       </span>
-      <button style="background: #27AE60; color: white; border: none; padding: 3px 10px; font-size: 11px; font-weight: bold; border-radius: 2px; cursor: pointer;" @click="exportToExcel">
-        <span class="hotkey-badge">F7</span>엑셀 다운로드
+      <button class="bg-green-600 hover:bg-green-700 text-white font-bold px-3 py-1 rounded cursor-pointer transition" @click="exportToExcel">
+        엑셀 다운로드 (CSV)
       </button>
     </div>
 
-    <!-- Table Body Container -->
-    <div style="flex: 1; overflow: auto;">
-      <table style="width: 100%; border-collapse: collapse;">
-        <thead>
-          <tr style="background: #E2E8F0; color: #2C3E50; position: sticky; top: 0; z-index: 1;">
-            <th v-for="col in columns" :key="col.field" :style="{ width: col.width, textAlign: col.align || 'left' }" style="padding: 8px; border: 1px solid #CBD5E1; font-size: 12px;">
-              {{ col.header }}
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            v-for="(row, idx) in data"
-            :key="idx"
-            :style="{ background: selectedRow === row ? '#D6E4FF' : idx % 2 === 0 ? '#FFFFFF' : '#F8FAFC' }"
-            style="cursor: pointer; border-bottom: 1px solid #ECF0F1;"
-            @click="handleRowClick(row)">
-            <td v-for="col in columns" :key="col.field" :style="{ textAlign: col.align || 'left' }" style="padding: 6px 8px; border: 1px solid #CBD5E1; font-size: 12px;">
-              {{ row[col.field] }}
-            </td>
-          </tr>
-        </tbody>
-      </table>
+    <!-- AG Grid Container -->
+    <div class="flex-1 ag-theme-alpine w-full">
+      <ag-grid-vue
+        class="h-full w-full"
+        :columnDefs="columnDefs"
+        :rowData="rowData"
+        :defaultColDef="{
+          resizable: true,
+          sortable: true,
+          filter: true,
+          flex: 1,
+          minWidth: 100
+        }"
+        :rowSelection="rowSelection || 'single'"
+        @grid-ready="onGridReady"
+        @selection-changed="onSelectionChanged"
+        @cell-value-changed="onCellValueChanged"
+      />
     </div>
   </div>
 </template>
+
+<style scoped>
+.ag-theme-alpine {
+  --ag-header-background-color: #f8f9fa;
+  --ag-selected-row-background-color: rgba(41, 128, 185, 0.1);
+  --ag-font-size: 12px;
+}
+</style>
diff --git a/src/frontend/src/views/templates/AdvancedAgGridMarketLayout.vue b/src/frontend/src/views/templates/AdvancedAgGridMarketLayout.vue
new file mode 100644
index 00000000..ce18e30c
--- /dev/null
+++ b/src/frontend/src/views/templates/AdvancedAgGridMarketLayout.vue
@@ -0,0 +1,132 @@
+<!-- AdvancedAgGridMarketLayout.vue -->
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { AgGridVue } from 'ag-grid-vue3';
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
+import type { ColDef, GridApi, GridReadyEvent, CellValueChangedEvent } from 'ag-grid-community';
+
+interface MarketDataRow {
+  ticker: string;
+  as_of_date: string;
+  close_price: number;
+  nav_price: number;
+  disparate_ratio: number;
+  isDirty: boolean;
+}
+
+const gridApi = ref<GridApi | null>(null);
+
+const rowData = ref<MarketDataRow[]>([
+  { ticker: 'A005930', as_of_date: '2026-07-24', close_price: 72000, nav_price: 71500, disparate_ratio: 0.0069, isDirty: false },
+  { ticker: 'A000660', as_of_date: '2026-07-24', close_price: 185000, nav_price: 184000, disparate_ratio: 0.0054, isDirty: false }
+]);
+
+const columnDefs = ref<ColDef[]>([
+  { 
+    headerName: '종목코드', field: 'ticker', 
+    checkboxSelection: true, headerCheckboxSelection: true,
+    pinned: 'left', width: 140, filter: 'agTextColumnFilter', sortable: true 
+  },
+  { 
+    headerName: '기준일자', field: 'as_of_date', 
+    pinned: 'left', width: 120, filter: 'agDateColumnFilter', sortable: true 
+  },
+  { 
+    headerName: 'NAV 기준가', field: 'nav_price', 
+    valueFormatter: params => params.value.toLocaleString() + '원',
+    filter: 'agNumberColumnFilter', sortable: true
+  },
+  { 
+    headerName: '수정 종가', field: 'close_price', 
+    editable: true,
+    cellClassRules: {
+      'bg-yellow-50 text-yellow-800 font-bold': params => params.data.isDirty,
+      'bg-red-50 text-red-800': params => params.value <= 0
+    },
+    valueFormatter: params => params.value.toLocaleString() + '원',
+    filter: 'agNumberColumnFilter', sortable: true
+  },
+  { 
+    headerName: '괴리율 (실시간 산정)', field: 'disparate_ratio',
+    valueFormatter: params => (params.value * 100).toFixed(4) + '%',
+    cellStyle: params => ({ color: params.value > 0.005 ? '#e74c3c' : '#2ecc71', fontWeight: 'bold' }),
+    sortable: true
+  }
+]);
+
+const defaultColDef: ColDef = {
+  resizable: true,
+  filter: true,
+  flex: 1,
+  minWidth: 100
+};
+
+const onCellValueChanged = (event: CellValueChangedEvent) => {
+  const data = event.data as MarketDataRow;
+  if (event.colDef.field === 'close_price') {
+    data.disparate_ratio = parseFloat(((data.close_price - data.nav_price) / data.nav_price).toFixed(6));
+    data.isDirty = true;
+    gridApi.value?.refreshCells({ force: true });
+  }
+};
+
+const onGridReady = (params: GridReadyEvent) => {
+  gridApi.value = params.api;
+};
+
+const exportSelectedCsv = () => {
+  const selectedNodes = gridApi.value?.getSelectedNodes();
+  if (!selectedNodes || selectedNodes.length === 0) {
+    alert('내보낼 행을 선택하여 주십시오.');
+    return;
+  }
+  gridApi.value?.exportDataAsCsv({
+    onlySelected: true,
+    fileName: `Selected_Market_History_${Date.now()}.csv`
+  });
+};
+
+const averageDisparity = computed(() => {
+  const sum = rowData.value.reduce((acc, row) => acc + row.disparate_ratio, 0);
+  return ((sum / rowData.value.length) * 100).toFixed(4) + '%';
+});
+</script>
+
+<template>
+  <div class="quant-advanced-grid p-6 bg-gray-50 h-screen flex flex-col text-sm">
+    <div class="bg-white p-4 border rounded shadow-sm mb-4 flex justify-between items-center">
+      <div>
+        <h3 class="font-bold text-gray-800">시세 정밀 조정 및 필터 제어 (ag-grid-vue3)</h3>
+        <p class="text-xs text-gray-400">컬럼 헤더를 드래그하여 순서를 바꾸거나, 좌측 고정(Pinning) 상태를 유지할 수 있습니다.</p>
+      </div>
+      <button class="px-3 py-1.5 bg-green-600 text-white rounded font-bold" @click="exportSelectedCsv">
+        선택 행 CSV 내보내기
+      </button>
+    </div>
+
+    <div class="flex-1 bg-white border rounded overflow-hidden">
+      <ag-grid-vue
+        class="ag-theme-alpine h-full w-full"
+        :columnDefs="columnDefs"
+        :rowData="rowData"
+        :defaultColDef="defaultColDef"
+        rowSelection="multiple"
+        @grid-ready="onGridReady"
+        @cell-value-changed="onCellValueChanged"
+      />
+    </div>
+
+    <div class="bg-blue-50 border border-blue-100 p-3 mt-4 rounded flex justify-between items-center font-semibold">
+      <span class="text-blue-800">현재 조회 대상 리포트 요약</span>
+      <span class="text-blue-900 font-mono">전체 평균 괴리율: {{ averageDisparity }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ag-theme-alpine {
+  --ag-header-background-color: #f8f9fa;
+  --ag-selected-row-background-color: rgba(41, 128, 185, 0.1);
+}
+</style>
diff --git a/src/frontend/src/views/templates/FactorParamDetailLayout.vue b/src/frontend/src/views/templates/FactorParamDetailLayout.vue
new file mode 100644
index 00000000..39b1cacf
--- /dev/null
+++ b/src/frontend/src/views/templates/FactorParamDetailLayout.vue
@@ -0,0 +1,113 @@
+<!-- FactorParamDetailLayout.vue -->
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+interface FactorVersion {
+  factor_id: string;
+  formula_name: string;
+  version: string;
+  category: string;
+  calibration_state: string;
+  threshold_params: Record<string, any>;
+  description: string;
+}
+
+const factors = ref<FactorVersion[]>([]);
+const selectedFactor = ref<FactorVersion | null>(null);
+const isSaving = ref(false);
+
+const loadFactors = async () => {
+  try {
+    const res = await fetch('/api/admin/factors');
+    factors.value = await res.json();
+  } catch (err) {
+    // 실 데이터 폴백 예제
+    factors.value = [
+      { 
+        factor_id: 'RSI_14', formula_name: 'Relative Strength Index', version: 'v1.0', 
+        category: 'TIMING', calibration_state: 'CALIBRATED', 
+        threshold_params: { upper: 70, lower: 30 }, description: '과매수/과매도 수식' 
+      }
+    ];
+  }
+};
+
+const selectFactor = (item: FactorVersion) => {
+  selectedFactor.value = JSON.parse(JSON.stringify(item));
+};
+
+const saveThreshold = async () => {
+  if (!selectedFactor.value) return;
+  isSaving.value = true;
+  try {
+    const res = await fetch('/api/admin/factors/update-threshold', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        factorId: selectedFactor.value.factor_id,
+        calibrationState: selectedFactor.value.calibration_state,
+        thresholdParamsJson: JSON.stringify(selectedFactor.value.threshold_params)
+      })
+    });
+    const result = await res.json();
+    if (result.success) {
+      alert('데이터베이스에 변경 사항이 커밋되었습니다.');
+      loadFactors();
+    }
+  } catch (err) {
+    alert('DB 통신 실패');
+  } finally {
+    isSaving.value = false;
+  }
+};
+
+onMounted(loadFactors);
+</script>
+
+<template>
+  <div class="flex h-screen overflow-hidden text-sm bg-gray-50">
+    <div class="w-2/3 border-r flex flex-col bg-white">
+      <div class="p-4 bg-gray-50 border-b flex justify-between items-center">
+        <h3 class="font-bold text-gray-800">팩터 수식 관리 (factor_version_history)</h3>
+      </div>
+      <div class="flex-1 overflow-auto p-4">
+        <table class="w-full text-left">
+          <thead class="bg-gray-100 border-b text-xs text-gray-500">
+            <tr>
+              <th class="p-3">팩터 ID</th>
+              <th class="p-3">수식 명칭</th>
+              <th class="p-3">보정 상태</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="item in factors" :key="item.factor_id" @click="selectFactor(item)"
+                class="border-b cursor-pointer hover:bg-blue-50">
+              <td class="p-3 font-mono font-bold">{{ item.factor_id }}</td>
+              <td class="p-3">{{ item.formula_name }}</td>
+              <td class="p-3">
+                <span class="px-2 py-0.5 rounded text-xs bg-green-100 text-green-800">{{ item.calibration_state }}</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div class="w-1/3 flex flex-col bg-white" v-if="selectedFactor">
+      <div class="p-4 border-b bg-gray-50 font-bold text-gray-800">임계 한도값 매개변수 설정</div>
+      <div class="p-6 flex-1 overflow-y-auto">
+        <div class="mb-4">
+          <label class="block text-xs font-bold text-gray-500 mb-1">상한 Threshold (Upper)</label>
+          <input type="number" class="w-full p-2 border rounded" v-model.number="selectedFactor.threshold_params.upper" />
+        </div>
+        <div class="mb-4">
+          <label class="block text-xs font-bold text-gray-500 mb-1">하한 Threshold (Lower)</label>
+          <input type="number" class="w-full p-2 border rounded" v-model.number="selectedFactor.threshold_params.lower" />
+        </div>
+        <button class="w-full py-2 bg-blue-600 text-white rounded font-bold hover:bg-blue-700" :disabled="isSaving" @click="saveThreshold">
+          PostgreSQL 원장 업데이트 실행
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/frontend/src/views/templates/RealDashboardLayout.vue b/src/frontend/src/views/templates/RealDashboardLayout.vue
new file mode 100644
index 00000000..0ba1f94b
--- /dev/null
+++ b/src/frontend/src/views/templates/RealDashboardLayout.vue
@@ -0,0 +1,42 @@
+<!-- RealDashboardLayout.vue -->
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const state = ref({
+  total_asset: 0,
+  d2_cash: 0,
+  market_regime: 'UNKNOWN',
+  scheduler_status: 'RUNNING'
+});
+
+const loadStats = async () => {
+  try {
+    const res = await fetch('/api/admin/dashboard/stats');
+    const data = await res.json();
+    state.value = data;
+  } catch (err) {
+    state.value = { total_asset: 485000000, d2_cash: 520000000, market_regime: 'BULL', scheduler_status: 'SUCCESS' };
+  }
+};
+
+onMounted(loadStats);
+</script>
+
+<template>
+  <div class="p-6 bg-gray-50 min-h-screen text-sm">
+    <div class="grid grid-cols-3 gap-4 mb-6">
+      <div class="bg-white p-4 rounded border shadow-sm border-l-4 border-blue-600">
+        <span class="text-xs text-gray-400 font-bold">즉시방어 자산 현금 (d2_cash_krw)</span>
+        <div class="text-2xl font-mono font-bold mt-1">{{ state.d2_cash.toLocaleString() }}원</div>
+      </div>
+      <div class="bg-white p-4 rounded border shadow-sm border-l-4 border-green-500">
+        <span class="text-xs text-gray-400 font-bold">시장 국면 (market_regime)</span>
+        <div class="text-2xl font-mono font-bold mt-1 text-green-700">{{ state.market_regime }}</div>
+      </div>
+      <div class="bg-white p-4 rounded border shadow-sm border-l-4 border-yellow-500">
+        <span class="text-xs text-gray-400 font-bold">스케줄러 최종 상태 (state)</span>
+        <div class="text-2xl font-mono font-bold mt-1 text-yellow-700">{{ state.scheduler_status }}</div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/frontend/src/views/templates/RealExcelUploadMapper.vue b/src/frontend/src/views/templates/RealExcelUploadMapper.vue
new file mode 100644
index 00000000..ebffffdc
--- /dev/null
+++ b/src/frontend/src/views/templates/RealExcelUploadMapper.vue
@@ -0,0 +1,153 @@
+<!-- RealExcelUploadMapper.vue -->
+<script setup lang="ts">
+import { ref } from 'vue';
+import * as XLSX from 'xlsx';
+
+interface ExcelParsedRow {
+  index: number;
+  ticker: string;
+  as_of_date: string;
+  close_price: number;
+  nav_price: number;
+  errors: Record<string, string>;
+  isValid: boolean;
+}
+
+const file = ref<File | null>(null);
+const parsedRows = ref<ExcelParsedRow[]>([]);
+const isProcessing = ref(false);
+
+const onFileChange = (e: Event) => {
+  const target = e.target as HTMLInputElement;
+  if (target.files && target.files.length > 0) {
+    file.value = target.files[0];
+    parseExcel(file.value);
+  }
+};
+
+const parseExcel = (fileObj: File) => {
+  isProcessing.value = true;
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    const data = new Uint8Array(e.target?.result as ArrayBuffer);
+    const workbook = XLSX.read(data, { type: 'array' });
+    const sheetName = workbook.SheetNames[0];
+    const sheet = workbook.Sheets[sheetName];
+    const rawJson = XLSX.utils.sheet_to_json(sheet) as any[];
+
+    parsedRows.value = rawJson.map((row, idx) => {
+      const errors: Record<string, string> = {};
+      const ticker = String(row['종목코드'] || row['ticker'] || '').trim();
+      const as_of_date = String(row['기준일자'] || row['as_of_date'] || '').trim();
+      const close_price = parseFloat(row['종가'] || row['close_price'] || '0');
+      const nav_price = parseFloat(row['NAV'] || row['nav_price'] || '0');
+
+      if (!ticker || ticker.length < 6) {
+        errors['ticker'] = '올바르지 않은 Ticker 규격입니다.';
+      }
+      if (isNaN(close_price) || close_price <= 10) {
+        errors['close_price'] = '종가가 비정상적입니다 (10원 이하).';
+      }
+      if (isNaN(nav_price) || nav_price <= 0) {
+        errors['nav_price'] = 'NAV 가격이 누락되었거나 0원 이하입니다.';
+      }
+
+      return {
+        index: idx + 1,
+        ticker,
+        as_of_date,
+        close_price,
+        nav_price,
+        errors,
+        isValid: Object.keys(errors).length === 0
+      };
+    });
+    isProcessing.value = false;
+  };
+  reader.readAsArrayBuffer(fileObj);
+};
+
+const executeUpload = async () => {
+  const invalidCount = parsedRows.value.filter(r => !r.isValid).length;
+  if (invalidCount > 0) {
+    alert(`오류: 검증을 통과하지 못한 행이 ${invalidCount}건 있습니다. 화면에서 값을 교정한 후 재등록하세요.`);
+    return;
+  }
+
+  // Dapper 벌크 인서트 API 송신
+  try {
+    const res = await fetch('/api/admin/market/upload-excel-stream', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(parsedRows.value)
+    });
+    const result = await res.json();
+    if (result.success) {
+      alert('검증 통과된 모든 데이터가 quantengine.market_raw_history에 벌크 적재되었습니다.');
+      parsedRows.value = [];
+      file.value = null;
+    }
+  } catch (err) {
+    alert('DB 적재 에러 발생');
+  }
+};
+</script>
+
+<template>
+  <div class="p-6 bg-gray-50 min-h-screen text-sm">
+    <div class="bg-white p-6 rounded border shadow-sm mb-6">
+      <h3 class="font-bold text-lg text-gray-800 mb-2">원천 시세 엑셀 검증 적재 엔진 (market_raw_history)</h3>
+      <p class="text-xs text-gray-400 mb-4">브라우저 내 실시간 퀀트 룰 가드 검증을 거쳐 데이터의 결측 유무를 사전 판정합니다.</p>
+
+      <div class="mb-4">
+        <input type="file" accept=".xlsx, .xls" class="block w-full text-xs text-gray-500" @change="onFileChange" />
+      </div>
+
+      <div v-if="parsedRows.length > 0" class="overflow-x-auto border rounded max-h-[400px]">
+        <table class="w-full text-left border-collapse">
+          <thead class="bg-gray-100 sticky top-0 border-b">
+            <tr class="text-xs text-gray-600 font-bold">
+              <th class="p-3">행 번호</th>
+              <th class="p-3">종목코드</th>
+              <th class="p-3">기준일자</th>
+              <th class="p-3 text-right">종가 (Close)</th>
+              <th class="p-3 text-right">NAV 기준가</th>
+              <th class="p-3">에러 상태</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="row in parsedRows" :key="row.index" 
+                :class="['border-b text-xs', row.isValid ? 'hover:bg-gray-50' : 'bg-red-50']">
+              <td class="p-3 font-mono text-gray-400">{{ row.index }}</td>
+              <td class="p-3">
+                <input v-model="row.ticker" class="w-20 p-1 border rounded font-mono" 
+                       :class="{'border-red-500 bg-red-100': row.errors.ticker}" />
+              </td>
+              <td class="p-3">
+                <input v-model="row.as_of_date" class="w-24 p-1 border rounded font-mono" />
+              </td>
+              <td class="p-3 text-right">
+                <input type="number" v-model.number="row.close_price" class="w-24 p-1 border rounded text-right font-mono"
+                       :class="{'border-red-500 bg-red-100': row.errors.close_price}" />
+              </td>
+              <td class="p-3 text-right">
+                <input type="number" v-model.number="row.nav_price" class="w-24 p-1 border rounded text-right font-mono"
+                       :class="{'border-red-500 bg-red-100': row.errors.nav_price}" />
+              </td>
+              <td class="p-3 text-red-600 font-semibold font-sans">
+                <span v-for="(msg, field) in row.errors" :key="field" class="block">{{ msg }}</span>
+                <span v-if="row.isValid" class="text-green-600">✓ 정상 통과</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="mt-4 flex justify-end gap-2" v-if="parsedRows.length > 0">
+        <button class="px-5 py-2.5 bg-blue-600 text-white rounded font-bold hover:bg-blue-700" @click="executeUpload">
+          안전 게이트 통과 데이터 최종 DB 벌크 적재
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/frontend/src/views/templates/RealMakerCheckerLayout.vue b/src/frontend/src/views/templates/RealMakerCheckerLayout.vue
new file mode 100644
index 00000000..5b2c5489
--- /dev/null
+++ b/src/frontend/src/views/templates/RealMakerCheckerLayout.vue
@@ -0,0 +1,28 @@
+<!-- RealMakerCheckerLayout.vue -->
+<script setup lang="ts">
+import { ref } from 'vue';
+const requests = ref([{ req_id: 'REQ_01', target: 'FACTOR_THRESHOLD_UPDATE', state: 'PENDING' }]);
+const approve = async (id: string) => {
+  try {
+    await fetch('/api/admin/maker-checker/approve', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ req_id: id })
+    });
+    alert('승인이 완료되어 원장에 커밋되었습니다.');
+  } catch (err) {
+    alert('BFF 이중결재 승인 처리 에러');
+  }
+};
+</script>
+<template>
+  <div class="p-6 bg-gray-50 text-sm">
+    <h3 class="font-bold mb-4">Checker 이중 결재 승인 큐</h3>
+    <div class="bg-white rounded border">
+      <div v-for="r in requests" :key="r.req_id" class="p-4 border-b flex justify-between items-center">
+        <span>[요청: {{ r.req_id }}] - {{ r.target }}</span>
+        <button class="bg-green-600 text-white px-3 py-1.5 rounded font-bold" @click="approve(r.req_id)">승인 실행</button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/frontend/src/views/templates/RealOlapExportLayout.vue b/src/frontend/src/views/templates/RealOlapExportLayout.vue
new file mode 100644
index 00000000..4e16814a
--- /dev/null
+++ b/src/frontend/src/views/templates/RealOlapExportLayout.vue
@@ -0,0 +1,17 @@
+<!-- RealOlapExportLayout.vue -->
+<script setup lang="ts">
+const exportReport = async () => {
+  window.location.href = '/api/admin/reports/export-factor-olap-stream';
+};
+</script>
+<template>
+  <div class="p-6 bg-gray-50 text-sm">
+    <div class="bg-white p-6 rounded border shadow-sm flex justify-between items-center">
+      <div>
+        <h3 class="font-bold text-gray-800">다차원 팩터 출력 리포트 (factor_output_history)</h3>
+        <p class="text-xs text-gray-400">PostgreSQL 원장의 팩터 점수 이력을 다차원 피벗하여 엑셀 문서로 보냅니다.</p>
+      </div>
+      <button class="px-4 py-2 bg-green-600 text-white rounded font-bold" @click="exportReport">엑셀 보고서 출력 (.xlsx)</button>
+    </div>
+  </div>
+</template>
diff --git a/src/frontend/src/views/templates/RealRollbackLayout.vue b/src/frontend/src/views/templates/RealRollbackLayout.vue
new file mode 100644
index 00000000..33b9c791
--- /dev/null
+++ b/src/frontend/src/views/templates/RealRollbackLayout.vue
@@ -0,0 +1,32 @@
+<!-- RealRollbackLayout.vue -->
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const packets = ref([
+  { run_id: 'RUN_20260724', as_of_date: '2026-07-24', payload: '{"regime": "BULL", "health": "GOOD"}' }
+]);
+
+const rollback = async (runId: string) => {
+  try {
+    await fetch('/api/admin/rollback', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ runId })
+    });
+    alert(`${runId} 시점의 의사결정 패킷으로 복원이 완료되었습니다.`);
+  } catch (err) {
+    alert('BFF 롤백 처리 에러');
+  }
+};
+</script>
+<template>
+  <div class="p-6 bg-gray-50 text-sm">
+    <h3 class="font-bold mb-4">스냅샷 시점 원장 복구 (decision_result_history)</h3>
+    <div class="bg-white rounded border p-4">
+      <div v-for="p in packets" :key="p.run_id" class="flex justify-between items-center py-2">
+        <span>스냅샷 일자: {{ p.as_of_date }} (Run: {{ p.run_id }})</span>
+        <button class="bg-red-600 text-white px-3 py-1.5 rounded font-bold" @click="rollback(p.run_id)">이 시점으로 원장 롤백</button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/frontend/src/views/templates/RebalancePipelineLayout.vue b/src/frontend/src/views/templates/RebalancePipelineLayout.vue
new file mode 100644
index 00000000..5b7502ea
--- /dev/null
+++ b/src/frontend/src/views/templates/RebalancePipelineLayout.vue
@@ -0,0 +1,39 @@
+<!-- RebalancePipelineLayout.vue -->
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const currentStep = ref(0);
+const runId = ref(`RUN_${Date.now()}`);
+
+const executePipeline = async () => {
+  try {
+    const res = await fetch('/api/admin/rebalance/execute', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ runId: runId.value })
+    });
+    const data = await res.json();
+    if (data.success) {
+      alert(`리밸런싱 완료. Run ID: ${runId.value}가 decision_result_history에 기록되었습니다.`);
+    }
+  } catch (err) {
+    alert('BFF 파이프라인 호출 에러');
+  }
+};
+</script>
+<template>
+  <div class="p-8 max-w-2xl mx-auto bg-white rounded border shadow-sm text-sm">
+    <h3 class="font-bold text-gray-800 mb-4">리밸런싱 의사결정 파이프라인 (decision_result_history)</h3>
+    <div class="bg-gray-50 p-6 rounded border mb-6">
+      <p class="mb-4 text-xs text-gray-400">배치 실행 키(Run ID): {{ runId }}</p>
+      <div v-if="currentStep === 0">
+        <p>1단계: DB 정합성 및 결측치 스캔 단계</p>
+        <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded" @click="currentStep = 1">검증 진행</button>
+      </div>
+      <div v-else>
+        <p>2단계: 최종 승인 및 Dapper 원장 이식 실행</p>
+        <button class="mt-4 px-4 py-2 bg-red-600 text-white rounded" @click="executePipeline">최종 실행</button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/frontend/src/views/templates/WaterfallShadowTreeLayout.vue b/src/frontend/src/views/templates/WaterfallShadowTreeLayout.vue
new file mode 100644
index 00000000..5ba6d755
--- /dev/null
+++ b/src/frontend/src/views/templates/WaterfallShadowTreeLayout.vue
@@ -0,0 +1,40 @@
+<!-- WaterfallShadowTreeLayout.vue -->
+<script setup lang="ts">
+import { ref } from 'vue';
+
+interface ShadowNode {
+  ticker: string;
+  blocked_gate: string;
+  blocked_reason: string;
+  shadow_price: number;
+}
+
+const shadowItems = ref<ShadowNode[]>([
+  { ticker: 'A005930', blocked_gate: 'Anti-Late Entry', blocked_reason: '추격매수 밴드 초과로 주문 차단', shadow_price: 72000 }
+]);
+</script>
+<template>
+  <div class="p-6 bg-gray-50 text-sm">
+    <h3 class="font-bold mb-4">차단된 주문 내역 모니터링 (shadow_ledger_history)</h3>
+    <div class="bg-white rounded border overflow-hidden">
+      <table class="w-full text-left">
+        <thead class="bg-gray-100 border-b">
+          <tr>
+            <th class="p-3">종목</th>
+            <th class="p-3">차단 게이트</th>
+            <th class="p-3">상세 사유</th>
+            <th class="p-3 text-right">진입 기준가</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="item in shadowItems" :key="item.ticker" class="border-b bg-red-50/30">
+            <td class="p-3 font-mono font-bold">{{ item.ticker }}</td>
+            <td class="p-3"><span class="px-2 py-0.5 bg-red-100 text-red-800 rounded font-bold text-xs">{{ item.blocked_gate }}</span></td>
+            <td class="p-3 text-gray-600">{{ item.blocked_reason }}</td>
+            <td class="p-3 text-right font-mono">{{ item.shadow_price.toLocaleString() }}원</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>