V13-FE-011: finalize search list layout slice

2026-08-09 02:57:26 +09:00
parent 9efd202e76
commit 6422cb2b13
984 changed files with 120811 additions and 1498 deletions
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { KbxHelpContent } from '@kbx/contracts'
+
+defineProps<{ content: KbxHelpContent }>()
+</script>
+
+<template>
+  <aside class="kbx-help-panel">
+    <header><h2>{{ content.title }}</h2></header>
+    <p>{{ content.purpose }}</p>
+    <section v-if="content.steps?.length">
+      <h3>사용순서</h3>
+      <ol><li v-for="step in content.steps" :key="step">{{ step }}</li></ol>
+    </section>
+    <section v-if="content.shortcuts?.length">
+      <h3>단축키</h3>
+      <dl><template v-for="item in content.shortcuts" :key="item.key"><dt>{{ item.key }}</dt><dd>{{ item.description }}</dd></template></dl>
+    </section>
+    <section v-if="content.cautions?.length">
+      <h3>주의</h3>
+      <ul><li v-for="item in content.cautions" :key="item">{{ item }}</li></ul>
+    </section>
+  </aside>
+</template>
+
+<style scoped>
+.kbx-help-panel { width:min(390px, 92vw); padding:16px; font-size:14px; line-height:1.55; }
+h2 { margin:0 0 8px; font-size:18px; } h3 { margin:18px 0 6px; font-size:14px; } ol, ul { padding-left:20px; } dl { display:grid; grid-template-columns:72px 1fr; gap:6px 10px; } dt { font-weight:700; } dd { margin:0; }
+</style>