feat(wbs-ux): add productivity helper components to SystemSettingsView (Hotkey Helper Bar, Data Clone Button, Draft Timestamp Chip)

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<string | null>(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<SettingItem[]>([]);
 const selectedItem = ref<SettingItem | null>(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<string[]>([
   '[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<SettingItem>({
   id: 0,
@@ -129,7 +132,7 @@ const modalItem = ref<SettingItem>({
   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<ColDef[]>([
   { field: 'id', headerName: 'ID', width: 55, sortable: true },
   { field: 'domain', headerName: '도메인', width: 85, cellRenderer: (p: any) => `<span class="domain-tag ${p.value.toLowerCase()}">${p.value}</span>` },
@@ -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);
           <button class="domain-btn" :class="{ active: activeDomain === 'WMS' }" @click="activeDomain = 'WMS'">🏦 WMS (자산)</button>
           <button class="domain-btn" :class="{ active: activeDomain === 'ERP' }" @click="activeDomain = 'ERP'">📑 ERP (재무)</button>
 
-          <!-- 3대 도메인 퀵 트랜잭션 모달 버튼 -->
           <div class="quick-modal-triggers">
             <button class="btn-quick-domain oms" @click="isOmsModalOpen = true">+ OMS 주문전송</button>
             <button class="btn-quick-domain wms" @click="isWmsModalOpen = true">+ WMS 현금이체</button>
@@ -347,12 +366,13 @@ onMounted(loadData);
         <button class="btn-batch-trigger" @click="runFactorBatch" :disabled="isBatchRunning">
           {{ isBatchRunning ? `⏳ 배치 ${batchProgress}%` : '⚡ 팩터 배치 실행' }}
         </button>
-        <button class="btn-guide-spec" @click="isGuideModalOpen = true">💡 22대 명세 팝업</button>
+        <button class="btn-guide-spec" @click="isGuideModalOpen = true">💡 24대 명세 팝업</button>
         <div class="search-box">
           <input type="text" class="search-input" placeholder="설정 키/설명 검색..." v-model="searchKeyword" />
         </div>
         <button class="btn-action btn-search" @click="loadData"><span class="badge-key">F3</span>조회</button>
         <button class="btn-action btn-create" @click="openCreateModal"><span class="badge-key">F4</span>신규</button>
+        <button class="btn-action btn-clone" @click="cloneSelectedItem"><span class="badge-key">F6</span>복제</button>
         <button class="btn-action btn-delete" @click="deleteSelectedItem"><span class="badge-key">F5</span>삭제</button>
         
         <div class="export-dropdown-wrapper">
@@ -436,6 +456,7 @@ onMounted(loadData);
           <h4 class="panel-title">✏️ 상세 데이터 [{{ selectedItem.setting_key }}]</h4>
           
           <div class="lock-mode-wrapper">
+            <span v-if="lastDraftSavedTime" class="draft-saved-chip">💾 임시저장: {{ lastDraftSavedTime }}</span>
             <span class="lock-ver-badge">🔒 Ver: v{{ selectedItem.lock_version }}</span>
             <span class="checker-badge" :class="selectedItem.maker_checker.toLowerCase()">{{ selectedItem.maker_checker }}</span>
             <div class="mode-switch-wrapper">
@@ -553,6 +574,18 @@ onMounted(loadData);
       </div>
     </div>
 
+    <!-- 사용자 편의성: 단축키 핫키 가이드 헬퍼 바 -->
+    <div class="hotkey-helper-bar">
+      <span class="hotkey-title">⌨️ 사용자 핫키 가이드:</span>
+      <span class="hotkey-chip"><kbd>F3</kbd> 조회</span>
+      <span class="hotkey-chip"><kbd>F4</kbd> 신규</span>
+      <span class="hotkey-chip"><kbd>F5</kbd> 삭제</span>
+      <span class="hotkey-chip"><kbd>F6</kbd> 복제</span>
+      <span class="hotkey-chip"><kbd>F7</kbd> 엑셀</span>
+      <span class="hotkey-chip"><kbd>Ctrl+S</kbd> 저장</span>
+      <span class="hotkey-chip"><kbd>Esc</kbd> 팝업닫기</span>
+    </div>
+
     <!-- Live Telemetry Footer Bar -->
     <div class="live-telemetry-bar">
       <span class="telemetry-item">🖥️ CPU: <strong>12%</strong></span>
@@ -655,37 +688,39 @@ onMounted(loadData);
       </div>
     </div>
 
-    <!-- 22대 OMS/WMS/ERP/AX & 스플릿 명세 가이드 Modal -->
+    <!-- 24대 OMS/WMS/ERP/AX & 스플릿 명세 가이드 Modal -->
     <div class="modal-backdrop" v-if="isGuideModalOpen">
       <div class="modal-dialog guide-modal">
         <div class="modal-header">
-          <h4 class="modal-title">💡 OMS / WMS / ERP / AX & 스플릿 22대 컴포넌트 스펙</h4>
+          <h4 class="modal-title">💡 OMS / WMS / ERP / AX & 생산성 24대 컴포넌트 스펙</h4>
           <button class="btn-close-modal" @click="isGuideModalOpen = false">✕</button>
         </div>
         <div class="modal-body guide-body">
           <ul class="guide-list">
-            <li><strong>1. OMS 주문전송 팝업 모달</strong>: 종목/단가/수량 매수주문 팝업</li>
-            <li><strong>2. WMS 현금이체 팝업 모달</strong>: D+2 Vault 현금 출금이체 팝업</li>
-            <li><strong>3. ERP 결재승인 팝업 모달</strong>: Maker-Checker 최종 승인 팝업</li>
-            <li><strong>4. OMS 도메인 모듈</strong>: 주문/체결 Waterfall 우선순위 & 호가 뷰er</li>
-            <li><strong>5. WMS 도메인 모듈</strong>: D+2 현금 볼트 안전율 & 포지션 사이징 가드</li>
-            <li><strong>6. ERP 도메인 모듈</strong>: 재무 회계 계정 맵핑 & Maker-Checker 릴레이</li>
-            <li><strong>7. AI AX 코파일럿 배너</strong>: Antigravity AI 추천값 및 1-Click 자동 적용</li>
-            <li><strong>8. 물리적 동적 스플릿 바 (Draggable Resizer)</strong>: 마우스 드래그 분할 조절</li>
-            <li><strong>9. 1-Click 스플릿 프리셋 바</strong>: 3:7 / 5:5 / 6:4 / 7:3 퀵 분할 조절 버튼</li>
-            <li><strong>10. Live PostgreSQL Ping 레이턴시 칩</strong>: 4ms 실시간 핑 상태</li>
-            <li><strong>11. SignalR WebSocket 소켓 칩</strong>: 라이브 소켓 연결 지표</li>
-            <li><strong>12. DbUp 마이그레이션 태그</strong>: DB 마이그레이션 태그 v2026.07.25</li>
-            <li><strong>13. 실시간 파이프라인 로그 터미널 창</strong>: 엔진 트랜잭션 스트리밍</li>
-            <li><strong>14. 비동기 배치 실행 & 진행률 바</strong>: 0~100% 모의 트랜잭션 게이지</li>
-            <li><strong>15. 낙관적 락 버전 인디케이터</strong>: 동시성 충돌 방지 v1~v5</li>
-            <li><strong>16. 실시간 텔레메트리 바</strong>: CPU/RAM/DB Pool 현장감 지표</li>
-            <li><strong>17. 검색 & 핫키 툴바</strong>: F3/F4/F5/F7 더존 표준 핫키</li>
-            <li><strong>18. 카테고리 탭 바</strong>: ALL/BUDGET/FACTOR/RISK/ACCOUNTING 탭</li>
-            <li><strong>19. AG Grid 데이터 테이블</strong>: 정렬, 필터, 단일 행 선택, Status Chips</li>
-            <li><strong>20. 페이지네이션 바</strong>: Page 1 of 1 건수 및 페이지 컨트롤러</li>
-            <li><strong>21. 더존 6대 표준 입력 마스크</strong>: Input, ComboBox, Radio, TextArea 등</li>
-            <li><strong>22. 읽기/편집 모드 토글 & 감사 이력 & 엑셀 팝업</strong>: Audit Trail, Excel/CSV</li>
+            <li><strong>1. 단축키 핫키 가이드 헬퍼 바</strong>: F3/F4/F5/F6/F7/Ctrl+S 사용자 생산성 조율</li>
+            <li><strong>2. 데이터 1-Click 복제 버튼 (Clone)</strong>: 기존 항목 기반 신규 생성</li>
+            <li><strong>3. 임시저장 드래프트 칩</strong>: 디테일 폼 자동 임시저장 타임스탬프 뱃지</li>
+            <li><strong>4. OMS 주문전송 팝업 모달</strong>: 종목/단가/수량 매수주문 팝업</li>
+            <li><strong>5. WMS 현금이체 팝업 모달</strong>: D+2 Vault 현금 출금이체 팝업</li>
+            <li><strong>6. ERP 결재승인 팝업 모달</strong>: Maker-Checker 최종 승인 팝업</li>
+            <li><strong>7. OMS 도메인 모듈</strong>: 주문/체결 Waterfall 우선순위 & 호가 뷰er</li>
+            <li><strong>8. WMS 도메인 모듈</strong>: D+2 현금 볼트 안전율 & 포지션 사이징 가드</li>
+            <li><strong>9. ERP 도메인 모듈</strong>: 재무 회계 계정 맵핑 & Maker-Checker 릴레이</li>
+            <li><strong>10. AI AX 코파일럿 배너</strong>: Antigravity AI 추천값 및 1-Click 자동 적용</li>
+            <li><strong>11. 물리적 동적 스플릿 바 (Draggable Resizer)</strong>: 마우스 드래그 분할 조절</li>
+            <li><strong>12. 1-Click 스플릿 프리셋 바</strong>: 3:7 / 5:5 / 6:4 / 7:3 퀵 분할 조절 버튼</li>
+            <li><strong>13. Live PostgreSQL Ping 레이턴시 칩</strong>: 4ms 실시간 핑 상태</li>
+            <li><strong>14. SignalR WebSocket 소켓 칩</strong>: 라이브 소켓 연결 지표</li>
+            <li><strong>15. DbUp 마이그레이션 태그</strong>: DB 마이그레이션 태그 v2026.07.25</li>
+            <li><strong>16. 실시간 파이프라인 로그 터미널 창</strong>: 엔진 트랜잭션 스트리밍</li>
+            <li><strong>17. 비동기 배치 실행 & 진행률 바</strong>: 0~100% 모의 트랜잭션 게이지</li>
+            <li><strong>18. 낙관적 락 버전 인디케이터</strong>: 동시성 충돌 방지 v1~v5</li>
+            <li><strong>19. 실시간 텔레메트리 바</strong>: CPU/RAM/DB Pool 현장감 지표</li>
+            <li><strong>20. 검색 & 핫키 툴바</strong>: F3/F4/F5/F7 더존 표준 핫키</li>
+            <li><strong>21. AG Grid 데이터 테이블</strong>: 정렬, 필터, 단일 행 선택, Status Chips</li>
+            <li><strong>22. 더존 6대 표준 입력 마스크</strong>: Input, ComboBox, Radio, TextArea 등</li>
+            <li><strong>23. 읽기/편집 모드 토글</strong>: 👁️ 읽기 / ✏️ 편집 전환 스위치</li>
+            <li><strong>24. 감사 이력 타임라인 & 모달 & 엑셀 팝업</strong>: Audit Trail, Modal, Excel/CSV</li>
           </ul>
         </div>
         <div class="modal-footer">
@@ -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;