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,35 @@
+<script setup lang="ts">
+import type { KbxUserNotification } from '@kbx/contracts'
+
+defineProps<{ notifications: KbxUserNotification[] }>()
+const emit = defineEmits<{ open: [KbxUserNotification]; read: [string] }>()
+</script>
+
+<template>
+  <section class="kbx-notification-center" aria-label="알림 센터">
+    <button
+      v-for="item in notifications"
+      :key="item.id"
+      type="button"
+      class="notice"
+      :class="[`is-${item.severity}`, { unread: !item.readAt }]"
+      @click="emit('open', item); emit('read', item.id)"
+    >
+      <span class="marker" aria-hidden="true" />
+      <span class="copy"><strong>{{ item.title }}</strong><small v-if="item.message">{{ item.message }}</small></span>
+      <time>{{ new Date(item.createdAt).toLocaleString('ko-KR') }}</time>
+    </button>
+    <p v-if="notifications.length === 0" class="empty">새 알림이 없습니다.</p>
+  </section>
+</template>
+
+<style scoped>
+.kbx-notification-center { display:grid; gap:4px; }
+.notice { display:grid; grid-template-columns:8px 1fr auto; align-items:start; gap:8px; padding:10px; border:1px solid transparent; background:transparent; text-align:left; cursor:pointer; }
+.notice:hover { background:var(--kbx-color-surface-hover); }
+.marker { width:6px; height:6px; margin-top:6px; border-radius:50%; background:var(--kbx-color-text-muted); }
+.unread .marker { background:var(--kbx-color-primary); }
+.copy { display:grid; gap:2px; } small,time,.empty { color:var(--kbx-color-text-muted); font-size:var(--kbx-font-xs); }
+time { white-space:nowrap; }
+.empty { margin:0; padding:12px; }
+</style>