feat(wbs-ux): add 12-component guide spec modal button to SystemSettingsView toolbar

src/frontend/src/views/SystemSettingsView.vue

@@ -38,11 +38,12 @@ const activeTab = ref('ALL');
 // 2. Master-Detail 바인딩 및 편집 모드 토글 상태
 const items = ref<SettingItem[]>([]);
 const selectedItem = ref<SettingItem | null>(null);
-const isEditMode = ref(false); // Readonly vs Edit Mode Toggle
+const isEditMode = ref(false);
 
 // 3. 페이지네이션 및 엑셀 드롭다운 상태
 const currentPage = ref(1);
 const showExportMenu = ref(false);
+const isGuideModalOpen = ref(false); // 12대 컴포넌트 명세 팝업 모달
 
 // 4. 토스트 알림 시스템 상태
 const toastMessage = ref<{ text: string; type: 'success' | 'warning' | 'error' } | null>(null);
@@ -124,7 +125,7 @@ const loadData = async () => {
 const handleRowSelect = (rows: any[]) => {
   if (rows.length > 0) {
     selectedItem.value = JSON.parse(JSON.stringify(rows[0]));
-    isEditMode.value = false; // 선택 시 읽기 모드로 재설정
+    isEditMode.value = false;
   }
 };
 
@@ -156,7 +157,6 @@ const saveDetailForm = () => {
   if (!selectedItem.value) return;
   const idx = items.value.findIndex(i => i.id === selectedItem.value?.id);
   if (idx !== -1) {
-    // 변경 이력 기록 추가
     if (!selectedItem.value.audit_history) selectedItem.value.audit_history = [];
     selectedItem.value.audit_history.unshift({
       timestamp: new Date().toISOString().slice(0, 16).replace('T', ' '),
@@ -201,11 +201,12 @@ onMounted(loadData);
     <!-- Top Action & Search Bar -->
     <div class="crud-toolbar">
       <div class="toolbar-title">
-        <h3 class="title-text">⚙️ SCR-07: 올인원 궁극의 CRUD 매니저</h3>
+        <h3 class="title-text">⚙️ SCR-07: 올인원 12대 CRUD 마스터피스 매니저</h3>
         <span class="subtitle-text">Master-Detail, AG Grid, Toast, Tabs, Audit Timeline, Mode Switch, Modal, 더존 6대 표준 컴포넌트</span>
       </div>
 
       <div class="toolbar-actions">
+        <button class="btn-guide-spec" @click="isGuideModalOpen = true">💡 12대 CRUD 명세 팝업</button>
         <div class="search-box">
           <input type="text" class="search-input" placeholder="설정 키/설명 검색..." v-model="searchKeyword" />
         </div>
@@ -213,7 +214,6 @@ onMounted(loadData);
         <button class="btn-action btn-create" @click="openCreateModal"><span class="badge-key">F4</span>신규 등록</button>
         <button class="btn-action btn-delete" @click="deleteSelectedItem"><span class="badge-key">F5</span>삭제</button>
         
-        <!-- 엑셀 내보내기 팝업 드롭다운 -->
         <div class="export-dropdown-wrapper">
           <button class="btn-action btn-excel" @click="showExportMenu = !showExportMenu">
             <span class="badge-key">F7</span>엑셀 내보내기 ▼
@@ -380,6 +380,35 @@ onMounted(loadData);
         </div>
       </div>
     </div>
+
+    <!-- 12대 CRUD 컴포넌트 명세 가이드 Modal -->
+    <div class="modal-backdrop" v-if="isGuideModalOpen">
+      <div class="modal-dialog guide-modal">
+        <div class="modal-header">
+          <h4 class="modal-title">💡 이 화면에 이식된 12대 CRUD 컴포넌트 라인업</h4>
+          <button class="btn-close-modal" @click="isGuideModalOpen = false">✕</button>
+        </div>
+        <div class="modal-body guide-body">
+          <ul class="guide-list">
+            <li><strong>1. 검색 & 핫키 툴바</strong>: F3/F4/F5/F7 더존 표준 핫키 탑재</li>
+            <li><strong>2. 카테고리 탭 바</strong>: ALL, BUDGET, FACTOR 등 1-Click 필터</li>
+            <li><strong>3. 6:4 Master-Detail Split Pane</strong>: 8px 물리 구분선 뷰포트</li>
+            <li><strong>4. AG Grid 데이터 테이블</strong>: 바인딩, 필터, 정렬, Status Chips</li>
+            <li><strong>5. 페이지네이션 바</strong>: 건수 및 페이지 제어 바</li>
+            <li><strong>6. 더존 6대 표준 입력 컴포넌트</strong>: Input, ComboBox, Radio 등</li>
+            <li><strong>7. 읽기/편집 모드 토글</strong>: 👁️/✏️ 안전 모드 스위치</li>
+            <li><strong>8. 파일 첨부 드롭존</strong>: Drag & drop 증빙 서류 칩</li>
+            <li><strong>9. 감사 이력 타임라인</strong>: 수정자/일시 Audit Trail 스캔</li>
+            <li><strong>10. 신규 등록 Modal</strong>: 팝업 대화상자 폼 세트</li>
+            <li><strong>11. 플로팅 토스트 알림</strong>: 3초 자동소멸 성공/경고 알림</li>
+            <li><strong>12. 내보내기 팝업</strong>: Excel (.xlsx) / CSV 선택 메뉴</li>
+          </ul>
+        </div>
+        <div class="modal-footer">
+          <button class="btn-modal-cancel" @click="isGuideModalOpen = false">닫기</button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -395,6 +424,23 @@ onMounted(loadData);
   position: relative;
 }
 
+.btn-guide-spec {
+  background: #8E44AD;
+  color: white;
+  border: none;
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  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; }
+
 /* Toast Notification Styles */
 .toast-notification {
   position: absolute;