feat: port TechLog shells and styles

2026-08-15 21:20:47 +09:00
parent 01316763e3
commit 627df884dd
14 changed files with 4124 additions and 8 deletions
@@ -0,0 +1,142 @@
+// @vitest-environment jsdom
+
+import { render } from "@testing-library/react";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { createElement } from "react";
+import { MemoryRouter } from "react-router-dom";
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+
+import { createTechLogFeatureInstalledInput } from "../../../src/features/tech-log/adapters/create-tech-log-feature-input.ts";
+import { FatalErrorState } from "../../../src/features/tech-log/presentation/public/components/fatal-error-state.tsx";
+import { PublicShell } from "../../../src/features/tech-log/presentation/public/public-shell.tsx";
+import { ApplicationProvider } from "../../../src/presentation/providers/application-provider.tsx";
+import { createTestApplication } from "../../helpers/create-test-application.ts";
+
+let styleElement: HTMLStyleElement;
+
+beforeAll(() => {
+  styleElement = document.createElement("style");
+  styleElement.textContent = readFileSync(
+    resolve(
+      process.cwd(),
+      "src/features/tech-log/presentation/styles/globals.css",
+    ),
+    "utf8",
+  );
+  document.head.append(styleElement);
+});
+
+afterAll(() => {
+  styleElement.remove();
+});
+
+function renderPublicSurface(node: React.ReactNode) {
+  const techLog = createTechLogFeatureInstalledInput().input;
+  const shell = createElement(PublicShell, { children: node });
+  const router = createElement(
+    MemoryRouter,
+    { initialEntries: ["/projects"] },
+    shell,
+  );
+  return render(
+    createElement(ApplicationProvider, {
+      application: createTestApplication({
+        featureInputs: { "tech-log": techLog },
+      }),
+      children: router,
+    }),
+  );
+}
+
+describe("TechLog consumer-visible style contract", () => {
+  it("applies the source typography, palette, shell width, and header spacing", () => {
+    const view = renderPublicSurface(
+      createElement(
+        "main",
+        { id: "main-content", className: "shell" },
+        "공개 본문",
+      ),
+    );
+
+    const rootStyle = getComputedStyle(document.documentElement);
+    const bodyStyle = getComputedStyle(document.body);
+    const headerInner = view.container.querySelector<HTMLElement>(
+      ".header-inner",
+    );
+    const wordmark = view.getByRole("link", { name: "TechLog 홈" });
+
+    expect(rootStyle.getPropertyValue("--canvas")).toBe("#f7f7f5");
+    expect(rootStyle.getPropertyValue("--ink")).toBe("#17181b");
+    expect(rootStyle.getPropertyValue("--signal")).toBe("#3e5cc7");
+    expect(rootStyle.getPropertyValue("--shell")).toBe("1180px");
+    expect(rootStyle.getPropertyValue("--body-copy")).toBe("42rem");
+    expect(bodyStyle.fontFamily).toContain("Pretendard Variable");
+    expect(bodyStyle.fontSize).toBe("16px");
+    expect(bodyStyle.fontWeight).toBe("400");
+    expect(bodyStyle.lineHeight).toBe("1.6");
+    expect(bodyStyle.minWidth).toBe("320px");
+    expect(headerInner).not.toBeNull();
+    expect(getComputedStyle(headerInner!).display).toBe("grid");
+    expect(getComputedStyle(headerInner!).minHeight).toBe("76px");
+    expect(getComputedStyle(headerInner!).gap).toBe("48px");
+    expect(getComputedStyle(wordmark).fontSize).toBe("17px");
+    expect(getComputedStyle(wordmark).fontWeight).toBe("680");
+  });
+
+  it("keeps every header and dialog control at the source minimum target size", () => {
+    const view = renderPublicSurface(
+      createElement(
+        "main",
+        { id: "main-content", className: "shell" },
+        "공개 본문",
+      ),
+    );
+
+    const wordmark = view.getByRole("link", { name: "TechLog 홈" });
+    const navLink = view.container.querySelector<HTMLElement>(".nav-link");
+    const searchButton = view.getByRole("button", {
+      name: "TechLog 검색 열기",
+    });
+    const closeButton = view.container.querySelector<HTMLElement>(
+      ".dialog-close",
+    );
+    const searchField = view.container.querySelector<HTMLElement>(
+      ".search-field",
+    );
+    const dialogInner = view.container.querySelector<HTMLElement>(
+      ".search-dialog-inner",
+    );
+
+    expect(getComputedStyle(wordmark).minHeight).toBe("44px");
+    expect(getComputedStyle(navLink!).minHeight).toBe("44px");
+    expect(getComputedStyle(searchButton).minHeight).toBe("44px");
+    expect(getComputedStyle(closeButton!).minWidth).toBe("52px");
+    expect(getComputedStyle(closeButton!).minHeight).toBe("44px");
+    expect(getComputedStyle(searchField!).minHeight).toBe("56px");
+    expect(getComputedStyle(searchField!).marginTop).toBe("24px");
+    expect(getComputedStyle(searchField!).backgroundColor).toBe(
+      "rgb(255, 255, 255)",
+    );
+    expect(getComputedStyle(dialogInner!).padding).toBe("27px 28px 22px");
+  });
+
+  it("preserves footer spacing and fatal-action sizing", () => {
+    const view = renderPublicSurface(
+      createElement(FatalErrorState, {
+        traceId: "PUBLIC-500",
+        retryHref: "/",
+      }),
+    );
+
+    const footerInner = view.container.querySelector<HTMLElement>(
+      ".footer-inner",
+    );
+    const retry = view.getByRole("link", { name: "다시 시도" });
+
+    expect(getComputedStyle(footerInner!).minHeight).toBe("172px");
+    expect(getComputedStyle(footerInner!).gap).toBe("40px");
+    expect(getComputedStyle(retry).minHeight).toBe("44px");
+    expect(getComputedStyle(retry).marginTop).toBe("34px");
+  });
+});