feat(fe): standardize empty data state with EmptyStatePlaceholder component and AGENTS.md rule

frontend/src/shared/ui/DataGridShell.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { UiGridColumn } from './adapter/contracts'
-import { KsDataGrid, KsPaginator } from './components'
+import { KsDataGrid, KsPaginator, SkeletonLoader, EmptyStatePlaceholder } from './components'
 
 const props = withDefaults(defineProps<{
   rows: unknown[]
@@ -11,14 +11,14 @@ const props = withDefaults(defineProps<{
   page?: number
   pageSize?: number
   total?: number
-}>(), { loading: false, emptyMessage: '표시할 데이터가 없습니다.', height: 'calc(100vh - 230px)' })
+}>(), { loading: false, emptyMessage: '검색 조건에 해당하거나 조회된 데이터가 없습니다.', height: 'calc(100vh - 230px)' })
 const emit = defineEmits<{ pageChange: [value: { page: number; pageSize: number }] }>()
 </script>
 
 <template>
   <section class="ks-grid-shell-section" aria-label="데이터 표" :aria-busy="loading">
-    <p v-if="loading">데이터를 불러오는 중입니다.</p>
-    <p v-else-if="rows.length === 0">{{ emptyMessage }}</p>
+    <SkeletonLoader v-if="loading" type="table" :rows="6" />
+    <EmptyStatePlaceholder v-else-if="rows.length === 0" :message="emptyMessage" />
     <KsDataGrid v-else :rows="rows" :columns="columns" :height="props.height" />
     <KsPaginator
       v-if="props.page !== undefined && props.pageSize !== undefined && props.total !== undefined"

frontend/src/shared/ui/QueryStateBoundary.vue

@@ -2,6 +2,7 @@
 import KsButton from './components/KsButton.vue'
 import KsInlineMessage from './components/KsInlineMessage.vue'
 import SkeletonLoader from './components/SkeletonLoader.vue'
+import EmptyStatePlaceholder from './components/EmptyStatePlaceholder.vue'
 const props = defineProps<{
   loading: boolean
   processing?: boolean
@@ -34,7 +35,7 @@ const emit = defineEmits<{ retry: [] }>()
       <KsButton label="같은 요청 다시 시도" severity="secondary" @click="emit('retry')" />
       <small v-if="correlationId">Correlation: {{ correlationId }}</small>
     </div>
-    <KsInlineMessage v-else-if="props.empty" severity="info" message="표시할 데이터가 없습니다." />
+    <EmptyStatePlaceholder v-else-if="props.empty" />
     <template v-else>
       <KsInlineMessage v-if="props.partial" severity="warning" message="일부 데이터만 표시하고 있습니다. 완전성 경고를 확인하세요." />
       <KsInlineMessage v-if="props.warning" severity="warning" :message="props.warning" />

frontend/src/shared/ui/components/EmptyStatePlaceholder.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+defineProps<{
+  title?: string
+  message?: string
+  icon?: string
+  actionLabel?: string
+}>()
+
+const emit = defineEmits<{ action: [] }>()
+</script>
+
+<template>
+  <div class="ks-empty-state" role="status" aria-label="조회된 데이터 없음">
+    <div class="ks-empty-state__icon">{{ icon ?? '📭' }}</div>
+    <div class="ks-empty-state__title">{{ title ?? '조회된 데이터가 없습니다' }}</div>
+    <p class="ks-empty-state__message">{{ message ?? '검색 조건을 변경하거나 신규 데이터를 생성해 주세요.' }}</p>
+    <button v-if="actionLabel" class="ks-empty-state__action" @click="emit('action')">
+      {{ actionLabel }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.ks-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--ks-space-4);
+  text-align: center;
+  background: #fff;
+  border: 1px dashed var(--ks-color-neutral-300);
+  border-radius: var(--ks-radius-md);
+  min-height: 220px;
+  flex: 1;
+  width: 100%;
+}
+
+.ks-empty-state__icon {
+  font-size: 32px;
+  line-height: 1;
+  margin-bottom: var(--ks-space-2);
+}
+
+.ks-empty-state__title {
+  font-size: var(--ks-font-body);
+  font-weight: 700;
+  color: var(--ks-color-neutral-800);
+  margin-bottom: var(--ks-space-1);
+}
+
+.ks-empty-state__message {
+  font-size: var(--ks-font-caption);
+  color: var(--ks-color-neutral-600);
+  margin: 0;
+  max-width: 360px;
+}
+
+.ks-empty-state__action {
+  margin-top: var(--ks-space-3);
+  padding: 4px 12px;
+  font-size: var(--ks-font-caption);
+  background: var(--ks-color-action);
+  color: #fff;
+  border: none;
+  border-radius: var(--ks-radius-sm);
+  cursor: pointer;
+}
+.ks-empty-state__action:hover {
+  background: var(--ks-color-action-hover);
+}
+</style>

frontend/src/shared/ui/components/index.ts

@@ -1,4 +1,5 @@
 export { default as SkeletonLoader } from './SkeletonLoader.vue'
+export { default as EmptyStatePlaceholder } from './EmptyStatePlaceholder.vue'
 export { default as KsButton } from './KsButton.vue'
 export { default as KsTextField } from './KsTextField.vue'
 export { default as KsTextArea } from './KsTextArea.vue'