KArtSell.Aegis/frontend/src/features/home/pages/HomePage.vue

<script setup lang="ts">
import { computed, ref } from 'vue'
import { RouterLink, useRouter } from 'vue-router'
import { buildNavigationEntries, groupByModule, type NavigationEntry } from '../../../shared/shell/navigationCatalog'
import { useScreenPreferenceStore } from '../../../shared/shell/screenPreferenceStore'

interface AttentionItem {
  id: string
  title: string
  module: string
  count: number
  path: string
  severity: 'high' | 'medium' | 'low'
}

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))

// DEBT-030: Attention items aggregation
// Each feature module should provide:
//   1. Feature query hook (e.g., useFailedJobsQuery(), usePendingApprovalsQuery())
//   2. Aggregator composable that collects counts from all features
// For now, placeholder structure; implement feature-by-feature as query hooks become stable
const attentionItems = ref<AttentionItem[]>([])

// TODO (DEBT-030): Hook attention sources from each feature
// Examples:
//   - model-operations: pending approvals, failed shadow runs
//   - sell-decision: pending execution, failed reconciliation
//   - data-quality: quarantined jobs
//   - portfolio: reconciliation breaks
// Wire via composable once feature query hooks stabilize
</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>
      <div v-if="attentionItems.length > 0" class="ks-home__attention-list" role="list">
        <RouterLink v-for="item in attentionItems" :key="item.id" :to="item.path" role="listitem" class="ks-home__attention-item" :class="`severity-${item.severity}`">
          <span class="badge">{{ item.count }}</span>
          <span class="main"><b>{{ item.title }}</b><small>{{ item.module }}</small></span>
        </RouterLink>
      </div>
      <p v-else 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); }
.ks-home__attention-list { display: flex; flex-direction: column; }
.ks-home__attention-item { display: grid; grid-template-columns: 3rem 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__attention-item:last-child { border-bottom: 0; }
.ks-home__attention-item .badge { font-size: var(--ks-font-body); font-weight: 600; padding: 0.25rem 0.5rem; border-radius: var(--ks-radius-sm); background: var(--ks-color-surface-secondary); text-align: center; }
.ks-home__attention-item.severity-high .badge { background: rgb(239, 68, 68); color: white; }
.ks-home__attention-item.severity-medium .badge { background: rgb(251, 146, 60); color: white; }
.ks-home__attention-item.severity-low .badge { background: var(--ks-color-surface-secondary); color: var(--ks-color-text-muted); }
.ks-home__attention-item .main small { display: block; color: var(--ks-color-text-muted); font-size: var(--ks-font-caption); }
</style>