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
@@ -52,7 +52,9 @@ const escapeHtml = (value: string): string =>
 const escapeAttr = (value: string): string => escapeHtml(value);

 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 headExtraRaw = (projectConfig?.headHtml ?? "").trim();
@@ -84,6 +86,77 @@ export const buildStaticHtml = (blocks: Block[], projectConfig?: ProjectConfig):
  const trackingRaw = (projectConfig?.trackingScript ?? "").trim();
  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 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 name="viewport" content="width=device-width, initial-scale=1" />
    <title>${pageTitle}</title>
-    <link rel="stylesheet" href="./builder.css" />${headExtra}
+    <link rel="stylesheet" href="./builder.css" />${seoHeadHtml}${headExtra}
  </head>
  <body style="${bodyStyle}">
    <main>
@@ -1,8 +1,6 @@
 "use client";

 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 {
  block: Block; // type === "form"
@@ -131,89 +129,6 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
        )}
      </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">
        <h3 className="text-[11px] font-semibold text-slate-200">폼 메시지</h3>
        <label className="flex flex-col gap-1 text-xs text-slate-400">
@@ -104,6 +104,65 @@ export function ProjectPropertiesPanel() {
        />
      </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">
        <label className="flex flex-col gap-1">
          <span className="text-slate-400">페이지 head HTML</span>
@@ -684,6 +684,12 @@ export interface ProjectConfig {
  bodyBgColorHex?: string;
  headHtml?: 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",
    headHtml: "",
    trackingScript: "",
+    // SEO 기본값: 필요할 때만 값을 채우고, 없으면 title 등을 사용한다.
+    seoTitle: "",
+    seoDescription: "",
+    seoOgImageUrl: "",
+    seoCanonicalUrl: "",
+    seoNoIndex: false,
  },

  updateProjectConfig: (partial: Partial<ProjectConfig>) => {
@@ -861,26 +861,10 @@ export const computeFormControllerPublicTokens = (
  );
  const mappedSubmitLabel = (mappedSubmitButton?.props as ButtonBlockProps | undefined)?.label ?? null;

-  const widthMode = props.formWidthMode ?? "auto";
-  const formStyle: CSSProperties = {};
+  // FormBlock 은 레이아웃/스타일을 가지지 않는 순수 컨트롤러이므로
+  // formClassName 은 고정 기본값만 사용하고, formStyle 은 항상 빈 객체로 유지한다.
  const formClassNames = ["space-y-3"];
-
-  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();
-  }
+  const formStyle: CSSProperties = {};

  return {
    fields,
@@ -920,10 +904,8 @@ export const computeFormBlockExportTokens = (
    fallbackFields = props.fields;
  }

+  // FormBlock 은 Export 레이어에서도 컨테이너 배경/레이아웃 스타일을 가지지 않는다.
  const formStyleParts: string[] = [];
-  if (typeof props.backgroundColorCustom === "string" && props.backgroundColorCustom.trim() !== "") {
-    formStyleParts.push(`background-color:${props.backgroundColorCustom.trim()}`);
-  }

  return {
    hasControllerFields: controllerFields.length > 0,