feat: FormBlock 컨트롤러 정리 및 15.1 SEO/head 메타 관리 추가

2025-11-27 11:20:38 +09:00
parent 48e13d2a75
commit e16f8298ab
9 changed files with 341 additions and 147 deletions
@@ -321,6 +321,88 @@ describe("/api/export", () => {
    );
  });

+  it("seoTitle/seoDescription/seoCanonicalUrl/seoOgImageUrl/seoNoIndex 가 설정된 경우 head 에 SEO 메타 태그들이 생성되어야 한다", () => {
+    const blocks: Block[] = [];
+
+    const projectConfig: ProjectConfig = {
+      title: "기본 타이틀",
+      slug: "seo-meta-test",
+      canvasPreset: "full",
+      seoTitle: "SEO 타이틀",
+      seoDescription: "SEO 설명",
+      seoOgImageUrl: "https://example.com/og.png",
+      seoCanonicalUrl: "https://example.com/landing",
+      seoNoIndex: true,
+    } as ProjectConfig;
+
+    const html = buildStaticHtml(blocks, projectConfig);
+
+    expect(html).toContain("<title>SEO 타이틀</title>");
+    expect(html).toContain('meta name="description" content="SEO 설명"');
+    expect(html).toContain('meta property="og:title" content="SEO 타이틀"');
+    expect(html).toContain('meta property="og:description" content="SEO 설명"');
+    expect(html).toContain('meta property="og:type" content="website"');
+    expect(html).toContain('meta property="og:image" content="https://example.com/og.png"');
+    expect(html).toContain('meta property="og:url" content="https://example.com/landing"');
+
+    expect(html).toContain('meta name="twitter:card" content="summary_large_image"');
+    expect(html).toContain('meta name="twitter:title" content="SEO 타이틀"');
+    expect(html).toContain('meta name="twitter:description" content="SEO 설명"');
+    expect(html).toContain('meta name="twitter:image" content="https://example.com/og.png"');
+
+    expect(html).toContain('<link rel="canonical" href="https://example.com/landing" />');
+    expect(html).toContain('<meta name="robots" content="noindex, nofollow" />');
+  });
+
+  it("기본 SEO 메타 태그들 이후에 projectConfig.headHtml 이 head 에 추가되어야 한다", () => {
+    const blocks: Block[] = [];
+
+    const projectConfig: ProjectConfig = {
+      title: "헤드 SEO 순서 테스트",
+      slug: "head-seo-order-test",
+      canvasPreset: "full",
+      seoTitle: "SEO 타이틀",
+      seoDescription: "SEO 설명",
+      headHtml: '<meta name="custom" content="custom-meta" />',
+    } as ProjectConfig;
+
+    const html = buildStaticHtml(blocks, projectConfig);
+    const headStart = html.indexOf("<head>");
+    const headEnd = html.indexOf("</head>");
+    const head = html.slice(headStart, headEnd);
+
+    const descriptionIndex = head.indexOf('meta name="description"');
+    const customIndex = head.indexOf('meta name="custom" content="custom-meta"');
+
+    expect(descriptionIndex).toBeGreaterThan(-1);
+    expect(customIndex).toBeGreaterThan(-1);
+    expect(customIndex).toBeGreaterThan(descriptionIndex);
+  });
+
+  it("SEO 필드 값에 특수 문자가 포함되어도 HTML 이 깨지지 않고 이스케이프되어야 한다", () => {
+    const blocks: Block[] = [];
+
+    const projectConfig: ProjectConfig = {
+      title: '기본 & "타이틀" <테스트>',
+      slug: "seo-escape-test",
+      canvasPreset: "full",
+      seoTitle: 'SEO & "타이틀" <테스트>',
+      seoDescription: '설명 & "디스크립션" <테스트>',
+    } as ProjectConfig;
+
+    const html = buildStaticHtml(blocks, projectConfig);
+
+    expect(html).toContain(
+      "<title>SEO &amp; &quot;타이틀&quot; &lt;테스트&gt;</title>",
+    );
+    expect(html).toContain(
+      'meta name="description" content="설명 &amp; &quot;디스크립션&quot; &lt;테스트&gt;"',
+    );
+    expect(html).toContain(
+      'meta property="og:title" content="SEO &amp; &quot;타이틀&quot; &lt;테스트&gt;"',
+    );
+  });
+
  it("폼 블록과 컨트롤러 필드 블록들은 정적 HTML에서도 폼 요소로 렌더되어야 한다", async () => {
    const blocks: Block[] = [
      {
@@ -1609,7 +1691,7 @@ describe("/api/export", () => {
      expect(html).toContain("background-color:#00ff88");
    });

-    it("backgroundColorCustom 이 지정된 폼 블록은 정적 HTML에서 form 요소 배경색을 반영해야 한다", async () => {
+    it("backgroundColorCustom 이 지정된 폼 블록은 정적 HTML에서 form 요소 배경색을 반영하지 않아야 한다", async () => {
      const blocks: Block[] = [
        {
          id: "form_bg_custom",
@@ -1662,7 +1744,7 @@ describe("/api/export", () => {

      const html = await indexEntry!.async("string");
      expect(html).toContain("<form");
-      expect(html).toContain("background-color:#111111");
+      expect(html).not.toContain("background-color:#111111");
    });

    it("backgroundColorCustom 이 지정된 섹션 블록은 정적 HTML에서 섹션 요소 배경색을 인라인 스타일로 반영해야 한다", async () => {
@@ -0,0 +1,102 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { ProjectPropertiesPanel } from "@/app/editor/panels/ProjectPropertiesPanel";
+import type { ProjectConfig } from "@/features/editor/state/editorStore";
+
+let mockState: { projectConfig: ProjectConfig; updateProjectConfig: ReturnType<typeof vi.fn> };
+
+beforeEach(() => {
+  const baseConfig: ProjectConfig = {
+    title: "프로젝트",
+    slug: "project",
+    canvasPreset: "full",
+    canvasWidthPx: 1024,
+    canvasBgColorHex: "#0f172a",
+    bodyBgColorHex: "#020617",
+    headHtml: "",
+    trackingScript: "",
+    // SEO 필드는 아직 구현 전이지만, TDD 를 위해 기본값 형태만 지정해 둔다.
+    // 실제 타입 정의는 추후 15.1 구현에서 확장한다.
+  } as ProjectConfig;
+
+  mockState = {
+    projectConfig: baseConfig,
+    updateProjectConfig: vi.fn(),
+  };
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+vi.mock("@/features/editor/state/editorStore", () => {
+  const useEditorStore = (selector: (state: any) => any) => selector(mockState);
+  return {
+    __esModule: true,
+    useEditorStore,
+  };
+});
+
+describe("ProjectPropertiesPanel SEO 메타", () => {
+  it("SEO 타이틀 입력을 변경하면 seoTitle 이 updateProjectConfig 로 전달되어야 한다", () => {
+    render(<ProjectPropertiesPanel />);
+
+    const input = screen.getByLabelText("SEO 타이틀") as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: "새 SEO 타이틀" } });
+
+    expect(mockState.updateProjectConfig).toHaveBeenCalledWith({ seoTitle: "새 SEO 타이틀" });
+  });
+
+  it("메타 디스크립션 입력을 변경하면 seoDescription 이 updateProjectConfig 로 전달되어야 한다", () => {
+    render(<ProjectPropertiesPanel />);
+
+    const textarea = screen.getByLabelText("메타 디스크립션") as HTMLTextAreaElement;
+
+    fireEvent.change(textarea, { target: { value: "SEO 설명" } });
+
+    expect(mockState.updateProjectConfig).toHaveBeenCalledWith({
+      seoDescription: "SEO 설명",
+    });
+  });
+
+  it("OG/Twitter 이미지 URL 입력을 변경하면 seoOgImageUrl 이 updateProjectConfig 로 전달되어야 한다", () => {
+    render(<ProjectPropertiesPanel />);
+
+    const input = screen.getByLabelText("OG/Twitter 이미지 URL") as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: "https://example.com/og.png" } });
+
+    expect(mockState.updateProjectConfig).toHaveBeenCalledWith({
+      seoOgImageUrl: "https://example.com/og.png",
+    });
+  });
+
+  it("Canonical URL 입력을 변경하면 seoCanonicalUrl 이 updateProjectConfig 로 전달되어야 한다", () => {
+    render(<ProjectPropertiesPanel />);
+
+    const input = screen.getByLabelText("Canonical URL") as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: "https://example.com/landing" } });
+
+    expect(mockState.updateProjectConfig).toHaveBeenCalledWith({
+      seoCanonicalUrl: "https://example.com/landing",
+    });
+  });
+
+  it("검색 노출 제어 체크박스를 토글하면 seoNoIndex 가 true 로 업데이트되어야 한다", () => {
+    render(<ProjectPropertiesPanel />);
+
+    const checkbox = screen.getByLabelText(
+      "검색 엔진에 노출하지 않기 (noindex)",
+    ) as HTMLInputElement;
+
+    expect(checkbox.checked).toBe(false);
+
+    fireEvent.click(checkbox);
+
+    expect(mockState.updateProjectConfig).toHaveBeenCalledWith({
+      seoNoIndex: true,
+    });
+  });
+});
@@ -2,7 +2,6 @@ import { describe, it, expect, vi } from "vitest";
 import { render, screen, fireEvent } from "@testing-library/react";
 import { TextPropertiesPanel } from "@/app/editor/panels/TextPropertiesPanel";
 import { ListPropertiesPanel } from "@/app/editor/panels/ListPropertiesPanel";
-import { FormControllerPanel } from "@/app/editor/forms/FormControllerPanel";
 import type { Block } from "@/features/editor/state/editorStore";

 // Text/List/Form 패널에 추가되는 블록 배경색(backgroundColorCustom) 컨트롤에 대한 최소 TDD
@@ -58,34 +57,4 @@ describe("Text/List/Form 패널 - 블록 배경색 컨트롤", () => {
      expect.objectContaining({ backgroundColorCustom: "#445566" }),
    );
  });
-
-  it("FormControllerPanel 에서 배경색 HEX 인풋 변경 시 updateBlock 이 backgroundColorCustom 으로 호출되어야 한다", () => {
-    const updateBlock = vi.fn();
-
-    const formBlock: Block = {
-      id: "form-1",
-      type: "form",
-      props: {
-        kind: "contact",
-        submitTarget: "internal",
-      } as any,
-    };
-
-    render(
-      <FormControllerPanel
-        block={formBlock}
-        blocks={[]}
-        selectedBlockId="form-1"
-        updateBlock={updateBlock}
-      />,
-    );
-
-    const hexInput = screen.getByLabelText("폼 배경색 HEX");
-    fireEvent.change(hexInput, { target: { value: "#778899" } });
-
-    expect(updateBlock).toHaveBeenCalledWith(
-      "form-1",
-      expect.objectContaining({ backgroundColorCustom: "#778899" }),
-    );
-  });
 });
@@ -411,10 +411,9 @@ describe("formHelpers.computeFormControllerPublicTokens", () => {
 		expect(checkboxField.groupLabelImageUrl).toBe("https://example.com/group.png");

 		expect(tokens.formClassName).toBe("space-y-3");
-		expect(tokens.formStyle.width).toBe("20em");
-		expect(tokens.formStyle.marginTop).toBe("2em");
-		expect(tokens.formStyle.marginBottom).toBe("2em");
-		expect(tokens.formStyle.backgroundColor).toBe("#123456");
+		// FormBlock 은 이제 레이아웃/배경 스타일을 가지지 않는 순수 컨트롤러이므로,
+		// formStyle 은 항상 빈 객체여야 한다.
+		expect(tokens.formStyle).toEqual({});

 		expect(tokens.submitLabel).toBe("컨트롤러 버튼");
 	});
@@ -509,7 +508,8 @@ describe("formHelpers.computeFormBlockExportTokens", () => {
 		expect(tokens.controllerFields[0].id).toBe("input-1");
 		expect(tokens.controllerFields[1].id).toBe("select-1");
 		expect(tokens.fallbackFields).toHaveLength(0);
-		expect(tokens.formStyleParts).toEqual(["background-color:#123456"]);
+		// FormBlock 은 Export 레이어에서도 컨테이너 배경/레이아웃 스타일을 가지지 않는다.
+		expect(tokens.formStyleParts).toEqual([]);
 	});

 	it("fieldIds 가 없고 fields 가 있을 때 fallbackFields 를 사용해야 한다", () => {