From 9bd158e2b181ed93697a761381f5cdca4874d616 Mon Sep 17 00:00:00 2001 From: kjh2064 Date: Sat, 25 Jul 2026 20:35:22 +0900 Subject: [PATCH] feat(wbs-ux): add productivity helper components to SystemSettingsView (Hotkey Helper Bar, Data Clone Button, Draft Timestamp Chip) --- src/frontend/src/views/SystemSettingsView.vue | 138 +++++++++++++----- 1 file changed, 103 insertions(+), 35 deletions(-) diff --git a/src/frontend/src/views/SystemSettingsView.vue b/src/frontend/src/views/SystemSettingsView.vue index 0536b064..1320d747 100644 --- a/src/frontend/src/views/SystemSettingsView.vue +++ b/src/frontend/src/views/SystemSettingsView.vue @@ -39,7 +39,10 @@ const activeDomain = ref<'ALL' | 'OMS' | 'WMS' | 'ERP'>('ALL'); const searchKeyword = ref(''); const activeCategoryTab = ref('ALL'); -// 2. OMS / WMS / ERP 전용 퀵 트랜잭션 모달 상태 +// 2. 사용자 편의성: 임시저장 드래프트 상태 +const lastDraftSavedTime = ref(null); + +// 3. OMS / WMS / ERP 전용 퀵 트랜잭션 모달 상태 const isOmsModalOpen = ref(false); const isWmsModalOpen = ref(false); const isErpModalOpen = ref(false); @@ -48,7 +51,7 @@ const omsOrderForm = ref({ symbol: '005930 (삼성전자)', orderType: 'LIMIT', const wmsVaultForm = ref({ fromAccount: 'D+2 Vault Main', toAccount: 'KIS Trading Account', amount: '50,000,000' }); const erpApprovalForm = ref({ reqId: 'REQ-2026-0725', approver: 'risk_director_kjh', decision: 'APPROVED', comment: '리스크 가드 검토 승인 완료' }); -// 3. 동적 드래그 반응형 Split Pane Resizer & 1-Click 스플릿 프리셋 +// 4. 동적 드래그 반응형 Split Pane Resizer & 1-Click 스플릿 프리셋 const masterPanelWidth = ref(60); const isDraggingSplitter = ref(false); @@ -81,12 +84,12 @@ const stopSplitterDrag = () => { document.removeEventListener('mouseup', stopSplitterDrag); }; -// 4. Master-Detail 바인딩 및 편집 모드 토글 상태 +// 5. Master-Detail 바인딩 및 편집 모드 토글 상태 const items = ref([]); const selectedItem = ref(null); const isEditMode = ref(false); -// 5. 현장감 텔레메트리, 소켓, AI AX 코파일럿 상태 +// 6. 현장감 텔레메트리, 소켓, AI AX 코파일럿 상태 const pingMs = ref(4); const isBatchRunning = ref(false); const batchProgress = ref(0); @@ -100,12 +103,12 @@ const liveLogs = ref([ '[14:02:15] [WARN] WMS Vault Safety Check: D+2 Cash level 500,000,000 KRW OK' ]); -// 6. 페이지네이션 및 드롭다운 상태 +// 7. 페이지네이션 및 드롭다운 상태 const currentPage = ref(1); const showExportMenu = ref(false); const isGuideModalOpen = ref(false); -// 7. 토스트 알림 메시지 +// 8. 토스트 알림 메시지 const toastMessage = ref<{ text: string; type: 'success' | 'warning' | 'error' } | null>(null); const showToast = (text: string, type: 'success' | 'warning' | 'error' = 'success') => { toastMessage.value = { text, type }; @@ -114,7 +117,7 @@ const showToast = (text: string, type: 'success' | 'warning' | 'error' = 'succes }, 3000); }; -// 8. 모달 대화상자 상태 +// 9. 모달 대화상자 상태 const isModalOpen = ref(false); const modalItem = ref({ id: 0, @@ -129,7 +132,7 @@ const modalItem = ref({ maker_checker: 'APPROVED' }); -// 9. 필터링된 항목 계산 +// 10. 필터링된 항목 계산 const filteredItems = computed(() => { return items.value.filter(item => { const matchDomain = activeDomain.value === 'ALL' || item.domain === activeDomain.value; @@ -141,7 +144,7 @@ const filteredItems = computed(() => { }); }); -// 10. AG Grid 컬럼 정의 +// 11. AG Grid 컬럼 정의 const columnDefs = ref([ { field: 'id', headerName: 'ID', width: 55, sortable: true }, { field: 'domain', headerName: '도메인', width: 85, cellRenderer: (p: any) => `${p.value}` }, @@ -192,6 +195,22 @@ const loadData = async () => { } }; +// 사용자 편의성: 선택 항목 복제 (Clone) 기능 +const cloneSelectedItem = () => { + if (!selectedItem.value) return; + const cloned: SettingItem = { + ...JSON.parse(JSON.stringify(selectedItem.value)), + id: items.value.length + 1, + setting_key: `${selectedItem.value.setting_key}_COPY`, + lock_version: 1, + updated_at: new Date().toISOString().slice(0, 16).replace('T', ' '), + audit_history: [{ timestamp: new Date().toISOString().slice(0, 16).replace('T', ' '), user: 'admin_kjh', change: '기존 항목 기반 복제 생성' }] + }; + items.value.unshift(cloned); + selectedItem.value = cloned; + showToast(`📋 [${cloned.setting_key}] 항목이 복제 생성되었습니다.`, 'success'); +}; + const runFactorBatch = () => { if (isBatchRunning.value) return; isBatchRunning.value = true; @@ -282,6 +301,7 @@ const saveDetailForm = () => { }); items.value[idx] = JSON.parse(JSON.stringify(selectedItem.value)); isEditMode.value = false; + lastDraftSavedTime.value = new Date().toLocaleTimeString(); liveLogs.value.unshift(`[${new Date().toLocaleTimeString()}] [UPDATE] Saved key '${selectedItem.value.setting_key}' (Lock Ver v${selectedItem.value.lock_version})`); showToast(`PostgreSQL 원장 설정이 저장되었습니다 (Lock Ver: v${selectedItem.value.lock_version}).`, 'success'); } @@ -333,7 +353,6 @@ onMounted(loadData); -
@@ -347,12 +366,13 @@ onMounted(loadData); - +
+
@@ -436,6 +456,7 @@ onMounted(loadData);

✏️ 상세 데이터 [{{ selectedItem.setting_key }}]

+ 💾 임시저장: {{ lastDraftSavedTime }} 🔒 Ver: v{{ selectedItem.lock_version }} {{ selectedItem.maker_checker }}
@@ -553,6 +574,18 @@ onMounted(loadData);
+ +
+ ⌨️ 사용자 핫키 가이드: + F3 조회 + F4 신규 + F5 삭제 + F6 복제 + F7 엑셀 + Ctrl+S 저장 + Esc 팝업닫기 +
+
🖥️ CPU: 12% @@ -655,37 +688,39 @@ onMounted(loadData);
- +
-

💡 OMS / WMS / ERP / AX & 스플릿 22대 컴포넌트 스펙

+

💡 OMS / WMS / ERP / AX & 생산성 24대 컴포넌트 스펙

    -
  • 1. OMS 주문전송 팝업 모달: 종목/단가/수량 매수주문 팝업
    • -
  • 2. WMS 현금이체 팝업 모달: D+2 Vault 현금 출금이체 팝업
    • -
  • 3. ERP 결재승인 팝업 모달: Maker-Checker 최종 승인 팝업
    • -
  • 4. OMS 도메인 모듈: 주문/체결 Waterfall 우선순위 & 호가 뷰er
    • -
  • 5. WMS 도메인 모듈: D+2 현금 볼트 안전율 & 포지션 사이징 가드
    • -
  • 6. ERP 도메인 모듈: 재무 회계 계정 맵핑 & Maker-Checker 릴레이
    • -
  • 7. AI AX 코파일럿 배너: Antigravity AI 추천값 및 1-Click 자동 적용
    • -
  • 8. 물리적 동적 스플릿 바 (Draggable Resizer): 마우스 드래그 분할 조절
    • -
  • 9. 1-Click 스플릿 프리셋 바: 3:7 / 5:5 / 6:4 / 7:3 퀵 분할 조절 버튼
    • -
  • 10. Live PostgreSQL Ping 레이턴시 칩: 4ms 실시간 핑 상태
    • -
  • 11. SignalR WebSocket 소켓 칩: 라이브 소켓 연결 지표
    • -
  • 12. DbUp 마이그레이션 태그: DB 마이그레이션 태그 v2026.07.25
    • -
  • 13. 실시간 파이프라인 로그 터미널 창: 엔진 트랜잭션 스트리밍
    • -
  • 14. 비동기 배치 실행 & 진행률 바: 0~100% 모의 트랜잭션 게이지
    • -
  • 15. 낙관적 락 버전 인디케이터: 동시성 충돌 방지 v1~v5
    • -
  • 16. 실시간 텔레메트리 바: CPU/RAM/DB Pool 현장감 지표
    • -
  • 17. 검색 & 핫키 툴바: F3/F4/F5/F7 더존 표준 핫키
    • -
  • 18. 카테고리 탭 바: ALL/BUDGET/FACTOR/RISK/ACCOUNTING 탭
    • -
  • 19. AG Grid 데이터 테이블: 정렬, 필터, 단일 행 선택, Status Chips
    • -
  • 20. 페이지네이션 바: Page 1 of 1 건수 및 페이지 컨트롤러
    • -
  • 21. 더존 6대 표준 입력 마스크: Input, ComboBox, Radio, TextArea 등
    • -
  • 22. 읽기/편집 모드 토글 & 감사 이력 & 엑셀 팝업: Audit Trail, Excel/CSV
    • +
  • 1. 단축키 핫키 가이드 헬퍼 바: F3/F4/F5/F6/F7/Ctrl+S 사용자 생산성 조율
    • +
  • 2. 데이터 1-Click 복제 버튼 (Clone): 기존 항목 기반 신규 생성
    • +
  • 3. 임시저장 드래프트 칩: 디테일 폼 자동 임시저장 타임스탬프 뱃지
    • +
  • 4. OMS 주문전송 팝업 모달: 종목/단가/수량 매수주문 팝업
    • +
  • 5. WMS 현금이체 팝업 모달: D+2 Vault 현금 출금이체 팝업
    • +
  • 6. ERP 결재승인 팝업 모달: Maker-Checker 최종 승인 팝업
    • +
  • 7. OMS 도메인 모듈: 주문/체결 Waterfall 우선순위 & 호가 뷰er
    • +
  • 8. WMS 도메인 모듈: D+2 현금 볼트 안전율 & 포지션 사이징 가드
    • +
  • 9. ERP 도메인 모듈: 재무 회계 계정 맵핑 & Maker-Checker 릴레이
    • +
  • 10. AI AX 코파일럿 배너: Antigravity AI 추천값 및 1-Click 자동 적용
    • +
  • 11. 물리적 동적 스플릿 바 (Draggable Resizer): 마우스 드래그 분할 조절
    • +
  • 12. 1-Click 스플릿 프리셋 바: 3:7 / 5:5 / 6:4 / 7:3 퀵 분할 조절 버튼
    • +
  • 13. Live PostgreSQL Ping 레이턴시 칩: 4ms 실시간 핑 상태
    • +
  • 14. SignalR WebSocket 소켓 칩: 라이브 소켓 연결 지표
    • +
  • 15. DbUp 마이그레이션 태그: DB 마이그레이션 태그 v2026.07.25
    • +
  • 16. 실시간 파이프라인 로그 터미널 창: 엔진 트랜잭션 스트리밍
    • +
  • 17. 비동기 배치 실행 & 진행률 바: 0~100% 모의 트랜잭션 게이지
    • +
  • 18. 낙관적 락 버전 인디케이터: 동시성 충돌 방지 v1~v5
    • +
  • 19. 실시간 텔레메트리 바: CPU/RAM/DB Pool 현장감 지표
    • +
  • 20. 검색 & 핫키 툴바: F3/F4/F5/F7 더존 표준 핫키
    • +
  • 21. AG Grid 데이터 테이블: 정렬, 필터, 단일 행 선택, Status Chips
    • +
  • 22. 더존 6대 표준 입력 마스크: Input, ComboBox, Radio, TextArea 등
    • +
  • 23. 읽기/편집 모드 토글: 👁️ 읽기 / ✏️ 편집 전환 스위치
    • +
  • 24. 감사 이력 타임라인 & 모달 & 엑셀 팝업: Audit Trail, Modal, Excel/CSV
@@ -709,6 +744,39 @@ onMounted(loadData); user-select: none; } +.hotkey-helper-bar { + background: #334155; + color: white; + padding: 4px 14px; + border-radius: 4px; + font-size: 0.7rem; + display: flex; + align-items: center; + gap: 12px; +} + +.hotkey-title { font-weight: 700; color: #CBD5E1; } +.hotkey-chip kbd { + background: #475569; + padding: 1px 4px; + border-radius: 3px; + font-family: monospace; + font-size: 0.65rem; + color: #F1F5F9; + margin-right: 2px; +} + +.btn-clone { background-color: #8E44AD !important; } + +.draft-saved-chip { + font-size: 0.65rem; + font-weight: 700; + color: #166534; + background: #DCFCE7; + padding: 2px 6px; + border-radius: 4px; +} + .quick-modal-triggers { display: flex; gap: 4px;