V13-FE-011: finalize search list layout slice

frontend/src/features/sell-decision/pages/SellDecisionPage.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import PageLayout from '../../../shared/ui/layouts/PageLayout.vue'
 import QueryStateBoundary from '../../../shared/ui/QueryStateBoundary.vue'
+import { KsButton, KsCheckbox, KsFormGrid, KsFormSection, KsNumberField } from '../../../shared/ui/components'
 import PolicyTracePanel from '../components/PolicyTracePanel.vue'
 import { useEvaluateResearchSellPolicy } from '../queries'
 import type { ResearchSellPolicyCommand } from '../api'
@@ -56,37 +58,19 @@ function retry() {
 </script>
 
 <template>
-  <main>
-    <header>
-      <h1>매도 정책 연구 콘솔</h1>
-      <p>
-        순수 정책 계약과 우선순위를 확인하는 연구 전용 화면입니다.
-        고객 제안·공개·주문 기능과 연결되지 않습니다.
-      </p>
-      <strong>RESEARCH_CANDIDATE_NOT_PRODUCTION · 자동주문 OFF</strong>
-    </header>
-
+  <PageLayout title="매도 정책 연구 콘솔" subtitle="순수 정책 계약과 우선순위를 확인하는 연구 전용 화면입니다. 고객 제안·공개·주문 기능과 연결되지 않습니다." status="RESEARCH_CANDIDATE_NOT_PRODUCTION · 자동주문 OFF">
     <form @submit.prevent="run">
-      <fieldset :disabled="isBusy">
-        <legend>연구 입력 벡터</legend>
-        <label>
-          <input v-model="hardImpairmentApproved" type="checkbox" />
-          Hard impairment 승인
-        </label>
-        <label>
-          <input v-model="capitalFloorBreached" type="checkbox" />
-          자본바닥 위반
-        </label>
-        <label>
-          보호선 이탈 ATR
-          <input v-model.number="gapBelowFloorAtr" type="number" min="0" step="0.1" />
-        </label>
-        <label>
-          연속 종가 이탈
-          <input v-model.number="consecutiveCloseBreaches" type="number" min="0" step="1" />
-        </label>
-        <button type="submit">정책 평가</button>
-      </fieldset>
+      <KsFormSection title="연구 입력 벡터">
+        <KsFormGrid :columns="2" aria-label="연구 입력 벡터">
+          <KsCheckbox v-model="hardImpairmentApproved" label="Hard impairment 승인" :disabled="isBusy" />
+          <KsCheckbox v-model="capitalFloorBreached" label="자본바닥 위반" :disabled="isBusy" />
+          <KsNumberField v-model="gapBelowFloorAtr" label="보호선 이탈 ATR" :min="0" :max-fraction-digits="2" :disabled="isBusy" />
+          <KsNumberField v-model="consecutiveCloseBreaches" label="연속 종가 이탈" :min="0" :max-fraction-digits="0" :disabled="isBusy" />
+        </KsFormGrid>
+        <template #actions>
+          <KsButton type="submit" label="정책 평가" :loading="isBusy" />
+        </template>
+      </KsFormSection>
     </form>
 
     <QueryStateBoundary
@@ -95,7 +79,7 @@ function retry() {
       :empty="!mutation.data.value"
       @retry="retry"
     >
-      <dl v-if="mutation.data.value">
+      <dl v-if="mutation.data.value" class="ks-stack">
         <dt>행동</dt><dd>{{ mutation.data.value.action }}</dd>
         <dt>정책</dt><dd>{{ mutation.data.value.policyId }}</dd>
         <dt>사유</dt><dd>{{ mutation.data.value.reasonCode }}</dd>
@@ -111,5 +95,5 @@ function retry() {
         :schema-version="mutation.data.value.policyTraceSchemaVersion"
       />
     </QueryStateBoundary>
-  </main>
+  </PageLayout>
 </template>