From 2893029d8d15624b73b06d92dbd77ed5701735ff Mon Sep 17 00:00:00 2001
From: hyungi <hyun49196@gmail.com>
Date: Fri, 15 May 2026 05:04:22 +0000
Subject: [PATCH] feat(digest): Phase 4.5 SvelteKit UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

/digest 라우트 신규 — Phase 4 (7일 rolling country×topic batch digest) backend
운영 데이터 사용자 진입점. 최신 1건 (GET /api/digest/latest) 표시 + country
pill 탭 + topic 카드 (rank/label/summary/article_count/importance, fallback
Badge 조건부).

- frontend/src/routes/digest/+page.svelte 신규 (123 LOC) — Svelte 5 runes,
  Tabs snippet 패턴, 404 EmptyState 흡수, country reload 보호.
- frontend/src/routes/+layout.svelte nav 1줄 추가 (아침 브리핑 뒤).

후속 별 PR: date picker, article click 라우팅, 국기+한국어 dictionary,
Phase 4.6 feedback loop.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/routes/+layout.svelte      |   1 +
 frontend/src/routes/digest/+page.svelte | 123 ++++++++++++++++++++++++
 2 files changed, 124 insertions(+)
 create mode 100644 frontend/src/routes/digest/+page.svelte

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 169b508..6393d8c 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -99,6 +99,7 @@
           <Button variant="ghost" size="sm" href="/memos" class={isActive('/memos') ? 'text-accent' : ''}>메모</Button>
           <Button variant="ghost" size="sm" href="/study" class={isActive('/study') ? 'text-accent' : ''}>공부</Button>
           <Button variant="ghost" size="sm" href="/news" class={isActive('/news') ? 'text-accent' : ''}>아침 브리핑</Button>
+          <Button variant="ghost" size="sm" href="/digest" class={isActive('/digest') ? 'text-accent' : ''}>다이제스트</Button>
           <Button variant="ghost" size="sm" href="/inbox" class={isActive('/inbox') ? 'text-accent' : ''}>Inbox</Button>
           <div class="relative">
             <IconButton
diff --git a/frontend/src/routes/digest/+page.svelte b/frontend/src/routes/digest/+page.svelte
new file mode 100644
index 0000000..5874214
--- /dev/null
+++ b/frontend/src/routes/digest/+page.svelte
@@ -0,0 +1,123 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { api, type ApiError } from '$lib/api';
+  import Card from '$lib/components/ui/Card.svelte';
+  import Skeleton from '$lib/components/ui/Skeleton.svelte';
+  import EmptyState from '$lib/components/ui/EmptyState.svelte';
+  import Tabs from '$lib/components/ui/Tabs.svelte';
+  import Badge from '$lib/components/ui/Badge.svelte';
+  import Button from '$lib/components/ui/Button.svelte';
+
+  type Topic = {
+    topic_rank: number;
+    topic_label: string;
+    summary: string;
+    article_ids: number[];
+    article_count: number;
+    importance_score: number;
+    llm_fallback_used: boolean;
+  };
+  type Country = { country: string; topics: Topic[] };
+  type Digest = {
+    digest_date: string;
+    total_articles: number;
+    total_countries: number;
+    total_topics: number;
+    llm_calls: number;
+    llm_failures: number;
+    status: string;
+    countries: Country[];
+  };
+
+  let digest = $state<Digest | null>(null);
+  let loading = $state(true);
+  let error = $state<string | null>(null);
+  let country = $state<string>('');
+
+  async function load() {
+    loading = true;
+    error = null;
+    try {
+      digest = await api<Digest>('/digest/latest');
+      const countries = digest?.countries ?? [];
+      if (!countries.some((c) => c.country === country)) {
+        country = countries[0]?.country ?? '';
+      }
+    } catch (e) {
+      const err = e as ApiError;
+      if (err && err.status === 404) {
+        digest = null;
+        error = null;
+        return;
+      }
+      error = err?.detail ?? (e as Error)?.message ?? '알 수 없는 오류';
+    } finally {
+      loading = false;
+    }
+  }
+
+  onMount(load);
+
+  let tabs = $derived(
+    (digest?.countries ?? []).map((c) => ({ id: c.country, label: c.country })),
+  );
+  let topics = $derived(
+    digest?.countries?.find((c) => c.country === country)?.topics ?? [],
+  );
+</script>
+
+<div class="mx-auto max-w-3xl px-4 py-6 space-y-4">
+  <header class="flex items-baseline justify-between">
+    <h1 class="text-xl font-semibold text-default">뉴스 다이제스트</h1>
+    {#if digest}
+      <span class="text-xs text-dim">
+        {digest.digest_date} · {digest.countries.length}국 · {digest.total_topics}주제
+      </span>
+    {/if}
+  </header>
+
+  {#if loading}
+    <Skeleton class="h-32 w-full" />
+    <Skeleton class="h-32 w-full" />
+    <Skeleton class="h-32 w-full" />
+  {:else if error}
+    <EmptyState title="불러올 수 없음" description={error}>
+      <Button variant="ghost" size="sm" onclick={load}>다시 시도</Button>
+    </EmptyState>
+  {:else if !digest || digest.countries.length === 0}
+    <EmptyState
+      title="새 digest 가 없습니다"
+      description="오늘 04:00 KST cron 이 아직 실행되지 않았거나 결과가 없습니다."
+    />
+  {:else}
+    <Tabs {tabs} bind:value={country}>
+      {#snippet children(_activeId)}
+        {#if topics.length === 0}
+          <EmptyState
+            title="이 국가의 topic 이 없습니다"
+            description="다른 country 탭을 확인해 주세요."
+          />
+        {:else}
+          <div class="space-y-3 mt-4">
+            {#each topics as t (t.topic_rank)}
+              <Card class="p-4">
+                <div class="flex items-start justify-between gap-2">
+                  <h3 class="text-sm font-semibold text-default">
+                    {t.topic_rank}. {t.topic_label}
+                  </h3>
+                  {#if t.llm_fallback_used}
+                    <Badge>fallback</Badge>
+                  {/if}
+                </div>
+                <p class="mt-2 text-sm text-default">{t.summary}</p>
+                <div class="mt-2 text-xs text-dim">
+                  {t.article_count} articles · importance {t.importance_score.toFixed(2)}
+                </div>
+              </Card>
+            {/each}
+          </div>
+        {/if}
+      {/snippet}
+    </Tabs>
+  {/if}
+</div>