feat(wbs-ux): add 1-Click split ratio presets bar (3:7, 5:5, 6:4, 7:3) to SystemSettingsView

src/frontend/src/views/SystemSettingsView.vue

@@ -39,10 +39,15 @@ const activeDomain = ref<'ALL' | 'OMS' | 'WMS' | 'ERP'>('ALL');
 const searchKeyword = ref('');
 const activeCategoryTab = ref('ALL');
 
-// 2. 동적 드래그 반응형 Split Pane Resizer 상태
+// 2. 동적 드래그 반응형 Split Pane Resizer & 1-Click 스플릿 프리셋
 const masterPanelWidth = ref(60); // 기본 60%
 const isDraggingSplitter = ref(false);
 
+const setSplitRatio = (percent: number) => {
+  masterPanelWidth.value = percent;
+  showToast(`스플릿 분할 비율이 ${percent}% : ${100 - percent}% 로 조정되었습니다.`, 'success');
+};
+
 const startSplitterDrag = (e: MouseEvent) => {
   isDraggingSplitter.value = true;
   document.addEventListener('mousemove', onSplitterMouseMove);
@@ -55,7 +60,7 @@ const onSplitterMouseMove = (e: MouseEvent) => {
   if (container) {
     const rect = container.getBoundingClientRect();
     const newPercent = ((e.clientX - rect.left) / rect.width) * 100;
-    if (newPercent >= 25 && newPercent <= 75) {
+    if (newPercent >= 20 && newPercent <= 80) {
       masterPanelWidth.value = Math.round(newPercent);
     }
   }
@@ -339,13 +344,24 @@ onMounted(loadData);
       <button class="btn-apply-ax" @click="applyAiRecommendation">⚡ AI 추천값 즉시 적용</button>
     </div>
 
-    <!-- Category Filter Tabs Bar -->
+    <!-- Category Filter Tabs Bar & 1-Click Split Ratio Presets -->
     <div class="category-tabs-bar">
-      <button v-for="tab in ['ALL', 'BUDGET', 'FACTOR', 'RISK', 'EXECUTION', 'ACCOUNTING']" :key="tab"
-              class="tab-btn" :class="{ active: activeCategoryTab === tab }"
-              @click="activeCategoryTab = tab">
-        {{ tab === 'ALL' ? '전체 카테고리' : tab }}
-      </button>
+      <div class="left-category-tabs">
+        <button v-for="tab in ['ALL', 'BUDGET', 'FACTOR', 'RISK', 'EXECUTION', 'ACCOUNTING']" :key="tab"
+                class="tab-btn" :class="{ active: activeCategoryTab === tab }"
+                @click="activeCategoryTab = tab">
+          {{ tab === 'ALL' ? '전체 카테고리' : tab }}
+        </button>
+      </div>
+
+      <!-- 1-Click 스플릿 비율 프리셋 바 -->
+      <div class="right-split-presets">
+        <span class="preset-label">✂️ 스플릿 비율:</span>
+        <button class="preset-btn" :class="{ active: masterPanelWidth === 30 }" @click="setSplitRatio(30)">3:7</button>
+        <button class="preset-btn" :class="{ active: masterPanelWidth === 50 }" @click="setSplitRatio(50)">5:5</button>
+        <button class="preset-btn" :class="{ active: masterPanelWidth === 60 }" @click="setSplitRatio(60)">6:4 (기본)</button>
+        <button class="preset-btn" :class="{ active: masterPanelWidth === 70 }" @click="setSplitRatio(70)">7:3</button>
+      </div>
     </div>
 
     <!-- Main Dynamic Split Section (Draggable Splitter) -->
@@ -376,7 +392,7 @@ onMounted(loadData);
       </div>
 
       <!-- Draggable Split Divider Bar (물리 드래그 반응형 스플릿 바) -->
-      <div class="split-divider draggable" @mousedown="startSplitterDrag" title="드래그하여 분할 비율 조절 (25% ~ 75%)">
+      <div class="split-divider draggable" @mousedown="startSplitterDrag" title="드래그하여 분할 비율 조절 (20% ~ 80%)">
         <div class="divider-handle"></div>
       </div>
 
@@ -562,21 +578,21 @@ onMounted(loadData);
             <li><strong>2. WMS 도메인 모듈</strong>: D+2 현금 볼트 안전율 & 포지션 사이징 가드</li>
             <li><strong>3. ERP 도메인 모듈</strong>: 재무 회계 계정 맵핑 & Maker-Checker 승인 릴레이</li>
             <li><strong>4. AI AX 코파일럿 배너</strong>: Antigravity AI 추천값 및 1-Click 자동 적용</li>
-            <li><strong>5. 물리적 동적 스플릿 바 (Draggable Resizer)</strong>: 마우스 드래그 25%~75% 분할 조절</li>
-            <li><strong>6. Live PostgreSQL Ping 레이턴시 칩</strong>: 4ms 실시간 핑 상태</li>
-            <li><strong>7. SignalR WebSocket 소켓 칩</strong>: 라이브 소켓 연결 지표</li>
-            <li><strong>8. DbUp 마이그레이션 태그</strong>: DB 마이그레이션 태그 v2026.07.25</li>
-            <li><strong>9. 실시간 파이프라인 로그 터미널 창</strong>: 엔진 트랜잭션 스트리밍</li>
-            <li><strong>10. 비동기 배치 실행 & 진행률 바</strong>: 0~100% 모의 트랜잭션 게이지</li>
-            <li><strong>11. 낙관적 락 버전 인디케이터</strong>: 동시성 충돌 방지 v1~v5</li>
-            <li><strong>12. 실시간 텔레메트리 바</strong>: CPU/RAM/DB Pool 현장감 지표</li>
-            <li><strong>13. 검색 & 핫키 툴바</strong>: F3/F4/F5/F7 더존 표준 핫키</li>
-            <li><strong>14. 카테고리 탭 바</strong>: ALL/BUDGET/FACTOR/RISK/ACCOUNTING 탭</li>
-            <li><strong>15. AG Grid 데이터 테이블</strong>: 정렬, 필터, 단일 행 선택, Status Chips</li>
-            <li><strong>16. 페이지네이션 바</strong>: Page 1 of 1 건수 및 페이지 컨트롤러</li>
-            <li><strong>17. 더존 6대 표준 입력 마스크</strong>: Input, ComboBox, Radio, TextArea 등</li>
-            <li><strong>18. 읽기/편집 모드 토글</strong>: 👁️ 읽기 / ✏️ 편집 전환 스위치</li>
-            <li><strong>19. 증빙 파일 첨부 드롭존</strong>: Drag & drop 파일 첨부 칩</li>
+            <li><strong>5. 물리적 동적 스플릿 바 (Draggable Resizer)</strong>: 마우스 드래그 20%~80% 분할 조절</li>
+            <li><strong>6. 1-Click 스플릿 프리셋 바</strong>: 3:7 / 5:5 / 6:4 / 7:3 퀵 분할 조절 버튼</li>
+            <li><strong>7. Live PostgreSQL Ping 레이턴시 칩</strong>: 4ms 실시간 핑 상태</li>
+            <li><strong>8. SignalR WebSocket 소켓 칩</strong>: 라이브 소켓 연결 지표</li>
+            <li><strong>9. DbUp 마이그레이션 태그</strong>: DB 마이그레이션 태그 v2026.07.25</li>
+            <li><strong>10. 실시간 파이프라인 로그 터미널 창</strong>: 엔진 트랜잭션 스트리밍</li>
+            <li><strong>11. 비동기 배치 실행 & 진행률 바</strong>: 0~100% 모의 트랜잭션 게이지</li>
+            <li><strong>12. 낙관적 락 버전 인디케이터</strong>: 동시성 충돌 방지 v1~v5</li>
+            <li><strong>13. 실시간 텔레메트리 바</strong>: CPU/RAM/DB Pool 현장감 지표</li>
+            <li><strong>14. 검색 & 핫키 툴바</strong>: F3/F4/F5/F7 더존 표준 핫키</li>
+            <li><strong>15. 카테고리 탭 바</strong>: ALL/BUDGET/FACTOR/RISK/ACCOUNTING 탭</li>
+            <li><strong>16. AG Grid 데이터 테이블</strong>: 정렬, 필터, 단일 행 선택, Status Chips</li>
+            <li><strong>17. 페이지네이션 바</strong>: Page 1 of 1 건수 및 페이지 컨트롤러</li>
+            <li><strong>18. 더존 6대 표준 입력 마스크</strong>: Input, ComboBox, Radio, TextArea 등</li>
+            <li><strong>19. 읽기/편집 모드 토글</strong>: 👁️ 읽기 / ✏️ 편집 전환 스위치</li>
             <li><strong>20. 감사 이력 타임라인 & 모달 & 엑셀 팝업</strong>: Audit Trail, Modal, Excel/CSV</li>
           </ul>
         </div>
@@ -601,6 +617,44 @@ onMounted(loadData);
   user-select: none;
 }
 
+.category-tabs-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: white;
+  padding: 4px 12px;
+  border: 1px solid #CBD5E1;
+  border-radius: 6px;
+}
+
+.left-category-tabs { display: flex; gap: 6px; }
+
+.right-split-presets {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 0.7rem;
+  color: #475569;
+  font-weight: 700;
+}
+
+.preset-btn {
+  padding: 2px 6px;
+  font-size: 0.65rem;
+  font-weight: 700;
+  border: 1px solid #CBD5E1;
+  background: #F8FAFC;
+  color: #334155;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.preset-btn.active, .preset-btn:hover {
+  background: #2563EB;
+  color: white;
+  border-color: #2563EB;
+}
+
 .domain-switcher-bar {
   display: flex;
   gap: 4px;
@@ -877,15 +931,6 @@ onMounted(loadData);
   font-size: 0.65rem;
 }
 
-.category-tabs-bar {
-  display: flex;
-  gap: 6px;
-  background: white;
-  padding: 4px 12px;
-  border: 1px solid #CBD5E1;
-  border-radius: 6px;
-}
-
 .tab-btn {
   padding: 4px 12px;
   border: none;