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,90 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RouterLink, useRouter } from 'vue-router'
+import { buildNavigationEntries, groupByModule, type NavigationEntry } from '../../../shared/shell/navigationCatalog'
+import { useScreenPreferenceStore } from '../../../shared/shell/screenPreferenceStore'
+
+const router = useRouter()
+const entries = computed(() => buildNavigationEntries(router.getRoutes()).filter(entry => !entry.internalOnly))
+const sections = computed(() => groupByModule(entries.value))
+const preference = useScreenPreferenceStore()
+
+const entryByScreenId = computed(() => new Map(entries.value.map(entry => [entry.screenId, entry])))
+const favorites = computed(() => preference.favoriteScreenIds.map(id => entryByScreenId.value.get(id)).filter((entry): entry is NavigationEntry => Boolean(entry)))
+const recents = computed(() => preference.recents.map(recent => entryByScreenId.value.get(recent.screenId)).filter((entry): entry is NavigationEntry => Boolean(entry)).filter(entry => !favorites.value.some(fav => fav.screenId === entry.screenId)))
+const workbench = computed(() => [...favorites.value, ...recents.value].slice(0, 10))
+</script>
+
+<template>
+  <article class="ks-home">
+    <header class="ks-home__header">
+      <div>
+        <p>K-ArtSell Aegis</p>
+        <h1>홈</h1>
+        <span>업무를 검색하고, 이어서 처리하고, 즐겨찾기로 자주 쓰는 화면에 바로 접근합니다.</span>
+      </div>
+    </header>
+
+    <section class="ks-home__section" aria-labelledby="ks-home-attention-title">
+      <header><h2 id="ks-home-attention-title">확인 필요</h2></header>
+      <p class="ks-home__empty">현재 확인할 작업이나 알림이 없습니다.</p>
+    </section>
+
+    <section class="ks-home__section" aria-labelledby="ks-home-workbench-title">
+      <header><h2 id="ks-home-workbench-title">바로 시작</h2><small>즐겨찾기 {{ favorites.length }} · 최근 {{ recents.length }}</small></header>
+      <div v-if="workbench.length" class="ks-home__workbench-list" role="list">
+        <RouterLink v-for="entry in workbench" :key="entry.screenId" :to="entry.path" role="listitem" class="ks-home__workbench-item">
+          <span class="source">{{ favorites.some(fav => fav.screenId === entry.screenId) ? '즐겨찾기' : '최근' }}</span>
+          <span class="main"><b>{{ entry.title }}</b><small>{{ entry.module }}</small></span>
+        </RouterLink>
+      </div>
+      <p v-else class="ks-home__empty">아직 즐겨찾기하거나 최근에 연 화면이 없습니다. 아래에서 화면을 찾아보세요.</p>
+    </section>
+
+    <section class="ks-home__all" aria-label="전체 업무">
+      <header><h2>모듈별 업무</h2></header>
+      <div class="ks-home__modules">
+        <section v-for="module in sections" :key="module.module" class="ks-home__module">
+          <header><strong>{{ module.module }}</strong><small>{{ module.entries.length }}개 화면</small></header>
+          <div class="ks-home__module-links">
+            <div v-for="entry in module.entries" :key="entry.screenId" class="ks-home__module-row">
+              <RouterLink class="launch" :to="entry.path">{{ entry.title }}</RouterLink>
+              <button
+                v-if="entry.favoriteAllowed"
+                type="button"
+                class="favorite"
+                :aria-pressed="preference.isFavorite(entry.screenId)"
+                :aria-label="preference.isFavorite(entry.screenId) ? `${entry.title} 즐겨찾기 해제` : `${entry.title} 즐겨찾기 추가`"
+                @click="preference.toggleFavorite(entry.screenId)"
+              >{{ preference.isFavorite(entry.screenId) ? '★' : '☆' }}</button>
+            </div>
+          </div>
+        </section>
+      </div>
+    </section>
+  </article>
+</template>
+
+<style scoped>
+.ks-home { display: grid; gap: var(--ks-space-4); max-width: var(--ks-content-max); margin: 0 auto; }
+.ks-home__header p, .ks-home__header span { margin: 0; color: var(--ks-color-text-muted); font-size: var(--ks-font-caption); }
+.ks-home__header h1 { margin: 0; font-size: var(--ks-font-page); }
+.ks-home__section, .ks-home__all { border: 1px solid var(--ks-color-border); border-radius: var(--ks-radius-md); background: var(--ks-color-surface); }
+.ks-home__section > header, .ks-home__all > header { display: flex; align-items: center; justify-content: space-between; gap: var(--ks-space-3); padding: var(--ks-space-2) var(--ks-space-3); border-bottom: 1px solid var(--ks-color-border); }
+.ks-home__section > header h2, .ks-home__all > header h2 { margin: 0; font-size: var(--ks-font-section); }
+.ks-home__section > header small { color: var(--ks-color-text-muted); font-size: var(--ks-font-caption); }
+.ks-home__empty { margin: 0; padding: var(--ks-space-4) var(--ks-space-3); color: var(--ks-color-text-muted); font-size: var(--ks-font-body); }
+.ks-home__workbench-list { display: flex; flex-direction: column; }
+.ks-home__workbench-item { display: grid; grid-template-columns: 5rem minmax(0, 1fr); align-items: center; gap: var(--ks-space-2); padding: var(--ks-space-2) var(--ks-space-3); border-bottom: 1px solid var(--ks-color-border); text-decoration: none; color: inherit; }
+.ks-home__workbench-item:last-child { border-bottom: 0; }
+.ks-home__workbench-item .source { font-size: var(--ks-font-caption); font-weight: 600; color: var(--ks-color-action); }
+.ks-home__workbench-item .main small { display: block; color: var(--ks-color-text-muted); font-size: var(--ks-font-caption); }
+.ks-home__modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
+.ks-home__module { border-right: 1px solid var(--ks-color-border); border-bottom: 1px solid var(--ks-color-border); }
+.ks-home__module > header { display: flex; align-items: center; justify-content: space-between; padding: var(--ks-space-2) var(--ks-space-3); border-bottom: 1px solid var(--ks-color-border); }
+.ks-home__module > header small { color: var(--ks-color-text-muted); font-size: var(--ks-font-caption); }
+.ks-home__module-row { display: flex; align-items: center; }
+.ks-home__module-row .launch { flex: 1; padding: var(--ks-space-2) var(--ks-space-3); text-decoration: none; color: inherit; }
+.ks-home__module-row .favorite { width: 2rem; border: 0; background: transparent; color: var(--ks-color-text-muted); }
+.ks-home__module-row .favorite[aria-pressed='true'] { color: var(--ks-color-action); }
+</style>