From ed21888eafc18e7cf0bb162f51c7265df0409214 Mon Sep 17 00:00:00 2001
From: dal4segno <dal4segno@gmail.com>
Date: Wed, 2 Sep 2026 12:33:15 +0900
Subject: [PATCH] feat: show three recent updates on the homepage

---
 src/lib/components/UpdateNotice.svelte        | 16 +++++++++++++++-
 .../engine/update-history-document.test.ts    | 19 ++++++++++++++++++-
 src/lib/update-history-document.ts            | 13 +++++++++++++
 3 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/UpdateNotice.svelte b/src/lib/components/UpdateNotice.svelte
index a59ca46..8aee6e9 100644
--- a/src/lib/components/UpdateNotice.svelte
+++ b/src/lib/components/UpdateNotice.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
   import updateHistoryMarkdown from '../../../UPDATES.md?raw';
-  import { parseUpdateHistoryDocument } from '$lib/update-history-document.ts';
+  import { parseUpdateHistoryDocument, recentUpdateEntries } from '$lib/update-history-document.ts';
 
   const updateHistoryDocument = parseUpdateHistoryDocument(updateHistoryMarkdown);
+  const recentUpdates = recentUpdateEntries(updateHistoryDocument.body);
 
   function updatedDateTime(value: string | null): string {
     if (!value) return '시각 미등록';
@@ -29,6 +30,13 @@
 
       <a class="action" href="/updates">업데이트 내역 확인 <span aria-hidden="true">→</span></a>
     </div>
+    {#if recentUpdates.length > 0}
+      <ul class="recent-updates" aria-label="최신 업데이트 3개">
+        {#each recentUpdates as update}
+          <li><span class="update-title">{update.title}</span><span class="update-date">{update.date}</span></li>
+        {/each}
+      </ul>
+    {/if}
 </aside>
 
 <style>
@@ -41,9 +49,15 @@
   .action span { margin-left: 4px; }
   .action:hover { color: #ffd0e2; }
   .action:focus-visible { outline: 3px solid rgb(239 139 182 / 28%); outline-offset: 3px; }
+  .recent-updates { display: grid; gap: 9px; margin: 0 18px; padding: 13px 0 16px; border-top: 1px solid #2c3440; list-style: none; }
+  .recent-updates li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 1.5; }
+  .update-title { min-width: 0; color: #cbd2dc; overflow-wrap: anywhere; }
+  .update-date { flex: 0 0 auto; color: #7f8998; font-size: 12px; }
 
   @media (max-width: 680px) {
     .notice-header { align-items: flex-start; flex-direction: column; gap: 8px; }
     .version-summary { align-items: flex-start; flex-wrap: wrap; }
+    .recent-updates li { gap: 10px; font-size: 13px; }
+    .update-date { font-size: 11px; }
   }
 </style>
diff --git a/src/lib/engine/update-history-document.test.ts b/src/lib/engine/update-history-document.test.ts
index 6b7cad9..7a7054c 100644
--- a/src/lib/engine/update-history-document.test.ts
+++ b/src/lib/engine/update-history-document.test.ts
@@ -1,6 +1,6 @@
 import assert from 'node:assert/strict';
 import test from 'node:test';
-import { parseUpdateHistoryDocument } from '../update-history-document.ts';
+import { parseUpdateHistoryDocument, recentUpdateEntries } from '../update-history-document.ts';
 
 test('업데이트 Markdown의 최근 업데이트 시각을 본문과 분리한다', () => {
   const document = parseUpdateHistoryDocument('---\nupdatedAt: 2026-08-31T14:15:17+09:00\n---\n\n## 업데이트');
@@ -13,3 +13,20 @@ test('메타데이터가 없는 Markdown도 그대로 표시한다', () => {
   const markdown = '## 업데이트';
   assert.deepEqual(parseUpdateHistoryDocument(markdown), { updatedAt: null, body: markdown });
 });
+
+test('최근 업데이트 3개를 날짜 경계를 넘어 문서 순서대로 가져온다', () => {
+  const body = '## 2026년 9월 2일\r\n\r\n### 첫 업데이트\r\n설명\r\n### 다음 업데이트\r\n\r\n---\r\n## 2026년 9월 1일\r\n### 이전 업데이트\r\n### 네 번째 업데이트';
+  assert.deepEqual(recentUpdateEntries(body), [
+    { date: '2026년 9월 2일', title: '첫 업데이트' },
+    { date: '2026년 9월 2일', title: '다음 업데이트' },
+    { date: '2026년 9월 1일', title: '이전 업데이트' }
+  ]);
+});
+
+test('업데이트가 부족하거나 없으면 있는 항목만 표시한다', () => {
+  assert.deepEqual(recentUpdateEntries('### 날짜 없는 제목'), []);
+  assert.deepEqual(recentUpdateEntries(''), []);
+  assert.deepEqual(recentUpdateEntries('## 2026년 9월 2일\n### 한 항목'), [
+    { date: '2026년 9월 2일', title: '한 항목' }
+  ]);
+});
diff --git a/src/lib/update-history-document.ts b/src/lib/update-history-document.ts
index a01ce2b..6aca614 100644
--- a/src/lib/update-history-document.ts
+++ b/src/lib/update-history-document.ts
@@ -3,6 +3,19 @@ export type UpdateHistoryDocument = {
   body: string;
 };
 
+export function recentUpdateEntries(body: string, limit = 3): { date: string; title: string }[] {
+  const entries: { date: string; title: string }[] = [];
+  let date = '';
+  for (const line of body.split(/\r?\n/)) {
+    if (entries.length >= limit) break;
+    const dateHeading = line.match(/^##\s+(\d{4}년 \d{1,2}월 \d{1,2}일)\s*$/);
+    if (dateHeading) date = dateHeading[1];
+    const titleHeading = line.match(/^###\s+(.+?)\s*$/);
+    if (date && titleHeading) entries.push({ date, title: titleHeading[1] });
+  }
+  return entries;
+}
+
 export function parseUpdateHistoryDocument(markdown: string): UpdateHistoryDocument {
   const frontmatter = markdown.match(/^---\r?\n([\s\S]*?)\r?\n---(?:\r?\n|$)/);
   if (!frontmatter) return { updatedAt: null, body: markdown };