style(fe): standardize Model Operations & Versioning page UI components and layout

frontend/src/features/model-operations/components/AutomationBoundaryPanel.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { KsStatusTag } from '../../../shared/ui/components'
+
 defineProps<{
   algorithmStatus: string
   orderCapability: string
@@ -7,25 +9,74 @@ defineProps<{
 </script>
 
 <template>
-  <section aria-labelledby="automation-boundary-title">
-    <h2 id="automation-boundary-title">자동화 경계</h2>
-    <dl>
-      <div>
-        <dt>알고리즘 상태</dt>
-        <dd>{{ algorithmStatus }}</dd>
+  <div class="boundary-panel">
+    <h3 class="panel-title">🛡️ 모델 운영 및 자동화 통제 경계</h3>
+    <div class="boundary-grid">
+      <div class="boundary-item">
+        <span class="label">알고리즘 상태</span>
+        <KsStatusTag :value="algorithmStatus" severity="info" />
       </div>
-      <div>
-        <dt>주문 Capability</dt>
-        <dd>{{ orderCapability }}</dd>
+      <div class="boundary-item">
+        <span class="label">자동주문 제출 Capability</span>
+        <KsStatusTag :value="orderCapability" severity="danger" />
       </div>
-      <div>
-        <dt>모델 변경</dt>
-        <dd>{{ modelMutationBoundary }}</dd>
+      <div class="boundary-item">
+        <span class="label">모델 변이 (Mutation) 경계</span>
+        <KsStatusTag :value="modelMutationBoundary" severity="warning" />
       </div>
-    </dl>
-    <p>
-      스케줄러는 평가 증거와 개선 제안만 생성합니다. 모델 승격·롤백·임계값 변경은 독립 검증과
-      maker-checker 승인을 거쳐야 합니다.
-    </p>
-  </section>
+    </div>
+    <div class="boundary-notice">
+      ℹ️ <strong>통제 지침:</strong> 스케줄러는 평가 증거 및 개선 제안만 생성합니다. 모델 승격·롤백·임계값 변경은 독립 검증과 Maker-Checker 승인을 거쳐야 합니다.
+    </div>
+  </div>
 </template>
+
+<style scoped>
+.boundary-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-space-3);
+  padding: var(--ks-space-3);
+  background: var(--ks-color-surface);
+  border: 1px solid var(--ks-color-border);
+  border-radius: var(--ks-radius-sm);
+}
+
+.panel-title {
+  margin: 0;
+  font-size: var(--ks-font-section);
+  font-weight: 700;
+  color: var(--ks-color-neutral-800);
+}
+
+.boundary-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+  gap: var(--ks-space-3);
+}
+
+.boundary-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-space-1);
+  padding: var(--ks-space-2) var(--ks-space-3);
+  background: var(--ks-color-canvas);
+  border: 1px solid var(--ks-color-neutral-200);
+  border-radius: var(--ks-radius-sm);
+}
+
+.boundary-item .label {
+  font-size: var(--ks-font-caption);
+  color: var(--ks-color-neutral-600);
+  font-weight: 600;
+}
+
+.boundary-notice {
+  font-size: var(--ks-font-caption);
+  color: #1e3a8a;
+  background: #eff6ff;
+  border: 1px solid #bfdbfe;
+  padding: var(--ks-space-2) var(--ks-space-3);
+  border-radius: var(--ks-radius-sm);
+}
+</style>