jaybe/page-builder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/15.1-seo-head-meta'

Browse Source
This commit is contained in:
Jaybe
2025-11-27 11:21:06 +09:00
parent 48e13d2a75 e16f8298ab
commit 860eff514a
9 changed files with 341 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/api/export/route.ts
+75 -2
View File
@@ -52,7 +52,9 @@ const escapeHtml = (value: string): string =>
const escapeAttr = (value: string): string => escapeHtml(value); const escapeAttr = (value: string): string => escapeHtml(value);
export const buildStaticHtml = (blocks: Block[], projectConfig?: ProjectConfig): string => { export const buildStaticHtml = (blocks: Block[], projectConfig?: ProjectConfig): string => {
const pageTitleRaw = (projectConfig?.title ?? "").trim() || "Page Builder Export"; const baseTitleRaw = (projectConfig?.title ?? "").trim() || "Page Builder Export";
const seoTitleRaw = (projectConfig?.seoTitle ?? "").trim();
const pageTitleRaw = seoTitleRaw || baseTitleRaw;
const pageTitle = escapeHtml(pageTitleRaw); const pageTitle = escapeHtml(pageTitleRaw);
const headExtraRaw = (projectConfig?.headHtml ?? "").trim(); const headExtraRaw = (projectConfig?.headHtml ?? "").trim();
@@ -84,6 +86,77 @@ export const buildStaticHtml = (blocks: Block[], projectConfig?: ProjectConfig):
const trackingRaw = (projectConfig?.trackingScript ?? "").trim(); const trackingRaw = (projectConfig?.trackingScript ?? "").trim();
const trackingHtml = trackingRaw ? `\n${trackingRaw}\n` : ""; const trackingHtml = trackingRaw ? `\n${trackingRaw}\n` : "";
const seoDescriptionRaw = (projectConfig?.seoDescription ?? "").trim();
const seoOgImageRaw = (projectConfig?.seoOgImageUrl ?? "").trim();
const seoCanonicalRaw = (projectConfig?.seoCanonicalUrl ?? "").trim();
const seoNoIndex = projectConfig?.seoNoIndex === true;
const seoHeadParts: string[] = [];
if (seoDescriptionRaw) {
seoHeadParts.push(
` <meta name="description" content="${escapeAttr(seoDescriptionRaw)}" />`,
);
}
if (pageTitleRaw) {
seoHeadParts.push(
` <meta property="og:title" content="${escapeAttr(pageTitleRaw)}" />`,
);
}
if (seoDescriptionRaw) {
seoHeadParts.push(
` <meta property="og:description" content="${escapeAttr(seoDescriptionRaw)}" />`,
);
}
seoHeadParts.push(` <meta property="og:type" content="website" />`);
if (seoOgImageRaw) {
seoHeadParts.push(
` <meta property="og:image" content="${escapeAttr(seoOgImageRaw)}" />`,
);
}
if (seoCanonicalRaw) {
seoHeadParts.push(
` <meta property="og:url" content="${escapeAttr(seoCanonicalRaw)}" />`,
);
}
// Twitter 카드 메타 태그
seoHeadParts.push(
` <meta name="twitter:card" content="summary_large_image" />`,
);
if (pageTitleRaw) {
seoHeadParts.push(
` <meta name="twitter:title" content="${escapeAttr(pageTitleRaw)}" />`,
);
}
if (seoDescriptionRaw) {
seoHeadParts.push(
` <meta name="twitter:description" content="${escapeAttr(seoDescriptionRaw)}" />`,
);
}
if (seoOgImageRaw) {
seoHeadParts.push(
` <meta name="twitter:image" content="${escapeAttr(seoOgImageRaw)}" />`,
);
}
if (seoCanonicalRaw) {
seoHeadParts.push(
` <link rel="canonical" href="${escapeAttr(seoCanonicalRaw)}" />`,
);
}
if (seoNoIndex) {
seoHeadParts.push(
` <meta name="robots" content="noindex, nofollow" />`,
);
}
const seoHeadHtml = seoHeadParts.length > 0 ? `\n${seoHeadParts.join("\n")}` : "";
const sectionBlocks = blocks.filter((b) => b.type === "section"); const sectionBlocks = blocks.filter((b) => b.type === "section");
const rootBlocks = blocks.filter((b) => !b.sectionId && b.type !== "section"); const rootBlocks = blocks.filter((b) => !b.sectionId && b.type !== "section");
@@ -515,7 +588,7 @@ export const buildStaticHtml = (blocks: Block[], projectConfig?: ProjectConfig):
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>${pageTitle}</title> <title>${pageTitle}</title>
<link rel="stylesheet" href="./builder.css" />${headExtra} <link rel="stylesheet" href="./builder.css" />${seoHeadHtml}${headExtra}
</head> </head>
<body style="${bodyStyle}"> <body style="${bodyStyle}">
<main> <main>
src/app/editor/forms/FormControllerPanel.tsx
-85
View File
@@ -1,8 +1,6 @@
"use client"; "use client";
import type { Block, ButtonBlockProps, FormBlockProps } from "@/features/editor/state/editorStore"; import type { Block, ButtonBlockProps, FormBlockProps } from "@/features/editor/state/editorStore";
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
interface FormControllerPanelProps { interface FormControllerPanelProps {
block: Block; // type === "form" block: Block; // type === "form"
@@ -131,89 +129,6 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
)} )}
</div> </div>
<div className="space-y-2 border-t border-slate-800 pt-3">
<h3 className="text-[11px] font-semibold text-slate-200">폼 레이아웃</h3>
<label className="flex flex-col gap-1 text-xs text-slate-400">
<span>폼 너비 모드</span>
<select
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
value={formProps.formWidthMode ?? "auto"}
onChange={(e) =>
updateBlock(selectedBlockId, {
formWidthMode: e.target.value,
} as any)
}
>
<option value="auto">내용에 맞춤</option>
<option value="full">전체 폭</option>
<option value="fixed">고정 폭 (px)</option>
</select>
</label>
{(formProps.formWidthMode ?? "auto") === "fixed" && (
<NumericPropertyControl
label="폼 고정 너비 (px)"
unitLabel="(px)"
value={typeof formProps.formWidthPx === "number" ? formProps.formWidthPx : 360}
min={160}
max={960}
step={10}
presets={[
{ id: "sm", label: "좁게", value: 280 },
{ id: "md", label: "보통", value: 360 },
{ id: "lg", label: "넓게", value: 480 },
]}
onChangeValue={(v) =>
updateBlock(selectedBlockId, {
formWidthPx: v,
} as any)
}
/>
)}
<NumericPropertyControl
label="폼 위/아래 여백 (px)"
unitLabel="(px)"
value={typeof formProps.marginYPx === "number" ? formProps.marginYPx : 16}
min={0}
max={80}
step={2}
presets={[
{ id: "tight", label: "좁게", value: 8 },
{ id: "normal", label: "보통", value: 16 },
{ id: "relaxed", label: "넓게", value: 32 },
]}
onChangeValue={(v) =>
updateBlock(selectedBlockId, {
marginYPx: v,
} as any)
}
/>
</div>
<div className="space-y-2 border-t border-slate-800 pt-3 mt-4">
<h3 className="text-[11px] font-semibold text-slate-200">폼 스타일</h3>
<ColorPickerField
label="폼 배경색"
ariaLabelColorInput="폼 배경색 피커"
ariaLabelHexInput="폼 배경색 HEX"
value={
formProps.backgroundColorCustom && formProps.backgroundColorCustom.trim() !== ""
? formProps.backgroundColorCustom
: TEXT_COLOR_PALETTE[0]?.color ?? "#e5e7eb"
}
onChange={(hex) => {
updateBlock(selectedBlockId, {
backgroundColorCustom: hex,
} as any);
}}
palette={TEXT_COLOR_PALETTE}
onPaletteSelect={(item) => {
updateBlock(selectedBlockId, {
backgroundColorCustom: item.color,
} as any);
}}
/>
</div>
<div className="space-y-2 border-t border-slate-800 pt-3 mt-4"> <div className="space-y-2 border-t border-slate-800 pt-3 mt-4">
<h3 className="text-[11px] font-semibold text-slate-200">폼 메시지</h3> <h3 className="text-[11px] font-semibold text-slate-200">폼 메시지</h3>
<label className="flex flex-col gap-1 text-xs text-slate-400"> <label className="flex flex-col gap-1 text-xs text-slate-400">
src/app/editor/panels/ProjectPropertiesPanel.tsx
+59
View File
@@ -104,6 +104,65 @@ export function ProjectPropertiesPanel() {
/> />
</div> </div>
<div className="space-y-2 border-t border-slate-800 pt-3">
<h4 className="text-[11px] font-semibold text-slate-200">SEO / 메타</h4>
<label className="flex flex-col gap-1">
<span className="text-slate-400">SEO 타이틀</span>
<input
className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
aria-label="SEO 타이틀"
placeholder={projectConfig.title || "페이지 제목"}
value={projectConfig.seoTitle ?? ""}
onChange={(e) => updateProjectConfig({ seoTitle: e.target.value })}
/>
</label>
<label className="flex flex-col gap-1">
<span className="text-slate-400">메타 디스크립션</span>
<textarea
className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px] outline-none focus:border-sky-500 min-h-[56px]"
aria-label="메타 디스크립션"
placeholder="검색엔진 및 SNS 공유에 노출될 페이지 설명을 입력하세요."
value={projectConfig.seoDescription ?? ""}
onChange={(e) => updateProjectConfig({ seoDescription: e.target.value })}
/>
</label>
<label className="flex flex-col gap-1">
<span className="text-slate-400">OG/Twitter 이미지 URL</span>
<input
className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
aria-label="OG/Twitter 이미지 URL"
placeholder="예: https://example.com/og-image.png"
value={projectConfig.seoOgImageUrl ?? ""}
onChange={(e) => updateProjectConfig({ seoOgImageUrl: e.target.value })}
/>
</label>
<label className="flex flex-col gap-1">
<span className="text-slate-400">Canonical URL</span>
<input
className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
aria-label="Canonical URL"
placeholder="예: https://example.com/landing"
value={projectConfig.seoCanonicalUrl ?? ""}
onChange={(e) => updateProjectConfig({ seoCanonicalUrl: e.target.value })}
/>
</label>
<label className="flex items-center gap-2 text-[11px] text-slate-300">
<input
type="checkbox"
className="h-3 w-3 rounded border-slate-600 bg-slate-900"
aria-label="검색 엔진에 노출하지 않기 (noindex)"
checked={Boolean(projectConfig.seoNoIndex)}
onChange={(e) => updateProjectConfig({ seoNoIndex: e.target.checked })}
/>
<span>검색 엔진에 노출하지 않기 (noindex)</span>
</label>
</div>
<div className="space-y-1"> <div className="space-y-1">
<label className="flex flex-col gap-1"> <label className="flex flex-col gap-1">
<span className="text-slate-400">페이지 head HTML</span> <span className="text-slate-400">페이지 head HTML</span>
src/features/editor/state/editorStore.ts
+12
View File
@@ -684,6 +684,12 @@ export interface ProjectConfig {
bodyBgColorHex?: string; bodyBgColorHex?: string;
headHtml?: string; headHtml?: string;
trackingScript?: string; trackingScript?: string;
// SEO / 메타 설정 (15.1)
seoTitle?: string;
seoDescription?: string;
seoOgImageUrl?: string;
seoCanonicalUrl?: string;
seoNoIndex?: boolean;
} }
// 공통 블록 모델 // 공통 블록 모델
@@ -803,6 +809,12 @@ const createEditorState = (set: any, get: any): EditorState => ({
bodyBgColorHex: "#020617", bodyBgColorHex: "#020617",
headHtml: "", headHtml: "",
trackingScript: "", trackingScript: "",
// SEO 기본값: 필요할 때만 값을 채우고, 없으면 title 등을 사용한다.
seoTitle: "",
seoDescription: "",
seoOgImageUrl: "",
seoCanonicalUrl: "",
seoNoIndex: false,
}, },
updateProjectConfig: (partial: Partial<ProjectConfig>) => { updateProjectConfig: (partial: Partial<ProjectConfig>) => {
src/features/editor/utils/formHelpers.ts
+4 -22
View File
@@ -861,26 +861,10 @@ export const computeFormControllerPublicTokens = (
); );
const mappedSubmitLabel = (mappedSubmitButton?.props as ButtonBlockProps | undefined)?.label ?? null; const mappedSubmitLabel = (mappedSubmitButton?.props as ButtonBlockProps | undefined)?.label ?? null;
const widthMode = props.formWidthMode ?? "auto"; // FormBlock 은 레이아웃/스타일을 가지지 않는 순수 컨트롤러이므로
const formStyle: CSSProperties = {}; // formClassName 은 고정 기본값만 사용하고, formStyle 은 항상 빈 객체로 유지한다.
const formClassNames = ["space-y-3"]; const formClassNames = ["space-y-3"];
const formStyle: CSSProperties = {};
if (widthMode === "full") {
formClassNames.push("w-full");
}
if (widthMode === "fixed" && typeof props.formWidthPx === "number" && props.formWidthPx > 0) {
formStyle.width = pxToEm(props.formWidthPx);
}
if (typeof props.marginYPx === "number") {
const marginEm = pxToEm(props.marginYPx);
formStyle.marginTop = marginEm;
formStyle.marginBottom = marginEm;
}
if (props.backgroundColorCustom && props.backgroundColorCustom.trim() !== "") {
formStyle.backgroundColor = props.backgroundColorCustom.trim();
}
return { return {
fields, fields,
@@ -920,10 +904,8 @@ export const computeFormBlockExportTokens = (
fallbackFields = props.fields; fallbackFields = props.fields;
} }
// FormBlock 은 Export 레이어에서도 컨테이너 배경/레이아웃 스타일을 가지지 않는다.
const formStyleParts: string[] = []; const formStyleParts: string[] = [];
if (typeof props.backgroundColorCustom === "string" && props.backgroundColorCustom.trim() !== "") {
formStyleParts.push(`background-color:${props.backgroundColorCustom.trim()}`);
}
return { return {
hasControllerFields: controllerFields.length > 0, hasControllerFields: controllerFields.length > 0,
tests/api/export.spec.ts
+84 -2
View File
@@ -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 () => { it("폼 블록과 컨트롤러 필드 블록들은 정적 HTML에서도 폼 요소로 렌더되어야 한다", async () => {
const blocks: Block[] = [ const blocks: Block[] = [
{ {
@@ -1609,7 +1691,7 @@ describe("/api/export", () => {
expect(html).toContain("background-color:#00ff88"); expect(html).toContain("background-color:#00ff88");
}); });
it("backgroundColorCustom 이 지정된 폼 블록은 정적 HTML에서 form 요소 배경색을 반영해야 한다", async () => { it("backgroundColorCustom 이 지정된 폼 블록은 정적 HTML에서 form 요소 배경색을 반영하지 않아야 한다", async () => {
const blocks: Block[] = [ const blocks: Block[] = [
{ {
id: "form_bg_custom", id: "form_bg_custom",
@@ -1662,7 +1744,7 @@ describe("/api/export", () => {
const html = await indexEntry!.async("string"); const html = await indexEntry!.async("string");
expect(html).toContain("<form"); expect(html).toContain("<form");
expect(html).toContain("background-color:#111111"); expect(html).not.toContain("background-color:#111111");
}); });
it("backgroundColorCustom 이 지정된 섹션 블록은 정적 HTML에서 섹션 요소 배경색을 인라인 스타일로 반영해야 한다", async () => { it("backgroundColorCustom 이 지정된 섹션 블록은 정적 HTML에서 섹션 요소 배경색을 인라인 스타일로 반영해야 한다", async () => {
tests/unit/ProjectPropertiesPanel.seo.spec.tsx
+102
View File
@@ -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,
});
});
});
tests/unit/TextListFormBackgroundControls.spec.tsx
-31
View File
@@ -2,7 +2,6 @@ import { describe, it, expect, vi } from "vitest";
import { render, screen, fireEvent } from "@testing-library/react"; import { render, screen, fireEvent } from "@testing-library/react";
import { TextPropertiesPanel } from "@/app/editor/panels/TextPropertiesPanel"; import { TextPropertiesPanel } from "@/app/editor/panels/TextPropertiesPanel";
import { ListPropertiesPanel } from "@/app/editor/panels/ListPropertiesPanel"; import { ListPropertiesPanel } from "@/app/editor/panels/ListPropertiesPanel";
import { FormControllerPanel } from "@/app/editor/forms/FormControllerPanel";
import type { Block } from "@/features/editor/state/editorStore"; import type { Block } from "@/features/editor/state/editorStore";
// Text/List/Form 패널에 추가되는 블록 배경색(backgroundColorCustom) 컨트롤에 대한 최소 TDD // Text/List/Form 패널에 추가되는 블록 배경색(backgroundColorCustom) 컨트롤에 대한 최소 TDD
@@ -58,34 +57,4 @@ describe("Text/List/Form 패널 - 블록 배경색 컨트롤", () => {
expect.objectContaining({ backgroundColorCustom: "#445566" }), 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" }),
);
});
}); });
tests/unit/formHelpers.spec.ts
+5 -5
View File
@@ -411,10 +411,9 @@ describe("formHelpers.computeFormControllerPublicTokens", () => {
expect(checkboxField.groupLabelImageUrl).toBe("https://example.com/group.png"); expect(checkboxField.groupLabelImageUrl).toBe("https://example.com/group.png");
expect(tokens.formClassName).toBe("space-y-3"); expect(tokens.formClassName).toBe("space-y-3");
expect(tokens.formStyle.width).toBe("20em"); // FormBlock 은 이제 레이아웃/배경 스타일을 가지지 않는 순수 컨트롤러이므로,
expect(tokens.formStyle.marginTop).toBe("2em"); // formStyle 은 항상 빈 객체여야 한다.
expect(tokens.formStyle.marginBottom).toBe("2em"); expect(tokens.formStyle).toEqual({});
expect(tokens.formStyle.backgroundColor).toBe("#123456");
expect(tokens.submitLabel).toBe("컨트롤러 버튼"); expect(tokens.submitLabel).toBe("컨트롤러 버튼");
}); });
@@ -509,7 +508,8 @@ describe("formHelpers.computeFormBlockExportTokens", () => {
expect(tokens.controllerFields[0].id).toBe("input-1"); expect(tokens.controllerFields[0].id).toBe("input-1");
expect(tokens.controllerFields[1].id).toBe("select-1"); expect(tokens.controllerFields[1].id).toBe("select-1");
expect(tokens.fallbackFields).toHaveLength(0); expect(tokens.fallbackFields).toHaveLength(0);
expect(tokens.formStyleParts).toEqual(["background-color:#123456"]); // FormBlock 은 Export 레이어에서도 컨테이너 배경/레이아웃 스타일을 가지지 않는다.
expect(tokens.formStyleParts).toEqual([]);
}); });
it("fieldIds 가 없고 fields 가 있을 때 fallbackFields 를 사용해야 한다", () => { it("fieldIds 가 없고 fields 가 있을 때 fallbackFields 를 사용해야 한다", () => {