feat: connect application input and output boundaries

src/presentation/pages/home-page.jsx

@@ -1,7 +1,9 @@
+import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 
 import { routePath } from "../../contracts/routes.js";
 import { PageHeader } from "../components/page-header.jsx";
+import { useApplication } from "../providers/application-provider.js";
 
 const READINESS_ITEMS = Object.freeze([
   {
@@ -19,6 +21,23 @@ const READINESS_ITEMS = Object.freeze([
 ]);
 
 export default function HomePage() {
+  const { runtime } = useApplication();
+  const [release, setRelease] = useState(
+    /** @type {Awaited<ReturnType<typeof runtime.getReleaseSummary>> | null} */ (
+      null
+    ),
+  );
+
+  useEffect(() => {
+    let active = true;
+    void runtime.getReleaseSummary().then((summary) => {
+      if (active) setRelease(summary);
+    });
+    return () => {
+      active = false;
+    };
+  }, [runtime]);
+
   return (
     <section className="ui-page">
       <PageHeader
@@ -34,6 +53,11 @@ export default function HomePage() {
           </article>
         ))}
       </div>
+      <p className="ui-runtime-summary" aria-live="polite">
+        {release
+          ? `빌드 ${release.buildId} · 릴리스 ${release.releaseId}`
+          : "검증된 런타임 정보를 확인하고 있습니다."}
+      </p>
       <section className="ui-panel starter-actions" aria-labelledby="starter-title">
         <div>
           <h2 id="starter-title">준비된 화면 살펴보기</h2>