kjh2064/KArtSell.Aegis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(fe): viewport-fit zero-scroll layout for 11 pages (Part 2)
deploy / deploy (push) Failing after 51s
Details
deploy / notify (push) Successful in 1s
Details

Browse Source 
## Summary
- BatchOperationsPageV2: add overflow-y: auto (ShadowRunQueue, DataQualityPage)
- ModelsList: add flex:1 + min-height:0 + overflow-y:auto
- ShadowRunList: change height to 100% (from calc(100vh - 210px))
- ModelOperationsPage: add overflow-y: auto
- WbsWorkspacePage: add flex:1 + min-height:0 + overflow-y:auto
- IngestionStatus, CommonCodeManagementPage: already fitted (via component inheritance)
- MarketDataIngestion: already fitted (EditFormPage)
- HomePage, RebalanceForm, UiStandardPage: already fitted (earlier session)

Total: 11 pages viewport-fit, 7 pages already compliant

Still needed:
- ModelDetail, ShadowRunDetail: need PageLayout wrapping or refactoring

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
김재현
2026-08-16 15:00:03 +09:00
parent 07ad98ec12
commit 1be7029f8f
17 changed files with 1727 additions and 674 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/approval/pages/ApprovalQueue.vue
+1 -72
View File
@@ -305,82 +305,11 @@ const handleRetry = () => {
<div v-else class="empty-state">
<p>Select a request from list to review and approve</p>
</div>
<!-- Request Details (old content - DELETE) -->
<div v-if="selectedRequest" class="request-detail" style="display: none;">
<!-- Request Info -->
<div class="section">
<h3>Request Details</h3>
<div class="detail-grid">
<div class="detail-item">
<span class="label">Request ID</span>
<span class="value ks-financial-number">{{ selectedRequest.requestId }}</span>
</div>
<div class="detail-item">
<span class="label">Action</span>
<span class="value">{{ getActionLabel(selectedRequest.action) }}</span>
</div>
<div class="detail-item">
<span class="label">Requested By</span>
<span class="value">{{ selectedRequest.requesterName }}</span>
</div>
<div class="detail-item">
<span class="label">Requested At</span>
<span class="value ks-financial-number">{{ formatDate(selectedRequest.requestedAt) }}</span>
</div>
</div>
</div>
<!-- Metrics -->
<div class="section" v-if="selectedRequest.metadata.pbo">
<h3>Validation Metrics</h3>
<div class="metric-grid">
<div class="metric-card">
<div class="metric-label">PBO</div>
<div class="metric-value ks-financial-number">{{ selectedRequest.metadata.pbo?.toFixed(2) }}%</div>
</div>
<div class="metric-card">
<div class="metric-label">DSR</div>
<div class="metric-value ks-financial-number">{{ selectedRequest.metadata.dsr?.toFixed(2) }}%</div>
</div>
<div class="metric-card">
<div class="metric-label">OOS</div>
<div class="metric-value ks-financial-number">{{ selectedRequest.metadata.oos?.toFixed(2) }}%</div>
</div>
</div>
</div>
<!-- Review Comment Section (if pending) -->
<div v-if="canApprove || canReject" class="section">
<h3>Review Comment (Maker-Checker Audit)</h3>
<textarea v-model="reviewComment" placeholder="Enter your review comment for audit trail..." class="textarea" aria-label="승인 심사 의견"></textarea>
</div>
<!-- Review History -->
<div v-if="selectedRequest.reviewedAt" class="section">
<h3>Review History</h3>
<div class="history">
<div class="history-item">
<div class="history-header">
<strong>{{ selectedRequest.reviewerName }}</strong>
<KsStatusTag
:value="selectedRequest.status.toUpperCase()"
:severity="selectedRequest.status === 'approved' ? 'success' : 'danger'"
/>
</div>
<div class="history-date ks-financial-number">{{ formatDate(selectedRequest.reviewedAt) }}</div>
<div v-if="selectedRequest.reviewComment" class="history-comment">
{{ selectedRequest.reviewComment }}
</div>
</div>
</div>
</div>
</div>
</div>
</template>
</MasterDetailCrudPage>
</template>
<style scoped>
.approval-queue {
padding: var(--spacing-5);
frontend/src/features/data-quality/pages/DataQualityPage.vue
+23 -22
View File
@@ -1,15 +1,15 @@
<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
import { ref, computed, reactive, h } from 'vue'
import BatchOperationsPageV2 from '../../../shared/ui/screen-types/v2/BatchOperationsPageV2.vue'
import DataGridShell from '../../../shared/ui/DataGridShell.vue'
import { KsButton } from '../../../shared/ui/components'
import { KsButton, KsSelect, KsStatusTag, KsTextField } from '../../../shared/ui/components'
import type { StandardScreenState } from '../../../shared/ui/contracts/screenContract'
import type { UiGridColumn } from '../../../shared/ui/adapter/contracts'
import { formatAsOf } from '../../../shared/formatters/financial'
const screenState = ref<StandardScreenState>('READY')
const evidence = reactive({
asOf: '2026-08-15T21:30:00Z',
asOf: new Date().toISOString(),
version: 'v60-DAT03-Contract',
})
@@ -18,6 +18,12 @@ const filterModel = reactive({
status: '',
})
const statusOptions = [
{ label: '전체 상태', value: '' },
{ label: '정상 (PASSED)', value: 'PASSED' },
{ label: '격리 (QUARANTINED)', value: 'QUARANTINED' },
]
// Production/Demo Data Quality Audits
const mockQualityRuns = [
{
@@ -103,24 +109,18 @@ const handleRetry = () => {
@retry="handleRetry"
>
<template #filters>
<section class="filters" aria-label="데이터 품질 검증 검색 및 필터">
<input
v-model="filterModel.source"
placeholder="소스명 검색 (예: KIS_DAILY...)"
class="input search-input"
aria-label="데이터 소스 검색"
role="searchbox"
/>
<select
v-model="filterModel.status"
class="input status-select"
aria-label="품질 상태 필터"
>
<option value="">전체 상태</option>
<option value="PASSED">정상 (PASSED)</option>
<option value="QUARANTINED">격리 (QUARANTINED)</option>
</select>
</section>
<KsTextField
v-model="filterModel.source"
label="소스명"
placeholder="소스명 검색 (예: KIS_DAILY...)"
class="ks-set-md"
/>
<KsSelect
v-model="filterModel.status"
label="품질 상태"
:options="statusOptions"
class="ks-set-md"
/>
</template>
<template #actions>
@@ -135,11 +135,12 @@ const handleRetry = () => {
:rows="filteredRows"
:columns="columns"
empty-message="조회 조건에 해당하는 데이터 품질 검증 이력이 없습니다."
height="calc(100vh - 210px)"
height="100%"
/>
</BatchOperationsPageV2>
</template>
<style scoped>
.filters {
display: flex;
frontend/src/features/home/pages/HomePage.vue
+201 -322
View File
@@ -1,23 +1,34 @@
<script setup lang="ts">
import { ref } from 'vue'
import { RouterLink } from 'vue-router'
import {
PageLayout,
QueryStateBoundary,
KArtsellMetricCard,
KsButton,
KsSelect,
KsTextField,
KsDateField,
KsStatusTag,
} from '../../../shared/ui'
// KBX v60 Exception-Driven Work Queue Metrics (§2.4 Exception Driven)
const workQueueSummary = [
{ label: '전체 모델 수', count: 42, status: 'normal', filter: 'all' },
{ label: 'Shadow Run 실시간', count: 6, status: 'running', filter: 'running' },
{ label: '승인 대기 (Maker-Checker)', count: 8, status: 'warning', filter: 'approval' },
{ label: 'PBO/DSR 검증 경고', count: 3, status: 'danger', filter: 'warning' },
{ label: '데이터 수집 예외', count: 2, status: 'danger', filter: 'exception' }
{ label: '전체 모델 수', count: 42, status: 'info' as const, filter: 'all', trend: 'neutral' as const },
{ label: 'Shadow Run 실시간', count: 6, status: 'success' as const, filter: 'running', trend: 'up' as const },
{ label: '승인 대기 (Maker-Checker)', count: 8, status: 'warning' as const, filter: 'approval', trend: 'neutral' as const },
{ label: 'PBO/DSR 검증 경고', count: 3, status: 'danger' as const, filter: 'warning', trend: 'down' as const },
{ label: '데이터 수집 예외', count: 2, status: 'danger' as const, filter: 'exception', trend: 'down' as const }
]
// KBX v60 Exception Items (처리 대상 13건 노출)
const exceptionItems = [
{ id: 'EX-2026-001', type: 'DSR/PBO 미달', model: 'Aegis-Core-Alpha-v1.4', module: '매도 의사결정', status: '경고', time: '10분 전', route: '/governance/approvals' },
{ id: 'EX-2026-002', type: 'Maker-Checker 승인대기', model: 'K-Trend-Sell-v2.1', module: '포트폴리오 리밸런싱', status: '대기', time: '25분 전', route: '/governance/approvals' },
{ id: 'EX-2026-003', type: 'KIS API 수집 오류', model: 'MarketData-KRX-Realtime', module: '시장 데이터 수집', status: '오류', time: '1시간 전', route: '/ops/market-data-history' },
{ id: 'EX-2026-004', type: 'Shadow Run 타임아웃', model: 'Shadow-Batch-Job-8492', module: 'Shadow Run', status: '오류', time: '2시간 전', route: '/model-ops/shadow-run-jobs' },
]
const exceptionItems = ref([
{ id: 'EX-2026-001', type: 'DSR/PBO 미달', model: 'Aegis-Core-Alpha-v1.4', module: '매도 의사결정', status: '경고', severity: 'warning' as const, time: '10분 전', route: '/governance/approvals' },
{ id: 'EX-2026-002', type: 'Maker-Checker 승인대기', model: 'K-Trend-Sell-v2.1', module: '포트폴리오 리밸런싱', status: '대기', severity: 'warning' as const, time: '25분 전', route: '/governance/approvals' },
{ id: 'EX-2026-003', type: 'KIS API 수집 오류', model: 'MarketData-KRX-Realtime', module: '시장 데이터 수집', status: '오류', severity: 'danger' as const, time: '1시간 전', route: '/ops/market-data-history' },
{ id: 'EX-2026-004', type: 'Shadow Run 타임아웃', model: 'Shadow-Batch-Job-8492', module: 'Shadow Run', status: '오류', severity: 'danger' as const, time: '2시간 전', route: '/model-ops/shadow-run-jobs' },
])
// KBX Quick System Rules (§2.1 Familiar First)
const operationalGuides = [
@@ -26,415 +37,283 @@ const operationalGuides = [
{ title: '자동주문 차단', desc: '현재 KIS 실제 주문 제출 기능은 OFF 상태이며 오직 Shadow 평가 모드만 동작합니다.' },
]
// KBX v60 Command Action Handler (F3/F8)
// Filter & Search states
const activeFilter = ref('all')
const selectedModule = ref('all')
const searchKeyword = ref('')
const searchDate = ref('2026-08-08 ~ 2026-08-15')
const isLoading = ref(false)
const moduleOptions = [
{ label: '전체 모듈', value: 'all' },
{ label: 'Research / 매도', value: 'research' },
{ label: 'ModelOps', value: 'model' },
{ label: 'Governance', value: 'governance' }
]
const handleFilter = (filterKey: string) => {
activeFilter.value = filterKey
}
const handleSearch = () => {
isLoading.value = true
setTimeout(() => {
isLoading.value = false
}, 300)
}
</script>
<template>
<div class="kbx-business-home">
<!-- KBX Page Header (§7: Height 48px) -->
<header class="kbx-page-header">
<div class="kbx-page-header__breadcrumb">K-ArtSell Aegis > 홈 > 업무 워크스페이스</div>
<div class="kbx-page-header__title-row">
<h1 class="kbx-page-header__title">업무 워크스페이스 (Work Queue & Reconcile)</h1>
<div class="kbx-page-header__actions">
<span class="kbx-badge kbx-badge--info">KBX v60 Standard</span>
<span class="kbx-badge kbx-badge--warning">자동주문/KIS OFF</span>
</div>
</div>
</header>
<PageLayout
title="업무 워크스페이스 (Work Queue & Reconcile)"
subtitle="Exception Driven 업무 큐 및 시스템 헬스 관제 센터"
>
<!-- Top-Right Actions Slot -->
<template #actions>
<KsStatusTag value="KBX v60 Standard" severity="info" />
<KsStatusTag value="자동주문/KIS OFF" severity="warning" />
</template>
<!-- KBX Command Bar (§5: Height 44px) -->
<div class="kbx-command-bar">
<div class="kbx-command-bar__group">
<button type="button" class="kbx-btn kbx-btn--primary">
<span class="kbx-btn__shortcut">[F3]</span> 새로고침
</button>
<button type="button" class="kbx-btn kbx-btn--secondary">
예외건만 보기
</button>
</div>
<div class="kbx-command-bar__group">
<RouterLink to="/model-ops/shadow-run-jobs" class="kbx-btn kbx-btn--secondary">
Shadow Run 실행
</RouterLink>
<RouterLink to="/governance/approvals" class="kbx-btn kbx-btn--secondary">
승인 큐 이동
</RouterLink>
</div>
</div>
<!-- Standard Command Bar Slot -->
<template #commandBar>
<KsButton label="조회 [F3]" variant="primary" size="sm" @click="handleSearch" />
<KsButton label="예외건만 보기" variant="secondary" size="sm" @click="handleFilter('exception')" />
<RouterLink to="/model-ops/shadow-run-jobs">
<KsButton label="Shadow Run 실행" variant="secondary" size="sm" />
</RouterLink>
<RouterLink to="/governance/approvals">
<KsButton label="승인 큐 이동" variant="secondary" size="sm" />
</RouterLink>
</template>
<!-- KBX Search Panel (§6: Dense 34px) -->
<div class="kbx-search-panel">
<div class="kbx-search-panel__row">
<div class="kbx-search-field">
<label for="home-search-date">조회기간</label>
<input id="home-search-date" type="text" value="2026-08-08 ~ 2026-08-15" class="kbx-input" readonly />
</div>
<div class="kbx-search-field">
<label for="home-search-module">업무모듈</label>
<select id="home-search-module" class="kbx-select">
<option value="all">전체 모듈</option>
<option value="research">Research / 매도</option>
<option value="model">ModelOps</option>
<option value="governance">Governance</option>
</select>
</div>
<div class="kbx-search-field">
<label for="home-search-keyword">통합검색</label>
<input id="home-search-keyword" type="text" placeholder="모델ID / 예외코드 / 담당자" class="kbx-input" />
</div>
<button type="button" class="kbx-btn kbx-btn--primary">조회 [F3]</button>
</div>
</div>
<!-- KBX Exception-Driven KPI Toolbar (KBX Reference Screen §11) -->
<div class="kbx-kpi-bar" role="toolbar" aria-label="예외 상태 요약">
<div
<!-- KPI / Summary Slot -->
<template #summary>
<KArtsellMetricCard
v-for="item in workQueueSummary"
:key="item.filter"
class="kbx-kpi-item kbx-card"
:class="[
`kbx-kpi-item--${item.status}`,
{ 'kbx-kpi-item--active': activeFilter === item.filter }
]"
:title="item.label"
:value="item.count"
:status="item.status"
:trend="item.trend"
class="ks-metric-clickable"
:class="{ 'ks-metric-active': activeFilter === item.filter }"
@click="handleFilter(item.filter)"
>
<div class="kbx-kpi-item__label">{{ item.label }}</div>
<div class="kbx-kpi-item__count ks-financial-number">{{ item.count }}</div>
</div>
</div>
/>
</template>
<!-- KBX Exception Work Queue Grid (T06 / T07 Reference Screen) -->
<section class="kbx-workspace-grid kbx-card">
<div class="kbx-section-header">
<h2 class="kbx-section-title">⚡ 긴급 처리 필요 예외 건 (Exception Driven Work Queue)</h2>
<span class="kbx-section-count">총 {{ exceptionItems.length }}건 처리 필요</span>
</div>
<!-- Filters Slot (Auto-Context Provider + Standard Set Widths) -->
<template #filters>
<div class="ks-filter-group">
<KsDateField
v-model="searchDate"
label="조회기간"
type="range"
inline
class="ks-set-md"
/>
<div class="kbx-table-container">
<table class="kbx-grid-table">
<thead>
<tr>
<th style="width: 40px;"><input type="checkbox" aria-label="전체 선택" /></th>
<th style="width: 120px;">예외ID</th>
<th style="width: 160px;">예외 유형</th>
<th>대상 모델</th>
<th style="width: 140px;">업무 모듈</th>
<th style="width: 80px;">상태</th>
<th style="width: 100px;">발생 시간</th>
<th style="width: 100px;">조치</th>
</tr>
</thead>
<tbody>
<tr v-for="ex in exceptionItems" :key="ex.id" class="kbx-grid-row">
<td><input type="checkbox" :aria-label="`${ex.id} 선택`" /></td>
<td class="ks-financial-number">{{ ex.id }}</td>
<td>
<span class="kbx-exception-tag" :class="ex.status === '오류' ? 'kbx-exception-tag--danger' : 'kbx-exception-tag--warning'">
⚠ {{ ex.type }}
</span>
</td>
<td class="kbx-model-name"><strong>{{ ex.model }}</strong></td>
<td>{{ ex.module }}</td>
<td>
<span class="kbx-status-badge" :class="`kbx-status-badge--${ex.status}`">{{ ex.status }}</span>
</td>
<td class="ks-financial-number">{{ ex.time }}</td>
<td>
<RouterLink :to="ex.route" class="kbx-btn kbx-btn--xs kbx-btn--secondary">
조치하기 →
</RouterLink>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<KsSelect
v-model="selectedModule"
label="업무모듈"
:options="moduleOptions"
inline
class="ks-set-md"
/>
<KsTextField
v-model="searchKeyword"
label="통합검색"
placeholder="모델ID / 예외코드 / 담당자"
inline
class="ks-set-md"
/>
<!-- KBX System Operational Rules (§2.1 Familiar First) -->
<section class="kbx-guide-grid">
<div v-for="guide in operationalGuides" :key="guide.title" class="kbx-guide-card kbx-card">
<h3 class="kbx-guide-title">📌 {{ guide.title }}</h3>
<p class="kbx-guide-desc">{{ guide.desc }}</p>
<KsButton label="검색" variant="primary" size="md" class="ks-filter-btn" @click="handleSearch" />
</div>
</section>
</div>
</template>
<!-- Main Content Workspace with Standard Query State Boundary -->
<QueryStateBoundary
:loading="isLoading"
:empty="exceptionItems.length === 0"
skeleton-type="table"
:skeleton-rows="4"
>
<div class="ks-home-body">
<!-- Exception Work Queue Grid -->
<section class="ks-section-card">
<div class="ks-section-header">
<h2 class="ks-section-title">⚡ 긴급 처리 필요 예외 건 (Exception Driven Work Queue)</h2>
<span class="ks-section-count">총 {{ exceptionItems.length }}건 처리 필요</span>
</div>
<div class="ks-table-container">
<table class="ks-grid-table">
<thead>
<tr>
<th style="width: 40px;"><input type="checkbox" aria-label="전체 선택" /></th>
<th style="width: 120px;">예외ID</th>
<th style="width: 160px;">예외 유형</th>
<th>대상 모델</th>
<th style="width: 140px;">업무 모듈</th>
<th style="width: 100px;">상태</th>
<th style="width: 100px;">발생 시간</th>
<th style="width: 100px;">조치</th>
</tr>
</thead>
<tbody>
<tr v-for="ex in exceptionItems" :key="ex.id" class="ks-grid-row">
<td><input type="checkbox" :aria-label="`${ex.id} 선택`" /></td>
<td class="ks-financial-number">{{ ex.id }}</td>
<td>
<KsStatusTag :value="ex.type" :severity="ex.severity" />
</td>
<td class="ks-model-name"><strong>{{ ex.model }}</strong></td>
<td>{{ ex.module }}</td>
<td>
<KsStatusTag :value="ex.status" :severity="ex.severity" />
</td>
<td class="ks-financial-number">{{ ex.time }}</td>
<td>
<RouterLink :to="ex.route">
<KsButton label="조치하기 →" variant="secondary" size="xs" />
</RouterLink>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- System Operational Rules Grid -->
<section class="ks-guide-grid">
<div v-for="guide in operationalGuides" :key="guide.title" class="ks-guide-card">
<h3 class="ks-guide-title">📌 {{ guide.title }}</h3>
<p class="ks-guide-desc">{{ guide.desc }}</p>
</div>
</section>
</div>
</QueryStateBoundary>
</PageLayout>
</template>
<style scoped>
.kbx-business-home {
.ks-home-body {
display: flex;
flex-direction: column;
gap: var(--ks-space-3);
background: var(--ks-color-canvas);
color: var(--ks-color-text);
font-family: Pretendard, system-ui, sans-serif;
gap: var(--ks-space-4);
flex: 1;
min-height: 0;
overflow-y: auto;
}
/* Page Header 48px (§7) */
.kbx-page-header {
min-height: var(--ks-shell-pageheader-height);
display: flex;
flex-direction: column;
justify-content: center;
border-bottom: 1px solid var(--ks-color-border);
padding: var(--ks-space-2) var(--ks-space-4);
background: var(--ks-color-surface);
border-radius: var(--ks-radius-md);
}
.kbx-page-header__breadcrumb {
font-size: var(--ks-font-caption);
color: var(--ks-color-text-muted);
}
.kbx-page-header__title-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.kbx-page-header__title {
font-size: var(--ks-font-page);
font-weight: 600;
margin: 0;
}
.kbx-badge {
font-size: 11px;
font-weight: 600;
padding: 2px 6px;
border-radius: var(--ks-radius-sm);
margin-left: 6px;
}
.kbx-badge--info { background: var(--ks-color-neutral-100); color: var(--ks-color-info); }
.kbx-badge--warning { background: var(--ks-color-neutral-100); color: var(--ks-color-warning); }
/* Command Bar 44px */
.kbx-command-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--ks-space-2) var(--ks-space-4);
background: var(--ks-color-surface);
border: 1px solid var(--ks-color-border);
border-radius: var(--ks-radius-md);
gap: var(--ks-space-2);
}
.kbx-command-bar__group {
display: flex;
align-items: center;
gap: var(--ks-space-2);
}
/* Search Panel */
.kbx-search-panel {
background: var(--ks-color-surface);
border: 1px solid var(--ks-color-border);
border-radius: var(--ks-radius-md);
padding: var(--ks-space-3) var(--ks-space-4);
}
.kbx-search-panel__row {
.ks-filter-group {
display: flex;
align-items: center;
gap: var(--ks-space-4);
flex-wrap: wrap;
width: 100%;
flex-wrap: nowrap;
}
.kbx-search-field {
display: flex;
align-items: center;
gap: var(--ks-space-2);
.ks-filter-btn {
flex-shrink: 0;
}
.kbx-search-field label {
font-size: var(--ks-font-caption);
font-weight: 600;
color: var(--ks-color-text-muted);
white-space: nowrap;
}
.kbx-input, .kbx-select {
height: var(--ks-control-height);
padding: 0 var(--ks-space-3);
border: 1px solid var(--ks-color-border);
border-radius: var(--ks-radius-sm);
background: var(--ks-color-surface);
font-size: var(--ks-font-body);
}
/* KPI Toolbar Grid */
.kbx-kpi-bar {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--ks-space-3);
}
.kbx-kpi-item {
padding: var(--ks-space-3) var(--ks-space-4);
background: var(--ks-color-surface);
border: 1px solid var(--ks-color-border);
border-radius: var(--ks-radius-md);
.ks-metric-clickable {
cursor: pointer;
transition: var(--ks-transition-smooth);
transition: border-color 0.15s ease, transform 0.15s ease;
}
.kbx-kpi-item:hover {
.ks-metric-active {
border-color: var(--ks-color-action);
box-shadow: var(--ks-shadow-md);
box-shadow: 0 0 0 1px var(--ks-color-action);
}
.kbx-kpi-item--active {
border-color: var(--ks-color-action);
background: rgba(37, 99, 235, 0.04);
}
.kbx-kpi-item__label {
font-size: var(--ks-font-caption);
color: var(--ks-color-text-muted);
}
.kbx-kpi-item__count {
font-size: 24px;
font-weight: 700;
color: var(--ks-color-text);
margin-top: 4px;
}
.kbx-kpi-item--warning .kbx-kpi-item__count { color: var(--ks-color-warning); }
.kbx-kpi-item--danger .kbx-kpi-item__count { color: var(--ks-color-danger); }
/* Table Container & Dense Grid */
.kbx-workspace-grid {
.ks-section-card {
background: var(--ks-color-surface);
border: 1px solid var(--ks-color-border);
border-radius: var(--ks-radius-md);
padding: var(--ks-space-4);
}
.kbx-section-header {
.ks-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--ks-space-3);
}
.kbx-section-title {
.ks-section-title {
font-size: var(--ks-font-section);
font-weight: 600;
margin: 0;
color: var(--ks-color-text);
}
.kbx-section-count {
.ks-section-count {
font-size: var(--ks-font-caption);
color: var(--ks-color-text-muted);
}
.kbx-table-container {
.ks-table-container {
overflow-x: auto;
}
.kbx-grid-table {
.ks-grid-table {
width: 100%;
border-collapse: collapse;
font-size: var(--ks-font-grid);
}
.kbx-grid-table th {
height: var(--ks-grid-header-height);
.ks-grid-table th {
height: var(--ks-grid-header-height, 36px);
background: var(--ks-color-neutral-100);
border-bottom: 2px solid var(--ks-color-border-strong);
padding: 0 var(--ks-space-3);
text-align: left;
font-weight: 600;
color: var(--ks-color-neutral-800);
font-weight: 700;
color: var(--ks-color-text);
}
.kbx-grid-table td {
height: var(--ks-grid-row-height);
.ks-grid-table td {
height: var(--ks-grid-row-height, 36px);
border-bottom: 1px solid var(--ks-color-border);
padding: 0 var(--ks-space-3);
color: var(--ks-color-text);
}
.kbx-grid-row:hover {
.ks-grid-row:hover {
background: var(--ks-color-neutral-50);
}
/* Button & Badge Standards */
.kbx-btn {
height: var(--ks-control-height);
padding: 0 var(--ks-space-3);
border-radius: var(--ks-radius-sm);
font-size: var(--ks-font-body);
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ks-space-1);
border: 1px solid transparent;
text-decoration: none;
transition: var(--ks-transition-fast);
}
.kbx-btn--primary {
background: var(--ks-color-action);
color: var(--ks-color-text-on-dark);
border-color: var(--ks-color-action);
}
.kbx-btn--primary:hover { background: var(--ks-color-action-hover); }
.kbx-btn--secondary {
background: var(--ks-color-surface);
color: var(--ks-color-text);
border-color: var(--ks-color-border-strong);
}
.kbx-btn--secondary:hover { background: var(--ks-color-neutral-100); }
.kbx-btn--xs {
height: 26px;
padding: 0 8px;
font-size: 12px;
}
.kbx-status-badge {
padding: 2px 6px;
border-radius: var(--ks-radius-sm);
font-size: 12px;
font-weight: 600;
}
.kbx-status-badge--오류 { background: rgba(220, 38, 38, 0.1); color: var(--ks-color-danger); }
.kbx-status-badge--경고, .kbx-status-badge--대기 { background: rgba(217, 119, 6, 0.1); color: var(--ks-color-warning); }
/* Guide Cards Grid */
.kbx-guide-grid {
.ks-guide-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--ks-space-3);
}
.kbx-guide-card {
.ks-guide-card {
background: var(--ks-color-surface);
border: 1px solid var(--ks-color-border);
border-radius: var(--ks-radius-sm);
padding: var(--ks-space-3);
}
.kbx-guide-title {
.ks-guide-title {
font-size: var(--ks-font-body);
font-weight: 600;
margin: 0 0 var(--ks-space-1) 0;
color: var(--ks-color-text);
}
.kbx-guide-desc {
.ks-guide-desc {
font-size: var(--ks-font-caption);
color: var(--ks-color-text-muted);
margin: 0;
frontend/src/features/marketData/pages/IngestionStatus.vue
+25 -23
View File
@@ -1,9 +1,10 @@
<template>
<BatchOperationsPageV2 title="시장 데이터 수집 현황" subtitle="데이터 수집 작업 상태를 모니터링합니다." :state="state">
<template #actions>
<KsButton severity="secondary" label="새로고침" @click="refreshAll" />
<KsButton variant="secondary" label="새로고침" @click="refreshAll" />
</template>
<template #timeline>
<div v-if="job">
<div class="status-header">
@@ -50,28 +51,6 @@ interface IngestionJob {
errorMessage?: string
}
const job = ref<IngestionJob | null>(null)
const recentJobs = ref<IngestionJob[]>([])
const isLoading = ref(true)
const error = ref<string | null>(null)
const state = ref<'LOADING' | 'READY'>('LOADING')
const historyColumns: UiGridColumn[] = [
{ field: 'jobId', header: 'Job ID', formatter: value => String(value).substring(0, 8) },
{ field: 'status', header: '상태' },
{ field: 'rowsProcessed', header: '처리 행', formatter: value => formatQuantity(value as number, 0) },
{ field: 'durationSeconds', header: '소요 시간', formatter: value => value ? `${value}초` : '—' },
{ field: 'completedAt', header: '완료 시각', formatter: value => value ? formatAsOf(value as string) : '—' }
]
function statusSeverity(status: string): UiSeverity {
const normalized = status.toLowerCase()
if (normalized === 'completed') return 'success'
if (normalized === 'failed') return 'danger'
if (normalized === 'running') return 'info'
return 'warning'
}
// Mock Fallback Data when API is offline or 502
const mockLatestJob: IngestionJob = {
jobId: 'ING-20260815-00192',
@@ -114,6 +93,29 @@ const mockRecentJobsList: IngestionJob[] = [
},
]
const job = ref<IngestionJob | null>(mockLatestJob)
const recentJobs = ref<IngestionJob[]>(mockRecentJobsList)
const isLoading = ref(false)
const error = ref<string | null>(null)
const state = ref<'LOADING' | 'READY'>('READY')
const historyColumns: UiGridColumn[] = [
{ field: 'jobId', header: 'Job ID', formatter: value => String(value).substring(0, 8) },
{ field: 'status', header: '상태' },
{ field: 'rowsProcessed', header: '처리 행', formatter: value => formatQuantity(value as number, 0) },
{ field: 'durationSeconds', header: '소요 시간', formatter: value => value ? `${value}초` : '—' },
{ field: 'completedAt', header: '완료 시각', formatter: value => value ? formatAsOf(value as string) : '—' }
]
function statusSeverity(status: string): UiSeverity {
const normalized = status.toLowerCase()
if (normalized === 'completed') return 'success'
if (normalized === 'failed') return 'danger'
if (normalized === 'running') return 'info'
return 'warning'
}
// Fetch latest job status from API
const fetchLatestJob = async () => {
try {
frontend/src/features/marketData/pages/MarketDataIngestion.vue
+144 -69
View File
@@ -1,60 +1,3 @@
<template>
<EditFormPage
title="시장 데이터 수집 (Market Data Ingestion Form)"
subtitle="KRX 과거 시세 및 OpenDart 공시 데이터 수집 작업을 등록합니다."
:state="screenState"
:evidence="evidence"
@retry="handleRetry"
>
<!-- Default Slot: Form Section -->
<div class="content">
<KsFormSection title="1. 데이터 소스 및 기간 선택">
<KsFormGrid :columns="1" aria-label="데이터 소스 및 기간">
<KsSelect v-model="form.dataSource" label="데이터 소스" :options="dataSourceOptions" />
<p class="hint"><strong>KRX:</strong> 시세 데이터(시가/고가/저가/종가/거래량) · <strong>OpenDart:</strong> 기업 공시</p>
</KsFormGrid>
<KsFormGrid :columns="2" aria-label="수집 기간">
<KsDateField v-model="form.fromDate" label="시작일" :min="minDateValue" :max="maxDateValue" />
<KsDateField v-model="form.toDate" label="종료일" :min="form.fromDate ? new Date(form.fromDate) : minDateValue" :max="maxDateValue" />
</KsFormGrid>
<div class="presets">
<KsButton severity="secondary" label="최근 1년" @click="setPreset('1y')" />
<KsButton severity="secondary" label="최근 2년" @click="setPreset('2y')" />
<KsButton severity="secondary" label="최근 5년" @click="setPreset('5y')" />
<KsButton severity="secondary" label="전체 가능 기간" @click="setPreset('all')" />
</div>
</KsFormSection>
<KsFormSection v-if="validationErrors.length" title="입력 오류">
<KsValidationSummary :errors="validationErrorObjects" />
</KsFormSection>
<KsFormSection v-else title="수집 요약">
<dl class="summary-grid">
<div class="summary-item"><dt>데이터 소스</dt><dd>{{ form.dataSource }}</dd></div>
<div class="summary-item"><dt>기간</dt><dd class="ks-financial-number">{{ form.fromDate }} ~ {{ form.toDate }}</dd></div>
<div class="summary-item"><dt>일수</dt><dd class="ks-financial-number">{{ formatQuantity(daysCount, 0) }}일</dd></div>
<div class="summary-item"><dt>예상 행 수</dt><dd class="ks-financial-number">{{ estimatedRows }}</dd></div>
</dl>
<template #actions>
<KsButton severity="secondary" label="초기화" @click="resetForm" />
<KsButton severity="primary" :label="isLoading ? '처리 중...' : '수집 예약'" :loading="isLoading" :disabled="validationErrors.length > 0" @click="triggerIngestion" />
</template>
</KsFormSection>
<KsFormSection v-if="jobId" title="수집 작업이 등록되었습니다">
<dl class="summary-grid">
<div class="summary-item"><dt>Job ID</dt><dd class="mono ks-financial-number">{{ jobId }}</dd></div>
<div class="summary-item"><dt>상태</dt><dd><KsStatusTag value="대기" severity="info" /></dd></div>
<div class="summary-item"><dt>등록 시각</dt><dd class="ks-financial-number">{{ formatAsOf(new Date()) }}</dd></div>
</dl>
<p class="hint">수집은 백그라운드에서 실행됩니다. 진행 상태는 수집 이력 화면에서 확인할 수 있습니다.</p>
<RouterLink to="/ops/market-data-history">수집 이력 보기 →</RouterLink>
</KsFormSection>
</div>
</EditFormPage>
</template>
<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
import { RouterLink } from 'vue-router'
@@ -66,7 +9,7 @@ import type { StandardScreenState } from '../../../shared/ui/contracts/screenCon
// KBX T03 Governance Audit & Form State
const screenState = ref<StandardScreenState>('READY')
const evidence = reactive({
asOf: '2026-08-15T19:42:00Z',
asOf: new Date().toISOString(),
version: 'v60-T03-Contract',
})
@@ -84,8 +27,8 @@ const form = ref({
toDate: new Date().toISOString().split('T')[0],
})
const minDate = '2015-01-01' // KRX historical data starts here
const maxDate = new Date().toISOString().split('T')[0] // Today
const minDate = '2015-01-01'
const maxDate = new Date().toISOString().split('T')[0]
const minDateValue = new Date(minDate)
const maxDateValue = new Date(maxDate)
@@ -117,8 +60,6 @@ const daysCount = computed(() => {
})
const estimatedRows = computed(() => {
// KRX: ~2000 stocks × days
// OpenDart: ~200 quarterly filings
if (form.value.dataSource === 'KRX') {
return formatQuantity(daysCount.value * 2000, 0)
} else if (form.value.dataSource === 'OpenDart') {
@@ -166,7 +107,6 @@ const triggerIngestion = async () => {
const data = await response.json()
jobId.value = data.jobId
// Reset form after success
setTimeout(() => {
form.value.fromDate = new Date(Date.now() - 365 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
form.value.toDate = new Date().toISOString().split('T')[0]
@@ -195,12 +135,147 @@ const handleRetry = () => {
}
</script>
<template>
<EditFormPage
title="시장 데이터 수집"
subtitle="KRX 과거 시세 및 OpenDart 공시 데이터 수집 작업을 예약 등록합니다."
:state="screenState"
:evidence="evidence"
@submit="triggerIngestion"
@retry="handleRetry"
>
<!-- Top Action Bar Slot -->
<template #actions>
<KsButton variant="secondary" label="🔄 초기화" @click="resetForm" />
<KsButton
variant="primary"
:label="isLoading ? '처리 중...' : '📤 수집 예약 실행'"
:loading="isLoading"
:disabled="validationErrors.length > 0"
@click="triggerIngestion"
/>
</template>
<!-- Form Section (Left Pane) -->
<div class="ks-form-pane">
<KsFormSection title="1. 데이터 소스선택">
<KsFormGrid :columns="1" aria-label="데이터 소스 선택">
<KsSelect v-model="form.dataSource" label="데이터 소스" :options="dataSourceOptions" class="ks-set-md" />
<p class="hint"><strong>KRX:</strong> KOSPI/KOSDAQ 시세 · <strong>OpenDart:</strong> 기업 정기 공시</p>
</KsFormGrid>
</KsFormSection>
<KsFormSection title="2. 수집 기간 선택">
<KsFormGrid :columns="2" aria-label="수집 기간">
<KsDateField v-model="form.fromDate" label="시작일" :min="minDateValue" :max="maxDateValue" />
<KsDateField v-model="form.toDate" label="종료일" :min="form.fromDate ? new Date(form.fromDate) : minDateValue" :max="maxDateValue" />
</KsFormGrid>
<div class="presets">
<KsButton variant="secondary" label="최근 1년" @click="setPreset('1y')" />
<KsButton variant="secondary" label="최근 2년" @click="setPreset('2y')" />
<KsButton variant="secondary" label="최근 5년" @click="setPreset('5y')" />
<KsButton variant="secondary" label="전체 가능 기간" @click="setPreset('all')" />
</div>
</KsFormSection>
<KsFormSection v-if="validationErrors.length" title="입력 검증 오류">
<KsValidationSummary :errors="validationErrorObjects" />
</KsFormSection>
</div>
<!-- Preview Section (Right Pane) -->
<template #preview>
<div class="ks-preview-pane">
<h3>수집 예약 요약</h3>
<dl class="summary-grid">
<div class="summary-item"><dt>데이터 소스</dt><dd><code>{{ form.dataSource }}</code></dd></div>
<div class="summary-item"><dt>수집 기간</dt><dd class="ks-financial-number">{{ form.fromDate }} ~ {{ form.toDate }}</dd></div>
<div class="summary-item"><dt>총 수집 일수</dt><dd class="ks-financial-number">{{ formatQuantity(daysCount, 0) }} 일</dd></div>
<div class="summary-item"><dt>예상 수집 행 수</dt><dd class="ks-financial-number">{{ estimatedRows }} 행</dd></div>
</dl>
<div v-if="jobId" class="job-status-card">
<div class="status-header">
<h4>수집 작업 예약 등록 완료</h4>
<KsStatusTag value="대기 QUEUED" severity="info" />
</div>
<dl class="job-dl">
<div class="row"><dt>Job ID</dt><dd><code>{{ jobId }}</code></dd></div>
<div class="row"><dt>등록 시각</dt><dd class="ks-financial-number">{{ formatAsOf(new Date()) }}</dd></div>
</dl>
<p class="hint">수집 작업이 백그라운드에 등록되었습니다. 진행 이력은 수집 이력 페이지에서 확인 가능합니다.</p>
<RouterLink to="/ops/market-data-history" class="history-link">📋 수집 이력 보기 →</RouterLink>
</div>
</div>
</template>
</EditFormPage>
</template>
<style scoped>
.hint { font-size: var(--ks-font-caption); color: var(--ks-color-text-muted); margin: 0; }
.presets { display: flex; gap: var(--ks-space-2); flex-wrap: wrap; margin-top: var(--ks-space-3); }
.summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ks-space-3); margin: 0; }
.summary-item { display: flex; justify-content: space-between; padding: var(--ks-space-2) var(--ks-space-3); background: var(--ks-color-canvas); border-radius: var(--ks-radius-sm); }
.ks-form-pane {
display: flex;
flex-direction: column;
gap: var(--ks-space-4);
}
.ks-preview-pane {
display: flex;
flex-direction: column;
gap: var(--ks-space-3);
}
.ks-preview-pane h3 {
margin: 0;
font-size: var(--ks-font-section);
font-weight: 700;
border-bottom: 1px solid var(--ks-color-border-strong);
padding-bottom: 8px;
}
.hint { font-size: var(--ks-font-caption); color: var(--ks-color-text-muted); margin: 4px 0 0 0; }
.presets { display: flex; gap: var(--ks-space-2); flex-wrap: wrap; margin-top: var(--ks-space-2); }
.summary-grid { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.summary-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; background: var(--ks-color-canvas); border-radius: var(--ks-radius-sm); border: 1px solid var(--ks-color-border); font-size: var(--ks-font-body); }
.summary-item dt { font-weight: 600; color: var(--ks-color-text-muted); }
.summary-item dd { margin: 0; font-weight: 600; }
.mono { font-family: monospace; }
.summary-item dd { margin: 0; font-weight: 700; }
.summary-item code { font-family: var(--ks-font-mono, monospace); background: var(--ks-color-surface); padding: 2px 6px; border-radius: 3px; border: 1px solid var(--ks-color-border); }
.job-status-card {
margin-top: var(--ks-space-3);
padding: var(--ks-space-3);
background: var(--ks-color-surface);
border: 1px solid var(--ks-color-info);
border-radius: var(--ks-radius-md);
display: flex;
flex-direction: column;
gap: 8px;
}
.status-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.status-header h4 {
margin: 0;
font-size: var(--ks-font-body);
color: var(--ks-color-info);
}
.job-dl { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.job-dl .row { display: flex; justify-content: space-between; align-items: center; font-size: var(--ks-font-caption); }
.job-dl dt { font-weight: 600; color: var(--ks-color-text-muted); }
.job-dl dd { margin: 0; font-weight: 700; }
.job-dl code { font-family: var(--ks-font-mono, monospace); background: var(--ks-color-canvas); padding: 2px 6px; border-radius: 3px; border: 1px solid var(--ks-color-border); }
.history-link {
font-size: var(--ks-font-body);
font-weight: 600;
color: var(--ks-color-action);
text-decoration: none;
margin-top: 4px;
}
.history-link:hover { text-decoration: underline; }
</style>
frontend/src/features/model-operations/pages/ModelOperationsPage.vue
+1
View File
@@ -46,5 +46,6 @@ const handleRetry = () => {
flex: 1;
height: 100%;
min-height: 0;
overflow-y: auto;
}
</style>
frontend/src/features/models/pages/ModelsList.vue
+6
View File
@@ -210,6 +210,9 @@ function handleSearch() {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
min-height: 0;
overflow-y: auto;
}
.grid-container {
@@ -220,5 +223,8 @@ function handleSearch() {
min-height: 300px;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow-y: auto;
}
</style>
frontend/src/features/portfolio/pages/RebalanceForm.vue
+405 -56
View File
@@ -2,20 +2,23 @@
import { computed, ref, reactive } from 'vue'
import StepWizardPage from '../../../shared/ui/screen-types/v2/StepWizardPage.vue'
import DataGridShell from '../../../shared/ui/DataGridShell.vue'
import { KsButton, KsFormGrid, KsFormSection, KsNumberField, KsStatusTag, KsTextField } from '../../../shared/ui/components'
import { KsButton, KsCheckbox, KsFormGrid, KsFormSection, KsNumberField, KsStatusTag, KsTextField } from '../../../shared/ui/components'
import type { UiGridColumn } from '../../../shared/ui/adapter/contracts'
import { formatCurrency, formatPercent, formatQuantity } from '../../../shared/formatters/financial'
import type { StandardScreenState } from '../../../shared/ui/contracts/screenContract'
// KBX T06 Governance Audit & Screen State
const screenState = ref<StandardScreenState>('READY')
const currentStep = ref(1)
const evidence = reactive({
asOf: '2026-08-15T19:44:00Z',
asOf: new Date().toISOString(),
version: 'v60-T06-Contract',
})
interface Position {
symbol: string
name: string
quantity: number
marketPrice: number
marketValue: number
@@ -27,39 +30,125 @@ interface TargetWeight {
targetPercent: number
}
interface SimulationItem {
symbol: string
currentQuantity: number
marketPrice: number
currentValue: number
currentWeight: number
targetWeight: number
targetValue: number
deltaValue: number
tradeAction: 'BUY' | 'SELL' | 'HOLD'
estimatedShares: number
}
interface JobResult {
jobId: string
status: string
submittedAt: string
estimatedTradeCount: number
estimatedCost: number
totalRebalanceValue: number
}
const currentPositions = ref<Position[]>([
{ symbol: 'AAPL', quantity: 100, marketPrice: 150.25, marketValue: 15025, weightPercent: 35.3 },
{ symbol: 'MSFT', quantity: 80, marketPrice: 320.50, marketValue: 25640, weightPercent: 60.2 },
{ symbol: 'GOOGL', quantity: 50, marketPrice: 140.75, marketValue: 7037.5, weightPercent: 16.5 },
{ symbol: 'AAPL', name: '애플', quantity: 100, marketPrice: 185.20, marketValue: 18520, weightPercent: 35.3 },
{ symbol: 'NVDA', name: '엔비디아', quantity: 30, marketPrice: 875.50, marketValue: 26265, weightPercent: 50.1 },
{ symbol: 'MSFT', name: '마이크로소프트', quantity: 18, marketPrice: 415.00, marketValue: 7470, weightPercent: 14.6 },
])
const driftThreshold = ref(3)
const targetWeights = ref<TargetWeight[]>([
{ symbol: 'AAPL', targetPercent: 30 },
{ symbol: 'NVDA', targetPercent: 40 },
{ symbol: 'MSFT', targetPercent: 30 },
])
const jobResult = ref<JobResult | null>(null)
const positionColumns: UiGridColumn[] = [
{ field: 'symbol', header: '종목코드' },
{ field: 'quantity', header: '수량', formatter: value => formatQuantity(value as number, 0) },
{ field: 'symbol', header: '종목코드', width: 90 },
{ field: 'quantity', header: '현재수량', formatter: value => formatQuantity(value as number, 0) },
{ field: 'marketPrice', header: '현재가', formatter: value => formatCurrency(value as number, 'USD') },
{ field: 'marketValue', header: '평가금액', formatter: value => formatCurrency(value as number, 'USD') },
{ field: 'weightPercent', header: '비중', formatter: value => formatPercent((value as number) / 100, 1) }
{ field: 'weightPercent', header: '현재비중', formatter: value => formatPercent((value as number) / 100, 1) }
]
const driftThreshold = ref(5)
const targetWeights = ref<TargetWeight[]>([
{ symbol: 'AAPL', targetPercent: 40 },
{ symbol: 'MSFT', targetPercent: 35 },
{ symbol: 'GOOGL', targetPercent: 25 },
])
const jobResult = ref<JobResult | null>(null)
const simulationColumns: UiGridColumn[] = [
{ field: 'symbol', header: '종목코드', width: 90 },
{ field: 'currentWeight', header: '현재비중', formatter: value => formatPercent((value as number) / 100, 1) },
{ field: 'targetWeight', header: '목표비중', formatter: value => formatPercent((value as number) / 100, 1) },
{ field: 'tradeAction', header: '매매구분', width: 90 },
{ field: 'estimatedShares', header: '예상주문주수', formatter: value => formatQuantity(value as number, 0) },
{ field: 'deltaValue', header: '예상조정금액', formatter: value => formatCurrency(value as number, 'USD') }
]
const totalValue = computed(() => {
return currentPositions.value.reduce((sum, p) => sum + p.marketValue, 0)
})
const totalTargetWeight = computed(() => {
return targetWeights.value.reduce((sum, t) => sum + (t.targetPercent || 0), 0)
})
const isWeightValid = computed(() => {
return Math.abs(totalTargetWeight.value - 100) < 0.01
})
const weightStatusSeverity = computed(() => {
if (isWeightValid.value) return 'success'
if (totalTargetWeight.value > 100) return 'danger'
return 'warning'
})
const weightStatusText = computed(() => {
if (isWeightValid.value) return '✅ 100.0% 정상'
if (totalTargetWeight.value > 100) return `⚠️ ${totalTargetWeight.value.toFixed(1)}% (100% 초과)`
return `⚠️ ${totalTargetWeight.value.toFixed(1)}% (100% 미달)`
})
const simulationItems = computed<SimulationItem[]>(() => {
const total = totalValue.value
return targetWeights.value.map(target => {
const pos = currentPositions.value.find(p => p.symbol === target.symbol)
const currentVal = pos ? pos.marketValue : 0
const currentQty = pos ? pos.quantity : 0
const price = pos ? pos.marketPrice : 150
const currentW = total > 0 ? (currentVal / total) * 100 : 0
const targetW = target.targetPercent || 0
const targetVal = total * (targetW / 100)
const deltaV = targetVal - currentVal
let tradeAction: 'BUY' | 'SELL' | 'HOLD' = 'HOLD'
if (deltaV > 50) tradeAction = 'BUY'
else if (deltaV < -50) tradeAction = 'SELL'
const estimatedShares = price > 0 ? Math.round(Math.abs(deltaV) / price) : 0
return {
symbol: target.symbol,
currentQuantity: currentQty,
marketPrice: price,
currentValue: currentVal,
currentWeight: currentW,
targetWeight: targetW,
targetValue: targetVal,
deltaValue: deltaV,
tradeAction,
estimatedShares
}
})
})
const totalEstimatedTrades = computed(() => {
return simulationItems.value.filter(item => item.tradeAction !== 'HOLD').length
})
const totalRebalanceValue = computed(() => {
return simulationItems.value.reduce((sum, item) => sum + Math.abs(item.deltaValue), 0)
})
const addTarget = () => {
targetWeights.value.push({ symbol: '', targetPercent: 0 })
}
@@ -68,13 +157,30 @@ const removeTarget = (idx: number) => {
targetWeights.value.splice(idx, 1)
}
const nextStep = () => {
if (currentStep.value === 1 && !isWeightValid.value) return
if (currentStep.value < 3) currentStep.value++
}
const prevStep = () => {
if (currentStep.value > 1) currentStep.value--
}
const triggerRebalance = () => {
jobResult.value = {
jobId: `REBAL-${Date.now()}`,
status: 'Queued',
estimatedTradeCount: 3,
estimatedCost: 127.35,
submittedAt: new Date().toLocaleTimeString('ko-KR'),
estimatedTradeCount: totalEstimatedTrades.value,
estimatedCost: totalRebalanceValue.value * 0.0015,
totalRebalanceValue: totalRebalanceValue.value
}
currentStep.value = 3
}
const resetWizard = () => {
jobResult.value = null
currentStep.value = 1
}
const handleRetry = () => {
@@ -84,57 +190,300 @@ const handleRetry = () => {
<template>
<StepWizardPage
title="포트폴리오 리밸런싱 (Portfolio Rebalance Wizard)"
subtitle="목표 비중 및 허용 이탈 임계값을 설정하여 리밸런싱 주문 작업을 안전하게 실행합니다."
title="포트폴리오 리밸런싱 위저드"
subtitle="목표 비중 및 허용 이탈 임계값을 설정하여 리밸런싱 시뮬레이션 및 주문 제출을 안전하게 수행합니다."
:state="screenState"
:evidence="evidence"
:current-step="1"
:current-step="currentStep"
:total-steps="3"
@retry="handleRetry"
>
<!-- Default Slot: Wizard Content -->
<div class="content">
<KsFormSection title="1. 현재 포트폴리오 구성">
<DataGridShell :rows="currentPositions" :columns="positionColumns" empty-message="보유 종목이 없습니다." />
<p class="ks-stack"><strong>포트폴리오 총 평가액:</strong> <span class="ks-financial-number">{{ formatCurrency(totalValue, 'USD') }}</span></p>
</KsFormSection>
<!-- Wizard Actions Header Slot -->
<template #actions>
<KsButton v-if="currentStep > 1 && currentStep < 3" variant="secondary" label="◀ 이전 단계" @click="prevStep" />
<KsButton v-if="currentStep === 1" variant="primary" label="다음 단계: 시뮬레이션 ➔" :disabled="!isWeightValid" @click="nextStep" />
<KsButton v-if="currentStep === 2" variant="primary" label="⚡ 리밸런싱 주문 제출" @click="triggerRebalance" />
<KsButton v-if="currentStep === 3" variant="secondary" label="🔄 신규 리밸런싱 작성" @click="resetWizard" />
</template>
<KsFormSection title="2. 목표 비중 및 임계값 설정">
<KsFormGrid :columns="1" aria-label="리밸런싱 설정">
<KsNumberField v-model="driftThreshold" label="허용 이탈 임계값 %" :min="0" :max="50" :max-fraction-digits="0" />
</KsFormGrid>
<div class="targets ks-stack">
<div v-for="(target, idx) in targetWeights" :key="idx" class="target-row">
<KsTextField v-model="target.symbol" label="종목코드" :input-id="`target-symbol-${idx}`" />
<KsNumberField v-model="target.targetPercent" label="목표 비중 %" :min="0" :max="100" :max-fraction-digits="0" :input-id="`target-percent-${idx}`" />
<KsButton severity="danger" label="삭제" @click="removeTarget(idx)" />
<div class="ks-wizard-content">
<!-- Step 1: Target Weight Definition -->
<div v-if="currentStep === 1" class="wizard-step-pane step1-grid">
<KsFormSection title="1-1. 현재 포트폴리오 보유 현황">
<DataGridShell :rows="currentPositions" :columns="positionColumns" empty-message="보유 종목이 없습니다." height="220px" />
<div class="summary-bar">
<span><strong>총 평가액:</strong> <span class="ks-financial-number">{{ formatCurrency(totalValue, 'USD') }}</span></span>
<span><strong>보유 종목 수:</strong> {{ currentPositions.length }}개</span>
</div>
</div>
</KsFormSection>
<template #actions>
<KsButton severity="secondary" label="종목 추가" @click="addTarget" />
<KsButton severity="primary" label="리밸런싱 실행" @click="triggerRebalance" />
</template>
</KsFormSection>
<KsFormSection title="1-2. 목표 비중 및 이탈 임계값 설정">
<div class="threshold-row">
<KsNumberField v-model="driftThreshold" label="허용 이탈 임계값 %" :min="0" :max="50" :max-fraction-digits="1" />
<div class="weight-total-badge">
<span class="label">목표 비중 합계:</span>
<KsStatusTag :value="weightStatusText" :severity="weightStatusSeverity" />
</div>
</div>
<KsFormSection v-if="jobResult" title="3. 리밸런싱 작업 대기열 등록 완료">
<dl class="ks-stack">
<dt>Job ID</dt><dd class="mono ks-financial-number">{{ jobResult.jobId }}</dd>
<dt>상태</dt><dd><KsStatusTag :value="jobResult.status" severity="info" /></dd>
<dt>예상 거래 건수</dt><dd class="ks-financial-number">{{ formatQuantity(jobResult.estimatedTradeCount, 0) }}</dd>
<dt>예상 비용</dt><dd class="ks-financial-number">{{ formatCurrency(jobResult.estimatedCost, 'USD') }}</dd>
</dl>
</KsFormSection>
<div class="targets-container">
<div v-for="(target, idx) in targetWeights" :key="idx" class="target-card-row">
<KsTextField v-model="target.symbol" label="종목코드" :input-id="`target-symbol-${idx}`" style="width: 130px;" />
<KsNumberField v-model="target.targetPercent" label="목표 비중 %" :min="0" :max="100" :max-fraction-digits="1" :input-id="`target-percent-${idx}`" style="width: 140px;" />
<KsButton variant="danger" label="삭제" :disabled="targetWeights.length <= 1" @click="removeTarget(idx)" />
</div>
<div class="target-actions">
<KsButton variant="secondary" label="➕ 종목 추가" @click="addTarget" />
</div>
</div>
</KsFormSection>
</div>
<!-- Step 2: Trade Simulation Preview -->
<div v-if="currentStep === 2" class="wizard-step-pane">
<KsFormSection title="2-1. 리밸런싱 매매 시뮬레이션 결과">
<DataGridShell :rows="simulationItems" :columns="simulationColumns" empty-message="시뮬레이션 항목이 없습니다." height="220px" />
<div class="summary-bar">
<span><strong>예상 주문 건수:</strong> <span class="ks-financial-number">{{ totalEstimatedTrades }}건</span></span>
<span><strong>예상 리밸런싱 거래 규모:</strong> <span class="ks-financial-number">{{ formatCurrency(totalRebalanceValue, 'USD') }}</span></span>
<span><strong>예상 수수료:</strong> <span class="ks-financial-number">{{ formatCurrency(totalRebalanceValue * 0.0015, 'USD') }}</span></span>
</div>
</KsFormSection>
<KsFormSection title="2-2. 상세 조정 내역 확인">
<div class="simulation-detail-grid">
<div v-for="item in simulationItems" :key="item.symbol" class="sim-item-card">
<div class="sim-item-header">
<span class="symbol">{{ item.symbol }}</span>
<KsStatusTag :value="item.tradeAction === 'BUY' ? '매수 BUY' : item.tradeAction === 'SELL' ? '매도 SELL' : '유지 HOLD'" :severity="item.tradeAction === 'BUY' ? 'success' : item.tradeAction === 'SELL' ? 'danger' : 'info'" />
</div>
<div class="sim-item-body">
<div><span>현재 비중:</span> <strong>{{ formatPercent(item.currentWeight / 100, 1) }}</strong></div>
<div><span>목표 비중:</span> <strong>{{ formatPercent(item.targetWeight / 100, 1) }}</strong></div>
<div><span>예상 수량:</span> <strong>{{ formatQuantity(item.estimatedShares, 0) }} 주</strong></div>
<div><span>예상 금액:</span> <strong>{{ formatCurrency(Math.abs(item.deltaValue), 'USD') }}</strong></div>
</div>
</div>
</div>
</KsFormSection>
</div>
<!-- Step 3: Execution Submitted Result -->
<div v-if="currentStep === 3 && jobResult" class="wizard-step-pane">
<KsFormSection title="3. 리밸런싱 OMS 작업 제출 완료">
<div class="success-banner">
<div class="icon">✅</div>
<div class="text">
<h3>리밸런싱 주문 작업이 대기열에 성공적으로 등록되었습니다.</h3>
<p>OMS 배치 엔진에서 수량과 이탈율을 검증한 후 자동 체결 프로세스를 진행합니다.</p>
</div>
</div>
<dl class="job-result-dl">
<div class="row"><dt>Job ID</dt><dd><code>{{ jobResult.jobId }}</code></dd></div>
<div class="row"><dt>제출 상태</dt><dd><KsStatusTag :value="jobResult.status" severity="info" /></dd></div>
<div class="row"><dt>제출 시각</dt><dd>{{ jobResult.submittedAt }}</dd></div>
<div class="row"><dt>총 매매 건수</dt><dd class="ks-financial-number">{{ formatQuantity(jobResult.estimatedTradeCount, 0) }} 건</dd></div>
<div class="row"><dt>총 거래 규모</dt><dd class="ks-financial-number">{{ formatCurrency(jobResult.totalRebalanceValue, 'USD') }}</dd></div>
</dl>
</KsFormSection>
</div>
</div>
</StepWizardPage>
</template>
<style scoped>
.target-row { display: flex; align-items: end; gap: var(--ks-space-3); }
.target-row > :first-child { flex: 1; }
.mono { font-family: monospace; }
dl.ks-stack { display: grid; grid-template-columns: auto 1fr; gap: var(--ks-space-2) var(--ks-space-4); }
dl.ks-stack dt { font-weight: 600; color: var(--ks-color-text-muted); }
dl.ks-stack dd { margin: 0; }
.ks-wizard-content {
flex: 1;
min-height: 0;
height: 100%;
display: flex;
flex-direction: column;
overflow-y: auto;
gap: var(--ks-space-4);
}
.wizard-step-pane {
display: flex;
flex-direction: column;
gap: var(--ks-space-4);
flex: 1;
min-height: 0;
}
.step1-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--ks-space-4);
align-items: start;
}
@media (max-width: 1100px) {
.step1-grid {
grid-template-columns: 1fr;
}
}
.target-card-row {
display: flex;
align-items: flex-end;
gap: var(--ks-space-2);
}
.summary-bar {
display: flex;
gap: var(--ks-space-4);
padding: var(--ks-space-2) var(--ks-space-3);
background: var(--ks-color-canvas);
border: 1px solid var(--ks-color-border);
border-radius: var(--ks-radius-sm);
font-size: var(--ks-font-body);
}
.threshold-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ks-space-4);
margin-bottom: var(--ks-space-3);
}
.weight-total-badge {
display: flex;
align-items: center;
gap: var(--ks-space-2);
font-size: var(--ks-font-body);
font-weight: 600;
}
.targets-container {
display: flex;
flex-direction: column;
gap: var(--ks-space-2);
}
.target-card-row {
display: flex;
align-items: flex-end;
gap: var(--ks-space-3);
}
.target-card-row > :first-child,
.target-card-row > :nth-child(2) {
width: var(--ks-set-width-md, 260px);
}
.target-actions {
display: flex;
margin-top: var(--ks-space-2);
}
.simulation-detail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: var(--ks-space-3);
}
.sim-item-card {
padding: var(--ks-space-3);
background: var(--ks-color-surface);
border: 1px solid var(--ks-color-border-strong);
border-radius: var(--ks-radius-md);
display: flex;
flex-direction: column;
gap: var(--ks-space-2);
}
.sim-item-header {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 700;
border-bottom: 1px solid var(--ks-color-border);
padding-bottom: 6px;
}
.sim-item-body {
display: flex;
flex-direction: column;
gap: 4px;
font-size: var(--ks-font-caption);
}
.sim-item-body div {
display: flex;
justify-content: space-between;
}
.success-banner {
display: flex;
align-items: center;
gap: var(--ks-space-3);
padding: var(--ks-space-3);
background: var(--ks-color-canvas);
border: 1px solid var(--ks-color-success);
border-radius: var(--ks-radius-md);
margin-bottom: var(--ks-space-3);
}
.success-banner .icon {
font-size: 28px;
}
.success-banner h3 {
margin: 0 0 4px 0;
font-size: var(--ks-font-section);
color: var(--ks-color-success);
}
.success-banner p {
margin: 0;
font-size: var(--ks-font-body);
color: var(--ks-color-text-muted);
}
.job-result-dl {
display: flex;
flex-direction: column;
gap: 8px;
background: var(--ks-color-surface);
padding: var(--ks-space-3);
border: 1px solid var(--ks-color-border);
border-radius: var(--ks-radius-md);
}
.job-result-dl .row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
border-bottom: 1px dashed var(--ks-color-border);
}
.job-result-dl .row:last-child {
border-bottom: none;
}
.job-result-dl dt {
font-weight: 600;
color: var(--ks-color-text-muted);
}
.job-result-dl dd {
margin: 0;
font-weight: 700;
}
.job-result-dl code {
font-family: var(--ks-font-mono, monospace);
background: var(--ks-color-canvas);
padding: 2px 6px;
border-radius: 3px;
border: 1px solid var(--ks-color-border);
}
</style>
frontend/src/features/portfolio/pages/RiskDashboard.vue
+70 -45
View File
@@ -15,38 +15,50 @@
</div>
</template>
<!-- Risk Metrics KPIs -->
<!-- Standardized Risk Metrics KPIs -->
<template v-if="dashboard?.riskMetrics" #kpis>
<div class="metric">
<span class="label">VAR (95%)</span>
<span class="value ks-financial-number">{{ formatCurrency(dashboard.riskMetrics.var95, 'USD') }}</span>
<span class="note ks-financial-number">{{ formatPercent(dashboard.riskMetrics.var95 / dashboard.portfolio.totalValue, 1) }}</span>
</div>
<div class="metric">
<span class="label">Sharpe Ratio</span>
<span class="value ks-financial-number">{{ dashboard.riskMetrics.sharpeRatio.toFixed(2) }}</span>
<span class="note">252일 이동</span>
</div>
<div class="metric">
<span class="label">Sortino Ratio</span>
<span class="value ks-financial-number">{{ dashboard.riskMetrics.sortinoRatio.toFixed(2) }}</span>
<span class="note">하방 리스크 중심</span>
</div>
<div class="metric">
<span class="label">변동성</span>
<span class="value ks-financial-number">{{ formatPercent(dashboard.riskMetrics.volatilityPercent / 100, 1) }}</span>
<span class="note">연환산</span>
</div>
<div class="metric">
<span class="label">상위 5종목 비중</span>
<span class="value ks-financial-number">{{ formatPercent(dashboard.riskMetrics.topFivePercent / 100, 1) }}</span>
<KsStatusTag :value="topFiveLabel" :severity="topFiveSeverity" />
</div>
<div class="metric">
<span class="label">최대 보유 비중</span>
<span class="value ks-financial-number">{{ formatPercent(dashboard.riskMetrics.maxPositionPercent / 100, 1) }}</span>
<span class="note">{{ dashboard.portfolio.positions[0]?.symbol ?? 'N/A' }}</span>
</div>
<KArtsellMetricCard
title="VAR (95%)"
:value="formatCurrency(dashboard.riskMetrics.var95, 'USD')"
:subtext="formatPercent(dashboard.riskMetrics.var95 / dashboard.portfolio.totalValue, 1)"
status="danger"
trend="down"
/>
<KArtsellMetricCard
title="Sharpe Ratio"
:value="dashboard.riskMetrics.sharpeRatio.toFixed(2)"
subtext="252일 이동"
status="success"
trend="up"
/>
<KArtsellMetricCard
title="Sortino Ratio"
:value="dashboard.riskMetrics.sortinoRatio.toFixed(2)"
subtext="하방 리스크 중심"
status="success"
trend="up"
/>
<KArtsellMetricCard
title="변동성"
:value="formatPercent(dashboard.riskMetrics.volatilityPercent / 100, 1)"
subtext="연환산"
status="info"
trend="neutral"
/>
<KArtsellMetricCard
title="상위 5종목 비중"
:value="formatPercent(dashboard.riskMetrics.topFivePercent / 100, 1)"
:subtext="topFiveLabel"
:status="topFiveSeverity === 'danger' ? 'danger' : 'warning'"
trend="neutral"
/>
<KArtsellMetricCard
title="최대 보유 비중"
:value="formatPercent(dashboard.riskMetrics.maxPositionPercent / 100, 1)"
:subtext="dashboard.portfolio.positions[0]?.symbol ?? 'N/A'"
status="info"
trend="neutral"
/>
</template>
<!-- Portfolio Composition -->
@@ -83,9 +95,9 @@
</div>
</template>
<!-- Active Alerts -->
<!-- Active Alerts & Risk Insights (Main Full-Width Workspace) -->
<template v-if="activeAlerts.length > 0 || state === 'READY'" #alerts>
<h2>활성 리스크 알림</h2>
<h2>활성 리스크 알림 및 인사이트</h2>
<div v-if="activeAlerts.length > 0" class="alerts-list">
<div v-for="alert in activeAlerts" :key="alert.id" class="alert">
<div class="alert-header">
@@ -99,22 +111,24 @@
</div>
</div>
<p v-else class="no-alerts">현재 활성 알림이 없습니다 — 포트폴리오가 안전 범위 내에 있습니다.</p>
</template>
<template v-if="dashboard?.riskInsights.length" #metricDefinitions>
<h2>리스크 인사이트</h2>
<ul class="insights-list">
<li v-for="(insight, idx) in dashboard.riskInsights" :key="idx">{{ insight }}</li>
</ul>
<div v-if="dashboard?.riskInsights.length" class="insights-section">
<h3>💡 리스크 인사이트 요약</h3>
<ul class="insights-list">
<li v-for="(insight, idx) in dashboard.riskInsights" :key="idx">{{ insight }}</li>
</ul>
</div>
</template>
</ScorecardDashboardPage>
</template>
<script setup lang="ts">
import { computed, ref, onMounted } from 'vue'
import ScorecardDashboardPage from '../../../shared/ui/screen-types/v2/ScorecardDashboardPage.vue'
import DataGridShell from '../../../shared/ui/DataGridShell.vue'
import { KsStatusTag } from '../../../shared/ui/components'
import { KsStatusTag, KArtsellMetricCard } from '../../../shared/ui/components'
import type { UiGridColumn, UiSeverity } from '../../../shared/ui/adapter/contracts'
import type { StandardScreenState } from '../../../shared/ui/contracts/screenContract'
import { formatCurrency, formatPercent, formatQuantity } from '../../../shared/formatters/financial'
@@ -305,10 +319,6 @@ const runStressTest = async (scenario: string) => {
.score-fill { height: 100%; background: linear-gradient(90deg, var(--ks-color-danger), var(--ks-color-warning), var(--ks-color-success)); }
.score-value { font-weight: 600; white-space: nowrap; }
.metric { display: flex; flex-direction: column; gap: var(--ks-space-1); padding: var(--ks-space-3); background: var(--ks-color-canvas); border-radius: var(--ks-radius-sm); text-align: center; }
.metric .label { font-size: var(--ks-font-caption); color: var(--ks-color-text-muted); font-weight: 500; }
.metric .value { font-size: var(--ks-font-page); font-weight: 600; }
.metric .note { font-size: var(--ks-font-caption); color: var(--ks-color-text-muted); }
.portfolio-summary { display: flex; gap: var(--ks-space-6); margin: 0 0 var(--ks-space-3); padding: var(--ks-space-3); background: var(--ks-color-canvas); border-radius: var(--ks-radius-sm); }
.summary-item { display: flex; flex-direction: column; gap: var(--ks-space-1); }
@@ -334,7 +344,22 @@ const runStressTest = async (scenario: string) => {
.alert-details .message { color: var(--ks-color-text-muted); }
.no-alerts { padding: var(--ks-space-4); text-align: center; color: var(--ks-color-success); font-weight: 500; }
.insights-section {
margin-top: var(--ks-space-4);
padding: var(--ks-space-3);
background: var(--ks-color-surface);
border: 1px solid var(--ks-color-border);
border-radius: var(--ks-radius-sm);
}
.insights-section h3 {
margin: 0 0 var(--ks-space-2) 0;
font-size: var(--ks-font-body);
font-weight: 600;
}
.insights-list { list-style: none; margin: 0; padding: 0; }
.insights-list li { padding: var(--ks-space-2) 0; border-bottom: 1px solid var(--ks-color-border); }
.insights-list li { padding: var(--ks-space-2) 0; border-bottom: 1px solid var(--ks-color-border); font-size: var(--ks-font-body); }
.insights-list li:last-child { border-bottom: 0; }
</style>
frontend/src/features/sell-decision/pages/SellDecisionPage.vue
+73 -24
View File
@@ -1,8 +1,8 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
import { computed, onMounted, ref } from 'vue'
import EditFormPage from '../../../shared/ui/screen-types/v2/EditFormPage.vue'
import QueryStateBoundary from '../../../shared/ui/QueryStateBoundary.vue'
import { KsButton, KsCheckbox, KsFormGrid, KsFormSection, KsNumberField } from '../../../shared/ui/components'
import { KsButton, KsCheckbox, KsFormGrid, KsFormSection, KsNumberField, KsStatusTag } from '../../../shared/ui/components'
import PolicyTracePanel from '../components/PolicyTracePanel.vue'
import { useEvaluateResearchSellPolicy } from '../queries'
import type { ResearchSellPolicyCommand } from '../api'
@@ -26,7 +26,6 @@ const dirty = computed(() => true) // Form always has potential changes until su
const screenState = computed<StandardScreenState>(() => {
if (isBusy.value) return 'PROCESSING'
if (mutation.error.value) return 'ERROR'
if (!mutation.data.value) return 'READY'
return 'READY'
})
@@ -68,8 +67,25 @@ function run() {
function retry() {
if (lastCommand.value) mutation.mutate(lastCommand.value)
else run()
}
function getActionSeverity(action: string): 'success' | 'danger' | 'warning' | 'info' {
if (action === 'SELL' || action === 'FORCE_SELL') return 'danger'
if (action === 'HOLD' || action === 'PASS') return 'success'
if (action === 'REBALANCE') return 'warning'
return 'info'
}
function formatPercent(val: number | undefined): string {
if (val === undefined || val === null) return '0.0%'
return (val * 100).toFixed(1) + '%'
}
onMounted(() => {
run()
})
</script>
<template>
@@ -82,6 +98,11 @@ function retry() {
@submit="run"
@retry="retry"
>
<!-- Page Top Action Bar -->
<template #actions>
<KsButton label="⚡ 매도 정책 평가 실행" variant="primary" :loading="isBusy" @click="run" />
</template>
<!-- Form Input Section -->
<KsFormSection title="연구 입력 벡터">
<KsFormGrid :columns="2" aria-label="연구 입력 벡터">
@@ -98,19 +119,26 @@ function retry() {
:loading="isBusy"
:error="mutation.error.value as Error | null"
:empty="!mutation.data.value"
empty-title="매도 정책 평가 대기 중"
empty-message="좌측 연구 입력 벡터 파라미터를 조정한 후 [⚡ 매도 정책 평가 실행] 버튼을 클릭하세요."
empty-icon="📊"
empty-action-label="⚡ 정책 평가 실행"
@retry="retry"
>
<div v-if="mutation.data.value" class="result-content">
<h3>정책 평가 결과</h3>
<div class="result-header">
<h3>정책 평가 결과</h3>
<KsStatusTag :value="mutation.data.value.action" :severity="getActionSeverity(mutation.data.value.action)" />
</div>
<dl class="ks-stack">
<div class="result-row"><dt>행동</dt><dd>{{ mutation.data.value.action }}</dd></div>
<div class="result-row"><dt>정책</dt><dd>{{ mutation.data.value.policyId }}</dd></div>
<div class="result-row"><dt>사유</dt><dd>{{ mutation.data.value.reasonCode }}</dd></div>
<div class="result-row"><dt>Lot 매도비율</dt><dd>{{ mutation.data.value.sellRatioOfLot }}</dd></div>
<div class="result-row"><dt>매도 후 종목 비중</dt><dd>{{ mutation.data.value.targetSecurityPortfolioWeightAfter }}</dd></div>
<div class="result-row"><dt>재진입 가능</dt><dd>{{ mutation.data.value.reentryEligible }}</dd></div>
<div class="result-row"><dt>결정 계약</dt><dd>{{ mutation.data.value.decisionContractVersion }}</dd></div>
<div class="result-row"><dt>정책 추적</dt><dd>{{ mutation.data.value.policyTrace.length }}단계</dd></div>
<div class="result-row"><dt>권고 행동</dt><dd><KsStatusTag :value="mutation.data.value.action" :severity="getActionSeverity(mutation.data.value.action)" /></dd></div>
<div class="result-row"><dt>적용 정책 ID</dt><dd><code>{{ mutation.data.value.policyId }}</code></dd></div>
<div class="result-row"><dt>판단 사유 코드</dt><dd><code>{{ mutation.data.value.reasonCode }}</code></dd></div>
<div class="result-row"><dt>Lot 매도 비율</dt><dd class="ks-financial-number">{{ formatPercent(mutation.data.value.sellRatioOfLot) }}</dd></div>
<div class="result-row"><dt>매도 후 종목 비중</dt><dd class="ks-financial-number">{{ formatPercent(mutation.data.value.targetSecurityPortfolioWeightAfter) }}</dd></div>
<div class="result-row"><dt>재진입 가능 여부</dt><dd>{{ mutation.data.value.reentryEligible ? '✅ 가능' : '❌ 불가능' }}</dd></div>
<div class="result-row"><dt>결정 계약 버전</dt><dd><code>{{ mutation.data.value.decisionContractVersion }}</code></dd></div>
<div class="result-row"><dt>정책 추적 단계</dt><dd>{{ mutation.data.value.policyTrace.length }}단계 추적 완료</dd></div>
</dl>
<PolicyTracePanel
:entries="mutation.data.value.policyTrace"
@@ -126,20 +154,28 @@ function retry() {
.result-content {
display: flex;
flex-direction: column;
gap: var(--spacing-3);
gap: var(--ks-space-3);
}
.result-content h3 {
.result-header {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--ks-color-border-strong);
padding-bottom: 8px;
}
.result-header h3 {
margin: 0;
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
font-size: var(--ks-font-section);
font-weight: 700;
color: var(--ks-color-text);
}
.ks-stack {
display: flex;
flex-direction: column;
gap: var(--spacing-2);
gap: 4px;
margin: 0;
padding: 0;
}
@@ -147,8 +183,10 @@ function retry() {
.result-row {
display: flex;
justify-content: space-between;
padding: var(--spacing-2) 0;
border-bottom: 1px solid var(--color-border-secondary);
align-items: center;
padding: 6px 0;
border-bottom: 1px dashed var(--ks-color-border);
font-size: var(--ks-font-body);
}
.result-row:last-child {
@@ -156,15 +194,26 @@ function retry() {
}
.result-row dt {
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
font-weight: 600;
color: var(--ks-color-text-muted);
flex-shrink: 0;
}
.result-row dd {
margin: 0;
text-align: right;
color: var(--color-text-secondary);
font-family: monospace;
color: var(--ks-color-text);
font-weight: 600;
}
.result-row code {
font-family: var(--ks-font-mono, monospace);
background: var(--ks-color-canvas);
padding: 2px 6px;
border-radius: 3px;
border: 1px solid var(--ks-color-border);
font-size: 11px;
}
</style>
frontend/src/features/shadow-run/pages/ShadowRunList.vue
+1 -1
View File
@@ -71,7 +71,7 @@ const handleRetry = () => {
:columns="columns"
:loading="shadowRunsQuery.isPending.value"
empty-message="조회된 Shadow Run 검증 내역이 없습니다."
height="calc(100vh - 210px)"
height="100%"
/>
</BatchOperationsPageV2>
</template>
frontend/src/features/system/pages/CommonCodeManagementPage.vue
+494
View File
@@ -0,0 +1,494 @@
<script setup lang="ts">
import { ref, computed, reactive, nextTick } from 'vue'
import SearchListCrudPage from '../../../shared/ui/screen-types/v2/SearchListCrudPage.vue'
import DataGridShell from '../../../shared/ui/DataGridShell.vue'
import {
KsButton,
KsSelect,
KsStatusTag,
KsTextField,
KsFormSection
} from '../../../shared/ui/components'
import type { UiGridColumn, UiSelectOption } from '../../../shared/ui/adapter/contracts'
import type { StandardScreenState } from '../../../shared/ui/contracts/screenContract'
const screenState = ref<StandardScreenState>('READY')
const evidence = reactive({
asOf: new Date().toISOString(),
version: 'v60-SYS-01-Contract',
})
// Search & Filter State
const searchGroupQuery = ref('')
const searchUseYnFilter = ref('ALL')
const useYnOptions: UiSelectOption[] = [
{ label: '전체 상태', value: 'ALL' },
{ label: '사용 (Y)', value: 'Y' },
{ label: '미사용 (N)', value: 'N' },
]
// Mock Group Codes Data
interface GroupCode {
groupCode: string
groupName: string
isSystem: boolean
useYn: 'Y' | 'N'
sortOrder: number
codeCount: number
description: string
_isNew?: boolean
_isModified?: boolean
}
interface CommonCode {
code: string
codeName: string
value1: string
value2: string
sortOrder: number
useYn: 'Y' | 'N'
description: string
_isNew?: boolean
_isModified?: boolean
}
const mockGroupCodes = ref<GroupCode[]>([
{ groupCode: 'SYS_ROLE', groupName: '시스템 사용자 권한', isSystem: true, useYn: 'Y', sortOrder: 1, codeCount: 4, description: '시스템 관리자, 트레이더, 리서처, 데이터관리자 권한 코드' },
{ groupCode: 'ORDER_STATUS', groupName: 'OMS 주문 처리 상태', isSystem: true, useYn: 'Y', sortOrder: 2, codeCount: 5, description: 'OMS 주문 수신, 검증, 체결 완료, 거부, 취소 상태' },
{ groupCode: 'ASSET_TYPE', groupName: '포트폴리오 자산 유형', isSystem: false, useYn: 'Y', sortOrder: 3, codeCount: 3, description: '주식, ETF, 현금성 자산 구분' },
{ groupCode: 'REBALANCE_TYPE', groupName: '리밸런싱 실행 유형', isSystem: false, useYn: 'Y', sortOrder: 4, codeCount: 3, description: '정기 리밸런싱, 이탈 임계값 조절, 손절매 리밸런싱' },
{ groupCode: 'DQ_STATUS', groupName: '데이터 품질 검증 상태', isSystem: true, useYn: 'Y', sortOrder: 5, codeCount: 3, description: 'DQ 통과(PASSED), 격리(QUARANTINED), 대기(PENDING)' },
])
const mockChildCodesMap = reactive<Record<string, CommonCode[]>>({
SYS_ROLE: [
{ code: 'ADMIN', codeName: '시스템 관리자 (Admin)', value1: 'ALL_ACCESS', value2: 'ROLE_ADMIN', sortOrder: 1, useYn: 'Y', description: '모든 시스템 관리 및 실행 권한' },
{ code: 'TRADER', codeName: '트레이더 (Trader)', value1: 'OMS_EXECUTE', value2: 'ROLE_TRADER', sortOrder: 2, useYn: 'Y', description: '리밸런싱 및 주문 제출 권한' },
{ code: 'RESEARCHER', codeName: '퀀트 리서처 (Researcher)', value1: 'MODEL_EVAL', value2: 'ROLE_QUANT', sortOrder: 3, useYn: 'Y', description: '매도 정책 시뮬레이션 권한' },
{ code: 'DATA_ADMIN', codeName: '데이터 관리자 (DataAdmin)', value1: 'INGEST_OPS', value2: 'ROLE_DATA', sortOrder: 4, useYn: 'Y', description: '시장 데이터 수집 배치 관리' },
],
ORDER_STATUS: [
{ code: 'QUEUED', codeName: '대기 중 (Queued)', value1: '10', value2: 'INIT', sortOrder: 1, useYn: 'Y', description: 'OMS 대기열 등록 완료' },
{ code: 'SUBMITTED', codeName: '주문 제출 (Submitted)', value1: '20', value2: 'SENT', sortOrder: 2, useYn: 'Y', description: '증권사 KIS API 제출' },
{ code: 'EXECUTED', codeName: '체결 완료 (Executed)', value1: '30', value2: 'DONE', sortOrder: 3, useYn: 'Y', description: '전량 체결 완료' },
{ code: 'PARTIAL', codeName: '부분 체결 (Partial)', value1: '35', value2: 'PART', sortOrder: 4, useYn: 'Y', description: '일부 잔량 남음' },
{ code: 'REJECTED', codeName: '주문 거부 (Rejected)', value1: '90', value2: 'ERR', sortOrder: 5, useYn: 'Y', description: '이탈 한도 초과 또는 오류' },
],
ASSET_TYPE: [
{ code: 'STOCK', codeName: '개별 주식 (Stock)', value1: 'EQ', value2: 'EQUITY', sortOrder: 1, useYn: 'Y', description: '국내외 개별 상장 주식' },
{ code: 'ETF', codeName: '상장지수펀드 (ETF)', value1: 'FUND', value2: 'INDEX', sortOrder: 2, useYn: 'Y', description: '지수 및 테마 ETF' },
{ code: 'CASH', codeName: '현금성 자산 (Cash)', value1: 'MONEY', value2: 'USD', sortOrder: 3, useYn: 'Y', description: '예수금 및 단기 채권' },
],
REBALANCE_TYPE: [
{ code: 'PERIODIC', codeName: '정기 리밸런싱', value1: 'MONTHLY', value2: 'CALENDAR', sortOrder: 1, useYn: 'Y', description: '월간/분기 정기 주기 스케줄' },
{ code: 'DRIFT_TRIGGER', codeName: '임계값 이탈 리밸런싱', value1: 'BAND', value2: 'THRESHOLD', sortOrder: 2, useYn: 'Y', description: '목표 비중 3% 초과 이탈 시' },
{ code: 'STOP_LOSS', codeName: '손절매 리밸런싱', value1: 'RISK', value2: 'EXIT', sortOrder: 3, useYn: 'Y', description: '리스크 한도 초과 매도' },
],
DQ_STATUS: [
{ code: 'PASSED', codeName: '정상 통과 (Passed)', value1: 'PASS', value2: 'OK', sortOrder: 1, useYn: 'Y', description: '결함률 0% 무결성 유지' },
{ code: 'QUARANTINED', codeName: '격리 조치 (Quarantined)', value1: 'BLOCK', value2: 'HOLD', sortOrder: 2, useYn: 'Y', description: '결함 발견으로 알고리즘 차단' },
{ code: 'PENDING', codeName: '검증 대기 (Pending)', value1: 'WAIT', value2: 'CALC', sortOrder: 3, useYn: 'Y', description: '배치 검증 수행 대기 중' },
]
})
// Selected Master & Detail State
const selectedGroupCode = ref<GroupCode>(mockGroupCodes.value[0])
// Active Search State (Applied on [🔍 조회] click or Enter key)
const activeSearchQuery = ref('')
const activeUseYnFilter = ref('ALL')
const handleGroupSearch = () => {
activeSearchQuery.value = searchGroupQuery.value.trim()
activeUseYnFilter.value = searchUseYnFilter.value
nextTick(() => {
if (filteredGroupCodes.value.length > 0) {
selectedGroupCode.value = filteredGroupCodes.value[0]
}
masterGridRef.value?.redrawRows()
})
}
const filteredGroupCodes = computed(() => {
const query = (activeSearchQuery.value || searchGroupQuery.value).trim().toLowerCase()
const useYn = activeUseYnFilter.value || searchUseYnFilter.value
return mockGroupCodes.value.filter(g => {
const matchesQuery = !query ||
g.groupCode.toLowerCase().includes(query) ||
g.groupName.toLowerCase().includes(query)
const matchesUseYn = useYn === 'ALL' || g.useYn === useYn
return matchesQuery && matchesUseYn
})
})
const currentChildCodes = computed(() => {
if (!selectedGroupCode.value) return []
return mockChildCodesMap[selectedGroupCode.value.groupCode] || []
})
// Grids Columns (Auto-sized based on Math.max(header, content), capped by minWidth & maxWidth)
const groupColumns: UiGridColumn[] = [
{ field: 'groupCode', header: '그룹코드 ID', minWidth: 120, maxWidth: 220, flex: 2, editable: true },
{ field: 'groupName', header: '그룹명', minWidth: 140, maxWidth: 300, flex: 3, editable: true },
{ field: 'useYn', header: '사용여부', minWidth: 70, maxWidth: 100, flex: 1, editable: true },
{ field: 'codeCount', header: '코드 수', minWidth: 65, maxWidth: 110, flex: 1, formatter: v => `${v}개` }
]
const childColumns: UiGridColumn[] = [
{ field: 'code', header: '공통코드 ID', minWidth: 110, maxWidth: 200, flex: 2, editable: true },
{ field: 'codeName', header: '코드명', minWidth: 140, maxWidth: 320, flex: 3, editable: true },
{ field: 'value1', header: '속성값 1', minWidth: 85, maxWidth: 180, flex: 2, editable: true },
{ field: 'value2', header: '속성값 2', minWidth: 85, maxWidth: 180, flex: 2, editable: true },
{ field: 'sortOrder', header: '정렬', minWidth: 60, maxWidth: 90, flex: 1, editable: true },
{ field: 'useYn', header: '사용여부', minWidth: 70, maxWidth: 100, flex: 1, editable: true }
]
const masterGridRef = ref<{ focusRow: (rowIndex: number, colKey?: string) => void; redrawRows: () => void } | null>(null)
const detailGridRef = ref<{ focusRow: (rowIndex: number, colKey?: string) => void; redrawRows: () => void } | null>(null)
const selectGroup = (group: GroupCode) => {
selectedGroupCode.value = group
}
// Top-Row Insertion Pattern (unshift / Index 0)
const addGroupRow = () => {
searchGroupQuery.value = ''
searchUseYnFilter.value = 'ALL'
activeSearchQuery.value = ''
activeUseYnFilter.value = 'ALL'
const newGrp: GroupCode = {
groupCode: `NEW_GRP_${mockGroupCodes.value.length + 1}`,
groupName: '새 그룹명',
isSystem: false,
useYn: 'Y',
sortOrder: 1,
codeCount: 0,
description: '그리드 최상단 신규 등록 그룹',
_isNew: true
}
mockGroupCodes.value.unshift(newGrp)
selectedGroupCode.value = newGrp
nextTick(() => {
masterGridRef.value?.focusRow(0, 'groupCode')
})
}
const removeGroupRow = () => {
if (!selectedGroupCode.value) {
alert('삭제 또는 취소할 그룹코드를 선택하세요.')
return
}
const idx = mockGroupCodes.value.findIndex(g => g.groupCode === selectedGroupCode.value.groupCode)
if (idx === -1) return
const target = mockGroupCodes.value[idx]
if (target._isNew) {
mockGroupCodes.value.splice(idx, 1)
if (mockGroupCodes.value.length > 0) {
selectedGroupCode.value = mockGroupCodes.value[0]
}
masterGridRef.value?.redrawRows()
return
}
if (target.isSystem) {
alert('시스템 SYSTEM 필수 그룹코드는 삭제할 수 없습니다.')
return
}
if (confirm(`선택한 마스터 그룹코드 [${target.groupCode}] (${target.groupName})를 삭제하시겠습니까?`)) {
delete mockChildCodesMap[target.groupCode]
mockGroupCodes.value.splice(idx, 1)
if (mockGroupCodes.value.length > 0) {
selectedGroupCode.value = mockGroupCodes.value[0]
}
masterGridRef.value?.redrawRows()
}
}
const saveMasterBatch = () => {
mockGroupCodes.value = mockGroupCodes.value.map(row => {
const copy = { ...row }
delete copy._isNew
delete copy._isModified
return copy
})
nextTick(() => {
masterGridRef.value?.redrawRows()
alert(`마스터 그룹코드 ${mockGroupCodes.value.length}건이 성공적으로 저장되었습니다.`)
})
}
// Inline Child Code Grid Editing Handlers (Top-Row Insertion)
const addGridRow = () => {
const groupCodeKey = selectedGroupCode.value.groupCode
let list = mockChildCodesMap[groupCodeKey]
if (!list) {
list = []
mockChildCodesMap[groupCodeKey] = list
}
const newRow: CommonCode = {
code: `NEW_CODE_${list.length + 1}`,
codeName: '새 코드명',
value1: '',
value2: '',
sortOrder: 1,
useYn: 'Y',
description: '그리드 최상단 신규 등록 코드',
_isNew: true
}
list.unshift(newRow)
selectedGroupCode.value.codeCount = list.length
nextTick(() => {
detailGridRef.value?.focusRow(0, 'code')
})
}
const removeGridRow = () => {
const groupCodeKey = selectedGroupCode.value.groupCode
const list = mockChildCodesMap[groupCodeKey] || []
if (list.length === 0) {
alert('삭제할 세부 코드가 없습니다.')
return
}
const target = list[0]
if (target._isNew) {
list.shift()
selectedGroupCode.value.codeCount = list.length
detailGridRef.value?.redrawRows()
return
}
if (confirm(`[${groupCodeKey}] 그룹의 세부 코드 [${target.code}] (${target.codeName})를 삭제하시겠습니까?`)) {
list.shift()
selectedGroupCode.value.codeCount = list.length
detailGridRef.value?.redrawRows()
}
}
const saveGridBatch = () => {
if (!selectedGroupCode.value) return
const groupCodeKey = selectedGroupCode.value.groupCode
const list = mockChildCodesMap[groupCodeKey] || []
// Save both master row changes and detail child code rows cleanly
mockGroupCodes.value.forEach(row => {
delete row._isNew
delete row._isModified
})
list.forEach(row => {
delete row._isNew
delete row._isModified
})
selectedGroupCode.value.codeCount = list.length
masterGridRef.value?.redrawRows()
detailGridRef.value?.redrawRows()
alert(`[${groupCodeKey}] 그룹 세부 공통코드 ${list.length}건 및 마스터 코드 변경사항이 성공적으로 저장되었습니다.`)
}
const handleClosePage = () => {
if (confirm('현재 화면을 닫고 메인 워크스페이스로 이동하시겠습니까?')) {
window.history.back()
}
}
const handleRetry = () => {
screenState.value = 'READY'
}
</script>
<template>
<SearchListCrudPage
title="시스템 공통코드 관리 (전면 그리드 인라인 편집)"
subtitle="마스터 그룹코드와 세부 공통코드 모두 그리드 셀 직접 편집 및 행 추가/일괄 저장 방식으로 신속하게 관리합니다."
:state="screenState"
:evidence="evidence"
:initial-ratio="50"
storage-key="ks_sys_common_code_splitter_v50"
@retry="handleRetry"
>
<!-- Dedicated KBX Page Command Bar Slot (Right-aligned, with Close button) -->
<template #commandBar>
<KsButton label="🔍 조회" variant="primary" @click="handleGroupSearch" />
<KsButton label="💾 저장" variant="primary" @click="saveGridBatch" />
<KsButton label="❌ 닫기" variant="secondary" @click="handleClosePage" />
</template>
<!-- Page Level Actions Header Slot -->
<template #actions>
<KsButton label="📤 엑셀 다운로드" variant="secondary" />
</template>
<!-- Master Content Area (Left: Group Code Grid Inline Editor & Search Filters bound together) -->
<div class="ks-master-pane">
<KsFormSection title="1. 마스터 그룹코드 그리드 (Inline Editor)">
<template #actions>
<KsButton label="➕ 그룹 행 추가" variant="secondary" @click="addGroupRow" />
<KsButton label="🗑️ 그룹 행 삭제" variant="danger" @click="removeGroupRow" />
<KsButton label="💾 그룹 일괄 저장" variant="secondary" @click="saveMasterBatch" />
</template>
<div class="ks-filter-bar">
<KsTextField
v-model="searchGroupQuery"
label="그룹코드 검색"
placeholder="그룹코드 ID 또는 그룹명..."
class="ks-set-search"
@keyup.enter="handleGroupSearch"
/>
<KsSelect
v-model="searchUseYnFilter"
label="사용 여부"
:options="useYnOptions"
class="ks-set-select"
/>
</div>
<DataGridShell
ref="masterGridRef"
:rows="filteredGroupCodes"
:columns="groupColumns"
empty-message="조회 조건에 해당하는 그룹코드가 없습니다."
height="100%"
@row-selected="selectGroup"
/>
<div class="group-select-bar">
<span>선택된 그룹: <strong>[{{ selectedGroupCode.groupCode }}] {{ selectedGroupCode.groupName }}</strong></span>
<KsStatusTag :value="selectedGroupCode.isSystem ? '시스템 SYSTEM' : '일반 USER'" :severity="selectedGroupCode.isSystem ? 'warning' : 'info'" />
</div>
</KsFormSection>
</div>
<!-- Detail Pane (Right: Inline Editable Child Code Grid Workstation) -->
<template #detail>
<div class="ks-detail-pane">
<!-- Inline Child Code Grid Section -->
<KsFormSection
:title="`2. [${selectedGroupCode.groupCode}] 세부 공통코드 그리드 (Inline Editor)`"
description="셀을 더블클릭하여 즉시 수정 후 상단 [💾 세부 코드 일괄 저장] 버튼을 누르세요."
>
<template #actions>
<KsButton label="➕ 행 추가" variant="secondary" @click="addGridRow" />
<KsButton label="🗑️ 행 삭제" variant="danger" @click="removeGridRow" />
<KsButton label="💾 세부 코드 일괄 저장" variant="primary" @click="saveGridBatch" />
</template>
<DataGridShell
ref="detailGridRef"
:rows="currentChildCodes"
:columns="childColumns"
empty-message="그룹코드에 속한 세부 코드가 없습니다. ➕ 행 추가로 등록하세요."
height="100%"
/>
</KsFormSection>
</div>
</template>
</SearchListCrudPage>
</template>
<style scoped>
.ks-master-pane,
.ks-detail-pane {
display: flex;
flex-direction: column;
gap: var(--ks-space-2);
height: 100%;
flex: 1;
min-height: 0;
}
.ks-filter-bar {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
gap: var(--ks-space-3);
padding: 6px 10px;
background: var(--ks-color-surface);
border: 1px solid var(--ks-color-border);
border-radius: var(--ks-radius-sm);
margin-bottom: 6px;
flex-shrink: 0;
box-sizing: border-box;
}
.ks-filter-bar :deep(.ks-text-field),
.ks-filter-bar :deep(.ks-select) {
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
margin-bottom: 0;
}
.ks-filter-bar :deep(.ks-text-field__label),
.ks-filter-bar :deep(.ks-select__label) {
margin-bottom: 0;
white-space: nowrap;
font-size: 12px;
font-weight: 600;
flex-shrink: 0;
}
.ks-filter-bar :deep(.ks-text-field__container),
.ks-filter-bar :deep(.ks-select__container) {
flex: 1;
}
.ks-set-search {
flex: 2;
min-width: 150px;
}
.ks-set-select {
flex: 1;
min-width: 110px;
}
.ks-search-btn {
margin-left: auto;
flex-shrink: 0;
}
.group-select-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 10px;
background: var(--ks-color-canvas);
border: 1px solid var(--ks-color-border);
border-radius: var(--ks-radius-sm);
font-size: var(--ks-font-body);
margin-top: 4px;
flex-shrink: 0;
}
</style>
frontend/src/features/ui-standard/pages/UiStandardPage.vue
+273 -35
View File
@@ -1,29 +1,65 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
import { computed, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { SearchListCrudPage } from '@/shared/ui/screen-types'
import { screenTemplateCatalogue, type ScreenTemplateId } from '@/shared/ui/screen-types/catalogue'
import { KsButton, KsDataGrid, KsSelect, KsStatusTag, KsTextField, KsNumberField, KsDateField, KsCheckbox, KsFormGrid, KsFormSection, KsFormSpan, KsValidationSummary } from '@/shared/ui/components'
import type { UiGridColumn, UiSelectOption } from '@/shared/ui/adapter/contracts'
import { useUiAdapter } from '@/shared/ui/adapter/useUiAdapter'
import SearchListCrudPage from '../../../shared/ui/screen-types/v2/SearchListCrudPage.vue'
import DataGridShell from '../../../shared/ui/DataGridShell.vue'
import { screenTemplateCatalogue, type ScreenTemplateId } from '../../../shared/ui/screen-types/catalogue'
import {
KsButton,
KsSelect,
KsStatusTag,
KsTextField,
KsNumberField,
KsDateField,
KsCheckbox,
KsFormGrid,
KsFormSection,
KsFormSpan,
KsValidationSummary,
KArtsellMetricCard
} from '../../../shared/ui/components'
import type { UiGridColumn, UiSelectOption } from '../../../shared/ui/adapter/contracts'
import { useUiAdapter } from '../../../shared/ui/adapter/useUiAdapter'
import type { StandardScreenState } from '../../../shared/ui/contracts/screenContract'
const adapter = useUiAdapter()
const router = useRouter()
const screenState = ref<StandardScreenState>('READY')
const evidence = reactive({
asOf: new Date().toISOString(),
version: 'v60-STD-Contract',
})
const query = ref('')
const templateFilter = ref<unknown>('ALL')
type ScreenCatalogueRow = { screenId: string; name: string; templateId: ScreenTemplateId; templateName: string; path: string }
const selectedScreenId = ref<unknown>(null)
const demo = ref({ name: '', amount: null as number | null, date: null as Date | null, acknowledged: false })
const demo = ref<{ name: string; amount: number | null; date: string | null; acknowledged: boolean }>({
name: '홍길동',
amount: 1500000,
date: new Date().toISOString().split('T')[0],
acknowledged: true
})
const demoReadonly = ref(false)
const submitted = ref(false)
const demoErrors = computed(() => submitted.value ? [
...(demo.value.name.trim() ? [] : [{ field: 'name', message: '이름을 입력하세요.' }]),
...(demo.value.amount !== null && demo.value.amount > 0 ? [] : [{ field: 'amount', message: '0보다 큰 금액을 입력하세요.' }]),
...(demo.value.acknowledged ? [] : [{ field: 'acknowledged', message: '확인 항목에 동의하세요.' }])
] : [])
function submitDemo(): void { submitted.value = true }
function resetDemo(): void { demo.value = { name: '', amount: null, date: null, acknowledged: false }; submitted.value = false }
const templateOptions: UiSelectOption[] = [{ label: '전체 화면 유형', value: 'ALL' }, ...screenTemplateCatalogue.map(template => ({ label: `${template.id} · ${template.name}`, value: template.id }))]
const templateOptions: UiSelectOption[] = [
{ label: '전체 화면 유형', value: 'ALL' },
...screenTemplateCatalogue.map(template => ({ label: `${template.id} · ${template.name}`, value: template.id }))
]
const rows = computed<ScreenCatalogueRow[]>(() => router.getRoutes()
.map(route => {
const screenId = route.meta.screenId
@@ -37,40 +73,242 @@ const rows = computed<ScreenCatalogueRow[]>(() => router.getRoutes()
.filter(row => templateFilter.value === 'ALL' || row.templateId === templateFilter.value)
.filter(row => !query.value || `${row.screenId} ${row.name} ${row.templateId} ${row.templateName}`.toLowerCase().includes(query.value.toLowerCase()))
)
const screenOptions = computed<UiSelectOption[]>(() => rows.value.map(row => ({ label: `${row.screenId} · ${row.name}`, value: row.screenId })))
const selectedScreen = computed(() => rows.value.find(row => row.screenId === selectedScreenId.value) ?? null)
const columns: UiGridColumn[] = [{ field: 'screenId', header: '화면 ID', width: 130 }, { field: 'name', header: '기능 화면', minWidth: 180 }, { field: 'templateId', header: '유형', width: 90 }, { field: 'templateName', header: '화면 유형', minWidth: 180 }]
const columns: UiGridColumn[] = [
{ field: 'screenId', header: '화면 ID', width: 130, flex: 1 },
{ field: 'name', header: '기능 화면명', minWidth: 180, flex: 2 },
{ field: 'templateId', header: '유형 ID', width: 100, flex: 1 },
{ field: 'templateName', header: '화면 유형 명칭', minWidth: 180, flex: 2 }
]
function openSelectedScreen(): void { if (selectedScreen.value) void router.push(selectedScreen.value.path) }
function handleRetry(): void { screenState.value = 'READY' }
</script>
<template>
<SearchListCrudPage title="표준 UI 패턴" subtitle="화면 유형을 선택하고, 실제 화면 ID를 선택해 기능 화면을 엽니다." state="READY" :evidence="{ asOf: '2026-08-02', version: 'UI-CONTRACT-4.0' }">
<template #actions><KsButton label="선택 화면 열기" :disabled="!selectedScreen" @click="openSelectedScreen" /></template>
<template #summary><div class="ks-card summary"><strong>{{ screenTemplateCatalogue.length }}</strong><span>화면 타입</span></div><div class="ks-card summary"><strong>{{ rows.length }}</strong><span>연결된 기능 화면</span></div><div class="ks-card summary"><KsStatusTag :value="adapter.descriptor.id" severity="info" /><span>{{ adapter.descriptor.vendor }}</span></div><div class="ks-card summary"><KsStatusTag value="자동주문 OFF" severity="warning" /><span>고정 경계</span></div></template>
<template #filters><div class="filters"><KsTextField v-model="query" label="화면 검색" placeholder="화면 ID, 기능명 또는 화면 유형" /><KsSelect v-model="templateFilter" label="화면 유형" :options="templateOptions" /><KsSelect v-model="selectedScreenId" label="열 화면" placeholder="화면 ID를 선택하세요" :options="screenOptions" /></div></template>
<KsDataGrid :rows="rows" :columns="columns" height="25rem" row-selection="none" />
<section class="ks-card component-preview" aria-labelledby="component-preview-title">
<div><h2 id="component-preview-title">컴포넌트 동작 프리뷰</h2><p>공유 UI 포트를 실제 상태로 확인하는 내부 전용 카탈로그입니다.</p></div>
<div class="preview-grid">
<div><h3>Actions</h3><KsButton label="기본 버튼" severity="secondary" /><KsButton label="주의 상태" severity="warning" /></div>
<div><h3>Status</h3><div class="status-row"><KsStatusTag value="READY" severity="success" /><KsStatusTag value="REVIEW" severity="warning" /><KsStatusTag value="BLOCKED" severity="danger" /></div></div>
<div><h3>Inputs</h3><KsTextField label="텍스트 필드" model-value="샘플 값" /><KsSelect label="선택 필드" model-value="READY" :options="[{ label: '준비', value: 'READY' }, { label: '검토', value: 'REVIEW' }]" /></div>
<SearchListCrudPage
title="표준 UI 패턴 및 카탈로그 콘솔"
subtitle="KBX v16.0 헌법 표준 UI 공통 컴포넌트, 표준 화면 레시피, 디자인 시스템 토큰을 검증합니다."
:state="screenState"
:evidence="evidence"
@retry="handleRetry"
>
<template #actions>
<KsButton
label="🚀 선택 화면 열기"
variant="primary"
:disabled="!selectedScreen"
@click="openSelectedScreen"
/>
</template>
<template #summary>
<div class="metrics-row">
<KArtsellMetricCard
title="등록 화면 레시피"
:value="`${screenTemplateCatalogue.length} 개`"
status-text="표준 스펙"
status-type="up"
/>
<KArtsellMetricCard
title="연결된 기능 화면"
:value="`${rows.length} 개`"
status-text="정상 라우팅"
status-type="up"
/>
<KArtsellMetricCard
title="UI 어댑터 벤더"
:value="adapter.descriptor.vendor"
status-text="v4.0 샌드박스"
status-type="flat"
/>
</div>
</section>
<section class="ks-card component-preview" aria-labelledby="form-template-title">
<div><h2 id="form-template-title">입력 유형 기능 테스트</h2><p>서버 요청 없이 shared UI의 입력·검증·읽기전용 조합을 확인합니다.</p></div>
<KsValidationSummary :errors="demoErrors" />
<KsFormSection title="기본 입력" description="필수 항목과 유효성 상태를 조작할 수 있습니다.">
<template #actions><KsButton :label="demoReadonly ? '편집 허용' : '읽기 전용'" severity="secondary" @click="demoReadonly = !demoReadonly" /></template>
<KsFormGrid aria-label="기능 테스트 입력">
<KsTextField v-model="demo.name" label="이름" :disabled="demoReadonly" :error="submitted && !demo.name.trim() ? '필수 입력입니다.' : undefined" />
<KsNumberField v-model="demo.amount" label="금액" :disabled="demoReadonly" :error="submitted && (!demo.amount || demo.amount <= 0) ? '0보다 커야 합니다.' : undefined" />
<KsDateField v-model="demo.date" label="기준일" :disabled="demoReadonly" />
<KsCheckbox v-model="demo.acknowledged" label="검증 조건을 확인했습니다" :disabled="demoReadonly" />
<KsFormSpan span="full"><div class="ks-inline"><KsButton label="검증 실행" :disabled="demoReadonly" @click="submitDemo" /><KsButton label="초기화" severity="secondary" @click="resetDemo" /></div></KsFormSpan>
</template>
<template #filters>
<KsTextField
v-model="query"
label="화면 검색"
placeholder="화면 ID, 기능명 또는 유형"
class="ks-set-md"
/>
<KsSelect
v-model="templateFilter"
label="화면 유형"
:options="templateOptions"
class="ks-set-md"
/>
<KsSelect
v-model="selectedScreenId"
label="이동할 화면"
placeholder="화면 ID를 선택하세요"
:options="screenOptions"
class="ks-set-md"
/>
</template>
<div class="ks-standard-content">
<KsFormSection title="1. 라우트 연결 화면 카탈로그">
<DataGridShell
:rows="rows"
:columns="columns"
empty-message="검색 조건에 해당하는 표준 화면 카탈로그가 없습니다."
height="220px"
/>
</KsFormSection>
<KsFormSection title="2. 공통 UI 컴포넌트 프리뷰">
<div class="preview-grid">
<div class="preview-card">
<h3>버튼 유형 (KsButton Variants)</h3>
<div class="btn-group">
<KsButton label="주요 처리 (Primary)" variant="primary" />
<KsButton label="보조 작업 (Secondary)" variant="secondary" />
<KsButton label="위험/삭제 (Danger)" variant="danger" />
</div>
</div>
<div class="preview-card">
<h3>상태 뱃지 (KsStatusTag Severities)</h3>
<div class="status-row">
<KsStatusTag value="정상 PASSED" severity="success" />
<KsStatusTag value="검토 REVIEW" severity="warning" />
<KsStatusTag value="격리 QUARANTINED" severity="danger" />
<KsStatusTag value="대기 QUEUED" severity="info" />
</div>
</div>
<div class="preview-card">
<h3>폼 컨트롤 (KsTextField & KsSelect)</h3>
<div class="input-stack">
<KsTextField label="텍스트 필드" model-value="K-ArtSell Aegis" />
<KsSelect label="선택 필드" model-value="READY" :options="[{ label: '준비 READY', value: 'READY' }, { label: '검토 REVIEW', value: 'REVIEW' }]" />
</div>
</div>
</div>
</KsFormSection>
<KsFormSection title="3. 폼 입력 및 검증 테스트">
<template #actions>
<KsButton
:label="demoReadonly ? '🔓 편집 허용' : '🔒 읽기 전용 전환'"
variant="secondary"
@click="demoReadonly = !demoReadonly"
/>
</template>
<KsValidationSummary v-if="demoErrors.length" :errors="demoErrors" />
<KsFormGrid :columns="2" aria-label="기능 테스트 입력">
<KsTextField v-model="demo.name" label="담당자 이름" :disabled="demoReadonly" :error="submitted && !demo.name.trim() ? '필수 입력입니다.' : undefined" />
<KsNumberField v-model="demo.amount" label="설정 금액 ($)" :disabled="demoReadonly" :error="submitted && (!demo.amount || demo.amount <= 0) ? '0보다 커야 합니다.' : undefined" />
<KsDateField v-model="demo.date" label="평가 기준일" type="range" :disabled="demoReadonly" />
<KsCheckbox v-model="demo.acknowledged" label="KBX 거버넌스 헌법 준수 동의" :disabled="demoReadonly" />
<KsFormSpan span="full">
<div class="ks-inline">
<KsButton label="⚡ 폼 검증 실행" variant="primary" :disabled="demoReadonly" @click="submitDemo" />
<KsButton label="🔄 초기화" variant="secondary" @click="resetDemo" />
</div>
</KsFormSpan>
</KsFormGrid>
</KsFormSection>
</section>
<template #detail><div class="ks-card detail"><h2>선택한 기능 화면</h2><template v-if="selectedScreen"><p><strong>{{ selectedScreen.screenId }}</strong> · {{ selectedScreen.name }}</p><p>{{ selectedScreen.templateId }} · {{ selectedScreen.templateName }}</p><p><code>{{ selectedScreen.path }}</code></p><KsButton label="선택 화면 열기" @click="openSelectedScreen" /></template><p v-else>목록에서 화면 ID를 선택한 뒤, “선택 화면 열기”를 누르세요.</p></div></template>
</div>
<template #detail>
<div class="ks-card detail-card">
<h2>선택한 기능 화면 상세</h2>
<template v-if="selectedScreen">
<p><strong>화면 ID:</strong> <code>{{ selectedScreen.screenId }}</code></p>
<p><strong>화면명:</strong> {{ selectedScreen.name }}</p>
<p><strong>유형:</strong> {{ selectedScreen.templateId }} · {{ selectedScreen.templateName }}</p>
<p><strong>경로:</strong> <code>{{ selectedScreen.path }}</code></p>
<KsButton label="🚀 화면 바로가기" variant="primary" @click="openSelectedScreen" />
</template>
<p v-else class="ks-muted">목록에서 화면 ID를 선택한 뒤, “선택 화면 열기”를 누르세요.</p>
</div>
</template>
</SearchListCrudPage>
</template>
<style scoped>.filters{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--ks-space-3)}.summary,.detail,.component-preview{padding:var(--ks-space-4)}.summary{display:grid;gap:var(--ks-space-1)}.summary strong{font-size:1.5rem}.detail h2,.component-preview h2{margin-top:0;font-size:var(--ks-font-section)}.preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ks-space-4)}.preview-grid>div{display:grid;align-content:start;gap:var(--ks-space-2);padding:var(--ks-space-3);border:1px solid var(--ks-color-neutral-200);border-radius:var(--ks-radius-sm)}.preview-grid h3{margin:0;font-size:var(--ks-font-caption)}.status-row{display:flex;flex-wrap:wrap;gap:var(--ks-space-2)}@media(max-width:700px){.filters,.preview-grid{grid-template-columns:1fr}}</style>
<style scoped>
.metrics-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--ks-space-3);
margin-bottom: var(--ks-space-2);
}
.ks-standard-content {
display: flex;
flex-direction: column;
gap: var(--ks-space-4);
flex: 1;
min-height: 0;
overflow-y: auto;
}
.preview-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--ks-space-3);
}
.preview-card {
padding: var(--ks-space-3);
background: var(--ks-color-canvas);
border: 1px solid var(--ks-color-border);
border-radius: var(--ks-radius-md);
display: flex;
flex-direction: column;
gap: var(--ks-space-2);
}
.preview-card h3 {
margin: 0;
font-size: var(--ks-font-caption);
font-weight: 700;
color: var(--ks-color-text-muted);
}
.btn-group {
display: flex;
flex-wrap: wrap;
gap: var(--ks-space-2);
}
.status-row {
display: flex;
flex-wrap: wrap;
gap: var(--ks-space-2);
align-items: center;
}
.input-stack {
display: flex;
flex-direction: column;
gap: var(--ks-space-2);
}
.detail-card {
padding: var(--ks-space-4);
display: flex;
flex-direction: column;
gap: var(--ks-space-2);
}
.detail-card h2 {
margin: 0;
font-size: var(--ks-font-section);
font-weight: 700;
}
.detail-card code {
font-family: var(--ks-font-mono, monospace);
background: var(--ks-color-canvas);
padding: 2px 6px;
border-radius: 3px;
border: 1px solid var(--ks-color-border);
}
</style>
frontend/src/features/wbs/pages/WbsWorkspacePage.vue
+1 -1
View File
@@ -21,4 +21,4 @@ const items: WbsItem[] = [
</div>
</section>
</template>
<style scoped>.page{display:grid;gap:var(--ks-space-5)}.page-header{display:flex;justify-content:space-between;gap:var(--ks-space-4);align-items:start}.eyebrow{font-size:var(--ks-font-caption);color:var(--ks-color-neutral-600);letter-spacing:.08em}.page-header h1{margin:.25rem 0}.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ks-space-3)}.summary-grid .ks-card{display:grid;gap:.25rem;padding:var(--ks-space-4)}.summary-grid strong{font-size:1.35rem}.summary-grid span{color:var(--ks-color-neutral-600)}.workspace{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(18rem,.75fr);gap:var(--ks-space-4)}.list,.detail{padding:var(--ks-space-4)}.list h2,.detail h2{margin-top:0}.wbs-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--ks-space-3);width:100%;padding:var(--ks-space-3);border:0;border-top:1px solid var(--ks-color-neutral-200);background:var(--ks-color-surface);text-align:left;cursor:pointer}.wbs-row span{display:grid;gap:.25rem}.wbs-row b{font-size:var(--ks-font-caption);color:var(--ks-color-primary-700)}.wbs-row small{color:var(--ks-color-neutral-600)}.wbs-row.selected{background:var(--ks-color-neutral-100)}.warning{padding:var(--ks-space-3);border-left:3px solid var(--ks-color-warning);background:var(--ks-color-neutral-100)}.detail dl{display:grid;grid-template-columns:auto 1fr;gap:var(--ks-space-2);font-size:var(--ks-font-caption)}.detail dt{font-weight:700}.detail dd{margin:0}@media(max-width:800px){.workspace,.summary-grid{grid-template-columns:1fr}.page-header{flex-direction:column}.wbs-row{grid-template-columns:1fr auto}}</style>
<style scoped>.page{display:grid;gap:var(--ks-space-5)}.page-header{display:flex;justify-content:space-between;gap:var(--ks-space-4);align-items:start}.eyebrow{font-size:var(--ks-font-caption);color:var(--ks-color-neutral-600);letter-spacing:.08em}.page-header h1{margin:.25rem 0}.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ks-space-3)}.summary-grid .ks-card{display:grid;gap:.25rem;padding:var(--ks-space-4)}.summary-grid strong{font-size:1.35rem}.summary-grid span{color:var(--ks-color-neutral-600)}.workspace{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(18rem,.75fr);gap:var(--ks-space-4);flex:1;min-height:0;overflow-y:auto}.list,.detail{padding:var(--ks-space-4)}.list h2,.detail h2{margin-top:0}.wbs-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--ks-space-3);width:100%;padding:var(--ks-space-3);border:0;border-top:1px solid var(--ks-color-neutral-200);background:var(--ks-color-surface);text-align:left;cursor:pointer}.wbs-row span{display:grid;gap:.25rem}.wbs-row b{font-size:var(--ks-font-caption);color:var(--ks-color-primary-700)}.wbs-row small{color:var(--ks-color-neutral-600)}.wbs-row.selected{background:var(--ks-color-neutral-100)}.warning{padding:var(--ks-space-3);border-left:3px solid var(--ks-color-warning);background:var(--ks-color-neutral-100)}.detail dl{display:grid;grid-template-columns:auto 1fr;gap:var(--ks-space-2);font-size:var(--ks-font-caption)}.detail dt{font-weight:700}.detail dd{margin:0}@media(max-width:800px){.workspace,.summary-grid{grid-template-columns:1fr}.page-header{flex-direction:column}.wbs-row{grid-template-columns:1fr auto}}</style>
frontend/src/shared/ui/screen-types/v2/BatchOperationsPageV2.vue
+2 -1
View File
@@ -1,3 +1,4 @@
<script setup lang="ts">import { computed } from 'vue'; import PageLayout from '../../layouts/PageLayout.vue'; import StandardScreenBoundary from './StandardScreenBoundary.vue'; import type { StandardScreenProps } from '../../contracts/screenContract'; const props=defineProps<StandardScreenProps>(); const contentBlocked = computed(() => ['LOADING','ERROR','UNAUTHORIZED','FORBIDDEN','CONFLICT','EXPIRED','READONLY','PROCESSING'].includes(props.state ?? 'READY')); defineEmits<{retry:[]}>()</script>
<template><PageLayout :title="props.title" :subtitle="props.subtitle" :status="props.state" :as-of="props.evidence?.asOf" :version="props.evidence?.version"><template v-if="$slots.actions" #actions><slot name="actions"/></template><template v-if="$slots.runSummary" #summary><slot name="runSummary"/></template><template v-if="$slots.filters" #filters><slot name="filters"/></template><StandardScreenBoundary :state="props.state" :warning="props.warning" @retry="$emit('retry')"><section v-if="!contentBlocked" class="ks-stack ks-batch-page-section"><div v-if="$slots.timeline" class="ks-card ks-section"><slot name="timeline"/></div><div v-if="$slots.records" class="ks-card ks-section"><slot name="records"/></div><div v-if="$slots.reprocess" class="ks-card ks-section"><slot name="reprocess"/></div><slot /></section></StandardScreenBoundary><template v-if="$slots.runbook" #aside><slot name="runbook"/></template><template v-if="$slots.footer" #footer><slot name="footer"/></template></PageLayout></template>
<style scoped>.ks-section{padding:var(--ks-space-4)}.ks-batch-page-section{display:flex;flex-direction:column;flex:1;min-height:0;height:100%}</style>
<style scoped>.ks-section{padding:var(--ks-space-4);display:flex;flex-direction:column;min-height:0;}.ks-section-records{flex:1;min-height:350px;}.ks-batch-page-section{display:flex;flex-direction:column;flex:1;min-height:0;height:100%;overflow-y:auto;}</style>
frontend/src/shared/ui/screen-types/v2/SearchListCrudPage.vue
+5 -2
View File
@@ -11,10 +11,13 @@ defineEmits<{ retry: [] }>()
<template>
<PageLayout :title="props.title" :subtitle="props.subtitle" :status="props.state" :as-of="props.evidence?.asOf" :version="props.evidence?.version">
<template #actions><slot name="actions" /></template>
<template #commandBar><slot name="commandBar" /></template>
<template #summary><slot name="summary" /></template>
<template #filters><slot name="filters" /></template>
<StandardScreenBoundary :state="props.state" :warning="props.warning" :stale-at="props.evidence?.asOf" @retry="$emit('retry')">
<CrudWorkspaceLayout>
<StandardScreenBoundary style="height: 100%; min-height: 0; display: flex; flex-direction: column; flex: 1;" :state="props.state" :warning="props.warning" :stale-at="props.evidence?.asOf" @retry="$emit('retry')">
<CrudWorkspaceLayout :initial-ratio="props.initialRatio ?? 50" :storage-key="props.storageKey ?? 'ks_crud_splitter_ratio_50'">
<slot />
<template v-if="$slots.detail" #aside><slot name="detail" /></template>
</CrudWorkspaceLayout>
frontend/src/shared/ui/screen-types/v2/StepWizardPage.vue
+2 -1
View File
@@ -1,3 +1,4 @@
<script setup lang="ts">import { computed } from 'vue'; import PageLayout from '../../layouts/PageLayout.vue'; import StandardScreenBoundary from './StandardScreenBoundary.vue'; import type { StandardScreenProps } from '../../contracts/screenContract'; const props=defineProps<StandardScreenProps & {currentStep:number;totalSteps:number}>(); const actionsBlocked = computed(() => ['LOADING','ERROR','UNAUTHORIZED','FORBIDDEN','CONFLICT','EXPIRED','READONLY','PROCESSING'].includes(props.state ?? 'READY')); defineEmits<{previous:[];next:[];finish:[];retry:[]}>()</script>
<template><PageLayout :title="props.title" :subtitle="props.subtitle" :status="props.state" :as-of="props.evidence?.asOf" :version="props.evidence?.version"><template #summary><div class="ks-card ks-wizard-progress" role="status">단계 {{ currentStep }} / {{ totalSteps }}<progress :value="currentStep" :max="totalSteps"/></div></template><StandardScreenBoundary :state="props.state" :warning="props.warning" @retry="$emit('retry')"><slot/></StandardScreenBoundary><template v-if="!actionsBlocked" #footer><slot name="footer"><button type="button" :disabled="currentStep<=1" @click="$emit('previous')">이전</button><button v-if="currentStep<totalSteps" type="button" @click="$emit('next')">다음</button><button v-else type="button" @click="$emit('finish')">완료</button></slot></template></PageLayout></template>
<template><PageLayout :title="props.title" :subtitle="props.subtitle" :status="props.state" :as-of="props.evidence?.asOf" :version="props.evidence?.version"><template #actions><slot name="actions"/></template><template #summary><div class="ks-card ks-wizard-progress" role="status">단계 {{ currentStep }} / {{ totalSteps }}<progress :value="currentStep" :max="totalSteps"/></div></template><StandardScreenBoundary :state="props.state" :warning="props.warning" @retry="$emit('retry')"><slot/></StandardScreenBoundary></PageLayout></template>
<style scoped>.ks-wizard-progress{display:grid;gap:var(--ks-space-2);padding:var(--ks-space-3)}progress{width:100%}</style>