feat: show three recent updates on the homepage

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>