From e8550dc5838d908f627b5d249e6a13de1e82279e Mon Sep 17 00:00:00 2001 From: kjh2064 Date: Sat, 25 Jul 2026 20:27:44 +0900 Subject: [PATCH] feat(wbs-ux): inject 3 additional live operational features into SystemSettingsView (SignalR Socket Chip, DbUp Tag, Live Log Terminal) --- src/frontend/src/views/SystemSettingsView.vue | 112 ++++++++++++++---- 1 file changed, 88 insertions(+), 24 deletions(-) diff --git a/src/frontend/src/views/SystemSettingsView.vue b/src/frontend/src/views/SystemSettingsView.vue index 42ccc327..50ef3867 100644 --- a/src/frontend/src/views/SystemSettingsView.vue +++ b/src/frontend/src/views/SystemSettingsView.vue @@ -27,7 +27,7 @@ interface SettingItem { status: 'ACTIVE' | 'WARNING' | 'BLOCKED'; updated_at: string; note: string; - lock_version: number; // 낙관적 락 버전 + lock_version: number; attachments?: string[]; audit_history?: AuditLog[]; } @@ -41,11 +41,17 @@ 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); +const liveLogs = ref([ + '[14:00:01] [INFO] SignalR WebSocket Hub connected to wss://localhost:5173/hub', + '[14:00:05] [INFO] DbUp Migration schema verified (v2026.07.25_001)', + '[14:02:10] [INFO] Factor RSI calculated successfully (0.012s)', + '[14:02:15] [WARN] D2 Cash threshold check passed (500,000,000 KRW target)' +]); // 4. 페이지네이션 및 엑셀 드롭다운 상태 const currentPage = ref(1); @@ -135,12 +141,14 @@ const runFactorBatch = () => { if (isBatchRunning.value) return; isBatchRunning.value = true; batchProgress.value = 0; + liveLogs.value.unshift(`[${new Date().toLocaleTimeString()}] [EXEC] Triggered factor recalculation batch pipeline`); showToast('⚡ 팩터 재계산 비동기 배치 작업이 트리거되었습니다.', 'success'); const timer = setInterval(() => { batchProgress.value += 25; if (batchProgress.value >= 100) { clearInterval(timer); isBatchRunning.value = false; + liveLogs.value.unshift(`[${new Date().toLocaleTimeString()}] [SUCCESS] Batch pipeline finished in 1.2s`); showToast('✅ 팩터 재계산 배치가 성공적으로 완료되었습니다 (소요시간: 1.2s)', 'success'); } }, 300); @@ -175,6 +183,7 @@ const saveModalItem = () => { items.value.unshift({ ...modalItem.value }); selectedItem.value = { ...modalItem.value }; isModalOpen.value = false; + liveLogs.value.unshift(`[${new Date().toLocaleTimeString()}] [CREATE] Added new setting key: ${modalItem.value.setting_key}`); showToast('신규 설정 항목이 성공적으로 등록되었습니다.', 'success'); }; @@ -182,7 +191,7 @@ 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; // 락 버전 증가 + 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', ' '), @@ -191,6 +200,7 @@ const saveDetailForm = () => { }); items.value[idx] = JSON.parse(JSON.stringify(selectedItem.value)); isEditMode.value = false; + liveLogs.value.unshift(`[${new Date().toLocaleTimeString()}] [UPDATE] Key '${selectedItem.value.setting_key}' saved (Ver v${selectedItem.value.lock_version})`); showToast(`PostgreSQL 원장 설정 변경사항이 저장되었습니다 (Lock Ver: v${selectedItem.value.lock_version}).`, 'success'); } }; @@ -198,6 +208,7 @@ const saveDetailForm = () => { const deleteSelectedItem = () => { if (!selectedItem.value) return; if (confirm(`[${selectedItem.value.setting_key}] 항목을 삭제하시겠습니까?`)) { + liveLogs.value.unshift(`[${new Date().toLocaleTimeString()}] [DELETE] Deleted key: ${selectedItem.value.setting_key}`); items.value = items.value.filter(i => i.id !== selectedItem.value?.id); selectedItem.value = items.value.length > 0 ? items.value[0] : null; showToast('항목이 성공적으로 삭제되었습니다.', 'warning'); @@ -206,6 +217,7 @@ const deleteSelectedItem = () => { const triggerExport = (fmt: string) => { showExportMenu.value = false; + liveLogs.value.unshift(`[${new Date().toLocaleTimeString()}] [EXPORT] Exporting data stream as ${fmt}`); showToast(`${fmt} 형식으로 대용량 스트리밍 내보내기를 시작합니다.`, 'success'); }; @@ -229,16 +241,18 @@ onMounted(loadData);

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

- 🟢 PostgreSQL Live ({{ pingMs }}ms) + 🟢 Live ({{ pingMs }}ms) + 📡 SignalR Connected
- Master-Detail, AG Grid, Batch Progress, Lock Guard, Telemetry, Toast, 더존 컴포넌트 + Master-Detail, AG Grid, Batch Progress, Lock Guard, Telemetry, Log Terminal, 더존 컴포넌트
+ 🛡️ DbUp: v2026.07.25 - +
@@ -374,6 +388,16 @@ onMounted(loadData);
+ +
+
💻 실시간 퀀트 엔진 로그 터미널
+
+
+ {{ log }} +
+
+
+
🕒 변경 감사 이력 타임라인 (Audit Trail)
@@ -430,31 +454,33 @@ onMounted(loadData);
- +
-

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

+

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

  • 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 내보내기
    • +
  • 2. SignalR WebSocket 소켓 연결 칩: 소켓 연결 라이브 지표
    • +
  • 3. DbUp 스키마 마이그레이션 뱃지: DB 마이그레이션 태그
    • +
  • 4. 실시간 파이프라인 로그 터미널 창: 엔진 트랜잭션 스트리밍
    • +
  • 5. 팩터 재계산 비동기 배치 버튼 & 진행률 바: 0~100% 모의 트랜잭션
    • +
  • 6. 낙관적 락 버전 인디케이터 (Lock Guard): 동시성 충돌 방지 v1~v5
    • +
  • 7. 실시간 텔레메트리 시스템 바: CPU/RAM/DB Pool 현장감 지표
    • +
  • 8. 검색 & 핫키 툴바: F3/F4/F5/F7 더존 표준 핫키
    • +
  • 9. 카테고리 탭 바: ALL/BUDGET/FACTOR/RISK 1-Click 필터
    • +
  • 10. 6:4 Master-Detail Split Pane: 8px 물리 구분선 뷰포트
    • +
  • 11. AG Grid 데이터 테이블: 정렬, 필터, 단일 행 선택, Status Chips
    • +
  • 12. 페이지네이션 바: Page 1 of 1 건수 및 페이지 컨트롤러
    • +
  • 13. 더존 6대 표준 입력 마스크: Input, ComboBox, Radio, TextArea 등
    • +
  • 14. 읽기/편집 모드 토글: 👁️ 읽기 / ✏️ 편집 전환 스위치
    • +
  • 15. 증빙 파일 첨부 드롭존: Drag & drop 파일 첨부 칩
    • +
  • 16. 감사 이력 타임라인: 수정자/일시 Audit Trail 스캔
    • +
  • 17. 신규 등록 Modal: 팝업 대화상자 폼 세트
    • +
  • 18. 플로팅 토스트 알림 & 엑셀 팝업: 성공/경고 피드백 및 내보내기
@@ -477,14 +503,32 @@ onMounted(loadData); position: relative; } -.title-with-chip { display: flex; align-items: center; gap: 10px; } +.title-with-chip { display: flex; align-items: center; gap: 8px; } .db-ping-chip { background: #166534; color: #DCFCE7; padding: 2px 8px; border-radius: 12px; + font-size: 0.65rem; + font-weight: 700; +} + +.socket-chip { + background: #1E40AF; + color: #DBEAFE; + padding: 2px 8px; + border-radius: 12px; + font-size: 0.65rem; + font-weight: 700; +} + +.dbup-version-tag { font-size: 0.7rem; font-weight: 700; + color: #CBD5E1; + background: rgba(255,255,255,0.1); + padding: 2px 6px; + border-radius: 4px; } .btn-batch-trigger { @@ -798,6 +842,26 @@ onMounted(loadData); margin-top: 4px; } +.live-log-terminal { + background: #0F172A; + color: #38BDF8; + border-radius: 4px; + padding: 6px 10px; + font-family: monospace; + font-size: 0.65rem; +} + +.terminal-header { + color: #94A3B8; + border-bottom: 1px solid #334155; + padding-bottom: 2px; + margin-bottom: 4px; + font-weight: 700; +} + +.terminal-body { display: flex; flex-direction: column; gap: 2px; } +.log-line { word-break: break-all; } + .audit-timeline-section { border-top: 1px solid #E2E8F0; padding-top: 8px;