From cfcb1f9860a7c64387aa9556e3d3c4362020418d Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sat, 25 Jul 2026 20:23:30 +0900
Subject: [PATCH] feat(wbs-ux): enhance SystemSettingsView with Toast
 notifications, Category Tabs, Evidence Dropzone, and Pagination

---
 src/frontend/src/views/SystemSettingsView.vue | 200 ++++++++++++++----
 1 file changed, 160 insertions(+), 40 deletions(-)

diff --git a/src/frontend/src/views/SystemSettingsView.vue b/src/frontend/src/views/SystemSettingsView.vue
index 4fca510c..b29f931d 100644
--- a/src/frontend/src/views/SystemSettingsView.vue
+++ b/src/frontend/src/views/SystemSettingsView.vue
@@ -1,6 +1,6 @@
 <!-- SystemSettingsView.vue -->
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import QuantLabel from '../components/QuantLabel.vue'
 import QuantInput from '../components/QuantInput.vue'
 import QuantDatePicker from '../components/QuantDatePicker.vue'
@@ -21,17 +21,31 @@ interface SettingItem {
   status: 'ACTIVE' | 'WARNING' | 'BLOCKED';
   updated_at: string;
   note: string;
+  attachments?: string[];
 }
 
-// 1. 검색 및 필터 바 상태
+// 1. 검색, 필터, 탭 상태
 const searchKeyword = ref('');
-const statusFilter = ref('ALL');
+const activeTab = ref('ALL');
 
 // 2. Master-Detail 바인딩 상태
 const items = ref<SettingItem[]>([]);
 const selectedItem = ref<SettingItem | null>(null);
 
-// 3. 모달 대화상자 상태
+// 3. 페이지네이션 상태
+const currentPage = ref(1);
+const pageSize = ref(10);
+
+// 4. 토스트 알림 시스템 상태
+const toastMessage = ref<{ text: string; type: 'success' | 'warning' | 'error' } | null>(null);
+const showToast = (text: string, type: 'success' | 'warning' | 'error' = 'success') => {
+  toastMessage.value = { text, type };
+  setTimeout(() => {
+    toastMessage.value = null;
+  }, 3000);
+};
+
+// 5. 모달 대화상자 상태
 const isModalOpen = ref(false);
 const modalItem = ref<SettingItem>({
   id: 0,
@@ -43,12 +57,23 @@ const modalItem = ref<SettingItem>({
   note: ''
 });
 
-// 4. AG Grid 컬럼 정의
+// 6. 필터링된 항목 계산
+const filteredItems = computed(() => {
+  return items.value.filter(item => {
+    const matchTab = activeTab.value === 'ALL' || item.category === activeTab.value;
+    const matchSearch = !searchKeyword.value || 
+      item.setting_key.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
+      item.note.toLowerCase().includes(searchKeyword.value.toLowerCase());
+    return matchTab && matchSearch;
+  });
+});
+
+// 7. AG Grid 컬럼 정의
 const columnDefs = ref<ColDef[]>([
   { field: 'id', headerName: 'ID', width: 70, sortable: true },
-  { field: 'setting_key', headerName: '설정 키 (Key)', width: 160, sortable: true, filter: true },
+  { field: 'setting_key', headerName: '설정 키 (Key)', width: 180, sortable: true, filter: true },
   { field: 'category', headerName: '카테고리', width: 120 },
-  { field: 'setting_value', headerName: '설정 값 (Value)', width: 160 },
+  { field: 'setting_value', headerName: '설정 값 (Value)', width: 150 },
   { 
     field: 'status', 
     headerName: '상태 칩', 
@@ -62,12 +87,11 @@ const columnDefs = ref<ColDef[]>([
 ]);
 
 const loadData = async () => {
-  // 모의 CRUD 데이터 세트
   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 즉시방어 현금 목표' },
-    { id: 2, setting_key: 'RSI_UPPER_LIMIT', category: 'FACTOR', setting_value: '70.0', status: 'ACTIVE', updated_at: '2026-07-24 18:30', note: '과매수 상한 임계값' },
-    { id: 3, setting_key: 'ANTI_LATE_ENTRY', category: 'RISK', setting_value: 'ENABLED', status: 'WARNING', updated_at: '2026-07-22 10:15', note: '추격매수 방지 가드 레벨 2' },
-    { 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 룰' }
+    { 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: 2, setting_key: 'RSI_UPPER_LIMIT', category: 'FACTOR', setting_value: '70.0', status: 'ACTIVE', updated_at: '2026-07-24 18:30', note: '과매수 상한 임계값', attachments: [] },
+    { 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: 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: [] }
   ];
   if (items.value.length > 0) {
     selectedItem.value = JSON.parse(JSON.stringify(items.value[0]));
@@ -95,13 +119,13 @@ const openCreateModal = () => {
 
 const saveModalItem = () => {
   if (!modalItem.value.setting_key) {
-    alert('설정 키는 필수 입력 항목입니다.');
+    showToast('설정 키는 필수 입력 항목입니다.', 'warning');
     return;
   }
   items.value.unshift({ ...modalItem.value });
   selectedItem.value = { ...modalItem.value };
   isModalOpen.value = false;
-  alert('신규 설정 항목이 성공적으로 등록되었습니다.');
+  showToast('신규 설정 항목이 성공적으로 등록되었습니다.', 'success');
 };
 
 const saveDetailForm = () => {
@@ -109,7 +133,7 @@ const saveDetailForm = () => {
   const idx = items.value.findIndex(i => i.id === selectedItem.value?.id);
   if (idx !== -1) {
     items.value[idx] = JSON.parse(JSON.stringify(selectedItem.value));
-    alert('상세 변경 사항이 DB에 저장되었습니다.');
+    showToast('PostgreSQL 원장 설정 변경사항이 저장되었습니다.', 'success');
   }
 };
 
@@ -118,6 +142,7 @@ const deleteSelectedItem = () => {
   if (confirm(`[${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');
   }
 };
 
@@ -126,11 +151,21 @@ onMounted(loadData);
 
 <template>
   <div class="crud-masterpiece-container">
+    <!-- 토스트 알림 메시지 컴포넌트 -->
+    <transition name="fade">
+      <div v-if="toastMessage" class="toast-notification" :class="toastMessage.type">
+        <span class="toast-icon">
+          {{ toastMessage.type === 'success' ? '✅' : toastMessage.type === 'warning' ? '⚠️' : '🚨' }}
+        </span>
+        <span class="toast-text">{{ toastMessage.text }}</span>
+      </div>
+    </transition>
+
     <!-- Top Action & Search Bar -->
     <div class="crud-toolbar">
       <div class="toolbar-title">
-        <h3 class="title-text">⚙️ SCR-07: 시스템 캘리브레이션 & 올인원 CRUD 통합 매니저</h3>
-        <span class="subtitle-text">Master-Detail, AG Grid, Modal Dialog, 더존 6대 표준 컴포넌트 풀 세트</span>
+        <h3 class="title-text">⚙️ SCR-07: 올인원 고도화 CRUD 매니저</h3>
+        <span class="subtitle-text">Master-Detail, AG Grid, Toast, Tabs, Dropzone, Modal, 더존 6대 표준 컴포넌트</span>
       </div>
 
       <div class="toolbar-actions">
@@ -144,25 +179,40 @@ onMounted(loadData);
       </div>
     </div>
 
+    <!-- Category Filter Tabs Bar -->
+    <div class="category-tabs-bar">
+      <button v-for="tab in ['ALL', 'BUDGET', 'FACTOR', 'RISK', 'EXECUTION']" :key="tab"
+              class="tab-btn" :class="{ active: activeTab === tab }"
+              @click="activeTab = tab">
+        {{ tab === 'ALL' ? '전체 보기' : tab }}
+      </button>
+    </div>
+
     <!-- Main Split Section (60% Master Grid : 40% Detail Form) -->
     <div class="crud-split-section">
       <!-- Master Grid Panel (Left 60%) -->
       <div class="master-grid-panel">
         <div class="panel-header">
           <span class="panel-tag">Master Table</span>
-          <h4 class="panel-title">📋 시스템 원장 항목 리스트 (총 {{ items.length }}건)</h4>
+          <h4 class="panel-title">📋 원장 항목 리스트 (검색 결과 {{ filteredItems.length }}건 / 총 {{ items.length }}건)</h4>
         </div>
         <div class="panel-body">
           <QuantDataGrid 
             :columnDefs="columnDefs"
-            :rowData="items"
+            :rowData="filteredItems"
             rowSelection="single"
             @row-selected="handleRowSelect"
           />
         </div>
+        <!-- Pagination & Summary Footer -->
         <div class="panel-footer">
-          <span>선택된 ID: {{ selectedItem?.id || '없음' }}</span>
-          <QuantStatusChip :type="selectedItem?.status === 'ACTIVE' ? 'PASS' : 'WARNING'" :label="selectedItem?.status || 'N/A'" />
+          <div class="pagination-info">
+            <span>Page <strong>{{ currentPage }}</strong> of 1</span>
+          </div>
+          <div class="pagination-controls">
+            <button class="btn-page" disabled>◀ 이전</button>
+            <button class="btn-page" disabled>다음 ▶</button>
+          </div>
         </div>
       </div>
 
@@ -215,8 +265,13 @@ onMounted(loadData);
           </div>
 
           <div class="form-row">
-            <QuantLabel text="하네스 동기화" />
-            <QuantCheckBox v-model="selectedItem.id" label="PostgreSQL History-First 원장 동기화" />
+            <QuantLabel text="증빙 파일 첨부 드롭존" />
+            <div class="file-dropzone-box">
+              <span class="dropzone-text">📎 증빙 문서 drag & drop 또는 클릭</span>
+              <div v-if="selectedItem.attachments && selectedItem.attachments.length > 0" class="file-list">
+                <span v-for="f in selectedItem.attachments" :key="f" class="file-chip">📄 {{ f }}</span>
+              </div>
+            </div>
           </div>
 
           <div class="form-row">
@@ -269,13 +324,38 @@ onMounted(loadData);
   background-color: #F1F5F9;
   box-sizing: border-box;
   padding: 16px;
-  gap: 12px;
+  gap: 10px;
+  position: relative;
 }
 
+/* Toast Notification Styles */
+.toast-notification {
+  position: absolute;
+  top: 20px;
+  right: 24px;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 18px;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  font-weight: 700;
+  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.2);
+  color: white;
+}
+
+.toast-notification.success { background-color: #166534; }
+.toast-notification.warning { background-color: #D97706; }
+.toast-notification.error { background-color: #DC2626; }
+
+.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
+
 .crud-toolbar {
   background-color: #34495E;
   color: #FFFFFF;
-  padding: 12px 16px;
+  padding: 10px 16px;
   border-radius: 6px;
   display: flex;
   justify-content: space-between;
@@ -324,6 +404,31 @@ onMounted(loadData);
   font-size: 0.65rem;
 }
 
+.category-tabs-bar {
+  display: flex;
+  gap: 6px;
+  background: white;
+  padding: 6px 12px;
+  border: 1px solid #CBD5E1;
+  border-radius: 6px;
+}
+
+.tab-btn {
+  padding: 4px 12px;
+  border: none;
+  background: none;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: #64748B;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.tab-btn.active {
+  background-color: #2563EB;
+  color: white;
+}
+
 .crud-split-section {
   display: flex;
   flex: 1;
@@ -349,11 +454,7 @@ onMounted(loadData);
   cursor: col-resize;
 }
 
-.divider-handle {
-  width: 2px;
-  height: 30px;
-  background-color: #64748B;
-}
+.divider-handle { width: 2px; height: 30px; background-color: #64748B; }
 
 .detail-form-panel {
   flex: 4;
@@ -387,7 +488,7 @@ 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: 16px; }
+.panel-body { flex: 1; overflow-y: auto; padding: 12px; }
 
 .panel-footer {
   padding: 8px 16px;
@@ -399,20 +500,39 @@ onMounted(loadData);
   align-items: center;
 }
 
-.form-scroll-body {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
+.btn-page {
+  padding: 2px 8px;
+  font-size: 0.7rem;
+  border: 1px solid #CBD5E1;
+  background: white;
+  border-radius: 3px;
 }
 
-.form-row {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+.form-scroll-body { display: flex; flex-direction: column; gap: 10px; }
+.form-row { display: flex; flex-direction: column; gap: 4px; }
+
+.file-dropzone-box {
+  border: 1px dashed #CBD5E1;
+  background: #F8FAFC;
+  border-radius: 4px;
+  padding: 10px;
+  text-align: center;
+  font-size: 0.75rem;
+  color: #64748B;
+}
+
+.file-chip {
+  display: inline-block;
+  background: #E2E8F0;
+  color: #334155;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 0.7rem;
+  margin-top: 4px;
 }
 
 .btn-save-form {
-  margin-top: 16px;
+  margin-top: 12px;
   padding: 10px 0;
   background-color: #2563EB;
   color: white;