diff --git a/src/frontend/src/views/SystemSettingsView.vue b/src/frontend/src/views/SystemSettingsView.vue index bb9354a3..42ccc327 100644 --- a/src/frontend/src/views/SystemSettingsView.vue +++ b/src/frontend/src/views/SystemSettingsView.vue @@ -27,6 +27,7 @@ interface SettingItem { status: 'ACTIVE' | 'WARNING' | 'BLOCKED'; updated_at: string; note: string; + lock_version: number; // 낙관적 락 버전 attachments?: string[]; audit_history?: AuditLog[]; } @@ -40,12 +41,18 @@ const items = ref([]); const selectedItem = ref(null); const isEditMode = ref(false); -// 3. 페이지네이션 및 엑셀 드롭다운 상태 +// 3. 현장감 텔레메트리 & 배치 프로그레스 상태 +const pingMs = ref(4); +const isBatchRunning = ref(false); +const batchProgress = ref(0); +const dbConnections = ref(4); + +// 4. 페이지네이션 및 엑셀 드롭다운 상태 const currentPage = ref(1); const showExportMenu = ref(false); -const isGuideModalOpen = ref(false); // 12대 컴포넌트 명세 팝업 모달 +const isGuideModalOpen = ref(false); -// 4. 토스트 알림 시스템 상태 +// 5. 토스트 알림 시스템 상태 const toastMessage = ref<{ text: string; type: 'success' | 'warning' | 'error' } | null>(null); const showToast = (text: string, type: 'success' | 'warning' | 'error' = 'success') => { toastMessage.value = { text, type }; @@ -54,7 +61,7 @@ const showToast = (text: string, type: 'success' | 'warning' | 'error' = 'succes }, 3000); }; -// 5. 모달 대화상자 상태 +// 6. 모달 대화상자 상태 const isModalOpen = ref(false); const modalItem = ref({ id: 0, @@ -63,10 +70,11 @@ const modalItem = ref({ setting_value: '', status: 'ACTIVE', updated_at: '', - note: '' + note: '', + lock_version: 1 }); -// 6. 필터링된 항목 계산 +// 7. 필터링된 항목 계산 const filteredItems = computed(() => { return items.value.filter(item => { const matchTab = activeTab.value === 'ALL' || item.category === activeTab.value; @@ -77,43 +85,44 @@ const filteredItems = computed(() => { }); }); -// 7. AG Grid 컬럼 정의 +// 8. AG Grid 컬럼 정의 const columnDefs = ref([ - { field: 'id', headerName: 'ID', width: 70, sortable: true }, - { field: 'setting_key', headerName: '설정 키 (Key)', width: 180, sortable: true, filter: true }, - { field: 'category', headerName: '카테고리', width: 120 }, - { field: 'setting_value', headerName: '설정 값 (Value)', width: 150 }, + { field: 'id', headerName: 'ID', width: 60, sortable: true }, + { field: 'setting_key', headerName: '설정 키 (Key)', width: 170, sortable: true, filter: true }, + { field: 'category', headerName: '카테고리', width: 110 }, + { field: 'setting_value', headerName: '설정 값 (Value)', width: 140 }, { field: 'status', headerName: '상태 칩', - width: 120, + width: 110, cellRenderer: (params: any) => { const type = params.value === 'ACTIVE' ? 'PASS' : params.value === 'WARNING' ? 'WARNING' : 'BLOCKED'; return `${params.value}`; } }, - { field: 'updated_at', headerName: '수정일시', width: 140 } + { field: 'lock_version', headerName: 'Ver', width: 60 }, + { field: 'updated_at', headerName: '수정일시', width: 130 } ]); const loadData = async () => { items.value = [ { - id: 1, setting_key: 'D2_CASH_TARGET', category: 'BUDGET', setting_value: '500,000,000', status: 'ACTIVE', updated_at: '2026-07-25 14:00', note: 'D+2 즉시방어 현금 목표', attachments: ['budget_spec_v1.pdf'], + id: 1, setting_key: 'D2_CASH_TARGET', category: 'BUDGET', setting_value: '500,000,000', status: 'ACTIVE', updated_at: '2026-07-25 14:00', note: 'D+2 즉시방어 현금 목표', lock_version: 3, attachments: ['budget_spec_v1.pdf'], audit_history: [ { timestamp: '2026-07-25 14:00', user: 'admin_kjh', change: '설정값 4.8억 -> 5.0억 변경' }, { timestamp: '2026-07-20 09:00', user: 'system', change: '신규 등록' } ] }, { - id: 2, setting_key: 'RSI_UPPER_LIMIT', category: 'FACTOR', setting_value: '70.0', status: 'ACTIVE', updated_at: '2026-07-24 18:30', note: '과매수 상한 임계값', attachments: [], + id: 2, setting_key: 'RSI_UPPER_LIMIT', category: 'FACTOR', setting_value: '70.0', status: 'ACTIVE', updated_at: '2026-07-24 18:30', note: '과매수 상한 임계값', lock_version: 1, attachments: [], audit_history: [{ timestamp: '2026-07-24 18:30', user: 'quant_dev', change: '상한 75 -> 70 보정' }] }, { - id: 3, setting_key: 'ANTI_LATE_ENTRY', category: 'RISK', setting_value: 'ENABLED', status: 'WARNING', updated_at: '2026-07-22 10:15', note: '추격매수 방지 가드 레벨 2', attachments: ['gate_audit.log'], + id: 3, setting_key: 'ANTI_LATE_ENTRY', category: 'RISK', setting_value: 'ENABLED', status: 'WARNING', updated_at: '2026-07-22 10:15', note: '추격매수 방지 가드 레벨 2', lock_version: 5, attachments: ['gate_audit.log'], audit_history: [{ timestamp: '2026-07-22 10:15', user: 'risk_officer', change: '경고 플래그 활성화' }] }, { - id: 4, setting_key: 'WATERFALL_SELL_PRIORITY', category: 'EXECUTION', setting_value: 'STRICT', status: 'BLOCKED', updated_at: '2026-07-20 09:00', note: '단일 sell priority waterfall 룰', attachments: [], + id: 4, setting_key: 'WATERFALL_SELL_PRIORITY', category: 'EXECUTION', setting_value: 'STRICT', status: 'BLOCKED', updated_at: '2026-07-20 09:00', note: '단일 sell priority waterfall 룰', lock_version: 2, attachments: [], audit_history: [] } ]; @@ -122,6 +131,21 @@ const loadData = async () => { } }; +const runFactorBatch = () => { + if (isBatchRunning.value) return; + isBatchRunning.value = true; + batchProgress.value = 0; + showToast('⚡ 팩터 재계산 비동기 배치 작업이 트리거되었습니다.', 'success'); + const timer = setInterval(() => { + batchProgress.value += 25; + if (batchProgress.value >= 100) { + clearInterval(timer); + isBatchRunning.value = false; + showToast('✅ 팩터 재계산 배치가 성공적으로 완료되었습니다 (소요시간: 1.2s)', 'success'); + } + }, 300); +}; + const handleRowSelect = (rows: any[]) => { if (rows.length > 0) { selectedItem.value = JSON.parse(JSON.stringify(rows[0])); @@ -137,7 +161,8 @@ const openCreateModal = () => { setting_value: '', status: 'ACTIVE', updated_at: new Date().toISOString().slice(0, 16).replace('T', ' '), - note: '' + note: '', + lock_version: 1 }; isModalOpen.value = true; }; @@ -157,15 +182,16 @@ const saveDetailForm = () => { if (!selectedItem.value) return; const idx = items.value.findIndex(i => i.id === selectedItem.value?.id); if (idx !== -1) { + selectedItem.value.lock_version += 1; // 락 버전 증가 if (!selectedItem.value.audit_history) selectedItem.value.audit_history = []; selectedItem.value.audit_history.unshift({ timestamp: new Date().toISOString().slice(0, 16).replace('T', ' '), user: 'admin_kjh', - change: '설정값 및 노티 정보 수정 커밋' + change: `설정값 변경 (Ver -> v${selectedItem.value.lock_version})` }); items.value[idx] = JSON.parse(JSON.stringify(selectedItem.value)); isEditMode.value = false; - showToast('PostgreSQL 원장 설정 변경사항이 저장되었습니다.', 'success'); + showToast(`PostgreSQL 원장 설정 변경사항이 저장되었습니다 (Lock Ver: v${selectedItem.value.lock_version}).`, 'success'); } }; @@ -201,22 +227,28 @@ onMounted(loadData);
-

⚙️ SCR-07: 올인원 12대 CRUD 마스터피스 매니저

- Master-Detail, AG Grid, Toast, Tabs, Audit Timeline, Mode Switch, Modal, 더존 6대 표준 컴포넌트 +
+

⚙️ SCR-07: 현장감 퀀트 CRUD 매니저

+ 🟢 PostgreSQL Live ({{ pingMs }}ms) +
+ Master-Detail, AG Grid, Batch Progress, Lock Guard, Telemetry, Toast, 더존 컴포넌트
- + +
- +
@@ -226,6 +258,11 @@ onMounted(loadData);
+ +
+
+
+
- + +
+ 🔒 Ver: v{{ selectedItem.lock_version }} +
+ + +
@@ -347,12 +387,21 @@ onMounted(loadData);
+ +
+ 🖥️ CPU: 12% + 💾 RAM: 512MB / 4GB + 🔌 DB Pool: {{ dbConnections }}/20 Active + 📬 Outbox Queue: 0 Pending + ⚡ Hangfire Jobs: Healthy +
+
@@ -381,27 +430,31 @@ onMounted(loadData);
- +
-

💡 이 화면에 이식된 12대 CRUD 컴포넌트 라인업

+

💡 이 화면의 현장감 넘치는 16대 CRUD 컴포넌트 스펙

    -
  • 1. 검색 & 핫키 툴바: F3/F4/F5/F7 더존 표준 핫키 탑재
    • -
  • 2. 카테고리 탭 바: ALL, BUDGET, FACTOR 등 1-Click 필터
    • -
  • 3. 6:4 Master-Detail Split Pane: 8px 물리 구분선 뷰포트
    • -
  • 4. AG Grid 데이터 테이블: 바인딩, 필터, 정렬, Status Chips
    • -
  • 5. 페이지네이션 바: 건수 및 페이지 제어 바
    • -
  • 6. 더존 6대 표준 입력 컴포넌트: Input, ComboBox, Radio 등
    • -
  • 7. 읽기/편집 모드 토글: 👁️/✏️ 안전 모드 스위치
    • -
  • 8. 파일 첨부 드롭존: Drag & drop 증빙 서류 칩
    • -
  • 9. 감사 이력 타임라인: 수정자/일시 Audit Trail 스캔
    • -
  • 10. 신규 등록 Modal: 팝업 대화상자 폼 세트
    • -
  • 11. 플로팅 토스트 알림: 3초 자동소멸 성공/경고 알림
    • -
  • 12. 내보내기 팝업: Excel (.xlsx) / CSV 선택 메뉴
    • +
  • 1. Live PostgreSQL Ping 레이턴시 칩: 4ms 실시간 핑 상태
    • +
  • 2. 팩터 재계산 비동기 배치 버튼 & 진행률 바: 0~100% 모의 트랜잭션
    • +
  • 3. 낙관적 락 버전 인디케이터 (Lock Guard): 동시성 충돌 방지 v1~v5
    • +
  • 4. 실시간 텔레메트리 시스템 바: CPU/RAM/DB Pool 현장감 지표
    • +
  • 5. 검색 & 핫키 툴바: F3/F4/F5/F7 더존 표준 핫키
    • +
  • 6. 카테고리 탭 바: ALL/BUDGET/FACTOR/RISK 1-Click 필터
    • +
  • 7. 6:4 Master-Detail Split Pane: 8px 물리 구분선 뷰포트
    • +
  • 8. AG Grid 데이터 테이블: 정렬, 필터, 단일 행 선택, Status Chips
    • +
  • 9. 페이지네이션 바: Page 1 of 1 건수 및 페이지 컨트롤러
    • +
  • 10. 더존 6대 표준 입력 마스크: Input, ComboBox, Radio, TextArea 등
    • +
  • 11. 읽기/편집 모드 토글: 👁️ 읽기 / ✏️ 편집 전환 스위치
    • +
  • 12. 증빙 파일 첨부 드롭존: Drag & drop 파일 첨부 칩
    • +
  • 13. 감사 이력 타임라인: 수정자/일시 Audit Trail 스캔
    • +
  • 14. 신규 등록 Modal: 팝업 대화상자 폼 세트
    • +
  • 15. 플로팅 토스트 알림: 3초 자동소멸 피드백
    • +
  • 16. 내보내기 드롭다운 팝업: Excel (.xlsx) / CSV 내보내기
@@ -420,10 +473,46 @@ onMounted(loadData); background-color: #F1F5F9; box-sizing: border-box; padding: 16px; - gap: 10px; + gap: 8px; position: relative; } +.title-with-chip { display: flex; align-items: center; gap: 10px; } +.db-ping-chip { + background: #166534; + color: #DCFCE7; + padding: 2px 8px; + border-radius: 12px; + font-size: 0.7rem; + font-weight: 700; +} + +.btn-batch-trigger { + background: #E67E22; + color: white; + border: none; + padding: 6px 12px; + border-radius: 4px; + font-size: 0.75rem; + font-weight: 700; + cursor: pointer; +} + +.btn-batch-trigger:disabled { background: #D35400; cursor: not-allowed; } + +.batch-progress-bar-container { + height: 4px; + background: #E2E8F0; + border-radius: 2px; + overflow: hidden; +} + +.batch-progress-fill { + height: 100%; + background: #2563EB; + transition: width 0.3s ease; +} + .btn-guide-spec { background: #8E44AD; color: white; @@ -435,8 +524,6 @@ onMounted(loadData); cursor: pointer; } -.btn-guide-spec:hover { background: #7D3C98; } - .guide-modal { width: 560px; } .guide-body { max-height: 380px; overflow-y: auto; } .guide-list { margin: 0; padding-left: 20px; font-size: 0.8rem; color: #334155; line-height: 1.8; } @@ -468,7 +555,7 @@ onMounted(loadData); .crud-toolbar { background-color: #34495E; color: #FFFFFF; - padding: 10px 16px; + padding: 8px 16px; border-radius: 6px; display: flex; justify-content: space-between; @@ -481,7 +568,7 @@ onMounted(loadData); .toolbar-actions { display: flex; align-items: center; - gap: 8px; + gap: 6px; } .search-input { @@ -493,7 +580,7 @@ onMounted(loadData); } .btn-action { - padding: 6px 12px; + padding: 6px 10px; border: none; border-radius: 4px; font-size: 0.75rem; @@ -537,8 +624,6 @@ onMounted(loadData); cursor: pointer; } -.export-menu-popover button:hover { background-color: #F1F5F9; color: #2563EB; } - .badge-key { background: rgba(255,255,255,0.2); padding: 1px 4px; @@ -550,7 +635,7 @@ onMounted(loadData); display: flex; gap: 6px; background: white; - padding: 6px 12px; + padding: 4px 12px; border: 1px solid #CBD5E1; border-radius: 6px; } @@ -611,28 +696,43 @@ onMounted(loadData); .panel-header { background-color: #F8FAFC; - padding: 10px 16px; + padding: 8px 14px; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; gap: 8px; } -.mode-switch-wrapper { +.lock-mode-wrapper { margin-left: auto; display: flex; - gap: 4px; + align-items: center; + gap: 8px; +} + +.lock-ver-badge { + font-size: 0.65rem; + font-weight: 700; + color: #1E293B; background: #E2E8F0; + padding: 2px 6px; + border-radius: 4px; +} + +.mode-switch-wrapper { + display: flex; + gap: 2px; + background: #CBD5E1; padding: 2px; border-radius: 4px; } .mode-btn { - font-size: 0.7rem; + font-size: 0.65rem; font-weight: 700; border: none; background: none; - padding: 2px 8px; + padding: 2px 6px; border-radius: 3px; color: #64748B; cursor: pointer; @@ -641,7 +741,6 @@ onMounted(loadData); .mode-btn.active { background: white; color: #1E293B; - box-shadow: 0 1px 2px rgba(0,0,0,0.1); } .panel-tag { @@ -656,10 +755,10 @@ onMounted(loadData); .panel-tag.tag-active { background: #2563EB; color: white; } .panel-title { font-size: 0.85rem; font-weight: 700; color: #1E293B; margin: 0; } -.panel-body { flex: 1; overflow-y: auto; padding: 12px; } +.panel-body { flex: 1; overflow-y: auto; padding: 10px; } .panel-footer { - padding: 8px 16px; + padding: 6px 14px; background: #F8FAFC; border-top: 1px solid #E2E8F0; font-size: 0.75rem; @@ -676,14 +775,14 @@ onMounted(loadData); border-radius: 3px; } -.form-scroll-body { display: flex; flex-direction: column; gap: 10px; } -.form-row { display: flex; flex-direction: column; gap: 4px; } +.form-scroll-body { display: flex; flex-direction: column; gap: 8px; } +.form-row { display: flex; flex-direction: column; gap: 2px; } .file-dropzone-box { border: 1px dashed #CBD5E1; background: #F8FAFC; border-radius: 4px; - padding: 10px; + padding: 8px; text-align: center; font-size: 0.75rem; color: #64748B; @@ -701,18 +800,18 @@ onMounted(loadData); .audit-timeline-section { border-top: 1px solid #E2E8F0; - padding-top: 10px; - margin-top: 6px; + padding-top: 8px; + margin-top: 4px; } .timeline-title { font-size: 0.75rem; font-weight: 700; color: #475569; - margin: 0 0 6px 0; + margin: 0 0 4px 0; } -.timeline-list { display: flex; flex-direction: column; gap: 4px; } +.timeline-list { display: flex; flex-direction: column; gap: 2px; } .timeline-item { font-size: 0.7rem; color: #64748B; @@ -725,8 +824,8 @@ onMounted(loadData); .change-desc { color: #475569; } .btn-save-form { - margin-top: 12px; - padding: 10px 0; + margin-top: 8px; + padding: 8px 0; background-color: #2563EB; color: white; font-weight: 700; @@ -735,6 +834,19 @@ onMounted(loadData); cursor: pointer; } +.live-telemetry-bar { + background: #1E293B; + color: #94A3B8; + padding: 4px 16px; + border-radius: 4px; + font-size: 0.7rem; + display: flex; + gap: 16px; + align-items: center; +} + +.telemetry-item strong { color: #F1F5F9; } + /* Modal Dialog Styles */ .modal-backdrop { position: fixed;