[] Add getAppMeta/getAppLicenses to lib/api.ts, create app/about/page.tsx and app/licenses/page.tsx (with tests)

__tests__/app/about.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mockGetAppMeta = vi.fn();
+
+vi.mock("@/lib/api", () => ({
+  getAppMeta: (...args: unknown[]) => mockGetAppMeta(...args),
+}));
+
+import AboutPage from "@/app/about/page";
+import { BRANDING } from "@/lib/branding";
+
+const fixedMeta = {
+  app_name: "OpenGit",
+  version: "1.2.3",
+  git_commit: "abc1234",
+  build_date: "2025-01-01T00:00:00Z",
+  license: "Apache-2.0",
+  source_url: "https://example.org/repo",
+};
+
+describe("AboutPage", () => {
+  beforeEach(() => {
+    mockGetAppMeta.mockReset();
+    vi.stubEnv("NEXT_PUBLIC_API_BASE_URL", "http://localhost:8080");
+  });
+
+  it("shows loading state before promise resolves", () => {
+    mockGetAppMeta.mockReturnValue(new Promise(() => {}));
+
+    render(<AboutPage />);
+
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
+    expect(screen.getByText("dev")).toBeInTheDocument();
+  });
+
+  it("renders app name, version, and link to licenses", async () => {
+    mockGetAppMeta.mockResolvedValue(fixedMeta);
+
+    render(<AboutPage />);
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: BRANDING.appName })).toBeInTheDocument();
+      expect(screen.getByText("1.2.3")).toBeInTheDocument();
+      expect(screen.getByRole("link", { name: "Apache-2.0" })).toHaveAttribute(
+        "href",
+        "/licenses",
+      );
+    });
+  });
+});

__tests__/app/licenses.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mockGetAppLicenses = vi.fn();
+
+vi.mock("@/lib/api", () => ({
+  getAppLicenses: (...args: unknown[]) => mockGetAppLicenses(...args),
+}));
+
+import LicensesPage from "@/app/licenses/page";
+
+describe("LicensesPage", () => {
+  beforeEach(() => {
+    mockGetAppLicenses.mockReset();
+    vi.stubEnv("NEXT_PUBLIC_API_BASE_URL", "http://localhost:8080");
+  });
+
+  it("renders third-party license entries", async () => {
+    mockGetAppLicenses.mockResolvedValue({
+      app_license: "Apache-2.0",
+      third_party: [
+        {
+          name: "react",
+          version: "18.0.0",
+          license: "MIT",
+          url: "https://react.dev",
+        },
+        {
+          name: "next",
+          version: "14.0.0",
+          license: "MIT",
+          url: "https://nextjs.org",
+        },
+      ],
+    });
+
+    render(<LicensesPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText("react")).toBeInTheDocument();
+      expect(screen.getByText("next")).toBeInTheDocument();
+    });
+  });
+
+  it("shows fallback text when third_party is empty", async () => {
+    mockGetAppLicenses.mockResolvedValue({
+      app_license: "Apache-2.0",
+      third_party: [],
+    });
+
+    render(<LicensesPage />);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText("ライセンス情報を取得できませんでした"),
+      ).toBeInTheDocument();
+    });
+  });
+});

__tests__/pages/about.test.tsx

@@ -1,43 +1,34 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
+const mockGetAppMeta = vi.fn();
+
+vi.mock("@/lib/api", () => ({
+  getAppMeta: (...args: unknown[]) => mockGetAppMeta(...args),
+}));
+
 import AboutPage from "@/app/about/page";
 
 describe("AboutPage", () => {
   beforeEach(() => {
+    mockGetAppMeta.mockReset();
     vi.stubEnv("NEXT_PUBLIC_API_BASE_URL", "http://localhost:8080");
-
-    vi.stubGlobal(
-      "fetch",
-      vi.fn(async (input: RequestInfo | URL) => {
-        const url = String(input);
-        if (url.endsWith("/api/v1/version")) {
-          return {
-            ok: true,
-            status: 200,
-            json: async () => ({
-              data: {
-                version: "1.0.0",
-                commit: "abc1234",
-                buildDate: "2025-01-01T00:00:00Z",
-              },
-            }),
-          };
-        }
-        return {
-          ok: false,
-          status: 404,
-          json: async () => ({}),
-        };
-      }),
-    );
+    mockGetAppMeta.mockResolvedValue({
+      app_name: "OpenGit",
+      version: "1.0.0",
+      git_commit: "abc1234",
+      build_date: "2025-01-01T00:00:00Z",
+      license: "Apache-2.0",
+      source_url: "https://example.org/repo",
+    });
   });
 
   it("renders project name and includes a link", async () => {
-    const page = await AboutPage();
-    render(page);
+    render(<AboutPage />);
 
-    expect(screen.getByText("OpenGit")).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText("OpenGit")).toBeInTheDocument();
+    });
     expect(document.querySelector("a")).not.toBeNull();
   });
 });

app/about/page.tsx

@@ -1,71 +1,82 @@
+"use client";
+
 import Link from "next/link";
+import { useEffect, useState } from "react";
 
+import { getAppMeta } from "@/lib/api";
+import type { AppMeta } from "@/lib/api-types";
 import { BRANDING } from "@/lib/branding";
 
-const API_BASE =
-  process.env.NEXT_PUBLIC_API_BASE_URL ??
-  process.env.NEXT_PUBLIC_API_URL ??
-  "";
-
-interface VersionData {
-  version: string;
-  commit: string;
-  buildDate: string;
-}
+export default function AboutPage() {
+  const [meta, setMeta] = useState<AppMeta | null>(null);
+  const [loading, setLoading] = useState(true);
 
-async function fetchVersion(): Promise<VersionData | null> {
-  try {
-    const response = await fetch(`${API_BASE}/api/v1/version`, {
-      headers: { Accept: "application/json" },
-      cache: "no-store",
-    });
+  useEffect(() => {
+    let cancelled = false;
 
-    if (!response.ok) {
-      return null;
-    }
+    getAppMeta(process.env.NEXT_PUBLIC_API_BASE_URL ?? "")
+      .then((data) => {
+        if (!cancelled) {
+          setMeta(data);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      });
 
-    const body = (await response.json()) as { data?: VersionData };
-    return body.data ?? null;
-  } catch {
-    return null;
-  }
-}
+    return () => {
+      cancelled = true;
+    };
+  }, []);
 
-export default async function AboutPage() {
-  const version = await fetchVersion();
+  const version = loading ? "dev" : (meta?.version ?? "dev");
+  const commit = meta?.git_commit ?? "unknown";
+  const buildDate = meta?.build_date ?? "unknown";
+  const licenseName = meta?.license ?? BRANDING.licenseName;
+  const sourceUrl = meta?.source_url ?? BRANDING.sourceUrl;
 
   return (
     <div className="mx-auto max-w-2xl px-6 py-12">
-      <h1 className="mb-8 text-3xl font-bold">{BRANDING.appName}</h1>
+      <h1 className="mb-6 text-3xl font-bold">{BRANDING.appName}</h1>
+
+      {loading ? <p className="mb-4 text-muted-foreground">Loading...</p> : null}
 
       <dl className="space-y-4">
         <div>
-          <dt className="text-sm font-medium text-gray-500">Version</dt>
-          <dd className="mt-1 text-base">{version?.version ?? "unknown"}</dd>
+          <dt className="text-sm font-medium text-muted-foreground">Version</dt>
+          <dd>{version}</dd>
         </div>
         <div>
-          <dt className="text-sm font-medium text-gray-500">Commit</dt>
-          <dd className="mt-1 font-mono text-sm">{version?.commit ?? "unknown"}</dd>
+          <dt className="text-sm font-medium text-muted-foreground">Commit</dt>
+          <dd className="font-mono text-sm">{commit}</dd>
         </div>
         <div>
-          <dt className="text-sm font-medium text-gray-500">Build Date</dt>
-          <dd className="mt-1 text-base">{version?.buildDate ?? "unknown"}</dd>
+          <dt className="text-sm font-medium text-muted-foreground">
+            Build Date
+          </dt>
+          <dd>{buildDate}</dd>
         </div>
         <div>
-          <dt className="text-sm font-medium text-gray-500">License</dt>
-          <dd className="mt-1 text-base">{BRANDING.licenseName}</dd>
+          <dt className="text-sm font-medium text-muted-foreground">License</dt>
+          <dd>
+            <Link href="/licenses" className="text-primary underline">
+              {licenseName}
+            </Link>
+          </dd>
         </div>
         <div>
-          <dt className="text-sm font-medium text-gray-500">Source</dt>
-          <dd className="mt-1">
-            <Link
-              href={BRANDING.sourceUrl}
-              className="text-blue-600 hover:underline"
+          <dt className="text-sm font-medium text-muted-foreground">Source</dt>
+          <dd>
+            <a
+              href={sourceUrl}
               target="_blank"
               rel="noopener noreferrer"
+              className="text-primary underline"
             >
-              {BRANDING.sourceUrl}
-            </Link>
+              {sourceUrl}
+            </a>
           </dd>
         </div>
       </dl>

app/licenses/page.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { getAppLicenses } from "@/lib/api";
+import type { AppLicenses } from "@/lib/api-types";
+
+export default function LicensesPage() {
+  const [licenses, setLicenses] = useState<AppLicenses | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    getAppLicenses(process.env.NEXT_PUBLIC_API_BASE_URL ?? "")
+      .then(setLicenses)
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="mx-auto max-w-4xl px-6 py-12">
+        <p className="text-muted-foreground">Loading...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-4xl px-6 py-12">
+      <h1 className="mb-6 text-3xl font-bold">Licenses</h1>
+
+      <section className="mb-8">
+        <h2 className="mb-2 text-xl font-semibold">Project License</h2>
+        <p>{licenses?.app_license ?? ""}</p>
+      </section>
+
+      {licenses?.third_party.length === 0 ? (
+        <p>ライセンス情報を取得できませんでした</p>
+      ) : (
+        <section>
+          <h2 className="mb-4 text-xl font-semibold">Third-Party Licenses</h2>
+          <table className="w-full border-collapse text-left">
+            <thead>
+              <tr className="border-b">
+                <th className="py-2 pr-4">Name</th>
+                <th className="py-2 pr-4">Version</th>
+                <th className="py-2 pr-4">License</th>
+                <th className="py-2">URL</th>
+              </tr>
+            </thead>
+            <tbody>
+              {licenses?.third_party.map((entry) => (
+                <tr key={`${entry.name}-${entry.version}`} className="border-b">
+                  <td className="py-2 pr-4">{entry.name}</td>
+                  <td className="py-2 pr-4">{entry.version}</td>
+                  <td className="py-2 pr-4">{entry.license}</td>
+                  <td className="py-2">
+                    <a
+                      href={entry.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-primary underline"
+                    >
+                      {entry.url}
+                    </a>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </section>
+      )}
+    </div>
+  );
+}