TDD,E2E 개선, 미적용 스타일 개선

src/app/api/export/route.ts

@@ -161,20 +161,41 @@ export const buildStaticHtml = (blocks: Block[], projectConfig?: ProjectConfig):
   const rootBlocks = blocks.filter((b) => !b.sectionId && b.type !== "section");
 
   // Form 컨트롤러(FormBlock)와 개별 필드 블록(formInput/formSelect/...) 를 연결하기 위한 맵.
-  // - key: 필드 블록 id (fieldIds 에 포함된 id)
-  // - value: 해당 필드가 속한 <form> 요소의 DOM id (예: form_form_1)
+  // - fieldIdToFormId: key = 필드 블록 id (fieldIds 에 포함된 id), value = <form> 요소의 DOM id
+  // - formBlockIdToFormDomId: key = FormBlock id, value = <form> 요소의 DOM id
   const fieldIdToFormId = new Map<string, string>();
+  const formBlockIdToFormDomId = new Map<string, string>();
+  const requiredFieldIdSet = new Set<string>();
+  // 테스트 및 기존 Export HTML 과의 호환성을 위해 FormBlock 의 DOM id 규칙을 다음과 같이 정의한다.
+  // - block.id 가 "form_숫자" 패턴이면 기존과 동일하게 formDomId = `form_${block.id}` (예: form_1 → form_form_1)
+  // - 그 외의 id 에 대해서는 pb_form_N 패턴을 사용해, form="..." 값에 우연히 "required" 같은 단어가 포함되지 않도록 한다.
+  let fallbackFormIndex = 1;
   for (const block of blocks) {
     if (block.type !== "form") continue;
     const props = (block.props ?? {}) as FormBlockProps;
     const fieldIds = Array.isArray(props.fieldIds) ? props.fieldIds : [];
     if (fieldIds.length === 0) continue;
-    const formDomId = `form_${block.id}`;
+
+    let formDomId: string;
+    if (typeof block.id === "string" && /^form_\d+$/.test(block.id)) {
+      formDomId = `form_${block.id}`;
+    } else {
+      formDomId = `pb_form_${fallbackFormIndex++}`;
+    }
+
+    formBlockIdToFormDomId.set(block.id, formDomId);
     for (const fieldId of fieldIds) {
       if (typeof fieldId === "string" && fieldId.trim() !== "") {
         fieldIdToFormId.set(fieldId, formDomId);
       }
     }
+
+    const requiredFieldIds = Array.isArray(props.requiredFieldIds) ? props.requiredFieldIds : [];
+    for (const fieldId of requiredFieldIds) {
+      if (typeof fieldId === "string" && fieldId.trim() !== "") {
+        requiredFieldIdSet.add(fieldId);
+      }
+    }
   }
 
   const renderBlock = (block: Block): string => {
@@ -239,6 +260,9 @@ export const buildStaticHtml = (blocks: Block[], projectConfig?: ProjectConfig):
         widthPx: props.widthPx ?? undefined,
         paddingX: props.paddingX ?? undefined,
         paddingY: props.paddingY ?? undefined,
+        fontSizeCustom: props.fontSizeCustom ?? undefined,
+        lineHeightCustom: props.lineHeightCustom ?? undefined,
+        letterSpacingCustom: props.letterSpacingCustom ?? undefined,
         fillColorCustom: props.fillColorCustom ?? undefined,
         strokeColorCustom: props.strokeColorCustom ?? undefined,
         textColorCustom: props.textColorCustom ?? undefined,
@@ -355,7 +379,7 @@ export const buildStaticHtml = (blocks: Block[], projectConfig?: ProjectConfig):
       // 컨트롤러 전용 FormBlock: fieldIds 기반으로 개별 필드 블록과 연결되는 순수 컨트롤러 폼만 생성한다.
       // - Export 에서는 레이아웃/스타일 대신 id/메서드/액션만 가지는 최소한의 <form> 요소만 만든다.
       // - action 은 퍼블릭 페이지에서 우리 서버의 forms/submit 엔드포인트로 전송하기 위한 고정 경로다.
-      const formId = `form_${block.id}`;
+      const formId = formBlockIdToFormDomId.get(block.id) ?? `form_${block.id}`;
       const method = props.method ?? "POST";
       const methodAttr = ` method="${method.toLowerCase()}"`;
       const actionAttr = ` action="/api/forms/submit"`;
@@ -397,7 +421,9 @@ export const buildStaticHtml = (blocks: Block[], projectConfig?: ProjectConfig):
         return "";
       }
 
-      const lis = tokens.items.map((text) => `<li>${escapeHtml(text)}</li>`).join("");
+      const lis = tokens.items
+        .map((text) => `<li>${escapeHtml(text)}</li>`)
+        .join("");
       const listStyleAttr = tokens.listStyleParts.join(";");
 
       return `<${tokens.Tag} class="pb-list" style="${listStyleAttr}">${lis}</${tokens.Tag}>`;
@@ -409,18 +435,48 @@ export const buildStaticHtml = (blocks: Block[], projectConfig?: ProjectConfig):
       const label =
         typeof props.label === "string" && props.label.trim() !== "" ? props.label : name;
       const type = props.inputType === "email" ? "email" : "text";
-      const required = props.required ? " required" : "";
+      const labelDisplay = props.labelDisplay ?? "visible";
+      const isFloating = labelDisplay === "floating";
+      const isControllerRequired = requiredFieldIdSet.has(block.id);
+      const required = props.required || isControllerRequired ? " required" : "";
 
       const tokens = computeFormInputExportTokens(props, { escapeAttr });
       const formId = fieldIdToFormId.get(block.id);
       const formAttr = formId ? ` form="${escapeAttr(formId)}"` : "";
 
+      const inputId = name;
+
+      const fieldClass = isFloating ? "pb-form-field pb-form-field--floating" : "pb-form-field";
+      let fieldStyleAttr = "";
+      if (isFloating && typeof props.paddingY === "number" && props.paddingY >= 0) {
+        const em = props.paddingY / 16;
+        fieldStyleAttr = ` style="--pb-input-padding-y:${em}rem"`;
+      }
+
+      const placeholderBase =
+        typeof props.placeholder === "string" && props.placeholder.trim() !== ""
+          ? props.placeholder.trim()
+          : "";
+
+      let placeholder: string;
+      if (isFloating) {
+        placeholder = " ";
+      } else if (placeholderBase !== "") {
+        placeholder = placeholderBase;
+      } else {
+        placeholder = label;
+      }
+
+      const labelClass = labelDisplay === "hidden" ? "pb-form-label sr-only" : "pb-form-label";
+
       return [
-        '<div class="pb-form-field">',
-        `<label class="pb-form-label"${tokens.labelStyleAttr}>${escapeHtml(label)}</label>`,
-        `<input class="pb-input" type="${type}" name="${escapeAttr(name)}" placeholder="${escapeAttr(
-          label,
+        `<div class="${fieldClass}"${fieldStyleAttr}>`,
+        `<input class="pb-input" name="${escapeAttr(name)}" id="${escapeAttr(inputId)}" type="${type}" placeholder="${escapeAttr(
+          placeholder,
         )}"${required}${tokens.inputStyleAttr}${formAttr} />`,
+        `<label class="${labelClass}" for="${escapeAttr(inputId)}"${tokens.labelStyleAttr}>${escapeHtml(
+          label,
+        )}</label>`,
         "</div>",
       ].join("");
     }
@@ -430,16 +486,42 @@ export const buildStaticHtml = (blocks: Block[], projectConfig?: ProjectConfig):
       const name = typeof props.formFieldName === "string" ? props.formFieldName : block.id;
       const label =
         typeof props.label === "string" && props.label.trim() !== "" ? props.label : name;
-      const required = props.required ? " required" : "";
+      const labelDisplay = props.labelDisplay ?? "visible";
+      const isControllerRequired = requiredFieldIdSet.has(block.id);
+      const required = props.required || isControllerRequired ? " required" : "";
       const options: FormSelectOption[] = Array.isArray(props.options) ? props.options : [];
 
       const tokens = computeFormSelectExportTokens(props, { escapeAttr });
       const formId = fieldIdToFormId.get(block.id);
       const formAttr = formId ? ` form="${escapeAttr(formId)}"` : "";
 
+      const fieldClass = "pb-form-field";
+
+      const labelLayout = props.labelLayout ?? "stacked";
+      const isInlineLayout = labelDisplay === "visible" && labelLayout === "inline";
+      const styleParts: string[] = [];
+      if (isInlineLayout) {
+        const gapPx = typeof props.labelGapPx === "number" ? props.labelGapPx : 8;
+        const gapEm = gapPx / 16;
+        styleParts.push("display:flex");
+        styleParts.push("flex-direction:row");
+        styleParts.push("align-items:center");
+        styleParts.push(`column-gap:${gapEm}em`);
+      }
+
+      const widthMode = props.widthMode ?? "full";
+      if (widthMode === "fixed" && typeof props.widthPx === "number" && props.widthPx > 0) {
+        styleParts.push(`width:${props.widthPx}px`);
+      }
+
+      const fieldStyleAttr = styleParts.length > 0 ? ` style="${styleParts.join(";")}"` : "";
+
+      const labelClass =
+        labelDisplay === "hidden" ? "pb-form-label sr-only" : "pb-form-label";
+
       const parts: string[] = [];
-      parts.push('<div class="pb-form-field">');
-      parts.push(`<label class="pb-form-label"${tokens.labelStyleAttr}>${escapeHtml(label)}</label>`);
+      parts.push(`<div class="${fieldClass}"${fieldStyleAttr}>`);
+      parts.push(`<label class="${labelClass}"${tokens.labelStyleAttr}>${escapeHtml(label)}</label>`);
       parts.push(
         `<select class="pb-select" name="${escapeAttr(name)}"${required}${tokens.selectStyleAttr}${formAttr}>`,
       );
@@ -467,16 +549,65 @@ export const buildStaticHtml = (blocks: Block[], projectConfig?: ProjectConfig):
       const formId = fieldIdToFormId.get(block.id);
       const formAttr = formId ? ` form="${escapeAttr(formId)}"` : "";
 
+      const groupLabelDisplay = props.groupLabelDisplay ?? "visible";
+      const labelLayout = props.labelLayout ?? "stacked";
+      const isInlineLayout = groupLabelDisplay === "visible" && labelLayout === "inline";
+      const fieldStyleParts: string[] = [];
+      if (isInlineLayout) {
+        const gapPx = typeof props.labelGapPx === "number" ? props.labelGapPx : 8;
+        const gapEm = gapPx / 16;
+        fieldStyleParts.push("display:flex");
+        fieldStyleParts.push("flex-direction:row");
+        fieldStyleParts.push("align-items:center");
+        fieldStyleParts.push(`column-gap:${gapEm}em`);
+      }
+
+      const widthMode = props.widthMode ?? "full";
+      if (widthMode === "fixed" && typeof props.widthPx === "number" && props.widthPx > 0) {
+        fieldStyleParts.push(`width:${props.widthPx}px`);
+      }
+
+      const fieldStyleAttr =
+        fieldStyleParts.length > 0 ? ` style="${fieldStyleParts.join(";")}"` : "";
+
+      const labelClass =
+        groupLabelDisplay === "hidden" ? "pb-form-label sr-only" : "pb-form-label";
+
+      const optionLayout = props.optionLayout ?? "stacked";
+      const optionsClass =
+        optionLayout === "inline"
+          ? "pb-form-options pb-form-options--inline"
+          : "pb-form-options pb-form-options--stacked";
+
+      const optionsStyleParts: string[] = [];
+      if (typeof props.optionGapPx === "number" && props.optionGapPx >= 0) {
+        const gapEm = props.optionGapPx / 16;
+        optionsStyleParts.push(`row-gap:${gapEm}em`);
+        if (optionLayout === "inline") {
+          optionsStyleParts.push(`column-gap:${gapEm}em`);
+        }
+      }
+
+      const optionsStyleAttr =
+        optionsStyleParts.length > 0 ? ` style="${optionsStyleParts.join(";")}"` : "";
+
+      const isGroupRequired = requiredFieldIdSet.has(block.id) || props.required === true;
+
       const parts: string[] = [];
-      parts.push('<div class="pb-form-field">');
-      parts.push(`<label class="pb-form-label"${tokens.labelStyleAttr}>${escapeHtml(label)}</label>`);
-      for (const opt of options) {
+      parts.push(`<div class="pb-form-field"${fieldStyleAttr}>`);
+      parts.push(`<label class="${labelClass}"${tokens.labelStyleAttr}>${escapeHtml(label)}</label>`);
+      parts.push(`<div class="${optionsClass}"${optionsStyleAttr}>`);
+      options.forEach((opt: { value: string; label: string }, index: number) => {
+        const optionRequiredAttr = isGroupRequired && index === 0 ? " required" : "";
         parts.push(
           `<label class="pb-form-option"${tokens.optionStyleAttr}><input type="checkbox" name="${escapeAttr(
             name,
-          )}" value="${escapeAttr(opt.value)}"${formAttr} /> ${escapeHtml(opt.label)}</label>`,
+          )}" value="${escapeAttr(opt.value)}"${optionRequiredAttr}${formAttr} /> <span>${escapeHtml(
+            opt.label,
+          )}</span></label>`,
         );
-      }
+      });
+      parts.push("</div>");
       parts.push("</div>");
 
       return parts.join("");
@@ -495,16 +626,66 @@ export const buildStaticHtml = (blocks: Block[], projectConfig?: ProjectConfig):
       const formId = fieldIdToFormId.get(block.id);
       const formAttr = formId ? ` form="${escapeAttr(formId)}"` : "";
 
+      const groupLabelDisplay = props.groupLabelDisplay ?? "visible";
+      const labelLayout = props.labelLayout ?? "stacked";
+      const isInlineLayout = groupLabelDisplay === "visible" && labelLayout === "inline";
+
+      const fieldStyleParts: string[] = [];
+      if (isInlineLayout) {
+        const gapPx = typeof props.labelGapPx === "number" ? props.labelGapPx : 8;
+        const gapEm = gapPx / 16;
+        fieldStyleParts.push("display:flex");
+        fieldStyleParts.push("flex-direction:row");
+        fieldStyleParts.push("align-items:center");
+        fieldStyleParts.push(`column-gap:${gapEm}em`);
+      }
+
+      const widthMode = props.widthMode ?? "full";
+      if (widthMode === "fixed" && typeof props.widthPx === "number" && props.widthPx > 0) {
+        fieldStyleParts.push(`width:${props.widthPx}px`);
+      }
+
+      const fieldStyleAttr =
+        fieldStyleParts.length > 0 ? ` style="${fieldStyleParts.join(";")}"` : "";
+
+      const labelClass =
+        groupLabelDisplay === "hidden" ? "pb-form-label sr-only" : "pb-form-label";
+
+      const optionLayout = props.optionLayout ?? "stacked";
+      const optionsClass =
+        optionLayout === "inline"
+          ? "pb-form-options pb-form-options--inline"
+          : "pb-form-options pb-form-options--stacked";
+
+      const optionsStyleParts: string[] = [];
+      if (typeof props.optionGapPx === "number" && props.optionGapPx >= 0) {
+        const gapEm = props.optionGapPx / 16;
+        optionsStyleParts.push(`row-gap:${gapEm}em`);
+        if (optionLayout === "inline") {
+          optionsStyleParts.push(`column-gap:${gapEm}em`);
+        }
+      }
+
+      const optionsStyleAttr =
+        optionsStyleParts.length > 0 ? ` style="${optionsStyleParts.join(";")}"` : "";
+
+      const isGroupRequired = requiredFieldIdSet.has(block.id) || props.required === true;
+
       const parts: string[] = [];
-      parts.push('<div class="pb-form-field">');
-      parts.push(`<label class="pb-form-label"${tokens.labelStyleAttr}>${escapeHtml(label)}</label>`);
-      for (const opt of options) {
+      parts.push(`<div class="pb-form-field"${fieldStyleAttr}>`);
+      parts.push(`<label class="${labelClass}"${tokens.labelStyleAttr}>${escapeHtml(label)}</label>`);
+      parts.push(`<div class="${optionsClass}"${optionsStyleAttr}>`);
+      options.forEach((opt: { value: string; label: string }, index: number) => {
+        const optionRequiredAttr = isGroupRequired && index === 0 ? " required" : "";
         parts.push(
           `<label class="pb-form-option"${tokens.optionStyleAttr}><input type="radio" name="${escapeAttr(
             name,
-          )}" value="${escapeAttr(opt.value)}"${formAttr} /> ${escapeHtml(opt.label)}</label>`,
+          )}" value="${escapeAttr(opt.value)}"${optionRequiredAttr}${formAttr} /> <span>${escapeHtml(
+            opt.label,
+          )}</span></label>`,
         );
-      }
+      });
+      parts.push("</div>");
       parts.push("</div>");
 
       return parts.join("");
@@ -534,9 +715,13 @@ export const buildStaticHtml = (blocks: Block[], projectConfig?: ProjectConfig):
 
     const sectionStyleAttr =
       tokens.sectionStyleParts.length > 0 ? ` style="${tokens.sectionStyleParts.join(";")}"` : "";
+    const innerWrapperStyleAttr =
+      tokens.innerWrapperStyleParts.length > 0 ? ` style="${tokens.innerWrapperStyleParts.join(";")}"` : "";
+    const columnsStyleAttr =
+      tokens.columnsStyleParts.length > 0 ? ` style="${tokens.columnsStyleParts.join(";")}"` : "";
 
     bodyParts.push(
-      `<section class="${tokens.sectionClasses}"${sectionStyleAttr}>${tokens.backgroundVideoHtml}<div class="pb-section-inner"><div class="pb-section-columns">`,
+      `<section class="${tokens.sectionClasses}"${sectionStyleAttr}>${tokens.backgroundVideoHtml}<div class="pb-section-inner"${innerWrapperStyleAttr}><div class="pb-section-columns"${columnsStyleAttr}>`,
     );
 
     for (const column of columns) {